feat: add component chip

Author: Ohh-889

packages/ui-variants/src/index.ts

@@ -13,6 +13,7 @@ export * from './variants/button-group';
 export * from './variants/card';
 export * from './variants/carousel';
 export * from './variants/checkbox';
+export * from './variants/chip';
 export * from './variants/divider';
 export * from './variants/label';
 export * from './variants/scroll-area';

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

@@ -0,0 +1,82 @@
+import { tv } from 'tailwind-variants';
+import type { VariantProps } from 'tailwind-variants';
+
+export const chipVariants = tv({
+  defaultVariants: {
+    color: 'primary',
+    position: 'top-right',
+    size: 'md'
+  },
+  slots: {
+    content: `absolute flex justify-center items-center whitespace-nowrap rounded-full transform`,
+    root: 'relative'
+  },
+  variants: {
+    color: {
+      accent: {
+        content: 'bg-accent text-accent-foreground'
+      },
+      carbon: {
+        content: 'bg-carbon text-carbon-foreground'
+      },
+      destructive: {
+        content: 'bg-destructive text-destructive-foreground'
+      },
+      info: {
+        content: 'bg-info text-info-foreground'
+      },
+      primary: {
+        content: 'bg-primary text-primary-foreground'
+      },
+      secondary: {
+        content: 'bg-secondary text-secondary-foreground'
+      },
+      success: {
+        content: 'bg-success text-success-foreground'
+      },
+      warning: {
+        content: 'bg-warning text-warning-foreground'
+      }
+    },
+    position: {
+      'bottom-left': {
+        content: 'left-0 bottom-0 -translate-x-1/2 translate-y-1/2'
+      },
+      'bottom-right': {
+        content: 'right-0 bottom-0 translate-x-1/2 translate-y-1/2'
+      },
+      'top-left': {
+        content: 'left-0 top-0 -translate-x-1/2 -translate-y-1/2'
+      },
+      'top-right': {
+        content: 'right-0 top-0 translate-x-1/2 -translate-y-1/2'
+      }
+    },
+    size: {
+      '2xl': {
+        content: `min-h-5 px-2.5 text-base leading-relaxed`
+      },
+      lg: {
+        content: `min-h-3.5 px-1.75 text-xs leading-relaxed`
+      },
+      md: {
+        content: `min-h-3 px-1.5 text-2xs leading-relaxed`
+      },
+      sm: {
+        content: `min-h-2.5 px-1.25 text-3xs leading-relaxed`
+      },
+      xl: {
+        content: `min-h-4 px-2 text-sm leading-relaxed`
+      },
+      xs: {
+        content: `min-h-2 px-1 text-4xs leading-relaxed`
+      }
+    }
+  }
+});
+
+type ChipVariants = VariantProps<typeof chipVariants>;
+
+export type ChipPosition = NonNullable<ChipVariants['position']>;
+
+export type ChipSlots = keyof typeof chipVariants.slots;

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

@@ -0,0 +1,5 @@
+export { default as Chip } from './source/Chip';
+export { default as ChipContent } from './source/ChipContent';
+export { default as ChipRoot } from './source/ChipRoot';
+
+export * from './types';

packages/ui/src/components/chip/source/Chip.tsx

@@ -0,0 +1,35 @@
+import { forwardRef } from 'react';
+
+import type { ChipProps } from '../types';
+
+import ChipContent from './ChipContent';
+import ChipRoot from './ChipRoot';
+
+const Chip = forwardRef<HTMLDivElement, ChipProps>((props, ref) => {
+  const { children, className, classNames, color, content, open = true, position, size, ...rest } = props;
+
+  return (
+    <ChipRoot
+      className={className || classNames?.root}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+
+      {open && (
+        <ChipContent
+          className={classNames?.content}
+          color={color}
+          position={position}
+          size={size}
+        >
+          {content}
+        </ChipContent>
+      )}
+    </ChipRoot>
+  );
+});
+
+Chip.displayName = 'Chip';
+
+export default Chip;

