@blakesteve/roster 5.0.0 → 5.1.0

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

@@ -0,0 +1,82 @@
+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.
+     *
+     * Changing it 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: string;
+    /** 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,303 @@
+"use client";
+import { jsxs as d, Fragment as G, jsx as n } from "react/jsx-runtime";
+import * as s from "react";
+import { Description as K } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Dialog as Q, DialogBackdrop as H, DialogPanel as J, DialogTitle as Z } from "../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js";
+import { TransitionChild as W } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+import { cn as f } from "../../../lib/utils.js";
+import { useDarkScope as O } from "../../../internal/popup.js";
+import { useReducedMotion as tt } from "../../../internal/motion.js";
+import { lockPage as et } from "../../../internal/page-inert.js";
+import { sheetDragOutcome as rt, sheetReleaseVelocity as st, exceedsSheetTapSlop as nt } from "./sheet-drag.js";
+const ot = "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", at = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", it = "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", ct = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", ut = [
+  "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 lt(r) {
+  return r ? "current" in r ? r.current : r : null;
+}
+function dt({ target: r }) {
+  const l = s.useRef(r), p = s.useRef(!1);
+  return s.useEffect(() => {
+    l.current = r;
+  }), s.useEffect(() => (p.current = !1, () => {
+    p.current = !0, queueMicrotask(() => {
+      if (!p.current) return;
+      const c = lt(l.current);
+      c?.isConnected && c.focus();
+    });
+  }), []), null;
+}
+function ft() {
+  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 Rt = ({
+  isOpen: r,
+  onClose: l,
+  onAfterClose: p,
+  title: c,
+  hideTitle: j = !1,
+  description: C,
+  actions: L,
+  maxWidth: b = 560,
+  initialFocus: v,
+  returnFocus: z,
+  busy: h = !1,
+  dragToDismiss: x = !0,
+  contentKey: m,
+  className: Y,
+  children: B
+}) => {
+  const { ref: E, inDarkScope: T } = O(), N = tt();
+  s.useLayoutEffect(() => {
+    if (r)
+      return et(E.current);
+  }, [r, E]);
+  const i = s.useRef(null), D = s.useRef(null), I = s.useRef(null), R = s.useRef(null), k = s.useRef(null), w = s.useId(), P = s.useRef({ title: c, contentKey: m, open: r, busy: h });
+  s.useEffect(() => {
+    const t = P.current;
+    if (P.current = { title: c, contentKey: m, open: r, busy: h }, !t.open || !r) return;
+    const e = t.contentKey !== m, o = t.title !== c && !t.busy;
+    !e && !o || (I.current?.focus(), k.current && (k.current.scrollTop = 0));
+  }, [c, m, r, h]), s.useEffect(() => {
+    if (!r) return;
+    const t = requestAnimationFrame(() => {
+      const e = i.current, o = document.activeElement;
+      !e || o && e.contains(o) || (v?.current ?? R.current)?.focus();
+    });
+    return () => cancelAnimationFrame(t);
+  }, [r, v]);
+  const [S, M] = s.useState(null);
+  s.useEffect(() => {
+    if (!r) return;
+    const t = window.visualViewport;
+    if (!t) return;
+    const e = () => {
+      const o = document.activeElement, u = !!o && !!i.current?.contains(o) && o.matches(ut);
+      M(u ? 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), M(null);
+    };
+  }, [r]);
+  const a = s.useRef(null), g = s.useRef(!1), A = s.useRef(r);
+  s.useEffect(() => {
+    A.current = r;
+  }, [r]);
+  const y = (t) => {
+    i.current?.style.setProperty("--rst-sheet-drag", `${t}px`);
+  }, F = (t) => {
+    const e = i.current;
+    a.current = null, e && (delete e.dataset.dragging, t === "close" ? (l(), requestAnimationFrame(() => {
+      A.current && !a.current && y(0);
+    })) : y(0));
+  };
+  s.useEffect(() => {
+    !r && a.current && (a.current = null, i.current && delete i.current.dataset.dragging), r && !a.current && y(0);
+  }, [r]);
+  const _ = (t) => {
+    a.current || (g.current = !1, !(!x || !r) && (t.pointerType === "mouse" && (t.button !== 0 || !D.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 }]
+    })));
+  }, q = (t) => {
+    const e = a.current;
+    if (!e || t.pointerId !== e.pointerId) return;
+    const o = t.clientX - e.x0, u = t.clientY - e.y0;
+    if (e.phase === "pending") {
+      if (!nt(o, u)) return;
+      if (Math.abs(o) > Math.abs(u)) {
+        e.phase = "ignored";
+        return;
+      }
+      e.phase = "dragging", g.current = !0;
+      try {
+        t.currentTarget.setPointerCapture(t.pointerId);
+      } catch {
+      }
+      i.current && (i.current.dataset.dragging = "");
+    }
+    e.phase === "dragging" && (e.dy = u, e.samples.push({ t: t.timeStamp, y: t.clientY }), e.samples.length > 32 && e.samples.shift(), y(Math.max(0, 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, u = i.current?.getBoundingClientRect().height ?? 0;
+    F(rt(o, u, st(e.samples)));
+  }, U = (t) => {
+    const e = a.current;
+    !e || t.pointerId !== e.pointerId || (e.phase === "dragging" ? F("stay") : a.current = null);
+  }, V = (t) => {
+    !g.current || t.detail === 0 || (g.current = !1, t.preventDefault(), t.stopPropagation());
+  }, X = {
+    "--rst-sheet-max-width": typeof b == "number" ? `${b}px` : b,
+    ...S !== null && { "--rst-sheet-keyboard-cap": `${S}px` }
+  };
+  return /* @__PURE__ */ d(G, { children: [
+    /* @__PURE__ */ n("span", { ref: E, hidden: !0 }),
+    /* @__PURE__ */ d(
+      Q,
+      {
+        open: r,
+        as: "div",
+        onClose: l,
+        initialFocus: v ?? R,
+        className: f(
+          "rst:font-ui rst:relative rst:z-50 rst:focus:outline-hidden",
+          T && "dark"
+        ),
+        children: [
+          /* @__PURE__ */ n(
+            H,
+            {
+              transition: !0,
+              "data-testid": "sheet-backdrop",
+              className: f(
+                "rst:fixed rst:inset-0 rst:bg-(--roster-sheet-backdrop)",
+                N ? ct : it
+              )
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "rst:fixed rst:inset-0 rst:flex rst:items-end rst:justify-center", children: /* @__PURE__ */ n(W, { afterLeave: p, children: /* @__PURE__ */ d(
+            J,
+            {
+              ref: i,
+              style: X,
+              "data-testid": "sheet-panel",
+              className: f(
+                /* 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)]",
+                N ? at : ot,
+                "rst:data-dragging:transition-none",
+                Y
+              ),
+              children: [
+                /* @__PURE__ */ d(
+                  "div",
+                  {
+                    "data-testid": "sheet-drag-zone",
+                    className: f("rst:shrink-0", x && "rst:touch-none"),
+                    onPointerDown: _,
+                    onPointerMove: q,
+                    onPointerUp: $,
+                    onPointerCancel: U,
+                    onClickCapture: V,
+                    children: [
+                      /* @__PURE__ */ n(
+                        "div",
+                        {
+                          ref: D,
+                          "aria-hidden": "true",
+                          "data-testid": "sheet-handle",
+                          className: f(
+                            /* 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",
+                            x && "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__ */ d("div", { className: "rst:-mt-3 rst:flex rst:items-start rst:gap-2 rst:px-5 rst:pb-4", children: [
+                        /* @__PURE__ */ d("div", { className: "rst:min-w-0 rst:flex-1 rst:pt-2", children: [
+                          /* @__PURE__ */ n(
+                            Z,
+                            {
+                              as: "h2",
+                              id: w,
+                              ref: I,
+                              tabIndex: -1,
+                              className: f(
+                                "rst:text-lg rst:font-semibold rst:text-inherit rst:focus:outline-hidden",
+                                j && "rst:sr-only"
+                              ),
+                              children: c
+                            }
+                          ),
+                          C && /* @__PURE__ */ n(
+                            K,
+                            {
+                              as: "p",
+                              className: "rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75",
+                              children: C
+                            }
+                          )
+                        ] }),
+                        L && /* 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: L }),
+                        /* @__PURE__ */ n(
+                          "button",
+                          {
+                            ref: R,
+                            type: "button",
+                            onClick: l,
+                            "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(ft, {})
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    ref: k,
+                    role: "region",
+                    "aria-labelledby": w,
+                    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: B
+                  }
+                ),
+                /* @__PURE__ */ n(dt, { target: z })
+              ]
+            }
+          ) }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Rt 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/hooks/useCountdown.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),l=require("../node_modules/date-fns/isAfter.cjs"),f=require("../node_modules/date-fns/intervalToDuration.cjs"),m=u=>{const e=u.getTime(),n=i.useCallback(()=>{const t=new Date,s=new Date(e);if(l.isAfter(t,s))return{days:0,hours:0,minutes:0,seconds:0,isFinished:!0};const r=f.intervalToDuration({start:t,end:s});return{days:r.days??0,hours:r.hours??0,minutes:r.minutes??0,seconds:r.seconds??0,isFinished:!1}},[e]),[a,o]=i.useState(n),[c,d]=i.useState(e);return Object.is(c,e)||(d(e),o(n())),i.useEffect(()=>{if(Number.isNaN(e))return;const t=setInterval(()=>{const s=n();o(s),s.isFinished&&clearInterval(t)},1e3);return()=>clearInterval(t)},[e,n]),a};exports.useCountdown=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),l=o=>{const e=o.getTime(),n=r.useCallback(()=>{if(Number.isNaN(e))return{days:0,hours:0,minutes:0,seconds:0,isFinished:!1};const s=e-Date.now();if(s<0)return{days:0,hours:0,minutes:0,seconds:0,isFinished:!0};const t=Math.floor(s/1e3);return{days:Math.floor(t/86400),hours:Math.floor(t%86400/3600),minutes:Math.floor(t%3600/60),seconds:t%60,isFinished:!1}},[e]),[a,i]=r.useState(n),[u,c]=r.useState(e);return Object.is(u,e)||(c(e),i(n())),r.useEffect(()=>{if(Number.isNaN(e))return;const s=setInterval(()=>{const t=n();i(t),t.isFinished&&clearInterval(s)},1e3);return()=>clearInterval(s)},[e,n]),a};exports.useCountdown=l;

package/dist/hooks/useCountdown.d.ts

@@ -1,8 +1,17 @@
 interface CountdownResult {
+    /**
+     * Whole days remaining, as the full total rather than a remainder within a
+     * month. A target a year out reads 365, so a display that assumes two digits
+     * needs room for three.
+     */
     days: number;
+    /** Hours past the whole days, 0 to 23. */
     hours: number;
+    /** Minutes past the whole hours, 0 to 59. */
     minutes: number;
+    /** Seconds past the whole minutes, 0 to 59. */
     seconds: number;
+    /** True once the target has passed. Stays false for an invalid target. */
     isFinished: boolean;
 }
 export declare const useCountdown: (targetDate: Date) => CountdownResult;

package/dist/hooks/useCountdown.js

@@ -1,33 +1,30 @@
 "use client";
-import { useCallback as m, useState as o, useEffect as f } from "react";
-import { isAfter as l } from "../node_modules/date-fns/isAfter.js";
-import { intervalToDuration as h } from "../node_modules/date-fns/intervalToDuration.js";
-const F = (a) => {
-  const e = a.getTime(), n = m(() => {
-    const t = /* @__PURE__ */ new Date(), s = new Date(e);
-    if (l(t, s))
+import { useCallback as l, useState as i, useEffect as f } from "react";
+const m = (o) => {
+  const e = o.getTime(), n = l(() => {
+    if (Number.isNaN(e))
+      return { days: 0, hours: 0, minutes: 0, seconds: 0, isFinished: !1 };
+    const s = e - Date.now();
+    if (s < 0)
       return { days: 0, hours: 0, minutes: 0, seconds: 0, isFinished: !0 };
-    const r = h({
-      start: t,
-      end: s
-    });
+    const t = Math.floor(s / 1e3);
     return {
-      days: r.days ?? 0,
-      hours: r.hours ?? 0,
-      minutes: r.minutes ?? 0,
-      seconds: r.seconds ?? 0,
+      days: Math.floor(t / 86400),
+      hours: Math.floor(t % 86400 / 3600),
+      minutes: Math.floor(t % 3600 / 60),
+      seconds: t % 60,
       isFinished: !1
     };
-  }, [e]), [u, i] = o(n), [c, d] = o(e);
-  return Object.is(c, e) || (d(e), i(n())), f(() => {
+  }, [e]), [a, r] = i(n), [u, c] = i(e);
+  return Object.is(u, e) || (c(e), r(n())), f(() => {
     if (Number.isNaN(e)) return;
-    const t = setInterval(() => {
-      const s = n();
-      i(s), s.isFinished && clearInterval(t);
+    const s = setInterval(() => {
+      const t = n();
+      r(t), t.isFinished && clearInterval(s);
     }, 1e3);
-    return () => clearInterval(t);
-  }, [e, n]), u;
+    return () => clearInterval(s);
+  }, [e, n]), a;
 };
 export {
-  F as useCountdown
+  m as useCountdown
 };

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,9 @@ 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/CallToAction/CallToAction';
 export * from './components/molecules/CallToAction/call-to-action-variants';
 export * from './components/molecules/EmptyState/EmptyState';
@@ -72,6 +74,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;