@blakesteve/roster 5.1.0 → 5.2.0

package/dist/components/molecules/Carousel/Carousel.js

@@ -0,0 +1,363 @@
+"use client";
+import { jsxs as y, jsx as c, Fragment as $t } from "react/jsx-runtime";
+import * as n from "react";
+import { Button as Bt } from "../../atoms/Button/Button.js";
+import { cn as w } from "../../../lib/utils.js";
+import { prefersReducedMotion as Ht } from "../../../internal/motion.js";
+import { currentIndex as jt, canScrollNext as zt, canScrollPrev as Ut, overflows as Vt, pageTarget as Wt, snapPosition as U, nearestIndex as qt, CAROUSEL_DRAG_THRESHOLD as Xt } from "./carousel-math.js";
+import { perViewVars as Gt, FLUID_ITEM_WIDTH as Jt, FLUID_CLASSES as Kt } from "./carousel-layout.js";
+const Qt = (a) => Math.min(3e3, 500 + a * 0.35), Yt = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])', V = (a) => typeof a == "number" ? `${a}px` : a;
+function nt(a) {
+  const d = parseFloat(a);
+  return Number.isFinite(d) ? d : 0;
+}
+const Zt = "rst:hidden rst:[@media(any-hover:hover)]:inline-flex", te = "rst:hidden rst:[@media(any-hover:hover)]:flex";
+function st({ direction: a }) {
+  return /* @__PURE__ */ c(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      viewBox: "0 0 20 20",
+      className: "rst:h-5 rst:w-5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ c("path", { d: a === "prev" ? "M12.5 4.5 7 10l5.5 5.5" : "M7.5 4.5 13 10l-5.5 5.5" })
+    }
+  );
+}
+const ot = {
+  overflowing: null,
+  canScrollPrev: !1,
+  canScrollNext: !1,
+  index: 0
+}, ce = n.forwardRef(function({
+  "aria-label": d,
+  "aria-labelledby": N,
+  children: W,
+  itemWidth: I,
+  perView: R,
+  gap: q = 12,
+  gutter: X = 16,
+  bleed: lt = !1,
+  snap: L = "start",
+  snapStrictness: ct = "mandatory",
+  oneAtATime: at = !1,
+  arrows: P = "hover",
+  arrowPlacement: M = "controls",
+  renderArrows: T,
+  prevLabel: it,
+  nextLabel: ut,
+  prevIcon: dt,
+  nextIcon: ft,
+  arrowButtonProps: gt,
+  fade: vt = !1,
+  scrollbar: pt = !1,
+  showPosition: G = !1,
+  onIndexChange: J,
+  onScrollStateChange: K,
+  itemClassName: mt,
+  listClassName: bt,
+  className: xt,
+  style: ht,
+  ...St
+}, yt) {
+  const f = n.useRef(null), Q = `${n.useId()}-list`, Y = n.Children.toArray(W), E = Y.length, [o, wt] = n.useState(ot), Z = n.useRef(ot), [Nt, It] = n.useState(""), [Tt, Et] = n.useState(!1), D = n.useRef({ onIndexChange: J, onScrollStateChange: K });
+  n.useEffect(() => {
+    D.current = { onIndexChange: J, onScrollStateChange: K };
+  });
+  const i = n.useCallback(() => {
+    const t = f.current;
+    if (!t) return null;
+    const e = t.getBoundingClientRect(), r = getComputedStyle(t), s = e.left + t.clientLeft - t.scrollLeft;
+    return {
+      items: Array.from(t.children).map((u) => {
+        const p = u.getBoundingClientRect();
+        return { start: p.left - s, end: p.right - s };
+      }),
+      scrollLeft: t.scrollLeft,
+      clientWidth: t.clientWidth,
+      scrollWidth: t.scrollWidth,
+      paddingStart: nt(r.scrollPaddingInlineStart || r.scrollPaddingLeft),
+      paddingEnd: nt(r.scrollPaddingInlineEnd || r.scrollPaddingRight),
+      align: L
+    };
+  }, [L]), m = n.useCallback(() => {
+    const t = i();
+    if (!t) return;
+    const e = {
+      overflowing: Vt(t),
+      canScrollPrev: Ut(t),
+      canScrollNext: zt(t),
+      index: t.items.length ? jt(t) : 0
+    }, r = Z.current;
+    r.overflowing === e.overflowing && r.canScrollPrev === e.canScrollPrev && r.canScrollNext === e.canScrollNext && r.index === e.index || (Z.current = e, wt(e), r.index !== e.index && D.current.onIndexChange?.(e.index), (r.canScrollPrev !== e.canScrollPrev || r.canScrollNext !== e.canScrollNext) && D.current.onScrollStateChange?.({
+      canScrollPrev: e.canScrollPrev,
+      canScrollNext: e.canScrollNext
+    }));
+  }, [i]), Ct = JSON.stringify([q, X, I, R]);
+  n.useLayoutEffect(() => {
+    const t = f.current;
+    if (!t) return;
+    m();
+    let e = 0;
+    const r = () => {
+      e || (e = requestAnimationFrame(() => {
+        e = 0, m();
+      }));
+    };
+    t.addEventListener("scroll", r, { passive: !0 });
+    const s = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => m()), l = () => {
+      s?.observe(t), Array.from(t.children).forEach((p) => s?.observe(p));
+    };
+    l();
+    const u = typeof MutationObserver > "u" ? null : new MutationObserver(() => {
+      l(), m();
+    });
+    return u?.observe(t, { childList: !0 }), () => {
+      t.removeEventListener("scroll", r), s?.disconnect(), u?.disconnect(), e && cancelAnimationFrame(e);
+    };
+  }, [m, E, Ct]), n.useLayoutEffect(() => {
+    const t = f.current;
+    if (t && (Et(!t.querySelector(Yt)), N)) {
+      const e = N.split(/\s+/).map((r) => document.getElementById(r)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
+      It(e);
+    }
+  }, [W, N]);
+  const b = n.useRef(null), g = n.useCallback(() => {
+    const t = f.current, e = b.current;
+    e && (b.current = null, window.clearTimeout(e.timer), t?.removeEventListener("scrollend", e.done), t && (t.style.scrollSnapType = "", delete t.dataset.settling));
+  }, []), v = n.useCallback(
+    (t, e) => {
+      const r = f.current;
+      if (!r) return;
+      if (g(), e !== "smooth" || Ht() || Math.abs(r.scrollLeft - t) < 1) {
+        r.style.scrollSnapType = "none", r.scrollTo({ left: t, behavior: "instant" }), r.style.scrollSnapType = "";
+        return;
+      }
+      r.style.scrollSnapType = "none", r.dataset.settling = "";
+      const l = () => g();
+      b.current = {
+        timer: window.setTimeout(l, Qt(Math.abs(r.scrollLeft - t))),
+        done: l,
+        target: t
+      }, r.addEventListener("scrollend", l, { once: !0 }), r.scrollTo({ left: t, behavior: "smooth" });
+    },
+    [g]
+  ), C = n.useCallback(
+    (t) => {
+      const e = i();
+      if (!e) return;
+      const r = b.current ? { ...e, scrollLeft: b.current.target } : e;
+      v(Wt(r, t), "smooth");
+    },
+    [i, v]
+  );
+  n.useImperativeHandle(
+    yt,
+    () => ({
+      scrollToIndex: (t, e) => {
+        const r = i();
+        if (!r || !r.items.length) return;
+        const s = Math.min(Math.max(0, Math.round(t)), r.items.length - 1);
+        v(U(r, s), e?.behavior ?? "smooth");
+      },
+      scrollPrev: () => C(-1),
+      scrollNext: () => C(1)
+    }),
+    [i, C, v]
+  ), n.useEffect(() => g, [g]);
+  const O = n.useRef(null), A = n.useRef(null), F = n.useRef(null);
+  n.useLayoutEffect(() => {
+    const t = F.current;
+    if (!t) return;
+    const e = t === "prev" ? O.current : A.current, r = t === "prev" ? A.current : O.current, s = t === "prev" ? !o.canScrollPrev : !o.canScrollNext, l = document.activeElement;
+    s && (l !== e && l !== document.body && l !== null || r && !r.disabled && r.focus());
+  }, [o.canScrollPrev, o.canScrollNext]);
+  const x = n.useRef(null), h = n.useRef(!1), kt = (t) => {
+    t.pointerType !== "mouse" || t.button !== 0 || o.overflowing && (g(), h.current = !1, x.current = {
+      pointerId: t.pointerId,
+      x0: t.clientX,
+      scroll0: t.currentTarget.scrollLeft,
+      dragging: !1
+    });
+  }, Rt = (t) => {
+    const e = x.current;
+    if (!e || t.pointerId !== e.pointerId) return;
+    const r = t.currentTarget, s = t.clientX - e.x0;
+    if (!e.dragging) {
+      if (Math.abs(s) <= Xt) return;
+      e.dragging = !0, r.dataset.dragging = "", r.style.scrollSnapType = "none", window.getSelection?.()?.removeAllRanges();
+      try {
+        r.setPointerCapture(t.pointerId);
+      } catch {
+      }
+    }
+    r.scrollLeft = e.scroll0 - s;
+  }, _ = (t) => {
+    const e = x.current;
+    if (!e || t.pointerId !== e.pointerId || (x.current = null, !e.dragging)) return;
+    const r = t.currentTarget;
+    delete r.dataset.dragging, h.current = t.type === "pointerup", window.setTimeout(() => {
+      h.current = !1;
+    }, 0);
+    const s = i();
+    s ? v(U(s, qt(s)), "smooth") : r.style.scrollSnapType = "";
+  }, Lt = (t) => {
+    !h.current || t.detail === 0 || (h.current = !1, t.preventDefault(), t.stopPropagation());
+  }, Pt = (t) => {
+    o.overflowing && t.preventDefault();
+  }, Mt = (t) => {
+    const e = t.currentTarget, r = t.target;
+    if (r === e || x.current?.dragging) return;
+    let s = !1;
+    try {
+      s = r.matches(":focus-visible");
+    } catch {
+      s = !1;
+    }
+    if (!s) return;
+    const l = r.closest("[data-carousel-item]");
+    if (!l || l.parentElement !== e) return;
+    const u = i();
+    if (!u) return;
+    const p = Array.prototype.indexOf.call(e.children, l);
+    v(U(u, p), "instant");
+  }, [Dt, Ot] = n.useState(0);
+  n.useEffect(() => {
+    const t = window.setTimeout(() => Ot(o.index), 150);
+    return () => window.clearTimeout(t);
+  }, [o.index]);
+  const tt = d ?? Nt, et = (t) => tt ? `${t} ${tt}` : t, $ = P !== "none" && o.overflowing !== !1, At = P === "hover" ? Zt : "rst:inline-flex", rt = (t) => {
+    const e = t === "prev", { className: r, ...s } = gt ?? {};
+    return /* @__PURE__ */ c(
+      Bt,
+      {
+        type: "button",
+        variant: "outline",
+        colorScheme: "neutral",
+        size: "icon",
+        ...s,
+        "aria-label": e ? it ?? et("Previous") : ut ?? et("Next"),
+        "aria-controls": Q,
+        disabled: e ? !o.canScrollPrev : !o.canScrollNext,
+        onClick: () => C(e ? -1 : 1),
+        ref: e ? O : A,
+        onFocus: () => {
+          F.current = t;
+        },
+        onBlur: (l) => {
+          l.relatedTarget && (F.current = null);
+        },
+        "data-carousel-arrow": t,
+        className: w(
+          /* 44px, the target size, whatever the Button's own icon size is. */
+          "rst:size-11 rst:shrink-0 rst:rounded-full",
+          /* Over the row, a disabled arrow would sit on top of the first or
+             last item for nothing, so it hides. Hidden is also out of the tab
+             order and the accessibility tree, as disabled already was. */
+          M === "overlay" && !T && "rst:bg-[var(--roster-popover-bg)] rst:elevation-raised rst:hover:bg-[var(--roster-popover-bg)] rst:disabled:invisible",
+          At,
+          r
+        ),
+        children: e ? dt ?? /* @__PURE__ */ c(st, { direction: "prev" }) : ft ?? /* @__PURE__ */ c(st, { direction: "next" })
+      }
+    );
+  }, k = $ ? rt("prev") : null, B = $ ? rt("next") : null, S = G && E ? (
+    /* `font-ui` here and not on the root: the readout is the only text the
+       carousel owns. The items are the host's content, and not Roster's to
+       restyle. */
+    /* @__PURE__ */ y("p", { "aria-live": "polite", className: "rst:font-ui rst:m-0 rst:text-sm rst:tabular-nums rst:opacity-75", "data-carousel-position": "", children: [
+      Dt + 1,
+      " of ",
+      E
+    ] })
+  ) : null;
+  let H = null;
+  T ? H = T({ prev: k, next: B, position: S }) : M === "controls" && (k || S) && (H = /* @__PURE__ */ y(
+    "div",
+    {
+      className: w(
+        "rst:mb-2 rst:items-center rst:justify-end rst:gap-2",
+        /* A line with only arrows in it takes no room where they can't show. */
+        !S && P === "hover" ? te : "rst:flex"
+      ),
+      "data-carousel-controls": "",
+      children: [
+        S && /* @__PURE__ */ c("div", { className: "rst:mr-auto", children: S }),
+        k,
+        B
+      ]
+    }
+  ));
+  const j = vt && o.overflowing && (o.canScrollPrev || o.canScrollNext) ? `linear-gradient(to right, ${o.canScrollPrev ? "transparent, black 48px" : "black"}, ${o.canScrollNext ? "black calc(100% - 48px), transparent" : "black"})` : void 0, z = I === void 0 && R !== void 0, Ft = {
+    "--rst-cv-gap": V(q),
+    "--rst-cv-gutter": V(X),
+    ...z ? Gt(R) : {},
+    ...j ? { maskImage: j, WebkitMaskImage: j } : {}
+  }, _t = I !== void 0 ? { width: V(I) } : z ? { width: Jt } : void 0;
+  return /* @__PURE__ */ y("div", { className: w("rst:min-w-0", xt), style: ht, ...St, children: [
+    H,
+    /* @__PURE__ */ y("div", { className: "rst:relative", children: [
+      /* @__PURE__ */ c(
+        "ul",
+        {
+          ref: f,
+          id: Q,
+          role: "list",
+          "aria-label": d,
+          "aria-labelledby": d ? void 0 : N,
+          tabIndex: Tt && o.overflowing ? 0 : void 0,
+          "data-overflowing": o.overflowing ? "" : void 0,
+          onPointerDown: kt,
+          onPointerMove: Rt,
+          onPointerUp: _,
+          onPointerCancel: _,
+          onLostPointerCapture: _,
+          onClickCapture: Lt,
+          onDragStart: Pt,
+          onFocus: Mt,
+          style: Ft,
+          className: w(
+            "rst:m-0 rst:flex rst:list-none rst:overflow-x-auto rst:overflow-y-hidden",
+            "rst:gap-(--rst-cv-gap) rst:px-(--rst-cv-gutter) rst:py-1 rst:scroll-px-(--rst-cv-gutter)",
+            "rst:overscroll-x-contain",
+            ct === "mandatory" ? "rst:snap-x rst:snap-mandatory" : "rst:snap-x rst:snap-proximity",
+            lt && "rst:-mx-(--rst-cv-gutter)",
+            !pt && "rst:[scrollbar-width:none] rst:[&::-webkit-scrollbar]:hidden",
+            z && Kt,
+            "rst:data-overflowing:cursor-grab rst:data-dragging:cursor-grabbing rst:data-dragging:select-none",
+            "rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-inset",
+            bt
+          ),
+          children: Y.map((t, e) => /* @__PURE__ */ c(
+            "li",
+            {
+              "data-carousel-item": "",
+              "aria-label": G ? `${e + 1} of ${E}` : void 0,
+              style: _t,
+              className: w(
+                "rst:shrink-0",
+                L === "start" ? "rst:snap-start" : "rst:snap-center",
+                at && "rst:snap-always",
+                mt
+              ),
+              children: t
+            },
+            n.isValidElement(t) && t.key != null ? t.key : e
+          ))
+        }
+      ),
+      !T && M === "overlay" && $ && /* @__PURE__ */ y($t, { children: [
+        /* @__PURE__ */ c("div", { className: "rst:pointer-events-none rst:absolute rst:inset-y-0 rst:start-1 rst:flex rst:items-center", children: /* @__PURE__ */ c("div", { className: "rst:pointer-events-auto", children: k }) }),
+        /* @__PURE__ */ c("div", { className: "rst:pointer-events-none rst:absolute rst:inset-y-0 rst:end-1 rst:flex rst:items-center", children: /* @__PURE__ */ c("div", { className: "rst:pointer-events-auto", children: B }) })
+      ] })
+    ] })
+  ] });
+});
+export {
+  ce as Carousel
+};

