@blakesteve/roster 5.9.0 → 5.11.0

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

@@ -0,0 +1,74 @@
+import { HTMLAttributes } 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. */
+    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: 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,164 @@
+"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 ve, useRef as g } from "react";
+import { cn as q } from "../../../lib/utils.js";
+import { withLabels as pe } from "../../../lib/labels.js";
+import { isFieldInvalid as he, withoutInvalidProps as me } from "../../../internal/field-invalid.js";
+import { useScale as we, useCommitted as ye, 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 je, Rail as Ce, Fill as Fe, Marks as Me, SnapChips as Ne, Message as Te } from "../Slider/track-parts.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 qe({
+  value: n,
+  defaultValue: o,
+  onChange: G,
+  onCommit: j,
+  min: u = 0,
+  max: f = 100,
+  step: C = 1,
+  pageStep: J,
+  snapPoints: Q = [],
+  label: F,
+  helperText: M,
+  errorMessage: w,
+  disabled: s = !1,
+  name: v,
+  formatValue: y = String,
+  labels: U,
+  className: W,
+  trackClassName: X,
+  thumbClassName: Y,
+  chipClassName: Z,
+  labelClassName: _,
+  messageClassName: V,
+  "aria-invalid": ee,
+  "aria-labelledby": re,
+  "aria-describedby": te,
+  ...N
+}) {
+  const p = pe(Le, U), h = fe(), T = `${h}-label`, L = `${h}-message`, b = [`${h}-low`, `${h}-high`], S = re ?? (F ? T : void 0), l = we(u, f, C, J), R = n !== void 0, [O, P] = ge(o ?? [u, f]), D = R ? n : O, t = Oe([l.clamp(D[0]), l.clamp(D[1])]), ne = he(!!w, { ...N, "aria-invalid": ee }), K = me(N), d = ye(t), [, ie] = ve((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 m = e === 0 ? [x, c[1]] : [c[0], x];
+    d.current = m, R ? ie() : P(m), G?.(m), a && j?.(m);
+  }, z = g(null), A = g(O);
+  be(
+    z,
+    R,
+    () => {
+      d.current = A.current, P(A.current);
+    },
+    v
+  );
+  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: () => j?.(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: C,
+      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 || w ? L : 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",
+    {
+      ...K,
+      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(
+          je,
+          {
+            labelId: T,
+            label: F,
+            readout: p.range(y(t[0]), y(t[1])),
+            empty: !1,
+            disabled: s,
+            labelClassName: _
+          }
+        ),
+        /* @__PURE__ */ i("span", { id: b[0], hidden: !0, children: p.low }),
+        /* @__PURE__ */ i("span", { id: b[1], hidden: !0, children: p.high }),
+        /* @__PURE__ */ B(
+          "div",
+          {
+            ...se,
+            ref: E,
+            "data-dragging": k ? "" : void 0,
+            className: q(xe(s), X),
+            children: [
+              /* @__PURE__ */ i(Ce, {}),
+              /* @__PURE__ */ i(Fe, { 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": p.valueText(y(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: K["aria-label"],
+            pressed: (e) => e === t[0] || e === t[1],
+            pick: le,
+            disabled: s,
+            chipClassName: Z
+          }
+        ),
+        /* @__PURE__ */ i(Te, { id: L, helperText: M, errorMessage: w, disabled: s, className: V }),
+        v && /* @__PURE__ */ B(ue, { children: [
+          /* @__PURE__ */ i("input", { ref: z, type: "hidden", name: v, value: String(t[0]), disabled: s, readOnly: !0 }),
+          /* @__PURE__ */ i("input", { type: "hidden", name: v, value: String(t[1]), disabled: s, readOnly: !0 })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  qe as RangeSlider
+};

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../lib/utils.cjs"),x=require("../../atoms/Card/Card.cjs"),m=require("../../atoms/Eyebrow/Eyebrow.cjs"),c=require("../../atoms/Stat/stat-variants.cjs"),h=require("../../organisms/Table/Table.cjs"),t=require("../../atoms/Skeleton/Skeleton.cjs");function j({media:r,lines:a=3,variant:s,padding:i,className:n}){return e.jsxs(x.Card,{variant:s,padding:i,className:n,"aria-hidden":"true","data-skeleton":"card",children:[r!==void 0&&e.jsx(t.Skeleton,{shape:"block",height:r,className:"rst:mb-4"}),e.jsx(t.Skeleton,{size:"lg",width:"45%"}),a>0&&e.jsx(t.Skeleton,{size:"md",lines:a,className:"rst:mt-2"})]})}function S({columns:r,className:a}){const s=["70%","50%","60%","40%"];return e.jsx(h.TableRow,{"aria-hidden":"true",className:a,"data-skeleton":"table-row",children:Array.from({length:Math.max(1,r)},(i,n)=>e.jsx(h.TableCell,{children:e.jsx(t.Skeleton,{size:"inherit",width:s[n%s.length]})},n))})}function k({size:r="md",withName:a=!1,className:s}){return a?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:items-center rst:gap-3",s),"data-skeleton":"avatar",children:[e.jsx(t.Skeleton,{shape:"circle",size:r}),e.jsx(t.Skeleton,{size:"md",width:"8rem"})]}):e.jsx(t.Skeleton,{shape:"circle",size:r,className:s})}function w({size:r="md",semantics:a="definition",source:s=!1,className:i}){const n=c.statValueVariants({size:r,colorScheme:"neutral"}),o=e.jsx(t.Skeleton,{size:"inherit",width:"2.5em"}),d=e.jsx(m.Eyebrow,{size:"xs",children:e.jsx(t.Skeleton,{size:"inherit",width:"9em"})}),u=e.jsx("span",{className:c.statSourceClass,children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})});return a==="standalone"?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:flex-col rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("span",{className:n,children:o}),d,s&&u]}):e.jsxs("div",{"aria-hidden":"true",className:l.cn("rst:grid rst:content-start rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("dt",{className:"rst:relative rst:col-start-1 rst:row-start-2 rst:flex",children:d}),s?e.jsxs("dd",{className:l.cn("rst:m-0",n,"rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"),children:[e.jsx("span",{className:"rst:row-start-1",children:o}),e.jsx("span",{className:l.cn(c.statSourceClass,"rst:row-start-3"),children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})})]}):e.jsx("dd",{className:l.cn("rst:m-0 rst:col-start-1 rst:row-start-1",n),children:o})]})}exports.SkeletonAvatar=k;exports.SkeletonCard=j;exports.SkeletonStat=w;exports.SkeletonTableRow=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../lib/utils.cjs"),j=require("../../atoms/Card/Card.cjs"),S=require("../../atoms/Eyebrow/Eyebrow.cjs"),d=require("../../atoms/Stat/stat-variants.cjs"),u=require("../../organisms/Table/Table.cjs"),s=require("../../atoms/Skeleton/Skeleton.cjs");function k({media:a,lines:n=3,variant:r,padding:t,animation:i,className:l}){return e.jsxs(j.Card,{variant:r,padding:t,className:l,"aria-hidden":"true","data-skeleton":"card",children:[a!==void 0&&e.jsx(s.Skeleton,{shape:"block",height:a,animation:i,className:"rst:mb-4"}),e.jsx(s.Skeleton,{size:"lg",width:"45%",animation:i}),n>0&&e.jsx(s.Skeleton,{size:"md",lines:n,animation:i,className:"rst:mt-2"})]})}function m({columns:a,animation:n,className:r}){const t=["70%","50%","60%","40%"];return e.jsx(u.TableRow,{"aria-hidden":"true",className:r,"data-skeleton":"table-row",children:Array.from({length:Math.max(1,a)},(i,l)=>e.jsx(u.TableCell,{children:e.jsx(s.Skeleton,{size:"inherit",width:t[l%t.length],animation:n})},l))})}function w({size:a="md",withName:n=!1,animation:r,className:t}){return n?e.jsxs("span",{"aria-hidden":"true",className:c.cn("rst:flex rst:items-center rst:gap-3",t),"data-skeleton":"avatar",children:[e.jsx(s.Skeleton,{shape:"circle",size:a,animation:r}),e.jsx(s.Skeleton,{size:"md",width:"8rem",animation:r})]}):e.jsx(s.Skeleton,{shape:"circle",size:a,animation:r,className:t})}function p({size:a="md",semantics:n="definition",source:r=!1,animation:t,className:i}){const l=d.statValueVariants({size:a,colorScheme:"neutral"}),o=e.jsx(s.Skeleton,{size:"inherit",width:"2.5em",animation:t}),h=e.jsx(S.Eyebrow,{size:"xs",children:e.jsx(s.Skeleton,{size:"inherit",width:"9em",animation:t})}),x=e.jsx("span",{className:d.statSourceClass,children:e.jsx(s.Skeleton,{size:"inherit",width:"12em",animation:t})});return n==="standalone"?e.jsxs("span",{"aria-hidden":"true",className:c.cn("rst:flex rst:flex-col rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("span",{className:l,children:o}),h,r&&x]}):e.jsxs("div",{"aria-hidden":"true",className:c.cn("rst:grid rst:content-start rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("dt",{className:"rst:relative rst:col-start-1 rst:row-start-2 rst:flex",children:h}),r?e.jsxs("dd",{className:c.cn("rst:m-0",l,"rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"),children:[e.jsx("span",{className:"rst:row-start-1",children:o}),e.jsx("span",{className:c.cn(d.statSourceClass,"rst:row-start-3"),children:e.jsx(s.Skeleton,{size:"inherit",width:"12em",animation:t})})]}):e.jsx("dd",{className:c.cn("rst:m-0 rst:col-start-1 rst:row-start-1",l),children:o})]})}exports.SkeletonAvatar=w;exports.SkeletonCard=k;exports.SkeletonStat=p;exports.SkeletonTableRow=m;

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

@@ -1,20 +1,25 @@
 import { CSSProperties } from 'react';
 import { CardProps } from '../../atoms/Card/Card';
+import { SkeletonAnimation } from '../../atoms/Skeleton/Skeleton';
 export interface SkeletonCardProps extends Pick<CardProps, "variant" | "padding"> {
     /** A media block above the text, at this height (an image, a chart). */
     media?: CSSProperties["height"];
     /** Body lines under the title. */
     lines?: number;
+    /** How its skeletons move: see `Skeleton`. Inside a `SkeletonRegion`, the region's. */
+    animation?: SkeletonAnimation;
     className?: string;
 }
 /**
  * A Card loading. Stands in for a Card holding an optional media block (with
  * 16px below it), a `text-base` title, and `text-sm` body lines 8px under it.
  */
-declare function SkeletonCard({ media, lines, variant, padding, className }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonCard({ media, lines, variant, padding, animation, className }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
 export interface SkeletonTableRowProps {
     /** How many cells. */
     columns: number;
+    /** How its skeletons move: see `Skeleton`. Inside a `SkeletonRegion`, the region's. */
+    animation?: SkeletonAnimation;
     className?: string;
 }
 /**
@@ -22,16 +27,18 @@ export interface SkeletonTableRowProps {
  * size, each holding one line in the cell's text size. Stands in for a row of
  * one-line cells.
  */
-declare function SkeletonTableRow({ columns, className }: SkeletonTableRowProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonTableRow({ columns, animation, className }: SkeletonTableRowProps): import("react/jsx-runtime").JSX.Element;
 export interface SkeletonAvatarProps {
     /** Avatar's sizes. */
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     /** A name line beside it, in `text-sm`. */
     withName?: boolean;
+    /** How its skeletons move: see `Skeleton`. Inside a `SkeletonRegion`, the region's. */
+    animation?: SkeletonAnimation;
     className?: string;
 }
 /** An Avatar loading, and optionally the name beside it. */
-declare function SkeletonAvatar({ size, withName, className }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonAvatar({ size, withName, animation, className }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
 export interface SkeletonStatProps {
     /** Stat's sizes. */
     size?: "sm" | "md" | "lg";
@@ -43,6 +50,8 @@ export interface SkeletonStatProps {
     semantics?: "definition" | "standalone";
     /** A source line under the figure, as a Stat with `source` has. */
     source?: boolean;
+    /** How its skeletons move: see `Skeleton`. Inside a `SkeletonRegion`, the region's. */
+    animation?: SkeletonAnimation;
     className?: string;
 }
 /**
@@ -51,5 +60,5 @@ export interface SkeletonStatProps {
  * the label is the real Eyebrow, a flex item where Stat's is, so it makes the
  * same line.
  */
-declare function SkeletonStat({ size, semantics, source, className }: SkeletonStatProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonStat({ size, semantics, source, animation, className }: SkeletonStatProps): import("react/jsx-runtime").JSX.Element;
 export { SkeletonCard, SkeletonTableRow, SkeletonAvatar, SkeletonStat };

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.js

@@ -1,45 +1,45 @@
 "use client";
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { cn as n } from "../../../lib/utils.js";
-import { Card as p } from "../../atoms/Card/Card.js";
-import { Eyebrow as u } from "../../atoms/Eyebrow/Eyebrow.js";
-import { statValueVariants as f, statSourceClass as h } from "../../atoms/Stat/stat-variants.js";
-import { TableRow as w, TableCell as g } from "../../organisms/Table/Table.js";
-import { Skeleton as r } from "../../atoms/Skeleton/Skeleton.js";
-function C({ media: s, lines: a = 3, variant: e, padding: l, className: i }) {
-  return /* @__PURE__ */ o(p, { variant: e, padding: l, className: i, "aria-hidden": "true", "data-skeleton": "card", children: [
-    s !== void 0 && /* @__PURE__ */ t(r, { shape: "block", height: s, className: "rst:mb-4" }),
-    /* @__PURE__ */ t(r, { size: "lg", width: "45%" }),
-    a > 0 && /* @__PURE__ */ t(r, { size: "md", lines: a, className: "rst:mt-2" })
+import { cn as d } from "../../../lib/utils.js";
+import { Card as u } from "../../atoms/Card/Card.js";
+import { Eyebrow as f } from "../../atoms/Eyebrow/Eyebrow.js";
+import { statValueVariants as w, statSourceClass as m } from "../../atoms/Stat/stat-variants.js";
+import { TableRow as g, TableCell as k } from "../../organisms/Table/Table.js";
+import { Skeleton as e } from "../../atoms/Skeleton/Skeleton.js";
+function T({ media: a, lines: l = 3, variant: s, padding: r, animation: n, className: i }) {
+  return /* @__PURE__ */ o(u, { variant: s, padding: r, className: i, "aria-hidden": "true", "data-skeleton": "card", children: [
+    a !== void 0 && /* @__PURE__ */ t(e, { shape: "block", height: a, animation: n, className: "rst:mb-4" }),
+    /* @__PURE__ */ t(e, { size: "lg", width: "45%", animation: n }),
+    l > 0 && /* @__PURE__ */ t(e, { size: "md", lines: l, animation: n, className: "rst:mt-2" })
   ] });
 }
-function T({ columns: s, className: a }) {
-  const e = ["70%", "50%", "60%", "40%"];
-  return /* @__PURE__ */ t(w, { "aria-hidden": "true", className: a, "data-skeleton": "table-row", children: Array.from({ length: Math.max(1, s) }, (l, i) => /* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(r, { size: "inherit", width: e[i % e.length] }) }, i)) });
+function j({ columns: a, animation: l, className: s }) {
+  const r = ["70%", "50%", "60%", "40%"];
+  return /* @__PURE__ */ t(g, { "aria-hidden": "true", className: s, "data-skeleton": "table-row", children: Array.from({ length: Math.max(1, a) }, (n, i) => /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(e, { size: "inherit", width: r[i % r.length], animation: l }) }, i)) });
 }
-function j({ size: s = "md", withName: a = !1, className: e }) {
-  return a ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: n("rst:flex rst:items-center rst:gap-3", e), "data-skeleton": "avatar", children: [
-    /* @__PURE__ */ t(r, { shape: "circle", size: s }),
-    /* @__PURE__ */ t(r, { size: "md", width: "8rem" })
-  ] }) : /* @__PURE__ */ t(r, { shape: "circle", size: s, className: e });
+function y({ size: a = "md", withName: l = !1, animation: s, className: r }) {
+  return l ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: d("rst:flex rst:items-center rst:gap-3", r), "data-skeleton": "avatar", children: [
+    /* @__PURE__ */ t(e, { shape: "circle", size: a, animation: s }),
+    /* @__PURE__ */ t(e, { size: "md", width: "8rem", animation: s })
+  ] }) : /* @__PURE__ */ t(e, { shape: "circle", size: a, animation: s, className: r });
 }
-function y({ size: s = "md", semantics: a = "definition", source: e = !1, className: l }) {
-  const i = f({ size: s, colorScheme: "neutral" }), d = /* @__PURE__ */ t(r, { size: "inherit", width: "2.5em" }), c = /* @__PURE__ */ t(u, { size: "xs", children: /* @__PURE__ */ t(r, { size: "inherit", width: "9em" }) }), m = /* @__PURE__ */ t("span", { className: h, children: /* @__PURE__ */ t(r, { size: "inherit", width: "12em" }) });
-  return a === "standalone" ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: n("rst:flex rst:flex-col rst:gap-[3px]", l), "data-skeleton": "stat", children: [
-    /* @__PURE__ */ t("span", { className: i, children: d }),
-    c,
-    e && m
-  ] }) : /* @__PURE__ */ o("div", { "aria-hidden": "true", className: n("rst:grid rst:content-start rst:gap-[3px]", l), "data-skeleton": "stat", children: [
-    /* @__PURE__ */ t("dt", { className: "rst:relative rst:col-start-1 rst:row-start-2 rst:flex", children: c }),
-    e ? /* @__PURE__ */ o("dd", { className: n("rst:m-0", i, "rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"), children: [
-      /* @__PURE__ */ t("span", { className: "rst:row-start-1", children: d }),
-      /* @__PURE__ */ t("span", { className: n(h, "rst:row-start-3"), children: /* @__PURE__ */ t(r, { size: "inherit", width: "12em" }) })
-    ] }) : /* @__PURE__ */ t("dd", { className: n("rst:m-0 rst:col-start-1 rst:row-start-1", i), children: d })
+function A({ size: a = "md", semantics: l = "definition", source: s = !1, animation: r, className: n }) {
+  const i = w({ size: a, colorScheme: "neutral" }), c = /* @__PURE__ */ t(e, { size: "inherit", width: "2.5em", animation: r }), h = /* @__PURE__ */ t(f, { size: "xs", children: /* @__PURE__ */ t(e, { size: "inherit", width: "9em", animation: r }) }), p = /* @__PURE__ */ t("span", { className: m, children: /* @__PURE__ */ t(e, { size: "inherit", width: "12em", animation: r }) });
+  return l === "standalone" ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: d("rst:flex rst:flex-col rst:gap-[3px]", n), "data-skeleton": "stat", children: [
+    /* @__PURE__ */ t("span", { className: i, children: c }),
+    h,
+    s && p
+  ] }) : /* @__PURE__ */ o("div", { "aria-hidden": "true", className: d("rst:grid rst:content-start rst:gap-[3px]", n), "data-skeleton": "stat", children: [
+    /* @__PURE__ */ t("dt", { className: "rst:relative rst:col-start-1 rst:row-start-2 rst:flex", children: h }),
+    s ? /* @__PURE__ */ o("dd", { className: d("rst:m-0", i, "rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"), children: [
+      /* @__PURE__ */ t("span", { className: "rst:row-start-1", children: c }),
+      /* @__PURE__ */ t("span", { className: d(m, "rst:row-start-3"), children: /* @__PURE__ */ t(e, { size: "inherit", width: "12em", animation: r }) })
+    ] }) : /* @__PURE__ */ t("dd", { className: d("rst:m-0 rst:col-start-1 rst:row-start-1", i), children: c })
   ] });
 }
 export {
-  j as SkeletonAvatar,
-  C as SkeletonCard,
-  y as SkeletonStat,
-  T as SkeletonTableRow
+  y as SkeletonAvatar,
+  T as SkeletonCard,
+  A as SkeletonStat,
+  j as SkeletonTableRow
 };

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

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

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;