@vvedantb/ui 0.15.1 → 0.16.0

package/README.md

@@ -1002,6 +1002,22 @@ import { DatePicker, DateTimePicker, MonthPicker } from "@vvedantb/ui";
 - `MonthPicker`: `value` "YYYY-MM" or "", with year navigation and a month grid. `min` and `max` are "YYYY-MM".
 - `Calendar`: the styled `DayPicker` for custom layouts (every `DayPicker` prop). `parseDateValue` and `formatDateValue` convert between "YYYY-MM-DD" and a local `Date`.
 
+## Slider (0.16.0)
+
+shadcn's slider on `@radix-ui/react-slider` (a peer dependency), with package tokens.
+
+```tsx
+import { LabeledSliderRow, Slider } from "@vvedantb/ui";
+
+<Slider value={volume} onValueChange={setVolume} max={100} step={1} aria-label="Volume" />
+<Slider defaultValue={[20, 80]} thumbLabels={["Minimum price", "Maximum price"]} />
+<LabeledSliderRow id="temperature" label="Temperature" value={temp} onValueChange={setTemp} max={2} step={0.1} formatValue={(v) => v.map((n) => n.toFixed(1)).join("–")} minLabel="Precise" maxLabel="Creative" />
+```
+
+- `Slider`: every Radix `Root` prop (`value`, `defaultValue`, `min`, `max`, `step`, `orientation`, `disabled`, `onValueChange`, `onValueCommit`, and so on). It renders one thumb per value, so `[n]` gives one thumb and `[a, b]` a range. The track is `bg-default`, the range `bg-primary`, and the thumb a `size-4` circle on `bg-background` with the `Switch` focus ring. Disabled dims to 50%. A vertical slider needs a height from its parent or `className` (default `min-h-40`). The ref goes to `Root`.
+- Names: `id`, `aria-label`, `aria-labelledby` and `aria-valuetext` go to the first thumb, the focusable `role="slider"` element, not `Root`. `thumbLabels` sets `aria-label` per thumb and wins over `aria-label` on the first. Without a name, Radix labels a two-thumb range "Minimum" and "Maximum". The thumb is a `<span>`, so `<Label htmlFor>` does not name it; pass `aria-labelledby` with the label's `id`.
+- `LabeledSliderRow`: the `LabeledSwitchRow` layout with the slider below. `id`, `label`, `description`, `icon`, `value`, `onValueChange`, `onValueCommit`, `min`, `max`, `step`, `disabled`, `thumbLabels`, `className`. `formatValue` sets the right-aligned value (default: values joined by an en dash). `minLabel` and `maxLabel` add captions under the ends. The label names the first thumb through `aria-labelledby`, unless `thumbLabels` is set.
+
 ## Toaster
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -84,6 +84,7 @@
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.4.7",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.1.7",
     "@radix-ui/react-tabs": "^1.1.13",
@@ -131,6 +132,7 @@
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.4.7",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.1.7",
     "@radix-ui/react-tabs": "^1.1.13",

package/src/index.ts

@@ -25,6 +25,7 @@ export * from "./ui/empty-state";
 export * from "./ui/hover-card";
 export * from "./ui/input";
 export * from "./ui/label";
+export * from "./ui/labeled-slider-row";
 export * from "./ui/labeled-switch-row";
 export * from "./ui/pagination";
 export * from "./ui/popover";
@@ -47,6 +48,7 @@ export * from "./ui/select-field";
 export * from "./ui/separator";
 export * from "./ui/skeleton";
 export * from "./ui/slide-over-panel";
+export * from "./ui/slider";
 export * from "./ui/sonner";
 export * from "./ui/spinner";
 export * from "./ui/switch";