package/dist/components/molecules/Carousel/carousel-layout.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=["base","sm","md","lg","xl"];function o(t){const r=Math.ceil(t)-1;return`calc((100% + ${Number.isInteger(t)?0:1} * var(--rst-cv-gutter) - ${r} * var(--rst-cv-gap)) / ${t})`}function n(t){const r=typeof t=="number"?{base:t}:t,s={};let c;for(const v of a){const e=r[v];e!==void 0&&e>0&&(c=e),c!==void 0&&(s[`--rst-cv-w-${v}`]=o(c))}return s}const i="var(--rst-cv-w)",l="rst:[--rst-cv-w:var(--rst-cv-w-base)] rst:sm:[--rst-cv-w:var(--rst-cv-w-sm)] rst:md:[--rst-cv-w:var(--rst-cv-w-md)] rst:lg:[--rst-cv-w:var(--rst-cv-w-lg)] rst:xl:[--rst-cv-w:var(--rst-cv-w-xl)]";exports.BREAKPOINTS=a;exports.FLUID_CLASSES=l;exports.FLUID_ITEM_WIDTH=i;exports.fluidItemWidth=o;exports.perViewVars=n;

package/dist/components/molecules/Carousel/carousel-layout.d.ts

@@ -0,0 +1,23 @@
+import { CarouselPerView } from './Carousel';
+/**
+ * Fluid mode's sizing. The items-per-view table becomes one item width per
+ * breakpoint, set as custom properties on the list, and five short classes
+ * pick the one for the current width. The server render is already the right
+ * size, and nothing measures before it paints.
+ *
+ * Every breakpoint is filled in, carrying the one below it up, so the CSS
+ * needs no fallback chain, and a row nested in another fluid row never
+ * inherits the outer row's widths. Kept small on purpose: Roster's stylesheet
+ * ships to every consumer, carousel or not.
+ */
+export declare const BREAKPOINTS: readonly ["base", "sm", "md", "lg", "xl"];
+/**
+ * One item's width for `n` items per view. A fraction is the peek, and the
+ * peek runs into the trailing gutter, out to the edge. A whole number of items
+ * fits between the gutters instead, so a one-per-view gallery sits centered.
+ * `100%` is the list's content box, resolved where the width is used.
+ */
+export declare function fluidItemWidth(n: number): string;
+export declare function perViewVars(perView: number | CarouselPerView): Record<string, string>;
+export declare const FLUID_ITEM_WIDTH = "var(--rst-cv-w)";
+export declare const FLUID_CLASSES = "rst:[--rst-cv-w:var(--rst-cv-w-base)] rst:sm:[--rst-cv-w:var(--rst-cv-w-sm)] rst:md:[--rst-cv-w:var(--rst-cv-w-md)] rst:lg:[--rst-cv-w:var(--rst-cv-w-lg)] rst:xl:[--rst-cv-w:var(--rst-cv-w-xl)]";

