@blakesteve/roster 5.14.0 → 5.16.0

package/dist/components/molecules/FileUpload/file-upload-rejection.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=Symbol.for("@blakesteve/roster/file-upload-rejection");class o extends Error{constructor(i,l){super(i,l),this.name="FileUploadRejection",Object.defineProperty(this,t,{value:!0})}}const n=e=>e instanceof o||typeof e=="object"&&e!==null&&t in e;exports.FileUploadRejection=o;exports.isFileUploadRejection=n;

package/dist/components/molecules/FileUpload/file-upload-rejection.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Throw this from FileUpload's `upload`, or reject with it, when the file can
+ * never be added: the server says it isn't a photo, its type is refused, it
+ * can't be decoded. The file ends `rejected`, as a file turned away on picking
+ * does: "Not added." with this message as the reason, no Try again, and its
+ * place in `maxFiles` freed. A plain `Error` still means the upload failed and
+ * can be tried again.
+ *
+ * ```ts
+ * upload={async (file, { signal }) => {
+ *   const response = await fetch("/photos", { method: "POST", body: file, signal });
+ *   if (response.status === 415) throw new FileUploadRejection("That isn't a photo.");
+ *   if (!response.ok) throw new Error("The server is busy.");
+ *   return (await response.json()).id;
+ * }}
+ * ```
+ *
+ * No React in this module, so a server-side helper can make one too.
+ */
+export declare class FileUploadRejection extends Error {
+    constructor(reason: string, options?: ErrorOptions);
+}
+/** Whether `error` says the file can never be added: a `FileUploadRejection` from any copy of this module. */
+export declare const isFileUploadRejection: (error: unknown) => boolean;

package/dist/components/molecules/FileUpload/file-upload-rejection.js

