{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "title": "Slider",
  "description": "A glass knob that turns to liquid as you drag it.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://liquikit.dev/r/core.json",
    "https://liquikit.dev/r/glass.json"
  ],
  "files": [
    {
      "path": "src/slider.tsx",
      "content": "\"use client\";\n\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\";\nimport { type CSSProperties, useCallback, useRef, useState } from \"react\";\nimport { GlassSliderSurface, type UseGlassSliderResult } from \"./glass\";\nimport { cx, type GlassOptions } from \"./types\";\nimport \"./liquikit.css\";\n\nexport type SliderProps = Omit<\n\tBaseSlider.Root.Props,\n\t| \"value\"\n\t| \"defaultValue\"\n\t| \"onValueChange\"\n\t| \"onValueCommitted\"\n\t| \"children\"\n\t| \"render\"\n\t| \"className\"\n\t| \"style\"\n\t| \"orientation\"\n\t| \"thumbAlignment\"\n\t| \"thumbCollisionBehavior\"\n\t| \"minStepsBetweenValues\"\n> &\n\tGlassOptions & {\n\t\tvalue?: number;\n\t\tdefaultValue?: number;\n\t\tonValueChange?: (\n\t\t\tvalue: number,\n\t\t\teventDetails: BaseSlider.Root.ChangeEventDetails,\n\t\t) => void;\n\t\tonValueCommitted?: (\n\t\t\tvalue: number,\n\t\t\teventDetails: BaseSlider.Root.CommitEventDetails,\n\t\t) => void;\n\t\twidth?: number;\n\t\ttrackHeight?: number;\n\t\tthumbHeight?: number;\n\t\tthumbWidth?: number;\n\t\t\"aria-label\"?: string;\n\t\tclassName?: string;\n\t\tstyle?: CSSProperties;\n\t};\n\nfunction single(value: number | readonly number[]) {\n\treturn typeof value === \"number\" ? value : (value[0] ?? 0);\n}\n\nexport function Slider({\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\tonValueCommitted,\n\tmin = 0,\n\tmax = 100,\n\tstep = 1,\n\twidth,\n\ttrackHeight,\n\tthumbHeight = 22,\n\tthumbWidth,\n\ttheme,\n\tlens,\n\tliquid,\n\t\"aria-label\": ariaLabel,\n\tclassName,\n\tstyle,\n\t...rootProps\n}: SliderProps) {\n\tconst controls = useRef<UseGlassSliderResult>(null);\n\tconst [uncontrolled, setUncontrolled] = useState(defaultValue ?? min);\n\tconst current = value ?? uncontrolled;\n\tconst handleWidth = thumbWidth ?? Math.round(2 * thumbHeight);\n\n\tconst press = useCallback(() => {\n\t\tcontrols.current?.setPressed(true);\n\t\tconst release = () => {\n\t\t\tcontrols.current?.setPressed(false);\n\t\t\twindow.removeEventListener(\"pointerup\", release);\n\t\t\twindow.removeEventListener(\"pointercancel\", release);\n\t\t};\n\t\twindow.addEventListener(\"pointerup\", release);\n\t\twindow.addEventListener(\"pointercancel\", release);\n\t}, []);\n\n\treturn (\n\t\t<BaseSlider.Root\n\t\t\t{...rootProps}\n\t\t\tvalue={current}\n\t\t\tonValueChange={(next, eventDetails) => {\n\t\t\t\tconst number = single(next);\n\t\t\t\tif (value === undefined) setUncontrolled(number);\n\t\t\t\tonValueChange?.(number, eventDetails);\n\t\t\t}}\n\t\t\tonValueCommitted={(next, eventDetails) =>\n\t\t\t\tonValueCommitted?.(single(next), eventDetails)\n\t\t\t}\n\t\t\tmin={min}\n\t\t\tmax={max}\n\t\t\tstep={step}\n\t\t\tthumbAlignment=\"edge\"\n\t\t\tclassName={cx(\"glass-ui-slider\", className)}\n\t\t\tdata-fluid={width === undefined ? \"\" : undefined}\n\t\t\tstyle={width === undefined ? style : { ...style, width }}\n\t\t>\n\t\t\t<GlassSliderSurface\n\t\t\t\tvalue={current}\n\t\t\t\tmin={min}\n\t\t\t\tmax={max}\n\t\t\t\tstep={step}\n\t\t\t\twidth={width}\n\t\t\t\ttrackHeight={trackHeight}\n\t\t\t\tthumbHeight={thumbHeight}\n\t\t\t\tthumbWidth={thumbWidth}\n\t\t\t\tdisabled={rootProps.disabled}\n\t\t\t\tinteractive={false}\n\t\t\t\tlens={lens}\n\t\t\t\ttheme={theme}\n\t\t\t\tliquid={liquid}\n\t\t\t\tcontrolsRef={controls}\n\t\t\t\toverlay={\n\t\t\t\t\t<BaseSlider.Control\n\t\t\t\t\t\tclassName=\"glass-ui-slider__control\"\n\t\t\t\t\t\tonPointerDown={rootProps.disabled ? undefined : press}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BaseSlider.Track className=\"glass-ui-slider__track\">\n\t\t\t\t\t\t\t<BaseSlider.Thumb\n\t\t\t\t\t\t\t\tclassName=\"glass-ui-slider__thumb\"\n\t\t\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\t\t\tstyle={{ width: handleWidth, height: thumbHeight }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</BaseSlider.Track>\n\t\t\t\t\t</BaseSlider.Control>\n\t\t\t\t}\n\t\t\t/>\n\t\t</BaseSlider.Root>\n\t);\n}\n",
      "type": "registry:ui",
      "target": "@components/liquikit/slider.tsx"
    }
  ],
  "type": "registry:ui"
}