@blakesteve/roster 5.0.1 → 5.2.0

package/dist/roster.js

@@ -2,7 +2,7 @@
 import { Avatar as e } from "./components/atoms/Avatar/Avatar.js";
 import { avatarVariants as p } from "./components/atoms/Avatar/avatar-variants.js";
 import { Badge as m } from "./components/atoms/Badge/Badge.js";
-import { badgeVariants as n } from "./components/atoms/Badge/badge-variants.js";
+import { badgeVariants as f } from "./components/atoms/Badge/badge-variants.js";
 import { Button as s } from "./components/atoms/Button/Button.js";
 import { buttonVariants as V } from "./components/atoms/Button/button-variants.js";
 import { Card as b } from "./components/atoms/Card/Card.js";
@@ -10,14 +10,14 @@ import { cardVariants as u } from "./components/atoms/Card/card-variants.js";
 import { Checkbox as C } from "./components/atoms/Checkbox/Checkbox.js";
 import { checkboxVariants as S } from "./components/atoms/Checkbox/checkbox-variants.js";
 import { Disclosure as w } from "./components/atoms/Disclosure/Disclosure.js";
-import { disclosureContentVariants as A, disclosureTriggerVariants as B } from "./components/atoms/Disclosure/disclosure-variants.js";
-import { Input as O } from "./components/atoms/Input/Input.js";
-import { iconVariants as y, inputVariants as E } from "./components/atoms/Input/input-variants.js";
+import { disclosureContentVariants as v, disclosureTriggerVariants as A } from "./components/atoms/Disclosure/disclosure-variants.js";
+import { Input as D } from "./components/atoms/Input/Input.js";
+import { iconVariants as q, inputVariants as y } from "./components/atoms/Input/input-variants.js";
 import { Link as I } from "./components/atoms/Link/Link.js";
-import { linkVariants as P } from "./components/atoms/Link/link-variants.js";
+import { linkVariants as G } from "./components/atoms/Link/link-variants.js";
 import { PasswordInput as H } from "./components/atoms/PasswordInput/PasswordInput.js";
-import { Combobox as F } from "./components/atoms/Combobox/Combobox.js";
-import { Chip as N } from "./components/atoms/Chip/Chip.js";
+import { Combobox as R } from "./components/atoms/Combobox/Combobox.js";
+import { Chip as M } from "./components/atoms/Chip/Chip.js";
 import { chipVariants as _ } from "./components/atoms/Chip/chip-variants.js";
 import { Pill as X } from "./components/atoms/Pill/Pill.js";
 import { pillDotVariants as z, pillVariants as J } from "./components/atoms/Pill/pill-variants.js";
@@ -28,157 +28,165 @@ import { inlineCodeVariants as tr } from "./components/atoms/InlineCode/inline-c
 import { LabeledDivider as ar } from "./components/atoms/LabeledDivider/LabeledDivider.js";
 import { Stat as ir } from "./components/atoms/Stat/Stat.js";
 import { statValueVariants as xr } from "./components/atoms/Stat/stat-variants.js";
-import { ThemeToggle as fr } from "./components/atoms/ThemeToggle/ThemeToggle.js";
+import { ThemeToggle as nr } from "./components/atoms/ThemeToggle/ThemeToggle.js";
 import { MultiSelect as lr } from "./components/atoms/MultiSelect/MultiSelect.js";
 import { Select as cr } from "./components/atoms/Select/Select.js";
 import { selectOptionVariants as dr, selectTriggerVariants as ur } from "./components/atoms/Select/select-variants.js";
 import { Spinner as Cr } from "./components/atoms/Spinner/Spinner.js";
 import { Switch as Sr } from "./components/atoms/Switch/Switch.js";
 import { switchThumbVariants as wr, switchTrackVariants as kr } from "./components/atoms/Switch/switch-variants.js";
