{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider-glass",
  "type": "registry:ui",
  "title": "Slider Glass",
  "description": "Glass-themed range slider built on Radix UI with shadcn/ui compatible API:",
  "dependencies": [
    "@radix-ui/react-slider",
    "react"
  ],
  "registryDependencies": [
    "cn",
    "primitives"
  ],
  "files": [
    {
      "path": "components/glass/ui/slider-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * SliderGlass Component\n *\n * Glass-themed range slider built on Radix UI with shadcn/ui compatible API:\n * - Theme-aware styling (glass/light/aurora)\n * - Glow effect on hover/drag\n * - Gradient fill (glass theme)\n * - Range slider support (multiple thumbs)\n * - Optional label and value display\n *\n * **shadcn/ui compatible props:**\n * - `value` / `defaultValue` - Array of values (supports range)\n * - `onValueChange` - Callback when values change\n * - `onValueCommit` - Callback when interaction ends\n *\n * @example\n * ```tsx\n * // Single value (controlled)\n * <SliderGlass value={[50]} onValueChange={setValue} />\n *\n * // Range slider\n * <SliderGlass defaultValue={[25, 75]} />\n *\n * // With label and value display\n * <SliderGlass value={[50]} onValueChange={setValue} label=\"Volume\" showValue />\n * ```\n */\n\nimport { forwardRef, type CSSProperties, type ComponentPropsWithoutRef } from 'react';\nimport * as SliderPrimitive from '@radix-ui/react-slider';\nimport { cn } from '@/lib/utils';\nimport { FormFieldWrapper } from '@/components/glass/primitives';\nimport '@/glass-theme.css';\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\nexport interface SliderGlassProps extends Omit<\n  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n  'value' | 'defaultValue' | 'onValueChange'\n> {\n  /**\n   * Controlled value (shadcn/ui compatible - array for range support)\n   */\n  readonly value?: number[];\n  /**\n   * Default value for uncontrolled usage (array for range support)\n   */\n  readonly defaultValue?: number[];\n  /**\n   * Callback when value changes (shadcn/ui compatible)\n   */\n  readonly onValueChange?: (value: number[]) => void;\n  /**\n   * Callback when interaction ends (mouse up / touch end)\n   */\n  readonly onValueCommit?: (value: number[]) => void;\n  /**\n   * Show current value(s) next to label\n   */\n  readonly showValue?: boolean;\n  /**\n   * Optional label text\n   */\n  readonly label?: string;\n  /**\n   * Error message to display\n   */\n  readonly error?: string;\n  /**\n   * Success message to display\n   */\n  readonly success?: string;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const SliderGlass = forwardRef<\n  React.ComponentRef<typeof SliderPrimitive.Root>,\n  SliderGlassProps\n>(\n  (\n    {\n      className,\n      value,\n      defaultValue,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      showValue,\n      label,\n      error,\n      success,\n      disabled,\n      orientation = 'horizontal',\n      ...props\n    },\n    ref\n  ) => {\n    // Determine current values for rendering thumbs and display\n    const currentValue = value ?? defaultValue ?? [min];\n\n    // Format value display\n    const formatValueDisplay = (values: number[]) => {\n      if (values.length === 1) {\n        return `${values[0]}`;\n      }\n      return `${values[0]} - ${values[values.length - 1]}`;\n    };\n\n    // Track styles via CSS variables\n    const trackStyles: CSSProperties = {\n      background: 'var(--slider-track)',\n    };\n\n    // Range (fill) styles via CSS variables\n    const rangeStyles: CSSProperties = {\n      background: 'var(--slider-fill)',\n    };\n\n    // Thumb styles via CSS variables\n    const thumbStyles: CSSProperties = {\n      background: 'var(--slider-thumb)',\n      border: '2px solid var(--slider-thumb-border)',\n    };\n\n    // Custom label with value display - only used when showValue is true\n    const customLabel =\n      (label && showValue) || (!label && showValue) ? (\n        <div className=\"flex justify-between mb-1.5 md:mb-2\">\n          {label && (\n            <label\n              className=\"text-xs md:text-sm font-medium\"\n              style={{ color: 'var(--text-secondary)' }}\n            >\n              {label}\n            </label>\n          )}\n          <span\n            className=\"text-xs md:text-sm font-medium tabular-nums\"\n            style={{ color: 'var(--text-secondary)' }}\n          >\n            {formatValueDisplay(currentValue)}\n          </span>\n        </div>\n      ) : undefined;\n\n    return (\n      <FormFieldWrapper\n        label={showValue ? undefined : label}\n        error={error}\n        success={success}\n        className={cn('w-full', className)}\n      >\n        {customLabel}\n        <SliderPrimitive.Root\n          ref={ref}\n          data-slot=\"slider\"\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          onValueCommit={onValueCommit}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          orientation={orientation}\n          className={cn(\n            'relative flex touch-none select-none',\n            orientation === 'horizontal'\n              ? 'w-full h-8 md:h-6 items-center'\n              : 'flex-col h-full w-8 md:w-6 justify-center',\n            disabled && 'opacity-50 cursor-not-allowed',\n            'group'\n          )}\n          {...props}\n        >\n          <SliderPrimitive.Track\n            data-slot=\"slider-track\"\n            className={cn(\n              'relative grow rounded-full',\n              orientation === 'horizontal' ? 'h-2.5 md:h-2 w-full' : 'w-2.5 md:w-2 h-full'\n            )}\n            style={trackStyles}\n          >\n            <SliderPrimitive.Range\n              data-slot=\"slider-range\"\n              className={cn(\n                'absolute rounded-full transition-shadow duration-150',\n                orientation === 'horizontal' ? 'h-full' : 'w-full',\n                'group-hover:shadow-(--slider-fill-glow)',\n                'group-active:shadow-(--slider-fill-glow)'\n              )}\n              style={rangeStyles}\n            />\n          </SliderPrimitive.Track>\n          {currentValue.map((_, index) => (\n            <SliderPrimitive.Thumb\n              key={index}\n              data-slot=\"slider-thumb\"\n              className={cn(\n                'block rounded-full shadow-md transition-all duration-150',\n                'w-6 h-6 md:w-5 md:h-5',\n                'hover:scale-105',\n                'focus-visible:outline-none focus-visible:shadow-(--focus-glow)',\n                'active:scale-110',\n                disabled && 'pointer-events-none'\n              )}\n              style={thumbStyles}\n              aria-label={\n                label\n                  ? currentValue.length > 1\n                    ? `${label} thumb ${index + 1}`\n                    : label\n                  : `Slider thumb ${index + 1}`\n              }\n            />\n          ))}\n        </SliderPrimitive.Root>\n      </FormFieldWrapper>\n    );\n  }\n);\n\nSliderGlass.displayName = 'SliderGlass';\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}