feat: add component badge

Author: Ohh-889

packages/ui-variants/src/index.ts

@@ -2,6 +2,7 @@ export * from './shared';
 
 export * from './types';
 
+export * from './variants/badge';
 export * from './variants/button';
 export * from './variants/button-group';
 export * from './variants/card';

packages/ui-variants/src/variants/badge.ts

@@ -0,0 +1,132 @@
+import { tv } from 'tailwind-variants';
+import type { VariantProps } from 'tailwind-variants';
+
+export const badgeVariants = tv({
+  base: 'inline-flex items-center border font-semibold',
+  variants: {
+    color: {
+      primary: 'border-primary text-primary',
+      destructive: 'border-destructive text-destructive',
+      success: 'border-success text-success',
+      warning: 'border-warning text-warning',
+      info: 'border-info text-info',
+      carbon: 'border-carbon text-carbon',
+      secondary: 'border-secondary-foreground/50 text-secondary-foreground',
+      accent: 'border-accent-foreground/50 text-accent-foreground'
+    },
+    variant: {
+      solid: '',
+      pure: 'bg-background text-foreground border-border',
+      outline: 'bg-background',
+      soft: 'border-0',
+      ghost: '',
+      raw: 'bg-transparent border-0'
+    },
+    size: {
+      xs: 'gap-0.5 h-3.5 px-1 text-4xs',
+      sm: 'gap-0.75 h-4 px-1.5 text-3xs',
+      md: 'gap-1 h-4.5 px-2 text-2xs',
+      lg: 'gap-1.25 h-5 px-2.5 text-xs',
+      xl: 'gap-1.5 h-6 px-3 text-sm',
+      '2xl': 'gap-2 h-7 px-4 text-base'
+    },
+    shape: {
+      auto: 'rounded-md',
+      rounded: 'rounded-full'
+    }
+  },
+  compoundVariants: [
+    {
+      color: 'primary',
+      variant: 'solid',
+      class: `bg-primary text-primary-foreground`
+    },
+    {
+      color: 'destructive',
+      variant: 'solid',
+      class: `bg-destructive text-destructive-foreground`
+    },
+    {
+      color: 'success',
+      variant: 'solid',
+      class: `bg-success text-success-foreground`
+    },
+    {
+      color: 'warning',
+      variant: 'solid',
+      class: `bg-warning text-warning-foreground`
+    },
+    {
+      color: 'info',
+      variant: 'solid',
+      class: `bg-info text-info-foreground`
+    },
+    {
+      color: 'carbon',
+      variant: 'solid',
+      class: `bg-carbon text-carbon-foreground`
+    },
+    {
+      color: 'secondary',
+      variant: 'solid',
+      class: `bg-secondary text-secondary-foreground`
+    },
+    {
+      color: 'accent',
+      variant: 'solid',
+      class: `bg-accent text-accent-foreground`
+    },
+    {
+      color: 'primary',
+      variant: ['soft', 'ghost'],
+      class: 'bg-primary/10'
+    },
+    {
+      color: 'destructive',
+      variant: ['soft', 'ghost'],
+      class: 'bg-destructive/10'
+    },
+    {
+      color: 'success',
+      variant: ['soft', 'ghost'],
+      class: 'bg-success/10'
+    },
+    {
+      color: 'warning',
+      variant: ['soft', 'ghost'],
+      class: 'bg-warning/10'
+    },
+    {
+      color: 'info',
+      variant: ['soft', 'ghost'],
+      class: 'bg-info/10'
+    },
+    {
+      color: 'carbon',
+      variant: ['soft', 'ghost'],
+      class: 'bg-carbon/10'
+    },
+    {
+      color: 'secondary',
+      variant: ['soft', 'ghost'],
+      class: 'bg-secondary-foreground/5'
+    },
+    {
+      color: 'accent',
+      variant: ['soft', 'ghost'],
+      class: 'bg-accent-foreground/5'
+    }
+  ],
+  defaultVariants: {
+    color: 'primary',
+    variant: 'solid',
+    size: 'md',
+    shape: 'auto'
+  }
+});
+
+type BadgeVariants = VariantProps<typeof badgeVariants>;
+
+export type BadgeVariant = NonNullable<BadgeVariants['variant']>;
+
+export type BadgeShape = NonNullable<BadgeVariants['shape']>;

