@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/src/primitives/scroll-area.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+/**
+ * DS-styled scrollable container. Wraps Radix `ScrollArea` with token-driven
+ * thumb / track styling that matches the rest of the design system instead of
+ * native OS scrollbars (which render inconsistently across macOS / Windows /
+ * Linux).
+ *
+ * No dedicated Figma node — DS Open Mercato library did not ship a `ScrollArea`
+ * master component at the time this primitive was authored. Styling is inferred
+ * from the DS scrollbar token decisions used elsewhere (muted-foreground thumb,
+ * transparent track, hover state, `rounded-full` thumb shape).
+ *
+ * Usage — primary single-element form:
+ *
+ * ```tsx
+ * <ScrollArea className="h-72">
+ *   <div className="p-4">{children}</div>
+ * </ScrollArea>
+ * ```
+ *
+ * For advanced layouts that need separate access to the `Viewport`,
+ * `Scrollbar`, or `Corner`, use the compound API directly:
+ *
+ * ```tsx
+ * <ScrollAreaRoot className="h-72">
+ *   <ScrollAreaViewport>{children}</ScrollAreaViewport>
+ *   <ScrollAreaScrollbar orientation="vertical">
+ *     <ScrollAreaThumb />
+ *   </ScrollAreaScrollbar>
+ *   <ScrollAreaCorner />
+ * </ScrollAreaRoot>
+ * ```
+ */
+
+const ScrollAreaRoot = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    data-slot="scroll-area-root"
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  />
+))
+ScrollAreaRoot.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollAreaViewport = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <ScrollAreaPrimitive.Viewport
+    ref={ref}
+    data-slot="scroll-area-viewport"
+    className={cn('h-full w-full rounded-[inherit]', className)}
+    {...props}
+  />
+))
+ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName
+
+const ScrollAreaScrollbar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    data-slot="scroll-area-scrollbar"
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
+      orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-px',
+      className,
+    )}
+    {...props}
+  />
+))
+ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+const ScrollAreaThumb = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaThumb>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaThumb>
+>(({ className, ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaThumb
+    ref={ref}
+    data-slot="scroll-area-thumb"
+    className={cn(
+      'relative flex-1 rounded-full bg-muted-foreground/30 transition-colors hover:bg-muted-foreground/50',
+      className,
+    )}
+    {...props}
+  />
+))
+ScrollAreaThumb.displayName = ScrollAreaPrimitive.ScrollAreaThumb.displayName
+
+const ScrollAreaCorner = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Corner>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Corner>
+>(({ className, ...props }, ref) => (
+  <ScrollAreaPrimitive.Corner
+    ref={ref}
+    data-slot="scroll-area-corner"
+    className={cn('bg-transparent', className)}
+    {...props}
+  />
+))
+ScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName
+
+type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+  /**
+   * Which scrollbars to render. Defaults to `'vertical'` — the most common
+   * case. Use `'both'` for two-axis scroll (e.g. wide table preview) or
+   * `'horizontal'` for a horizontal-only carousel.
+   */
+  scrollbars?: 'vertical' | 'horizontal' | 'both'
+  /** Optional className applied to the inner `Viewport`. */
+  viewportClassName?: string
+  /** Optional className applied to every `Scrollbar`. */
+  scrollbarClassName?: string
+  /** Optional className applied to every `Thumb`. */
+  thumbClassName?: string
+}
+
+/**
+ * Convenience wrapper that composes Root + Viewport + one or two Scrollbars +
+ * Corner in a single element. Reach for `ScrollAreaRoot` + sub-components
+ * directly when the wrapper's defaults don't fit (e.g. you need conditional
+ * scrollbar rendering or a custom viewport).
+ */
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ScrollAreaProps
+>(
+  (
+    { children, className, scrollbars = 'vertical', viewportClassName, scrollbarClassName, thumbClassName, ...props },
+    ref,
+  ) => (
+    <ScrollAreaRoot ref={ref} className={className} {...props}>
+      <ScrollAreaViewport className={viewportClassName}>{children}</ScrollAreaViewport>
+      {(scrollbars === 'vertical' || scrollbars === 'both') ? (
+        <ScrollAreaScrollbar orientation="vertical" className={scrollbarClassName}>
+          <ScrollAreaThumb className={thumbClassName} />
+        </ScrollAreaScrollbar>
+      ) : null}
+      {(scrollbars === 'horizontal' || scrollbars === 'both') ? (
+        <ScrollAreaScrollbar orientation="horizontal" className={scrollbarClassName}>
+          <ScrollAreaThumb className={thumbClassName} />
+        </ScrollAreaScrollbar>
+      ) : null}
+      <ScrollAreaCorner />
+    </ScrollAreaRoot>
+  ),
+)
+ScrollArea.displayName = 'ScrollArea'
+
+export {
+  ScrollArea,
+  ScrollAreaRoot,
+  ScrollAreaViewport,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaCorner,
+}