packages/ui/src/components/chip/source/ChipContent.tsx

@@ -0,0 +1,24 @@
+import { chipVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { ChipContentProps } from '../types';
+
+const ChipContent = forwardRef<HTMLSpanElement, ChipContentProps>((props, ref) => {
+  const { className, color, position, size, ...rest } = props;
+
+  const { content } = chipVariants({ color, position, size });
+
+  const mergedCls = cn(content(), className);
+
+  return (
+    <span
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+ChipContent.displayName = 'ChipContent';
+
+export default ChipContent;

packages/ui/src/components/chip/source/ChipRoot.tsx

@@ -0,0 +1,24 @@
+import { chipVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { ChipRootProps } from '../types';
+
+const ChipRoot = forwardRef<HTMLDivElement, ChipRootProps>((props, ref) => {
+  const { className, ...rest } = props;
+
+  const { root } = chipVariants();
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+ChipRoot.displayName = 'ChipRoot';
+
+export default ChipRoot;

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

@@ -0,0 +1,23 @@
+import type { ChipPosition, ChipSlots, ClassValue, ThemeColor, ThemeSize } from '@soybean-react-ui/variants';
+
+import type { BaseComponentProps } from '../../types';
+
+export type ChipRootProps = BaseComponentProps<'div'>;
+
+export interface ChipContentProps extends BaseComponentProps<'span'> {
+  color?: ThemeColor;
+  position?: ChipPosition;
+  size?: ThemeSize;
+}
+
+export type ChipUi = Partial<Record<ChipSlots, ClassValue>>;
+
+export interface ChipProps
+  extends Omit<ChipRootProps, 'color' | 'content'>,
+    Pick<ChipContentProps, 'color' | 'position' | 'size'> {
+  classNames?: ChipUi;
+  content?: React.ReactNode;
+  open?: boolean;
+}
+
+export { ChipPosition };

packages/ui/src/index.ts

@@ -20,6 +20,8 @@ export * from './components/carousel';
 
 export * from './components/checkbox';
 
+export * from './components/chip';
+
 export * from './components/divider';
 
 export * from './components/label';

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

@@ -0,0 +1,107 @@
+import type { ChipPosition, ThemeColor, ThemeSize } from 'soybean-react-ui';
+import { Button, Card, Chip } from 'soybean-react-ui';
+
+const colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];
+
+const positions: ChipPosition[] = ['top-right', 'bottom-right', 'top-left', 'bottom-left'];
+
+const sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+const ChipPage = () => {
+  return (
+    <div className="flex-c gap-4">
+      <Card
+        split
+        title="Color"
+      >
+        <div className="flex gap-3">
+          {colors.map(color => (
+            <div key={color}>
+              <Chip color={color}>
+                <Button variant="dashed">{color}</Button>
+              </Chip>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      <Card
+        split
+        title="Color With Text"
+      >
+        <div className="flex gap-4">
+          {colors.map(color => (
+            <div key={color}>
+              <Chip
+                color={color}
+                content="99+"
+              >
+                <Button variant="dashed">{color}</Button>
+              </Chip>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      <Card
+        split
+        title="Positions"
+      >
+        <div className="flex gap-3">
+          {positions.map(position => (
+            <div key={position}>
+              <Chip position={position}>
+                <Button
+                  className="w-30"
+                  variant="dashed"
+                >
+                  {position}
+                </Button>
+              </Chip>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      <Card
+        split
+        title="Size"
+      >
+        <div className="flex gap-3">
+          {sizes.map(size => (
+            <div key={size}>
+              <Chip size={size}>
+                <Button
+                  size={size}
+                  variant="soft"
+                >
+                  {size}
+                </Button>
+              </Chip>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex mt-6 gap-3">
+          {sizes.map(size => (
+            <div key={size}>
+              <Chip
+                content="99+"
+                size={size}
+              >
+                <Button
+                  size={size}
+                  variant="soft"
+                >
+                  {size}
+                </Button>
+              </Chip>
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default ChipPage;