@blakesteve/roster 5.0.1 → 5.2.0

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

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

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

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

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

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

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

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

package/dist/components/molecules/LiquidTabs/LiquidNav.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),b=require("react"),a=require("./liquid-pill.cjs"),N=require("../../../lib/utils.cjs");function I({href:r,className:t,children:d,onClick:c,"aria-current":l,"data-tab-id":s}){return u.jsx("a",{href:r,className:t,onClick:c,"aria-current":l,"data-tab-id":s,children:d})}function P({items:r,activeTab:t,onChange:d,linkComponent:c,variant:l="pill",fullWidth:s=!1,size:q="md","aria-label":y,"aria-labelledby":L,className:p}){const o=b.useRef(null),f=b.useRef(null),j=c??I;return a.useLiquidPill(o,f,t,r.map(e=>e.id).join("\0")),u.jsxs("nav",{ref:o,"aria-label":y,"aria-labelledby":L,"data-testid":"liquid-nav",style:a.LIQUID_STRIP_STYLE,className:a.liquidStripClassName(l,s,p),children:[u.jsx("div",{ref:f,"aria-hidden":!0,"data-testid":"liquid-tabs-pill",className:a.liquidPillClassName(l),style:a.LIQUID_PILL_STYLE}),r.map(e=>{const n=e.id===t;return u.jsx(j,{href:e.href,to:e.href,"aria-current":n?"page":void 0,"data-tab-id":e.id,onClick:i=>{i.defaultPrevented||i.button!==0||i.metaKey||i.ctrlKey||i.shiftKey||i.altKey||n||d?.(e.id)},className:N.cn(a.liquidItemClassName({variant:l,fullWidth:s,size:q,isActive:n}),"rst:inline-flex rst:items-center rst:justify-center rst:no-underline"),children:typeof e.label=="function"?e.label(n):e.label},e.id)})]})}exports.LiquidNav=P;

package/dist/components/molecules/LiquidTabs/LiquidNav.d.ts

