{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "dependencies": [
    "@data-slot/slider"
  ],
  "files": [
    {
      "path": "ui/slider/Slider.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/slider/Slider.astro directly.\n/**\n * @component Slider\n * @title Slider\n * @description An input component that allows users to select a value from a range by dragging a thumb along a track.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2523-6067&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <Slider class=\"w-full max-w-sm\" defaultValue={50} max={100} />\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Slider } from '@bejamas/ui/components/slider';\n * ---\n *\n * <Slider defaultValue={50} max={100} />\n * ```\n *\n * @examples\n *\n * ### Range\n *\n * Use two thumbs to create a range slider for selecting a min and max value.\n *\n * <Slider class=\"w-full max-w-sm\" defaultValue={[25, 75]} max={100} />\n *\n * ### Vertical\n *\n * Set orientation to vertical for a vertical slider.\n *\n * <div class=\"h-48\">\n *   <Slider class=\"h-full\" orientation=\"vertical\" defaultValue={50} max={100} />\n * </div>\n *\n * ### Disabled\n *\n * Disable the slider to prevent interaction.\n *\n * <Slider class=\"w-full max-w-sm\" defaultValue={50} max={100} disabled />\n *\n * ### Step\n *\n * Set a custom step increment.\n *\n * <Slider class=\"w-full max-w-sm\" defaultValue={50} max={100} step={10} />\n *\n * @api\n *\n * ### Events\n *\n * The slider emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `slider:change` | `{ value: number \\| [number, number] }` | Fired on every value change (during drag) |\n * | `slider:commit` | `{ value: number \\| [number, number] }` | Fired when value is committed (pointer up or keyboard blur) |\n *\n * ```astro nocollapse\n * <Slider id=\"my-slider\" defaultValue={50} max={100} />\n * ```\n *\n * ```js nocollapse\n *   const slider = document.getElementById('my-slider');\n *\n *   slider.addEventListener('slider:change', (e) => {\n *     console.log('Value changing:', e.detail.value);\n *   });\n *\n *   slider.addEventListener('slider:commit', (e) => {\n *     console.log('Value committed:', e.detail.value);\n *   });\n * ```\n *\n * ### Programmatic Control\n *\n * You can set the slider value programmatically by dispatching a `slider:set` event:\n *\n * ```js nocollapse\n * // Set single value\n * slider.dispatchEvent(new CustomEvent('slider:set', {\n *   detail: { value: 75 }\n * }));\n *\n * // Set range values\n * slider.dispatchEvent(new CustomEvent('slider:set', {\n *   detail: { value: [25, 75] }\n * }));\n * ```\n *\n * ### Data Attributes\n *\n * The slider sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-orientation` | slider | Current orientation (`horizontal` or `vertical`) |\n * | `data-disabled` | slider | Present when slider is disabled |\n * | `data-dragging` | slider, thumb | Present during drag interaction |\n * | `data-value` | slider | Current value(s) as string (e.g., `\"50\"` or `\"25,75\"`) |\n *\n */\n\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ntype SliderValue = number | [number, number];\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n  value?: SliderValue;\n  defaultValue?: SliderValue;\n  min?: number;\n  max?: number;\n  step?: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  disabled?: boolean;\n}\n\nconst {\n  class: className = \"\",\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  orientation = \"horizontal\",\n  disabled = false,\n  ...rest\n} = Astro.props as Props;\n\nconst resolvedValue = value ?? defaultValue ?? min;\nconst defaultValueAttribute = Array.isArray(resolvedValue)\n  ? resolvedValue.join(\",\")\n  : String(resolvedValue);\nconst thumbCount = Array.isArray(resolvedValue) ? 2 : 1;\n---\n\n<div\n  {...rest}\n  data-slot=\"slider\"\n  data-default-value={defaultValueAttribute}\n  data-min={min}\n  data-max={max}\n  data-step={step}\n  data-orientation={orientation}\n  data-thumb-alignment=\"edge\"\n  data-disabled={disabled ? \"true\" : undefined}\n  class={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n>\n  <div\n    data-disabled={disabled ? \"true\" : undefined}\n    class=\"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col\"\n  >\n    <div\n      data-slot=\"slider-track\"\n      class=\"bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative grow overflow-hidden select-none\"\n    >\n      <div\n        data-slot=\"slider-range\"\n        class=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n      >\n      </div>\n    </div>\n    {\n      Array.from({ length: thumbCount }, (_, index) => (\n        <div\n          data-slot=\"slider-thumb\"\n          data-index={index}\n          class=\"border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))\n    }\n  </div>\n</div>\n\n<script>\n  import { createSlider } from \"@data-slot/slider\";\n\n  document.querySelectorAll('[data-slot=\"slider\"]').forEach((el) => {\n    const element = el as HTMLElement;\n\n    // Don't pass defaultValue in options - let the library read from\n    // data-default-value directly so single and range sliders stay aligned.\n    createSlider(element, {\n      min: Number(element.dataset.min) || 0,\n      max: Number(element.dataset.max) || 100,\n      step: Number(element.dataset.step) || 1,\n      orientation:\n        (element.dataset.orientation as \"horizontal\" | \"vertical\") ||\n        \"horizontal\",\n      disabled: element.dataset.disabled === \"true\",\n    });\n  });\n</script>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/slider/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/slider/index.ts directly.\nexport { default as Slider } from \"./Slider.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}