feat: add component toggle

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",
@@ -42,6 +44,7 @@
     "@radix-ui/react-slot": "1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "1.1.12",
+    "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@soybean-react-ui/tailwind-plugin": "workspace:*",
     "clsx": "2.1.1",

packages/ui/src/components/toggle/Toggle.tsx

@@ -0,0 +1,23 @@
+import { Root } from '@radix-ui/react-toggle';
+
+import { cn } from '@/lib/utils';
+
+import { toggleVariants } from './toggle-variants';
+import type { ToggleProps } from './types';
+
+const Toggle = (props: ToggleProps) => {
+  const { className, size, variant, ...rest } = props;
+  const { toggle } = toggleVariants({ size, variant });
+
+  const mergedCls = cn(toggle(), className);
+
+  return (
+    <Root
+      className={mergedCls}
+      data-slot="toggle"
+      {...rest}
+    />
+  );
+};
+
+export default Toggle;

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

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

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

@@ -0,0 +1,60 @@
+import { tv } from 'tailwind-variants';
+import type { VariantProps } from 'tailwind-variants';
+
+export const toggleVariants = tv({
+  defaultVariants: {
+    size: 'md',
+    variant: 'ghost'
+  },
+  slots: {
+    groupRoot: `flex justify-center items-center`,
+    toggle: [
+      `inline-flex items-center justify-center rounded-md font-medium transition-colors duration-200`,
+      `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary`,
+      `hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50`,
+      `data-[state=on]:bg-accent data-[state=on]:hover:bg-accent data-[state=on]:text-accent-foreground`
+    ]
+  },
+  variants: {
+    size: {
+      '2xl': {
+        groupRoot: `gap-3`,
+        toggle: `h-12 px-10 text-xl`
+      },
+      lg: {
+        groupRoot: `gap-2.5`,
+        toggle: `h-9 px-6 text-base`
+      },
+      md: {
+        groupRoot: `gap-2`,
+        toggle: `h-8 px-4 text-sm`
+      },
+      sm: {
+        groupRoot: `gap-1.75`,
+        toggle: `h-7 px-2 text-xs`
+      },
+      xl: {
+        groupRoot: `gap-3`,
+        toggle: `h-10 px-8 text-lg`
+      },
+      xs: {
+        groupRoot: `gap-1.5`,
+        toggle: `h-6 px-1.5 text-2xs`
+      }
+    },
+    variant: {
+      ghost: {
+        toggle: `bg-transparent`
+      },
+      outline: {
+        toggle: `border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground`
+      }
+    }
+  }
+});
+
+type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+export type ToggleVariant = NonNullable<ToggleVariants['variant']>;
+
+export type ToggleSlots = keyof typeof toggleVariants.slots;

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

@@ -0,0 +1,9 @@
+import type { ToggleProps as _ToggleProps } from '@radix-ui/react-toggle';
+
+import type { BaseNodeProps } from '@/types/other';
+
+import type { ToggleVariant } from './toggle-variants';
+
+export interface ToggleProps extends BaseNodeProps<_ToggleProps> {
+  variant?: ToggleVariant;
+}

packages/ui/src/index.ts

@@ -62,6 +62,8 @@ export * from './components/switch';
 
 export * from './components/tabs';
 
+export * from './components/toggle';
+
 export * from './components/tooltip';
 
 export * from './lib';

playground/src/app/(demo)/toggle/modules/ToggleDemo.tsx

@@ -0,0 +1,26 @@
+import type { ToggleProps } from 'soybean-react-ui';
+import { Card, Toggle } from 'soybean-react-ui';
+
+const variants: ToggleProps['variant'][] = ['ghost', 'outline'];
+
+const ToggleDemo = () => {
+  return (
+    <Card
+      split
+      title="Variant"
+    >
+      <div className="flex gap-12px">
+        {variants.map(variant => (
+          <Toggle
+            key={variant}
+            variant={variant}
+          >
+            {variant}
+          </Toggle>
+        ))}
+      </div>
+    </Card>
+  );
+};
+
+export default ToggleDemo;

playground/src/app/(demo)/toggle/modules/ToggleDisabled.tsx

@@ -0,0 +1,29 @@
+import { Card, Toggle } from 'soybean-react-ui';
+
+const ToggleDisabled = () => {
+  return (
+    <Card
+      split
+      title="Disabled"
+    >
+      <div className="flex flex-wrap gap-12px">
+        <Toggle
+          disabled
+          size="md"
+          variant="ghost"
+        >
+          disabled
+        </Toggle>
+        <Toggle
+          disabled
+          size="md"
+          variant="outline"
+        >
+          disabled
+        </Toggle>
+      </div>
+    </Card>
+  );
+};
+
+export default ToggleDisabled;

playground/src/app/(demo)/toggle/modules/ToggleSize.tsx

@@ -0,0 +1,27 @@
+import type { ToggleProps } from 'soybean-react-ui';
+import { Card, Toggle } from 'soybean-react-ui';
+
+const sizes: ToggleProps['size'][] = ['sm', 'md', 'lg', 'xl', '2xl'];
+
+const ToggleDemo = () => {
+  return (
+    <Card
+      split
+      title="Size"
+    >
+      <div className="flex gap-12px">
+        {sizes.map(size => (
+          <Toggle
+            key={size}
+            size={size}
+            variant="ghost"
+          >
+            {size}
+          </Toggle>
+        ))}
+      </div>
+    </Card>
+  );
+};
+
+export default ToggleDemo;

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

@@ -0,0 +1,17 @@
+import ToggleDemo from './modules/ToggleDemo';
+import ToggleDisabled from './modules/ToggleDisabled';
+import ToggleSize from './modules/ToggleSize';
+
+const TogglePage = () => {
+  return (
+    <div className="flex-c gap-4">
+      <ToggleDemo />
+
+      <ToggleSize />
+
+      <ToggleDisabled />
+    </div>
+  );
+};
+
+export default TogglePage;