package/dist/components/molecules/Carousel/carousel-layout.js

@@ -0,0 +1,22 @@
+const a = ["base", "sm", "md", "lg", "xl"];
+function n(t) {
+  const r = Math.ceil(t) - 1;
+  return `calc((100% + ${Number.isInteger(t) ? 0 : 1} * var(--rst-cv-gutter) - ${r} * var(--rst-cv-gap)) / ${t})`;
+}
+function o(t) {
+  const r = typeof t == "number" ? { base: t } : t, s = {};
+  let c;
+  for (const e of a) {
+    const v = r[e];
+    v !== void 0 && v > 0 && (c = v), c !== void 0 && (s[`--rst-cv-w-${e}`] = n(c));
+  }
+  return s;
+}
+const l = "var(--rst-cv-w)", w = "rst:[--rst-cv-w:var(--rst-cv-w-base)] rst:sm:[--rst-cv-w:var(--rst-cv-w-sm)] rst:md:[--rst-cv-w:var(--rst-cv-w-md)] rst:lg:[--rst-cv-w:var(--rst-cv-w-lg)] rst:xl:[--rst-cv-w:var(--rst-cv-w-xl)]";
+export {
+  a as BREAKPOINTS,
+  w as FLUID_CLASSES,
+  l as FLUID_ITEM_WIDTH,
+  n as fluidItemWidth,
+  o as perViewVars
+};

