{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "title": "Integrated Slider",
  "description": "Thin accessible single-value Slider wrapper with a visible label, live numeric value, scalar callbacks, primitive-owned interaction and form behavior, and explicit class and semantic ownership.",
  "registryDependencies": [
    "slider"
  ],
  "files": [
    {
      "path": "registry/ui/slider.tsx",
      "content": "\"use client\";\n\nimport type { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport type { ClassValue } from \"clsx\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useId, useState } from \"react\";\nimport { Slider as SliderControl } from \"@/components/ui/slider\";\nimport { cn } from \"@/lib/utils\";\n\ntype SliderControlProps = ComponentProps<typeof SliderControl>;\n\nconst WHITESPACE_PATTERN = /\\s+/;\n\nconst mergeIds = (...values: (string | undefined)[]): string | undefined => {\n  const tokens = values\n    .flatMap((current) => current?.split(WHITESPACE_PATTERN) ?? [])\n    .filter(Boolean);\n  const merged = [...new Set(tokens)].join(\" \");\n\n  return merged || undefined;\n};\n\nconst unwrapScalar = (value: number | readonly number[]): number =>\n  (value as readonly [number])[0];\n\ninterface SliderOwnedProps {\n  /** Descriptions require explicit primitive composition. */\n  \"aria-describedby\"?: never;\n  /** The visible label is the supported accessible-name path. */\n  \"aria-label\"?: never;\n  /** Orientation semantics are derived from orientation. */\n  \"aria-orientation\"?: never;\n  /** Numeric ARIA is derived by the primitive from max. */\n  \"aria-valuemax\"?: never;\n  /** Numeric ARIA is derived by the primitive from min. */\n  \"aria-valuemin\"?: never;\n  /** Numeric ARIA is derived by the primitive from value. */\n  \"aria-valuenow\"?: never;\n  /** Custom value text belongs to primitive composition. */\n  \"aria-valuetext\"?: never;\n  /** Compose owns the complete child structure. */\n  children?: never;\n  className?: ClassValue;\n  /** Raw HTML conflicts with Compose-owned descendants. */\n  dangerouslySetInnerHTML?: never;\n  /** Primitive state markers are derived, not caller-owned. */\n  \"data-dirty\"?: never;\n  /** Primitive state markers are derived, not caller-owned. */\n  \"data-disabled\"?: never;\n  /** Primitive state markers are derived, not caller-owned. */\n  \"data-dragging\"?: never;\n  /** Primitive state markers are derived, not caller-owned. */\n  \"data-filled\"?: never;\n  /** Primitive state markers are derived, not caller-owned. */\n  \"data-focused\"?: never;\n  /** Primitive state markers are derived, not caller-owned. */\n  \"data-invalid\"?: never;\n  /** Primitive state markers are derived, not caller-owned. */\n  \"data-orientation\"?: never;\n  /** The primitive slot marker is Compose-owned. */\n  \"data-slot\"?: never;\n  /** Primitive state markers are derived, not caller-owned. */\n  \"data-touched\"?: never;\n  /** Primitive state markers are derived, not caller-owned. */\n  \"data-valid\"?: never;\n  defaultValue?: number;\n  /** Formatting is outside this thin wrapper. */\n  format?: never;\n  label: ReactNode;\n  labelClassName?: ClassValue;\n  /** Locale/i18n mechanisms are outside this thin wrapper. */\n  locale?: never;\n  /** Range spacing belongs to multi-thumb primitive composition. */\n  minStepsBetweenValues?: never;\n  onValueChange?: (\n    value: number,\n    eventDetails: SliderPrimitive.Root.ChangeEventDetails\n  ) => void;\n  onValueCommitted?: (\n    value: number,\n    eventDetails: SliderPrimitive.Root.CommitEventDetails\n  ) => void;\n  /** Root replacement is a primitive escape path. */\n  render?: never;\n  /** The primitive owns its group role. */\n  role?: never;\n  showValue?: boolean;\n  /** Collision policy belongs to multi-thumb primitive composition. */\n  thumbCollisionBehavior?: never;\n  value?: number;\n  valueClassName?: ClassValue;\n}\n\nexport interface SliderProps\n  extends Omit<SliderControlProps, keyof SliderOwnedProps>,\n    SliderOwnedProps {}\n\nexport const Slider = ({\n  \"aria-describedby\": _ignoredAriaDescribedBy,\n  \"aria-label\": _ignoredAriaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-orientation\": _ignoredAriaOrientation,\n  \"aria-valuemax\": _ignoredAriaValueMax,\n  \"aria-valuemin\": _ignoredAriaValueMin,\n  \"aria-valuenow\": _ignoredAriaValueNow,\n  \"aria-valuetext\": _ignoredAriaValueText,\n  children: _ignoredChildren,\n  className,\n  \"data-disabled\": _ignoredDataDisabled,\n  \"data-dirty\": _ignoredDataDirty,\n  \"data-dragging\": _ignoredDataDragging,\n  \"data-filled\": _ignoredDataFilled,\n  \"data-focused\": _ignoredDataFocused,\n  \"data-invalid\": _ignoredDataInvalid,\n  \"data-orientation\": _ignoredDataOrientation,\n  \"data-slot\": _ignoredDataSlot,\n  \"data-touched\": _ignoredDataTouched,\n  \"data-valid\": _ignoredDataValid,\n  dangerouslySetInnerHTML: _ignoredDangerouslySetInnerHTML,\n  defaultValue,\n  format: _ignoredFormat,\n  label,\n  labelClassName,\n  locale: _ignoredLocale,\n  min = 0,\n  minStepsBetweenValues: _ignoredMinStepsBetweenValues,\n  onValueChange,\n  onValueCommitted,\n  render: _ignoredRender,\n  role: _ignoredRole,\n  showValue = true,\n  thumbCollisionBehavior: _ignoredThumbCollisionBehavior,\n  value,\n  valueClassName,\n  ...controlProps\n}: SliderProps) => {\n  const autoId = useId();\n  const labelId = `${autoId}-label`;\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? min\n  );\n  const displayValue = value ?? uncontrolledValue;\n  const handleValueChange = (\n    nextValue: number | readonly number[],\n    eventDetails: SliderPrimitive.Root.ChangeEventDetails\n  ) => {\n    const nextScalar = unwrapScalar(nextValue);\n\n    onValueChange?.(nextScalar, eventDetails);\n\n    if (value === undefined && !eventDetails.isCanceled) {\n      setUncontrolledValue(nextScalar);\n    }\n  };\n  const handleValueCommitted = (\n    nextValue: number | readonly number[],\n    eventDetails: SliderPrimitive.Root.CommitEventDetails\n  ) => {\n    onValueCommitted?.(unwrapScalar(nextValue), eventDetails);\n  };\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <span\n          className={cn(\"font-medium text-sm\", labelClassName)}\n          data-slot=\"slider-label\"\n          id={labelId}\n        >\n          {label}\n        </span>\n        {showValue ? (\n          <span\n            className={cn(\"text-muted-foreground text-sm\", valueClassName)}\n            data-slot=\"slider-value\"\n          >\n            {displayValue}\n          </span>\n        ) : null}\n      </div>\n      <SliderControl\n        {...controlProps}\n        aria-labelledby={mergeIds(labelId, ariaLabelledBy)}\n        className={cn(className)}\n        defaultValue={value === undefined ? [defaultValue ?? min] : undefined}\n        min={min}\n        onValueChange={handleValueChange}\n        onValueCommitted={handleValueCommitted}\n        value={value === undefined ? undefined : [value]}\n      />\n    </div>\n  );\n};\n\nexport default Slider;\n",
      "type": "registry:component",
      "target": "components/easy/slider.tsx"
    }
  ],
  "type": "registry:component"
}