@blakesteve/roster 5.10.0 → 5.12.0

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

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+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?: ReactNode;
+    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 {};

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

@@ -0,0 +1,152 @@
+"use client";
+import { useCallback as T, useRef as k, useLayoutEffect as E, useEffect as A, useState as S } from "react";
+import { cn as I } from "../../../lib/utils.js";
+const P = 22, Y = 5, z = (t, s = P) => `calc(${s}px + (100% - ${2 * s}px) * ${t})`, D = (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 B(t, s, n, c) {
+  const a = Math.max(D(n), D(t)), i = T((g) => Math.min(s, Math.max(t, g)), [t, s]), l = T(
+    (g, M = 0) => {
+      const h = (g - t) / n, y = Math.round(h), R = M === 0 || Math.abs(h - y) < 1e-6 ? y : M > 0 ? Math.floor(h) : Math.ceil(h);
+      return i(Number((t + R * n).toFixed(a)));
+    },
+    [t, n, a, i]
+  ), x = T((g) => s === t ? 0 : (g - t) / (s - t), [t, s]);
+  return { clamp: i, snap: l, at: x, coarse: c ?? Math.max(n, l(t + (s - t) / 10) - t) };
+}
+function O(t, s, n) {
+  if (t.defaultPrevented || t.altKey || t.ctrlKey || t.metaKey) return;
+  const c = (i) => Math.min(n.ceiling, Math.max(n.floor, i)), a = (i) => s === null ? n.start : c(n.scale.snap(s + i, i > 0 ? 1 : -1));
+  switch (t.key) {
+    case (n.rtl ? "ArrowLeft" : "ArrowRight"):
+    case "ArrowUp":
+      return a(n.step);
+    case (n.rtl ? "ArrowRight" : "ArrowLeft"):
+    case "ArrowDown":
+      return a(-n.step);
+    case "PageUp":
+      return a(n.scale.coarse);
+    case "PageDown":
+      return a(-n.scale.coarse);
+    case "Home":
+      return n.floor;
+    case "End":
+      return n.ceiling;
+    default:
+      return;
+  }
+}
+function j(t) {
+  const [s, n] = S(!1), c = k(null), a = () => !!t.trackRef.current && getComputedStyle(t.trackRef.current).direction === "rtl", i = () => t.trackRef.current.getBoundingClientRect(), l = (r) => {
+    const e = i();
+    let o = (r - e.left - P) / Math.max(1, e.width - 2 * P);
+    return o = Math.min(1, Math.max(0, o)), a() && (o = 1 - o), t.scale.snap(t.min + o * (t.max - t.min));
+  }, x = (r) => {
+    const e = i();
+    return e.left + P + (e.width - 2 * P) * (a() ? 1 - t.scale.at(r) : t.scale.at(r));
+  }, g = (r) => t.values().some((e, o) => e !== r[o]), M = (r, e) => {
+    try {
+      r.setPointerCapture(e);
+    } catch {
+    }
+    n(!0);
+  }, h = (r, e, o) => {
+    const f = c.current;
+    !f || f.id !== e || (c.current = null, f.mode === "drag" && (n(!1), r.hasPointerCapture(e) && r.releasePointerCapture(e), o && g(f.from) && t.commit()));
+  }, y = (r, e) => {
+    if (r.thumb !== "either") return r.thumb;
+    const o = t.values()[r.tied[0]];
+    if (e !== o)
+      return r.thumb = e > o ? r.tied[r.tied.length - 1] : r.tied[0], t.focus(r.thumb), r.thumb;
+  };
+  return { dragging: s, rtl: a, handlers: { onPointerDown: (r) => {
+    if (t.own.down?.(r), t.disabled || r.button !== 0) return;
+    if (c.current) {
+      if (!r.isPrimary) return;
+      h(r.currentTarget, c.current.id, !1);
+    }
+    r.preventDefault();
+    const e = r.currentTarget, o = t.values(), f = o.map((u, C) => ({ v: u, i: C })).filter((u) => u.v !== null), b = (u) => Math.abs(r.clientX - x(u)), d = f.reduce((u, C) => !u || b(C.v) < b(u.v) ? C : u, void 0), m = !!d && b(d.v) <= P, p = d ? f.filter((u) => u.v === d.v).map((u) => u.i) : [0];
+    let w = d ? d.i : 0;
+    if (p.length > 1) {
+      const u = l(r.clientX);
+      w = m ? "either" : u < d.v ? p[0] : p[p.length - 1];
+    }
+    const L = m ? x(d.v) - r.clientX : 0, X = { id: r.pointerId, x: r.clientX, y: r.clientY, thumb: w, tied: p, grab: L, from: o };
+    if (r.pointerType === "mouse" || m) {
+      t.focus(w === "either" ? p[0] : w), c.current = { ...X, mode: "drag" }, M(e, r.pointerId), !m && w !== "either" && t.set(w, 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 b = Math.abs(r.clientX - e.x), d = Math.abs(r.clientY - e.y);
+      if (b > 7 && b > d) {
+        e.mode = "drag", M(r.currentTarget, r.pointerId);
+        const m = y(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 o = l(r.clientX + e.grab), f = y(e, o);
+    f !== void 0 && t.set(f, o, !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;
+    }
+    h(r.currentTarget, r.pointerId, !0);
+  }, onPointerCancel: (r) => {
+    t.own.cancel?.(r), h(r.currentTarget, r.pointerId, !0);
+  }, onLostPointerCapture: (r) => {
+    t.own.lost?.(r), r.target === r.currentTarget && h(r.currentTarget, r.pointerId, !0);
+  } } };
+}
+function q(t) {
+  const s = k(t);
+  return E(() => {
+    s.current = t;
+  }), s;
+}
+function G(t, s, n, c) {
+  const a = k(n);
+  A(() => {
+    a.current = n;
+  }), A(() => {
+    const i = t.current?.form;
+    if (!i || s) return;
+    const l = () => a.current();
+    return i.addEventListener("reset", l), () => i.removeEventListener("reset", l);
+  }, [t, s, c]);
+}
+const J = (t, s, n) => t.filter((c) => c.value >= s && c.value <= n).sort((c, a) => c.value - a.value), Q = (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]), V = (t) => I(
+  "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"
+), W = (t, s, n) => I(
+  "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
+);
+export {
+  Y as CAP,
+  P as INSET,
+  z as along,
+  J as inRange,
+  O as keyTarget,
+  Q as nearestPoint,
+  W as thumbClasses,
+  V as trackClasses,
+  q as useCommitted,
+  G as useFormReset,
+  B as useScale,
+  j as useTrackPress
+};

package/dist/components/organisms/Dialog/Dialog.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),j=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),w=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),o=require("../../../node_modules/class-variance-authority/dist/index.cjs"),s=require("../../../lib/utils.cjs"),N=require("../../../lib/labels.cjs"),_=require("../../../internal/page-inert.cjs"),a=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),q=o.cva("rst:relative rst:w-full rst:transform rst:overflow-hidden rst:rounded-2xl rst:p-6 rst:text-left rst:align-middle rst:elevation-overlay rst:transition-all rst:border",{variants:{size:{xs:"rst:max-w-xs",sm:"rst:max-w-sm",md:"rst:max-w-md",lg:"rst:max-w-lg",xl:"rst:max-w-xl","2xl":"rst:max-w-2xl","3xl":"rst:max-w-3xl",full:"rst:max-w-[95vw] rst:m-4"},variant:{white:"rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]",slate:"rst:bg-gray-700 rst:border-gray-600 rst:text-gray-100 rst:dark:bg-gray-900 rst:dark:border-gray-800 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-gray-700,#44403c)] rst:dark:[--roster-ring-offset:var(--roster-gray-900,#1c1917)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",primary:"rst:bg-primary-700 rst:border-primary-600 rst:text-primary-700-ink rst:dark:text-white rst:dark:bg-primary-950 rst:dark:border-primary-900 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-primary-700,#084063)] rst:dark:[--roster-ring-offset:var(--roster-primary-950,#021724)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",glass:"rst:bg-white/80 rst:border-white/20 rst:backdrop-blur-xl rst:text-gray-900 rst:dark:bg-slate-900/80 rst:dark:border-slate-700/50 rst:dark:text-white"},status:{default:"",destructive:"rst:border-t-4 rst:border-t-error-500",success:"rst:border-t-4 rst:border-t-success-500"}},defaultVariants:{size:"md",variant:"white",status:"default"}}),F=o.cva("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"),T=o.cva("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"),D=o.cva("rst:inline-flex rst:size-11 rst:shrink-0 rst:items-center rst:justify-center rst:-m-3 rst:cursor-pointer rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-50 rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:transition-opacity"),L={close:"Close dialog"},V=({isOpen:u,onClose:i,title:m,description:n,size:x,variant:l,status:b,children:g,className:f,onAfterClose:v,labels:p})=>{const y=N.withLabels(L,p),[h,k]=t.useState(!1);t.useLayoutEffect(()=>{k(!0)},[]);const e=u&&h,c=t.useRef(null);return t.useLayoutEffect(()=>{if(e)return _.lockPage(c.current)},[e]),r.jsxs(r.Fragment,{children:[e&&r.jsx("span",{ref:c,hidden:!0}),r.jsxs(a.Dialog,{open:e,as:"div",className:"rst:font-ui rst:relative rst:z-50",onClose:i,children:[r.jsx(d.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0",enterTo:"rst:opacity-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:r.jsx(a.DialogBackdrop,{className:s.cn("rst:fixed rst:inset-0 rst:transition-opacity",l==="glass"?"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_40%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_60%,transparent))]":"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_60%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_80%,transparent))] rst:backdrop-blur-backdrop")})}),r.jsx("div",{className:"rst:fixed rst:inset-0 rst:overflow-y-auto",children:r.jsx("div",{className:"rst:flex rst:min-h-full rst:items-center rst:justify-center rst:p-4 rst:text-center",children:r.jsx(d.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0 rst:scale-95",enterTo:"rst:opacity-100 rst:scale-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100 rst:scale-100",leaveTo:"rst:opacity-0 rst:scale-95",afterLeave:v,children:r.jsxs(a.DialogPanel,{className:s.cn(q({size:x,variant:l,status:b}),f),children:[r.jsxs("div",{className:"rst:flex rst:items-start rst:justify-between",children:[r.jsxs("div",{children:[r.jsx(a.DialogTitle,{as:"h2",className:s.cn(F()),children:m}),n&&r.jsx("p",{className:s.cn(T()),children:n})]}),r.jsx("div",{className:"rst:ml-4 rst:flex rst:shrink-0",children:r.jsx("button",{type:"button",onClick:i,className:s.cn(D()),"aria-label":y.close,children:r.jsx(j.FontAwesomeIcon,{icon:w.faXmark,className:"rst:h-5 rst:w-5"})})})]}),r.jsx("div",{className:"rst:mt-6",children:g})]})})})})]})]})};exports.Dialog=V;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),j=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),w=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),o=require("../../../node_modules/class-variance-authority/dist/index.cjs"),s=require("../../../lib/utils.cjs"),N=require("../../../lib/labels.cjs"),_=require("../../../internal/page-inert.cjs"),q=require("../../../internal/key-focus.cjs"),a=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),F=o.cva("rst:relative rst:w-full rst:transform rst:overflow-hidden rst:rounded-2xl rst:p-6 rst:text-left rst:align-middle rst:elevation-overlay rst:transition-all rst:border",{variants:{size:{xs:"rst:max-w-xs",sm:"rst:max-w-sm",md:"rst:max-w-md",lg:"rst:max-w-lg",xl:"rst:max-w-xl","2xl":"rst:max-w-2xl","3xl":"rst:max-w-3xl",full:"rst:max-w-[95vw] rst:m-4"},variant:{white:"rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]",slate:"rst:bg-gray-700 rst:border-gray-600 rst:text-gray-100 rst:dark:bg-gray-900 rst:dark:border-gray-800 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-gray-700,#44403c)] rst:dark:[--roster-ring-offset:var(--roster-gray-900,#1c1917)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",primary:"rst:bg-primary-700 rst:border-primary-600 rst:text-primary-700-ink rst:dark:text-white rst:dark:bg-primary-950 rst:dark:border-primary-900 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-primary-700,#084063)] rst:dark:[--roster-ring-offset:var(--roster-primary-950,#021724)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",glass:"rst:bg-white/80 rst:border-white/20 rst:backdrop-blur-xl rst:text-gray-900 rst:dark:bg-slate-900/80 rst:dark:border-slate-700/50 rst:dark:text-white"},status:{default:"",destructive:"rst:border-t-4 rst:border-t-error-500",success:"rst:border-t-4 rst:border-t-success-500"}},defaultVariants:{size:"md",variant:"white",status:"default"}}),T=o.cva("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"),D=o.cva("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"),L=o.cva("rst:inline-flex rst:size-11 rst:shrink-0 rst:items-center rst:justify-center rst:-m-3 rst:cursor-pointer rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-50 rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:transition-opacity"),V={close:"Close dialog"},z=({isOpen:u,onClose:i,title:m,description:n,size:x,variant:l,status:b,children:g,className:f,onAfterClose:v,labels:p})=>{q.useKeyFocus();const y=N.withLabels(V,p),[h,k]=t.useState(!1);t.useLayoutEffect(()=>{k(!0)},[]);const e=u&&h,c=t.useRef(null);return t.useLayoutEffect(()=>{if(e)return _.lockPage(c.current)},[e]),r.jsxs(r.Fragment,{children:[e&&r.jsx("span",{ref:c,hidden:!0}),r.jsxs(a.Dialog,{open:e,as:"div",className:"rst:font-ui rst:relative rst:z-50",onClose:i,children:[r.jsx(d.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0",enterTo:"rst:opacity-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:r.jsx(a.DialogBackdrop,{className:s.cn("rst:fixed rst:inset-0 rst:transition-opacity",l==="glass"?"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_40%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_60%,transparent))]":"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_60%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_80%,transparent))] rst:backdrop-blur-backdrop")})}),r.jsx("div",{className:"rst:fixed rst:inset-0 rst:overflow-y-auto",children:r.jsx("div",{className:"rst:flex rst:min-h-full rst:items-center rst:justify-center rst:p-4 rst:text-center",children:r.jsx(d.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0 rst:scale-95",enterTo:"rst:opacity-100 rst:scale-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100 rst:scale-100",leaveTo:"rst:opacity-0 rst:scale-95",afterLeave:v,children:r.jsxs(a.DialogPanel,{className:s.cn(F({size:x,variant:l,status:b}),f),children:[r.jsxs("div",{className:"rst:flex rst:items-start rst:justify-between",children:[r.jsxs("div",{children:[r.jsx(a.DialogTitle,{as:"h2",className:s.cn(T()),children:m}),n&&r.jsx("p",{className:s.cn(D()),children:n})]}),r.jsx("div",{className:"rst:ml-4 rst:flex rst:shrink-0",children:r.jsx("button",{type:"button",onClick:i,className:s.cn(L()),"aria-label":y.close,children:r.jsx(j.FontAwesomeIcon,{icon:w.faXmark,className:"rst:h-5 rst:w-5"})})})]}),r.jsx("div",{className:"rst:mt-6",children:g})]})})})})]})]})};exports.Dialog=z;

package/dist/components/organisms/Dialog/Dialog.js

@@ -7,9 +7,10 @@ import { cva as a } from "../../../node_modules/class-variance-authority/dist/in
 import { cn as s } from "../../../lib/utils.js";
 import { withLabels as j } from "../../../lib/labels.js";
 import { lockPage as z } from "../../../internal/page-inert.js";
-import { Dialog as D, DialogBackdrop as V, DialogPanel as A, DialogTitle as B } from "../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js";
+import { useKeyFocus as D } from "../../../internal/key-focus.js";
+import { Dialog as V, DialogBackdrop as A, DialogPanel as B, DialogTitle as C } from "../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js";
 import { TransitionChild as m } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-const C = /* @__PURE__ */ a(
+const E = /* @__PURE__ */ a(
   "rst:relative rst:w-full rst:transform rst:overflow-hidden rst:rounded-2xl rst:p-6 rst:text-left rst:align-middle rst:elevation-overlay rst:transition-all rst:border",
   {
     variants: {
@@ -78,9 +79,9 @@ const C = /* @__PURE__ */ a(
       status: "default"
     }
   }
-), E = /* @__PURE__ */ a("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"), P = /* @__PURE__ */ a("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"), R = /* @__PURE__ */ a(
+), P = /* @__PURE__ */ a("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"), R = /* @__PURE__ */ a("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"), S = /* @__PURE__ */ a(
   "rst:inline-flex rst:size-11 rst:shrink-0 rst:items-center rst:justify-center rst:-m-3 rst:cursor-pointer rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-50 rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:transition-opacity"
-), S = { close: "Close dialog" }, K = ({
+), I = { close: "Close dialog" }, W = ({
   isOpen: f,
   onClose: o,
   title: p,
@@ -88,12 +89,13 @@ const C = /* @__PURE__ */ a(
   size: b,
   variant: n,
   status: g,
-  children: v,
-  className: u,
+  children: u,
+  className: v,
   onAfterClose: x,
   labels: y
 }) => {
-  const h = j(S, y), [k, w] = _(!1);
+  D();
+  const h = j(I, y), [k, w] = _(!1);
   c(() => {
     w(!0);
   }, []);
@@ -104,7 +106,7 @@ const C = /* @__PURE__ */ a(
   }, [e]), /* @__PURE__ */ t(N, { children: [
     e && /* @__PURE__ */ r("span", { ref: l, hidden: !0 }),
     /* @__PURE__ */ t(
-      D,
+      V,
       {
         open: e,
         as: "div",
@@ -122,7 +124,7 @@ const C = /* @__PURE__ */ a(
               leaveFrom: "rst:opacity-100",
               leaveTo: "rst:opacity-0",
               children: /* @__PURE__ */ r(
-                V,
+                A,
                 {
                   className: s(
                     "rst:fixed rst:inset-0 rst:transition-opacity",
@@ -144,30 +146,30 @@ const C = /* @__PURE__ */ a(
               leaveTo: "rst:opacity-0 rst:scale-95",
               afterLeave: x,
               children: /* @__PURE__ */ t(
-                A,
+                B,
                 {
                   className: s(
-                    C({ size: b, variant: n, status: g }),
-                    u
+                    E({ size: b, variant: n, status: g }),
+                    v
                   ),
                   children: [
                     /* @__PURE__ */ t("div", { className: "rst:flex rst:items-start rst:justify-between", children: [
                       /* @__PURE__ */ t("div", { children: [
-                        /* @__PURE__ */ r(B, { as: "h2", className: s(E()), children: p }),
-                        i && /* @__PURE__ */ r("p", { className: s(P()), children: i })
+                        /* @__PURE__ */ r(C, { as: "h2", className: s(P()), children: p }),
+                        i && /* @__PURE__ */ r("p", { className: s(R()), children: i })
                       ] }),
                       /* @__PURE__ */ r("div", { className: "rst:ml-4 rst:flex rst:shrink-0", children: /* @__PURE__ */ r(
                         "button",
                         {
                           type: "button",
                           onClick: o,
-                          className: s(R()),
+                          className: s(S()),
                           "aria-label": h.close,
                           children: /* @__PURE__ */ r(L, { icon: T, className: "rst:h-5 rst:w-5" })
                         }
                       ) })
                     ] }),
-                    /* @__PURE__ */ r("div", { className: "rst:mt-6", children: v })
+                    /* @__PURE__ */ r("div", { className: "rst:mt-6", children: u })
                   ]
                 }
               )
@@ -179,5 +181,5 @@ const C = /* @__PURE__ */ a(
   ] });
 };
 export {
-  K as Dialog
+  W as Dialog
 };