aural-ui 2.1.4 → 2.1.6

package/dist/components/switch/Switch.stories.tsx

@@ -30,6 +30,24 @@ const meta: Meta<typeof Switch> = {
       control: { type: "boolean" },
       description: "Whether the switch is disabled or not",
     },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      description: "Size variant of the switch",
+      defaultValue: "md",
+    },
+    onIcon: {
+      control: { type: "text" },
+      description: "Custom icon to display when switch is ON",
+    },
+    offIcon: {
+      control: { type: "text" },
+      description: "Custom icon to display when switch is OFF",
+    },
+    classNames: {
+      control: { type: "object" },
+      description: "Custom classNames for different parts of the switch",
+    },
   },
 }
 
@@ -61,6 +79,37 @@ export const DisabledAndChecked: Story = {
   },
 }
 
+export const SizeVariants: Story = {
+  render: () => (
+    <div className="flex flex-col items-center space-y-4">
+      <div className="flex items-center space-x-4">
+        <Switch size="sm" checked={true} />
+        <span className="text-sm text-gray-400">Small (sm)</span>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Switch size="md" checked={true} />
+        <span className="text-sm text-gray-400">Medium (md)</span>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Switch size="lg" checked={true} />
+        <span className="text-sm text-gray-400">Large (lg)</span>
+      </div>
+    </div>
+  ),
+}
+
+export const WithCustomClassNames: Story = {
+  args: {
+    checked: true,
+    classNames: {
+      root: "border-2 border-blue-500",
+      onIcon: "text-green-600 font-bold",
+      offIcon: "text-gray-400",
+      thumb: "bg-blue-500 shadow-xl",
+    },
+  },
+}
+
 export const WithLabel: Story = {
   render: () => (
     <div className="flex items-center space-x-2">
@@ -108,3 +157,57 @@ export const CheckedWithIcons: Story = {
     offIcon: <CrossIcon />,
   },
 }
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Size Variants</h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span>Small</span>
+            <Switch size="sm" checked={true} />
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Medium</span>
+            <Switch size="md" checked={true} />
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Large</span>
+            <Switch size="lg" checked={true} />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">With Custom Styling</h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span>Custom Colors</span>
+            <Switch
+              size="md"
+              checked={true}
+              classNames={{
+                root: "border-2 border-purple-500",
+                thumb: "bg-purple-500",
+              }}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <span>With Icons</span>
+            <Switch
+              size="md"
+              checked={true}
+              onIcon={<TickIcon />}
+              offIcon={<CrossIcon />}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Disabled</span>
+            <Switch size="md" checked={true} disabled />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+}

package/dist/components/switch/index.tsx

@@ -1,57 +1,129 @@
 import * as React from "react"
 import { cn } from "@lib/utils"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
