@blakesteve/roster 5.10.0 → 5.11.0

package/dist/components/molecules/Slider/Slider.d.ts

@@ -0,0 +1,87 @@
+import { HTMLAttributes } from 'react';
+import { SliderSnapPoint } from './track';
+export type { SliderSnapPoint };
+/** Every word Slider says. Pass any of them in `labels` to replace it. */
+export interface SliderLabels {
+    /** Shown, and said, while there's no value. */
+    notSet: string;
+    /** What a screen reader hears for a value, with the nearest snap point's label when there is one: "72, Likely". */
+    valueText: (value: string, nearest: string | undefined) => string;
+}
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /**
+     * The value, or `null` for not set: no thumb and an empty track. Pass it to
+     * control the slider, `null` included, which is how a consumer offers a
+     * clear. Leave it out for an uncontrolled slider that starts from
+     * `defaultValue`.
+     */
+    value?: number | null;
+    /**
+     * Where an uncontrolled slider starts: `startValue` when left out, the
+     * middle unless that's set. `null` starts it not set.
+     */
+    defaultValue?: number | null;
+    /** Each change: a tap, every step of a drag, a key, a snap point. */
+    onChange?: (value: number | null) => void;
+    /** Once a change is finished: a tap, the end of a drag, a key, a snap point. */
+    onCommit?: (value: number) => void;
+    /** The lowest value. */
+    min?: number;
+    /** The highest value. */
+    max?: number;
+    /** The smallest move: the arrows step by it, and every value lands on it. */
+    step?: number;
+    /** PageUp and PageDown's move. A tenth of the range, on a step, by default. */
+    pageStep?: number;
+    /**
+     * Where the thumb first appears: an uncontrolled slider's start when
+     * `defaultValue` is left out, and where the first arrow or Page key puts it
+     * on an empty slider. The middle of the range by default. Home and End go to
+     * `min` and `max`.
+     */
+    startValue?: number;
+    /**
+     * Named stops, any values and labels. Each gets a chip under the track that
+     * moves the thumb to it, and a mark on the track. A point outside `min` to
+     * `max` is left out, since the track can't show it.
+     */
+    snapPoints?: SliderSnapPoint[];
+    /** The slider's name, shown above the track. */
+    label?: string;
+    /** Supporting text under the slider. */
+    helperText?: string;
+    /** The message for an invalid value. Implies the error state. */
+    errorMessage?: string;
+    disabled?: boolean;
+    /** A form field name: the value is submitted under it, and an empty string while not set. */
+    name?: string;
+    /** How the value is written, in the readout and in what's said: `(v) => `${v}%`` for a percentage. */
+    formatValue?: (value: number) => string;
+    /** Every word the slider says, with English defaults. */
+    labels?: Partial<SliderLabels>;
+    /** Classes for the track's hit area, the element with the slider role. */
+    trackClassName?: string;
+    /** Classes for the thumb. */
+    thumbClassName?: string;
+    /** Classes for each snap chip. */
+    chipClassName?: string;
+    /** Classes for the label. */
+    labelClassName?: string;
+    /** Classes for the helper text or error message. */
+    messageClassName?: string;
+}
+/**
+ * A value picked along a track: tapped, dragged, stepped with the keys, or
+ * set from a named snap point.
+ *
+ * It starts with the thumb at `startValue`, the middle by default. Not set is
+ * there when it's asked for: `defaultValue={null}`, or `value={null}` when
+ * controlled, gives no thumb and an empty track, and a form takes that as a
+ * valid answer (an empty string under `name`). The first tap, drag or key sets
+ * it, and a consumer controlling `value` can set it back to `null`.
+ *
+ * One thumb. Two, for a range, is `RangeSlider`, on the same track, so
+ * `value` here stays a number.
+ */
+declare function Slider({ value: controlled, defaultValue, onChange, onCommit, min, max, step, pageStep, startValue, snapPoints, label, helperText, errorMessage, disabled, name, formatValue, labels: overrides, className, trackClassName, thumbClassName, chipClassName, labelClassName, messageClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, onKeyDown: onKeyDownProp, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export { Slider };

package/dist/components/molecules/Slider/Slider.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsxs as z, jsx as i } from "react/jsx-runtime";
+import { useId as ve, useState as ge, useReducer as pe, useRef as w } from "react";
+import { cn as A } from "../../../lib/utils.js";
+import { withLabels as me } from "../../../lib/labels.js";
+import { isFieldInvalid as be, withoutInvalidProps as ye } from "../../../internal/field-invalid.js";
+import { useScale as Se, useCommitted as he, useFormReset as we, useTrackPress as ke, inRange as Re, nearestPoint as Ie, along as Ne, thumbClasses as Be, trackClasses as Ce, keyTarget as $e } from "./track.js";
+import { SliderHeader as je, Rail as De, Fill as Fe, Marks as Le, SnapChips as Pe, Message as Te } from "./track-parts.js";
+const Ke = {
+  notSet: "Not set",
+  valueText: (u, c) => c ? `${u}, ${c}` : u
+};
+function Ge({
+  value: u,
+  defaultValue: c,
+  onChange: E,
+  onCommit: k,
+  min: n = 0,
+  max: o = 100,
+  step: R = 1,
+  pageStep: H,
+  startValue: _,
+  snapPoints: q = [],
+  label: I,
+  helperText: N,
+  errorMessage: d,
+  disabled: t = !1,
+  name: f,
+  formatValue: x = String,
+  labels: G,
+  className: J,
+  trackClassName: M,
+  thumbClassName: Q,
+  chipClassName: U,
+  labelClassName: W,
+  messageClassName: X,
+  "aria-invalid": Y,
+  "aria-labelledby": Z,
+  onKeyDown: V,
+  onPointerDown: ee,
+  onPointerMove: re,
+  onPointerUp: te,
+  onPointerCancel: ie,
+  onLostPointerCapture: ne,
+  ...v
+}) {
+  const g = me(Ke, G), B = ve(), C = `${B}-label`, $ = `${B}-message`, j = Z ?? (I ? C : void 0), l = Se(n, o, R, H), D = l.snap(_ ?? n + (o - n) / 2), p = u !== void 0, [F, L] = ge(c === void 0 ? D : c), P = p ? u : F, r = P === null ? null : l.clamp(P), le = be(!!d, { ...v, "aria-invalid": Y }), T = ye(v), s = he(r), [, se] = pe((e) => e + 1, 0), m = (e, a) => {
+    e !== s.current && (s.current = e, p ? se() : L(e), E?.(e), a && e !== null && k?.(e));
+  }, K = w(null), O = w(F);
+  we(
+    K,
+    p,
+    () => {
+      s.current = O.current, L(O.current);
+    },
+    f
+  );
+  const b = w(null), { dragging: y, rtl: oe, handlers: ae } = ke({
+    trackRef: b,
+    disabled: t,
+    scale: l,
+    min: n,
+    max: o,
+    values: () => [s.current],
+    set: (e, a, fe) => m(a, fe),
+    focus: () => b.current?.focus({ preventScroll: !0 }),
+    commit: () => s.current !== null && k?.(s.current),
+    own: { down: ee, move: re, up: te, cancel: ie, lost: ne }
+  }), ue = (e) => {
+    if (V?.(e), t) return;
+    const a = $e(e, s.current, { scale: l, step: R, start: D, floor: n, ceiling: o, rtl: oe() });
+    a !== void 0 && (e.preventDefault(), m(a, !0));
+  }, S = Re(q, n, o), h = r === null ? null : x(r), ce = h === null ? g.notSet : g.valueText(h, Ie(S, r)?.label), de = [N || d ? $ : void 0, v["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ z("div", { className: A("rst:font-ui rst:flex rst:min-w-0 rst:flex-col rst:gap-1.5", J), "data-slider": "", children: [
+    /* @__PURE__ */ i(je, { labelId: C, label: I, readout: h ?? g.notSet, empty: r === null, disabled: t, labelClassName: W }),
+    /* @__PURE__ */ z(
+      "div",
+      {
+        ...T,
+        ...ae,
+        ref: b,
+        role: "slider",
+        tabIndex: t ? void 0 : 0,
+        "aria-labelledby": j,
+        "aria-describedby": de,
+        "aria-valuemin": n,
+        "aria-valuemax": o,
+        "aria-valuenow": r ?? void 0,
+        "aria-valuetext": ce,
+        "aria-orientation": "horizontal",
+        "aria-disabled": t || void 0,
+        "aria-invalid": le || void 0,
+        "data-dragging": y ? "" : void 0,
+        "data-empty": r === null ? "" : void 0,
+        onKeyDown: ue,
+        className: A(
+          Ce(t),
+          "rst:group/slider rst:focus-visible:outline-hidden",
+          r === null && "rst:focus-visible:ring-2 rst:focus-visible:ring-ring",
+          M
+        ),
+        children: [
+          /* @__PURE__ */ i(De, {}),
+          r !== null && /* @__PURE__ */ i(Fe, { from: 0, to: l.at(r), dragging: y }),
+          /* @__PURE__ */ i(Le, { points: S, at: l.at, filled: (e) => r !== null && r >= e }),
+          r !== null && /* @__PURE__ */ i("span", { "aria-hidden": "true", "data-slider-thumb": "", className: Be(y, "rst:group-focus-visible/slider:ring-2 rst:group-focus-visible/slider:ring-ring rst:group-focus-visible/slider:ring-offset-2 rst:ring-offset-background", Q), style: { insetInlineStart: Ne(l.at(r)) } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ i(
+      Pe,
+      {
+        points: S,
+        labelledBy: j,
+        label: T["aria-label"],
+        pressed: (e) => r === e,
+        pick: (e) => m(e, !0),
+        disabled: t,
+        chipClassName: U
+      }
+    ),
+    /* @__PURE__ */ i(Te, { id: $, helperText: N, errorMessage: d, disabled: t, className: X }),
+    f && /* @__PURE__ */ i("input", { ref: K, type: "hidden", name: f, value: r === null ? "" : String(r), disabled: t, readOnly: !0 })
+  ] });
+}
+export {
+  Ge as Slider
+};

package/dist/components/molecules/Slider/track-parts.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../../lib/utils.cjs"),i=require("../../atoms/Chip/Chip.cjs"),s=require("./track.cjs");function d(t){return r.jsxs("div",{className:"rst:flex rst:items-baseline rst:justify-between rst:gap-3",children:[t.label?r.jsx("span",{id:t.labelId,className:a.cn("rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]",t.disabled&&"rst:opacity-50",t.labelClassName),children:t.label}):r.jsx("span",{}),r.jsx("span",{"aria-hidden":"true","data-slider-readout":"",className:a.cn("rst:text-sm rst:tabular-nums",t.empty?"rst:text-gray-500 rst:dark:text-gray-400":"rst:font-semibold rst:text-[var(--roster-control-text)]",t.disabled&&"rst:opacity-50"),children:t.readout})]})}function o(){return r.jsx("span",{"aria-hidden":"true","data-slider-rail":"",className:"rst:absolute rst:top-1/2 rst:h-2.5 rst:-translate-y-1/2 rst:rounded-full rst:border rst:border-[var(--roster-control-border)] rst:bg-gray-100 rst:dark:bg-gray-800",style:{insetInline:s.INSET}})}function c({from:t,to:e,dragging:n}){return r.jsx("span",{"aria-hidden":"true","data-slider-fill":"",className:a.cn("rst:absolute rst:top-1/2 rst:h-2.5 rst:-translate-y-1/2 rst:rounded-full rst:bg-primary-600 rst:dark:bg-primary-400","rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]",!n&&"rst:transition-[inset-inline-start,width] rst:duration-150 rst:ease-out rst:motion-reduce:transition-none"),style:{insetInlineStart:s.along(t),width:`calc((100% - ${2*s.INSET}px) * ${e-t})`}})}function u({points:t,at:e,filled:n}){return t.map(l=>r.jsx("span",{"aria-hidden":"true","data-slider-mark":"","data-filled":n(l.value)?"":void 0,className:a.cn("rst:absolute rst:top-1/2 rst:size-1.5 rst:-translate-x-1/2 rst:-translate-y-1/2 rst:rounded-full rst:rtl:translate-x-1/2","rst:transition-colors rst:duration-150 rst:motion-reduce:transition-none rst:forced-colors:forced-color-adjust-none",n(l.value)?"rst:bg-white rst:dark:bg-gray-900 rst:forced-colors:bg-[Canvas]":"rst:bg-[var(--roster-control-border)] rst:forced-colors:bg-[CanvasText]"),style:{insetInlineStart:s.along(e(l.value),s.INSET+s.CAP)}},`${l.value}:${l.label}`))}function b(t){return t.points.length===0?null:r.jsx("div",{role:"group","aria-labelledby":t.labelledBy,"aria-label":t.labelledBy?void 0:t.label,className:"rst:mt-0.5 rst:flex rst:flex-wrap rst:gap-x-2 rst:gap-y-4","data-slider-snaps":"",children:t.points.map(e=>r.jsx(i.Chip,{selected:t.pressed(e.value),onSelectedChange:()=>t.pick(e.value),variant:t.pressed(e.value)?"solid":"outline",colorScheme:t.pressed(e.value)?"primary":"neutral",disabled:t.disabled,className:a.cn("rst:min-w-11 rst:shrink-0 rst:justify-center",t.chipClassName),children:e.label},`${e.value}:${e.label}`))})}function x(t){return!t.helperText&&!t.errorMessage?null:r.jsx("p",{id:t.id,className:a.cn("rst:m-0 rst:text-xs rst:text-left",t.errorMessage?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400",t.disabled&&"rst:opacity-50",t.className),children:t.errorMessage||t.helperText})}exports.Fill=c;exports.Marks=u;exports.Message=x;exports.Rail=o;exports.SliderHeader=d;exports.SnapChips=b;