@@ -0,0 +1,11 @@
+const t = /* @__PURE__ */ Symbol.for("@blakesteve/roster/file-upload-rejection");
+class l extends Error {
+  constructor(o, i) {
+    super(o, i), this.name = "FileUploadRejection", Object.defineProperty(this, t, { value: !0 });
+  }
+}
+const n = (e) => e instanceof l || typeof e == "object" && e !== null && t in e;
+export {
+  l as FileUploadRejection,
+  n as isFileUploadRejection
+};

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { LiquidTabsLabels } from './liquid-count';
+import { TabsLabels } from './liquid-count';
 /**
  * A tab's or a link's label, with its count beside it when it has one.
  *
@@ -25,5 +25,5 @@ import { LiquidTabsLabels } from './liquid-count';
 export declare function LiquidCount({ label, count, labels }: {
     label: ReactNode;
     count: number | undefined;
-    labels: LiquidTabsLabels;
+    labels: TabsLabels;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),t=require("react"),y=require("./liquid-tab-id.cjs"),p='a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), iframe, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';function x({tabsId:d,id:l,tab:n,activeTab:a,keepMounted:u=!1,tabIndex:b,children:c,...f}){const i=t.useRef(null),r=a===void 0||a===n,[h,q]=t.useState(!1);return t.useLayoutEffect(()=>{const e=i.current;if(!e)return;const o=()=>q(!!e.querySelector(p));if(o(),typeof MutationObserver>"u")return;const s=new MutationObserver(o);return s.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["disabled","tabindex","href","contenteditable"]}),()=>s.disconnect()},[]),v.jsx("div",{...f,ref:i,role:"tabpanel",id:l,"aria-labelledby":y.liquidTabId(d,n),hidden:!r,tabIndex:b??(h?void 0:0),"data-tab-panel":"",children:r||u?c:null})}exports.LiquidTabPanel=x;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("../Tabs/TabPanel.cjs");function t(e){return n.jsx(i.TabPanel,{...e})}exports.LiquidTabPanel=t;

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

@@ -1,52 +1,13 @@
-import { HTMLAttributes, ReactNode } from 'react';
-export interface LiquidTabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "id" | "role" | "hidden" | "children"> {
-    /** The `id` of the `LiquidTabs` this panel belongs to (its `id` prop). */
-    tabsId: string;
-    /** This panel's `id`: the `panelId` its tab carries, or every tab, for one panel that swaps its content. */
-    id: string;
-    /**
-     * The tab that names this panel. For one panel that swaps its content, the
-     * selected tab: the panel's name follows the selection. For a panel per tab,
-     * its own tab.
-     */
-    tab: string;
-    /**
-     * For a panel per tab: the selected tab. The panel shows when it is `tab`,
-     * and is hidden otherwise. Leave it out for one panel that swaps its
-     * content, which always shows.
-     */
-    activeTab?: string;
-    /**
-     * For a panel per tab: keep the content mounted while the panel is hidden,
-     * so what's in it (a half-filled form, a scroll position) survives a switch
-     * away and back. By default a hidden panel renders no content. The panel
-     * element itself always stays, hidden, so its tab's `aria-controls` points
-     * at something.
-     */
-    keepMounted?: boolean;
-    children?: ReactNode;
-}
+import { TabPanelProps } from '../Tabs/TabPanel';
 /**
- * The panel a `LiquidTabs` tab controls, paired with it by construction:
- * `role="tabpanel"`, its `id` the tab's `panelId`, and `aria-labelledby`
- * pointing at the tab through `liquidTabId`, so it's named for its tab.
- *
- * ```tsx
- * <LiquidTabs id="views" tabs={[{ id: "open", label: "Open", panelId: "views-panel" }, …]} … />
- * <LiquidTabPanel tabsId="views" id="views-panel" tab={view}>…</LiquidTabPanel>
- * ```
- *
- * Two ways to lay it out. **One panel that swaps its content:** every tab
- * carries the same `panelId`, and `tab` is the selected tab. **A panel per
- * tab:** each tab has its own `panelId`, each panel its own `tab`, and every
- * panel gets `activeTab`, so only the selected one shows.
+ * @deprecated Renamed `TabPanelProps`; the props are the same.
+ */
+export type LiquidTabPanelProps = TabPanelProps;
+/**
+ * The panel a tab controls, named for its tab by construction.
  *
- * The WAI tabs pattern puts the panel in the tab order when nothing inside it
- * can take focus, so a keyboard user can reach and scroll what was just
- * selected. Whether the content holds anything focusable isn't known until it
- * renders, and it can change as content loads, so the panel starts reachable
- * (`tabIndex={0}`) and leaves the tab order once its content holds something
- * that can be Tabbed to, rechecking as the content changes. Pass `tabIndex`
- * to decide it yourself.
+ * @deprecated Renamed `TabPanel`, which this renders, for `Tabs` of every
+ * variant and for `LiquidTabs`. Replace the name; nothing else changes. This
+ * name keeps working.
  */