package/dist/components/molecules/Carousel/carousel-math.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=6,i=1;function a(t){return Math.max(0,t.scrollWidth-t.clientWidth)}function h(t){return a(t)>i}function S(t){return t.scrollLeft>i}function L(t){return t.scrollLeft<a(t)-i}function s(t,e){const n=t.items[e];if(!n)return 0;const r=t.align==="start"?n.start-t.paddingStart:(n.start+n.end)/2-(t.paddingStart+(t.clientWidth-t.paddingStart-t.paddingEnd)/2);return Math.min(Math.max(0,r),a(t))}function u(t){const e=t.scrollLeft-i,n=t.scrollLeft+t.clientWidth+i,r=[];return t.items.forEach((l,c)=>{l.start>=e&&l.end<=n&&r.push(c)}),r}function f(t){let e=0,n=1/0;return t.items.forEach((r,l)=>{const c=Math.abs(s(t,l)-t.scrollLeft);c<n&&(e=l,n=c)}),e}function m(t){const e=u(t);return e.length?e[0]:f(t)}function x(t,e){const n=t.items.length;if(!n)return 0;const r=u(t),l=r.length?r[0]:f(t),c=Math.max(1,r.length);let o=Math.min(n-1,Math.max(0,l+e*c));for(;o>0&&o<n-1&&Math.abs(s(t,o)-t.scrollLeft)<=i;)o+=e;return s(t,o)}exports.CAROUSEL_DRAG_THRESHOLD=d;exports.CAROUSEL_TOLERANCE=i;exports.canScrollNext=L;exports.canScrollPrev=S;exports.currentIndex=m;exports.fullyVisible=u;exports.maxScroll=a;exports.nearestIndex=f;exports.overflows=h;exports.pageTarget=x;exports.snapPosition=s;

