@haruhimemoe/ui 0.3.0 → 0.5.0

package/dist/components/filters/Chip.js

@@ -2,28 +2,37 @@
  * @file src/components/filters/Chip.tsx
  * @desc Toggle pill (osu! beatmap listing style): a `<button>` with `aria-pressed`, pink when on.
  *       Same look as the mod chips on packs.haruhime.moe. In forced-colors mode a pressed chip
- *       takes the system highlight colors, so on and off still look different.
+ *       takes the system highlight colors, so on and off still look different. With
+ *       `unavailableReason` it is blocked but stays focusable (aria-disabled), and screen readers
+ *       hear the reason as its description.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { cx } from "../../utils/cx.js";
-const BASE = "rounded-full px-2.5 py-0.5 font-bold text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40";
-const PRESSED = "bg-h1 text-b6 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]";
-const UNPRESSED = "bg-b3 text-c2 not-disabled:hover:bg-b2";
+import { CHIP, CHIP_OFF, CHIP_ON, CHIP_UNAVAILABLE } from "./chipStyles.js";
 /**
  * @function Chip
  * @param props {ChipProps} native button props, plus `pressed` and an optional `onPressedChange`.
  *        A caller's `onClick` runs first; calling `event.preventDefault()` in it skips the toggle.
  *        Callbacks can only be passed from client code.
- * @returns {JSX.Element} a `<button type="button" aria-pressed>` styled as a pill
+ * @returns {JSX.Element} a `<button type="button" aria-pressed>` styled as a pill, and the
+ *          screen-reader-only reason beside it when it is unavailable
  */
