@vvedantb/ui 0.15.0 → 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.0",
+  "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/clear-input.tsx

@@ -130,25 +130,25 @@ const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
           )}
           {...props}
         />
-        <div
-          ref={mirrorRef}
-          className={cn(
-            "t-clear-mirror border-0 bg-transparent text-foreground shadow-none",
-            fieldClassName,
-          )}
-          aria-hidden="true"
-        />
-        <div
-          ref={placeholderRef}
-          className={cn(
-            "t-clear-placeholder border-0 bg-transparent text-field-placeholder shadow-none",
-            fieldClassName,
-          )}
-          aria-hidden="true"
-        >
-          {placeholder}
+        <div className="t-clear-clip" aria-hidden="true">
+          <div
+            ref={mirrorRef}
+            className={cn(
+              "t-clear-mirror border-0 bg-transparent text-foreground shadow-none",
+              fieldClassName,
+            )}
+          />
+          <div
+            ref={placeholderRef}
+            className={cn(
+              "t-clear-placeholder border-0 bg-transparent text-field-placeholder shadow-none",
+              fieldClassName,
+            )}
+          >
+            {placeholder}
+          </div>
+          <div ref={glowRef} className="t-clear-glow" />
         </div>
-        <div ref={glowRef} className="t-clear-glow" aria-hidden="true" />
         {value.length > 0 && !clearing ? (
           <button
             type="button"

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 };

package/tokens/README.md

@@ -15,7 +15,7 @@ Design tokens and shared Tailwind v4 CSS for the vvedantb web apps. The CSS and
 | `@vvedantb/ui/tokens/css/tabs-pills.css` | `src/css/tabs-pills.css` | `--tabs-*` colour variables, `.t-tabs--segmented`, `.t-tabs--pills` and pill hover / active fills. |
 | `@vvedantb/ui/tokens/css/utilities.css` | `src/css/utilities.css` | `@utility hit-target` and `@utility reveal-on-hover`. `rounded-surface` moved to `tokens.css` in 0.7.1. |
 | `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). Imported by `tokens.css` from 0.15.0. |
-| `@vvedantb/ui/tokens/css/clear-input.css` | `src/css/clear-input.css` | `ClearInput` layers (`.t-clear*`) and the `--clear-*` / `--glow-*` timings. Imported by `tokens.css`. |
+| `@vvedantb/ui/tokens/css/clear-input.css` | `src/css/clear-input.css` | `ClearInput` layers (`.t-clear*`) and the `--clear-*` / `--glow-*` timings. Imported by `tokens.css`. From 0.15.1 the layers clip in `.t-clear-clip`, so `.t-clear` keeps the focus ring, and the placeholder layer only shows during `.is-clearing`. |
 | `@vvedantb/ui/tokens/css/motion.css` | `src/css/motion.css` | `.ui-page-enter`, `.ui-enter`, `.ui-enter-up`, `.ui-stagger`, their keyframes and reduced-motion rules, and the `html[data-page-motion="off"]` overrides for `PageMotionProvider`. Imported by `tokens.css`. |
 | `@vvedantb/ui/tokens/css/animations.css` | `src/css/animations.css` | `animate-aurora`, `animate-fade-in-up`, `animate-indeterminate` as `@theme` (CSS-first apps). |
 | `@vvedantb/ui/tokens/css/compat-shadcn-rgb.css`, `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | `src/css/compat-shadcn-rgb.css` | Replaces `tokens.css` for apps with shadcn-style `R G B` channel variables. Defines only the UI-only `--color-*` names as `rgb(var(--x) / alpha)` references, `--radius-field`, `--scrollbar`, `--field-radius`, the same three radius utilities as `tokens.css` and `.glass-panel-strong` (solid `--popover` from 0.15.0). Import it **or** `tokens.css`, never both. |

package/tokens/src/css/clear-input.css

@@ -1,6 +1,6 @@
 /*
  * @vvedantb/ui/tokens/css/clear-input.css: layers for @vvedantb/ui
- * ClearInput (`.t-clear`, mirror, placeholder and glow), the transitions.dev
+ * ClearInput (`.t-clear`, clip, mirror, placeholder and glow), the transitions.dev
  * input clear with dissolve. tokens.css imports it.
  *
  * clearInputDissolve reads the variables below from `html`. Set any of them
@@ -27,39 +27,50 @@
 }
 
 @layer components {
+  /* No overflow clip on .t-clear: it would cut the input's focus ring.
+     .t-clear-clip clips the layers to the field instead. It never moves, so
+     the mirror and placeholder can fly in and out under it. Its radius
+     follows .t-clear; put a rounded-* class on wrapperClassName to match an
+     input with another radius. */
   .t-clear {
     position: relative;
-    overflow: hidden;
+    border-radius: var(--radius-field, 0);
   }
+  .t-clear-clip,
   .t-clear-mirror,
-  .t-clear-placeholder {
+  .t-clear-placeholder,
+  .t-clear-glow {
     position: absolute;
     inset: 0;
-    display: flex;
-    align-items: center;
     pointer-events: none;
-    white-space: nowrap;
     overflow: hidden;
-    z-index: 2;
   }
-  .t-clear-mirror {
+  .t-clear-clip {
+    border-radius: inherit;
+  }
+  .t-clear-mirror,
+  .t-clear-placeholder {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
     opacity: 0;
+    z-index: 2;
   }
+  /* The input's own placeholder shows at rest. The layer only shows while
+     clearInputDissolve drops it in, and the native one hides meanwhile. */
   .t-clear.has-value .t-clear-mirror,
-  .t-clear.is-clearing .t-clear-mirror {
+  .t-clear.is-clearing .t-clear-mirror,
+  .t-clear.is-clearing .t-clear-placeholder {
     opacity: 1;
   }
+  .t-clear.is-clearing > input::placeholder {
+    opacity: 0;
+  }
   .t-clear.has-value > input,
   .t-clear.is-clearing > input {
     -webkit-text-fill-color: transparent;
   }
-  .t-clear.has-value .t-clear-placeholder {
-    opacity: 0;
-  }
   .t-clear-glow {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
     opacity: 0;
     z-index: 3;
     mix-blend-mode: multiply;