package/dist/components/molecules/Slider/track-parts.d.ts

@@ -0,0 +1,64 @@
+import { SliderSnapPoint } from './track';
+/** The label and the visible number above the track. The number is hidden from screen readers, which hear it as the value. */
+export declare function SliderHeader(props: {
+    labelId: string;
+    label?: string;
+    readout: string;
+    empty: boolean;
+    disabled: boolean;
+    labelClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The rail, from the start edge's inset to the end edge's: a light surface
+ * edged in the control border's color. With no value it's all there is of
+ * the slider, so its edge carries the 3:1 a control's does.
+ */
+export declare function Rail(): import("react/jsx-runtime").JSX.Element;
+/** The filled part of the rail, between two shares of it. */
+export declare function Fill({ from, to, dragging }: {
+    from: number;
+    to: number;
+    dragging: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Each snap point's mark: a bead set in the rail, its edge's color on the
+ * bare rail and the page's on the fill, so it shows on either.
+ */
+export declare function Marks({ points, at, filled }: {
+    points: SliderSnapPoint[];
+    at: (v: number) => number;
+    filled: (v: number) => boolean;
+}): import("react/jsx-runtime").JSX.Element[];
+/**
+ * A chip for each snap point, under the track, in a group named as the
+ * slider is so the chips are heard as its presets.
+ *
+ * The clearance is what Chip's 44px target asks of its layout: it reaches up
+ * to 8px above and below the chip, so the row sits 8px under the track (the
+ * column's 6px and 2px more), where it can't take the bottom of a thumb's
+ * target, and wrapped rows are 16px apart. A short label is widened to 44
+ * too, since the target is only as wide as the chip, and no chip shrinks: a
+ * min-width replaces the flex item's own floor of its label's width, so in a
+ * row narrower than a label the chip would otherwise squeeze to 44 under it.
+ *
+ * A chip only ever moves a value to itself: pressed again, it stays, as a
+ * preset does. Pressed swaps outline for solid, as Chip's own selectable
+ * does, so it reads without color.
+ */
+export declare function SnapChips(props: {
+    points: SliderSnapPoint[];
+    labelledBy: string | undefined;
+    label: string | undefined;
+    pressed: (v: number) => boolean;
+    pick: (v: number) => void;
+    disabled: boolean;
+    chipClassName?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** The helper text, or the error in its place. */
+export declare function Message(props: {
+    id: string;
+    helperText?: string;
+    errorMessage?: string;
+    disabled: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/molecules/Slider/track-parts.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { cn as a } from "../../../lib/utils.js";
+import { Chip as o } from "../../atoms/Chip/Chip.js";
+import { INSET as n, along as i, CAP as c } from "./track.js";
+function g(t) {
+  return /* @__PURE__ */ d("div", { className: "rst:flex rst:items-baseline rst:justify-between rst:gap-3", children: [
+    t.label ? /* @__PURE__ */ e(
+      "span",
+      {
+        id: t.labelId,
+        className: a("rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]", t.disabled && "rst:opacity-50", t.labelClassName),
+        children: t.label
+      }
+    ) : /* @__PURE__ */ e("span", {}),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slider-readout": "",
+        className: a(
+          "rst:text-sm rst:tabular-nums",
+          t.empty ? "rst:text-gray-500 rst:dark:text-gray-400" : "rst:font-semibold rst:text-[var(--roster-control-text)]",
+          t.disabled && "rst:opacity-50"
+        ),
+        children: t.readout
+      }
+    )
+  ] });
+}
+function x() {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slider-rail": "",
+      className: "rst:absolute rst:top-1/2 rst:h-2.5 rst:-translate-y-1/2 rst:rounded-full rst:border rst:border-[var(--roster-control-border)] rst:bg-gray-100 rst:dark:bg-gray-800",
+      style: { insetInline: n }
+    }
+  );
+}
+function h({ from: t, to: r, dragging: l }) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slider-fill": "",
+      className: a(
+        "rst:absolute rst:top-1/2 rst:h-2.5 rst:-translate-y-1/2 rst:rounded-full rst:bg-primary-600 rst:dark:bg-primary-400",
+        "rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]",
+        !l && "rst:transition-[inset-inline-start,width] rst:duration-150 rst:ease-out rst:motion-reduce:transition-none"
+      ),
+      style: { insetInlineStart: i(t), width: `calc((100% - ${2 * n}px) * ${r - t})` }
+    }
+  );
+}
+function y({ points: t, at: r, filled: l }) {
+  return t.map((s) => /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slider-mark": "",
+      "data-filled": l(s.value) ? "" : void 0,
+      className: a(
+        "rst:absolute rst:top-1/2 rst:size-1.5 rst:-translate-x-1/2 rst:-translate-y-1/2 rst:rounded-full rst:rtl:translate-x-1/2",
+        "rst:transition-colors rst:duration-150 rst:motion-reduce:transition-none rst:forced-colors:forced-color-adjust-none",
+        l(s.value) ? "rst:bg-white rst:dark:bg-gray-900 rst:forced-colors:bg-[Canvas]" : "rst:bg-[var(--roster-control-border)] rst:forced-colors:bg-[CanvasText]"
+      ),
+      style: { insetInlineStart: i(r(s.value), n + c) }
+    },
+    `${s.value}:${s.label}`
+  ));
+}
+function v(t) {
+  return t.points.length === 0 ? null : /* @__PURE__ */ e(
+    "div",
+    {
+      role: "group",
+      "aria-labelledby": t.labelledBy,
+      "aria-label": t.labelledBy ? void 0 : t.label,
+      className: "rst:mt-0.5 rst:flex rst:flex-wrap rst:gap-x-2 rst:gap-y-4",
+      "data-slider-snaps": "",
+      children: t.points.map((r) => /* @__PURE__ */ e(
+        o,
+        {
+          selected: t.pressed(r.value),
+          onSelectedChange: () => t.pick(r.value),
+          variant: t.pressed(r.value) ? "solid" : "outline",
+          colorScheme: t.pressed(r.value) ? "primary" : "neutral",
+          disabled: t.disabled,
+          className: a("rst:min-w-11 rst:shrink-0 rst:justify-center", t.chipClassName),
+          children: r.label
+        },
+        `${r.value}:${r.label}`
+      ))
+    }
+  );
+}
+function N(t) {
+  return !t.helperText && !t.errorMessage ? null : /* @__PURE__ */ e(
+    "p",
+    {
+      id: t.id,
+      className: a(
+        "rst:m-0 rst:text-xs rst:text-left",
+        t.errorMessage ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400",
+        t.disabled && "rst:opacity-50",
+        t.className
+      ),
+      children: t.errorMessage || t.helperText
+    }
+  );
+}
+export {
+  h as Fill,
+  y as Marks,
+  N as Message,
+  x as Rail,
+  g as SliderHeader,
+  v as SnapChips
+};

