Merge pull request #310 from softnetics/supakorn/fix/components

fix: switch layout bug.

Author: SupakornNetsuwan

.changeset/fair-cats-tease.md

@@ -0,0 +1,6 @@
+---
+"@example/ui-playground": patch
+"@genseki/ui": patch
+---
+
+fix: switch layout bug.

examples/ui-playground/src/app/playground/shadcn/switch-section.tsx

@@ -172,44 +172,6 @@ function DisabledSwitch() {
   )
 }
 
-// Switch Sizes
-function SwitchSizes() {
-  const [small, setSmall] = React.useState(false)
-  const [defaultSize, setDefaultSize] = React.useState(true)
-  const [large, setLarge] = React.useState(false)
-
-  return (
-    <div className="space-y-6">
-      <div className="space-y-4">
-        <div className="flex items-center justify-between">
-          <Label htmlFor="small-switch">Small Switch</Label>
-          <Switch
-            id="small-switch"
-            checked={small}
-            onCheckedChange={setSmall}
-            className="h-4 w-8"
-          />
-        </div>
-
-        <div className="flex items-center justify-between">
-          <Label htmlFor="default-switch">Default Switch</Label>
-          <Switch id="default-switch" checked={defaultSize} onCheckedChange={setDefaultSize} />
-        </div>
-
-        <div className="flex items-center justify-between">
-          <Label htmlFor="large-switch">Large Switch</Label>
-          <Switch
-            id="large-switch"
-            checked={large}
-            onCheckedChange={setLarge}
-            className="h-8 w-16"
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
 // Switch with Form
 function SwitchWithForm() {
   const [formData, setFormData] = React.useState({
@@ -412,15 +374,6 @@ export function SwitchSection() {
         </div>
       </PlaygroundCard>
 
-      <PlaygroundCard title="Switch Sizes" categoryTitle="Component">
-        <Typography type="body" className="text-muted-foreground mb-4">
-          Switches in different sizes: small, default, and large.
-        </Typography>
-        <div className="p-4 bg-secondary w-full rounded-lg">
-          <SwitchSizes />
-        </div>
-      </PlaygroundCard>
-
       <PlaygroundCard title="Switch with Form" categoryTitle="Component">
         <Typography type="body" className="text-muted-foreground mb-4">
           Switches integrated into a form with multiple options and state management.

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

@@ -11,7 +11,7 @@ function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimi
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-16 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[2px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring dark:data-[state=unchecked]:bg-input/80 inline-flex h-fit w-16 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[2px] disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}