refactor: remove need to include nested container component (#310)

giantnodes · Jan 24, 2025 · 45af56b · 45af56b
1 parent c0e891e
commit 45af56b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 49 deletions.
diff --git a/packages/react/src/components/form/use-form-group.hook.ts b/packages/react/src/components/form/use-form-group.hook.ts
@@ -9,7 +9,7 @@ import { create } from '~/utilities/create-context'
 
 export type FeedbackType = 'success' | 'info' | 'warning' | 'error'
 
-type UseFormElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+type UseFormElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLLabelElement
 
 type UseFormGroupProps<T extends UseFormElement = UseFormElement> = LabelAria & {
   ref?: React.RefObject<T>

diff --git a/packages/react/src/components/switch/Switch.tsx b/packages/react/src/components/switch/Switch.tsx
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
 
     const Element = as ?? Switch
 
-    const group = useFormGroup()
+    const group = useFormGroup<HTMLLabelElement>()
 
     const slots = React.useMemo(() => toggle({ color, size }), [color, size])
 
@@ -44,10 +44,8 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
     )
 
     return (
-      <Element {...component} ref={(group?.ref as React.RefObject<HTMLLabelElement> | undefined) ?? ref}>
-        <div className={slots.container()}>
-          <span className={slots.circle()} />
-        </div>
+      <Element {...component} ref={group?.ref ?? ref}>
+        <span className={slots.circle()} />
       </Element>
     )
   }

diff --git a/packages/theme/src/components/toggle.ts b/packages/theme/src/components/toggle.ts
@@ -5,68 +5,55 @@ export const toggle = tv({
   slots: {
     label: [
       'group',
-      'relative',
-      'inline-flex items-center justify-start',
-      'max-w-fit',
-      'rounded-full',
-      'cursor-pointer',
-      'touch-none',
-      'focus:outline-dashed focus:outline-offset-2 focus:outline-1',
-    ],
-    container: [
-      'relative',
-      'inline-flex items-center justify-start flex-shrink-0',
+      'inline-flex items-center flex-shrink-0',
       'bg-foreground',
       'rounded-full',
-      'transition-all',
-      'outline-none',
-      'overflow-hidden',
-      'px-1',
+      'border-2 border-transparent',
+      'cursor-pointer',
+      'transition-colors',
+      'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
+      'focus-within:outline-dashed focus-within:outline-offset-2 focus-within:outline-1 focus-within:outline-shark',
     ],
     circle: [
-      'flex items-center justify-center',
+      'block',
       'bg-white',
-      'shadow-small',
       'rounded-full',
-      'translate-x-0 group-selected:translate-x-[100%] transition-all duration-200',
-      'z-10',
+      'translate-x-0 group-data-[selected=true]:translate-x-[100%] transition-all duration-200',
     ],
   },
   variants: {
-    size: {
-      sm: {
-        container: ['h-5 w-10'],
-        circle: ['size-4'],
-      },
-      md: {
-        container: ['h-6 w-12'],
-        circle: ['size-5'],
-      },
-      lg: {
-        container: ['h-7 w-14'],
-        circle: ['size-6'],
-      },
-    },
     color: {
+      neutral: {
+        label: ['data-[selected=true]:bg-shark', 'data-[selected=true]:focus-within:outline-shark'],
+      },
       brand: {
-        label: ['focus:outline-brand'],
-        container: ['group-selected:bg-brand group-selected:group-pressed:bg-brand'],
+        label: ['data-[selected=true]:bg-brand', 'data-[selected=true]:focus-within:outline-brand'],
       },
       success: {
-        label: ['focus:outline-success'],
-        container: ['group-selected:bg-success group-selected:group-pressed:bg-success'],
+        label: ['data-[selected=true]:bg-success', 'data-[selected=true]:focus-within:outline-success'],
       },
       info: {
-        label: ['focus:outline-info'],
-        container: ['group-selected:bg-info group-selected:group-pressed:bg-info'],
+        label: ['data-[selected=true]:bg-info', 'data-[selected=true]:focus-within:outline-info'],
       },
       warning: {
-        label: ['focus:outline-warning'],
-        container: ['group-selected:bg-warning group-selected:group-pressed:bg-warning'],
+        label: ['data-[selected=true]:bg-warning', 'data-[selected=true]:focus-within:outline-warning'],
       },
       danger: {
-        label: ['focus:outline-danger'],
-        container: ['group-selected:bg-danger group-selected:group-pressed:bg-danger'],
+        label: ['data-[selected=true]:bg-danger', 'data-[selected=true]:focus-within:outline-danger'],
+      },
+    },
+    size: {
+      sm: {
+        label: ['h-4 w-7'],
+        circle: ['size-3'],
+      },
+      md: {
+        label: ['h-5 w-9'],
+        circle: ['size-4'],
+      },
+      lg: {
+        label: ['h-6 w-11'],
+        circle: ['size-5'],
       },
     },
   },