package/dist/components/molecules/Slider/track.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),A=require("../../../lib/utils.cjs"),p=22,E=5,I=(t,s=p)=>`calc(${s}px + (100% - ${2*s}px) * ${t})`,X=t=>{const[s,n="0"]=String(t).split("e"),c=s.indexOf(".");return Math.max(0,(c===-1?0:s.length-c-1)-Number(n))};function D(t,s,n,c){const o=Math.max(X(n),X(t)),u=h.useCallback(b=>Math.min(s,Math.max(t,b)),[t,s]),l=h.useCallback((b,M=0)=>{const g=(b-t)/n,C=Math.round(g),R=M===0||Math.abs(g-C)<1e-6?C:M>0?Math.floor(g):Math.ceil(g);return u(Number((t+R*n).toFixed(o)))},[t,n,o,u]),T=h.useCallback(b=>s===t?0:(b-t)/(s-t),[t,s]);return{clamp:u,snap:l,at:T,coarse:c??Math.max(n,l(t+(s-t)/10)-t)}}function L(t,s,n){if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey)return;const c=u=>Math.min(n.ceiling,Math.max(n.floor,u)),o=u=>s===null?n.start:c(n.scale.snap(s+u,u>0?1:-1));switch(t.key){case(n.rtl?"ArrowLeft":"ArrowRight"):case"ArrowUp":return o(n.step);case(n.rtl?"ArrowRight":"ArrowLeft"):case"ArrowDown":return o(-n.step);case"PageUp":return o(n.scale.coarse);case"PageDown":return o(-n.scale.coarse);case"Home":return n.floor;case"End":return n.ceiling;default:return}}function N(t){const[s,n]=h.useState(!1),c=h.useRef(null),o=()=>!!t.trackRef.current&&getComputedStyle(t.trackRef.current).direction==="rtl",u=()=>t.trackRef.current.getBoundingClientRect(),l=r=>{const e=u();let a=(r-e.left-p)/Math.max(1,e.width-2*p);return a=Math.min(1,Math.max(0,a)),o()&&(a=1-a),t.scale.snap(t.min+a*(t.max-t.min))},T=r=>{const e=u();return e.left+p+(e.width-2*p)*(o()?1-t.scale.at(r):t.scale.at(r))},b=r=>t.values().some((e,a)=>e!==r[a]),M=(r,e)=>{try{r.setPointerCapture(e)}catch{}n(!0)},g=(r,e,a)=>{const f=c.current;!f||f.id!==e||(c.current=null,f.mode==="drag"&&(n(!1),r.hasPointerCapture(e)&&r.releasePointerCapture(e),a&&b(f.from)&&t.commit()))},C=(r,e)=>{if(r.thumb!=="either")return r.thumb;const a=t.values()[r.tied[0]];if(e!==a)return r.thumb=e>a?r.tied[r.tied.length-1]:r.tied[0],t.focus(r.thumb),r.thumb};return{dragging:s,rtl:o,handlers:{onPointerDown:r=>{if(t.own.down?.(r),t.disabled||r.button!==0)return;if(c.current){if(!r.isPrimary)return;g(r.currentTarget,c.current.id,!1)}r.preventDefault();const e=r.currentTarget,a=t.values(),f=a.map((i,k)=>({v:i,i:k})).filter(i=>i.v!==null),P=i=>Math.abs(r.clientX-T(i)),d=f.reduce((i,k)=>!i||P(k.v)<P(i.v)?k:i,void 0),m=!!d&&P(d.v)<=p,w=d?f.filter(i=>i.v===d.v).map(i=>i.i):[0];let y=d?d.i:0;if(w.length>1){const i=l(r.clientX);y=m?"either":i<d.v?w[0]:w[w.length-1]}const S=m?T(d.v)-r.clientX:0,x={id:r.pointerId,x:r.clientX,y:r.clientY,thumb:y,tied:w,grab:S,from:a};if(r.pointerType==="mouse"||m){t.focus(y==="either"?w[0]:y),c.current={...x,mode:"drag"},M(e,r.pointerId),!m&&y!=="either"&&t.set(y,l(r.clientX),!1);return}c.current={...x,mode:"pending"}},onPointerMove:r=>{t.own.move?.(r);const e=c.current;if(!e||e.id!==r.pointerId)return;if(e.mode==="pending"){const P=Math.abs(r.clientX-e.x),d=Math.abs(r.clientY-e.y);if(P>7&&P>d){e.mode="drag",M(r.currentTarget,r.pointerId);const m=C(e,l(r.clientX));m!==void 0&&(t.focus(m),t.set(m,l(r.clientX),!1))}else d>10&&(c.current=null);return}const a=l(r.clientX+e.grab),f=C(e,a);f!==void 0&&t.set(f,a,!1)},onPointerUp:r=>{t.own.up?.(r);const e=c.current;if(e&&e.id===r.pointerId&&e.mode==="pending"){c.current=null,e.thumb!=="either"&&(t.focus(e.thumb),t.set(e.thumb,l(r.clientX),!0));return}g(r.currentTarget,r.pointerId,!0)},onPointerCancel:r=>{t.own.cancel?.(r),g(r.currentTarget,r.pointerId,!0)},onLostPointerCapture:r=>{t.own.lost?.(r),r.target===r.currentTarget&&g(r.currentTarget,r.pointerId,!0)}}}}function U(t){const s=h.useRef(t);return h.useLayoutEffect(()=>{s.current=t}),s}function F(t,s,n,c){const o=h.useRef(n);h.useEffect(()=>{o.current=n}),h.useEffect(()=>{const u=t.current?.form;if(!u||s)return;const l=()=>o.current();return u.addEventListener("reset",l),()=>u.removeEventListener("reset",l)},[t,s,c])}const K=(t,s,n)=>t.filter(c=>c.value>=s&&c.value<=n).sort((c,o)=>c.value-o.value),$=(t,s)=>s===null||t.length===0?void 0:t.reduce((n,c)=>Math.abs(c.value-s)<Math.abs(n.value-s)?c:n,t[0]),q=t=>A.cn("rst:relative rst:h-11 rst:w-full rst:touch-pan-y rst:select-none rst:rounded-md",t?"rst:cursor-not-allowed rst:opacity-50":"rst:cursor-pointer"),H=(t,s,n)=>A.cn("rst:absolute rst:top-1/2 rst:size-5 rst:-translate-x-1/2 rst:-translate-y-1/2 rst:rounded-full rst:rtl:translate-x-1/2","rst:border-2 rst:border-primary-600 rst:bg-white rst:elevation-control rst:dark:border-primary-400 rst:dark:bg-gray-900","rst:forced-colors:border-[Highlight]",s,!t&&"rst:transition-[inset-inline-start] rst:duration-150 rst:ease-out rst:motion-reduce:transition-none",n);exports.CAP=E;exports.INSET=p;exports.along=I;exports.inRange=K;exports.keyTarget=L;exports.nearestPoint=$;exports.thumbClasses=H;exports.trackClasses=q;exports.useCommitted=U;exports.useFormReset=F;exports.useScale=D;exports.useTrackPress=N;