package/src/primitives/segmented-control.tsx

@@ -0,0 +1,162 @@
+"use client"
+
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+/**
+ * iOS-style segmented control per Figma `Switch / Chart / Cryptocurrency`
+ * (component set id `199963:1442` in DS Open Mercato). Renders a single
+ * track with N items where exactly one is selected at a time. Selecting
+ * a new item fires `onValueChange`.
+ *
+ * Use for **mutually-exclusive view state** — list page filters like
+ * "All / Active / Archived", chart period selectors, layout toggles
+ * (List / Grid). For *related actions* (each does something different),
+ * reach for `ButtonGroup` instead.
+ *
+ * Built on Radix `RadioGroup` so we inherit the radio-group ARIA contract
+ * (`role="radiogroup"`, `role="radio"` on items, arrow-key navigation,
+ * roving tabindex) for free. No new dependency — Radix RadioGroup is
+ * already installed via the `Radio` primitive.
+ *
+ * ```tsx
+ * const [view, setView] = React.useState('all')
+ * <SegmentedControl value={view} onValueChange={setView} aria-label="View filter">
+ *   <SegmentedControlItem value="all">All</SegmentedControlItem>
+ *   <SegmentedControlItem value="active">Active</SegmentedControlItem>
+ *   <SegmentedControlItem value="archived">Archived</SegmentedControlItem>
+ * </SegmentedControl>
+ * ```
+ *
+ * Sizes:
+ * - `default` (h-8 / 32px) — standard toolbar density.
+ * - `sm` (h-7 / 28px) — tighter; pair with `text-xs`.
+ */
+
+type SegmentedControlContextValue = {
+  size: 'sm' | 'default'
+  disabled?: boolean
+}
+
+const SegmentedControlContext = React.createContext<SegmentedControlContextValue>({
+  size: 'default',
+  disabled: false,
+})
+
+const trackVariants = cva(
+  // Pill-shaped track with subtle inner padding so selected items render
+  // a smaller inner pill (the iOS slide-thumb effect). Track is muted —
+  // selected item raises with bg-background + shadow-sm. We use full
+  // `bg-muted` (not /40) so the contrast between track and a selected
+  // bg-background item stays visible in the light theme; in dark mode
+  // the token already darkens further so the contrast holds.
+  //
+  // Height math (box-border on every element):
+  //   default → track h-8 (32px) − 2px border − 2px padding (p-px ×2) = 28px → matches item h-7
+  //   sm      → track h-7 (28px) − 2px border − 2px padding (p-px ×2) = 24px → matches item h-6
+  // Using `p-0.5` (2px each side = 4px total) instead breaks both sizes by
+  // 2px so the selected pill clips top and bottom against the track border.
+  'inline-flex w-fit gap-0 rounded-full border border-input bg-muted p-px transition-colors',
+  {
+    variants: {
+      size: {
+        sm: 'h-7',
+        default: 'h-8',
+      },
+      disabled: {
+        true: 'cursor-not-allowed opacity-60',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      disabled: false,
+    },
+  },
+)
+
+const itemVariants = cva(
+  // Items are pills that fill the track minus its 2px inner padding.
+  // Selected state lifts via bg-background + shadow-sm + font-semibold
+  // (the font-weight bump gives a secondary visual cue beyond color +
+  // shadow, important when the surrounding theme is high-key and the
+  // shadow alone is hard to read). Unselected text is muted; hover
+  // only nudges color (no bg change — keeps the track flat).
+  'inline-flex items-center justify-center rounded-full font-medium ' +
+    'transition-all outline-none focus-visible:shadow-focus ' +
+    'disabled:cursor-not-allowed disabled:opacity-50 ' +
+    'data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:font-semibold data-[state=checked]:shadow-sm ' +
+    'data-[state=unchecked]:bg-transparent data-[state=unchecked]:text-muted-foreground data-[state=unchecked]:hover:text-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'h-6 px-2.5 text-xs',
+        default: 'h-7 px-3 text-sm',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+)
+
+export type SegmentedControlProps = Omit<
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
+  'orientation'
+> &
+  VariantProps<typeof trackVariants> & {
+    /** Optional screen-reader label for the radio group. */
+    'aria-label'?: string
+  }
+
+export const SegmentedControl = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  SegmentedControlProps
+>(({ className, size, disabled, children, ...props }, ref) => {
+  const ctx = React.useMemo<SegmentedControlContextValue>(
+    () => ({ size: size ?? 'default', disabled: disabled ?? false }),
+    [size, disabled],
+  )
+  return (
+    <SegmentedControlContext.Provider value={ctx}>
+      <RadioGroupPrimitive.Root
+        ref={ref}
+        orientation="horizontal"
+        disabled={disabled ?? undefined}
+        data-slot="segmented-control"
+        className={cn(trackVariants({ size, disabled }), className)}
+        {...props}
+      >
+        {children}
+      </RadioGroupPrimitive.Root>
+    </SegmentedControlContext.Provider>
+  )
+})
+SegmentedControl.displayName = 'SegmentedControl'
+
+export type SegmentedControlItemProps = React.ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Item
+>
+
+export const SegmentedControlItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  SegmentedControlItemProps
+>(({ className, children, ...props }, ref) => {
+  const { size } = React.useContext(SegmentedControlContext)
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      data-slot="segmented-control-item"
+      className={cn(itemVariants({ size }), className)}
+      {...props}
+    >
+      {children}
+    </RadioGroupPrimitive.Item>
+  )
+})
+SegmentedControlItem.displayName = 'SegmentedControlItem'
+
+export { trackVariants as segmentedControlTrackVariants, itemVariants as segmentedControlItemVariants }

