refactor: add component swith

Author: Ohh-889

packages/ui/src/components/switch/Switch.tsx

@@ -0,0 +1,30 @@
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import SwitchRoot from './SwitchRoot';
+import SwitchThumb from './SwitchThumb';
+import type { SwitchProps } from './types';
+
+const Switch = forwardRef<ComponentRef<typeof SwitchRoot>, SwitchProps>((props, ref) => {
+  const { children, className, classNames, size, ...rest } = props;
+
+  return (
+    <SwitchRoot
+      className={className || classNames?.root}
+      ref={ref}
+      size={size}
+      {...rest}
+    >
+      <SwitchThumb
+        className={classNames?.thumb}
+        size={size}
+      >
+        {children}
+      </SwitchThumb>
+    </SwitchRoot>
+  );
+});
+
+Switch.displayName = 'Switch';
+
+export default Switch;

packages/ui/src/components/switch/SwitchRoot.tsx

@@ -0,0 +1,28 @@
+import { Switch } from '@radix-ui/react-switch';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { switchVariants } from './switch-varianst';
+import type { SwitchRootProps } from './types';
+
+const SwitchRoot = forwardRef<ComponentRef<typeof Switch>, SwitchRootProps>((props, ref) => {
+  const { className, color, size, ...rest } = props;
+
+  const { root } = switchVariants({ color, size });
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <Switch
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+SwitchRoot.displayName = 'SwitchRoot';
+
+export default SwitchRoot;

packages/ui/src/components/switch/SwitchThumb.tsx

@@ -0,0 +1,29 @@
+import { Thumb } from '@radix-ui/react-switch';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { switchVariants } from './switch-varianst';
+import type { SwitchThumbProps } from './types';
+
+const SwitchThumb = forwardRef<ComponentRef<typeof Thumb>, SwitchThumbProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { thumb } = switchVariants({ size });
+
+  const mergedCls = cn(thumb(), className);
+
+  return (
+    <Thumb
+      className={mergedCls}
+      id="switch-thumb"
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+SwitchThumb.displayName = 'SwitchThumb';
+
+export default SwitchThumb;

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

@@ -0,0 +1,5 @@
+export { default as Switch } from './Switch';
+export { default as SwitchRoot } from './SwitchRoot';
+export { default as SwitchThumb } from './SwitchThumb';
+
+export * from './types';

packages/ui/src/components/switch/switch-varianst.ts

@@ -0,0 +1,91 @@
+// @unocss-include
+import { tv } from 'tailwind-variants';
+import type { VariantProps } from 'tailwind-variants';
+
+export const switchVariants = tv({
+  base: [],
+  defaultVariants: {
+    color: 'primary',
+    shape: 'rounded',
+    size: 'md'
+  },
+  slots: {
+    root: [
+      `peer shrink-0 inline-flex items-center rounded-full border-0 shadow-sm transition-colors duration-200`,
+      `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`,
+      `data-[state=unchecked]:bg-input`
+    ],
+    thumb: `flex justify-center items-center rounded-full shadow-lg transition-transform duration-200 bg-background pointer-events-none data-[state=unchecked]:translate-x-0.5`
+  },
+  variants: {
+    color: {
+      accent: {
+        root: `data-[state=checked]:bg-accent-foreground/20 focus-visible:ring-accent-foreground/20`
+      },
+      carbon: {
+        root: `data-[state=checked]:bg-carbon focus-visible:ring-carbon`
+      },
+      destructive: {
+        root: `data-[state=checked]:bg-destructive focus-visible:ring-destructive`
+      },
+      info: {
+        root: `data-[state=checked]:bg-info focus-visible:ring-info`
+      },
+      primary: {
+        root: `data-[state=checked]:bg-primary focus-visible:ring-primary`
+      },
+      secondary: {
+        root: `data-[state=checked]:bg-secondary-foreground/20 focus-visible:ring-secondary-foreground/20`
+      },
+      success: {
+        root: `data-[state=checked]:bg-success focus-visible:ring-success`
+      },
+      warning: {
+        root: `data-[state=checked]:bg-warning focus-visible:ring-warning`
+      }
+    },
+    shape: {
+      rounded: {
+        root: 'rounded-full',
+        thumb: 'rounded-full'
+      },
+      square: {
+        root: 'rounded-md',
+        thumb: 'rounded-sm'
+      }
+    },
+    size: {
+      '2xl': {
+        root: 'h-7 w-13',
+        thumb: 'size-6 data-[state=checked]:translate-x-6.5'
+      },
+      lg: {
+        root: 'h-5.5 w-10',
+        thumb: 'size-4.5 data-[state=checked]:translate-x-5'
+      },
+      md: {
+        root: 'h-5 w-9',
+        thumb: 'size-4 data-[state=checked]:translate-x-4.5'
+      },
+      sm: {
+        root: 'h-4.5 w-8',
+        thumb: 'size-3.5 data-[state=checked]:translate-x-4'
+      },
+      xl: {
+        root: 'h-6 w-11',
+        thumb: 'size-5 data-[state=checked]:translate-x-5.5'
+      },
+      xs: {
+        root: 'h-4 w-7',
+        thumb: 'size-3 data-[state=checked]:translate-x-3.5'
+      }
+    }
+  }
+});
+
+type SwitchVariants = VariantProps<typeof switchVariants>;
+
+export type SwitchSlots = keyof typeof switchVariants.slots;
+
+export type SwitchShape = NonNullable<SwitchVariants['shape']>;

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

@@ -0,0 +1,17 @@
+import type { SwitchProps as _SwitchRootProps, SwitchThumbProps as _SwitchThumbProps } from '@radix-ui/react-switch';
+
+import type { BaseNodeProps, ClassValue, ThemeColor } from '@/types/other';
+
+import type { SwitchSlots } from './switch-varianst';
+
+export interface SwitchRootProps extends BaseNodeProps<_SwitchRootProps> {
+  color?: ThemeColor;
+}
+
+export type SwitchThumbProps = BaseNodeProps<_SwitchThumbProps>;
+
+export type ClassNames = Partial<Record<SwitchSlots, ClassValue>>;
+
+export interface SwitchProps extends SwitchRootProps {
+  classNames?: ClassNames;
+}