{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider-expressive",
  "type": "registry:ui",
  "title": "Expressive Slider",
  "description": "Optional Motion feedback for Slider: thumb compression, milestone pulses and floating labels.",
  "dependencies": [
    "motion@^12.43.0"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://components.dethink.co.uk/r/slider.json"
  ],
  "files": [
    {
      "path": "packages/components/src/components/slider-expressive/slider-expressive.tsx",
      "type": "registry:file",
      "target": "~/components/dethink/components/slider-expressive/slider-expressive.tsx",
      "content": "import {\n  forwardRef,\n  useSyncExternalStore,\n  type ReactElement,\n  type RefAttributes,\n} from \"react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\nimport {\n  SliderDecorationContext,\n  type SliderDecorationProps,\n} from \"../slider/slider-visuals\";\n\nconst subscribe = () => () => {};\nconst client = () => true;\nconst server = () => false;\n\nfunction ExpressiveThumb({\n  dragging,\n  active,\n  milestone,\n  className,\n}: SliderDecorationProps) {\n  const hydrated = useSyncExternalStore(subscribe, client, server);\n  const reduced = useReducedMotion();\n  const animate = hydrated && reduced === false;\n  return (\n    <>\n      {animate && active && milestone !== undefined && (\n        <motion.span\n          key={milestone}\n          aria-hidden=\"true\"\n          data-slot=\"slider-pulse\"\n          className=\"bg-primary/20 pointer-events-none absolute size-[var(--dt-slider-thumb-size)] rounded-full\"\n          initial={{ scale: 1, opacity: 0.5 }}\n          animate={{ scale: 2, opacity: 0 }}\n          transition={{ duration: 0.32 }}\n        />\n      )}\n      <motion.span\n        aria-hidden=\"true\"\n        data-slot=\"slider-thumb-visual\"\n        className={\n          className +\n          \" shadow-[0_0_0_5px_color-mix(in_srgb,var(--dt-color-primary)_10%,transparent)]\"\n        }\n        initial={false}\n        animate={{ scale: animate && dragging ? 0.88 : 1 }}\n        transition={\n          animate\n            ? { type: \"spring\", stiffness: 550, damping: 28 }\n            : { duration: 0 }\n        }\n      />\n    </>\n  );\n}\nexport type ExpressiveSliderProps<T extends SliderValue = number> =\n  SliderProps<T>;\n\n/** Optional Motion companion. Pointer position is always controlled directly by React Aria. */\nexport const ExpressiveSlider = forwardRef<\n  HTMLDivElement,\n  SliderProps<SliderValue>\n>(function ExpressiveSlider(props, ref) {\n  return (\n    <SliderDecorationContext.Provider value={ExpressiveThumb}>\n      <Slider\n        variant=\"expressive\"\n        valueDisplay=\"floating\"\n        {...props}\n        ref={ref}\n      />\n    </SliderDecorationContext.Provider>\n  );\n}) as <T extends SliderValue = number>(\n  props: ExpressiveSliderProps<T> & RefAttributes<HTMLDivElement>,\n) => ReactElement;\n"
    },
    {
      "path": "packages/components/src/components/slider-expressive/index.ts",
      "type": "registry:file",
      "target": "~/components/dethink/components/slider-expressive/index.ts",
      "content": "export {\n  ExpressiveSlider,\n  type ExpressiveSliderProps,\n} from \"./slider-expressive\";\n"
    }
  ]
}