@blakesteve/roster 5.1.0 → 5.2.1

package/dist/components/atoms/Textarea/Textarea.js

@@ -1,26 +1,27 @@
 "use client";
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import u from "react";
-import { Description as N } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as b } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
-import { Label as y } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
-import { Textarea as h } from "../../../node_modules/@headlessui/react/dist/components/textarea/textarea.js";
-import { cn as e } from "../../../lib/utils.js";
+import { jsxs as N, jsx as e } from "react/jsx-runtime";
+import b from "react";
+import { Description as h } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Field as v } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Label as w } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
+import { Textarea as y } from "../../../node_modules/@headlessui/react/dist/components/textarea/textarea.js";
+import { cn as s } from "../../../lib/utils.js";
 import { textareaVariants as k } from "./textarea-variants.js";
-const w = u.forwardRef(
+import { isFieldInvalid as j, withoutInvalidProps as F } from "../../../internal/field-invalid.js";
+const I = b.forwardRef(
   ({
     className: m,
-    label: s,
-    helperText: a,
+    label: a,
+    helperText: o,
     errorMessage: t,
-    variant: i,
-    error: l,
-    resize: c,
-    disabled: d,
-    textareaClassName: n,
-    ...x
+    variant: l,
+    error: n,
+    resize: d,
+    disabled: c,
+    textareaClassName: x,
+    ...i
   }, f) => {
-    const o = !!t || l;
+    const r = !!t || n, p = j(r, i), u = F(i);
     return (
       /* No `space-y-*` here, for the reason documented on Input: Headless UI's
           Field always renders a trailing hidden element, and Tailwind v4
@@ -30,37 +31,38 @@ const w = u.forwardRef(
           the label and description instead. Select is immune to the same trap
           only because it spaces with `gap`, and the hidden element is
           `display: none` so it is not a flex item. */
-      /* @__PURE__ */ p(b, { className: e("rst:w-full", m), children: [
-        s && /* `--roster-control-text`, matching Input's label — see the comment
+      /* @__PURE__ */ N(v, { className: s("rst:w-full", m), children: [
+        a && /* `--roster-control-text`, matching Input's label — see the comment
         there for why not `text-inherit`. */
-        /* @__PURE__ */ r(y, { className: "rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-[var(--roster-control-text)] rst:peer-disabled:cursor-not-allowed rst:peer-disabled:opacity-70 rst:text-left rst:mb-1.5", children: s }),
-        /* @__PURE__ */ r(
-          h,
+        /* @__PURE__ */ e(w, { className: "rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-[var(--roster-control-text)] rst:peer-disabled:cursor-not-allowed rst:peer-disabled:opacity-70 rst:text-left rst:mb-1.5", children: a }),
+        /* @__PURE__ */ e(
+          y,
           {
             ref: f,
-            disabled: d,
-            className: e(
-              k({ variant: i, resize: c, error: o }),
-              n
+            disabled: c,
+            className: s(
+              k({ variant: l, resize: d, error: r }),
+              x
             ),
-            ...x
+            ...u,
+            invalid: p
           }
         ),
-        (a || t) && /* @__PURE__ */ r(
-          N,
+        (o || t) && /* @__PURE__ */ e(
+          h,
           {
-            className: e(
+            className: s(
               "rst:text-xs rst:text-left rst:mt-1.5",
-              o ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
+              r ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
             ),
-            children: t || a
+            children: t || o
           }
         )
       ] })
     );
   }
 );
-w.displayName = "Textarea";
+I.displayName = "Textarea";
 export {
-  w as Textarea
+  I as Textarea
 };

package/dist/components/molecules/Carousel/Carousel.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),Fe=require("react"),qe=require("../../atoms/Button/Button.cjs"),T=require("../../../lib/utils.cjs"),$e=require("../../../internal/motion.cjs"),u=require("./carousel-math.cjs"),U=require("./carousel-layout.cjs");function Be(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const d in a)if(d!=="default"){const b=Object.getOwnPropertyDescriptor(a,d);Object.defineProperty(i,d,b.get?b:{enumerable:!0,get:()=>a[d]})}}return i.default=a,Object.freeze(i)}const n=Be(Fe),ze=a=>Math.min(3e3,500+a*.35),He='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 ne(a){const i=parseFloat(a);return Number.isFinite(i)?i:0}const Ue="rst:hidden rst:[@media(any-hover:hover)]:inline-flex",Ve="rst:hidden rst:[@media(any-hover:hover)]:flex";function se({direction:a}){return l.jsx("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:l.jsx("path",{d:a==="prev"?"M12.5 4.5 7 10l5.5 5.5":"M7.5 4.5 13 10l-5.5 5.5"})})}const oe={overflowing:null,canScrollPrev:!1,canScrollNext:!1,index:0},We=n.forwardRef(function({"aria-label":i,"aria-labelledby":d,children:b,itemWidth:I,perView:k,gap:W=12,gutter:X=16,bleed:le=!1,snap:L="start",snapStrictness:ce="mandatory",oneAtATime:ae=!1,arrows:j="hover",arrowPlacement:M="controls",renderArrows:P,prevLabel:ie,nextLabel:ue,prevIcon:de,nextIcon:fe,arrowButtonProps:ge,fade:ve=!1,scrollbar:pe=!1,showPosition:G=!1,onIndexChange:J,onScrollStateChange:K,itemClassName:me,listClassName:xe,className:be,style:he,...Se},ye){const v=n.useRef(null),Q=`${n.useId()}-list`,Y=n.Children.toArray(b),E=Y.length,[o,we]=n.useState(oe),Z=n.useRef(oe),[Ne,Te]=n.useState(""),[Ie,Pe]=n.useState(!1),O=n.useRef({onIndexChange:J,onScrollStateChange:K});n.useEffect(()=>{O.current={onIndexChange:J,onScrollStateChange:K}});const f=n.useCallback(()=>{const e=v.current;if(!e)return null;const t=e.getBoundingClientRect(),r=getComputedStyle(e),s=t.left+e.clientLeft-e.scrollLeft;return{items:Array.from(e.children).map(g=>{const x=g.getBoundingClientRect();return{start:x.left-s,end:x.right-s}}),scrollLeft:e.scrollLeft,clientWidth:e.clientWidth,scrollWidth:e.scrollWidth,paddingStart:ne(r.scrollPaddingInlineStart||r.scrollPaddingLeft),paddingEnd:ne(r.scrollPaddingInlineEnd||r.scrollPaddingRight),align:L}},[L]),h=n.useCallback(()=>{const e=f();if(!e)return;const t={overflowing:u.overflows(e),canScrollPrev:u.canScrollPrev(e),canScrollNext:u.canScrollNext(e),index:e.items.length?u.currentIndex(e):0},r=Z.current;r.overflowing===t.overflowing&&r.canScrollPrev===t.canScrollPrev&&r.canScrollNext===t.canScrollNext&&r.index===t.index||(Z.current=t,we(t),r.index!==t.index&&O.current.onIndexChange?.(t.index),(r.canScrollPrev!==t.canScrollPrev||r.canScrollNext!==t.canScrollNext)&&O.current.onScrollStateChange?.({canScrollPrev:t.canScrollPrev,canScrollNext:t.canScrollNext}))},[f]),Ee=JSON.stringify([W,X,I,k]);n.useLayoutEffect(()=>{const e=v.current;if(!e)return;h();let t=0;const r=()=>{t||(t=requestAnimationFrame(()=>{t=0,h()}))};e.addEventListener("scroll",r,{passive:!0});const s=typeof ResizeObserver>"u"?null:new ResizeObserver(()=>h()),c=()=>{s?.observe(e),Array.from(e.children).forEach(x=>s?.observe(x))};c();const g=typeof MutationObserver>"u"?null:new MutationObserver(()=>{c(),h()});return g?.observe(e,{childList:!0}),()=>{e.removeEventListener("scroll",r),s?.disconnect(),g?.disconnect(),t&&cancelAnimationFrame(t)}},[h,E,Ee]),n.useLayoutEffect(()=>{const e=v.current;if(e&&(Pe(!e.querySelector(He)),d)){const t=d.split(/\s+/).map(r=>document.getElementById(r)?.textContent?.trim()??"").filter(Boolean).join(" ");Te(t)}},[b,d]);const S=n.useRef(null),p=n.useCallback(()=>{const e=v.current,t=S.current;t&&(S.current=null,window.clearTimeout(t.timer),e?.removeEventListener("scrollend",t.done),e&&(e.style.scrollSnapType="",delete e.dataset.settling))},[]),m=n.useCallback((e,t)=>{const r=v.current;if(!r)return;if(p(),t!=="smooth"||$e.prefersReducedMotion()||Math.abs(r.scrollLeft-e)<1){r.style.scrollSnapType="none",r.scrollTo({left:e,behavior:"instant"}),r.style.scrollSnapType="";return}r.style.scrollSnapType="none",r.dataset.settling="";const c=()=>p();S.current={timer:window.setTimeout(c,ze(Math.abs(r.scrollLeft-e))),done:c,target:e},r.addEventListener("scrollend",c,{once:!0}),r.scrollTo({left:e,behavior:"smooth"})},[p]),C=n.useCallback(e=>{const t=f();if(!t)return;const r=S.current?{...t,scrollLeft:S.current.target}:t;m(u.pageTarget(r,e),"smooth")},[f,m]);n.useImperativeHandle(ye,()=>({scrollToIndex:(e,t)=>{const r=f();if(!r||!r.items.length)return;const s=Math.min(Math.max(0,Math.round(e)),r.items.length-1);m(u.snapPosition(r,s),t?.behavior??"smooth")},scrollPrev:()=>C(-1),scrollNext:()=>C(1)}),[f,C,m]),n.useEffect(()=>p,[p]);const D=n.useRef(null),_=n.useRef(null),A=n.useRef(null);n.useLayoutEffect(()=>{const e=A.current;if(!e)return;const t=e==="prev"?D.current:_.current,r=e==="prev"?_.current:D.current,s=e==="prev"?!o.canScrollPrev:!o.canScrollNext,c=document.activeElement;s&&(c!==t&&c!==document.body&&c!==null||r&&!r.disabled&&r.focus())},[o.canScrollPrev,o.canScrollNext]);const y=n.useRef(null),w=n.useRef(!1),Ce=e=>{e.pointerType!=="mouse"||e.button!==0||o.overflowing&&(p(),w.current=!1,y.current={pointerId:e.pointerId,x0:e.clientX,scroll0:e.currentTarget.scrollLeft,dragging:!1})},Re=e=>{const t=y.current;if(!t||e.pointerId!==t.pointerId)return;const r=e.currentTarget,s=e.clientX-t.x0;if(!t.dragging){if(Math.abs(s)<=u.CAROUSEL_DRAG_THRESHOLD)return;t.dragging=!0,r.dataset.dragging="",r.style.scrollSnapType="none",window.getSelection?.()?.removeAllRanges();try{r.setPointerCapture(e.pointerId)}catch{}}r.scrollLeft=t.scroll0-s},F=e=>{const t=y.current;if(!t||e.pointerId!==t.pointerId||(y.current=null,!t.dragging))return;const r=e.currentTarget;delete r.dataset.dragging,w.current=e.type==="pointerup",window.setTimeout(()=>{w.current=!1},0);const s=f();s?m(u.snapPosition(s,u.nearestIndex(s)),"smooth"):r.style.scrollSnapType=""},ke=e=>{!w.current||e.detail===0||(w.current=!1,e.preventDefault(),e.stopPropagation())},Le=e=>{o.overflowing&&e.preventDefault()},je=e=>{const t=e.currentTarget,r=e.target;if(r===t||y.current?.dragging)return;let s=!1;try{s=r.matches(":focus-visible")}catch{s=!1}if(!s)return;const c=r.closest("[data-carousel-item]");if(!c||c.parentElement!==t)return;const g=f();if(!g)return;const x=Array.prototype.indexOf.call(t.children,c);m(u.snapPosition(g,x),"instant")},[Me,Oe]=n.useState(0);n.useEffect(()=>{const e=window.setTimeout(()=>Oe(o.index),150);return()=>window.clearTimeout(e)},[o.index]);const ee=i??Ne,te=e=>ee?`${e} ${ee}`:e,q=j!=="none"&&o.overflowing!==!1,De=j==="hover"?Ue:"rst:inline-flex",re=e=>{const t=e==="prev",{className:r,...s}=ge??{};return l.jsx(qe.Button,{type:"button",variant:"outline",colorScheme:"neutral",size:"icon",...s,"aria-label":t?ie??te("Previous"):ue??te("Next"),"aria-controls":Q,disabled:t?!o.canScrollPrev:!o.canScrollNext,onClick:()=>C(t?-1:1),ref:t?D:_,onFocus:()=>{A.current=e},onBlur:c=>{c.relatedTarget&&(A.current=null)},"data-carousel-arrow":e,className:T.cn("rst:size-11 rst:shrink-0 rst:rounded-full",M==="overlay"&&!P&&"rst:bg-[var(--roster-popover-bg)] rst:elevation-raised rst:hover:bg-[var(--roster-popover-bg)] rst:disabled:invisible",De,r),children:t?de??l.jsx(se,{direction:"prev"}):fe??l.jsx(se,{direction:"next"})})},R=q?re("prev"):null,$=q?re("next"):null,N=G&&E?l.jsxs("p",{"aria-live":"polite",className:"rst:font-ui rst:m-0 rst:text-sm rst:tabular-nums rst:opacity-75","data-carousel-position":"",children:[Me+1," of ",E]}):null;let B=null;P?B=P({prev:R,next:$,position:N}):M==="controls"&&(R||N)&&(B=l.jsxs("div",{className:T.cn("rst:mb-2 rst:items-center rst:justify-end rst:gap-2",!N&&j==="hover"?Ve:"rst:flex"),"data-carousel-controls":"",children:[N&&l.jsx("div",{className:"rst:mr-auto",children:N}),R,$]}));const z=ve&&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,H=I===void 0&&k!==void 0,_e={"--rst-cv-gap":V(W),"--rst-cv-gutter":V(X),...H?U.perViewVars(k):{},...z?{maskImage:z,WebkitMaskImage:z}:{}},Ae=I!==void 0?{width:V(I)}:H?{width:U.FLUID_ITEM_WIDTH}:void 0;return l.jsxs("div",{className:T.cn("rst:min-w-0",be),style:he,...Se,children:[B,l.jsxs("div",{className:"rst:relative",children:[l.jsx("ul",{ref:v,id:Q,role:"list","aria-label":i,"aria-labelledby":i?void 0:d,tabIndex:Ie&&o.overflowing?0:void 0,"data-overflowing":o.overflowing?"":void 0,onPointerDown:Ce,onPointerMove:Re,onPointerUp:F,onPointerCancel:F,onLostPointerCapture:F,onClickCapture:ke,onDragStart:Le,onFocus:je,style:_e,className:T.cn("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",ce==="mandatory"?"rst:snap-x rst:snap-mandatory":"rst:snap-x rst:snap-proximity",le&&"rst:-mx-(--rst-cv-gutter)",!pe&&"rst:[scrollbar-width:none] rst:[&::-webkit-scrollbar]:hidden",H&&U.FLUID_CLASSES,"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",xe),children:Y.map((e,t)=>l.jsx("li",{"data-carousel-item":"","aria-label":G?`${t+1} of ${E}`:void 0,style:Ae,className:T.cn("rst:shrink-0",L==="start"?"rst:snap-start":"rst:snap-center",ae&&"rst:snap-always",me),children:e},n.isValidElement(e)&&e.key!=null?e.key:t))}),!P&&M==="overlay"&&q&&l.jsxs(l.Fragment,{children:[l.jsx("div",{className:"rst:pointer-events-none rst:absolute rst:inset-y-0 rst:start-1 rst:flex rst:items-center",children:l.jsx("div",{className:"rst:pointer-events-auto",children:R})}),l.jsx("div",{className:"rst:pointer-events-none rst:absolute rst:inset-y-0 rst:end-1 rst:flex rst:items-center",children:l.jsx("div",{className:"rst:pointer-events-auto",children:$})})]})]})]})});exports.Carousel=We;

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)]";