-export declare function LiquidTabPanel({ tabsId, id, tab, activeTab, keepMounted, tabIndex, children, ...rest }: LiquidTabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function LiquidTabPanel(props: LiquidTabPanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,32 +1,9 @@
 "use client";
-import { jsx as p } from "react/jsx-runtime";
-import { useRef as m, useState as v, useLayoutEffect as x } from "react";
-import { liquidTabId as y } from "./liquid-tab-id.js";
-const L = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), iframe, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
-function w({ tabsId: d, id: s, tab: t, activeTab: n, keepMounted: l = !1, tabIndex: b, children: u, ...c }) {
-  const r = m(null), a = n === void 0 || n === t, [f, h] = v(!1);
-  return x(() => {
-    const e = r.current;
-    if (!e) return;
-    const o = () => h(!!e.querySelector(L));
-    if (o(), typeof MutationObserver > "u") return;
-    const i = new MutationObserver(o);
-    return i.observe(e, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["disabled", "tabindex", "href", "contenteditable"] }), () => i.disconnect();
-  }, []), /* @__PURE__ */ p(
-    "div",
-    {
-      ...c,
-      ref: r,
-      role: "tabpanel",
-      id: s,
-      "aria-labelledby": y(d, t),
-      hidden: !a,
-      tabIndex: b ?? (f ? void 0 : 0),
-      "data-tab-panel": "",
-      children: a || l ? u : null
-    }
-  );
+import { jsx as e } from "react/jsx-runtime";
+import { TabPanel as i } from "../Tabs/TabPanel.js";
+function t(r) {
+  return /* @__PURE__ */ e(i, { ...r });
 }
 export {
-  w as LiquidTabPanel
+  t as LiquidTabPanel
 };

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

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

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

@@ -1,29 +1,7 @@
-import { ReactNode } from 'react';
 import { LiquidSize, LiquidVariant } from './liquid-pill';
-import { LiquidTabsLabels } from './liquid-count';
-export type { LiquidTabsLabels };
-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;
-    /**
-     * A number in a small mark beside the label, read as part of the tab's
-     * name: "Open, 12 items" (`labels.count` says it).
-     *
-     * **Zero shows**, as "0" and "0 items": a count that vanished at zero would
-     * change the tab's width and move every tab after it, and an empty list is
-     * worth saying. To hide it, pass `undefined` for zero. `undefined` means no
-     * count and no mark. A negative or fractional count isn't shown at all,
-     * never rounded or clamped. Large counts aren't abbreviated: 12,345 shows
-     * as "12,345" unless `labels.countMark` writes it shorter.
-     */
-    count?: number;
-}
+import { TabItem, TabsLabels } from '../Tabs/Tabs';
+export type { TabItem };
+export type { LiquidTabsLabels } from './liquid-count';
 export interface LiquidTabsProps {
     tabs: TabItem[];
     /** The `id` of the currently active tab. */
@@ -64,25 +42,20 @@ export interface LiquidTabsProps {
     /** Extra classes applied to the outer container. */
     className?: string;
     /** Every word a count says, with English defaults: see `TabItem.count`. */
-    labels?: Partial<LiquidTabsLabels>;
+    labels?: Partial<TabsLabels>;
 }
 /**
  * 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.
+ * @deprecated Use `Tabs` with `variant="liquid"`, which renders exactly this:
+ * the same markup, styles, keys and pill. `variant` becomes `liquidStyle`, and
+ * every other prop is the same:
  *
- * A tab can carry a `count`, and a panel pairs with its tab by construction
- * through `LiquidTabPanel`.
+ * ```tsx
+ * <LiquidTabs variant="filled" … />  // before
+ * <Tabs variant="liquid" liquidStyle="filled" … />  // after
+ * ```
  *
- * For navigation between routes, use `LiquidNav`, which renders links.
+ * `LiquidTabs` keeps working, unchanged.
  */
-export declare function LiquidTabs({ tabs, activeTab, onChange, variant, fullWidth, size, activation, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, labels, }: LiquidTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function LiquidTabs({ variant, ...rest }: LiquidTabsProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,9 +1,9 @@
 /**
- * Counts on a tab or a nav link: what `LiquidTabs` and `LiquidNav` share
- * about them. Internal; the type is exported from `LiquidTabs`.
+ * Counts on a tab or a nav link: what `Tabs`, `LiquidTabs` and `LiquidNav`
+ * share about them. Internal; the type is exported from `Tabs`.
  */
 /** Every word a count says. Pass any of them in `labels` to replace it. */
-export interface LiquidTabsLabels {
+export interface TabsLabels {
     /**
      * What a count says after the label, as part of the tab's accessible name:
      * "12 items", so the tab reads "Open, 12 items". Name your own noun, with
@@ -19,7 +19,9 @@ export interface LiquidTabsLabels {
      */
     countMark: (count: number) => string;
 }
-export declare const LIQUID_COUNT_LABELS: LiquidTabsLabels;
+/** @deprecated Renamed `TabsLabels`; the words are the same. */
+export type LiquidTabsLabels = TabsLabels;
+export declare const LIQUID_COUNT_LABELS: TabsLabels;
 /**
  * Whether a count gets a mark: a whole number, zero or more. `undefined`
  * means no count. A negative or fractional count, or `NaN`, isn't shown at
@@ -34,4 +36,4 @@ export declare const shownCount: (count: number | undefined) => count is number;
  * visually hidden part, so the hidden ", 12 items" reads "Open , 12 items".
  * A label that's a node keeps that content name, which is spoken the same.
  */
-export declare const countName: (label: unknown, count: number | undefined, labels: LiquidTabsLabels) => string | undefined;
+export declare const countName: (label: unknown, count: number | undefined, labels: TabsLabels) => string | undefined;

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

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

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

@@ -1,12 +1,7 @@
 /**
- * The `id` a `LiquidTabs` tab renders with, for a panel's `aria-labelledby`.
+ * The `id` a 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.
+ * @deprecated Renamed `tabId`, which is the same function: `Tabs` and
+ * `LiquidTabs` give their tabs the same ids. This name keeps working.
  */
-export declare function liquidTabId(listId: string, tabId: string): string;
+export declare const liquidTabId: (listId: string, tab: string) => string;

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

@@ -1,6 +1,5 @@
-function n(t, i) {
-  return `${t}-tab-${i}`;
-}
+import { tabId as o } from "../Tabs/tab-id.js";
+const d = o;
 export {
-  n as liquidTabId
+  d as liquidTabId
 };

package/dist/components/molecules/Tabs/TabPanel.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),t=require("react"),p=require("./tab-id.cjs"),x='a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), iframe, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';function m({tabsId:d,id:l,tab:n,activeTab:a,keepMounted:b=!1,tabIndex:u,children:c,...f}){const r=t.useRef(null),o=a===void 0||a===n,[h,v]=t.useState(!1);return t.useLayoutEffect(()=>{const e=r.current;if(!e)return;const s=()=>v(!!e.querySelector(x));if(s(),typeof MutationObserver>"u")return;const i=new MutationObserver(s);return i.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["disabled","tabindex","href","contenteditable"]}),()=>i.disconnect()},[]),y.jsx("div",{...f,ref:r,role:"tabpanel",id:l,"aria-labelledby":p.tabId(d,n),hidden:!o,tabIndex:u??(h?void 0:0),"data-tab-panel":"",children:o||b?c:null})}exports.TabPanel=m;

package/dist/components/molecules/Tabs/TabPanel.d.ts

@@ -0,0 +1,53 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface TabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "id" | "role" | "hidden" | "children"> {
+    /** The `id` of the `Tabs` this panel belongs to (its `id` prop). */
+    tabsId: string;
+    /** This panel's `id`: the `panelId` its tab carries, or every tab, for one panel that swaps its content. */
+    id: string;
+    /**
+     * The tab that names this panel. For one panel that swaps its content, the
+     * selected tab: the panel's name follows the selection. For a panel per tab,
+     * its own tab.
+     */
+    tab: string;
+    /**
+     * For a panel per tab: the selected tab. The panel shows when it is `tab`,
+     * and is hidden otherwise. Leave it out for one panel that swaps its
+     * content, which always shows.
+     */
+    activeTab?: string;
+    /**
+     * For a panel per tab: keep the content mounted while the panel is hidden,
+     * so what's in it (a half-filled form, a scroll position) survives a switch
+     * away and back. By default a hidden panel renders no content. The panel
+     * element itself always stays, hidden, so its tab's `aria-controls` points
+     * at something.
+     */
+    keepMounted?: boolean;
+    children?: ReactNode;
+}
+/**
+ * The panel a `Tabs` tab controls, paired with it by construction:
+ * `role="tabpanel"`, its `id` the tab's `panelId`, and `aria-labelledby`
+ * pointing at the tab through `tabId`, so it's named for its tab. It works
+ * with every variant, and with `LiquidTabs`, whose tabs have the same ids.
+ *
+ * ```tsx
+ * <Tabs id="views" tabs={[{ id: "open", label: "Open", panelId: "views-panel" }, …]} … />
+ * <TabPanel tabsId="views" id="views-panel" tab={view}>…</TabPanel>
+ * ```
+ *
+ * Two ways to lay it out. **One panel that swaps its content:** every tab
+ * carries the same `panelId`, and `tab` is the selected tab. **A panel per
+ * tab:** each tab has its own `panelId`, each panel its own `tab`, and every
+ * panel gets `activeTab`, so only the selected one shows.
+ *
+ * The WAI tabs pattern puts the panel in the tab order when nothing inside it
+ * can take focus, so a keyboard user can reach and scroll what was just
+ * selected. Whether the content holds anything focusable isn't known until it
+ * renders, and it can change as content loads, so the panel starts reachable
+ * (`tabIndex={0}`) and leaves the tab order once its content holds something
+ * that can be Tabbed to, rechecking as the content changes. Pass `tabIndex`
+ * to decide it yourself.
+ */
+export declare function TabPanel({ tabsId, id, tab, activeTab, keepMounted, tabIndex, children, ...rest }: TabPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/Tabs/TabPanel.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { useRef as m, useState as v, useLayoutEffect as x } from "react";
+import { tabId as y } from "./tab-id.js";
+const B = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), iframe, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+function A({ tabsId: s, id: d, tab: t, activeTab: n, keepMounted: l = !1, tabIndex: b, children: u, ...c }) {
+  const r = m(null), a = n === void 0 || n === t, [f, h] = v(!1);
+  return x(() => {
+    const e = r.current;
+    if (!e) return;
+    const o = () => h(!!e.querySelector(B));
+    if (o(), typeof MutationObserver > "u") return;
+    const i = new MutationObserver(o);
+    return i.observe(e, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["disabled", "tabindex", "href", "contenteditable"] }), () => i.disconnect();
+  }, []), /* @__PURE__ */ p(
+    "div",
+    {
+      ...c,
+      ref: r,
+      role: "tabpanel",
+      id: d,
+      "aria-labelledby": y(s, t),
+      hidden: !a,
+      tabIndex: b ?? (f ? void 0 : 0),
+      "data-tab-panel": "",
+      children: a || l ? u : null
+    }
+  );
+}
+export {
+  A as TabPanel
+};

