feat: add component radio

Author: Ohh-889

packages/ui/package.json

@@ -11,7 +11,9 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "pnpm run pgk:prod && pnpm run build:components && pnpm run registry",
     "build:components": "tsdown",
@@ -37,6 +39,7 @@
     "@radix-ui/react-menu": "^2.1.15",
     "@radix-ui/react-menubar": "^1.1.15",
     "@radix-ui/react-popover": "1.1.14",
+    "@radix-ui/react-radio-group": "^1.3.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/radio/Radio.tsx

@@ -0,0 +1,42 @@
+import RadioLabel from '../label/Label';
+
+import RadioGroupItem from './RadioGroupItem';
+import RadioIndicator from './RadioIndicator';
+import RadioRoot from './RadioRoot';
+import type { RadioProps } from './types';
+
+const Radio = (props: RadioProps) => {
+  const { className, classNames, color, id, label, size, value, ...rest } = props;
+
+  return (
+    <RadioRoot
+      className={className || classNames?.root}
+      size={size}
+    >
+      <RadioGroupItem
+        color={color}
+        value={value}
+        id={id || value}
+        {...rest}
+        size={size}
+      >
+        <RadioIndicator
+          className={classNames?.indicator}
+          color={color}
+        />
+      </RadioGroupItem>
+
+      {label && (
+        <RadioLabel
+          className={classNames?.label}
+          htmlFor={id || value}
+          size={size}
+        >
+          {label}
+        </RadioLabel>
+      )}
+    </RadioRoot>
+  );
+};
+
+export default Radio;

packages/ui/src/components/radio/RadioGroup.tsx

@@ -0,0 +1,34 @@
+import { Root } from '@radix-ui/react-radio-group';
+
+import { cn } from '@/lib/utils';
+
+import Radio from './Radio';
+import { radioVariants } from './radio-variants';
+import type { RadioGroupProps } from './types';
+
+const RadioGroup = (props: RadioGroupProps) => {
+  const { className, classNames, color, items, orientation, size, ...rest } = props;
+
+  const { group } = radioVariants({ orientation, size });
+
+  const mergedCls = cn(group(), className || classNames?.group);
+
+  return (
+    <Root
+      className={mergedCls}
+      {...rest}
+    >
+      {items.map(item => (
+        <Radio
+          classNames={classNames}
+          color={color}
+          key={item.value}
+          size={size}
+          {...item}
+        />
+      ))}
+    </Root>
+  );
+};
+
+export default RadioGroup;

packages/ui/src/components/radio/RadioGroupItem.tsx

@@ -0,0 +1,26 @@
+import { Item } from '@radix-ui/react-radio-group';
+
+import { cn } from '@/lib/utils';
+
+import { radioVariants } from './radio-variants';
+import type { RadioGroupItemProps } from './types';
+
+const RadioGroupItem = (props: RadioGroupItemProps) => {
+  const { className, color, size, ...rest } = props;
+
+  const { control } = radioVariants({ color, size });
+
+  const mergedCls = cn(control(), className);
+
+  return (
+    <Item
+      className={mergedCls}
+      data-color={color}
+      data-size={size}
+      data-slot="radio-group-item"
+      {...rest}
+    />
+  );
+};
+
+export default RadioGroupItem;

packages/ui/src/components/radio/RadioIndicator.tsx

@@ -0,0 +1,25 @@
+import { Indicator } from '@radix-ui/react-radio-group';
+
+import { cn } from '@/lib/utils';
+
+import { radioVariants } from './radio-variants';
+import type { RadioIndicatorProps } from './types';
+
+const RadioIndicator = (props: RadioIndicatorProps) => {
+  const { className, color, ...rest } = props;
+
+  const { indicator } = radioVariants({ color });
+
+  const mergedCls = cn(indicator(), className);
+
+  return (
+    <Indicator
+      className={mergedCls}
+      data-color={color}
+      data-slot="radio-indicator"
+      {...rest}
+    />
+  );
+};
+
+export default RadioIndicator;

packages/ui/src/components/radio/RadioRoot.tsx

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils';
+
+import { radioVariants } from './radio-variants';
+import type { RadioRootProps } from './types';
+
+const RadioRoot = (props: RadioRootProps) => {
+  const { className, size, ...rest } = props;
+
+  const { root } = radioVariants({ size });
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      data-size={size}
+      data-slot="radio-root"
+      {...rest}
+    />
+  );
+};
+
+export default RadioRoot;

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

@@ -0,0 +1,8 @@
+export { default as Radio } from './Radio';
+
+export { default as RadioGroup } from './RadioGroup';
+export { default as RadioGroupItem } from './RadioGroupItem';
+export { default as RadioIndicator } from './RadioIndicator';
+export { default as RadioRoot } from './RadioRoot';
+
+export * from './types';

