@kennycorrea/ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+## 0.5.0 — 2026-10-06
+
+### Added
+- **`Slider` `fillFrom`**: fills from a fixed value to the thumb, in either direction, instead of
+  from `min`. Same units as `value`, clamped to [min, max]; nothing is filled when the thumb sits
+  on it. The fill's ends line up with the thumb's centre at every value, using Radix's own
+  in-bounds offset. Built on `@radix-ui/react-slider` and styled from Themes' public tokens
+  (`.ui-slider*` in `tokens.css`), because Themes' slider gives no way to place its range —
+  consumers overriding `.rt-SliderRange` can drop that CSS.
+  Single horizontal left-to-right thumb only: with two thumbs, `orientation="vertical"`,
+  `inverted` or `dir="rtl"` it is ignored with a development warning. Margin props are not
+  supported on this path; wrap it in a `Box`.
+- **`Slider` `marks`**: `{ value, label }[]` drawn as an `aria-hidden` scale above the track,
+  each centred on its value, the first and last growing inwards so neither overflows.
+- Unit tests (Vitest + Testing Library); `npm test` now runs them after lint and types.
+
+### Unchanged
+- Without `fillFrom`, `Slider` is still the Radix Themes slider, rendered exactly as in 0.4.0.
+
+### Requires
+- `tokens.css` imported, as it already must be for toasts — the `fillFrom` path is unstyled
+  without it.
+
+## 0.4.0
+- `Slider` atom over Radix Themes' slider; `label` required.

package/README.md

@@ -204,8 +204,8 @@ blaming the workflow:
   because there is no one there to type a one-time password. That failure reads like a bad
   credential and is not one.
 
-⚠ **`npm test` has to keep existing.** It is lint plus a typecheck rather than unit tests — there
-are no unit tests here — and it is load-bearing for a reason that has nothing to do with quality:
+⚠ **`npm test` has to keep existing.** It is lint, a typecheck and (since 0.5.0) the Vitest suite — and
+it is load-bearing for a reason that has nothing to do with quality:
 without a `test` script the `build` job fails on `Missing script: "test"`, `publish-npm` never
 runs because it needs `build`, and **the release publishes nothing while looking like it worked.**
 That was the state when the workflow was first added.
