{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "title": "Toggle",
  "description": "The pressed surface pops in, and in a group one hover highlight glides between toggles.",
  "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/toggle.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/toggle`: 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 { Toggle as TogglePart, ToggleGroup as ToggleGroupPart } from \"@ui-sdk/react/toggle\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/toggle\"\n\n/* UI SDK accepts a class name or a function of state; keep both working. */\nfunction withClass<S>(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/* Press, and the pressed surface pops: it lives on `before:`, grows from 0.7 with an\n   overshoot when the toggle is pressed and shrinks away when it is released. Its neutral\n   default follows the text colour; restyle it with `before:` classes. */\nfunction Toggle({ className, ...props }: React.ComponentProps<typeof TogglePart>) {\n  return (\n    <TogglePart\n      className={withClass(\n        cn(\n          \"relative isolate transition-[scale] duration-[calc(200ms*var(--kf-speed,1))] ease-pop not-data-disabled:active:scale-[0.94]\",\n          \"before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:content-['']\",\n          \"before:bg-[color-mix(in_oklch,currentColor_9%,transparent)]\",\n          \"before:scale-[0.7] before:opacity-0\",\n          \"before:[transition:scale_calc(160ms*var(--kf-speed,1))_var(--ease-house),opacity_calc(120ms*var(--kf-speed,1))_var(--ease-house)]\",\n          \"data-pressed:before:scale-100 data-pressed:before:opacity-100\",\n          \"data-pressed:before:[transition:scale_calc(420ms*var(--kf-speed,1))_var(--ease-pop),opacity_calc(120ms*var(--kf-speed,1))_var(--ease-house)]\",\n          \"motion-reduce:transition-none! motion-reduce:before:[transition:none]!\",\n        ),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Glide: one hover highlight moves between the toggles of a group, positioned with CSS\n   anchors, instead of each toggle lighting up on its own. Restyle it with `before:` classes. */\nfunction ToggleGroup({ className, ...props }: React.ComponentProps<typeof ToggleGroupPart>) {\n  return (\n    <ToggleGroupPart\n      className={withClass(\n        cn(\n          \"relative isolate [anchor-scope:--kf-toggle]\",\n          \"[&>[data-slot=toggle]:not([data-disabled]):hover]:[anchor-name:--kf-toggle]\",\n          \"before:pointer-events-none before:absolute before:-z-20 before:rounded-[9px] before:content-['']\",\n          \"before:bg-[color-mix(in_oklch,currentColor_7%,transparent)]\",\n          \"before:[position-anchor:--kf-toggle] before:top-[anchor(top)] before:right-[anchor(right)] before:bottom-[anchor(bottom)] before:left-[anchor(left)]\",\n          \"before:opacity-0 before:transition-[top,right,bottom,left,opacity] before:duration-[calc(260ms*var(--kf-speed,1))] before:ease-spring\",\n          \"has-[>[data-slot=toggle]:not([data-disabled]):hover]:before:opacity-100\",\n          \"motion-reduce:before:transition-none!\",\n        ),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, ToggleGroup }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/toggle.tsx"
    },
    {
      "path": "registry/components/keyframery/toggle.tsx",
      "content": "\"use client\"\n\n/* Styled toggle: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n  Toggle as TogglePrimitive,\n  ToggleGroup as ToggleGroupPrimitive,\n  ToggleIcon as ToggleIconPrimitive,\n} from \"@/components/keyframery/primitives/toggle\"\nimport { cn } from \"@/lib/utils\"\n\ntype ToggleSize = \"sm\" | \"md\" | \"icon-sm\" | \"icon\"\n\nconst sizes: Record<ToggleSize, string> = {\n  sm: \"h-7 gap-1.5 rounded-[8px] px-2.5 text-[12px] [&_svg]:size-3.5\",\n  md: \"h-8 gap-1.5 rounded-[9px] px-3 text-[13px] [&_svg]:size-4\",\n  \"icon-sm\": \"size-7 rounded-[8px] [&_svg]:size-3.5\",\n  icon: \"size-8 rounded-[9px] [&_svg]:size-4\",\n}\n\n/* The pressed surface is the primitive's `before:` layer, which pops in.\n   On its own, a toggle sits flat on the page and sinks into a small well while pressed.\n   Inside a group (which gives its toggles data-orientation), the group is the well and\n   the pressed toggles rise out of it as keys. */\nfunction Toggle({\n  className,\n  size = \"md\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive> & { size?: ToggleSize }) {\n  return (\n    <TogglePrimitive\n      data-size={size}\n      className={cn(\n        \"inline-flex shrink-0 cursor-pointer items-center justify-center leading-none font-medium whitespace-nowrap text-muted-foreground outline-none select-none\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"transition-[color,background-color,scale] motion-reduce:transition-none!\",\n        \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"not-data-disabled:hover:text-foreground data-pressed:text-foreground\",\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-45\",\n        /* Alone: flat, then sunk. */\n        \"not-data-orientation:not-data-disabled:not-data-pressed:hover:bg-foreground/[0.03] dark:not-data-orientation:not-data-disabled:not-data-pressed:hover:bg-foreground/[0.035]\",\n        \"not-data-orientation:before:bg-muted\",\n        \"not-data-orientation:before:shadow-[inset_0_1px_2px_rgb(0_0_0/0.13),inset_0_0_0_1px_rgb(0_0_0/0.07)]\",\n        \"dark:not-data-orientation:before:shadow-[inset_0_1px_2px_rgb(0_0_0/0.55),inset_0_0_0_1px_rgb(255_255_255/0.05)]\",\n        /* In a group: keys rising out of the well. The hover highlight glides (group). */\n        \"data-orientation:focus-visible:ring-offset-muted\",\n        \"data-orientation:before:bg-background\",\n        \"data-orientation:before:shadow-[0_0_0_1px_rgb(0_0_0/0.06),0_1px_1px_rgb(0_0_0/0.05),0_3px_6px_-2px_rgb(0_0_0/0.1)]\",\n        \"dark:data-orientation:before:bg-accent dark:data-orientation:before:shadow-[0_0_0_1px_rgb(255_255_255/0.07),inset_0_1px_0_rgb(255_255_255/0.08),0_2px_6px_-1px_rgb(0_0_0/0.6)]\",\n        sizes[size],\n        className as string,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ToggleIcon({ className, ...props }: React.ComponentProps<typeof ToggleIconPrimitive>) {\n  return (\n    <ToggleIconPrimitive\n      className={cn(\"inline-grid shrink-0 place-items-center data-mirror:rtl:-scale-x-100\", className as string)}\n      {...props}\n    />\n  )\n}\n\n/* The well. */\nfunction ToggleGroup({ className, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive>) {\n  return (\n    <ToggleGroupPrimitive\n      className={cn(\n        \"inline-flex w-fit items-center gap-0.5 rounded-[12px] bg-muted p-1\",\n        \"shadow-[inset_0_1px_2px_rgb(0_0_0/0.07),inset_0_0_0_1px_rgb(0_0_0/0.035)]\",\n        \"dark:shadow-[inset_0_1px_2px_rgb(0_0_0/0.5),inset_0_0_0_1px_rgb(255_255_255/0.04)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n        \"data-disabled:opacity-60\",\n        className as string,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, ToggleGroup, ToggleIcon }\n",
      "type": "registry:component",
      "target": "components/keyframery/toggle.tsx"
    }
  ],
  "type": "registry:component"
}