package/src/primitives/separator.tsx

@@ -1,7 +1,167 @@
+"use client"
+
 import * as React from 'react'
 
-export function Separator({ className = '', orientation = 'horizontal' }: { className?: string; orientation?: 'horizontal' | 'vertical' }) {
-  const base = orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full'
-  return <div role="separator" aria-orientation={orientation} className={`${base} bg-border ${className}`} />
+import { cn } from '@open-mercato/shared/lib/utils'
+
+/**
+ * Visual divider — horizontal or vertical. Phase B.3 rewrite (Figma
+ * `Content Divider` page, componentSet `414:4401`) keeps the original
+ * bare-rule API and adds the labeled / dashed / section variants.
+ *
+ * ## Backward compatibility (5 import sites)
+ *
+ * All five existing consumers pass `<Separator />` or `<Separator
+ * className="my-4" />` and keep working verbatim:
+ *
+ *   customers/.../companies/[id]/page.tsx
+ *   workflows/.../tasks/[id]/page.tsx
+ *   workflows/components/EdgeEditDialog.tsx
+ *   workflows/components/mobile/MobileTaskForm.tsx
+ *   data_sync/.../data-sync/page.tsx
+ *
+ * ## Variants per Figma `Content Divider [1.1]`
+ *
+ *   plain          — `<Separator />`
+ *   labeled        — `<Separator label="OR" />`
+ *   labeled start  — `<Separator label="OR" labelAlign="start" />`
+ *   section header — `<Separator section>AMOUNT & ACCOUNT</Separator>`
+ *   dashed         — `<Separator variant="dashed" />`
+ *
+ * For the "rule + center button overlay" examples (Figma variants
+ * 6-9 — `+` button, navigation, "Add" button, button row) the
+ * primitive ships only the rule. Wrap your buttons in a parent
+ * positioned over the separator at the consumer level — adding an
+ * `overlay` slot to the primitive would multiply layout failure
+ * modes (button width, button height, button spacing) far more
+ * than the small win of saving the consumer wrap.
+ */
+
+export type SeparatorProps = {
+  className?: string
+  orientation?: 'horizontal' | 'vertical'
+  /** Visual style of the rule. */
+  variant?: 'solid' | 'dashed'
+  /** Optional inline label. When set, the primitive renders as two
+   * rule halves with the label between them (horizontal only).
+   * Ignored for vertical orientation — pass plain children inside a
+   * vertical flex container instead. */
+  label?: React.ReactNode
+  /** Alignment of the label between the two rule halves.
+   * @default 'center' */
+  labelAlign?: 'center' | 'start' | 'end'
+  /** Section-header style — full-width bg-muted strip + uppercase
+   * label (Figma variant 5: "AMOUNT & ACCOUNT" content header). When
+   * `section` is true the `label` prop is rendered inside the strip;
+   * or pass content via `children`. Mutually exclusive with
+   * `label`/`labelAlign` (those use the inline-rule style). */
+  section?: boolean
+  /** Children — only consumed when `section` is true (the strip
+   * label can be JSX). Ignored for non-section variants. */
+  children?: React.ReactNode
+}
+
+// `solid` keeps the legacy `bg-border` painted-line approach for
+// max backward compat with any consumers relying on box-model sizing.
+// `dashed` requires `border-style` so it falls back to `border-t`
+// with the painted line dropped via `h-0`.
+const HORIZONTAL_RULE_CLASSES: Record<'solid' | 'dashed', string> = {
+  solid: 'h-px bg-border',
+  dashed: 'h-0 border-t border-dashed border-border',
+}
+
+const HORIZONTAL_LABELED_SEGMENT: Record<'solid' | 'dashed', string> = {
+  solid: 'h-px bg-border',
+  dashed: 'h-0 border-t border-dashed border-border',
 }
 
+const VERTICAL_RULE_CLASSES: Record<'solid' | 'dashed', string> = {
+  solid: 'w-px bg-border',
+  dashed: 'w-0 border-l border-dashed border-border',
+}
+
+export function Separator({
+  className = '',
+  orientation = 'horizontal',
+  variant = 'solid',
+  label,
+  labelAlign = 'center',
+  section = false,
+  children,
+}: SeparatorProps) {
+  // ---- Section header variant (Figma 5: AMOUNT & ACCOUNT) ----------
+  if (section) {
+    return (
+      <div
+        role="separator"
+        data-slot="separator"
+        data-variant="section"
+        aria-orientation="horizontal"
+        className={cn(
+          'w-full bg-muted px-3 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground',
+          className,
+        )}
+      >
+        {label ?? children}
+      </div>
+    )
+  }
+
+  // ---- Vertical rule (no label support — Figma doesn't ship that
+  // pattern) -----------------------------------------------------------
+  if (orientation === 'vertical') {
+    return (
+      <div
+        role="separator"
+        aria-orientation="vertical"
+        data-slot="separator"
+        data-variant={variant}
+        className={cn('h-full', VERTICAL_RULE_CLASSES[variant], className)}
+      />
+    )
+  }
+
+  // ---- Horizontal rule with optional inline label -------------------
+  if (label !== undefined) {
+    const startSpan = labelAlign === 'start' ? 'w-6' : 'flex-1'
+    const endSpan = labelAlign === 'end' ? 'w-6' : 'flex-1'
+    return (
+      <div
+        role="separator"
+        aria-orientation="horizontal"
+        data-slot="separator"
+        data-variant={variant}
+        data-label-align={labelAlign}
+        className={cn('flex w-full items-center gap-3', className)}
+      >
+        <span
+          aria-hidden="true"
+          data-slot="separator-rule"
+          className={cn('shrink-0', HORIZONTAL_LABELED_SEGMENT[variant], startSpan)}
+        />
+        <span
+          data-slot="separator-label"
+          className="shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+        >
+          {label}
+        </span>
+        <span
+          aria-hidden="true"
+          data-slot="separator-rule"
+          className={cn('shrink-0', HORIZONTAL_LABELED_SEGMENT[variant], endSpan)}
+        />
+      </div>
+    )
+  }
+
+  // ---- Plain horizontal rule (original bare-line look) -------------
+  return (
+    <div
+      role="separator"
+      aria-orientation="horizontal"
+      data-slot="separator"
+      data-variant={variant}
+      className={cn('w-full', HORIZONTAL_RULE_CLASSES[variant], className)}
+    />
+  )
+}

package/src/primitives/slider.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+/**
+ * Numeric value selector — single value or two-thumb range. Used for price
+ * ranges, quantity selectors, opacity / brightness controls, threshold
+ * configuration. Built on Radix `@radix-ui/react-slider` so we inherit
+ * the slider ARIA contract (`role="slider"`, `aria-valuemin/max/now`,
+ * keyboard arrow / home / end navigation, RTL flip).
+ *
+ * No dedicated Figma node in the DS Open Mercato library at the time
+ * this primitive was authored — `Level Slider` in the file is an emoji
+ * icon, not a track-thumb component. Styling inferred from DS tokens
+ * (primary brand on the selected portion, muted track, contrasting
+ * thumb with focus ring) — see R4 in the v5 spec for the
+ * inferred-design protocol.
+ *
+ * Single thumb:
+ *
+ * ```tsx
+ * const [v, setV] = React.useState([20])
+ * <Slider value={v} onValueChange={setV} min={0} max={100} step={5} />
+ * ```
+ *
+ * Range (two thumbs):
+ *
+ * ```tsx
+ * const [range, setRange] = React.useState([10, 60])
+ * <Slider value={range} onValueChange={setRange} aria-label="Price range" />
+ * ```
+ *
+ * Optional `aria-label` should be provided when the slider's purpose
+ * is not obvious from surrounding context.
+ */
+
+const sliderRootVariants = cva(
+  // Disabled cursor + greyed body via explicit disabled colors on the
+  // range and thumb (NOT a blanket opacity — opacity over indigo would
+  // bleed a faded indigo through the thumb, which the Figma disabled
+  // state explicitly avoids).
+  'relative flex w-full touch-none select-none items-center data-[disabled]:cursor-not-allowed',
+  {
+    variants: {
+      orientation: {
+        horizontal: 'h-5',
+        vertical: 'h-full w-5 flex-col',
+      },
+    },
+    defaultVariants: { orientation: 'horizontal' },
+  },
+)
+
+const sliderTrackVariants = cva(
+  'relative grow overflow-hidden rounded-full bg-muted',
+  {
+    variants: {
+      orientation: {
+        horizontal: 'h-1.5 w-full',
+        vertical: 'w-1.5 h-full',
+      },
+    },
+    defaultVariants: { orientation: 'horizontal' },
+  },
+)
+
+const sliderRangeVariants = cva(
+  // Enabled: indigo brand color (Figma `#6366F1`). Disabled: collapse to
+  // a neutral mid-grey so the range visually merges with the track (the
+  // Figma disabled state shows no indigo bleed at all).
+  'absolute rounded-full bg-accent-indigo data-[disabled]:bg-muted-foreground/25',
+  {
+    variants: {
+      orientation: {
+        horizontal: 'h-full',
+        vertical: 'w-full',
+      },
+    },
+    defaultVariants: { orientation: 'horizontal' },
+  },
+)
+
+const sliderThumbVariants = cva(
+  // Figma `Slider [1.1]` (componentSet 2617:1169):
+  //
+  //   Enabled state — 16×16 white circle with NO outer stroke and a
+  //     centered 6×6 indigo dot. Separation from the track comes from a
+  //     drop shadow, not a border. Outer = `bg-background` + `shadow-sm`,
+  //     inner dot via `::after` so the thumb stays a single DOM node.
+  //
+  //   Disabled state — same 16×16 white circle but now with a thin grey
+  //     ring (the shadow is dropped entirely) and a grey inner dot. The
+  //     border is what makes the thumb still legible against the track
+  //     when shadow + indigo are both gone.
+  'relative block size-4 rounded-full bg-background shadow-sm transition-shadow ' +
+    "after:content-[''] after:absolute after:left-1/2 after:top-1/2 after:size-1.5 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-accent-indigo " +
+    'hover:shadow-md ' +
+    'focus-visible:outline-none focus-visible:shadow-focus ' +
+    'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:border data-[disabled]:border-muted-foreground/30 ' +
+    'data-[disabled]:after:bg-muted-foreground/40',
+)
+
+export type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> &
+  VariantProps<typeof sliderRootVariants>
+
+export const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  SliderProps
+>(({ className, orientation, value, defaultValue, ...props }, ref) => {
+  // Derive the number of thumbs from the value/defaultValue length so we
+  // render the right number of `Thumb` nodes. Radix supports both
+  // single-thumb and range; the dom-level pattern is identical apart
+  // from the count of thumb children.
+  const thumbCount = (() => {
+    const v = (value ?? defaultValue) as number[] | undefined
+    if (Array.isArray(v) && v.length > 0) return v.length
+    return 1
+  })()
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      orientation={orientation ?? 'horizontal'}
+      value={value}
+      defaultValue={defaultValue}
+      data-slot="slider-root"
+      className={cn(sliderRootVariants({ orientation }), className)}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(sliderTrackVariants({ orientation }))}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(sliderRangeVariants({ orientation }))}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: thumbCount }).map((_, index) => (
+        <SliderPrimitive.Thumb
+          key={index}
+          data-slot="slider-thumb"
+          className={cn(sliderThumbVariants())}
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+})
+Slider.displayName = 'Slider'
+
+export {
+  sliderRootVariants,
+  sliderTrackVariants,
+  sliderRangeVariants,
+  sliderThumbVariants,
+}