package/dist/components/molecules/Carousel/carousel-math.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Where a carousel's row is, and where it should go.
+ *
+ * Pure, and kept out of the component so paging and snapping can be tested
+ * with literal numbers. jsdom has no layout, so a test that read positions
+ * from the DOM would be testing zero; the stories measure the real thing.
+ *
+ * Every position is in the scroller's own coordinates, the space `scrollLeft`
+ * is measured in: an item's `start` is how far `scrollLeft` would have to be
+ * for the item's leading edge to sit at the scroller's leading edge.
+ */
+export interface CarouselItemBox {
+    start: number;
+    end: number;
+}
+export interface CarouselGeometry {
+    items: readonly CarouselItemBox[];
+    scrollLeft: number;
+    clientWidth: number;
+    scrollWidth: number;
+    /** `scroll-padding-inline-start`: the gutter a snapped item lines up with. */
+    paddingStart: number;
+    /** `scroll-padding-inline-end`. */
+    paddingEnd: number;
+    align: "start" | "center";
+}
+/** Movement past this, in px, makes a mouse press a drag, and its click is dropped. */
+export declare const CAROUSEL_DRAG_THRESHOLD = 6;
+/** Sub-pixel layout leaves fractions; anything closer than this is "at". */
+export declare const CAROUSEL_TOLERANCE = 1;
+export declare function maxScroll(g: CarouselGeometry): number;
+/** Whether the row is wider than its box at all. */
+export declare function overflows(g: CarouselGeometry): boolean;
+export declare function canScrollPrev(g: CarouselGeometry): boolean;
+export declare function canScrollNext(g: CarouselGeometry): boolean;
+/**
+ * The `scrollLeft` that snaps item `i` into place, clamped to what the row can
+ * reach. The last items of a row that can't align to the start land at the
+ * end, which is also where the browser's own snapping puts them.
+ */
+export declare function snapPosition(g: CarouselGeometry, i: number): number;
+/** Indices of the items wholly inside the box at the current scroll. */
+export declare function fullyVisible(g: CarouselGeometry): number[];
+/** The item whose snap position is nearest the current scroll. */
+export declare function nearestIndex(g: CarouselGeometry): number;
+/**
+ * The first item wholly in view, which is what the row reports as its index.
+ * An item wider than the box is never wholly in view, so then it is the item
+ * the row is snapped nearest to.
+ */
+export declare function currentIndex(g: CarouselGeometry): number;
+/**
+ * Where a previous or next arrow should take the row: a page, which is as many
+ * items as are wholly in view (at least one), landing on an item's snap point.
+ * Measured every time rather than a fixed pixel step, so it holds whatever the
+ * items' widths and however many are in view.
+ *
+ * Returns the target `scrollLeft`.
+ */
+export declare function pageTarget(g: CarouselGeometry, direction: 1 | -1): number;

