feat: add component label

Author: Ohh-889

packages/ui-variants/src/index.ts

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

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

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+
+export const labelVariants = tv({
+  base: 'font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  defaultVariants: {
+    size: 'md'
+  },
+  variants: {
+    size: {
+      '2xl': 'text-xl',
+      lg: 'text-base',
+      md: 'text-sm',
+      sm: 'text-xs',
+      xl: 'text-lg',
+      xs: 'text-2xs'
+    }
+  }
+});

packages/ui/package.json

@@ -15,7 +15,9 @@
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-compose-refs": "1.1.2",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "1.2.3",

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

@@ -0,0 +1,3 @@
+export { default as Label } from './source/Label';
+
+export type { LabelProps } from './types';

packages/ui/src/components/label/source/Label.tsx

@@ -0,0 +1,23 @@
+import { Root } from '@radix-ui/react-label';
+import { cn, labelVariants } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { LabelProps } from '../types';
+
+const Label = forwardRef<React.ComponentRef<typeof Root>, LabelProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const mergedCls = cn(labelVariants({ size }), className);
+
+  return (
+    <Root
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+Label.displayName = Root.displayName;
+
+export default Label;

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

@@ -0,0 +1,5 @@
+import type { LabelProps as _LabelProps } from '@radix-ui/react-label';
+
+import type { BaseNodeProps } from '../../types';
+
+export type LabelProps = BaseNodeProps<_LabelProps>;

packages/ui/src/index.ts

@@ -20,6 +20,8 @@ export * from './components/carousel';
 
 export * from './components/divider';
 
+export * from './components/label';
+
 export * from './components/scroll-area';
 
 export * from './components/sonner';