package/dist/components/molecules/Tabs/Tabs.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),y=require("react"),o=require("../LiquidTabs/liquid-pill.cjs"),O=require("../LiquidTabs/LiquidCount.cjs"),S=require("../LiquidTabs/liquid-count.cjs"),Q=require("./tab-id.cjs"),Y=require("../../../lib/labels.cjs"),_=require("../../../lib/utils.cjs"),$=require("../../../internal/key-focus.cjs"),z=s=>_.cn("rst:font-ui rst:flex rst:gap-1 rst:border-b rst:border-(--roster-tabs-border)",s),H=({fullWidth:s,size:e,isActive:r})=>_.cn("rst:relative rst:cursor-pointer rst:rounded-md rst:border-0 rst:bg-transparent rst:px-3 rst:py-2 rst:text-sm rst:font-medium rst:transition-colors","rst:ring-offset-background rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2","rst:after:pointer-events-none rst:after:absolute rst:after:inset-x-0 rst:after:-bottom-px",e==="lg"&&"rst:min-h-11",s&&"rst:flex-1",r?"rst:text-(--roster-tabs-text-active) rst:after:border-b-2 rst:after:border-(--roster-tabs-indicator)":"rst:text-(--roster-tabs-text) rst:hover:text-(--roster-tabs-text-hover) rst:hover:after:border-b-2 rst:hover:after:border-(--roster-tabs-indicator-hover)");function M({stripRef:s,activeTab:e,itemsKey:r,liquidStyle:b,fullWidth:x,className:f,id:d,"aria-label":m,"aria-labelledby":g,onKeyDown:h,onBlur:p,children:q}){const c=y.useRef(null);return o.useLiquidPill(s,c,e,r),n.jsxs("div",{ref:s,id:d,role:"tablist","aria-label":m,"aria-labelledby":g,"data-testid":"liquid-tabs",style:o.LIQUID_STRIP_STYLE,className:o.liquidStripClassName(b,x,f),onKeyDown:h,onBlur:p,children:[n.jsx("div",{ref:c,"aria-hidden":!0,"data-testid":"liquid-tabs-pill",className:o.liquidPillClassName(b),style:o.LIQUID_PILL_STYLE}),q]})}function W(s){const{tabs:e,activeTab:r,onChange:b,variant:x="plain",liquidStyle:f="pill",fullWidth:d=!1,size:m="md",activation:g="automatic",id:h,"aria-label":p,"aria-labelledby":q,className:c,labels:D}=s;$.useKeyFocus();const T=Y.withLabels(S.LIQUID_COUNT_LABELS,D),L=y.useRef(null),E=y.useId(),v=h??E,I=x==="liquid",j=t=>{t!==r&&b(t)},[C,A]=y.useState(null),F=e.some(t=>t.id===r),U=C!==null&&e.some(t=>t.id===C)?C:F?r:e[0]?.id,R=t=>{t.currentTarget.contains(t.relatedTarget)||A(null)},k=t=>{const i=L.current;if(!i)return;const a=Array.from(i.querySelectorAll('[role="tab"]')),u=a.indexOf(t.target);if(u===-1)return;const N=a.length-1,P=getComputedStyle(i).direction==="rtl",B=P?"ArrowLeft":"ArrowRight",K=P?"ArrowRight":"ArrowLeft";let l;if(t.key===B)l=u===N?0:u+1;else if(t.key===K)l=u===0?N:u-1;else if(t.key==="Home")l=0;else if(t.key==="End")l=N;else return;t.preventDefault(),a[l].focus(),g==="automatic"&&j(e[l].id)},w=e.map(t=>{const i=t.id===r,a=typeof t.label=="function"?t.label(i):t.label;return n.jsx("button",{type:"button",role:"tab",id:Q.tabId(v,t.id),"aria-selected":i,"aria-controls":t.panelId,"aria-label":S.countName(a,t.count,T),tabIndex:t.id===U?0:-1,"data-tab-id":t.id,"data-testid":I?`liquid-tab-${t.id}`:void 0,onClick:()=>j(t.id),onFocus:()=>A(t.id),className:I?o.liquidItemClassName({variant:f,fullWidth:d,size:m,isActive:i}):H({fullWidth:d,size:m,isActive:i}),children:S.shownCount(t.count)?n.jsx(O.LiquidCount,{label:a,count:t.count,labels:T}):a},t.id)});return I?n.jsx(M,{stripRef:L,activeTab:r,itemsKey:e.map(t=>t.id).join("\0"),liquidStyle:f,fullWidth:d,className:c,id:v,"aria-label":p,"aria-labelledby":q,onKeyDown:k,onBlur:R,children:w}):n.jsx("div",{ref:L,id:v,role:"tablist","aria-label":p,"aria-labelledby":q,className:z(c),onKeyDown:k,onBlur:R,children:w})}exports.Tabs=W;

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

