{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "switch", "title": "Switch", "description": "The thumb stretches toward the side it is moving to, then settles.", "dependencies": [ "@ui-sdk/core@0.1.0-beta.2", "@ui-sdk/react@0.1.0-beta.2" ], "registryDependencies": [ "@keyframery/motion" ], "files": [ { "path": "registry/components/keyframery/primitives/switch.tsx", "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/switch`: same parts, same props. Swap the import and keep your code.\n This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport { Switch as SwitchPart, SwitchThumb as SwitchThumbPart } from \"@ui-sdk/react/switch\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/switch\"\n\n/* UI SDK accepts a class name or a function of state; keep both working. */\nfunction withClass(base: string, className: string | ((state: S) => string | undefined) | undefined) {\n return typeof className === \"function\" ? (state: S) => cn(base, className(state)) : cn(base, className)\n}\n\n/* The track is the thumb's positioning box. Size the thumb with two variables:\n `--kf-switch-thumb` (its resting width, 16px by default) and `--kf-switch-pad` (the gap\n to the track's edge, 2px). The thumb fills the track's height minus the pad. */\nfunction Switch({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Stretch: the thumb's two edges move separately. The edge facing the other side leaves at\n once and the far edge follows 80ms later, so the thumb stretches toward where it is going\n and closes up there. While the switch is held, the thumb widens by 4px toward the middle. */\nfunction SwitchThumb({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Switch, SwitchThumb }\n", "type": "registry:component", "target": "components/keyframery/primitives/switch.tsx" }, { "path": "registry/components/keyframery/switch.tsx", "content": "\"use client\"\n\n/* Styled switch: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport { Switch as SwitchPrimitive, SwitchThumb as SwitchThumbPrimitive } from \"@/components/keyframery/primitives/switch\"\nimport { cn } from \"@/lib/utils\"\n\n/* Track: 38 x 22 with 2px of room around an 18px thumb. */\nfunction Switch({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? }\n \n )\n}\n\n/* Thumb: a round key. */\nfunction SwitchThumb({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Switch, SwitchThumb }\n", "type": "registry:component", "target": "components/keyframery/switch.tsx" } ], "type": "registry:component" }