-import { Textarea as Br } from "./components/atoms/Textarea/Textarea.js";
-import { textareaVariants as Or } from "./components/atoms/Textarea/textarea-variants.js";
-import { AvatarStrip as yr } from "./components/atoms/AvatarStrip/AvatarStrip.js";
-import { LiquidTabs as Gr } from "./components/atoms/LiquidTabs/LiquidTabs.js";
-import { Tooltip as Lr } from "./components/atoms/Tooltip/Tooltip.js";
-import { CollapsibleSection as qr } from "./components/atoms/CollapsibleSection/CollapsibleSection.js";
-import { SegmentBar as Rr } from "./components/atoms/SegmentBar/SegmentBar.js";
-import { Toast as Mr } from "./components/molecules/Toast/Toast.js";
-import { toastVariants as Kr } from "./components/molecules/Toast/toast-variants.js";
-import { Toaster as Wr } from "./components/molecules/Toast/Toaster.js";
-import { TONE_PREFIX as jr, toast as zr } from "./components/molecules/Toast/toast-api.js";
-import { Alert as Qr } from "./components/molecules/Alert/Alert.js";
-import { alertVariants as Yr } from "./components/molecules/Alert/alert-variants.js";
-import { Accordion as $r } from "./components/molecules/Accordion/Accordion.js";
-import { DescriptionList as oo } from "./components/molecules/DescriptionList/DescriptionList.js";
-import { descriptionListVariants as eo } from "./components/molecules/DescriptionList/description-list-variants.js";
-import { Pullquote as po } from "./components/molecules/Pullquote/Pullquote.js";
-import { pullquoteVariants as mo } from "./components/molecules/Pullquote/pullquote-variants.js";
-import { CheckboxGroup as no } from "./components/molecules/CheckboxGroup/CheckboxGroup.js";
-import { checkboxGroupOptionsVariants as so, checkboxGroupPanelVariants as lo } from "./components/molecules/CheckboxGroup/checkbox-group-variants.js";
-import { RadioGroup as co } from "./components/molecules/RadioGroup/RadioGroup.js";
-import { radioDotVariants as uo, radioGroupOptionsVariants as To, radioOptionVariants as Co, radioVariants as ho } from "./components/molecules/RadioGroup/radio-group-variants.js";
-import { Breadcrumbs as go } from "./components/molecules/Breadcrumbs/Breadcrumbs.js";
-import { breadcrumbVariants as ko } from "./components/molecules/Breadcrumbs/breadcrumb-variants.js";
-import { CallToAction as Bo } from "./components/molecules/CallToAction/CallToAction.js";
-import { ctaVariants as Oo } from "./components/molecules/CallToAction/call-to-action-variants.js";
-import { EmptyState as yo } from "./components/molecules/EmptyState/EmptyState.js";
-import { emptyStateVariants as Go } from "./components/molecules/EmptyState/empty-state-variants.js";
-import { ErrorState as Lo } from "./components/molecules/ErrorState/ErrorState.js";
-import { errorStateVariants as qo } from "./components/molecules/ErrorState/error-state-variants.js";
-import { MatchupCard as Ro } from "./components/molecules/MatchupCard/MatchupCard.js";
-import { ActionBar as Mo } from "./components/organisms/ActionBar/ActionBar.js";
-import { actionBarVariants as Ko } from "./components/organisms/ActionBar/action-bar-variants.js";
-import { Countdown as Wo } from "./components/organisms/Countdown/Countdown.js";
-import { Dialog as jo } from "./components/organisms/Dialog/Dialog.js";
-import { Footer as Jo } from "./components/organisms/Footer/Footer.js";
-import { Navbar as Uo } from "./components/organisms/Navbar/Navbar.js";
-import { navbarVariants as Zo } from "./components/organisms/Navbar/navbar-variants.js";
-import { Table as rt, TableBody as ot, TableCaption as tt, TableCell as et, TableFooter as at, TableHead as pt, TableHeader as it, TableRow as mt } from "./components/organisms/Table/Table.js";
-import { tableCellVariants as nt, tableHeadVariants as ft, tableHeaderVariants as st, tableRowVariants as lt, tableVariants as Vt, tableWrapperVariants as ct } from "./components/organisms/Table/table-variants.js";
-import { useCountdown as dt } from "./hooks/useCountdown.js";
-import { KONAMI_CODE as Tt, useKeySequence as Ct } from "./hooks/useKeySequence.js";
-import { cn as St } from "./lib/utils.js";
+import { Textarea as Ar } from "./components/atoms/Textarea/Textarea.js";
+import { textareaVariants as Dr } from "./components/atoms/Textarea/textarea-variants.js";
+import { AvatarStrip as qr } from "./components/atoms/AvatarStrip/AvatarStrip.js";
+import { Tooltip as Er } from "./components/atoms/Tooltip/Tooltip.js";
+import { CollapsibleSection as Lr } from "./components/atoms/CollapsibleSection/CollapsibleSection.js";
+import { SegmentBar as Pr } from "./components/atoms/SegmentBar/SegmentBar.js";
+import { Toast as Nr } from "./components/molecules/Toast/Toast.js";
+import { toastVariants as Fr } from "./components/molecules/Toast/toast-variants.js";
+import { Toaster as Kr } from "./components/molecules/Toast/Toaster.js";
+import { TONE_PREFIX as Wr, toast as Xr } from "./components/molecules/Toast/toast-api.js";
+import { Alert as zr } from "./components/molecules/Alert/Alert.js";
+import { alertVariants as Qr } from "./components/molecules/Alert/alert-variants.js";
+import { Accordion as Yr } from "./components/molecules/Accordion/Accordion.js";
+import { DescriptionList as $r } from "./components/molecules/DescriptionList/DescriptionList.js";
+import { descriptionListVariants as oo } from "./components/molecules/DescriptionList/description-list-variants.js";
+import { Pullquote as eo } from "./components/molecules/Pullquote/Pullquote.js";
+import { pullquoteVariants as po } from "./components/molecules/Pullquote/pullquote-variants.js";
+import { CheckboxGroup as mo } from "./components/molecules/CheckboxGroup/CheckboxGroup.js";
+import { checkboxGroupOptionsVariants as fo, checkboxGroupPanelVariants as no } from "./components/molecules/CheckboxGroup/checkbox-group-variants.js";
+import { RadioGroup as lo } from "./components/molecules/RadioGroup/RadioGroup.js";
+import { radioDotVariants as co, radioGroupOptionsVariants as bo, radioOptionVariants as uo, radioVariants as To } from "./components/molecules/RadioGroup/radio-group-variants.js";
+import { Breadcrumbs as ho } from "./components/molecules/Breadcrumbs/Breadcrumbs.js";
+import { breadcrumbVariants as go } from "./components/molecules/Breadcrumbs/breadcrumb-variants.js";
+import { LiquidTabs as ko } from "./components/molecules/LiquidTabs/LiquidTabs.js";
+import { LiquidNav as Ao } from "./components/molecules/LiquidTabs/LiquidNav.js";
+import { liquidTabId as Do } from "./components/molecules/LiquidTabs/liquid-tab-id.js";
+import { Carousel as qo } from "./components/molecules/Carousel/Carousel.js";
+import { CallToAction as Eo } from "./components/molecules/CallToAction/CallToAction.js";
+import { ctaVariants as Lo } from "./components/molecules/CallToAction/call-to-action-variants.js";
+import { EmptyState as Po } from "./components/molecules/EmptyState/EmptyState.js";
+import { emptyStateVariants as No } from "./components/molecules/EmptyState/empty-state-variants.js";
+import { ErrorState as Fo } from "./components/molecules/ErrorState/ErrorState.js";
+import { errorStateVariants as Ko } from "./components/molecules/ErrorState/error-state-variants.js";
+import { MatchupCard as Wo } from "./components/molecules/MatchupCard/MatchupCard.js";
+import { ActionBar as jo } from "./components/organisms/ActionBar/ActionBar.js";
+import { actionBarVariants as Jo } from "./components/organisms/ActionBar/action-bar-variants.js";
+import { Countdown as Uo } from "./components/organisms/Countdown/Countdown.js";
+import { Dialog as Zo } from "./components/organisms/Dialog/Dialog.js";
+import { Footer as rt } from "./components/organisms/Footer/Footer.js";
+import { Navbar as tt } from "./components/organisms/Navbar/Navbar.js";
+import { navbarVariants as at } from "./components/organisms/Navbar/navbar-variants.js";
+import { Sheet as it } from "./components/organisms/Sheet/Sheet.js";
+import { Table as xt, TableBody as ft, TableCaption as nt, TableCell as st, TableFooter as lt, TableHead as Vt, TableHeader as ct, TableRow as bt } from "./components/organisms/Table/Table.js";
+import { tableCellVariants as ut, tableHeadVariants as Tt, tableHeaderVariants as Ct, tableRowVariants as ht, tableVariants as St, tableWrapperVariants as gt } from "./components/organisms/Table/table-variants.js";
+import { useCountdown as kt } from "./hooks/useCountdown.js";
+import { KONAMI_CODE as At, useKeySequence as Bt } from "./hooks/useKeySequence.js";
+import { cn as Ot } from "./lib/utils.js";
 export {
-  $r as Accordion,
-  Mo as ActionBar,
-  Qr as Alert,
+  Yr as Accordion,
+  jo as ActionBar,
+  zr as Alert,
   e as Avatar,
-  yr as AvatarStrip,
+  qr as AvatarStrip,
   m as Badge,
-  go as Breadcrumbs,
+  ho as Breadcrumbs,
   s as Button,
-  Bo as CallToAction,
+  Eo as CallToAction,
   b as Card,
+  qo as Carousel,
   C as Checkbox,
-  no as CheckboxGroup,
-  N as Chip,
-  qr as CollapsibleSection,
-  F as Combobox,
-  Wo as Countdown,
-  oo as DescriptionList,
-  jo as Dialog,
+  mo as CheckboxGroup,
+  M as Chip,
+  Lr as CollapsibleSection,
+  R as Combobox,
+  Uo as Countdown,
+  $r as DescriptionList,
+  Zo as Dialog,
   w as Disclosure,
-  yo as EmptyState,
-  Lo as ErrorState,
+  Po as EmptyState,
+  Fo as ErrorState,
   U as Eyebrow,
-  Jo as Footer,
+  rt as Footer,
   rr as InlineCode,
-  O as Input,
-  Tt as KONAMI_CODE,
+  D as Input,
+  At as KONAMI_CODE,
   ar as LabeledDivider,
   I as Link,
-  Gr as LiquidTabs,
-  Ro as MatchupCard,
+  Ao as LiquidNav,
+  ko as LiquidTabs,
+  Wo as MatchupCard,
   lr as MultiSelect,
-  Uo as Navbar,
+  tt as Navbar,
   H as PasswordInput,
   X as Pill,
-  po as Pullquote,
-  co as RadioGroup,
-  Rr as SegmentBar,
+  eo as Pullquote,
+  lo as RadioGroup,
+  Pr as SegmentBar,
   cr as Select,
+  it as Sheet,
   Cr as Spinner,
   ir as Stat,
   Sr as Switch,
-  jr as TONE_PREFIX,
-  rt as Table,
-  ot as TableBody,
-  tt as TableCaption,
-  et as TableCell,
-  at as TableFooter,
-  pt as TableHead,
-  it as TableHeader,
-  mt as TableRow,
-  Br as Textarea,
-  fr as ThemeToggle,
-  Mr as Toast,
-  Wr as Toaster,
-  Lr as Tooltip,
-  Ko as actionBarVariants,
-  Yr as alertVariants,
+  Wr as TONE_PREFIX,
+  xt as Table,
+  ft as TableBody,
+  nt as TableCaption,
+  st as TableCell,
+  lt as TableFooter,
+  Vt as TableHead,
+  ct as TableHeader,
+  bt as TableRow,
+  Ar as Textarea,
+  nr as ThemeToggle,
+  Nr as Toast,
+  Kr as Toaster,
+  Er as Tooltip,
+  Jo as actionBarVariants,
+  Qr as alertVariants,
   p as avatarVariants,
-  n as badgeVariants,
-  ko as breadcrumbVariants,
+  f as badgeVariants,
+  go as breadcrumbVariants,
   V as buttonVariants,
   u as cardVariants,
-  so as checkboxGroupOptionsVariants,
-  lo as checkboxGroupPanelVariants,
+  fo as checkboxGroupOptionsVariants,
+  no as checkboxGroupPanelVariants,
   S as checkboxVariants,
   _ as chipVariants,
-  St as cn,
-  Oo as ctaVariants,
-  eo as descriptionListVariants,
-  A as disclosureContentVariants,
-  B as disclosureTriggerVariants,
-  Go as emptyStateVariants,
-  qo as errorStateVariants,
+  Ot as cn,
+  Lo as ctaVariants,
+  oo as descriptionListVariants,
+  v as disclosureContentVariants,
+  A as disclosureTriggerVariants,
+  No as emptyStateVariants,
+  Ko as errorStateVariants,
   Z as eyebrowVariants,
-  y as iconVariants,
+  q as iconVariants,
   tr as inlineCodeVariants,
-  E as inputVariants,
-  P as linkVariants,
-  Zo as navbarVariants,
+  y as inputVariants,
+  G as linkVariants,
+  Do as liquidTabId,
+  at as navbarVariants,
   z as pillDotVariants,
   J as pillVariants,
-  mo as pullquoteVariants,
-  uo as radioDotVariants,
-  To as radioGroupOptionsVariants,
-  Co as radioOptionVariants,
-  ho as radioVariants,
+  po as pullquoteVariants,
+  co as radioDotVariants,
+  bo as radioGroupOptionsVariants,
+  uo as radioOptionVariants,
+  To as radioVariants,
   dr as selectOptionVariants,
   ur as selectTriggerVariants,
   xr as statValueVariants,
   wr as switchThumbVariants,
   kr as switchTrackVariants,
-  nt as tableCellVariants,
-  ft as tableHeadVariants,
-  st as tableHeaderVariants,
-  lt as tableRowVariants,
-  Vt as tableVariants,
-  ct as tableWrapperVariants,
-  Or as textareaVariants,
-  zr as toast,
-  Kr as toastVariants,
-  dt as useCountdown,
-  Ct as useKeySequence
+  ut as tableCellVariants,
+  Tt as tableHeadVariants,
+  Ct as tableHeaderVariants,
+  ht as tableRowVariants,
+  St as tableVariants,
+  gt as tableWrapperVariants,
+  Dr as textareaVariants,
+  Xr as toast,
+  Fr as toastVariants,
+  kt as useCountdown,
+  Bt as useKeySequence
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blakesteve/roster",
-  "version": "5.0.1",
+  "version": "5.2.0",
   "description": "A production-grade atomic component library: accessible, theme-aware, and documented in Storybook. React 19, TypeScript, Tailwind CSS v4.",
   "keywords": [
     "react",

package/dist/components/atoms/LiquidTabs/LiquidTabs.cjs

@@ -1 +0,0 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),r=require("react"),c=require("../../../lib/utils.cjs");function C({tabs:g,activeTab:l,onChange:x,variant:R="pill",fullWidth:b=!1,className:v}){const w=r.useRef(null),a=r.useRef(null),f=r.useRef(null),o=r.useRef(null),m=r.useRef(!1),h=R==="filled",i=r.useCallback(t=>{const e=w.current;if(!e)return null;const s=e.querySelector(`[data-tab-id="${t}"]`);if(!s)return null;const n=e.getBoundingClientRect(),d=s.getBoundingClientRect();return{left:d.left-n.left,width:d.width}},[]),u=r.useCallback((t,e,s)=>{const n=a.current;n&&(n.style.transition=e,n.style.left=`${t.left}px`,n.style.width=`${t.width}px`,n.style.transform=`scaleY(${s})`)},[]);r.useEffect(()=>{const t=i(l);t&&(f.current=t,u(t,"none",1),a.current&&(a.current.style.opacity="1"),m.current=!0)},[]),r.useEffect(()=>{if(!m.current||o.current!==null)return;const t=i(l);t&&(f.current=t,u(t,"none",1))},[l,i,u]);const q=r.useCallback(t=>{if(t===l||(x(t),!m.current))return;o.current&&clearTimeout(o.current);const e=f.current??i(l),s=i(t);if(!e||!s)return;const n=Math.min(e.left,s.left),d=Math.max(e.left+e.width,s.left+s.width)-n;u({left:n,width:d},"left 130ms ease-out, width 130ms ease-out, transform 130ms ease-out",.55),o.current=setTimeout(()=>{const y=i(t)??s;f.current=y,u(y,"left 160ms ease-in, width 160ms ease-in, transform 160ms ease-in",1),o.current=null},130)},[l,i,x,u]);return r.useEffect(()=>()=>{o.current&&clearTimeout(o.current)},[]),p.jsxs("div",{ref:w,role:"tablist","data-testid":"liquid-tabs",style:{background:"var(--roster-lt-bg)",borderColor:"var(--roster-lt-border)"},className:c.cn("rst:font-ui rst:relative rst:flex rst:border",h?"rst:w-full rst:overflow-hidden rst:rounded-lg":c.cn("rst:gap-1 rst:rounded-xl rst:p-1",b?"rst:w-full":"rst:w-fit"),v),children:[p.jsx("div",{ref:a,"aria-hidden":!0,"data-testid":"liquid-tabs-pill",className:c.cn("rst:absolute rst:rounded-lg",h?"rst:top-0 rst:bottom-0":"rst:top-1 rst:bottom-1"),style:{opacity:0,left:0,width:0,background:"var(--roster-lt-pill)"}}),g.map(t=>{const e=t.id===l;return p.jsx("button",{role:"tab","aria-selected":e,"data-tab-id":t.id,"data-testid":`liquid-tab-${t.id}`,onClick:()=>q(t.id),className:c.cn("rst:relative rst:z-10 rst:text-sm rst:font-medium rst:transition-colors rst:cursor-pointer",h?c.cn("rst:flex-1 rst:py-2",e?"rst:text-white":"rst:text-(--roster-lt-text-inactive) rst:hover:text-(--roster-lt-text-hover)"):c.cn("rst:rounded-lg rst:py-1.5",b?"rst:flex-1":"rst:px-4",e?"rst:text-white":"rst:text-(--roster-lt-text-inactive) rst:hover:text-(--roster-lt-text-hover)")),children:typeof t.label=="function"?t.label(e):t.label},t.id)})]})}exports.LiquidTabs=C;

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

@@ -1,39 +0,0 @@
-import { ReactNode } from 'react';
-export interface TabItem {
-    id: string;
-    /** Static label, or a render function that receives whether this tab is active. */
-    label: ReactNode | ((isActive: boolean) => ReactNode);
-}
-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) — floating pill inside a padded container.
-     *   Width is `w-fit` by default; use `fullWidth` to stretch it.
-     *   Liquid feel via scaleY squash during the stretch phase.
-     *
-     * `"filled"` — active tab fills its entire cell; container is always `w-full`.
-     *   Liquid feel via border-radius morphing (oval during stretch) so the
-     *   full-height pill never gaps at the container edges.
-     */
-    variant?: "pill" | "filled";
-    /** Stretch the `pill` variant container to full width with `flex-1` buttons. */
-    fullWidth?: boolean;
-    /** Extra classes applied to the outer container. */
-    className?: string;
-}
-/**
- * Controlled tab strip with a liquid sliding indicator.
- *
- * The pill animation is driven by direct DOM ref manipulation (no setState)
- * to avoid re-renders during the transition. Two-phase motion:
- *   1. Stretch — pill expands to span the gap between old and new tab (130 ms ease-out).
- *   2. Contract — pill snaps to the target tab (160 ms ease-in).
- *
- * `getBoundingClientRect` is used to measure tab positions, so the component
- * must be rendered in a document with a real layout engine to animate.
- */
-export declare function LiquidTabs({ tabs, activeTab, onChange, variant, fullWidth, className, }: LiquidTabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/LiquidTabs/LiquidTabs.js

@@ -1,120 +0,0 @@
-"use client";
-import { jsxs as k, jsx as v } from "react/jsx-runtime";
-import { useRef as c, useCallback as h, useEffect as x } from "react";
-import { cn as u } from "../../../lib/utils.js";
-function B({
-  tabs: R,
-  activeTab: n,
-  onChange: w,
-  variant: q = "pill",
-  fullWidth: y = !1,
-  className: C
-}) {
-  const g = c(null), d = c(null), a = c(null), l = c(null), m = c(!1), p = q === "filled", o = h((t) => {
-    const r = g.current;
-    if (!r) return null;
-    const e = r.querySelector(`[data-tab-id="${t}"]`);
-    if (!e) return null;
-    const s = r.getBoundingClientRect(), f = e.getBoundingClientRect();
-    return { left: f.left - s.left, width: f.width };
-  }, []), i = h((t, r, e) => {
-    const s = d.current;
-    s && (s.style.transition = r, s.style.left = `${t.left}px`, s.style.width = `${t.width}px`, s.style.transform = `scaleY(${e})`);
-  }, []);
-  x(() => {
-    const t = o(n);
-    t && (a.current = t, i(t, "none", 1), d.current && (d.current.style.opacity = "1"), m.current = !0);
-  }, []), x(() => {
-    if (!m.current || l.current !== null) return;
-    const t = o(n);
-    t && (a.current = t, i(t, "none", 1));
-  }, [n, o, i]);
-  const $ = h(
-    (t) => {
-      if (t === n || (w(t), !m.current)) return;
-      l.current && clearTimeout(l.current);
-      const r = a.current ?? o(n), e = o(t);
-      if (!r || !e) return;
-      const s = Math.min(r.left, e.left), f = Math.max(r.left + r.width, e.left + e.width) - s;
-      i(
-        { left: s, width: f },
-        "left 130ms ease-out, width 130ms ease-out, transform 130ms ease-out",
-        0.55
-      ), l.current = setTimeout(() => {
-        const b = o(t) ?? e;
-        a.current = b, i(
-          b,
-          "left 160ms ease-in, width 160ms ease-in, transform 160ms ease-in",
-          1
-        ), l.current = null;
-      }, 130);
-    },
-    [n, o, w, i]
-  );
-  return x(
-    () => () => {
-      l.current && clearTimeout(l.current);
-    },
-    []
-  ), /* @__PURE__ */ k(
-    "div",
-    {
-      ref: g,
-      role: "tablist",
-      "data-testid": "liquid-tabs",
-      style: { background: "var(--roster-lt-bg)", borderColor: "var(--roster-lt-border)" },
-      className: u(
-        "rst:font-ui rst:relative rst:flex rst:border",
-        p ? "rst:w-full rst:overflow-hidden rst:rounded-lg" : u(
-          "rst:gap-1 rst:rounded-xl rst:p-1",
-          y ? "rst:w-full" : "rst:w-fit"
-        ),
-        C
-      ),
-      children: [
-        /* @__PURE__ */ v(
-          "div",
-          {
-            ref: d,
-            "aria-hidden": !0,
-            "data-testid": "liquid-tabs-pill",
-            className: u(
-              "rst:absolute rst:rounded-lg",
-              p ? "rst:top-0 rst:bottom-0" : "rst:top-1 rst:bottom-1"
-            ),
-            style: { opacity: 0, left: 0, width: 0, background: "var(--roster-lt-pill)" }
-          }
-        ),
-        R.map((t) => {
-          const r = t.id === n;
-          return /* @__PURE__ */ v(
-            "button",
-            {
-              role: "tab",
-              "aria-selected": r,
-              "data-tab-id": t.id,
-              "data-testid": `liquid-tab-${t.id}`,
-              onClick: () => $(t.id),
-              className: u(
-                "rst:relative rst:z-10 rst:text-sm rst:font-medium rst:transition-colors rst:cursor-pointer",
-                p ? u(
-                  "rst:flex-1 rst:py-2",
-                  r ? "rst:text-white" : "rst:text-(--roster-lt-text-inactive) rst:hover:text-(--roster-lt-text-hover)"
-                ) : u(
-                  "rst:rounded-lg rst:py-1.5",
-                  y ? "rst:flex-1" : "rst:px-4",
-                  r ? "rst:text-white" : "rst:text-(--roster-lt-text-inactive) rst:hover:text-(--roster-lt-text-hover)"
-                )
-              ),
-              children: typeof t.label == "function" ? t.label(r) : t.label
-            },
-            t.id
-          );
-        })
-      ]
-    }
-  );
-}
-export {
-  B as LiquidTabs
-};