{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "title": "Slider",
  "description": "The thumb grows while you drag, the fill springs to new values and the digits roll.",
  "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/slider.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/slider`: 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 {\n  SliderIndicator as SliderIndicatorPart,\n  SliderThumb as SliderThumbPart,\n  SliderValue as SliderValuePart,\n} from \"@ui-sdk/react/slider\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/slider\"\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/* When the value jumps (a key, a value set from code) the fill and thumbs travel there on a\n   spring. UI SDK marks a press on the track as the start of a drag, so while dragging they\n   follow on a short spring instead: a press on the track still springs there, and a drag\n   stays close to the pointer. */\nconst follow =\n  \"[transition:left_calc(420ms*var(--kf-speed,1))_var(--ease-spring),right_calc(420ms*var(--kf-speed,1))_var(--ease-spring),width_calc(420ms*var(--kf-speed,1))_var(--ease-spring),bottom_calc(420ms*var(--kf-speed,1))_var(--ease-spring),height_calc(420ms*var(--kf-speed,1))_var(--ease-spring),scale_calc(260ms*var(--kf-speed,1))_var(--ease-pop)]\"\nconst dragging =\n  \"[[data-slot=slider][data-dragging]_&]:[transition:left_calc(200ms*var(--kf-speed,1))_var(--ease-spring),right_calc(200ms*var(--kf-speed,1))_var(--ease-spring),width_calc(200ms*var(--kf-speed,1))_var(--ease-spring),bottom_calc(200ms*var(--kf-speed,1))_var(--ease-spring),height_calc(200ms*var(--kf-speed,1))_var(--ease-spring),scale_calc(260ms*var(--kf-speed,1))_var(--ease-pop)]\"\n\nfunction SliderIndicator({ className, ...props }: React.ComponentProps<typeof SliderIndicatorPart>) {\n  return (\n    <SliderIndicatorPart\n      className={withClass(cn(follow, dragging, \"motion-reduce:[transition:none]!\"), className)}\n      {...props}\n    />\n  )\n}\n\n/* The thumb grows with a pop while it is held. */\nfunction SliderThumb({ className, ...props }: React.ComponentProps<typeof SliderThumbPart>) {\n  return (\n    <SliderThumbPart\n      className={withClass(\n        cn(follow, dragging, \"data-dragging:scale-[1.3] motion-reduce:[transition:none]!\"),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Roll: every digit is a column of 0 to 9 that slides to its value on a spring. Other\n   characters (currency, separators, units) sit still. Screen readers get the plain text. */\nfunction Roll({ text }: { text: string }) {\n  const chars = text.split(\"\")\n  return (\n    <>\n      <span className=\"sr-only\">{text}</span>\n      <span aria-hidden className=\"inline-flex h-[1lh] overflow-hidden whitespace-pre\">\n        {chars.map((c, i) => {\n          const key = chars.length - i\n          return /\\d/.test(c) ? (\n            <span key={key} className=\"relative inline-block\">\n              <span className=\"invisible\">0</span>\n              <span\n                style={{ \"--kf-d\": Number(c) } as React.CSSProperties}\n                className=\"absolute inset-x-0 top-0 flex flex-col [translate:0_calc(var(--kf-d)*-1lh)] transition-[translate] duration-[calc(500ms*var(--kf-speed,1))] ease-spring motion-reduce:transition-none!\"\n              >\n                {Array.from({ length: 10 }, (_, d) => (\n                  <span key={d} className=\"h-[1lh] text-center\">\n                    {d}\n                  </span>\n                ))}\n              </span>\n            </span>\n          ) : (\n            <span key={key + c}>{c}</span>\n          )\n        })}\n      </span>\n    </>\n  )\n}\n\nfunction SliderValue({ className, children, ...props }: React.ComponentProps<typeof SliderValuePart>) {\n  return (\n    <SliderValuePart\n      className={withClass(\"tabular-nums\", className)}\n      {...props}\n    >\n      {children ?? ((state: { text: string }) => <Roll text={state.text} />)}\n    </SliderValuePart>\n  )\n}\n\nexport { SliderIndicator, SliderThumb, SliderValue }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/slider.tsx"
    },
    {
      "path": "registry/components/keyframery/slider.tsx",
      "content": "\"use client\"\n\n/* Styled slider: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n  Slider as SliderRoot,\n  SliderControl as SliderControlPart,\n  SliderIndicator as SliderIndicatorPart,\n  SliderThumb as SliderThumbPart,\n  SliderTrack as SliderTrackPart,\n  SliderValue as SliderValuePart,\n} from \"@/components/keyframery/primitives/slider\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Slider({ className, ...props }: React.ComponentProps<typeof SliderRoot>) {\n  return (\n    <SliderRoot\n      className={cn(\n        \"group/slider flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto\",\n        \"data-disabled:opacity-50\",\n        className as string,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The number rolls digit by digit (from the primitive), in tabular figures. */\nfunction SliderValue({\n  className,\n  ...props\n}: React.ComponentProps<typeof SliderValuePart>) {\n  return (\n    <SliderValuePart\n      className={cn(\"text-[13px] leading-none font-medium tabular-nums\", className as string)}\n      {...props}\n    />\n  )\n}\n\n/* Where presses land: 20px tall around a thin track, with 8px of side room so the\n   thumb never hangs outside the control at either end. */\nfunction SliderControl({\n  className,\n  ...props\n}: React.ComponentProps<typeof SliderControlPart>) {\n  return (\n    <SliderControlPart\n      className={cn(\n        \"relative flex h-5 w-full cursor-pointer touch-none items-center px-2 select-none\",\n        \"data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-5 data-[orientation=vertical]:flex-col data-[orientation=vertical]:px-0 data-[orientation=vertical]:py-2\",\n        \"data-disabled:cursor-not-allowed\",\n        className as string,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The track: a thin pill well. */\nfunction SliderTrack({\n  className,\n  ...props\n}: React.ComponentProps<typeof SliderTrackPart>) {\n  return (\n    <SliderTrackPart\n      className={cn(\n        \"h-1.5 w-full rounded-full bg-muted\",\n        \"shadow-[inset_0_1px_1px_rgb(0_0_0/0.08),inset_0_0_0_1px_rgb(0_0_0/0.04)]\",\n        \"dark:bg-accent 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]:h-full data-[orientation=vertical]:w-1.5\",\n        className as string,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The filled range. */\nfunction SliderIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SliderIndicatorPart>) {\n  return (\n    <SliderIndicatorPart\n      className={cn(\n        \"rounded-full bg-primary shadow-[inset_0_1px_0_rgb(255_255_255/0.14)]\",\n        className as string,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The thumb: a round key; the primitive grows it with a pop while it is held. */\nfunction SliderThumb({\n  className,\n  ...props\n}: React.ComponentProps<typeof SliderThumbPart>) {\n  return (\n    <SliderThumbPart\n      className={cn(\n        \"block size-4 rounded-full bg-background\",\n        \"shadow-[0_0_0_1px_rgb(0_0_0/0.1),0_1px_1px_rgb(0_0_0/0.06),0_2px_5px_-1px_rgb(0_0_0/0.16)]\",\n        \"dark:bg-[color-mix(in_oklab,var(--foreground),var(--background)_8%)] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.3),0_1px_3px_rgb(0_0_0/0.5)]\",\n        \"group-not-data-disabled/slider:hover:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_1px_rgb(0_0_0/0.06),0_3px_7px_-1px_rgb(0_0_0/0.2)]\",\n        \"group-not-data-disabled/slider:cursor-grab data-dragging:cursor-grabbing\",\n        \"data-dragging:shadow-[0_0_0_1px_rgb(0_0_0/0.12),0_2px_3px_rgb(0_0_0/0.08),0_6px_12px_-2px_rgb(0_0_0/0.22)]\",\n        \"dark:data-dragging:shadow-[0_0_0_1px_rgb(0_0_0/0.3),0_4px_10px_rgb(0_0_0/0.6)]\",\n        \"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:ring-offset-background\",\n        className as string,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack, SliderValue }\n",
      "type": "registry:component",
      "target": "components/keyframery/slider.tsx"
    }
  ],
  "type": "registry:component"
}