@@ -0,0 +1,62 @@
+import { ComponentType, MouseEvent, ReactNode } from 'react';
+import { LiquidSize, LiquidVariant } from './liquid-pill';
+import { TabItem } from './LiquidTabs';
+export interface LiquidNavItem extends Omit<TabItem, "panelId"> {
+    href: string;
+}
+/**
+ * The props every link is rendered with.
+ *
+ * `href` and `to` carry the same value, so `next/link`, React Router's `Link`
+ * and a plain `<a>` all work without a wrapper. `next/link` passes props it
+ * does not know through to its `<a>`, so the rendered link carries a `to`
+ * attribute too; harmless, and a wrapper can drop it. Forward `data-tab-id`
+ * to the DOM: the pill finds its item by it.
+ */
+export interface LiquidNavLinkProps {
+    href: string;
+    to: string;
+    className: string;
+    children: ReactNode;
+    "aria-current"?: "page";
+    onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+    "data-tab-id": string;
+}
+export interface LiquidNavProps {
+    items: LiquidNavItem[];
+    /** The `id` of the current item. Gets `aria-current="page"` and the pill. */
+    activeTab: string;
+    /**
+     * Called on a plain left click, before navigation. Optional, because the
+     * route usually decides `activeTab`. Modified and middle clicks open
+     * elsewhere and do not call it.
+     */
+    onChange?: (id: string) => void;
+    /**
+     * Renders each link. Defaults to a plain `<a>`, which is right for a static
+     * site and wrong inside a router, where it makes every hop a full page load.
+     *
+     * **Pass it from a client component.** Functions can not cross the React
+     * Server Component boundary, so handing `next/link` over from a server
+     * layout fails the render with "Functions cannot be passed directly to
+     * Client Components". Bind it in a small `"use client"` wrapper.
+     */
+    linkComponent?: ComponentType<LiquidNavLinkProps>;
+    variant?: LiquidVariant;
+    fullWidth?: boolean;
+    size?: LiquidSize;
+    /** Name the navigation; a page with two `nav`s needs both named. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    className?: string;
+}
+/**
+ * `LiquidTabs`' look, for navigation between routes: a `nav` of links rather
+ * than a tablist of buttons.
+ *
+ * It is a separate component, not a mode, because the two are different
+ * things to assistive technology. Tabs switch panels on the same page and take
+ * one tab stop with arrow keys between them; links go somewhere, and each is
+ * its own tab stop, as in any nav.
+ */
+export declare function LiquidNav({ items, activeTab, onChange, linkComponent, variant, fullWidth, size, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, }: LiquidNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/LiquidTabs/LiquidNav.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsxs as q, jsx as u } from "react/jsx-runtime";
+import { useRef as c } from "react";
+import { useLiquidPill as I, LIQUID_STRIP_STYLE as N, LIQUID_PILL_STYLE as h, liquidPillClassName as P, liquidItemClassName as j, liquidStripClassName as x } from "./liquid-pill.js";
+import { cn as C } from "../../../lib/utils.js";
+function K({
+  href: e,
+  className: r,
+  children: n,
+  onClick: d,
+  "aria-current": l,
+  "data-tab-id": t
+}) {
+  return /* @__PURE__ */ u("a", { href: e, className: r, onClick: d, "aria-current": l, "data-tab-id": t, children: n });
+}
+function D({
+  items: e,
+  activeTab: r,
+  onChange: n,
+  linkComponent: d,
+  variant: l = "pill",
+  fullWidth: t = !1,
+  size: b = "md",
+  "aria-label": p,
+  "aria-labelledby": m,
+  className: y
+}) {
+  const o = c(null), f = c(null), L = d ?? K;
+  return I(o, f, r, e.map((a) => a.id).join("\0")), /* @__PURE__ */ q(
+    "nav",
+    {
+      ref: o,
+      "aria-label": p,
+      "aria-labelledby": m,
+      "data-testid": "liquid-nav",
+      style: N,
+      className: x(l, t, y),
+      children: [
+        /* @__PURE__ */ u(
+          "div",
+          {
+            ref: f,
+            "aria-hidden": !0,
+            "data-testid": "liquid-tabs-pill",
+            className: P(l),
+            style: h
+          }
+        ),
+        e.map((a) => {
+          const s = a.id === r;
+          return /* @__PURE__ */ u(
+            L,
+            {
+              href: a.href,
+              to: a.href,
+              "aria-current": s ? "page" : void 0,
+              "data-tab-id": a.id,
+              onClick: (i) => {
+                i.defaultPrevented || i.button !== 0 || i.metaKey || i.ctrlKey || i.shiftKey || i.altKey || s || n?.(a.id);
+              },
+              className: C(
+                j({ variant: l, fullWidth: t, size: b, isActive: s }),
+                /* A button centers its label and draws no underline on its own;
+                   a link does neither, and a host stylesheet may underline it. */
+                "rst:inline-flex rst:items-center rst:justify-center rst:no-underline"
+              ),
+              children: typeof a.label == "function" ? a.label(s) : a.label
+            },
+            a.id
+          );
+        })
+      ]
+    }
+  );
+}
+export {
+  D as LiquidNav
+};

package/dist/components/molecules/LiquidTabs/LiquidTabs.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),d=require("react"),s=require("./liquid-pill.cjs"),_=require("./liquid-tab-id.cjs");function E({tabs:l,activeTab:r,onChange:S,variant:n="pill",fullWidth:q=!1,size:R="md",activation:b="automatic",id:A,"aria-label":h,"aria-labelledby":j,className:k}){const u=d.useRef(null),y=d.useRef(null),w=d.useId(),I=A??w;s.useLiquidPill(u,y,r,l.map(e=>e.id).join("\0"));const p=e=>{e!==r&&S(e)},[a,L]=d.useState(null),x=l.some(e=>e.id===r),N=a!==null&&l.some(e=>e.id===a)?a:x?r:l[0]?.id,P=e=>{e.currentTarget.contains(e.relatedTarget)||L(null)},T=e=>{const i=u.current;if(!i)return;const c=Array.from(i.querySelectorAll('[role="tab"]')),o=c.indexOf(e.target);if(o===-1)return;const f=c.length-1,g=getComputedStyle(i).direction==="rtl",C=g?"ArrowLeft":"ArrowRight",D=g?"ArrowRight":"ArrowLeft";let t;if(e.key===C)t=o===f?0:o+1;else if(e.key===D)t=o===0?f:o-1;else if(e.key==="Home")t=0;else if(e.key==="End")t=f;else return;e.preventDefault(),c[t].focus(),b==="automatic"&&p(l[t].id)};return m.jsxs("div",{ref:u,id:I,role:"tablist","aria-label":h,"aria-labelledby":j,"data-testid":"liquid-tabs",style:s.LIQUID_STRIP_STYLE,className:s.liquidStripClassName(n,q,k),onKeyDown:T,onBlur:P,children:[m.jsx("div",{ref:y,"aria-hidden":!0,"data-testid":"liquid-tabs-pill",className:s.liquidPillClassName(n),style:s.LIQUID_PILL_STYLE}),l.map(e=>{const i=e.id===r;return m.jsx("button",{type:"button",role:"tab",id:_.liquidTabId(I,e.id),"aria-selected":i,"aria-controls":e.panelId,tabIndex:e.id===N?0:-1,"data-tab-id":e.id,"data-testid":`liquid-tab-${e.id}`,onClick:()=>p(e.id),onFocus:()=>L(e.id),className:s.liquidItemClassName({variant:n,fullWidth:q,size:R,isActive:i}),children:typeof e.label=="function"?e.label(i):e.label},e.id)})]})}exports.LiquidTabs=E;

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

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+import { LiquidSize, LiquidVariant } from './liquid-pill';
+export interface TabItem {
+    id: string;
+    /** Static label, or a render function that receives whether this tab is active. */
+    label: ReactNode | ((isActive: boolean) => ReactNode);
+    /**
+     * The `id` of the panel this tab controls, which sets `aria-controls`. Give
+     * every tab the same id when one panel swaps its content.
+     */
+    panelId?: string;
+}
+export interface LiquidTabsProps {
+    tabs: TabItem[];
+    /** The `id` of the currently active tab. */
+    activeTab: string;
+    /** Called with the new tab `id` when the user selects a different tab. */
+    onChange: (id: string) => void;
+    /**
+     * `"pill"` (default): a floating pill inside a padded container, `w-fit`
+     * unless `fullWidth` is set.
+     *
+     * `"filled"`: the active tab fills its whole cell, and the container is
+     * always `w-full`.
+     *
+     * Both squash the pill vertically (`scaleY`) while it stretches between tabs.
+     */
+    variant?: LiquidVariant;
+    /** Stretch the `pill` variant container to full width with `flex-1` buttons. */
+    fullWidth?: boolean;
+    /**
+     * `"md"` (default) keeps the heights this component has always had. `"lg"`
+     * makes every tab at least 44px tall, the WCAG 2.5.5 target size.
+     */
+    size?: LiquidSize;
+    /**
+     * `"automatic"` (default): arrowing onto a tab selects it.
+     * `"manual"`: arrows move focus only, and Enter or Space selects. Use it when
+     * selecting a tab is expensive, like swapping a whole form.
+     */
+    activation?: "automatic" | "manual";
+    /**
+     * The tablist's `id`, and the base of every tab's id: see `liquidTabId`.
+     * Generated when omitted, which is fine unless a panel needs to point back at
+     * its tab with `aria-labelledby`.
+     */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** Extra classes applied to the outer container. */
+    className?: string;
+}
+/**
+ * A controlled tab strip with a liquid sliding indicator.
+ *
+ * Follows the WAI tabs pattern: only the selected tab is in the tab order,
+ * Left and Right move between tabs and wrap, Home and End go to the ends. If
+ * `activeTab` matches no tab, the first tab takes the tab stop and no pill
+ * shows.
+ *
+ * Until script has measured the pill, the active tab paints the pill's color
+ * itself, so server-rendered HTML shows the selection too.
+ *
+ * The pill follows `activeTab`, never the click, so a change the consumer
+ * vetoes, or one that waits on navigation, never leaves it on the wrong tab.
+ *
+ * For navigation between routes, use `LiquidNav`, which renders links.
+ */
+export declare function LiquidTabs({ tabs, activeTab, onChange, variant, fullWidth, size, activation, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, }: LiquidTabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/LiquidTabs/LiquidTabs.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsxs as j, jsx as q } from "react/jsx-runtime";
+import { useRef as L, useId as E, useState as T } from "react";
+import { useLiquidPill as F, LIQUID_STRIP_STYLE as Q, LIQUID_PILL_STYLE as U, liquidPillClassName as Y, liquidItemClassName as B, liquidStripClassName as H } from "./liquid-pill.js";
+import { liquidTabId as K } from "./liquid-tab-id.js";
+function J({
+  tabs: l,
+  activeTab: r,
+  onChange: g,
+  variant: s = "pill",
+  fullWidth: u = !1,
+  size: A = "md",
+  activation: S = "automatic",
+  id: h,
+  "aria-label": k,
+  "aria-labelledby": w,
+  className: N
+}) {
+  const d = L(null), f = L(null), R = E(), m = h ?? R;
+  F(d, f, r, l.map((e) => e.id).join("\0"));
+  const p = (e) => {
+    e !== r && g(e);
+  }, [n, y] = T(null), x = l.some((e) => e.id === r), C = n !== null && l.some((e) => e.id === n) ? n : x ? r : l[0]?.id, b = (e) => {
+    e.currentTarget.contains(e.relatedTarget) || y(null);
+  }, D = (e) => {
+    const i = d.current;
+    if (!i) return;
+    const a = Array.from(
+      i.querySelectorAll('[role="tab"]')
+    ), o = a.indexOf(e.target);
+    if (o === -1) return;
+    const c = a.length - 1, I = getComputedStyle(i).direction === "rtl", P = I ? "ArrowLeft" : "ArrowRight", _ = I ? "ArrowRight" : "ArrowLeft";
+    let t;
+    if (e.key === P) t = o === c ? 0 : o + 1;
+    else if (e.key === _) t = o === 0 ? c : o - 1;
+    else if (e.key === "Home") t = 0;
+    else if (e.key === "End") t = c;
+    else return;
+    e.preventDefault(), a[t].focus(), S === "automatic" && p(l[t].id);
+  };
+  return /* @__PURE__ */ j(
+    "div",
+    {
+      ref: d,
+      id: m,
+      role: "tablist",
+      "aria-label": k,
+      "aria-labelledby": w,
+      "data-testid": "liquid-tabs",
+      style: Q,
+      className: H(s, u, N),
+      onKeyDown: D,
+      onBlur: b,
+      children: [
+        /* @__PURE__ */ q(
+          "div",
+          {
+            ref: f,
+            "aria-hidden": !0,
+            "data-testid": "liquid-tabs-pill",
+            className: Y(s),
+            style: U
+          }
+        ),
+        l.map((e) => {
+          const i = e.id === r;
+          return /* @__PURE__ */ q(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              id: K(m, e.id),
+              "aria-selected": i,
+              "aria-controls": e.panelId,
+              tabIndex: e.id === C ? 0 : -1,
+              "data-tab-id": e.id,
+              "data-testid": `liquid-tab-${e.id}`,
+              onClick: () => p(e.id),
+              onFocus: () => y(e.id),
+              className: B({ variant: s, fullWidth: u, size: A, isActive: i }),
+              children: typeof e.label == "function" ? e.label(i) : e.label
+            },
+            e.id
+          );
+        })
+      ]
+    }
+  );
+}
+export {
+  J as LiquidTabs
+};