-export function Chip({ pressed, onPressedChange, onClick, className, type = "button", ...props }) {
-    return (_jsx("button", { type: type, "aria-pressed": pressed, onClick: (event) => {
+export function Chip({ pressed, onPressedChange, unavailableReason, onClick, className, type = "button", title, "aria-describedby": describedBy, ...props }) {
+    const reasonId = useId();
+    const blocked = unavailableReason !== undefined && unavailableReason !== null;
+    const reasonTitle = blocked && typeof unavailableReason === "string" ? unavailableReason : undefined;
+    const chip = (_jsx("button", { type: type, "aria-pressed": pressed, "aria-disabled": blocked || undefined, "aria-describedby": blocked ? [reasonId, describedBy].filter(Boolean).join(" ") : describedBy, title: title ?? reasonTitle, onClick: (event) => {
             onClick?.(event);
-            if (!event.defaultPrevented)
+            if (!event.defaultPrevented && !blocked)
                 onPressedChange?.(!pressed);
-        }, className: cx(BASE, pressed ? PRESSED : UNPRESSED, className), ...props }));
+        }, className: cx(CHIP, "disabled:cursor-not-allowed disabled:opacity-40", pressed ? CHIP_ON : CHIP_OFF, blocked ? CHIP_UNAVAILABLE : !pressed && "not-disabled:hover:bg-b2", className), ...props }));
+    if (!blocked)
+        return chip;
+    // The reason sits beside the button, not inside it, where it would join the button's name.
+    return (_jsxs(_Fragment, { children: [chip, _jsx("span", { id: reasonId, className: "sr-only", children: unavailableReason })] }));
 }

package/dist/components/filters/ChipGroup.d.ts

@@ -4,24 +4,23 @@
  *       in the tab order; the group reports the picked values in the options' order.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
-import { type ComponentProps, type ReactNode } from "react";
+import type { ReactNode } from "react";
+import { type GroupFrameProps } from "./GroupFrame.js";
 /** One chip: the value it stands for, what it shows, and whether it can be toggled. */
 export type ChipOption = {
     value: string;
     label: ReactNode;
     disabled?: boolean | undefined;
+    /** Why the chip can't be picked right now; it stays focusable. See Chip. */
+    unavailableReason?: ReactNode;
 };
-/** Every native `<fieldset>` prop except `onChange` and `children`, plus label, options, value. */
-export type ChipGroupProps = Omit<ComponentProps<"fieldset">, "onChange" | "children"> & {
-    /** Names the group (`role="group"` + `aria-labelledby`). */
-    label: ReactNode;
-    /**
-     * Leave the name to a surrounding FilterRow: no label shows, and the fieldset is not a group
-     * of its own (role none), so screen readers hear the row's name once.
-     */
-    hideLabel?: boolean | undefined;
+/**
+ * Every native `<fieldset>` prop except `onChange` and `children`, plus `label` (names the group)
+ * and `hideLabel` (leave the name to a surrounding FilterRow), the options and the picked values.
+ */
+export type ChipGroupProps = Omit<GroupFrameProps, "onChange" | "children"> & {
     options: readonly ChipOption[];
     /** The picked values. */
     value: readonly string[];
@@ -36,4 +35,4 @@ export type ChipGroupProps = Omit<ComponentProps<"fieldset">, "onChange" | "chil
  * @returns {JSX.Element} a `<fieldset>` (role group) labeled by its label, one Chip per option.
  *          With `hideLabel`, the fieldset has role none and no label.
  */
-export declare function ChipGroup({ label, hideLabel, options, value, onChange, className, ...props }: ChipGroupProps): import("react").JSX.Element;
+export declare function ChipGroup({ options, value, onChange, ...props }: ChipGroupProps): import("react").JSX.Element;

package/dist/components/filters/ChipGroup.js

@@ -4,13 +4,12 @@
  *       in the tab order; the group reports the picked values in the options' order.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { cx } from "../../utils/cx.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Chip } from "./Chip.js";
+import { GroupFrame } from "./GroupFrame.js";
 /**
  * @function toggleValue
  * @param value {readonly string[]} the picked values
@@ -35,10 +34,6 @@ const toggleValue = (value, option, on, options) => {
  * @returns {JSX.Element} a `<fieldset>` (role group) labeled by its label, one Chip per option.
  *          With `hideLabel`, the fieldset has role none and no label.
  */
-export function ChipGroup({ label, hideLabel = false, options, value, onChange, className, ...props }) {
-    const labelId = useId();
-    return (_jsxs("fieldset", { 
-        // Inside a FilterRow (hideLabel), the row's fieldset is the group. A second group with the
-        // same name would be read twice. The fieldset stays, so `disabled` still reaches every chip.
-        role: hideLabel ? "none" : undefined, "aria-labelledby": hideLabel ? undefined : labelId, className: cx("flex flex-col gap-2", className), ...props, children: [hideLabel ? null : (_jsx("span", { id: labelId, className: "font-bold text-c3 text-sm", children: label })), _jsx("div", { className: "flex flex-wrap items-center gap-1", children: options.map((option) => (_jsx(Chip, { pressed: value.includes(option.value), disabled: option.disabled, onPressedChange: (on) => onChange(toggleValue(value, option.value, on, options)), children: option.label }, option.value))) })] }));
+export function ChipGroup({ options, value, onChange, ...props }) {
+    return (_jsx(GroupFrame, { ...props, children: _jsx("div", { className: "flex flex-wrap items-center gap-1", children: options.map((option) => (_jsx(Chip, { pressed: value.includes(option.value), disabled: option.disabled, unavailableReason: option.unavailableReason, onPressedChange: (on) => onChange(toggleValue(value, option.value, on, options)), children: option.label }, option.value))) }) }));
 }

package/dist/components/filters/ChoiceChips.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @file src/components/filters/ChoiceChips.tsx
+ * @desc One choice from a few, as a real radio group drawn as chips (the pools status and type
+ *       filters): native radio inputs under one name, so Tab reaches the checked chip, the arrow
+ *       keys move and pick, and screen readers hear "radio, 1 of 3, checked". Same look as Chip,
+ *       with the focus ring on the chip, not the hidden input. A labelled fieldset like ChipGroup.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ReactNode } from "react";
+import { type GroupFrameProps } from "./GroupFrame.js";
+/** One choice: the value it stands for, what it shows, and whether it can be picked. */
+export type ChoiceChipOption<T extends string = string> = {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean | undefined;
+};
+/**
+ * Every native `<fieldset>` prop except `onChange`, `children` and `defaultValue`, plus `label`
+ * and `hideLabel` (as on ChipGroup), the options, the picked value and the radios' name.
+ */
+export type ChoiceChipsProps<T extends string = string> = Omit<GroupFrameProps, "onChange" | "children" | "defaultValue"> & {
+    options: readonly ChoiceChipOption<T>[];
+    /** The picked value. */
+    value: T;
+    /** Called with the value of the chip that was picked. */
+    onChange: (value: T) => void;
+    /** The radios' name, for a form (default: a generated one). */
+    name?: string | undefined;
+};
+/**
+ * @function ChoiceChips
+ * @param props {ChoiceChipsProps} label, options, the picked value and a change handler, plus
+ *        native fieldset props (`disabled` turns off every chip). Render it from client code.
+ * @returns {JSX.Element} a `<fieldset>` named by its label, with one radio chip per option
+ */
+export declare function ChoiceChips<T extends string = string>({ options, value, onChange, name, ...props }: ChoiceChipsProps<T>): import("react").JSX.Element;

package/dist/components/filters/ChoiceChips.js

@@ -0,0 +1,31 @@
+/**
+ * @file src/components/filters/ChoiceChips.tsx
+ * @desc One choice from a few, as a real radio group drawn as chips (the pools status and type
+ *       filters): native radio inputs under one name, so Tab reaches the checked chip, the arrow
+ *       keys move and pick, and screen readers hear "radio, 1 of 3, checked". Same look as Chip,
+ *       with the focus ring on the chip, not the hidden input. A labelled fieldset like ChipGroup.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../../utils/cx.js";
+import { CHIP, CHIP_OFF, CHIP_ON, CHIP_UNAVAILABLE } from "./chipStyles.js";
+import { GroupFrame } from "./GroupFrame.js";
+// A label around a hidden radio: it shows the input's focus and disabled state itself.
+const LABEL = "cursor-pointer has-focus-visible:outline-2 has-focus-visible:outline-h1 has-focus-visible:outline-offset-2 has-disabled:cursor-not-allowed has-disabled:opacity-40";
+/**
+ * @function ChoiceChips
+ * @param props {ChoiceChipsProps} label, options, the picked value and a change handler, plus
+ *        native fieldset props (`disabled` turns off every chip). Render it from client code.
+ * @returns {JSX.Element} a `<fieldset>` named by its label, with one radio chip per option
+ */
+export function ChoiceChips({ options, value, onChange, name, ...props }) {
+    const generated = useId();
+    return (_jsx(GroupFrame, { ...props, children: _jsx("div", { className: "flex flex-wrap items-center gap-1", children: options.map((option) => {
+                const on = option.value === value;
+                return (_jsxs("label", { className: cx(CHIP, LABEL, on ? CHIP_ON : CHIP_OFF, !on && !option.disabled && "hover:bg-b2", option.disabled && CHIP_UNAVAILABLE), children: [_jsx("input", { type: "radio", name: name ?? generated, value: option.value, checked: on, disabled: option.disabled, onChange: () => onChange(option.value), className: "sr-only" }), option.label] }, option.value));
+            }) }) }));
+}

package/dist/components/filters/FilterPanel.d.ts

@@ -1,19 +1,20 @@
 /**
  * @file src/components/filters/FilterPanel.tsx
  * @desc Filter panel (osu! beatmap listing style): a titled card of FilterRows with a live result
- *       count and a "Clear filters" link. On phones the rows fold away behind a disclosure button;
- *       from `sm` up they are always shown.
+ *       count and a "Clear filters" button. On phones the rows fold away behind a disclosure
+ *       button; from `sm` up they are always shown.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 import { type ComponentProps, type ReactNode } from "react";
+import { type HeadingLevel } from "../basics/cardStyles.js";
 /** Every native `<section>` prop except `title`, plus the panel's title, count and clear action. */
 export type FilterPanelProps = Omit<ComponentProps<"section">, "title"> & {
     /** The panel heading; it also names the panel and its phone disclosure button. */
     title: ReactNode;
     /** Heading level for the title (default 2). */
-    headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+    headingLevel?: HeadingLevel | undefined;
     /** Shown in an `<output aria-live="polite">`, so screen readers hear each new count. */
     resultCount?: ReactNode;
     /** True while any filter is set; shows the clear button. */

package/dist/components/filters/FilterPanel.js

@@ -1,16 +1,17 @@
 /**
  * @file src/components/filters/FilterPanel.tsx
  * @desc Filter panel (osu! beatmap listing style): a titled card of FilterRows with a live result
- *       count and a "Clear filters" link. On phones the rows fold away behind a disclosure button;
- *       from `sm` up they are always shown.
+ *       count and a "Clear filters" button. On phones the rows fold away behind a disclosure
+ *       button; from `sm` up they are always shown.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
 import { cx } from "../../utils/cx.js";
+import { CARD, CARD_HEADING } from "../basics/cardStyles.js";
 /**
  * @function FilterPanel
  * @param props {FilterPanelProps} title, FilterRows as children, an optional result count and
@@ -38,7 +39,7 @@ export function FilterPanel({ title, headingLevel = 2, resultCount, active = fal
         cleared.current = false;
     }, [showClear]);
     const Heading = `h${headingLevel}`;
-    return (_jsxs("section", { "aria-labelledby": titleId, className: cx("flex flex-col gap-4 rounded-[10px] bg-b4 p-5 text-c2", className), ...props, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Heading, { id: titleId, ref: headingRef, tabIndex: -1, className: "font-bold text-c1 text-lg", children: title }), _jsx("button", { type: "button", "aria-labelledby": titleId, "aria-expanded": open, "aria-controls": bodyId, onClick: () => setOpen(!open), className: "inline-flex size-8 items-center justify-center rounded-full text-c2 transition-colors hover:bg-b3 hover:text-c1 sm:hidden", children: _jsx("span", { "aria-hidden": "true", children: open ? "▴" : "▾" }) })] }), _jsx("output", { "aria-live": "polite", className: "text-c3 text-sm", children: resultCount }), showClear ? (_jsx("button", { type: "button", onClick: () => {
+    return (_jsxs("section", { "aria-labelledby": titleId, className: cx("flex flex-col gap-4", CARD, className), ...props, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Heading, { id: titleId, ref: headingRef, tabIndex: -1, className: CARD_HEADING, children: title }), _jsx("button", { type: "button", "aria-labelledby": titleId, "aria-expanded": open, "aria-controls": bodyId, onClick: () => setOpen(!open), className: "inline-flex size-8 items-center justify-center rounded-full text-c2 transition-colors hover:bg-b3 hover:text-c1 sm:hidden", children: _jsx("span", { "aria-hidden": "true", children: open ? "▴" : "▾" }) })] }), _jsx("output", { "aria-live": "polite", className: "text-c3 text-sm", children: resultCount }), showClear ? (_jsx("button", { type: "button", onClick: () => {
                             cleared.current = true;
                             onClear();
                         }, className: "ml-auto font-bold text-h1 text-sm transition-colors hover:text-c1", children: clearLabel })) : null] }), _jsx("div", { id: bodyId, className: cx("flex-col gap-3", open ? "flex" : "hidden sm:flex"), children: children })] }));

package/dist/components/filters/FilterRow.d.ts

@@ -4,7 +4,7 @@
  *       the left and the controls on the right from `sm` up, stacked on phones.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 import { type ComponentProps, type ReactNode } from "react";
 /** Every native `<fieldset>` prop (including `ref`), plus the row's label. */

package/dist/components/filters/FilterRow.js

@@ -5,10 +5,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *       the left and the controls on the right from `sm` up, stacked on phones.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 import { useId } from "react";
 import { cx } from "../../utils/cx.js";
+import { FIELD_LABEL } from "../forms/fieldStyles.js";
 /**
  * @function FilterRow
  * @param props {FilterRowProps} the label, the row's controls as children, and native fieldset
@@ -18,5 +19,5 @@ import { cx } from "../../utils/cx.js";
  */
 export function FilterRow({ label, className, children, ...props }) {
     const labelId = useId();
-    return (_jsxs("fieldset", { "aria-labelledby": labelId, className: cx("flex flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-4", className), ...props, children: [_jsx("span", { id: labelId, className: "shrink-0 font-bold text-c3 text-sm sm:w-28", children: label }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
+    return (_jsxs("fieldset", { "aria-labelledby": labelId, className: cx("flex flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-4", className), ...props, children: [_jsx("span", { id: labelId, className: `shrink-0 sm:w-28 ${FIELD_LABEL}`, children: label }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
 }

package/dist/components/filters/GroupFrame.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file src/components/filters/GroupFrame.tsx
+ * @desc The labelled fieldset that ChipGroup, ChoiceChips and RangeSlider share (internal): a
+ *       `<fieldset>` named by a bold label, or, with `hideLabel`, a bare fieldset with role none
+ *       that leaves the name to a surrounding FilterRow. Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ComponentProps, type ReactNode } from "react";
+/** Every native `<fieldset>` prop, plus the group's label and whether a FilterRow names it. */
+export type GroupFrameProps = ComponentProps<"fieldset"> & {
+    /** Names the group (`aria-labelledby`), shown above the controls. */
+    label: ReactNode;
+    /**
+     * Leave the name to a surrounding FilterRow: no label shows, and the fieldset is not a group
+     * of its own (role none), so screen readers hear the row's name once.
+     */
+    hideLabel?: boolean | undefined;
+};
+/**
+ * @function GroupFrame
+ * @param props {GroupFrameProps} the label, hideLabel, the controls as children, and native
+ *        fieldset props (`className` merges last)
+ * @returns {JSX.Element} a `<fieldset>` labelled by its label, or with role none and no label
+ */
+export declare function GroupFrame({ label, hideLabel, className, children, ...props }: GroupFrameProps): import("react").JSX.Element;

package/dist/components/filters/GroupFrame.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file src/components/filters/GroupFrame.tsx
+ * @desc The labelled fieldset that ChipGroup, ChoiceChips and RangeSlider share (internal): a
+ *       `<fieldset>` named by a bold label, or, with `hideLabel`, a bare fieldset with role none
+ *       that leaves the name to a surrounding FilterRow. Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { useId } from "react";
+import { cx } from "../../utils/cx.js";
+import { FIELD_LABEL } from "../forms/fieldStyles.js";
+/**
+ * @function GroupFrame
+ * @param props {GroupFrameProps} the label, hideLabel, the controls as children, and native
+ *        fieldset props (`className` merges last)
+ * @returns {JSX.Element} a `<fieldset>` labelled by its label, or with role none and no label
+ */
+export function GroupFrame({ label, hideLabel = false, className, children, ...props }) {
+    const labelId = useId();
+    return (_jsxs("fieldset", { 
+        // Inside a FilterRow (hideLabel), the row's fieldset is the group. A second group with the
+        // same name would be read twice. The fieldset stays, so `disabled` still reaches every
+        // control inside it.
+        role: hideLabel ? "none" : undefined, "aria-labelledby": hideLabel ? undefined : labelId, className: cx("flex flex-col gap-2", className), ...props, children: [hideLabel ? null : (_jsx("span", { id: labelId, className: FIELD_LABEL, children: label })), children] }));
+}

package/dist/components/filters/RangeBox.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file src/components/filters/RangeBox.tsx
+ * @desc One of RangeSlider's two edit boxes (internal): a short text field on the shared field
+ *       look that holds what is being typed, commits it on blur or Enter, and puts the value
+ *       back on Escape.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type HTMLAttributes } from "react";
+/** The box's name, the value it shows, its keyboard and state, and what to do with typing. */
+export type RangeBoxProps = {
+    /** The accessible name ("Minimum Star rating"). */
+    label: string;
+    /** The current value as display text, shown while nothing is being typed. */
+    text: string;
+    inputMode: HTMLAttributes<HTMLInputElement>["inputMode"];
+    disabled: boolean;
+    /** Gets the typed text on blur or Enter, when there is any. */
+    onCommit: (draft: string) => void;
+};
+/**
+ * @function RangeBox
+ * @param props {RangeBoxProps} the name, the shown text, the input mode, disabled, and the
+ *        commit handler
+ * @returns {JSX.Element} a text `<input>` that shows the value, or the typing in progress
+ */
+export declare function RangeBox({ label, text, inputMode, disabled, onCommit }: RangeBoxProps): import("react").JSX.Element;

package/dist/components/filters/RangeBox.js

@@ -0,0 +1,41 @@
+/**
+ * @file src/components/filters/RangeBox.tsx
+ * @desc One of RangeSlider's two edit boxes (internal): a short text field on the shared field
+ *       look that holds what is being typed, commits it on blur or Enter, and puts the value
+ *       back on Escape.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { fieldClasses } from "../forms/fieldStyles.js";
+// The field look, sized for a short value. The slider's group dims itself when disabled, so the
+// box keeps full opacity instead of dimming twice.
+const BOX = fieldClasses("w-18 shrink-0 px-2 py-1 text-center tabular-nums disabled:cursor-not-allowed disabled:opacity-100");
+/**
+ * @function RangeBox
+ * @param props {RangeBoxProps} the name, the shown text, the input mode, disabled, and the
+ *        commit handler
+ * @returns {JSX.Element} a text `<input>` that shows the value, or the typing in progress
+ */
+export function RangeBox({ label, text, inputMode, disabled, onCommit }) {
+    const [draft, setDraft] = useState(null);
+    const commit = () => {
+        if (draft === null)
+            return;
+        setDraft(null);
+        onCommit(draft);
+    };
+    return (_jsx("input", { type: "text", inputMode: inputMode, autoComplete: "off", "aria-label": label, disabled: disabled, value: draft ?? text, onChange: (event) => setDraft(event.currentTarget.value), onBlur: commit, onKeyDown: (event) => {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                commit();
+            }
+            else if (event.key === "Escape" && draft !== null) {
+                event.preventDefault();
+                setDraft(null);
+            }
+        }, className: BOX }));
+}

package/dist/components/filters/RangeSlider.d.ts

@@ -3,26 +3,25 @@
  * @desc Two-thumb range slider with an editable box at each end (star rating, length, BPM). Two
  *       native range inputs share one track; the thumbs can't cross. With `openEnded`, the top
  *       end at `max` means "no upper limit": it shows "max+" and reports `null`. When both thumbs
- *       sit on one value, a drag moves whichever end can go the way the pointer goes.
+ *       sit on one value, a drag moves whichever end can go the way the pointer goes. The math
+ *       lives in rangeMath.ts and the boxes in RangeBox.tsx.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
-import { type ComponentProps, type HTMLAttributes } from "react";
-/** A range as `[low, high]`. `high` is `null` for an open top end (no upper limit). */
-export type RangeSliderValue = [number, number | null];
-/** Every native `<fieldset>` prop except `onChange` and `children`, plus the range. */
-export type RangeSliderProps = Omit<ComponentProps<"fieldset">, "onChange" | "children" | "inputMode"> & {
+import type { HTMLAttributes } from "react";
+import { type GroupFrameProps } from "./GroupFrame.js";
+import { type RangeSliderValue } from "./rangeMath.js";
+export type { RangeSliderValue };
+/** Every native `<fieldset>` prop except `onChange`, `children` and `inputMode`, plus the range. */
+export type RangeSliderProps = Omit<GroupFrameProps, "onChange" | "children" | "inputMode"> & {
     /** Names the group, and the ends as "Minimum <label>" and "Maximum <label>". */
     label: string;
-    /**
-     * Leave the group name to a surrounding FilterRow: no label shows, and the fieldset is not a
-     * group of its own (role none). The ends are still named from `label`.
-     */
-    hideLabel?: boolean | undefined;
+    /** The low bound. If it is above `max`, the two swap. */
     min: number;
+    /** The high bound. */
     max: number;
-    /** Step between values (default 1). Typed values snap to it. */
+    /** Step between values (default 1; 0, negative or NaN also mean 1). Typed values snap to it. */
     step?: number | undefined;
     /** The current range. A `null` top end means open (shown at `max`). */
     value: Readonly<RangeSliderValue>;
@@ -59,4 +58,4 @@ export type RangeSliderProps = Omit<ComponentProps<"fieldset">, "onChange" | "ch
  *          Page Up/Down ten steps, Home/End as far as it can go. The boxes commit on blur or
  *          Enter; Escape puts the value back.
  */
-export declare function RangeSlider({ label, hideLabel, min, max, step, value, onChange, format, parse, inputMode, openEnded, minLabel, maxLabel, disabled, className, ...props }: RangeSliderProps): import("react").JSX.Element;
+export declare function RangeSlider({ label, min: rawMin, max: rawMax, step: rawStep, value, onChange, format, parse, inputMode, openEnded, minLabel, maxLabel, disabled, className, ...props }: RangeSliderProps): import("react").JSX.Element;