{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elastic-slider",
  "title": "Elastic Slider",
  "description": "An accessible value slider with restrained physical feedback at its limits.",
  "dependencies": [
    "@base-ui/react@^1.7.0",
    "motion@^13.1.0"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/elastic-slider/elastic-slider.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider } from \"@base-ui/react/slider\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ElasticSliderProps extends Omit<\n  React.ComponentPropsWithoutRef<typeof Slider.Root>,\n  \"children\" | \"defaultValue\" | \"onValueChange\" | \"onValueCommitted\" | \"value\"\n> {\n  label: React.ReactNode\n  defaultValue?: number\n  value?: number\n  onValueChange?: (value: number) => void\n  onValueCommitted?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  name?: string\n  disabled?: boolean\n  formatValue?: (value: number) => string\n  className?: string\n}\n\nexport const ElasticSlider = React.forwardRef<\n  React.ComponentRef<typeof Slider.Root>,\n  ElasticSliderProps\n>(function ElasticSlider(\n  {\n    label,\n    defaultValue = 50,\n    value,\n    onValueChange,\n    onValueCommitted,\n    min = 0,\n    max = 100,\n    step = 1,\n    name,\n    disabled,\n    formatValue = (nextValue) => `${nextValue}%`,\n    className,\n    ...rootProps\n  },\n  forwardedRef\n) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n  const prefersReducedMotion = useReducedMotion()\n  const currentValue = value ?? internalValue\n  const range = Math.max(max - min, 1)\n  const progress = Math.min(Math.max((currentValue - min) / range, 0), 1)\n  const atStart = progress <= 0.02\n  const atEnd = progress >= 0.98\n\n  function readSingleValue(nextValue: number | number[]) {\n    return Array.isArray(nextValue) ? (nextValue[0] ?? min) : nextValue\n  }\n\n  return (\n    <Slider.Root\n      {...rootProps}\n      data-slot=\"elastic-slider\"\n      ref={forwardedRef}\n      value={value}\n      defaultValue={defaultValue}\n      min={min}\n      max={max}\n      step={step}\n      name={name}\n      disabled={disabled}\n      thumbAlignment=\"edge\"\n      onValueChange={(nextValue) => {\n        const singleValue = readSingleValue(nextValue)\n        setInternalValue(singleValue)\n        onValueChange?.(singleValue)\n      }}\n      onValueCommitted={(nextValue) =>\n        onValueCommitted?.(readSingleValue(nextValue))\n      }\n      className={cn(\n        \"text-foreground grid w-full gap-5 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n    >\n      <div\n        data-slot=\"elastic-slider-header\"\n        className=\"flex items-baseline justify-between gap-4\"\n      >\n        <Slider.Label\n          data-slot=\"elastic-slider-label\"\n          className=\"text-sm font-medium\"\n        >\n          {label}\n        </Slider.Label>\n        <output\n          data-slot=\"elastic-slider-output\"\n          className=\"font-mono text-sm font-semibold tabular-nums\"\n        >\n          {formatValue(currentValue)}\n        </output>\n      </div>\n\n      <motion.div\n        data-slot=\"elastic-slider-motion\"\n        style={{\n          transformOrigin: atStart ? \"left\" : atEnd ? \"right\" : \"center\",\n        }}\n        animate={\n          prefersReducedMotion\n            ? undefined\n            : {\n                scaleX: atStart || atEnd ? 1.025 : 1,\n                scaleY: atStart || atEnd ? 1.12 : 1,\n              }\n        }\n        transition={{ type: \"spring\", stiffness: 460, damping: 26, mass: 0.4 }}\n      >\n        <Slider.Control\n          data-slot=\"elastic-slider-control\"\n          className=\"flex min-h-11 touch-none items-center py-4 select-none\"\n        >\n          <Slider.Track\n            data-slot=\"elastic-slider-track\"\n            className=\"bg-muted relative h-2 w-full rounded-full shadow-inner\"\n          >\n            <Slider.Indicator\n              data-slot=\"elastic-slider-indicator\"\n              className=\"bg-primary rounded-full\"\n            />\n            <Slider.Thumb\n              data-slot=\"elastic-slider-thumb\"\n              className=\"border-primary bg-background focus-visible:ring-ring/35 size-6 rounded-full border-2 shadow-md transition-transform duration-150 outline-none hover:scale-105 focus-visible:ring-4 data-dragging:scale-105 motion-reduce:transition-none\"\n              aria-label={typeof label === \"string\" ? label : \"Value\"}\n            />\n          </Slider.Track>\n        </Slider.Control>\n      </motion.div>\n    </Slider.Root>\n  )\n})\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "form",
    "slider",
    "motion"
  ],
  "type": "registry:ui"
}