@blakesteve/roster 5.10.0 → 5.12.0

package/dist/components/molecules/RadioGroup/RadioGroup.js

@@ -2,17 +2,18 @@
 import { jsxs as c, jsx as s } from "react/jsx-runtime";
 import "react";
 import { Description as p } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as S } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Field as R } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
 import { Label as f } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
-import { RadioGroup as j, Radio as D } from "../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.js";
+import { RadioGroup as S, Radio as j } from "../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.js";
 import { cn as t } from "../../../lib/utils.js";
-import { isFieldInvalid as F, withoutInvalidProps as O } from "../../../internal/field-invalid.js";
-import { radioDotVariants as P, radioVariants as Z, radioOptionVariants as A, radioGroupOptionsVariants as B } from "./radio-group-variants.js";
-const K = {
+import { isFieldInvalid as D, withoutInvalidProps as K } from "../../../internal/field-invalid.js";
+import { radioDotVariants as O, radioVariants as P, radioOptionVariants as Z, radioGroupOptionsVariants as A } from "./radio-group-variants.js";
+import { useKeyFocus as B } from "../../../internal/key-focus.js";
+const W = {
   sm: "rst:text-xs",
   md: "rst:text-sm",
   lg: "rst:text-base"
-}, Y = ({
+}, M = ({
   options: u,
   value: v,
   onChange: y,
@@ -30,13 +31,14 @@ const K = {
   labelClassName: k,
   optionLabelClassName: V,
   descriptionClassName: E,
-  messageClassName: G,
-  "aria-invalid": I,
+  messageClassName: F,
+  "aria-invalid": G,
   ...n
 }) => {
-  const x = !!o, L = F(x, { ...n, "aria-invalid": I }), R = O(n), e = h ?? "md";
+  B();
+  const x = !!o, I = D(x, { ...n, "aria-invalid": G }), L = K(n), e = h ?? "md";
   return /* @__PURE__ */ c(
-    j,
+    S,
     {
       value: v,
       onChange: y,
@@ -45,8 +47,8 @@ const K = {
         "rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",
         b
       ),
-      ...R,
-      "aria-invalid": L || void 0,
+      ...L,
+      "aria-invalid": I || void 0,
       "aria-orientation": i,
       children: [
         d && /* @__PURE__ */ s(
@@ -64,24 +66,24 @@ const K = {
           "div",
           {
             className: t(
-              B({ size: e, orientation: i }),
+              A({ size: e, orientation: i }),
               g
             ),
             children: u.map((r) => /* @__PURE__ */ c(
-              S,
+              R,
               {
                 disabled: a || r.disabled,
                 className: t(
-                  A({ orientation: i, size: e }),
+                  Z({ orientation: i, size: e }),
                   w
                 ),
                 children: [
                   /* @__PURE__ */ s(
-                    D,
+                    j,
                     {
                       value: r.value,
                       className: ({ checked: l }) => t(
-                        Z({ colorScheme: N, size: e, checked: l }),
+                        P({ colorScheme: N, size: e, checked: l }),
                         /* `self-start`, and no nudge. The circle's height equals the
                            label's line-height at every size, so aligning their top
                            edges puts the radio on the first line whether the label
@@ -94,7 +96,7 @@ const K = {
                         "span",
                         {
                           className: t(
-                            P({ size: e }),
+                            O({ size: e }),
                             l ? "rst:opacity-100" : "rst:opacity-0"
                           )
                         }
@@ -120,7 +122,7 @@ const K = {
                               "rst:cursor-pointer rst:select-none",
                               "rst:text-[var(--roster-control-text)]",
                               "rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",
-                              K[e],
+                              W[e],
                               V
                             ),
                             children: r.label
@@ -153,7 +155,7 @@ const K = {
               "rst:text-xs rst:text-left",
               x ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400",
               a && "rst:opacity-50",
-              G
+              F
             ),
             children: o || m
           }
@@ -163,5 +165,5 @@ const K = {
   );
 };
 export {
-  Y as RadioGroup
+  M as RadioGroup
 };

package/dist/components/molecules/RangeSlider/RangeSlider.cjs

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

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

@@ -0,0 +1,79 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { SliderSnapPoint } from '../Slider/track';
+/** A range's two values, low then high. */
+export type RangeValue = [number, number];
+/** Every word RangeSlider says. Pass any of them in `labels` to replace it. */
+export interface RangeSliderLabels {
+    /** The low thumb's name, heard after the slider's label: "Price Minimum". */
+    low: string;
+    /** The high thumb's name. */
+    high: string;
+    /** What a screen reader hears for a thumb's value, with the nearest snap point's label when there is one: "40, Likely". */
+    valueText: (value: string, nearest: string | undefined) => string;
+    /** The number shown beside the label, both values in one: "20 – 80". */
+    range: (low: string, high: string) => string;
+}
+export interface RangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** The two values, low then high. Pass it to control the slider; leave it out for one that starts from `defaultValue`. */
+    value?: RangeValue;
+    /** Where an uncontrolled slider starts. The whole range, `[min, max]`, by default. */
+    defaultValue?: RangeValue;
+    /** Each change: a tap, every step of a drag, a key, a snap point. */
+    onChange?: (value: RangeValue) => void;
+    /** Once a change is finished: a tap, the end of a drag, a key, a snap point. */
+    onCommit?: (value: RangeValue) => 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;
+    /**
+     * Named stops, any values and labels. Each gets a mark on the track and a
+     * chip under it, which does what a tap on its mark does: moves the nearer
+     * thumb there. A point outside `min` to `max` is left out.
+     */
+    snapPoints?: SliderSnapPoint[];
+    /**
+     * The slider's name, shown above the track. A node as well as a string, so
+     * it can carry markup; it names the group and each thumb by reference, so
+     * what's read is its text. A consumer's own `aria-labelledby` names it
+     * instead.
+     */
+    label?: ReactNode;
+    /** 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: both values are submitted under it, low then high, as a multiple select's are. */
+    name?: string;
+    /** How a value is written, in the readout and in what's said. */
+    formatValue?: (value: number) => string;
+    /** Every word the slider says, with English defaults. */
+    labels?: Partial<RangeSliderLabels>;
+    /** Classes for the track, the pointer's hit area. */
+    trackClassName?: string;
+    /** Classes for each 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;
+}
+/**
+ * Two values picked along one track, a low and a high: tapped, dragged,
+ * stepped with the keys, or set from a named snap point.
+ *
+ * Each thumb is a slider of its own to a screen reader and the keyboard, a
+ * tab stop named for the slider and for its end ("Price Minimum"), whose
+ * range runs to the other thumb: the thumbs meet, and never cross. The track
+ * takes a press for the nearer thumb. It starts at the whole range, and has
+ * no not-set state: the whole range is what "any" looks like.
+ */
+declare function RangeSlider({ value: controlled, defaultValue, onChange, onCommit, min, max, step, pageStep, snapPoints, label, helperText, errorMessage, disabled, name, formatValue, labels: overrides, className, trackClassName, thumbClassName, chipClassName, labelClassName, messageClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;
+export { RangeSlider };

package/dist/components/molecules/RangeSlider/RangeSlider.js

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

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

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

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

@@ -0,0 +1,91 @@
+import { HTMLAttributes, ReactNode } 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. A node as well as a string, so
+     * it can carry markup; it names the slider by reference, so what's read is
+     * its text. A consumer's own `aria-labelledby` names it instead.
+     */
+    label?: ReactNode;
+    /** 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,130 @@
+"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 Fe } from "./track.js";
+import { SliderHeader as $e, Rail as je, Fill as De, Marks as Ke, SnapChips as Le, Message as Pe } from "./track-parts.js";
+import { useKeyFocus as Te } from "../../../internal/key-focus.js";
+const Oe = {
+  notSet: "Not set",
+  valueText: (u, c) => c ? `${u}, ${c}` : u
+};
+function Me({
+  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
+}) {
+  Te();
+  const g = me(Oe, G), B = ve(), C = `${B}-label`, F = `${B}-message`, $ = Z ?? (I ? C : void 0), s = Se(n, o, R, H), j = s.snap(_ ?? n + (o - n) / 2), p = u !== void 0, [D, K] = ge(c === void 0 ? j : c), L = p ? u : D, r = L === null ? null : s.clamp(L), se = be(!!d, { ...v, "aria-invalid": Y }), P = ye(v), l = he(r), [, le] = pe((e) => e + 1, 0), m = (e, a) => {
+    e !== l.current && (l.current = e, p ? le() : K(e), E?.(e), a && e !== null && k?.(e));
+  }, T = w(null), O = w(D);
+  we(
+    T,
+    p,
+    () => {
+      l.current = O.current, K(O.current);
+    },
+    f
+  );
+  const b = w(null), { dragging: y, rtl: oe, handlers: ae } = ke({
+    trackRef: b,
+    disabled: t,
+    scale: s,
+    min: n,
+    max: o,
+    values: () => [l.current],
+    set: (e, a, fe) => m(a, fe),
+    focus: () => b.current?.focus({ preventScroll: !0 }),
+    commit: () => l.current !== null && k?.(l.current),
+    own: { down: ee, move: re, up: te, cancel: ie, lost: ne }
+  }), ue = (e) => {
+    if (V?.(e), t) return;
+    const a = Fe(e, l.current, { scale: s, step: R, start: j, 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 ? F : 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($e, { labelId: C, label: I, readout: h ?? g.notSet, empty: r === null, disabled: t, labelClassName: W }),
+    /* @__PURE__ */ z(
+      "div",
+      {
+        ...P,
+        ...ae,
+        ref: b,
+        role: "slider",
+        tabIndex: t ? void 0 : 0,
+        "aria-labelledby": $,
+        "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": se || 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(je, {}),
+          r !== null && /* @__PURE__ */ i(De, { from: 0, to: s.at(r), dragging: y }),
+          /* @__PURE__ */ i(Ke, { points: S, at: s.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(s.at(r)) } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ i(
+      Le,
+      {
+        points: S,
+        labelledBy: $,
+        label: P["aria-label"],
+        pressed: (e) => r === e,
+        pick: (e) => m(e, !0),
+        disabled: t,
+        chipClassName: U
+      }
+    ),
+    /* @__PURE__ */ i(Pe, { id: F, helperText: N, errorMessage: d, disabled: t, className: X }),
+    f && /* @__PURE__ */ i("input", { ref: T, type: "hidden", name: f, value: r === null ? "" : String(r), disabled: t, readOnly: !0 })
+  ] });
+}
+export {
+  Me 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;