package/dist/components/molecules/Carousel/carousel-math.js

@@ -0,0 +1,58 @@
+const E = 6, u = 1;
+function a(t) {
+  return Math.max(0, t.scrollWidth - t.clientWidth);
+}
+function L(t) {
+  return a(t) > 1;
+}
+function h(t) {
+  return t.scrollLeft > 1;
+}
+function d(t) {
+  return t.scrollLeft < a(t) - 1;
+}
+function o(t, e) {
+  const n = t.items[e];
+  if (!n) return 0;
+  const r = t.align === "start" ? n.start - t.paddingStart : (n.start + n.end) / 2 - (t.paddingStart + (t.clientWidth - t.paddingStart - t.paddingEnd) / 2);
+  return Math.min(Math.max(0, r), a(t));
+}
+function l(t) {
+  const e = t.scrollLeft - 1, n = t.scrollLeft + t.clientWidth + 1, r = [];
+  return t.items.forEach((i, s) => {
+    i.start >= e && i.end <= n && r.push(s);
+  }), r;
+}
+function f(t) {
+  let e = 0, n = 1 / 0;
+  return t.items.forEach((r, i) => {
+    const s = Math.abs(o(t, i) - t.scrollLeft);
+    s < n && (e = i, n = s);
+  }), e;
+}
+function R(t) {
+  const e = l(t);
+  return e.length ? e[0] : f(t);
+}
+function A(t, e) {
+  const n = t.items.length;
+  if (!n) return 0;
+  const r = l(t), i = r.length ? r[0] : f(t), s = Math.max(1, r.length);
+  let c = Math.min(n - 1, Math.max(0, i + e * s));
+  for (; c > 0 && c < n - 1 && Math.abs(o(t, c) - t.scrollLeft) <= 1; )
+    c += e;
+  return o(t, c);
+}
+export {
+  E as CAROUSEL_DRAG_THRESHOLD,
+  u as CAROUSEL_TOLERANCE,
+  d as canScrollNext,
+  h as canScrollPrev,
+  R as currentIndex,
+  l as fullyVisible,
+  a as maxScroll,
+  f as nearestIndex,
+  L as overflows,
+  A as pageTarget,
+  o as snapPosition
+};