packages/ui/src/components/badge/index.ts

@@ -0,0 +1,3 @@
+export { default as Badge } from './source/Badge';
+
+export * from './types';

packages/ui/src/components/badge/source/Badge.tsx

@@ -0,0 +1,18 @@
+import { badgeVariants, cn } from '@soybean-react-ui/variants';
+
+import type { BadgeProps } from '../types';
+
+const Badge = (props: BadgeProps) => {
+  const { className, color, shape, size, variant, ...rest } = props;
+
+  const mergedCls = cn(badgeVariants({ color, shape, size, variant }), className);
+
+  return (
+    <div
+      {...rest}
+      className={mergedCls}
+    />
+  );
+};
+
+export default Badge;

packages/ui/src/components/badge/types.ts

@@ -0,0 +1,14 @@
+import type { BadgeShape, BadgeVariant, ThemeColor } from '@soybean-react-ui/variants';
+
+import type { BaseNodeProps } from '../../types/other';
+
+export interface BadgeProps extends BaseNodeProps<React.ComponentProps<'div'>> {
+  /** The color of the badge. */
+  color?: ThemeColor;
+  /** The shape of the badge. */
+  shape?: BadgeShape;
+  /** The variant of the badge. */
+  variant?: BadgeVariant;
+}
+
+export type { BadgeShape, BadgeVariant };

packages/ui/src/index.ts

@@ -1,3 +1,5 @@
+export * from './components/badge';
+
 export * from './components/button';
 
 export * from './components/card';

playground/src/app/(demo)/badge/page.tsx

@@ -0,0 +1,88 @@
+import { Badge, type BadgeShape, type BadgeVariant, Card, type ThemeColor, type ThemeSize } from 'soybean-react-ui';
+
+const colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];
+const variants: BadgeVariant[] = ['solid', 'pure', 'outline', 'soft', 'ghost', 'raw'];
+const sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+const shapes: BadgeShape[] = ['auto', 'rounded'];
+
+const BadgeDemo = () => {
+  return (
+    <div className="flex-c gap-4">
+      <Card
+        split
+        title="Color"
+      >
+        <div className="flex flex-wrap gap-[12px]">
+          {colors.map(color => (
+            <Badge
+              color={color}
+              key={color}
+            >
+              {color}
+            </Badge>
+          ))}
+        </div>
+      </Card>
+
+      <Card
+        split
+        title="Variant"
+      >
+        <div className="flex-c-stretch gap-[12px]">
+          {colors.map(color => (
+            <div
+              className="flex flex-wrap gap-[12px]"
+              key={color}
+            >
+              {variants.map(variant => (
+                <Badge
+                  color={color}
+                  key={variant}
+                  variant={variant}
+                >
+                  {variant}
+                </Badge>
+              ))}
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      <Card
+        split
+        title="Size"
+      >
+        <div className="flex flex-wrap gap-[12px]">
+          {sizes.map(size => (
+            <Badge
+              key={size}
+              size={size}
+              variant="soft"
+            >
+              {size}
+            </Badge>
+          ))}
+        </div>
+      </Card>
+
+      <Card
+        split
+        title="Shape"
+      >
+        <div className="flex flex-wrap gap-[12px]">
+          {shapes.map(shape => (
+            <Badge
+              key={shape}
+              shape={shape}
+              variant="ghost"
+            >
+              {shape}
+            </Badge>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default BadgeDemo;

playground/src/app/(demo)/card/page.tsx

@@ -16,7 +16,7 @@ const DemoCard: React.FC = () => {
         split
         title="Size"
       >
-        <div className="w-1/2 i-flex-c pr-10px lt-sm:w-full lt-sm:pr-0">
+        <div className="w-1/2 i-flex-c pr-[10px] lt-sm:w-full lt-sm:pr-0">
           {sizes.map(size => (
             <Card
               className="mb-12px"

pnpm-workspace.yaml

@@ -2,4 +2,3 @@ packages:
   - "apps/*"
   - "packages/*"
   - "playground"
-  - "primitives/*"