package/src/ui/labeled-slider-row.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { Label } from "./label";
+import { Slider } from "./slider";
+
+interface LabeledSliderRowProps {
+  id: string;
+  label: string;
+  description?: string;
+  value: number[];
+  onValueChange?: (value: number[]) => void;
+  onValueCommit?: (value: number[]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  icon?: ReactNode;
+  /** Formats the right-aligned value display. Default joins the values with an en dash. */
+  formatValue?: (value: number[]) => ReactNode;
+  minLabel?: ReactNode;
+  maxLabel?: ReactNode;
+  thumbLabels?: string[];
+  className?: string;
+}
+
+export function LabeledSliderRow({
+  id,
+  label,
+  description,
+  value,
+  onValueChange,
+  onValueCommit,
+  min,
+  max,
+  step,
+  disabled,
+  icon,
+  formatValue = (v) => v.join("–"),
+  minLabel,
+  maxLabel,
+  thumbLabels,
+  className,
+}: LabeledSliderRowProps) {
+  const labelId = `${id}-label`;
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex min-w-0 items-start gap-2">
+          {icon ? (
+            <span className="mt-0.5 shrink-0 text-muted-foreground">{icon}</span>
+          ) : null}
+          <div className="min-w-0">
+            <Label id={labelId} htmlFor={id} className="text-sm font-medium">
+              {label}
+            </Label>
+            {description ? (
+              <p className="mt-1 text-xs text-muted-foreground text-pretty">{description}</p>
+            ) : null}
+          </div>
+        </div>
+        <output htmlFor={id} className="shrink-0 text-sm tabular-nums text-muted-foreground">
+          {formatValue(value)}
+        </output>
+      </div>
+      {/* The thumb is a span, which `htmlFor` cannot name, so aria-labelledby carries the name unless thumbLabels does. */}
+      <Slider
+        id={id}
+        aria-labelledby={thumbLabels ? undefined : labelId}
+        value={value}
+        onValueChange={onValueChange}
+        onValueCommit={onValueCommit}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        thumbLabels={thumbLabels}
+      />
+      {minLabel != null || maxLabel != null ? (
+        <div className="flex justify-between text-xs text-muted-foreground">
+          <span>{minLabel}</span>
+          <span>{maxLabel}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/ui/slider.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../utils/cn";
+
+type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+  /** Accessible name per thumb, by index. Wins over `aria-label` on the first thumb. */
+  thumbLabels?: string[];
+};
+
+// `id`, `aria-label`, `aria-labelledby` and `aria-valuetext` go to the first
+// Thumb, not Root: the thumb is the focusable role="slider" element, so
+// `<Label htmlFor={id}>` and the accessible name land on it. The ref stays on Root.
+const Slider = React.forwardRef<React.ComponentRef<typeof SliderPrimitive.Root>, SliderProps>(
+  (
+    {
+      className,
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-valuetext": ariaValueText,
+      thumbLabels,
+      ...props
+    },
+    ref,
+  ) => {
+    const count = (props.value ?? props.defaultValue ?? [props.min ?? 0]).length;
+    return (
+      <SliderPrimitive.Root
+        className={cn(
+          "relative flex w-full touch-none select-none items-center data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+          className,
+        )}
+        {...props}
+        ref={ref}
+      >
+        <SliderPrimitive.Track className="relative grow overflow-hidden rounded-full bg-default data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5">
+          <SliderPrimitive.Range className="absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+        </SliderPrimitive.Track>
+        {Array.from({ length: count }, (_, i) => (
+          <SliderPrimitive.Thumb
+            key={i}
+            id={i === 0 ? id : undefined}
+            aria-label={thumbLabels?.[i] ?? (i === 0 ? ariaLabel : undefined)}
+            aria-labelledby={i === 0 ? ariaLabelledBy : undefined}
+            aria-valuetext={i === 0 ? ariaValueText : undefined}
+            className="block size-4 shrink-0 rounded-full border border-border bg-background shadow-sm transition-[box-shadow] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring data-[disabled]:cursor-not-allowed"
+          />
+        ))}
+      </SliderPrimitive.Root>
+    );
+  },
+);
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
+export type { SliderProps };