@blakesteve/roster 5.0.1 → 5.2.0

package/dist/components/organisms/Sheet/Sheet.d.ts

@@ -0,0 +1,85 @@
+import * as React from "react";
+export interface SheetProps {
+    isOpen: boolean;
+    /** Called by Escape, a backdrop click, the close button and a dismissing drag. */
+    onClose: () => void;
+    /**
+     * Called once the leave transition has finished and the sheet is gone.
+     *
+     * Clear the sheet's content here rather than in `onClose`. Cleared in
+     * `onClose`, it empties while it is still sliding out.
+     */
+    onAfterClose?: () => void;
+    /**
+     * The sheet's accessible name, rendered as an `h2`. Required, because a
+     * dialog without a name is announced as "dialog" and nothing else.
+     *
+     * A node rather than only a string, so a title can carry markup (a date in
+     * a `<time>`, a word in another style); the name is its text either way.
+     *
+     * Changing its text while the sheet is open counts as a content swap: focus
+     * moves to the new title so a screen reader announces it. Not while `busy`:
+     * a title that changes during loading is a provisional one being refined,
+     * and the reader keeps their place.
+     */
+    title: React.ReactNode;
+    /** Hides the title visually. It stays the accessible name. */
+    hideTitle?: boolean;
+    /** Wired to the dialog's `aria-describedby`. */
+    description?: React.ReactNode;
+    /** A slot in the header, before the close button: previous and next, say. */
+    actions?: React.ReactNode;
+    /**
+     * The sheet's width from 768px up, where it centers. A number is px. Below
+     * 768px the sheet is always full width.
+     */
+    maxWidth?: number | string;
+    /** What receives focus on open. Defaults to the close button. */
+    initialFocus?: React.RefObject<HTMLElement | null>;
+    /**
+     * Where focus goes on close, over whatever opened the sheet.
+     *
+     * A sheet opened on page load from a deep link has no opener, so without
+     * this focus falls to `<body>`.
+     */
+    returnFocus?: React.RefObject<HTMLElement | null> | HTMLElement | null;
+    /** Sets `aria-busy` on the content region while its content loads. */
+    busy?: boolean;
+    /** Drag the handle or header down to dismiss. The close button stays either way. */
+    dragToDismiss?: boolean;
+    /**
+     * Counts as a content swap when it changes, like `title` does. For content
+     * that changes under an unchanged title.
+     */
+    contentKey?: React.Key;
+    /** Applied to the panel. */
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * A panel anchored to the bottom of the screen, for detail that should not
+ * take the reader off the page: full width on a phone, centered at `maxWidth`
+ * from 768px.
+ *
+ * Three stacked parts, and only the last scrolls: a drag handle, a header with
+ * the title, the `actions` slot and a close button, and the content. The header
+ * is a sibling of the scroller rather than sticky inside it, so it can never
+ * cover the element that has focus.
+ *
+ * Built on Headless UI's `Dialog`, so the focus trap, Escape and the scroll
+ * lock are its. The rest of the page is made `inert` and `aria-hidden` by
+ * Headless UI and Roster together, every child of `<body>` but the dialog
+ * layer and the toast host. The scroll lock pads `<html>`
+ * for the scrollbar it hides; a fixed element elsewhere on the page can still
+ * shift by that width.
+ *
+ * Renders an empty `<span hidden>` where it is placed, to find out whether it
+ * sits inside a scoped `.dark` subtree and which part of the page it was
+ * opened from. The sheet itself is portaled to `<body>`, so it could not tell
+ * otherwise.
+ *
+ * The bottom padding includes `env(safe-area-inset-bottom)`, which is 0 unless
+ * the page's viewport meta sets `viewport-fit=cover`.
+ */
+declare const Sheet: ({ isOpen, onClose, onAfterClose, title, hideTitle, description, actions, maxWidth, initialFocus, returnFocus, busy, dragToDismiss, contentKey, className, children, }: SheetProps) => import("react/jsx-runtime").JSX.Element;
+export { Sheet };

package/dist/components/organisms/Sheet/Sheet.js

@@ -0,0 +1,304 @@
+"use client";
+import { jsxs as l, Fragment as K, jsx as n } from "react/jsx-runtime";
+import * as s from "react";
+import { Description as Q } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Dialog as H, DialogBackdrop as J, DialogPanel as Z, DialogTitle as W } from "../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js";
+import { TransitionChild as O } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+import { cn as d } from "../../../lib/utils.js";
+import { useDarkScope as tt } from "../../../internal/popup.js";
+import { useReducedMotion as et } from "../../../internal/motion.js";
+import { lockPage as rt } from "../../../internal/page-inert.js";
+import { sheetDragOutcome as st, sheetReleaseVelocity as nt, exceedsSheetTapSlop as ot } from "./sheet-drag.js";
+import { titleSignature as at } from "./sheet-title.js";
+const it = "rst:transition-transform rst:duration-(--roster-sheet-enter-duration) rst:ease-(--roster-sheet-enter-easing) rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-leave:ease-(--roster-sheet-leave-easing) rst:data-closed:translate-y-full", ct = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", ut = "rst:transition-opacity rst:duration-(--roster-sheet-enter-duration) rst:ease-out rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-closed:opacity-0", lt = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", dt = [
+  "input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file]):not([type=image])",
+  "textarea",
+  "select",
+  "[contenteditable]:not([contenteditable=false])"
+].join(",");
+function ft(r) {
+  return r ? "current" in r ? r.current : r : null;
+}
+function pt({ target: r }) {
+  const u = s.useRef(r), f = s.useRef(!1);
+  return s.useEffect(() => {
+    u.current = r;
+  }), s.useEffect(() => (f.current = !1, () => {
+    f.current = !0, queueMicrotask(() => {
+      if (!f.current) return;
+      const p = ft(u.current);
+      p?.isConnected && p.focus();
+    });
+  }), []), null;
+}
+function ht() {
+  return /* @__PURE__ */ n(
+    "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",
+      children: /* @__PURE__ */ n("path", { d: "M5 5l10 10M15 5L5 15" })
+    }
+  );
+}
+const Lt = ({
+  isOpen: r,
+  onClose: u,
+  onAfterClose: f,
+  title: p,
+  hideTitle: z = !1,
+  description: L,
+  actions: N,
+  maxWidth: v = 560,
+  initialFocus: x,
+  returnFocus: Y,
+  busy: h = !1,
+  dragToDismiss: E = !0,
+  contentKey: m,
+  className: B,
+  children: T
+}) => {
+  const { ref: R, inDarkScope: _ } = tt(), D = et();
+  s.useLayoutEffect(() => {
+    if (r)
+      return rt(R.current);
+  }, [r, R]);
+  const i = s.useRef(null), I = s.useRef(null), w = s.useRef(null), k = s.useRef(null), C = s.useRef(null), S = s.useId(), g = at(p), P = s.useRef({ signature: g, contentKey: m, open: r, busy: h });
+  s.useEffect(() => {
+    const t = P.current;
+    if (P.current = { signature: g, contentKey: m, open: r, busy: h }, !t.open || !r) return;
+    const e = t.contentKey !== m, o = t.signature !== g && !t.busy;
+    !e && !o || (w.current?.focus(), C.current && (C.current.scrollTop = 0));
+  }, [g, m, r, h]), s.useEffect(() => {
+    if (!r) return;
+    const t = requestAnimationFrame(() => {
+      const e = i.current, o = document.activeElement;
+      !e || o && e.contains(o) || (x?.current ?? k.current)?.focus();
+    });
+    return () => cancelAnimationFrame(t);
+  }, [r, x]);
+  const [M, A] = s.useState(null);
+  s.useEffect(() => {
+    if (!r) return;
+    const t = window.visualViewport;
+    if (!t) return;
+    const e = () => {
+      const o = document.activeElement, c = !!o && !!i.current?.contains(o) && o.matches(dt);
+      A(c ? Math.round(t.height) : null);
+    };
+    return t.addEventListener("resize", e), document.addEventListener("focusin", e), document.addEventListener("focusout", e), () => {
+      t.removeEventListener("resize", e), document.removeEventListener("focusin", e), document.removeEventListener("focusout", e), A(null);
+    };
+  }, [r]);
+  const a = s.useRef(null), y = s.useRef(!1), F = s.useRef(r);
+  s.useEffect(() => {
+    F.current = r;
+  }, [r]);
+  const b = (t) => {
+    i.current?.style.setProperty("--rst-sheet-drag", `${t}px`);
+  }, j = (t) => {
+    const e = i.current;
+    a.current = null, e && (delete e.dataset.dragging, t === "close" ? (u(), requestAnimationFrame(() => {
+      F.current && !a.current && b(0);
+    })) : b(0));
+  };
+  s.useEffect(() => {
+    !r && a.current && (a.current = null, i.current && delete i.current.dataset.dragging), r && !a.current && b(0);
+  }, [r]);
+  const q = (t) => {
+    a.current || (y.current = !1, !(!E || !r) && (t.pointerType === "mouse" && (t.button !== 0 || !I.current?.contains(t.target)) || (a.current = {
+      pointerId: t.pointerId,
+      x0: t.clientX,
+      y0: t.clientY,
+      dy: 0,
+      phase: "pending",
+      samples: [{ t: t.timeStamp, y: t.clientY }]
+    })));
+  }, $ = (t) => {
+    const e = a.current;
+    if (!e || t.pointerId !== e.pointerId) return;
+    const o = t.clientX - e.x0, c = t.clientY - e.y0;
+    if (e.phase === "pending") {
+      if (!ot(o, c)) return;
+      if (Math.abs(o) > Math.abs(c)) {
+        e.phase = "ignored";
+        return;
+      }
+      e.phase = "dragging", y.current = !0;
+      try {
+        t.currentTarget.setPointerCapture(t.pointerId);
+      } catch {
+      }
+      i.current && (i.current.dataset.dragging = "");
+    }
+    e.phase === "dragging" && (e.dy = c, e.samples.push({ t: t.timeStamp, y: t.clientY }), e.samples.length > 32 && e.samples.shift(), b(Math.max(0, c)));
+  }, U = (t) => {
+    const e = a.current;
+    if (!e || t.pointerId !== e.pointerId) return;
+    if (e.phase !== "dragging") {
+      a.current = null;
+      return;
+    }
+    e.samples.push({ t: t.timeStamp, y: t.clientY });
+    const o = t.clientY - e.y0, c = i.current?.getBoundingClientRect().height ?? 0;
+    j(st(o, c, nt(e.samples)));
+  }, V = (t) => {
+    const e = a.current;
+    !e || t.pointerId !== e.pointerId || (e.phase === "dragging" ? j("stay") : a.current = null);
+  }, X = (t) => {
+    !y.current || t.detail === 0 || (y.current = !1, t.preventDefault(), t.stopPropagation());
+  }, G = {
+    "--rst-sheet-max-width": typeof v == "number" ? `${v}px` : v,
+    ...M !== null && { "--rst-sheet-keyboard-cap": `${M}px` }
+  };
+  return /* @__PURE__ */ l(K, { children: [
+    /* @__PURE__ */ n("span", { ref: R, hidden: !0 }),
+    /* @__PURE__ */ l(
+      H,
+      {
+        open: r,
+        as: "div",
+        onClose: u,
+        initialFocus: x ?? k,
+        className: d(
+          "rst:font-ui rst:relative rst:z-50 rst:focus:outline-hidden",
+          _ && "dark"
+        ),
+        children: [
+          /* @__PURE__ */ n(
+            J,
+            {
+              transition: !0,
+              "data-testid": "sheet-backdrop",
+              className: d(
+                "rst:fixed rst:inset-0 rst:bg-(--roster-sheet-backdrop)",
+                D ? lt : ut
+              )
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "rst:fixed rst:inset-0 rst:flex rst:items-end rst:justify-center", children: /* @__PURE__ */ n(O, { afterLeave: f, children: /* @__PURE__ */ l(
+            Z,
+            {
+              ref: i,
+              style: G,
+              "data-testid": "sheet-panel",
+              className: d(
+                /* 92dvh, or the visual viewport while the keyboard is up,
+                   whichever is shorter. */
+                "rst:relative rst:flex rst:max-h-[min(92dvh,var(--rst-sheet-keyboard-cap,92dvh))] rst:w-full rst:flex-col",
+                "rst:md:max-w-(--rst-sheet-max-width)",
+                "rst:rounded-t-2xl rst:border rst:border-b-0 rst:elevation-overlay",
+                "rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]",
+                /* The ring offset paints the gap between a focused control and
+                   its ring, so it has to be this surface, not the page. */
+                "rst:[--roster-ring-offset:var(--roster-popover-bg)]",
+                "rst:pb-[env(safe-area-inset-bottom)]",
+                "rst:translate-y-[var(--rst-sheet-drag,0px)]",
+                D ? ct : it,
+                "rst:data-dragging:transition-none",
+                B
+              ),
+              children: [
+                /* @__PURE__ */ l(
+                  "div",
+                  {
+                    "data-testid": "sheet-drag-zone",
+                    className: d("rst:shrink-0", E && "rst:touch-none"),
+                    onPointerDown: q,
+                    onPointerMove: $,
+                    onPointerUp: U,
+                    onPointerCancel: V,
+                    onClickCapture: X,
+                    children: [
+                      /* @__PURE__ */ n(
+                        "div",
+                        {
+                          ref: I,
+                          "aria-hidden": "true",
+                          "data-testid": "sheet-handle",
+                          className: d(
+                            /* The grip sits near the top edge, where a sheet's grabber
+                               is expected, inside a 44px strip. The header below pulls
+                               up over the strip's lower part, so a touch there drags
+                               too (the header is a drag zone) and a mouse drags from
+                               the 32px above it, the full width of the sheet. */
+                            "rst:flex rst:h-11 rst:items-start rst:justify-center rst:pt-2",
+                            E && "rst:cursor-grab rst:active:cursor-grabbing"
+                          ),
+                          children: /* @__PURE__ */ n("span", { className: "rst:h-1 rst:w-10 rst:rounded-full rst:bg-current rst:opacity-30" })
+                        }
+                      ),
+                      /* @__PURE__ */ l("div", { className: "rst:-mt-3 rst:flex rst:items-start rst:gap-2 rst:px-5 rst:pb-4", children: [
+                        /* @__PURE__ */ l("div", { className: "rst:min-w-0 rst:flex-1 rst:pt-2", children: [
+                          /* @__PURE__ */ n(
+                            W,
+                            {
+                              as: "h2",
+                              id: S,
+                              ref: w,
+                              tabIndex: -1,
+                              className: d(
+                                "rst:text-lg rst:font-semibold rst:text-inherit rst:focus:outline-hidden",
+                                z && "rst:sr-only"
+                              ),
+                              children: p
+                            }
+                          ),
+                          L && /* @__PURE__ */ n(
+                            Q,
+                            {
+                              as: "p",
+                              className: "rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75",
+                              children: L
+                            }
+                          )
+                        ] }),
+                        N && /* 44px tall like the close button, so actions of any
+                        height center on the same line as it. */
+                        /* @__PURE__ */ n("div", { className: "rst:flex rst:h-11 rst:shrink-0 rst:items-center rst:gap-1", children: N }),
+                        /* @__PURE__ */ n(
+                          "button",
+                          {
+                            ref: k,
+                            type: "button",
+                            onClick: u,
+                            "aria-label": "Close",
+                            className: "rst:inline-flex rst:size-11 rst:shrink-0 rst:-mr-2 rst:cursor-pointer rst:items-center rst:justify-center rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-60 rst:transition-opacity rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:opacity-100 rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",
+                            children: /* @__PURE__ */ n(ht, {})
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    ref: C,
+                    role: "region",
+                    "aria-labelledby": S,
+                    tabIndex: 0,
+                    "data-testid": "sheet-content",
+                    "aria-busy": h || void 0,
+                    className: "rst:min-h-0 rst:flex-1 rst:overflow-y-auto rst:overscroll-contain rst:px-5 rst:pb-4 rst:focus:outline-hidden rst:ring-inset rst:focus-visible:ring-2 rst:focus-visible:ring-ring",
+                    children: T
+                  }
+                ),
+                /* @__PURE__ */ n(pt, { target: Y })
+              ]
+            }
+          ) }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Lt as Sheet
+};

package/dist/components/organisms/Sheet/sheet-drag.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=8,r=.3,n=.5,T=16,_=100;function s(t,e,E){return E<=-n||t<=S?"stay":t>e*r||E>=n&&t>=T?"close":"stay"}function u(t,e){return Math.hypot(t,e)>S}function I(t){if(t.length<2)return 0;const e=t[t.length-1],E=t.find(c=>e.t-c.t<=_)??e,o=e.t-E.t;return o>0?(e.y-E.y)/o:0}exports.SHEET_CLOSE_DISTANCE=r;exports.SHEET_FLICK_MIN_DISTANCE=T;exports.SHEET_FLICK_VELOCITY=n;exports.SHEET_TAP_SLOP=S;exports.SHEET_VELOCITY_WINDOW=_;exports.exceedsSheetTapSlop=u;exports.sheetDragOutcome=s;exports.sheetReleaseVelocity=I;

package/dist/components/organisms/Sheet/sheet-drag.d.ts

@@ -0,0 +1,40 @@
+/**
+ * When a drag on a sheet's handle or header dismisses it.
+ *
+ * Pure, and kept out of the component so the thresholds can be tested with
+ * literal numbers. jsdom has no layout, so a test that read the height from the
+ * DOM would be testing zero.
+ */
+/** Movement at or under this, in px, is a tap rather than a drag. */
+export declare const SHEET_TAP_SLOP = 8;
+/** A drag further than this share of the sheet's height closes it. */
+export declare const SHEET_CLOSE_DISTANCE = 0.3;
+/** A downward flick at or above this speed, in px/ms, closes the sheet... */
+export declare const SHEET_FLICK_VELOCITY = 0.5;
+/** ...as long as it traveled at least this far, in px. */
+export declare const SHEET_FLICK_MIN_DISTANCE = 16;
+/** Release velocity is averaged over this much of the end of the drag, in ms. */
+export declare const SHEET_VELOCITY_WINDOW = 100;
+export type SheetDragOutcome = "close" | "stay";
+/**
+ * @param dy          downward travel in px; negative is upward
+ * @param sheetHeight the sheet's rendered height in px
+ * @param velocity    px/ms at release, downward positive, from `sheetReleaseVelocity`
+ */
+export declare function sheetDragOutcome(dy: number, sheetHeight: number, velocity: number): SheetDragOutcome;
+/** Whether a pointer that moved this far has stopped being a tap. */
+export declare function exceedsSheetTapSlop(dx: number, dy: number): boolean;
+export interface SheetDragSample {
+    /** A timestamp in ms, from the pointer event. */
+    t: number;
+    /** The pointer's clientY in px. */
+    y: number;
+}
+/**
+ * Downward speed in px/ms over the last `SHEET_VELOCITY_WINDOW` ms of samples.
+ *
+ * The window is measured back from the LAST sample, not from now: a finger
+ * that stops and then lifts has a last sample from when it stopped, and the
+ * pause belongs in the average. Zero when the window holds a single instant.
+ */
+export declare function sheetReleaseVelocity(samples: readonly SheetDragSample[]): number;

package/dist/components/organisms/Sheet/sheet-drag.js

@@ -0,0 +1,22 @@
+const e = 8, S = 0.3, r = 0.5, I = 16, o = 100;
+function C(t, E, _) {
+  return _ <= -0.5 || t <= 8 ? "stay" : t > E * 0.3 || _ >= 0.5 && t >= 16 ? "close" : "stay";
+}
+function c(t, E) {
+  return Math.hypot(t, E) > 8;
+}
+function L(t) {
+  if (t.length < 2) return 0;
+  const E = t[t.length - 1], _ = t.find((T) => E.t - T.t <= 100) ?? E, n = E.t - _.t;
+  return n > 0 ? (E.y - _.y) / n : 0;
+}
+export {
+  S as SHEET_CLOSE_DISTANCE,
+  I as SHEET_FLICK_MIN_DISTANCE,
+  r as SHEET_FLICK_VELOCITY,
+  e as SHEET_TAP_SLOP,
+  o as SHEET_VELOCITY_WINDOW,
+  c as exceedsSheetTapSlop,
+  C as sheetDragOutcome,
+  L as sheetReleaseVelocity
+};

package/dist/components/organisms/Sheet/sheet-title.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");function l(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const s=l(c);function a(t){if(t==null||typeof t=="boolean")return"";if(typeof t=="string"||typeof t=="number"||typeof t=="bigint")return String(t);if(Array.isArray(t))return t.map(a).join("");if(s.isValidElement(t)){const{children:e,...r}=t.props;if(typeof t.type=="string")return a(e);const n=t.type,u=Object.entries(r).filter(([i])=>i!=="className"&&i!=="style").map(([i,o])=>o instanceof Date?`${i}=${o.toISOString()}`:["string","number","boolean","bigint"].includes(typeof o)?`${i}=${String(o)}`:null).filter(Boolean).join(",");return`<${n.displayName??n.name??"?"}${u?` ${u}`:""}>`+a(e)}return""}exports.titleSignature=a;

package/dist/components/organisms/Sheet/sheet-title.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/**
+ * What a title says, for telling whether it changed: its text, and for a
+ * component inside it, the component's name and its plain props (a date
+ * included), so `<NightDate date={d} />` says something even with no
+ * children. Styling is not content: `className` and `style` never count, on a
+ * component or an element. A component whose words change with nothing in its
+ * props (it reads a context, say) is invisible here; pass `contentKey`.
+ */
+export declare function titleSignature(node: React.ReactNode): string;

package/dist/components/organisms/Sheet/sheet-title.js

@@ -0,0 +1,17 @@
+"use client";
+import * as a from "react";
+function n(t) {
+  if (t == null || typeof t == "boolean") return "";
+  if (typeof t == "string" || typeof t == "number" || typeof t == "bigint") return String(t);
+  if (Array.isArray(t)) return t.map(n).join("");
+  if (a.isValidElement(t)) {
+    const { children: e, ...p } = t.props;
+    if (typeof t.type == "string") return n(e);
+    const s = t.type, f = Object.entries(p).filter(([r]) => r !== "className" && r !== "style").map(([r, i]) => i instanceof Date ? `${r}=${i.toISOString()}` : ["string", "number", "boolean", "bigint"].includes(typeof i) ? `${r}=${String(i)}` : null).filter(Boolean).join(",");
+    return `<${s.displayName ?? s.name ?? "?"}${f ? ` ${f}` : ""}>` + n(e);
+  }
+  return "";
+}
+export {
+  n as titleSignature
+};

package/dist/index.d.ts

@@ -37,7 +37,6 @@ export * from './components/atoms/Switch/switch-variants';
 export * from './components/atoms/Textarea/Textarea';
 export * from './components/atoms/Textarea/textarea-variants';
 export * from './components/atoms/AvatarStrip/AvatarStrip';
-export * from './components/atoms/LiquidTabs/LiquidTabs';
 export * from './components/atoms/Tooltip/Tooltip';
 export * from './components/atoms/CollapsibleSection/CollapsibleSection';
 export * from './components/atoms/SegmentBar/SegmentBar';
@@ -58,6 +57,10 @@ export * from './components/molecules/RadioGroup/RadioGroup';
 export * from './components/molecules/RadioGroup/radio-group-variants';
 export * from './components/molecules/Breadcrumbs/Breadcrumbs';
 export * from './components/molecules/Breadcrumbs/breadcrumb-variants';
+export * from './components/molecules/LiquidTabs/LiquidTabs';
+export * from './components/molecules/LiquidTabs/LiquidNav';
+export * from './components/molecules/LiquidTabs/liquid-tab-id';
+export * from './components/molecules/Carousel/Carousel';
 export * from './components/molecules/CallToAction/CallToAction';
 export * from './components/molecules/CallToAction/call-to-action-variants';
 export * from './components/molecules/EmptyState/EmptyState';
@@ -72,6 +75,7 @@ export * from './components/organisms/Dialog/Dialog';
 export * from './components/organisms/Footer/Footer';
 export * from './components/organisms/Navbar/Navbar';
 export * from './components/organisms/Navbar/navbar-variants';
+export * from './components/organisms/Sheet/Sheet';
 export * from './components/organisms/Table/Table';
 export * from './components/organisms/Table/table-variants';
 export * from './hooks/useCountdown';

package/dist/internal/motion.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");function i(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const d=i(c),a="(prefers-reduced-motion: reduce)";function o(){return typeof window>"u"||typeof window.matchMedia!="function"?null:window.matchMedia(a)}function u(){return o()?.matches??!1}function s(e){const t=o();return t?(t.addEventListener("change",e),()=>t.removeEventListener("change",e)):()=>{}}function f(){return d.useSyncExternalStore(s,u,()=>!1)}exports.prefersReducedMotion=u;exports.useReducedMotion=f;

package/dist/internal/motion.d.ts

@@ -0,0 +1,12 @@
+/** Read at the moment of asking. For code that animates once, then forgets. */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * The same preference as React state, so a component re-renders when the
+ * setting changes while it is on screen.
+ *
+ * `false` on the server, and during hydration, which renders what the server
+ * did before correcting itself. A component rendered on the client after that
+ * reads the real value on its first render. A portaled overlay does not render
+ * on the server anyway, and opens after hydration, so it animates correctly.
+ */
+export declare function useReducedMotion(): boolean;

package/dist/internal/motion.js

@@ -0,0 +1,21 @@
+"use client";
+import * as r from "react";
+const u = "(prefers-reduced-motion: reduce)";
+function t() {
+  return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(u);
+}
+function i() {
+  return t()?.matches ?? !1;
+}
+function o(n) {
+  const e = t();
+  return e ? (e.addEventListener("change", n), () => e.removeEventListener("change", n)) : () => {
+  };
+}
+function c() {
+  return r.useSyncExternalStore(o, i, () => !1);
+}
+export {
+  i as prefersReducedMotion,
+  c as useReducedMotion
+};

package/dist/internal/page-inert.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u="data-roster-toaster",d="headlessui-portal-root",f={[u]:""},n=[],i=new Map,o=new Set;let r=null;function c(e){return e.id===d||e.hasAttribute(u)||n.includes(e)}function l(e){i.set(e,e.getAttribute("aria-hidden")),e.inert=!0,e.setAttribute("aria-hidden","true")}function h(e){if(!i.has(e))return;const t=i.get(e);i.delete(e),e.inert=!1,t===null?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",t)}function s(){const e=document.body;for(const t of Array.from(i.keys()))(!n.length||t.parentElement!==e||c(t))&&h(t);if(n.length)for(const t of Array.from(e.children))!(t instanceof HTMLElement)||i.has(t)||c(t)||(t.inert?o.add(t):o.has(t)||l(t));n.length||o.clear(),n.length&&!r?(r=new MutationObserver(s),r.observe(e,{childList:!0})):!n.length&&r&&(r.disconnect(),r=null)}function A(e){if(typeof document>"u")return()=>{};const t=e?.closest("body > *")??null;n.push(t),s();let a=!1;return()=>{a||(a=!0,n.splice(n.indexOf(t),1),s())}}exports.TOASTER_MARKER=f;exports.lockPage=A;

package/dist/internal/page-inert.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Makes the page behind an open `Dialog` or `Sheet` inert and hidden from
+ * assistive technology, all of it.
+ *
+ * Internal, and not exported from the package.
+ *
+ * Headless UI does part of this and not the rest. It marks exactly one child
+ * of `<body>`: the one the dialog is rendered from, found with
+ * `closest("body > *:not(#headlessui-portal-root)")`, plus the dialog's
+ * sibling portals. A page laid out as `body > header, main, footer` gets only
+ * its `<main>` marked, and the header and footer stay reachable by a screen
+ * reader's virtual cursor. A toast host mounted inside that one child goes the
+ * other way: it is marked, and a toast shown over the dialog is not announced.
+ *
+ * So while any lock is held, every direct child of `<body>` is `inert` and
+ * `aria-hidden`, except three:
+ *
+ * - Headless UI's portal root, which holds the dialog itself and any dialog
+ *   stacked on it. Headless UI handles what is inside it.
+ * - Anything carrying `data-roster-toaster`, which `Toaster` renders into.
+ * - The child each lock was taken from. That one is Headless UI's, and it is
+ *   left to Headless UI because two owners of one element can not both
+ *   restore it: each records what it found, and whichever restores second
+ *   writes back the other's `inert`, leaving the page stuck. Which one goes
+ *   second depends on render timing, so skipping the element is the only
+ *   order that is always right.
+ *
+ * The same reasoning covers an element that is already `inert` when a lock
+ * reaches it: someone else marked it (a dialog built on Headless UI directly,
+ * say, with a Roster one opened inside it) and will restore it. It stays
+ * theirs until the last lock is released, even if they let go of it in the
+ * meantime. Headless UI does let go and re-mark when the dialog on top
+ * changes, and marking it in that gap would make a second owner after all.
+ * The cost is that such an element can be live while a lock is held; the
+ * alternative is a page left inert after every dialog has closed.
+ *
+ * Locks are counted. The page is marked on the first and restored on the
+ * last. Each element the lock marked gets back the `aria-hidden` it had and
+ * is made not inert, which is what it was, so a page that marked something
+ * itself keeps it.
+ */
+/** Put on the element `Toaster` renders into, so a toast stays announced. */
+export declare const TOASTER_MARKER: {
+    readonly "data-roster-toaster": "";
+};
+/**
+ * Takes a lock for a dialog rendered at `anchor`: any element in the tree
+ * where the dialog is written, not inside its portal. Returns the release,
+ * which is safe to call more than once.
+ */
+export declare function lockPage(anchor: Element | null): () => void;

package/dist/internal/page-inert.js

@@ -0,0 +1,36 @@
+const u = "data-roster-toaster", d = "headlessui-portal-root", h = { [u]: "" }, n = [], i = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Set();
+let r = null;
+function c(e) {
+  return e.id === d || e.hasAttribute(u) || n.includes(e);
+}
+function f(e) {
+  i.set(e, e.getAttribute("aria-hidden")), e.inert = !0, e.setAttribute("aria-hidden", "true");
+}
+function l(e) {
+  if (!i.has(e)) return;
+  const t = i.get(e);
+  i.delete(e), e.inert = !1, t === null ? e.removeAttribute("aria-hidden") : e.setAttribute("aria-hidden", t);
+}
+function s() {
+  const e = document.body;
+  for (const t of Array.from(i.keys()))
+    (!n.length || t.parentElement !== e || c(t)) && l(t);
+  if (n.length)
+    for (const t of Array.from(e.children))
+      !(t instanceof HTMLElement) || i.has(t) || c(t) || (t.inert ? o.add(t) : o.has(t) || f(t));
+  n.length || o.clear(), n.length && !r ? (r = new MutationObserver(s), r.observe(e, { childList: !0 })) : !n.length && r && (r.disconnect(), r = null);
+}
+function A(e) {
+  if (typeof document > "u") return () => {
+  };
+  const t = e?.closest("body > *") ?? null;
+  n.push(t), s();
+  let a = !1;
+  return () => {
+    a || (a = !0, n.splice(n.indexOf(t), 1), s());
+  };
+}
+export {
+  h as TOASTER_MARKER,
+  A as lockPage
+};