package/dist/components/molecules/EmptyState/EmptyState.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const c=require("../../../lib/utils.cjs"),n=require("./empty-state-variants.cjs"),d=({title:a,description:r,icon:s,action:e,variant:l,className:i,...m})=>t.jsxs("div",{className:c.cn(n.emptyStateVariants({variant:l}),i),...m,children:[s&&t.jsx("div",{className:"rst:mb-4 rst:flex rst:h-12 rst:w-12 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-100 rst:text-gray-400 rst:dark:bg-gray-800 rst:dark:text-gray-500",children:t.jsx("div",{className:"rst:h-6 rst:w-6 rst:[&>svg]:h-full rst:[&>svg]:w-full",children:s})}),t.jsx("h3",{className:"rst:text-lg rst:font-semibold rst:text-gray-900 rst:dark:text-gray-100",children:a}),r&&t.jsx("p",{className:"rst:mt-1 rst:max-w-sm rst:text-sm rst:text-gray-500 rst:dark:text-gray-400",children:r}),e&&t.jsx("div",{className:"rst:mt-6",children:e})]});exports.EmptyState=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const d=require("../../../lib/utils.cjs"),x=require("./empty-state-variants.cjs"),g=({title:a,description:s,icon:r,action:e,headingLevel:l=3,variant:i,className:n,...c})=>{const m=`h${l}`;return t.jsxs("div",{className:d.cn(x.emptyStateVariants({variant:i}),n),...c,children:[r&&t.jsx("div",{className:"rst:mb-4 rst:flex rst:h-12 rst:w-12 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-100 rst:text-gray-400 rst:dark:bg-gray-800 rst:dark:text-gray-500",children:t.jsx("div",{className:"rst:h-6 rst:w-6 rst:[&>svg]:h-full rst:[&>svg]:w-full",children:r})}),t.jsx(m,{className:"rst:text-lg rst:font-semibold rst:text-gray-900 rst:dark:text-gray-100",children:a}),s&&t.jsx("p",{className:"rst:mt-1 rst:max-w-sm rst:text-sm rst:text-gray-500 rst:dark:text-gray-400",children:s}),e&&t.jsx("div",{className:"rst:mt-6",children:e})]})};exports.EmptyState=g;

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