@@ -270,3 +270,20 @@ becomes the `aria-label`, because a slider has no visible text of its own.
 ```
 
 Values are arrays, as in Radix: one entry per thumb.
+
+## Slider fill origin and marks — 0.5.0
+
+```tsx
+const marks = [0, 6, 11, 16, 22, 29].map((value) => ({ value, label: String(value) }));
+<Slider label="Budget cycle" min={0} max={29} value={day} onValueChange={setDay}
+  fillFrom={16} marks={marks} />
+```
+
+`fillFrom` fills from that value to the thumb, either way. Themes' slider cannot place its
+range, so with `fillFrom` the atom is built on `@radix-ui/react-slider` and styled by
+`.ui-slider*` in `tokens.css` from Themes' public tokens — no `.rt-*` class is touched.
+Without it, nothing changed. Limits and details: [CHANGELOG.md](CHANGELOG.md); a full example
+is in `examples/BudgetCycleSlider.tsx`.
+
+⚠ `--ui-slider-thumb-size` mirrors Themes' size-2 thumb (`--space-2 + --space-1`). The fill
+and the marks are placed from it, so if Themes ever resizes its thumb, change it there.

package/dist/atoms/Slider/Slider.d.ts

@@ -1,10 +1,24 @@
 import { Slider as ThemedSlider } from '@radix-ui/themes';
 import { type ComponentPropsWithoutRef } from 'react';
-export interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof ThemedSlider>, 'size' | 'aria-label'> {
+type ThemedProps = ComponentPropsWithoutRef<typeof ThemedSlider>;
+export interface SliderMark {
+    value: number;
+    label: string;
+}
+export interface SliderProps extends Omit<ThemedProps, 'size' | 'aria-label'> {
     /**
      * Required: a slider has no visible text of its own, so without this a screen reader
      * announces a bare number with nothing to say what it measures.
      */
     label: string;
+    /**
+     * Fill from this value to the thumb instead of from `min`, in either direction — for a scale
+     * with a meaningful middle. Same units as `value`, clamped to [min, max]. Only for one
+     * horizontal left-to-right thumb; anything else ignores it and warns in development.
+     */
+    fillFrom?: number;
+    /** A scale drawn above the track. Decorative: the slider already announces its value. */
+    marks?: SliderMark[];
 }
 export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/atoms/Slider/Slider.js

@@ -1,7 +1,74 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from '@radix-ui/react-slider';
 import { Slider as ThemedSlider } from '@radix-ui/themes';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import { cn } from '../../utils/cn.js';
-export const Slider = forwardRef(function Slider({ label, className, ...props }, ref) {
-    return (_jsx(ThemedSlider, { ref: ref, size: "2", "aria-label": label, className: cn(className), ...props }));
+import { fillEdges, fillStyle, percentOf, thumbCentre } from './geometry.js';
+const MARGIN_KEYS = ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml'];
+const isDev = globalThis.process?.env?.NODE_ENV !==
+    'production';
+/** Why `fillFrom` cannot be honoured, or null when it can. */
+function fillFromUnsupported(props, thumbs) {
+    if (thumbs !== 1)
+        return `it needs exactly one thumb, and this slider has ${thumbs}`;
+    if (props.orientation === 'vertical')
+        return 'vertical sliders are not supported';
+    if (props.inverted)
+        return 'inverted sliders are not supported';
+    if (props.dir === 'rtl')
+        return 'right-to-left sliders are not supported';
+    return null;
+}
+export const Slider = forwardRef(function Slider(props, ref) {
+    const { label, fillFrom, marks, className, onValueChange, ...rest } = props;
+    const min = rest.min ?? 0;
+    const max = rest.max ?? 100;
+    // Mirrored so the fill can follow an uncontrolled slider too.
+    const [inner, setInner] = useState(rest.defaultValue ?? [min]);
+    const values = rest.value ?? inner;
+    const handleChange = (next) => {
+        setInner(next);
+        onValueChange?.(next);
+    };
+    const unsupported = fillFrom === undefined ? null : fillFromUnsupported(props, values.length);
+    if (unsupported && isDev)
+        console.warn(`Slider: fillFrom is ignored — ${unsupported}.`);
+    const slider = fillFrom !== undefined && !unsupported ? (_jsx(FillFromSlider, { ref: ref, ...rest, label: label, className: className, values: values, fillFrom: fillFrom, min: min, max: max, onValueChange: handleChange })) : (_jsx(ThemedSlider, { ref: ref, size: "2", "aria-label": label, className: cn(className), ...rest, onValueChange: handleChange }));
+    if (!marks?.length)
+        return slider;
+    return (_jsxs("div", { className: "ui-slider-field", children: [_jsx(SliderMarks, { marks: marks, min: min, max: max }), slider] }));
 });
+/**
+ * Radix Themes draws its range itself and offers no way to place it, so this path is built on the
+ * primitives and styled in `tokens.css` (`.ui-slider*`) from Themes' public tokens — never by
+ * reaching into Themes' own class names.
+ */
+const FillFromSlider = forwardRef(function FillFromSlider({ label, values, fillFrom, min, max, className, color, radius, variant, highContrast, defaultValue: _uncontrolledHandledAbove, tabIndex, ...rest }, ref) {
+    const primitiveProps = {};
+    let droppedMargin = false;
+    for (const [key, val] of Object.entries(rest)) {
+        if (MARGIN_KEYS.includes(key))
+            droppedMargin = true;
+        else
+            primitiveProps[key] = val;
+    }
+    if (droppedMargin && isDev) {
+        console.warn('Slider: margin props are not supported with fillFrom — wrap it in a Box.');
+    }
+    const edges = fillEdges(values[0] ?? min, fillFrom, min, max);
+    return (_jsxs(SliderPrimitive.Root, { ref: ref, ...primitiveProps, value: values, min: min, max: max, "aria-label": label, "data-accent-color": color, "data-radius": radius, "data-variant": variant ?? 'surface', className: cn('ui-slider', highContrast && 'ui-slider-high-contrast', className), children: [_jsx(SliderPrimitive.Track, { className: "ui-slider-track", children: _jsx("span", { className: "ui-slider-fill", "data-fill": "", "data-empty": edges.from === edges.to ? '' : undefined, "data-disabled": rest.disabled ? '' : undefined, style: fillStyle(edges) }) }), _jsx(SliderPrimitive.Thumb, { className: "ui-slider-thumb", "aria-label": label, ...(tabIndex !== undefined ? { tabIndex } : undefined) })] }));
+});
+function SliderMarks({ marks, min, max }) {
+    const sorted = [...marks].sort((a, b) => a.value - b.value);
+    const last = sorted.length - 1;
+    return (_jsx("div", { className: "ui-slider-marks", "aria-hidden": true, children: sorted.map((mark, i) => {
+            const centre = thumbCentre(percentOf(mark.value, min, max));
+            // Centred over its value, except the two ends, which grow inwards so neither overflows.
+            let style = { left: centre, transform: 'translateX(-50%)' };
+            if (last > 0 && i === 0)
+                style = { left: centre };
+            if (last > 0 && i === last)
+                style = { right: `calc(100% - ${centre})` };
+            return (_jsx("span", { "data-mark": mark.value, style: style, children: mark.label }, `${mark.value}-${mark.label}`));
+        }) }));
+}

package/dist/atoms/Slider/geometry.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The same maths Radix's slider uses to place a thumb, so anything we draw on the track lines up
+ * with the thumb's centre. Radix keeps the thumb inside the track by nudging it inwards by up to
+ * half its width at the ends (`getThumbInBoundsOffset`): `+half` at 0%, nothing at 50%, `-half`
+ * at 100%. Written as CSS against `--ui-slider-thumb-size` so no element has to be measured.
+ */
+/** Radix's `convertValueToPercentage`: 0–100, clamped. */
+export declare function percentOf(value: number, min: number, max: number): number;
+/** Distance from the track's left edge to the centre of a thumb sitting at `percent`. */
+export declare function thumbCentre(percent: number): string;
+export interface FillEdges {
+    /** Percent of the lower end, clamped to the track. */
+    from: number;
+    /** Percent of the higher end. Equal to `from` when nothing is filled. */
+    to: number;
+}
+/** The stretch between `fillFrom` and the thumb, whichever is lower to whichever is higher. */
+export declare function fillEdges(value: number, fillFrom: number, min: number, max: number): FillEdges;
+/** Inline position of the fill: left edge at the lower centre, right edge at the higher one. */
+export declare function fillStyle({ from, to }: FillEdges): {
+    left: string;
+    right: string;
+};

package/dist/atoms/Slider/geometry.js

@@ -0,0 +1,27 @@
+/**
+ * The same maths Radix's slider uses to place a thumb, so anything we draw on the track lines up
+ * with the thumb's centre. Radix keeps the thumb inside the track by nudging it inwards by up to
+ * half its width at the ends (`getThumbInBoundsOffset`): `+half` at 0%, nothing at 50%, `-half`
+ * at 100%. Written as CSS against `--ui-slider-thumb-size` so no element has to be measured.
+ */
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+/** Radix's `convertValueToPercentage`: 0–100, clamped. */
+export function percentOf(value, min, max) {
+    if (max === min)
+        return 0;
+    return clamp(((value - min) / (max - min)) * 100, 0, 100);
+}
+/** Distance from the track's left edge to the centre of a thumb sitting at `percent`. */
+export function thumbCentre(percent) {
+    return `calc(${percent}% + var(--ui-slider-thumb-size) * ${0.5 - percent / 100})`;
+}
+/** The stretch between `fillFrom` and the thumb, whichever is lower to whichever is higher. */
+export function fillEdges(value, fillFrom, min, max) {
+    const a = percentOf(value, min, max);
+    const b = percentOf(fillFrom, min, max);
+    return { from: Math.min(a, b), to: Math.max(a, b) };
+}
+/** Inline position of the fill: left edge at the lower centre, right edge at the higher one. */
+export function fillStyle({ from, to }) {
+    return { left: thumbCentre(from), right: `calc(100% - ${thumbCentre(to)})` };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
   "private": false,
   "type": "module",
@@ -8,7 +8,8 @@
   "files": [
     "dist",
     "tokens.css",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,7 +26,8 @@
     "lint": "biome check .",
     "format": "biome check --write .",
     "prepublishOnly": "npm run build",
-    "test": "biome check . && tsc -p tsconfig.json --noEmit"
+    "test": "biome check . && tsc -p tsconfig.test.json && vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "@radix-ui/themes": "^3.3.0",
@@ -33,6 +35,7 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@radix-ui/react-slider": "^1.5.0",
     "@radix-ui/react-toast": "^1.2.23",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.7.0"
@@ -40,11 +43,15 @@
   "devDependencies": {
     "@biomejs/biome": "^2.5.13",
     "@radix-ui/themes": "^3.3.0",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
+    "jsdom": "^30.1.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "typescript": "~6.0.2"
+    "typescript": "~6.0.2",
+    "vitest": "^5.0.3"
   },
   "publishConfig": {
     "access": "public"

package/tokens.css

@@ -261,3 +261,116 @@
 @media (prefers-reduced-motion: reduce) {
   .ui-toast[data-state] { animation-duration: 1ms; }
 }
+
+/**
+ * Slider with `fillFrom` — built on @radix-ui/react-slider because Radix Themes gives no way to
+ * place its range. Mirrors Themes' size-2 slider using only its public tokens, so a Themes
+ * release cannot break it by renaming a class. Keep `--ui-slider-thumb-size` in step with
+ * Themes' `--slider-thumb-size`: the fill and the marks are positioned from it.
+ */
+.ui-slider-field,
+.ui-slider {
+  --ui-slider-track-size: var(--space-2);
+  --ui-slider-thumb-size: calc(var(--ui-slider-track-size) + var(--space-1));
+}
+.ui-slider-field { display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; width: 100%; }
+.ui-slider-marks {
+  position: relative;
+  height: var(--line-height-1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  color: var(--gray-11);
+}
+.ui-slider-marks > span { position: absolute; top: 0; white-space: nowrap; }
+
+.ui-slider {
+  --ui-slider-thumb-shadow: 0 0 0 1px var(--black-a4);
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  width: 100%;
+  height: var(--ui-slider-track-size);
+  border-radius: max(
+    calc(var(--radius-factor) * var(--ui-slider-track-size) / 3),
+    calc(var(--radius-factor) * var(--radius-thumb))
+  );
+  user-select: none;
+  touch-action: none;
+}
+.ui-slider-track {
+  position: relative;
+  overflow: hidden;
+  flex-grow: 1;
+  height: var(--ui-slider-track-size);
+  border-radius: inherit;
+  background-color: var(--gray-a3);
+  box-shadow: inset 0 0 0 1px var(--gray-a5);
+}
+.ui-slider-fill {
+  position: absolute;
+  height: 100%;
+  border-radius: inherit;
+  background-color: var(--accent-track);
+  box-shadow: inset 0 0 0 1px var(--gray-a5);
+}
+.ui-slider-fill[data-empty] { visibility: hidden; }
+.ui-slider-high-contrast .ui-slider-fill { background-color: var(--accent-12); }
+
+.ui-slider[data-variant='soft'] .ui-slider-track {
+  background-color: var(--gray-a4);
+  background-image: linear-gradient(var(--white-a1), var(--white-a1));
+  box-shadow: none;
+}
+.ui-slider[data-variant='soft'] .ui-slider-fill {
+  background-color: var(--accent-6);
+  background-image: linear-gradient(var(--accent-a5), var(--accent-a5));
+  box-shadow: none;
+}
+.ui-slider[data-variant='classic'] .ui-slider-track { box-shadow: var(--shadow-1); }
+.ui-slider[data-variant='classic'] .ui-slider-fill {
+  box-shadow: inset 0 0 0 1px var(--accent-a4), inset 0 1.5px 2px 0 var(--black-a2);
+}
+.ui-slider[data-variant='classic'] {
+  --ui-slider-thumb-shadow: 0 0 0 1px var(--black-a3), 0 1px 3px var(--black-a1),
+    0 2px 4px -1px var(--black-a1);
+}
+
+.ui-slider-thumb {
+  display: block;
+  width: var(--ui-slider-thumb-size);
+  height: var(--ui-slider-thumb-size);
+  outline: 0;
+}
+/* A larger hit area, and a visible thumb that slightly overshoots the track, as in Themes. */
+.ui-slider-thumb::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  width: calc(var(--ui-slider-thumb-size) * 3);
+  height: calc(var(--ui-slider-thumb-size) * 3);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ui-slider-thumb::after {
+  content: '';
+  position: absolute;
+  inset: calc(-0.25 * var(--ui-slider-track-size));
+  background-color: white;
+  border-radius: max(var(--radius-1), var(--radius-thumb));
+  box-shadow: var(--ui-slider-thumb-shadow);
+  cursor: var(--cursor-slider-thumb);
+}
+.ui-slider-thumb:focus-visible::after {
+  box-shadow: var(--ui-slider-thumb-shadow), 0 0 0 3px var(--accent-3), 0 0 0 5px var(--focus-8);
+}
+.ui-slider-thumb:active { cursor: var(--cursor-slider-thumb-active); }
+
+.ui-slider[data-disabled] { cursor: var(--cursor-disabled); mix-blend-mode: multiply; }
+:is(.dark, .dark-theme) .ui-slider[data-disabled] { mix-blend-mode: screen; }
+.ui-slider-track[data-disabled] { box-shadow: inset 0 0 0 1px var(--gray-a4); }
+.ui-slider-fill[data-disabled] { background: none; box-shadow: none; }
+.ui-slider-thumb[data-disabled],
+.ui-slider-thumb[data-disabled]::after { cursor: var(--cursor-disabled); }
+.ui-slider-thumb[data-disabled]::after { background-color: var(--gray-1); box-shadow: 0 0 0 1px var(--gray-6); }