@blakesteve/roster 5.0.1 → 5.2.0

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

@@ -0,0 +1,146 @@
+import { ButtonProps } from '../../atoms/Button/Button';
+import * as React from "react";
+/** Items per view at each width, from Roster's breakpoints up. */
+export interface CarouselPerView {
+    base: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+}
+export interface CarouselHandle {
+    /** Snaps item `i` into place. Instant under reduced motion, whatever is asked. */
+    scrollToIndex: (index: number, options?: {
+        behavior?: ScrollBehavior;
+    }) => void;
+    /** What the previous arrow does: back one page. */
+    scrollPrev: () => void;
+    /** What the next arrow does: on one page. */
+    scrollNext: () => void;
+}
+export interface CarouselArrowsRender {
+    /** The previous arrow, or `null` while the row fits and there is nothing to page. */
+    prev: React.ReactNode;
+    next: React.ReactNode;
+    /** The "2 of 5" readout when `showPosition` is on, otherwise `null`. */
+    position: React.ReactNode;
+}
+export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "aria-label" | "aria-labelledby"> {
+    /** The row's name. One of this or `aria-labelledby` is required. */
+    "aria-label"?: string;
+    /** The id of the heading that names the row. */
+    "aria-labelledby"?: string;
+    /** One child per item. Each is wrapped in the list item the row snaps to. */
+    children: React.ReactNode;
+    /**
+     * Fixed mode: every item is this wide (a number is px). The row overflows
+     * once the items and gaps outgrow the box, and the next item peeks from then
+     * on.
+     */
+    itemWidth?: number | string;
+    /**
+     * Fluid mode: how many items are in view at each width, and the component
+     * sizes them. A fraction is the peek: `1.3` is one item and a third of the
+     * next. Ignored when `itemWidth` is set.
+     */
+    perView?: number | CarouselPerView;
+    /** Space between items. A number is px. */
+    gap?: number | string;
+    /**
+     * The inline padding at each end, and the scroll padding a snapped item
+     * lines up with. Match the page's own gutter so a snapped item sits under
+     * the text above it. A number is px.
+     */
+    gutter?: number | string;
+    /**
+     * Pulls the row out by one gutter on each side, so it runs to the edges of
+     * its container while the first item still lines up with the text.
+     */
+    bleed?: boolean;
+    /** Where an item settles. */
+    snap?: "start" | "center";
+    /** `mandatory` always settles on an item; `proximity` only near one. */
+    snapStrictness?: "mandatory" | "proximity";
+    /** One item per swipe, for a gallery of one per view (`scroll-snap-stop: always`). */
+    oneAtATime?: boolean;
+    /**
+     * When the arrows show. `hover`, the default, is wherever a pointer can
+     * hover: a touch-only screen swipes instead, and gets no arrows to aim at.
+     */
+    arrows?: "hover" | "always" | "none";
+    /**
+     * `controls`, the default, puts the arrows on a line of their own above the
+     * row, where they never cover an item or the peek and never fight a drag.
+     * `overlay` floats them over the row's two ends and takes no space.
+     * `renderArrows` overrides both.
+     */
+    arrowPlacement?: "controls" | "overlay";
+    /**
+     * Put the arrows (and the position readout) anywhere: a heading line beside
+     * a "See all" link, say. What it returns replaces the default controls line,
+     * so a heading rendered here sits above the row as before.
+     */
+    renderArrows?: (parts: CarouselArrowsRender) => React.ReactNode;
+    /** The previous arrow's accessible name. Defaults to "Previous" and the row's label. */
+    prevLabel?: string;
+    /** The next arrow's accessible name. Defaults to "Next" and the row's label. */
+    nextLabel?: string;
+    /** Replaces the previous arrow's chevron. */
+    prevIcon?: React.ReactNode;
+    /** Replaces the next arrow's chevron. */
+    nextIcon?: React.ReactNode;
+    /** Passed to both arrow buttons, over the defaults. */
+    arrowButtonProps?: Omit<ButtonProps, "onClick" | "disabled" | "children" | "aria-label">;
+    /**
+     * Fades the edge on a side with more to see. Never at an end, so the last
+     * item is never faded.
+     */
+    fade?: boolean;
+    /** Shows the native scrollbar. Hidden by default; the arrows and the mouse drag stand in for it. */
+    scrollbar?: boolean;
+    /**
+     * Shows "2 of 5", for a gallery of one item per view. It is also each item's
+     * name, and a change is announced politely.
+     */
+    showPosition?: boolean;
+    /** The first item wholly in view, whenever it changes. */
+    onIndexChange?: (index: number) => void;
+    /** Whether the row can move each way, whenever that changes. */
+    onScrollStateChange?: (state: {
+        canScrollPrev: boolean;
+        canScrollNext: boolean;
+    }) => void;
+    /** Classes for each list item. */
+    itemClassName?: string;
+    /** Classes for the scrolling list. `className` is the outer wrapper. */
+    listClassName?: string;
+}
+/**
+ * A sideways row of items: a row of cards, a selection strip, a gallery of one
+ * per view.
+ *
+ * Native first. The row is a real scroll container with CSS scroll snap, so
+ * touch, trackpad, Shift with the wheel and focus all scroll it without
+ * script, and every item is in the server render: no clones, no
+ * virtualization, no loop, and nothing moves on its own.
+ *
+ * Script adds what a mouse is missing. Pressing and dragging moves the row one
+ * to one and settles it on the nearest item; a drag past 6px drops the one
+ * click that ends it and nothing else. Previous and next arrows page by as
+ * many items as are wholly in view, measured each time, and are `disabled`,
+ * out of the tab order, at an end. A vertical wheel over the row scrolls the
+ * page, and sideways overscroll is contained so a swipe at an end can't go
+ * back a page.
+ *
+ * Keyboard focus moving onto an item snaps that item into place at once. If
+ * no item can take focus, the list itself is the tab stop, so a keyboard can
+ * still scroll it.
+ *
+ * Under reduced motion every programmatic scroll is instant: the arrows, the
+ * settle after a drag, and `scrollToIndex`.
+ *
+ * Renders a `ul` named by `aria-label` or `aria-labelledby`, one `li` per
+ * child. There is no carousel role and no slide role: nothing rotates.
+ */
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselHandle>>;
+export { Carousel };

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;