@blakesteve/roster 5.0.0 → 5.1.0

package/dist/components/atoms/Switch/Switch.js

@@ -1,65 +1,67 @@
 "use client";
-import { jsxs as m, jsx as s } from "react/jsx-runtime";
-import { Description as x } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as h } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
-import { Label as d } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
-import { Switch as g } from "../../../node_modules/@headlessui/react/dist/components/switch/switch.js";
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { Description as l } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Field as u } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Label as g } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
+import { Switch as y } from "../../../node_modules/@headlessui/react/dist/components/switch/switch.js";
 import { cn as t } from "../../../lib/utils.js";
-import { switchThumbVariants as u, switchTrackVariants as y } from "./switch-variants.js";
-const S = ({
+import { switchThumbVariants as d, switchTrackVariants as N } from "./switch-variants.js";
+const V = ({
   checked: c,
-  onChange: o,
+  onChange: n,
   label: r,
-  description: a,
-  disabled: e = !1,
-  size: i,
-  variant: n,
-  className: l,
-  ariaLabel: p
+  description: e,
+  disabled: s = !1,
+  labelClickable: i = !0,
+  size: m,
+  variant: p,
+  className: f,
+  ariaLabel: x
 }) => {
-  const f = r ? void 0 : p || "Toggle setting";
-  return /* @__PURE__ */ m(
-    h,
+  const h = r ? void 0 : x || "Toggle setting";
+  return /* @__PURE__ */ o(
+    u,
     {
       as: "div",
-      className: t("rst:flex rst:items-center rst:justify-between rst:gap-4", l),
+      className: t("rst:flex rst:items-center rst:justify-between rst:gap-4", f),
       children: [
-        (r || a) && /* @__PURE__ */ m("span", { className: "rst:flex rst:flex-col", children: [
-          r && /* @__PURE__ */ s(
-            d,
+        (r || e) && /* @__PURE__ */ o("span", { className: "rst:flex rst:flex-col", children: [
+          r && /* @__PURE__ */ a(
+            g,
             {
-              passive: !0,
+              passive: !i,
               className: t(
                 "rst:text-sm rst:font-medium rst:text-gray-900 rst:dark:text-gray-100",
-                e && "rst:opacity-50"
+                i && !s && "rst:cursor-pointer",
+                s && "rst:opacity-50"
               ),
               children: r
             }
           ),
-          a && /* @__PURE__ */ s(
-            x,
+          e && /* @__PURE__ */ a(
+            l,
             {
               className: t(
                 "rst:text-xs rst:text-gray-500 rst:dark:text-gray-400",
-                e && "rst:opacity-50"
+                s && "rst:opacity-50"
               ),
-              children: a
+              children: e
             }
           )
         ] }),
-        /* @__PURE__ */ s(
-          g,
+        /* @__PURE__ */ a(
+          y,
           {
             checked: c,
-            onChange: o,
-            disabled: e,
-            "aria-label": f,
-            className: t(y({ variant: n, size: i })),
-            children: /* @__PURE__ */ s(
+            onChange: n,
+            disabled: s,
+            "aria-label": h,
+            className: t(N({ variant: p, size: m })),
+            children: /* @__PURE__ */ a(
               "span",
               {
                 "aria-hidden": "true",
-                className: t(u({ size: i }))
+                className: t(d({ size: m }))
               }
             )
           }
@@ -69,5 +71,5 @@ const S = ({
   );
 };
 export {
-  S as Switch
+  V as Switch
 };

package/dist/components/atoms/Switch/switch-variants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:group rst:relative rst:inline-flex rst:shrink-0 rst:cursor-pointer rst:rounded-full rst:border-2 rst:border-transparent rst:transition-colors rst:duration-200 rst:ease-in-out rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:disabled:cursor-not-allowed rst:disabled:opacity-50",{variants:{variant:{primary:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-primary-500 rst:focus-visible:ring-ring",success:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-green-500 rst:focus-visible:ring-ring",danger:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-error-500 rst:focus-visible:ring-ring",neutral:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-gray-600 rst:dark:data-[checked]:bg-gray-500 rst:focus-visible:ring-ring"},size:{xs:"rst:h-4 rst:w-7",sm:"rst:h-5 rst:w-9",md:"rst:h-6 rst:w-11",lg:"rst:h-7 rst:w-14"}},defaultVariants:{variant:"primary",size:"md"}}),s=r.cva("rst:pointer-events-none rst:inline-block rst:rounded-full rst:bg-white rst:shadow rst:ring-0 rst:transition rst:duration-200 rst:ease-in-out rst:transform",{variants:{size:{xs:"rst:h-3 rst:w-3 rst:translate-x-0 rst:group-data-[checked]:translate-x-3",sm:"rst:h-4 rst:w-4 rst:translate-x-0 rst:group-data-[checked]:translate-x-4",md:"rst:h-5 rst:w-5 rst:translate-x-0 rst:group-data-[checked]:translate-x-5",lg:"rst:h-6 rst:w-6 rst:translate-x-0 rst:group-data-[checked]:translate-x-7"}},defaultVariants:{size:"md"}});exports.switchThumbVariants=s;exports.switchTrackVariants=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:before:absolute rst:before:top-1/2 rst:before:left-1/2 rst:before:size-11 rst:before:-translate-x-1/2 rst:before:-translate-y-1/2 rst:before:content-[''] rst:font-ui rst:group rst:relative rst:inline-flex rst:shrink-0 rst:cursor-pointer rst:rounded-full rst:border-2 rst:border-transparent rst:transition-colors rst:duration-200 rst:ease-in-out rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:disabled:cursor-not-allowed rst:disabled:opacity-50",{variants:{variant:{primary:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-primary-500 rst:focus-visible:ring-ring",success:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-green-500 rst:focus-visible:ring-ring",danger:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-error-500 rst:focus-visible:ring-ring",neutral:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-gray-600 rst:dark:data-[checked]:bg-gray-500 rst:focus-visible:ring-ring"},size:{xs:"rst:h-4 rst:w-7",sm:"rst:h-5 rst:w-9",md:"rst:h-6 rst:w-11",lg:"rst:h-7 rst:w-14"}},defaultVariants:{variant:"primary",size:"md"}}),s=r.cva("rst:pointer-events-none rst:inline-block rst:rounded-full rst:bg-white rst:shadow rst:ring-0 rst:transition rst:duration-200 rst:ease-in-out rst:transform",{variants:{size:{xs:"rst:h-3 rst:w-3 rst:translate-x-0 rst:group-data-[checked]:translate-x-3",sm:"rst:h-4 rst:w-4 rst:translate-x-0 rst:group-data-[checked]:translate-x-4",md:"rst:h-5 rst:w-5 rst:translate-x-0 rst:group-data-[checked]:translate-x-5",lg:"rst:h-6 rst:w-6 rst:translate-x-0 rst:group-data-[checked]:translate-x-7"}},defaultVariants:{size:"md"}});exports.switchThumbVariants=s;exports.switchTrackVariants=t;

package/dist/components/atoms/Switch/switch-variants.js

@@ -1,6 +1,6 @@
 import { cva as r } from "../../../node_modules/class-variance-authority/dist/index.js";
 const s = /* @__PURE__ */ r(
-  "rst:font-ui rst:group rst:relative rst:inline-flex rst:shrink-0 rst:cursor-pointer rst:rounded-full rst:border-2 rst:border-transparent rst:transition-colors rst:duration-200 rst:ease-in-out rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:disabled:cursor-not-allowed rst:disabled:opacity-50",
+  "rst:before:absolute rst:before:top-1/2 rst:before:left-1/2 rst:before:size-11 rst:before:-translate-x-1/2 rst:before:-translate-y-1/2 rst:before:content-[''] rst:font-ui rst:group rst:relative rst:inline-flex rst:shrink-0 rst:cursor-pointer rst:rounded-full rst:border-2 rst:border-transparent rst:transition-colors rst:duration-200 rst:ease-in-out rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:disabled:cursor-not-allowed rst:disabled:opacity-50",
   {
     variants: {
       variant: {

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;