@@ -0,0 +1,118 @@
+import { ReactNode } from 'react';
+import { TabsLabels } from '../LiquidTabs/liquid-count';
+export type { TabsLabels };
+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;
+    /**
+     * A number in a small mark beside the label, read as part of the tab's
+     * name: "Open, 12 items" (`labels.count` says it).
+     *
+     * **Zero shows**, as "0" and "0 items": a count that vanished at zero would
+     * change the tab's width and move every tab after it, and an empty list is
+     * worth saying. To hide it, pass `undefined` for zero. `undefined` means no
+     * count and no mark. A negative or fractional count isn't shown at all,
+     * never rounded or clamped. Large counts aren't abbreviated: 12,345 shows
+     * as "12,345" unless `labels.countMark` writes it shorter.
+     */
+    count?: number;
+}
+/** How the strip looks: `plain` (an underline) or `liquid` (a sliding pill). */
+export type TabsVariant = "plain" | "liquid";
+/** The liquid variant's two styles: a floating `pill`, or `filled` cells. */
+export type TabsLiquidStyle = "pill" | "filled";
+/** `md`, or `lg` for a 44px target. */
+export type TabsSize = "md" | "lg";
+interface TabsBaseProps {
+    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;
+    /**
+     * Stretch the tabs to fill the row, each an equal share. In `plain`, the
+     * underline then spans each tab's share; the liquid `filled` style is always
+     * full width.
+     */
+    fullWidth?: boolean;
+    /**
+     * `"md"` (default), or `"lg"`, which makes every tab at least 44px tall, the
+     * WCAG 2.5.5 target size.
+     */
+    size?: TabsSize;
+    /**
+     * `"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 `tabId`.
+     * Generated when omitted, which is fine unless a panel needs to point back at
+     * its tab: give it one to pair a `TabPanel`.
+     */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** Extra classes applied to the tablist. */
+    className?: string;
+    /** Every word a count says, with English defaults: see `TabItem.count`. */
+    labels?: Partial<TabsLabels>;
+}
+export type TabsProps = TabsBaseProps & ({
+    /**
+     * `"plain"` (default): the selected tab is underlined, on a rule that
+     * runs the strip's width. `"liquid"`: a pill slides to the selected
+     * tab; `liquidStyle` picks its look.
+     */
+    variant?: "plain";
+    /** The liquid variant's look; only with `variant="liquid"`. */
+    liquidStyle?: never;
+} | {
+    variant: "liquid";
+    /**
+     * `"pill"` (default): a floating pill inside a padded strip, `w-fit`
+     * unless `fullWidth` is set.
+     *
+     * `"filled"`: the selected tab fills its whole cell, and the strip is
+     * always full width.
+     *
+     * Both squash the pill vertically (`scaleY`) while it stretches
+     * between tabs.
+     */
+    liquidStyle?: TabsLiquidStyle;
+});
+/**
+ * A controlled tab strip, plain or liquid.
+ *
+ * Follows the WAI tabs pattern in every variant: only the selected tab is in
+ * the tab order, Left and Right move between tabs and wrap, Home and End go
+ * to the ends, and `activation="manual"` moves focus without selecting. If
+ * `activeTab` matches no tab, the first tab takes the tab stop and nothing is
+ * marked selected. Every tab is `type="button"`, so a strip inside a form
+ * never submits it.
+ *
+ * **`variant="plain"`**, the default, underlines the selected tab in
+ * `--roster-tabs-indicator` on a rule in `--roster-tabs-border`. The other
+ * tabs read `--roster-tabs-text`, darkening to `--roster-tabs-text-hover`
+ * under the pointer with a lighter underline, `--roster-tabs-indicator-hover`.
+ *
+ * **`variant="liquid"`** is the sliding pill `LiquidTabs` has always drawn,
+ * with its `pill` and `filled` styles (`liquidStyle`) and its
+ * `--roster-lt-*` tokens. 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. Until script has measured it, the selected tab paints
+ * the pill's color itself, so server-rendered HTML shows the selection too.
+ *
+ * A tab can carry a `count`, and a panel pairs with its tab by construction
+ * through `TabPanel`, in either variant.
+ *
+ * For navigation between routes, use `LiquidNav`, which renders links.
+ */
+export declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;