package/dist/components/molecules/LiquidTabs/liquid-pill.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),d=require("../../../lib/utils.cjs"),L=require("../../../internal/motion.cjs");function v(s,i,n){return d.cn("rst:font-ui rst:relative rst:flex rst:border",s==="filled"?"rst:w-full rst:overflow-hidden rst:rounded-lg":d.cn("rst:gap-1 rst:rounded-xl rst:p-1",i?"rst:w-full":"rst:w-fit"),n)}const w={background:"var(--roster-lt-bg)",borderColor:"var(--roster-lt-border)"};function x(s){return d.cn("rst:absolute rst:rounded-lg",s==="filled"?"rst:top-0 rst:bottom-0":"rst:top-1 rst:bottom-1")}const q={opacity:0,left:0,width:0,background:"var(--roster-lt-pill)"};function C({variant:s,fullWidth:i,size:n,isActive:p}){return d.cn("rst:relative rst:z-10 rst:text-sm rst:font-medium rst:transition-colors rst:cursor-pointer","rst:focus-visible:outline-2 rst:focus-visible:-outline-offset-4 rst:focus-visible:outline-current",n==="lg"&&"rst:min-h-11",s==="filled"?"rst:flex-1 rst:py-2":d.cn("rst:rounded-lg rst:py-1.5",i?"rst:flex-1":"rst:px-4"),p?"rst:text-(--roster-lt-text-active) rst:bg-(--roster-lt-pill) rst:in-data-[pill-ready]:bg-transparent":"rst:text-(--roster-lt-text-inactive) rst:hover:text-(--roster-lt-text-hover)")}function S(s,i,n,p){const y=o.useRef(null),u=o.useRef(null),g=o.useRef(n),h=o.useRef(null),a=o.useCallback(e=>{const t=s.current;if(!t)return null;const l=Array.from(t.querySelectorAll("[data-tab-id]")).find(b=>b.dataset.tabId===e);if(!l)return null;const r=t.getBoundingClientRect(),c=l.getBoundingClientRect();return{left:c.left-r.left-t.clientLeft+t.scrollLeft,width:c.width}},[s]),f=o.useCallback((e,t,l)=>{const r=i.current;r&&(r.style.transition=t,r.style.left=`${e.left}px`,r.style.width=`${e.width}px`,r.style.transform=`scaleY(${l})`)},[i]),m=o.useCallback(()=>{const e=i.current,t=a(g.current);if(y.current=t,!!e){if(!t){e.style.opacity="0";return}f(t,"none",1),e.style.opacity="1",s.current?.setAttribute("data-pill-ready","")}},[f,s,a,i]);o.useLayoutEffect(()=>{g.current=n;const e=y.current,t=a(n),l=h.current!==null&&h.current!==n;if(h.current=n,u.current&&(clearTimeout(u.current),u.current=null),!e||!t||!l||L.prefersReducedMotion()){m();return}const r=Math.min(e.left,t.left),c=Math.max(e.left+e.width,t.left+t.width);f({left:r,width:c-r},"left 130ms ease-out, width 130ms ease-out, transform 130ms ease-out",.55),u.current=setTimeout(()=>{u.current=null;const b=a(n)??t;y.current=b,f(b,"left 160ms ease-in, width 160ms ease-in, transform 160ms ease-in",1)},130)},[n,f,a,m]),o.useEffect(()=>{const e=s.current;if(!e)return;const t=()=>{u.current||m()};let l;typeof ResizeObserver<"u"&&(l=new ResizeObserver(t),l.observe(e),e.querySelectorAll("[data-tab-id]").forEach(c=>l.observe(c)));let r=!0;return document.fonts?.ready.then(()=>{r&&t()}),()=>{r=!1,l?.disconnect()}},[s,p,m]),o.useEffect(()=>()=>{u.current&&clearTimeout(u.current)},[])}exports.LIQUID_PILL_STYLE=q;exports.LIQUID_STRIP_STYLE=w;exports.liquidItemClassName=C;exports.liquidPillClassName=x;exports.liquidStripClassName=v;exports.useLiquidPill=S;