packages/ui/src/components/radio/radio-variants.ts

@@ -0,0 +1,98 @@
+import { tv } from 'tailwind-variants';
+
+export const radioVariants = tv({
+  defaultVariants: {
+    color: 'primary',
+    orientation: 'horizontal',
+    size: 'md'
+  },
+  slots: {
+    control: [
+      'peer relative shrink-0 rounded-full border shadow',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+      'disabled:cursor-not-allowed disabled:opacity-50'
+    ],
+    group: 'flex',
+    indicator: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-1/2 rounded-full ',
+    label: '',
+    root: 'flex items-center'
+  },
+  variants: {
+    color: {
+      accent: {
+        control: `border-accent-foreground focus-visible:ring-accent-foreground/20`,
+        indicator: `bg-accent-foreground/60`
+      },
+      carbon: {
+        control: `border-carbon focus-visible:ring-carbon`,
+        indicator: `bg-carbon`
+      },
+      destructive: {
+        control: `border-destructive focus-visible:ring-destructive`,
+        indicator: `bg-destructive`
+      },
+      info: {
+        control: `border-info focus-visible:ring-info`,
+        indicator: `bg-info`
+      },
+      primary: {
+        control: `border-primary focus-visible:ring-primary`,
+        indicator: `bg-primary`
+      },
+      secondary: {
+        control: `border-secondary-foreground focus-visible:ring-secondary-foreground/20`,
+        indicator: `bg-secondary-foreground/60`
+      },
+      success: {
+        control: `border-success focus-visible:ring-success`,
+        indicator: `bg-success`
+      },
+      warning: {
+        control: `border-warning focus-visible:ring-warning`,
+        indicator: `bg-warning`
+      }
+    },
+    orientation: {
+      horizontal: {
+        group: 'items-center'
+      },
+      vertical: {
+        group: 'flex-col'
+      }
+    },
+    size: {
+      '2xl': {
+        control: 'size-6',
+        group: 'gap-x-4.5 gap-y-3.5',
+        root: 'gap-3.5'
+      },
+      lg: {
+        control: 'size-4.5',
+        group: 'gap-x-3.5 gap-y-2.5',
+        root: 'gap-2.5'
+      },
+      md: {
+        control: 'size-4',
+        group: 'gap-x-3 gap-y-2',
+        root: 'gap-2'
+      },
+      sm: {
+        control: 'size-3.5',
+        group: 'gap-x-2.5 gap-y-1.75',
+        root: 'gap-1.75'
+      },
+      xl: {
+        control: 'size-5',
+        group: 'gap-x-4 gap-y-3',
+        root: 'gap-3'
+      },
+      xs: {
+        control: 'size-3',
+        group: 'gap-x-2 gap-y-1.5',
+        root: 'gap-1.5'
+      }
+    }
+  }
+});
+
+export type RadioSlots = keyof typeof radioVariants.slots;

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

@@ -0,0 +1,33 @@
+import type {
+  RadioGroupIndicatorProps as _RadioGroupIndicatorProps,
+  RadioGroupItemProps as _RadioGroupItemProps,
+  RadioGroupProps as _RadioGroupProps
+} from '@radix-ui/react-radio-group';
+import type { ReactNode } from 'react';
+
+import type { BaseComponentProps, BaseNodeProps, ClassValue, ThemeColor } from '@/types/other';
+
+import type { RadioSlots } from './radio-variants';
+
+export type RadioClassNames = Partial<Record<RadioSlots, ClassValue>>;
+
+export interface RadioProps extends RadioGroupItemProps {
+  classNames?: Pick<RadioClassNames, 'control' | 'indicator' | 'label' | 'root'>;
+  label?: ReactNode;
+}
+
+export interface RadioGroupProps extends BaseNodeProps<_RadioGroupProps> {
+  classNames?: RadioClassNames;
+  color?: ThemeColor;
+  items: Omit<RadioProps, 'classNames' | 'color' | 'size'>[];
+}
+
+export interface RadioGroupItemProps extends BaseNodeProps<_RadioGroupItemProps> {
+  color?: ThemeColor;
+}
+
+export interface RadioIndicatorProps extends BaseNodeProps<_RadioGroupIndicatorProps> {
+  color?: ThemeColor;
+}
+
+export interface RadioRootProps extends BaseComponentProps<'div'> {}

packages/ui/src/index.ts

@@ -52,6 +52,8 @@ export * from './components/label';
 
 export * from './components/popover';
 
+export * from './components/radio';
+
 export * from './components/scroll-area';
 
 export * from './components/skeleton';