{"name":"slider","type":"registry:ui","files":[{"path":"slider.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui-components/react/slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Slider({\n  className,\n  children,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  showValue = false,\n  size = \"large\",\n  ...props\n}: SliderPrimitive.Root.Props & {\n  showValue?: boolean\n  size?: \"small\" | \"large\"\n}) {\n  const _values = React.useMemo(() => {\n    if (value !== undefined) {\n      return Array.isArray(value) ? value : [value]\n    }\n    if (defaultValue !== undefined) {\n      return Array.isArray(defaultValue) ? defaultValue : [defaultValue]\n    }\n    return [min]\n  }, [value, defaultValue, min])\n\n  return (\n    <SliderPrimitive.Root\n      thumbAlignment=\"center\"\n      data-size={size}\n      data-variant={_values.length > 1 ? \"range\" : \"single\"}\n      className={cn(\n        \"relative flex touch-none p-0 select-none data-disabled:opacity-50 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:min-w-[var(--hui-space-15)] data-[orientation=horizontal]:flex-col data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-[var(--hui-space-15)]\",\n        !children &&\n          \"data-[orientation=horizontal]:h-[var(--hui-space-8)] data-[orientation=horizontal]:items-center data-[orientation=vertical]:w-[var(--hui-space-8)]\",\n        className\n      )}\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      {...props}\n    >\n      {children}\n      <SliderPrimitive.Control\n        data-slot=\"slider-control\"\n        className=\"relative flex items-center data-disabled:pointer-events-none data-[orientation=horizontal]:h-[var(--hui-space-8)] data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-[var(--hui-space-8)] data-[orientation=vertical]:flex-col\"\n      >\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"relative grow rounded-[var(--hui-radius-full)] bg-[var(--hui-color-background-neutral-secondary)] data-[orientation=horizontal]:mx-[var(--hui-space-4)] data-[orientation=horizontal]:h-[var(--hui-space-2)] data-[orientation=vertical]:my-[var(--hui-space-4)] data-[orientation=vertical]:w-[var(--hui-space-2)]\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-indicator\"\n            className=\"!absolute rounded-[var(--hui-radius-full)] bg-[var(--hui-color-background-accent-emphasis)] data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n          />\n          {Array.from({ length: _values.length }, (_, index) => (\n            <SliderPrimitive.Thumb\n              data-slot=\"slider-thumb\"\n              data-size={size}\n              index={index}\n              key={index}\n              className=\"group/slider-thumb absolute flex cursor-grab items-center justify-center outline-none active:cursor-grabbing active:outline-none has-focus-visible:[&_[data-slot=slider-thumb-visual]]:[outline:var(--hui-focus-ring)] hover:[&_[data-slot=slider-thumb-visual]]:bg-[var(--hui-color-background-base-secondary)] active:[&_[data-slot=slider-thumb-visual]]:scale-[1.08] active:[&_[data-slot=slider-thumb-visual]]:shadow-[var(--hui-shadow-lifted)] data-dragging:[&_[data-slot=slider-thumb-visual]]:scale-[1.08] data-dragging:[&_[data-slot=slider-thumb-visual]]:shadow-[var(--hui-shadow-lifted)] [&_input:focus-visible]:outline-none\"\n            >\n              <span\n                data-slot=\"slider-thumb-visual\"\n                className={cn(\n                  \"relative flex items-center justify-center border-[0.5px] border-[var(--hui-color-border-base-tertiary)] bg-[var(--hui-color-background-base-primary)] shadow-[var(--hui-shadow-soft)] motion-safe:[transition:transform_var(--hui-duration-press)_var(--hui-ease-out),box-shadow_var(--hui-duration-press)_var(--hui-ease-out)]\",\n                  size === \"large\"\n                    ? \"h-[var(--hui-space-6)] w-[var(--hui-space-7)] gap-[3px] rounded-[var(--hui-radius-2)]\"\n                    : \"h-[var(--hui-space-5)] w-[var(--hui-space-3)] rounded-[var(--hui-radius-full)]\"\n                )}\n              >\n                {size === \"large\" && (\n                  <>\n                    <span className=\"h-[6px] w-px rounded-[var(--hui-radius-1)] bg-[var(--hui-color-border-base-tertiary)]\" />\n                    <span className=\"h-[6px] w-px rounded-[var(--hui-radius-1)] bg-[var(--hui-color-border-base-tertiary)]\" />\n                  </>\n                )}\n              </span>\n              {showValue && (\n                <SliderPrimitive.Value\n                  data-slot=\"slider-thumb-label\"\n                  className={cn(\n                    \"absolute top-[calc(-1*(var(--hui-space-8)+1px))] left-1/2 -translate-x-1/2 whitespace-nowrap rounded-[var(--hui-radius-2)] border-[0.5px] border-[var(--hui-color-border-base-primary)] bg-[var(--hui-color-background-base-primary)] p-[var(--hui-space-2)] text-[var(--hui-color-foreground-base-primary)] shadow-[var(--hui-shadow-soft)]\",\n                    size === \"small\" && \"top-[calc(-1*var(--hui-space-7))]\"\n                  )}\n                >\n                  {(formattedValues) => formattedValues[index]}\n                </SliderPrimitive.Value>\n              )}\n            </SliderPrimitive.Thumb>\n          ))}\n        </SliderPrimitive.Track>\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nfunction SliderValue({ className, ...props }: SliderPrimitive.Value.Props) {\n  return (\n    <SliderPrimitive.Value\n      data-slot=\"slider-value\"\n      className={cn(\"flex justify-end text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Slider, SliderValue }\n","target":"components/ui/slider.tsx"}],"dependencies":["@base-ui-components/react"]}