package/dist/components/molecules/LiquidTabs/liquid-pill.d.ts

@@ -0,0 +1,56 @@
+import { RefObject } from 'react';
+/**
+ * What `LiquidTabs` and `LiquidNav` share: the strip, the pill, and the motion.
+ *
+ * Internal. The two components differ in semantics only (a tablist of buttons,
+ * or a `nav` of links), so everything here is about how they look and move.
+ */
+export type LiquidVariant = "pill" | "filled";
+export type LiquidSize = "md" | "lg";
+export declare function liquidStripClassName(variant: LiquidVariant, fullWidth: boolean, className?: string): string;
+export declare const LIQUID_STRIP_STYLE: {
+    readonly background: "var(--roster-lt-bg)";
+    readonly borderColor: "var(--roster-lt-border)";
+};
+export declare function liquidPillClassName(variant: LiquidVariant): string;
+export declare const LIQUID_PILL_STYLE: {
+    readonly opacity: 0;
+    readonly left: 0;
+    readonly width: 0;
+    readonly background: "var(--roster-lt-pill)";
+};
+/**
+ * One tab or link.
+ *
+ * The focus indicator is an outline drawn inside the item, in its own text
+ * color. Inside, because the `filled` strip clips its overflow and an outer
+ * ring would lose its sides. The text color, because it is the one color
+ * guaranteed to read against whatever is behind the item: the pill under the
+ * active one, the strip under the rest. The library's `--roster-ring` would sit
+ * on a pill painted `primary-500` by default, which is the ring's own color.
+ * An outline rather than a box-shadow ring, because forced-colors mode drops
+ * box-shadows and keeps outlines.
+ */
+export declare function liquidItemClassName({ variant, fullWidth, size, isActive, }: {
+    variant: LiquidVariant;
+    fullWidth: boolean;
+    size: LiquidSize;
+    isActive: boolean;
+}): string;
+/**
+ * Drives the pill from `activeId`, and only from `activeId`.
+ *
+ * Earlier versions moved the pill on click, before the consumer had decided
+ * anything, so a vetoed change or a slow navigation left it on the wrong item.
+ * It now follows the controlled value, so it is wherever the consumer says the
+ * selection is.
+ *
+ * Positions are written straight to the DOM, so the animation itself never
+ * renders: only the change of `activeId` does. Two phases:
+ *   1. Stretch: the pill spans old and new item (130ms ease-out, `scaleY(0.55)`).
+ *   2. Contract: it settles on the new one (160ms ease-in).
+ * Under `prefers-reduced-motion` it moves without either.
+ */
+export declare function useLiquidPill(containerRef: RefObject<HTMLElement | null>, pillRef: RefObject<HTMLDivElement | null>, activeId: string, 
+/** Changes whenever the set of items does, so new items get observed. */
+itemsKey: string): void;