package/dist/components/molecules/Slider/track.d.ts

@@ -0,0 +1,115 @@
+import { KeyboardEvent, PointerEvent, RefObject } from 'react';
+/** A named stop on the track: a chip under it moves a thumb there. */
+export interface SliderSnapPoint {
+    value: number;
+    label: string;
+}
+export declare const INSET = 22;
+export declare const CAP = 5;
+/** A place along the rail, as a share of it from the start edge, for `inset-inline-start`. */
+export declare const along: (share: number, inset?: number) => string;
+export interface Scale {
+    clamp: (n: number) => number;
+    /**
+     * The nearest value on a step, in range. `toward` takes the next one that
+     * way instead, for a key from a value between steps (a controlled value off
+     * the grid, or a `max` that isn't on it): Left from 1 on a 0.3 step lands on
+     * 0.9, not 0.6.
+     */
+    snap: (raw: number, toward?: -1 | 0 | 1) => number;
+    /** PageUp and PageDown's move. */
+    coarse: number;
+    /** A value's share of the range, from `min`. */
+    at: (v: number) => number;
+}
+export declare function useScale(min: number, max: number, step: number, pageStep: number | undefined): Scale;
+/**
+ * Where a key takes a thumb, or `undefined` for a key that isn't the
+ * slider's. The arrows step by `step` and the Page keys by the scale's
+ * `coarse`, Home and End go to `floor` and `ceiling`, and a thumb with no
+ * value goes to `start` on an arrow or Page key rather than stepping from
+ * anywhere. A combination is the app's or the browser's, and so is a key its
+ * owner has already handled.
+ */
+export declare function keyTarget(event: KeyboardEvent, now: number | null, o: {
+    scale: Scale;
+    step: number;
+    start: number;
+    floor: number;
+    ceiling: number;
+    rtl: boolean;
+}): number | undefined;
+type Handler = ((event: PointerEvent<HTMLDivElement>) => void) | undefined;
+/**
+ * The track's pointer, for any number of thumbs.
+ *
+ * A mouse press, or one on a thumb, drags at once. A touch on the track waits
+ * to see which way it goes: across is a drag, down the page is a scroll and
+ * sets nothing, and no movement is a tap, set when the finger lifts. A press
+ * takes the thumb nearest it, worked out from the values rather than from
+ * the drawn thumbs, which may still be easing there. Two thumbs on one spot
+ * are told apart by the way the drag first moves: up the range takes the
+ * higher one. A press on a thumb keeps where it landed on it, rather than
+ * jumping the thumb to the pointer.
+ */
+export declare function useTrackPress(o: {
+    trackRef: RefObject<HTMLDivElement | null>;
+    disabled: boolean;
+    scale: Scale;
+    min: number;
+    max: number;
+    /** The values the thumbs are at, by index; `null` for one not placed. */
+    values: () => (number | null)[];
+    set: (thumb: number, value: number, finished: boolean) => void;
+    focus: (thumb: number) => void;
+    /** A drag that moved something has ended. */
+    commit: () => void;
+    /** The consumer's own handlers, called first. */
+    own: {
+        down: Handler;
+        move: Handler;
+        up: Handler;
+        cancel: Handler;
+        lost: Handler;
+    };
+}): {
+    dragging: boolean;
+    rtl: () => boolean;
+    handlers: {
+        onPointerDown: (event: PointerEvent<HTMLDivElement>) => void;
+        onPointerMove: (event: PointerEvent<HTMLDivElement>) => void;
+        onPointerUp: (event: PointerEvent<HTMLDivElement>) => void;
+        onPointerCancel: (event: PointerEvent<HTMLDivElement>) => void;
+        onLostPointerCapture: (event: PointerEvent<HTMLDivElement>) => void;
+    };
+};
+/**
+ * Keeps a ref on the values the thumbs are at, for the keys and the pointer
+ * to step from. Set the moment a change is made, so input that arrives
+ * before a render counts every press, and never read from the drawn thumbs,
+ * which ease toward the values after them. Each render brings it back to the
+ * values, which a controlling owner may have set from outside, or declined.
+ */
+export declare function useCommitted<T>(value: T): RefObject<T>;
+/**
+ * A form's reset puts an uncontrolled slider back where it started, as it
+ * does a native input. A controlled one is its owner's to reset.
+ */
+export declare function useFormReset(input: RefObject<HTMLInputElement | null>, controlled: boolean, reset: () => void, name: string | undefined): void;
+/** Snap points in range, in the track's order, low to high from its start, whatever order they came in. */
+export declare const inRange: (points: SliderSnapPoint[], min: number, max: number) => SliderSnapPoint[];
+/** The snap point nearest a value. Halfway between two, the lower one's. */
+export declare const nearestPoint: (points: SliderSnapPoint[], value: number | null) => SliderSnapPoint | undefined;
+/**
+ * The track's classes. 44px tall, a thumb's whole target. pan-y: a finger
+ * moving down the page still scrolls it; across, it drags.
+ */
+export declare const trackClasses: (disabled: boolean) => string;
+/**
+ * A thumb's classes: drawn where its value is, eased there unless it's being
+ * dragged. Its target is the 44px around it, which the track's height and
+ * inset keep on the track. `ring` is the focus ring, for whichever state
+ * shows it.
+ */
+export declare const thumbClasses: (dragging: boolean, ring: string, className?: string) => string;
+export {};