@@ -6,6 +6,12 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement>, V
     description?: string;
     icon?: React.ReactNode;
     action?: React.ReactNode;
+    /**
+     * The title's heading level. `3` by default; set it to follow the heading
+     * the empty state sits under, so the page's outline doesn't skip a level.
+     * Only the element changes; its classes are the same at every level.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
-declare const EmptyState: ({ title, description, icon, action, variant, className, ...props }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+declare const EmptyState: ({ title, description, icon, action, headingLevel, variant, className, ...props }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
 export { EmptyState };

package/dist/components/molecules/EmptyState/EmptyState.js

@@ -1,22 +1,26 @@
 "use client";
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
 import "react";
-import { cn as c } from "../../../lib/utils.js";
-import { emptyStateVariants as g } from "./empty-state-variants.js";
-const f = ({
+import { cn as n } from "../../../lib/utils.js";
+import { emptyStateVariants as x } from "./empty-state-variants.js";
+const p = ({
   title: a,
   description: r,
   icon: s,
   action: e,
-  variant: m,
-  className: l,
-  ...d
-}) => /* @__PURE__ */ i("div", { className: c(g({ variant: m }), l), ...d, children: [
-  s && /* @__PURE__ */ t("div", { className: "rst:mb-4 rst:flex rst:h-12 rst:w-12 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-100 rst:text-gray-400 rst:dark:bg-gray-800 rst:dark:text-gray-500", children: /* @__PURE__ */ t("div", { className: "rst:h-6 rst:w-6 rst:[&>svg]:h-full rst:[&>svg]:w-full", children: s }) }),
-  /* @__PURE__ */ t("h3", { className: "rst:text-lg rst:font-semibold rst:text-gray-900 rst:dark:text-gray-100", children: a }),
-  r && /* @__PURE__ */ t("p", { className: "rst:mt-1 rst:max-w-sm rst:text-sm rst:text-gray-500 rst:dark:text-gray-400", children: r }),
-  e && /* @__PURE__ */ t("div", { className: "rst:mt-6", children: e })
-] });
+  headingLevel: m = 3,
+  variant: l,
+  className: d,
+  ...i
+}) => {
+  const c = `h${m}`;
+  return /* @__PURE__ */ g("div", { className: n(x({ variant: l }), d), ...i, children: [
+    s && /* @__PURE__ */ t("div", { className: "rst:mb-4 rst:flex rst:h-12 rst:w-12 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-100 rst:text-gray-400 rst:dark:bg-gray-800 rst:dark:text-gray-500", children: /* @__PURE__ */ t("div", { className: "rst:h-6 rst:w-6 rst:[&>svg]:h-full rst:[&>svg]:w-full", children: s }) }),
+    /* @__PURE__ */ t(c, { className: "rst:text-lg rst:font-semibold rst:text-gray-900 rst:dark:text-gray-100", children: a }),
+    r && /* @__PURE__ */ t("p", { className: "rst:mt-1 rst:max-w-sm rst:text-sm rst:text-gray-500 rst:dark:text-gray-400", children: r }),
+    e && /* @__PURE__ */ t("div", { className: "rst:mt-6", children: e })
+  ] });
+};
 export {
-  f as EmptyState
+  p as EmptyState
 };