package/dist/components/molecules/LiquidTabs/liquid-pill.js

@@ -0,0 +1,129 @@
+"use client";
+import { useRef as p, useCallback as g, useLayoutEffect as w, useEffect as v } from "react";
+import { cn as a } from "../../../lib/utils.js";
+import { prefersReducedMotion as L } from "../../../internal/motion.js";
+function S(s, o, n) {
+  return a(
+    "rst:font-ui rst:relative rst:flex rst:border",
+    s === "filled" ? "rst:w-full rst:overflow-hidden rst:rounded-lg" : a("rst:gap-1 rst:rounded-xl rst:p-1", o ? "rst:w-full" : "rst:w-fit"),
+    n
+  );
+}
+const E = {
+  background: "var(--roster-lt-bg)",
+  borderColor: "var(--roster-lt-border)"
+};
+function A(s) {
+  return a(
+    "rst:absolute rst:rounded-lg",
+    s === "filled" ? "rst:top-0 rst:bottom-0" : "rst:top-1 rst:bottom-1"
+  );
+}
+const P = {
+  opacity: 0,
+  left: 0,
+  width: 0,
+  background: "var(--roster-lt-pill)"
+};
+function _({
+  variant: s,
+  fullWidth: o,
+  size: n,
+  isActive: b
+}) {
+  return a(
+    "rst:relative rst:z-10 rst:text-sm rst:font-medium rst:transition-colors rst:cursor-pointer",
+    "rst:focus-visible:outline-2 rst:focus-visible:-outline-offset-4 rst:focus-visible:outline-current",
+    /* `lg` is the 44px target (WCAG 2.5.5). `md` keeps the heights every
+       existing consumer laid out against. */
+    n === "lg" && "rst:min-h-11",
+    s === "filled" ? "rst:flex-1 rst:py-2" : a("rst:rounded-lg rst:py-1.5", o ? "rst:flex-1" : "rst:px-4"),
+    /* Until the pill has been measured, which needs script, the active item
+       paints the pill's color itself. Without it, server-rendered HTML shows
+       the active label in the pill's ink on the strip's background, which by
+       default is white on white. */
+    b ? "rst:text-(--roster-lt-text-active) rst:bg-(--roster-lt-pill) rst:in-data-[pill-ready]:bg-transparent" : "rst:text-(--roster-lt-text-inactive) rst:hover:text-(--roster-lt-text-hover)"
+  );
+}
+function k(s, o, n, b) {
+  const y = p(null), i = p(null), x = p(n), h = p(null), c = g(
+    (r) => {
+      const t = s.current;
+      if (!t) return null;
+      const l = Array.from(
+        t.querySelectorAll("[data-tab-id]")
+      ).find((m) => m.dataset.tabId === r);
+      if (!l) return null;
+      const e = t.getBoundingClientRect(), u = l.getBoundingClientRect();
+      return {
+        left: u.left - e.left - t.clientLeft + t.scrollLeft,
+        width: u.width
+      };
+    },
+    [s]
+  ), f = g(
+    (r, t, l) => {
+      const e = o.current;
+      e && (e.style.transition = t, e.style.left = `${r.left}px`, e.style.width = `${r.width}px`, e.style.transform = `scaleY(${l})`);
+    },
+    [o]
+  ), d = g(() => {
+    const r = o.current, t = c(x.current);
+    if (y.current = t, !!r) {
+      if (!t) {
+        r.style.opacity = "0";
+        return;
+      }
+      f(t, "none", 1), r.style.opacity = "1", s.current?.setAttribute("data-pill-ready", "");
+    }
+  }, [f, s, c, o]);
+  w(() => {
+    x.current = n;
+    const r = y.current, t = c(n), l = h.current !== null && h.current !== n;
+    if (h.current = n, i.current && (clearTimeout(i.current), i.current = null), !r || !t || !l || L()) {
+      d();
+      return;
+    }
+    const e = Math.min(r.left, t.left), u = Math.max(r.left + r.width, t.left + t.width);
+    f(
+      { left: e, width: u - e },
+      "left 130ms ease-out, width 130ms ease-out, transform 130ms ease-out",
+      0.55
+    ), i.current = setTimeout(() => {
+      i.current = null;
+      const m = c(n) ?? t;
+      y.current = m, f(
+        m,
+        "left 160ms ease-in, width 160ms ease-in, transform 160ms ease-in",
+        1
+      );
+    }, 130);
+  }, [n, f, c, d]), v(() => {
+    const r = s.current;
+    if (!r) return;
+    const t = () => {
+      i.current || d();
+    };
+    let l;
+    typeof ResizeObserver < "u" && (l = new ResizeObserver(t), l.observe(r), r.querySelectorAll("[data-tab-id]").forEach((u) => l.observe(u)));
+    let e = !0;
+    return document.fonts?.ready.then(() => {
+      e && t();
+    }), () => {
+      e = !1, l?.disconnect();
+    };
+  }, [s, b, d]), v(
+    () => () => {
+      i.current && clearTimeout(i.current);
+    },
+    []
+  );
+}
+export {
+  P as LIQUID_PILL_STYLE,
+  E as LIQUID_STRIP_STYLE,
+  _ as liquidItemClassName,
+  A as liquidPillClassName,
+  S as liquidStripClassName,
+  k as useLiquidPill
+};

package/dist/components/molecules/LiquidTabs/liquid-tab-id.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function i(t,e){return`${t}-tab-${e}`}exports.liquidTabId=i;

package/dist/components/molecules/LiquidTabs/liquid-tab-id.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The `id` a `LiquidTabs` tab renders with, for a panel's `aria-labelledby`.
+ *
+ * ```tsx
+ * <LiquidTabs id="views" tabs={tabs} activeTab={view} onChange={setView} />
+ * <div role="tabpanel" id="views-panel" aria-labelledby={liquidTabId("views", view)}>
+ * ```
+ *
+ * The tab's own `id` is used verbatim, so keep it free of whitespace. A module
+ * of its own, with no React in it, so a server component can call it too.
+ */
+export declare function liquidTabId(listId: string, tabId: string): string;

package/dist/components/molecules/LiquidTabs/liquid-tab-id.js

@@ -0,0 +1,6 @@
+function n(t, i) {
+  return `${t}-tab-${i}`;
+}
+export {
+  n as liquidTabId
+};