+import clsx from "clsx"
+
+type SwitchSize = "sm" | "md" | "lg"
+
+type SwitchClassNames = {
+  root?: string
+  onIcon?: string
+  offIcon?: string
+  thumb?: string
+}
 
 type SwitchWithIconsProps = React.ComponentPropsWithoutRef<
   typeof SwitchPrimitives.Root
 > & {
   offIcon?: React.ReactNode
   onIcon?: React.ReactNode
+  size?: SwitchSize
+  classNames?: SwitchClassNames
+}
+
+const switchVariants = {
+  size: {
+    sm: {
+      root: "h-6 w-12",
+      thumb:
+        "size-4 data-[state=checked]:translate-x-6.5 data-[state=unchecked]:translate-x-1",
+      onIcon: "left-1 text-fm-xs",
+      offIcon: "right-[5px] text-fm-xs",
+    },
+    md: {
+      root: "h-8 w-14",
+      thumb:
+        "size-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-1",
+      onIcon: "left-2 text-fm-sm",
+      offIcon: "right-1.5 text-fm-sm",
+    },
+    lg: {
+      root: "h-10 w-18",
+      thumb:
+        "size-8 data-[state=checked]:translate-x-9 data-[state=unchecked]:translate-x-1",
+      onIcon: "left-2.5 text-fm-base",
+      offIcon: "right-2 text-fm-base",
+    },
+  },
 }
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   SwitchWithIconsProps
->(({ className, onIcon, offIcon, checked, disabled, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    ref={ref}
-    checked={checked}
-    disabled={disabled}
-    className={cn(
-      "data-[state=checked]:not-[:disabled]:border-fm-divider-positive data-[state=checked]:not-[:disabled]:bg-fm-green-50",
-      "data-[state=unchecked]:not-[:disabled]:border-fm-divider-primary data-[state=unchecked]:not-[:disabled]:bg-fm-surface-primary",
-      "data-[state=unchecked]:disabled:border-fm-divider-tertiary data-[state=unchecked]:disabled:bg-fm-surface-secondary",
-      "data-[state=checked]:disabled:border-fm-green-100 data-[state=checked]:disabled:bg-fm-green-50",
-      "focus-visible:ring-fm-primary focus-visible:ring-offset-fm-green-50",
-      "hover:bg-fm-surface-secondary data-[state=unchecked]:not-[:disabled]:hover:bg-fm-surface-secondary",
-      "data-[state=unchecked]:not-[:disabled]:hover:border-fm-divider-primary",
-      "relative h-8 w-14 rounded-full border border-solid transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
-      className
-    )}
-    {...props}
-  >
-    <span
-      className={cn(
-        "font-fm-brand text-fm-positive absolute top-1/2 left-2 -translate-y-1/2 [font-size:var(--text-fm-sm)]",
-        disabled && "text-fm-positive-tert"
-      )}
-      data-state={checked ? "checked" : "unchecked"}
-      data-disabled={disabled || undefined}
-    >
-      {onIcon ?? "ON"}
-    </span>
-
-    <span
-      className="font-fm-brand text-fm-tertiary absolute top-1/2 right-1.5 -translate-y-1/2 [font-size:var(--text-fm-sm)]"
-      data-state={checked ? "checked" : "unchecked"}
-      data-disabled={disabled || undefined}
-    >
-      {offIcon ?? "OFF"}
-    </span>
-
-    <SwitchPrimitives.Thumb className="bg-fm-icon-active data-[disabled]:bg-fm-icon-inactive pointer-events-none z-10 block size-6 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-1" />
-  </SwitchPrimitives.Root>
-))
+>(
+  (
+    {
+      className,
+      onIcon,
+      offIcon,
+      checked,
+      disabled,
+      size = "md",
+      classNames,
+      ...props
+    },
+    ref
+  ) => {
+    const sizeConfig = switchVariants.size[size]
+
+    return (
+      <SwitchPrimitives.Root
+        ref={ref}
+        checked={checked}
+        disabled={disabled}
+        className={cn(
+          "data-[state=checked]:not-[:disabled]:border-fm-divider-positive data-[state=checked]:not-[:disabled]:bg-fm-green-50",
+          "data-[state=unchecked]:not-[:disabled]:border-fm-divider-primary data-[state=unchecked]:not-[:disabled]:bg-fm-surface-primary",
+          "data-[state=unchecked]:disabled:border-fm-divider-tertiary data-[state=unchecked]:disabled:bg-fm-surface-secondary",
+          "data-[state=checked]:disabled:border-fm-green-100 data-[state=checked]:disabled:bg-fm-green-50",
+          "focus-visible:ring-fm-primary focus-visible:ring-offset-fm-green-50",
+          "hover:bg-fm-surface-secondary data-[state=unchecked]:not-[:disabled]:hover:bg-fm-surface-secondary",
+          "data-[state=unchecked]:not-[:disabled]:hover:border-fm-divider-primary",
+          "relative rounded-full border border-solid transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
+          sizeConfig.root,
+          classNames?.root,
+          className
+        )}
+        {...props}
+      >
+        <span
+          className={clsx(
+            "font-fm-brand text-fm-positive absolute top-1/2 -translate-y-1/2",
+            {
+              "text-fm-positive-tert": disabled,
+            },
+            sizeConfig.onIcon,
+            classNames?.onIcon
+          )}
+          data-state={checked ? "checked" : "unchecked"}
+          data-disabled={disabled || undefined}
+        >
+          {onIcon ?? "ON"}
+        </span>
+
+        <span
+          className={clsx(
+            "font-fm-brand text-fm-tertiary absolute top-1/2 -translate-y-1/2",
+            sizeConfig.offIcon,
+            classNames?.offIcon
+          )}
+          data-state={checked ? "checked" : "unchecked"}
+          data-disabled={disabled || undefined}
+        >
+          {offIcon ?? "OFF"}
+        </span>
+
+        <SwitchPrimitives.Thumb
+          className={cn(
+            "bg-fm-icon-active data-[disabled]:bg-fm-icon-inactive pointer-events-none z-10 block rounded-full shadow-lg ring-0 transition-transform",
+            sizeConfig.thumb,
+            classNames?.thumb
+          )}
+        />
+      </SwitchPrimitives.Root>
+    )
+  }
+)
 Switch.displayName = SwitchPrimitives.Root.displayName
 
-export { Switch }
+export { Switch, type SwitchSize, type SwitchClassNames }