npm - @mastra/playground-ui - Versions diffs - 61.0.0-alpha.6 → 61.0.0 - Mend

@mastra/playground-ui 61.0.0-alpha.6 → 61.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1062) hide show

package/dist/style.css CHANGED Viewed

@@ -198,6 +198,14 @@
     --color-scrim: var(--scrim);
     --color-surface-overlay-soft: var(--surface-overlay-soft);
     --color-surface-overlay-strong: var(--surface-overlay-strong);
+    --text-hero: clamp(2rem, 3.9vw, 3.25rem);
+    --text-hero--line-height: 110%;
+    --text-hero--font-weight: 500;
+    --text-hero--letter-spacing: .01em;
+    --text-lead: clamp(1rem, 1.5vw, 1.25rem);
+    --text-lead--line-height: 140%;
+    --text-lead--font-weight: 400;
+    --text-lead--letter-spacing: .01em;
     --text-display: 1.375rem;
     --text-display--line-height: 127%;
     --text-display--font-weight: 500;
@@ -238,6 +246,10 @@
     --text-caption: .75rem;
     --text-caption--line-height: 150%;
     --text-caption--font-weight: 400;
+    --text-eyebrow: .75rem;
+    --text-eyebrow--line-height: 150%;
+    --text-eyebrow--font-weight: 500;
+    --text-eyebrow--letter-spacing: .08em;
     --text-meta: .625rem;
     --text-meta--line-height: 160%;
     --text-meta--font-weight: 500;
@@ -718,10 +730,6 @@
     inset-inline-start: 50%;
   }
-  .-top-2 {
-    top: calc(var(--spacing) * -2);
-  }
   .top-0 {
     top: 0;
   }
@@ -1718,18 +1726,10 @@
     margin-bottom: 0;
   }
-  .mb-0\.5 {
-    margin-bottom: calc(var(--spacing) * .5);
-  }
   .mb-1 {
     margin-bottom: var(--spacing);
   }
-  .mb-1\.5 {
-    margin-bottom: calc(var(--spacing) * 1.5);
-  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -2296,6 +2296,10 @@
     height: calc(100% - .5rem);
   }
+  .h-\[calc\(100\%-0\.25rem\)\] {
+    height: calc(100% - .25rem);
+  }
   .h-\[calc\(100dvh-1\.5rem\)\] {
     height: calc(100dvh - 1.5rem);
   }
@@ -3228,6 +3232,10 @@
     max-width: calc(var(--spacing) * 52);
   }
+  .max-w-56 {
+    max-width: calc(var(--spacing) * 56);
+  }
   .max-w-60 {
     max-width: calc(var(--spacing) * 60);
   }
@@ -3416,6 +3424,10 @@
     min-width: calc(var(--spacing) * 16);
   }
+  .min-w-24 {
+    min-width: calc(var(--spacing) * 24);
+  }
   .min-w-28 {
     min-width: calc(var(--spacing) * 28);
   }
@@ -3868,6 +3880,10 @@
     grid-template-columns: 3.5rem minmax(0, 1fr);
   }
+  .grid-cols-\[4rem_1fr\] {
+    grid-template-columns: 4rem 1fr;
+  }
   .grid-cols-\[4rem_minmax\(0\,1fr\)\] {
     grid-template-columns: 4rem minmax(0, 1fr);
   }
@@ -4378,6 +4394,10 @@
     border-radius: .25rem;
   }
+  .rounded-\(--attachment-radius\) {
+    border-radius: var(--attachment-radius);
+  }
   .rounded-\(--card-radius\) {
     border-radius: var(--card-radius);
   }
@@ -4414,6 +4434,10 @@
     border-radius: inherit;
   }
+  .rounded-\[max\(0px\,calc\(var\(--attachment-radius\,var\(--radius-lg\)\)-var\(--spacing\)\)\)\] {
+    border-radius: max(0px, calc(var(--attachment-radius, var(--radius-lg)) - var(--spacing)));
+  }
   .rounded-full {
     border-radius: 3.40282e38px;
   }
@@ -4505,6 +4529,10 @@
     border-bottom-right-radius: var(--radius-xl);
   }
+  .rounded-tr-\[inherit\] {
+    border-top-right-radius: inherit;
+  }
   .rounded-tr-studio-panel {
     border-top-right-radius: max(0px, calc(var(--studio-frame-radius, 1.5rem) - var(--studio-frame-inset, .5rem)));
   }
@@ -4740,10 +4768,6 @@
     border-left-color: var(--badge-purple-indicator);
   }
-  .border-l-destructive-indicator {
-    border-left-color: var(--destructive-indicator);
-  }
   .border-l-foreground {
     border-left-color: var(--foreground);
   }
@@ -4756,10 +4780,6 @@
     border-left-color: #0000;
   }
-  .border-l-warning-indicator {
-    border-left-color: var(--warning-indicator);
-  }
   .bg-\(--data-list-background\) {
     background-color: var(--data-list-background);
   }
@@ -6008,10 +6028,6 @@
     padding-block: calc(var(--spacing) * 12);
   }
-  .py-px {
-    padding-block: 1px;
-  }
   .ps-\(--chat-edge\) {
     padding-inline-start: var(--chat-edge);
   }
@@ -6264,6 +6280,10 @@
     vertical-align: top;
   }
+  .font-\[inherit\] {
+    font-family: inherit;
+  }
   .font-body {
     font-family: var(--font-body);
   }
@@ -6304,6 +6324,27 @@
     font-weight: var(--tw-font-weight, var(--text-display--font-weight));
   }
+  .text-eyebrow {
+    font-size: var(--text-eyebrow);
+    line-height: var(--tw-leading, var(--text-eyebrow--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-eyebrow--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-eyebrow--font-weight));
+  }
+  .text-hero {
+    font-size: var(--text-hero);
+    line-height: var(--tw-leading, var(--text-hero--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-hero--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-hero--font-weight));
+  }
+  .text-lead {
+    font-size: var(--text-lead);
+    line-height: var(--tw-leading, var(--text-lead--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-lead--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-lead--font-weight));
+  }
   .text-meta {
     font-size: var(--text-meta);
     line-height: var(--tw-leading, var(--text-meta--line-height));
@@ -6424,11 +6465,6 @@
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-\[0\.18em\] {
-    --tw-tracking: .18em;
-    letter-spacing: .18em;
-  }
   .tracking-normal {
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
@@ -7500,6 +7536,10 @@
     user-select: none;
   }
+  .\[--attachment-radius\:var\(--radius-xl\)\] {
+    --attachment-radius: var(--radius-xl);
+  }
   .\[--card-radius\:calc\(var\(--radius-xl\)-2px\)\] {
     --card-radius: calc(var(--radius-xl) - 2px);
   }
@@ -7729,7 +7769,7 @@
     border-color: var(--border);
   }
-  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+  .group-focus-within\:opacity-100:is(:where(.group):focus-within *), .group-focus-within\/attachment\:opacity-100:is(:where(.group\/attachment):focus-within *) {
     opacity: 1;
   }
@@ -8168,6 +8208,10 @@
     color: var(--foreground);
   }
+  .group-\[\:hover\]\/attachment\:opacity-100:is(:where(.group\/attachment):hover *) {
+    opacity: 1;
+  }
   .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
     cursor: not-allowed;
   }
@@ -9141,6 +9185,10 @@
     outline-offset: calc(1px * -1);
   }
+  .focus-visible\:-outline-offset-2:focus-visible {
+    outline-offset: calc(2px * -1);
+  }
   .focus-visible\:outline-offset-0:focus-visible {
     outline-offset: 0px;
   }
@@ -10344,6 +10392,10 @@
       transition-duration: .2s;
     }
+    .motion-safe\:duration-fast {
+      transition-duration: var(--duration-fast);
+    }
     .motion-safe\:duration-slow {
       transition-duration: var(--duration-slow);
     }
@@ -11205,28 +11257,13 @@
   }
   @media (pointer: coarse) {
-    .pointer-coarse\:static {
-      position: static;
-    }
-    .pointer-coarse\:flex {
-      display: flex;
+    .pointer-coarse\:size-11 {
+      width: calc(var(--spacing) * 11);
+      height: calc(var(--spacing) * 11);
     }
-    .pointer-coarse\:min-h-11 {
-      min-height: calc(var(--spacing) * 11);
-    }
-    .pointer-coarse\:min-w-11 {
-      min-width: calc(var(--spacing) * 11);
-    }
-    .pointer-coarse\:items-center {
-      align-items: center;
-    }
-    .pointer-coarse\:gap-1 {
-      gap: var(--spacing);
+    .pointer-coarse\:pr-12 {
+      padding-right: calc(var(--spacing) * 12);
     }
     .pointer-coarse\:opacity-100 {
@@ -11320,6 +11357,10 @@
     font-weight: var(--tw-font-weight, var(--text-meta--font-weight));
   }
+  .\[\&_\[cmdk-group-heading\]\]\:uppercase [cmdk-group-heading] {
+    text-transform: uppercase;
+  }
   .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
     padding-top: 0;
   }
@@ -11370,7 +11411,7 @@
     opacity: 1;
   }
-  .\[\&_\[data-slot\=sidebar-new-search-trigger\]\]\:hidden [data-slot="sidebar-new-search-trigger"] {
+  .\[\&_\[data-slot\=sidebar-search-trigger\]\]\:hidden [data-slot="sidebar-search-trigger"] {
     display: none;
   }
@@ -11419,33 +11460,10 @@
     border-radius: 3.40282e38px;
   }
-  .\[\&_code\]\:rounded code {
-    border-radius: .25rem;
-  }
-  .\[\&_code\]\:bg-fill code {
-    background-color: var(--fill);
-  }
   .\[\&_code\]\:bg-muted code {
     background-color: var(--muted);
   }
-  .\[\&_code\]\:px-1 code {
-    padding-inline: var(--spacing);
-  }
-  .\[\&_code\]\:py-0\.5 code {
-    padding-block: calc(var(--spacing) * .5);
-  }
-  .\[\&_code\]\:text-meta code {
-    font-size: var(--text-meta);
-    line-height: var(--tw-leading, var(--text-meta--line-height));
-    letter-spacing: var(--tw-tracking, var(--text-meta--letter-spacing));
-    font-weight: var(--tw-font-weight, var(--text-meta--font-weight));
-  }
   .\[\&_h1\]\:text-title h1 {
     font-size: var(--text-title);
     line-height: var(--tw-leading, var(--text-title--line-height));
@@ -11533,18 +11551,10 @@
     stroke-width: 1.75px;
   }
-  .\[\&_svg\]\:text-destructive-foreground\! svg {
-    color: var(--destructive-foreground) !important;
-  }
   .\[\&_svg\]\:text-muted-foreground svg {
     color: var(--muted-foreground);
   }
-  .\[\&_svg\]\:text-success-indicator\! svg {
-    color: var(--success-indicator) !important;
-  }
   @media (hover: hover) {
     .not-disabled\:hover\:\[\&_svg\]\:text-foreground:not(:disabled):hover svg {
       color: var(--foreground);
@@ -11822,19 +11832,10 @@
     font-weight: var(--tw-font-weight, var(--text-column--font-weight));
   }
-  :is(.\*\*\:\[\[cmdk-group-heading\]\]\:tracking-wider *)[cmdk-group-heading] {
-    --tw-tracking: var(--tracking-wider);
-    letter-spacing: var(--tracking-wider);
-  }
   :is(.\*\*\:\[\[cmdk-group-heading\]\]\:text-muted-foreground *)[cmdk-group-heading] {
     color: var(--muted-foreground);
   }
-  :is(.\*\*\:\[\[cmdk-group-heading\]\]\:uppercase *)[cmdk-group-heading] {
-    text-transform: uppercase;
-  }
   :is(:where([data-heading-case="sentence"]) .in-data-\[heading-case\=sentence\]\:\*\*\:\[\[cmdk-group-heading\]\]\:tracking-normal *)[cmdk-group-heading] {
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
@@ -11888,6 +11889,10 @@
     padding-block: calc(var(--spacing) * 1.5);
   }
+  .\[\&\:is\(button\,a\)\]\:cursor-pointer:is(button, a) {
+    cursor: pointer;
+  }
   .\[\&\>\*\]\:pointer-events-auto > * {
     pointer-events: auto;
   }
@@ -11928,6 +11933,10 @@
     margin-bottom: 0;
   }
+  .\[\&\>\:not\(\.data-list-row\)\]\:col-span-full > :not(.data-list-row) {
+    grid-column: 1 / -1;
+  }
   .\[\&\>\[data-slot\=button-icon\]\]\:-ml-\[\.3em\] > [data-slot="button-icon"] {
     margin-left: -.3em;
   }

package/dist/{tabs-list-Tqj36HIL.cjs → tabs-list-BeWntzEw.cjs} RENAMED Viewed

@@ -8,6 +8,7 @@ const React = require('react');
 const dropdownMenu = require('./dropdown-menu-j2y37TL5.cjs');
 const tooltip = require('./tooltip-DIZ5oqjV.cjs');
 const tabsContext = require('./tabs-context-pnspPkI-.cjs');
+const primitives_controlSize = require('./primitives/control-size.cjs.js');
 const primitives_transitions = require('./primitives/transitions.cjs.js');
 const utils_cn = require('./cn-DG0X1KEP.cjs');
@@ -22,6 +23,10 @@ const tabListVariants = index.cva("relative flex items-center text-body", {
     variant: "pill"
   }
 });
+function indicatorHeightClass(variant, contained) {
+  if (variant !== "pill") return "h-full";
+  return contained ? "h-[calc(100%-0.5rem)]" : "h-[calc(100%-0.25rem)]";
+}
 const TabList = ({ children, className, variant, size = "md", sticky, style }) => {
   const resolvedVariant = variant ?? "pill";
   const tabs$1 = React.useContext(tabsContext.TabsContext);
@@ -48,6 +53,8 @@ const TabList = ({ children, className, variant, size = "md", sticky, style }) =
     []
   );
   const contained = tabs$1?.appearance === "contained";
+  const pillTrack = resolvedVariant === "pill" && !contained;
+  const indicatorHeight = indicatorHeightClass(resolvedVariant, contained);
   React.useLayoutEffect(() => {
     const viewport = scrollRef.current;
     if (!viewport || !contained) return;
@@ -146,7 +153,14 @@ const TabList = ({ children, className, variant, size = "md", sticky, style }) =
             "data-overflow": hiddenTabs.length > 0 || void 0,
             "data-variant": resolvedVariant,
             "data-size": size,
-            className: utils_cn.cn("group/tabs-list", tabListVariants({ variant: resolvedVariant }), className),
+            className: utils_cn.cn(
+              "group/tabs-list",
+              tabListVariants({ variant: resolvedVariant }),
+              // A filled pill track is the control: its outer box takes the rung (like SegmentedControl),
+              // and the tabs fill it inside the 2px inset.
+              pillTrack && utils_cn.cn(primitives_controlSize.controlHeight[size], "items-stretch p-0.5"),
+              className
+            ),
             style,
             children: [
               children,
@@ -155,7 +169,7 @@ const TabList = ({ children, className, variant, size = "md", sticky, style }) =
                 {
                   className: utils_cn.cn(
                     "absolute top-1/2 left-0 z-0 rounded-full bg-[var(--tab-indicator-color,var(--fill-hover))]",
-                    resolvedVariant === "pill" ? "h-[calc(100%-0.5rem)]" : "h-full",
+                    indicatorHeight,
                     "w-[var(--active-tab-width)]",
                     "transition-[width,transform] duration-200 ease-in-out motion-reduce:transition-none"
                   ),
@@ -282,4 +296,4 @@ const TabList = ({ children, className, variant, size = "md", sticky, style }) =
 };
 exports.TabList = TabList;
-//# sourceMappingURL=tabs-list-Tqj36HIL.cjs.map
+//# sourceMappingURL=tabs-list-BeWntzEw.cjs.map

package/dist/tabs-list-BeWntzEw.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tabs-list-BeWntzEw.cjs","sources":["../src/ds/components/Tabs/tabs-list.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { ChevronDown, X } from 'lucide-react';\nimport { Fragment, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { DropdownMenu } from '../DropdownMenu/dropdown-menu';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../Tooltip/tooltip';\nimport { TabListContext, TabsContext } from './tabs-context';\nimport type { TabMeasurement } from './tabs-context';\nimport { controlHeight } from '@/ds/primitives/control-size';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst tabListVariants = cva('relative flex items-center text-body', {\n variants: {\n variant: {\n pill: 'w-fit gap-1 rounded-full bg-fill-subtle p-1',\n 'pill-ghost': 'w-fit gap-0.5 rounded-full',\n },\n },\n defaultVariants: {\n variant: 'pill',\n },\n});\n\ntype TabListVariantsProps = VariantProps<typeof tabListVariants>;\n\nexport type TabListVariant = NonNullable<TabListVariantsProps['variant']>;\n\n/** The shared control rung: a list of a size lines up with a Button or Input of that size. */\nexport type TabListSize = 'sm' | 'md';\n\nexport type TabListProps = Omit<TabListVariantsProps, 'variant'> & {\n children: React.ReactNode;\n className?: string;\n sticky?: boolean;\n size?: TabListSize;\n variant?: TabListVariant | null;\n style?: React.CSSProperties;\n};\n\n/** The active pill sits inside the track's inset: 2px on the rung-sized track, 4px when contained. */\nfunction indicatorHeightClass(variant: TabListVariant, contained: boolean) {\n if (variant !== 'pill') return 'h-full';\n return contained ? 'h-[calc(100%-0.5rem)]' : 'h-[calc(100%-0.25rem)]';\n}\n\nexport const TabList = ({ children, className, variant, size = 'md', sticky, style }: TabListProps) => {\n const resolvedVariant = variant ?? 'pill';\n const tabs = useContext(TabsContext);\n const scrollRef = useRef<HTMLDivElement>(null);\n const closeRefs = useRef(new Map<string, HTMLDivElement>());\n const tabPositions = useRef(new Map<string, number>());\n const selectedValue = useRef(tabs?.value);\n const [available, setAvailable] = useState<number | null>(null);\n const [measurements, setMeasurements] = useState<TabMeasurement[]>([]);\n const register = useCallback((tab: TabMeasurement) => {\n setMeasurements(previous => {\n const existing = previous.find(item => item.value === tab.value);\n if (\n existing &&\n existing.element === tab.element &&\n existing.width === tab.width &&\n existing.label === tab.label &&\n existing.disabled === tab.disabled &&\n existing.onClick === tab.onClick &&\n existing.onClose === tab.onClose\n )\n return previous;\n const next = existing ? previous.map(item => (item.value === tab.value ? tab : item)) : [...previous, tab];\n return next.sort((a, b) => {\n if (a.element === b.element) return 0;\n return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n });\n });\n }, []);\n const unregister = useCallback(\n (value: string) => setMeasurements(previous => previous.filter(tab => tab.value !== value)),\n [],\n );\n const contained = tabs?.appearance === 'contained';\n const pillTrack = resolvedVariant === 'pill' && !contained;\n const indicatorHeight = indicatorHeightClass(resolvedVariant, contained);\n useLayoutEffect(() => {\n const viewport = scrollRef.current;\n if (!viewport || !contained) return;\n const measure = () => setAvailable(viewport.clientWidth);\n measure();\n if (!('ResizeObserver' in globalThis)) return;\n const observer = new ResizeObserver(measure);\n observer.observe(viewport);\n return () => observer.disconnect();\n }, [contained]);\n const gap = contained ? 4 : 0;\n const frameReserve = contained ? 30 : 0;\n const hiddenValues = useMemo(() => {\n const hidden = new Set<string>();\n if (!contained || available === null) return hidden;\n const tabTotal = measurements.reduce((sum, tab) => sum + tab.width, 0) + gap * Math.max(measurements.length - 1, 0);\n if (tabTotal + frameReserve <= available) return hidden;\n let remaining = available - frameReserve - 48;\n const active = measurements.find(tab => tab.value === tabs?.value);\n if (active) remaining -= active.width + gap;\n let full = false;\n for (const tab of measurements) {\n if (tab === active) continue;\n if (full || tab.width + gap > remaining) {\n full = true;\n hidden.add(tab.value);\n } else remaining -= tab.width + gap;\n }\n return hidden;\n }, [contained, available, measurements, gap, frameReserve, tabs?.value]);\n const hiddenTabs = measurements.filter(tab => hiddenValues.has(tab.value));\n const overflowX = measurements\n .filter(tab => !hiddenValues.has(tab.value))\n .reduce((sum, tab) => sum + tab.width + gap, contained ? 4 : 0);\n const visibleClosableTabs = measurements.filter(tab => !hiddenValues.has(tab.value) && tab.onClose);\n const listContext = useMemo(\n () => ({ variant: resolvedVariant, size, hiddenValues, register, unregister }),\n [resolvedVariant, size, hiddenValues, register, unregister],\n );\n useLayoutEffect(() => {\n const nextPositions = new Map(tabPositions.current);\n const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n for (const tab of measurements) {\n if (hiddenValues.has(tab.value)) continue;\n const left = tab.element.offsetLeft;\n const previousLeft = tabPositions.current.get(tab.value);\n const close = closeRefs.current.get(tab.value);\n if (close) {\n close.style.left = `${left}px`;\n close.style.top = `${tab.element.offsetTop}px`;\n close.style.width = `${tab.element.offsetWidth}px`;\n close.style.height = `${tab.element.offsetHeight}px`;\n }\n const delta = previousLeft === undefined ? 0 : previousLeft - left;\n const shouldAnimate = tab.value !== tabs?.value && Math.abs(delta) <= 32;\n if (!reduceMotion && shouldAnimate && delta !== 0 && 'animate' in tab.element) {\n tab.element.animate([{ transform: `translateX(${delta}px)` }, { transform: 'translateX(0)' }], {\n duration: 180,\n easing: 'cubic-bezier(0.32, 0.72, 0, 1)',\n });\n }\n nextPositions.set(tab.value, left);\n }\n for (const value of nextPositions.keys()) {\n if (!measurements.some(tab => tab.value === value)) nextPositions.delete(value);\n }\n tabPositions.current = nextPositions;\n }, [hiddenValues, measurements, tabs?.value]);\n useLayoutEffect(() => {\n const previousValue = selectedValue.current;\n selectedValue.current = tabs?.value;\n const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n if (!contained || previousValue === tabs?.value || reduceMotion) return;\n const indicator = scrollRef.current?.querySelector<HTMLElement>('[data-slot=\"tabs-indicator\"]');\n if (!indicator || !('animate' in indicator)) return;\n indicator.animate(\n [\n { opacity: 0.72, scale: '0.97' },\n { opacity: 1, scale: '1' },\n ],\n {\n duration: 140,\n easing: 'cubic-bezier(0.32, 0.72, 0, 1)',\n },\n );\n }, [contained, tabs?.value]);\n\n return (\n <TabListContext.Provider value={listContext}>\n <TooltipProvider delay={200}>\n <div\n ref={scrollRef}\n data-slot=\"tabs-list-scroll\"\n className={cn('relative w-full overflow-x-auto', sticky && 'sticky top-0 z-10 bg-background')}\n >\n <BaseTabs.List\n data-slot=\"tabs-list\"\n data-overflow={hiddenTabs.length > 0 || undefined}\n data-variant={resolvedVariant}\n data-size={size}\n className={cn(\n 'group/tabs-list',\n tabListVariants({ variant: resolvedVariant }),\n // A filled pill track is the control: its outer box takes the rung (like SegmentedControl),\n // and the tabs fill it inside the 2px inset.\n pillTrack && cn(controlHeight[size], 'items-stretch p-0.5'),\n className,\n )}\n style={style}\n >\n {children}\n <BaseTabs.Indicator\n className={cn(\n 'absolute top-1/2 left-0 z-0 rounded-full bg-[var(--tab-indicator-color,var(--fill-hover))]',\n indicatorHeight,\n 'w-[var(--active-tab-width)]',\n 'transition-[width,transform] duration-200 ease-in-out motion-reduce:transition-none',\n )}\n data-slot=\"tabs-indicator\"\n style={{ transform: 'translateY(var(--tabs-indicator-y, -50%)) translateX(var(--active-tab-left))' }}\n />\n </BaseTabs.List>\n <div data-slot=\"tabs-close-actions\">\n {visibleClosableTabs.map(tab => (\n <div\n key={tab.value}\n ref={element => {\n if (element) closeRefs.current.set(tab.value, element);\n else closeRefs.current.delete(tab.value);\n }}\n data-slot=\"tab-close-item\"\n data-visible={tabs?.value === tab.value || undefined}\n >\n <Tooltip>\n <TooltipTrigger\n render={\n <button\n type=\"button\"\n tabIndex={tabs?.value === tab.value ? 0 : -1}\n data-slot=\"tab-close\"\n onClick={tab.onClose}\n className={cn(\n 'rounded p-0.5 hover:bg-fill-hover hover:text-destructive-foreground',\n transitions.colors,\n )}\n />\n }\n >\n <span className=\"sr-only\">Close {tab.label}</span>\n <X aria-hidden=\"true\" className=\"size-3\" />\n </TooltipTrigger>\n <TooltipContent>Close {tab.label}</TooltipContent>\n </Tooltip>\n </div>\n ))}\n </div>\n {hiddenTabs.length > 0 && (\n <div\n data-slot=\"tabs-overflow\"\n style={{ transform: `translateX(${overflowX}px)` }}\n className=\"tabs-overflow\"\n >\n <DropdownMenu>\n <DropdownMenu.Trigger\n aria-label={`${hiddenTabs.length} more tabs`}\n variant=\"ghost\"\n size=\"sm\"\n className=\"tabular-nums\"\n >\n +{hiddenTabs.length}\n <ChevronDown aria-hidden=\"true\" className=\"size-3\" />\n </DropdownMenu.Trigger>\n <DropdownMenu.Content className=\"grid\">\n {hiddenTabs.map((tab, index) => (\n <Fragment key={tab.value}>\n <DropdownMenu.Item\n data-slot=\"tabs-overflow-tab\"\n disabled={tab.disabled}\n className={tab.onClose ? 'pr-9' : undefined}\n style={{ gridArea: `${index + 1} / 1` }}\n onClick={() => {\n tabs?.select(tab.value);\n tab.onClick?.();\n }}\n >\n {tab.label}\n </DropdownMenu.Item>\n {tab.onClose ? (\n <Tooltip>\n <TooltipTrigger\n render={\n <DropdownMenu.Item\n data-slot=\"tabs-overflow-close\"\n className=\"pointer-events-none z-10 m-1 size-6 self-center justify-self-end p-0 opacity-0 hover:text-destructive-foreground data-[highlighted]:text-destructive-foreground\"\n style={{ gridArea: `${index + 1} / 1` }}\n onClick={tab.onClose}\n />\n }\n >\n <span className=\"sr-only\">Close {tab.label}</span>\n <X aria-hidden=\"true\" className=\"size-3\" />\n </TooltipTrigger>\n <TooltipContent side=\"right\">Close {tab.label}</TooltipContent>\n </Tooltip>\n ) : null}\n </Fragment>\n ))}\n </DropdownMenu.Content>\n </DropdownMenu>\n </div>\n )}\n </div>\n </TooltipProvider>\n </TabListContext.Provider>\n );\n};\n"],"names":["cva","tabs","useContext","TabsContext","useRef","useState","useCallback","useLayoutEffect","useMemo","jsx","TabListContext","TooltipProvider","jsxs","cn","BaseTabs","controlHeight","Tooltip","TooltipTrigger","transitions","X","TooltipContent","DropdownMenu","ChevronDown","Fragment"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,eAAA,GAAkBA,UAAI,sCAAA,EAAwC;AAAA,EAClE,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,6CAAA;AAAA,MACN,YAAA,EAAc;AAAA;AAChB,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAmBD,SAAS,oBAAA,CAAqB,SAAyB,SAAA,EAAoB;AACzE,EAAA,IAAI,OAAA,KAAY,QAAQ,OAAO,QAAA;AAC/B,EAAA,OAAO,YAAY,uBAAA,GAA0B,wBAAA;AAC/C;AAEO,MAAM,OAAA,GAAU,CAAC,EAAE,QAAA,EAAU,SAAA,EAAW,SAAS,IAAA,GAAO,IAAA,EAAM,MAAA,EAAQ,KAAA,EAAM,KAAoB;AACrG,EAAA,MAAM,kBAAkB,OAAA,IAAW,MAAA;AACnC,EAAA,MAAMC,MAAA,GAAOC,iBAAWC,uBAAW,CAAA;AACnC,EAAA,MAAM,SAAA,GAAYC,aAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,SAAA,GAAYA,YAAA,iBAAO,IAAI,GAAA,EAA6B,CAAA;AAC1D,EAAA,MAAM,YAAA,GAAeA,YAAA,iBAAO,IAAI,GAAA,EAAqB,CAAA;AACrD,EAAA,MAAM,aAAA,GAAgBA,YAAA,CAAOH,MAAA,EAAM,KAAK,CAAA;AACxC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAII,eAAwB,IAAI,CAAA;AAC9D,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,cAAA,CAA2B,EAAE,CAAA;AACrE,EAAA,MAAM,QAAA,GAAWC,iBAAA,CAAY,CAAC,GAAA,KAAwB;AACpD,IAAA,eAAA,CAAgB,CAAA,QAAA,KAAY;AAC1B,MAAA,MAAM,WAAW,QAAA,CAAS,IAAA,CAAK,UAAQ,IAAA,CAAK,KAAA,KAAU,IAAI,KAAK,CAAA;AAC/D,MAAA,IACE,QAAA,IACA,SAAS,OAAA,KAAY,GAAA,CAAI,WACzB,QAAA,CAAS,KAAA,KAAU,GAAA,CAAI,KAAA,IACvB,QAAA,CAAS,KAAA,KAAU,IAAI,KAAA,IACvB,QAAA,CAAS,QAAA,KAAa,GAAA,CAAI,QAAA,IAC1B,QAAA,CAAS,YAAY,GAAA,CAAI,OAAA,IACzB,QAAA,CAAS,OAAA,KAAY,GAAA,CAAI,OAAA;AAEzB,QAAA,OAAO,QAAA;AACT,MAAA,MAAM,IAAA,GAAO,QAAA,GAAW,QAAA,CAAS,GAAA,CAAI,UAAS,IAAA,CAAK,KAAA,KAAU,GAAA,CAAI,KAAA,GAAQ,MAAM,IAAK,CAAA,GAAI,CAAC,GAAG,UAAU,GAAG,CAAA;AACzG,MAAA,OAAO,IAAA,CAAK,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM;AACzB,QAAA,IAAI,CAAA,CAAE,OAAA,KAAY,CAAA,CAAE,OAAA,EAAS,OAAO,CAAA;AACpC,QAAA,OAAO,CAAA,CAAE,QAAQ,uBAAA,CAAwB,CAAA,CAAE,OAAO,CAAA,GAAI,IAAA,CAAK,8BAA8B,EAAA,GAAK,CAAA;AAAA,MAChG,CAAC,CAAA;AAAA,IACH,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,MAAM,UAAA,GAAaA,iBAAA;AAAA,IACjB,CAAC,KAAA,KAAkB,eAAA,CAAgB,CAAA,QAAA,KAAY,QAAA,CAAS,OAAO,CAAA,GAAA,KAAO,GAAA,CAAI,KAAA,KAAU,KAAK,CAAC,CAAA;AAAA,IAC1F;AAAC,GACH;AACA,EAAA,MAAM,SAAA,GAAYL,QAAM,UAAA,KAAe,WAAA;AACvC,EAAA,MAAM,SAAA,GAAY,eAAA,KAAoB,MAAA,IAAU,CAAC,SAAA;AACjD,EAAA,MAAM,eAAA,GAAkB,oBAAA,CAAqB,eAAA,EAAiB,SAAS,CAAA;AACvE,EAAAM,qBAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,WAAW,SAAA,CAAU,OAAA;AAC3B,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,SAAA,EAAW;AAC7B,IAAA,MAAM,OAAA,GAAU,MAAM,YAAA,CAAa,QAAA,CAAS,WAAW,CAAA;AACvD,IAAA,OAAA,EAAQ;AACR,IAAA,IAAI,EAAE,oBAAoB,UAAA,CAAA,EAAa;AACvC,IAAA,MAAM,QAAA,GAAW,IAAI,cAAA,CAAe,OAAO,CAAA;AAC3C,IAAA,QAAA,CAAS,QAAQ,QAAQ,CAAA;AACzB,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AACd,EAAA,MAAM,GAAA,GAAM,YAAY,CAAA,GAAI,CAAA;AAC5B,EAAA,MAAM,YAAA,GAAe,YAAY,EAAA,GAAK,CAAA;AACtC,EAAA,MAAM,YAAA,GAAeC,cAAQ,MAAM;AACjC,IAAA,MAAM,MAAA,uBAAa,GAAA,EAAY;AAC/B,IAAA,IAAI,CAAC,SAAA,IAAa,SAAA,KAAc,IAAA,EAAM,OAAO,MAAA;AAC7C,IAAA,MAAM,WAAW,YAAA,CAAa,MAAA,CAAO,CAAC,GAAA,EAAK,QAAQ,GAAA,GAAM,GAAA,CAAI,KAAA,EAAO,CAAC,IAAI,GAAA,GAAM,IAAA,CAAK,IAAI,YAAA,CAAa,MAAA,GAAS,GAAG,CAAC,CAAA;AAClH,IAAA,IAAI,QAAA,GAAW,YAAA,IAAgB,SAAA,EAAW,OAAO,MAAA;AACjD,IAAA,IAAI,SAAA,GAAY,YAAY,YAAA,GAAe,EAAA;AAC3C,IAAA,MAAM,SAAS,YAAA,CAAa,IAAA,CAAK,SAAO,GAAA,CAAI,KAAA,KAAUP,QAAM,KAAK,CAAA;AACjE,IAAA,IAAI,MAAA,EAAQ,SAAA,IAAa,MAAA,CAAO,KAAA,GAAQ,GAAA;AACxC,IAAA,IAAI,IAAA,GAAO,KAAA;AACX,IAAA,KAAA,MAAW,OAAO,YAAA,EAAc;AAC9B,MAAA,IAAI,QAAQ,MAAA,EAAQ;AACpB,MAAA,IAAI,IAAA,IAAQ,GAAA,CAAI,KAAA,GAAQ,GAAA,GAAM,SAAA,EAAW;AACvC,QAAA,IAAA,GAAO,IAAA;AACP,QAAA,MAAA,CAAO,GAAA,CAAI,IAAI,KAAK,CAAA;AAAA,MACtB,CAAA,MAAO,SAAA,IAAa,GAAA,CAAI,KAAA,GAAQ,GAAA;AAAA,IAClC;AACA,IAAA,OAAO,MAAA;AAAA,EACT,CAAA,EAAG,CAAC,SAAA,EAAW,SAAA,EAAW,cAAc,GAAA,EAAK,YAAA,EAAcA,MAAA,EAAM,KAAK,CAAC,CAAA;AACvE,EAAA,MAAM,UAAA,GAAa,aAAa,MAAA,CAAO,CAAA,GAAA,KAAO,aAAa,GAAA,CAAI,GAAA,CAAI,KAAK,CAAC,CAAA;AACzE,EAAA,MAAM,SAAA,GAAY,aACf,MAAA,CAAO,CAAA,GAAA,KAAO,CAAC,YAAA,CAAa,GAAA,CAAI,IAAI,KAAK,CAAC,EAC1C,MAAA,CAAO,CAAC,KAAK,GAAA,KAAQ,GAAA,GAAM,IAAI,KAAA,GAAQ,GAAA,EAAK,SAAA,GAAY,CAAA,GAAI,CAAC,CAAA;AAChE,EAAA,MAAM,mBAAA,GAAsB,YAAA,CAAa,MAAA,CAAO,CAAA,GAAA,KAAO,CAAC,YAAA,CAAa,GAAA,CAAI,GAAA,CAAI,KAAK,CAAA,IAAK,GAAA,CAAI,OAAO,CAAA;AAClG,EAAA,MAAM,WAAA,GAAcO,aAAA;AAAA,IAClB,OAAO,EAAE,OAAA,EAAS,iBAAiB,IAAA,EAAM,YAAA,EAAc,UAAU,UAAA,EAAW,CAAA;AAAA,IAC5E,CAAC,eAAA,EAAiB,IAAA,EAAM,YAAA,EAAc,UAAU,UAAU;AAAA,GAC5D;AACA,EAAAD,qBAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,aAAA,GAAgB,IAAI,GAAA,CAAI,YAAA,CAAa,OAAO,CAAA;AAClD,IAAA,MAAM,YAAA,GAAe,MAAA,CAAO,UAAA,GAAa,kCAAkC,EAAE,OAAA,IAAW,KAAA;AACxF,IAAA,KAAA,MAAW,OAAO,YAAA,EAAc;AAC9B,MAAA,IAAI,YAAA,CAAa,GAAA,CAAI,GAAA,CAAI,KAAK,CAAA,EAAG;AACjC,MAAA,MAAM,IAAA,GAAO,IAAI,OAAA,CAAQ,UAAA;AACzB,MAAA,MAAM,YAAA,GAAe,YAAA,CAAa,OAAA,CAAQ,GAAA,CAAI,IAAI,KAAK,CAAA;AACvD,MAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,OAAA,CAAQ,GAAA,CAAI,IAAI,KAAK,CAAA;AAC7C,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,KAAA,CAAM,KAAA,CAAM,IAAA,GAAO,CAAA,EAAG,IAAI,CAAA,EAAA,CAAA;AAC1B,QAAA,KAAA,CAAM,KAAA,CAAM,GAAA,GAAM,CAAA,EAAG,GAAA,CAAI,QAAQ,SAAS,CAAA,EAAA,CAAA;AAC1C,QAAA,KAAA,CAAM,KAAA,CAAM,KAAA,GAAQ,CAAA,EAAG,GAAA,CAAI,QAAQ,WAAW,CAAA,EAAA,CAAA;AAC9C,QAAA,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG,GAAA,CAAI,QAAQ,YAAY,CAAA,EAAA,CAAA;AAAA,MAClD;AACA,MAAA,MAAM,KAAA,GAAQ,YAAA,KAAiB,MAAA,GAAY,CAAA,GAAI,YAAA,GAAe,IAAA;AAC9D,MAAA,MAAM,aAAA,GAAgB,IAAI,KAAA,KAAUN,MAAA,EAAM,SAAS,IAAA,CAAK,GAAA,CAAI,KAAK,CAAA,IAAK,EAAA;AACtE,MAAA,IAAI,CAAC,YAAA,IAAgB,aAAA,IAAiB,UAAU,CAAA,IAAK,SAAA,IAAa,IAAI,OAAA,EAAS;AAC7E,QAAA,GAAA,CAAI,OAAA,CAAQ,OAAA,CAAQ,CAAC,EAAE,SAAA,EAAW,CAAA,WAAA,EAAc,KAAK,CAAA,GAAA,CAAA,EAAM,EAAG,EAAE,SAAA,EAAW,eAAA,EAAiB,CAAA,EAAG;AAAA,UAC7F,QAAA,EAAU,GAAA;AAAA,UACV,MAAA,EAAQ;AAAA,SACT,CAAA;AAAA,MACH;AACA,MAAA,aAAA,CAAc,GAAA,CAAI,GAAA,CAAI,KAAA,EAAO,IAAI,CAAA;AAAA,IACnC;AACA,IAAA,KAAA,MAAW,KAAA,IAAS,aAAA,CAAc,IAAA,EAAK,EAAG;AACxC,MAAA,IAAI,CAAC,YAAA,CAAa,IAAA,CAAK,CAAA,GAAA,KAAO,GAAA,CAAI,UAAU,KAAK,CAAA,EAAG,aAAA,CAAc,MAAA,CAAO,KAAK,CAAA;AAAA,IAChF;AACA,IAAA,YAAA,CAAa,OAAA,GAAU,aAAA;AAAA,EACzB,GAAG,CAAC,YAAA,EAAc,YAAA,EAAcA,MAAA,EAAM,KAAK,CAAC,CAAA;AAC5C,EAAAM,qBAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,gBAAgB,aAAA,CAAc,OAAA;AACpC,IAAA,aAAA,CAAc,UAAUN,MAAA,EAAM,KAAA;AAC9B,IAAA,MAAM,YAAA,GAAe,MAAA,CAAO,UAAA,GAAa,kCAAkC,EAAE,OAAA,IAAW,KAAA;AACxF,IAAA,IAAI,CAAC,SAAA,IAAa,aAAA,KAAkBA,MAAA,EAAM,SAAS,YAAA,EAAc;AACjE,IAAA,MAAM,SAAA,GAAY,SAAA,CAAU,OAAA,EAAS,aAAA,CAA2B,8BAA8B,CAAA;AAC9F,IAAA,IAAI,CAAC,SAAA,IAAa,EAAE,SAAA,IAAa,SAAA,CAAA,EAAY;AAC7C,IAAA,SAAA,CAAU,OAAA;AAAA,MACR;AAAA,QACE,EAAE,OAAA,EAAS,IAAA,EAAM,KAAA,EAAO,MAAA,EAAO;AAAA,QAC/B,EAAE,OAAA,EAAS,CAAA,EAAG,KAAA,EAAO,GAAA;AAAI,OAC3B;AAAA,MACA;AAAA,QACE,QAAA,EAAU,GAAA;AAAA,QACV,MAAA,EAAQ;AAAA;AACV,KACF;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAWA,MAAA,EAAM,KAAK,CAAC,CAAA;AAE3B,EAAA,uBACEQ,cAAA,CAACC,2BAAe,QAAA,EAAf,EAAwB,OAAO,WAAA,EAC9B,QAAA,kBAAAD,cAAA,CAACE,uBAAA,EAAA,EAAgB,KAAA,EAAO,GAAA,EACtB,QAAA,kBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,SAAA;AAAA,MACL,WAAA,EAAU,kBAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,iCAAA,EAAmC,MAAA,IAAU,iCAAiC,CAAA;AAAA,MAE5F,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAACE,SAAA,CAAS,IAAA;AAAA,UAAT;AAAA,YACC,WAAA,EAAU,WAAA;AAAA,YACV,eAAA,EAAe,UAAA,CAAW,MAAA,GAAS,CAAA,IAAK,MAAA;AAAA,YACxC,cAAA,EAAc,eAAA;AAAA,YACd,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAWD,WAAA;AAAA,cACT,iBAAA;AAAA,cACA,eAAA,CAAgB,EAAE,OAAA,EAAS,eAAA,EAAiB,CAAA;AAAA;AAAA;AAAA,cAG5C,SAAA,IAAaA,WAAA,CAAGE,oCAAA,CAAc,IAAI,GAAG,qBAAqB,CAAA;AAAA,cAC1D;AAAA,aACF;AAAA,YACA,KAAA;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,QAAA;AAAA,8BACDN,cAAA;AAAA,gBAACK,SAAA,CAAS,SAAA;AAAA,gBAAT;AAAA,kBACC,SAAA,EAAWD,WAAA;AAAA,oBACT,4FAAA;AAAA,oBACA,eAAA;AAAA,oBACA,6BAAA;AAAA,oBACA;AAAA,mBACF;AAAA,kBACA,WAAA,EAAU,gBAAA;AAAA,kBACV,KAAA,EAAO,EAAE,SAAA,EAAW,8EAAA;AAA+E;AAAA;AACrG;AAAA;AAAA,SACF;AAAA,uCACC,KAAA,EAAA,EAAI,WAAA,EAAU,oBAAA,EACZ,QAAA,EAAA,mBAAA,CAAoB,IAAI,CAAA,GAAA,qBACvBJ,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,KAAK,CAAA,OAAA,KAAW;AACd,cAAA,IAAI,SAAS,SAAA,CAAU,OAAA,CAAQ,GAAA,CAAI,GAAA,CAAI,OAAO,OAAO,CAAA;AAAA,mBAChD,SAAA,CAAU,OAAA,CAAQ,MAAA,CAAO,GAAA,CAAI,KAAK,CAAA;AAAA,YACzC,CAAA;AAAA,YACA,WAAA,EAAU,gBAAA;AAAA,YACV,cAAA,EAAcR,MAAA,EAAM,KAAA,KAAU,GAAA,CAAI,KAAA,IAAS,MAAA;AAAA,YAE3C,0CAACe,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,8BAAAJ,eAAA;AAAA,gBAACK,sBAAA;AAAA,gBAAA;AAAA,kBACC,MAAA,kBACER,cAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,IAAA,EAAK,QAAA;AAAA,sBACL,QAAA,EAAUR,MAAA,EAAM,KAAA,KAAU,GAAA,CAAI,QAAQ,CAAA,GAAI,EAAA;AAAA,sBAC1C,WAAA,EAAU,WAAA;AAAA,sBACV,SAAS,GAAA,CAAI,OAAA;AAAA,sBACb,SAAA,EAAWY,WAAA;AAAA,wBACT,qEAAA;AAAA,wBACAK,kCAAA,CAAY;AAAA;AACd;AAAA,mBACF;AAAA,kBAGF,QAAA,EAAA;AAAA,oCAAAN,eAAA,CAAC,MAAA,EAAA,EAAK,WAAU,SAAA,EAAU,QAAA,EAAA;AAAA,sBAAA,QAAA;AAAA,sBAAO,GAAA,CAAI;AAAA,qBAAA,EAAM,CAAA;AAAA,oCAC3CH,cAAA,CAACU,aAAA,EAAA,EAAE,aAAA,EAAY,MAAA,EAAO,WAAU,QAAA,EAAS;AAAA;AAAA;AAAA,eAC3C;AAAA,8CACCC,sBAAA,EAAA,EAAe,QAAA,EAAA;AAAA,gBAAA,QAAA;AAAA,gBAAO,GAAA,CAAI;AAAA,eAAA,EAAM;AAAA,aAAA,EACnC;AAAA,WAAA;AAAA,UA3BK,GAAA,CAAI;AAAA,SA6BZ,CAAA,EACH,CAAA;AAAA,QACC,UAAA,CAAW,SAAS,CAAA,oBACnBX,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAU,eAAA;AAAA,YACV,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,WAAA,EAAc,SAAS,CAAA,GAAA,CAAA,EAAM;AAAA,YACjD,SAAA,EAAU,eAAA;AAAA,YAEV,0CAACY,yBAAA,EAAA,EACC,QAAA,EAAA;AAAA,8BAAAT,eAAA;AAAA,gBAACS,yBAAA,CAAa,OAAA;AAAA,gBAAb;AAAA,kBACC,YAAA,EAAY,CAAA,EAAG,UAAA,CAAW,MAAM,CAAA,UAAA,CAAA;AAAA,kBAChC,OAAA,EAAQ,OAAA;AAAA,kBACR,IAAA,EAAK,IAAA;AAAA,kBACL,SAAA,EAAU,cAAA;AAAA,kBACX,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,oBACG,UAAA,CAAW,MAAA;AAAA,oCACbZ,cAAA,CAACa,uBAAA,EAAA,EAAY,aAAA,EAAY,MAAA,EAAO,WAAU,QAAA,EAAS;AAAA;AAAA;AAAA,eACrD;AAAA,8BACAb,cAAA,CAACY,yBAAA,CAAa,OAAA,EAAb,EAAqB,SAAA,EAAU,MAAA,EAC7B,QAAA,EAAA,UAAA,CAAW,GAAA,CAAI,CAAC,GAAA,EAAK,KAAA,qBACpBT,eAAA,CAACW,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,gCAAAd,cAAA;AAAA,kBAACY,yBAAA,CAAa,IAAA;AAAA,kBAAb;AAAA,oBACC,WAAA,EAAU,mBAAA;AAAA,oBACV,UAAU,GAAA,CAAI,QAAA;AAAA,oBACd,SAAA,EAAW,GAAA,CAAI,OAAA,GAAU,MAAA,GAAS,MAAA;AAAA,oBAClC,OAAO,EAAE,QAAA,EAAU,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,IAAA,CAAA,EAAO;AAAA,oBACtC,SAAS,MAAM;AACb,sBAAApB,MAAA,EAAM,MAAA,CAAO,IAAI,KAAK,CAAA;AACtB,sBAAA,GAAA,CAAI,OAAA,IAAU;AAAA,oBAChB,CAAA;AAAA,oBAEC,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA,iBACP;AAAA,gBACC,GAAA,CAAI,OAAA,mBACHW,eAAA,CAACI,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,kCAAAJ,eAAA;AAAA,oBAACK,sBAAA;AAAA,oBAAA;AAAA,sBACC,MAAA,kBACER,cAAA;AAAA,wBAACY,yBAAA,CAAa,IAAA;AAAA,wBAAb;AAAA,0BACC,WAAA,EAAU,qBAAA;AAAA,0BACV,SAAA,EAAU,iKAAA;AAAA,0BACV,OAAO,EAAE,QAAA,EAAU,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,IAAA,CAAA,EAAO;AAAA,0BACtC,SAAS,GAAA,CAAI;AAAA;AAAA,uBACf;AAAA,sBAGF,QAAA,EAAA;AAAA,wCAAAT,eAAA,CAAC,MAAA,EAAA,EAAK,WAAU,SAAA,EAAU,QAAA,EAAA;AAAA,0BAAA,QAAA;AAAA,0BAAO,GAAA,CAAI;AAAA,yBAAA,EAAM,CAAA;AAAA,wCAC3CH,cAAA,CAACU,aAAA,EAAA,EAAE,aAAA,EAAY,MAAA,EAAO,WAAU,QAAA,EAAS;AAAA;AAAA;AAAA,mBAC3C;AAAA,kCACAP,eAAA,CAACQ,sBAAA,EAAA,EAAe,IAAA,EAAK,OAAA,EAAQ,QAAA,EAAA;AAAA,oBAAA,QAAA;AAAA,oBAAO,GAAA,CAAI;AAAA,mBAAA,EAAM;AAAA,iBAAA,EAChD,CAAA,GACE;AAAA,eAAA,EAAA,EA9BS,GAAA,CAAI,KA+BnB,CACD,CAAA,EACH;AAAA,aAAA,EACF;AAAA;AAAA;AACF;AAAA;AAAA,KAGN,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/{tabs-list-tLx5fgP0.js → tabs-list-DoSX2xLL.js} RENAMED Viewed

@@ -6,6 +6,7 @@ import { useContext, useRef, useState, useCallback, useLayoutEffect, useMemo, Fr
 import { D as DropdownMenu } from './dropdown-menu-DpEn6HwK.js';
 import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-DsQPiynb.js';
 import { T as TabsContext, a as TabListContext } from './tabs-context-Cbuw7i0u.js';
+import { controlHeight } from './primitives/control-size.es.js';
 import { transitions } from './primitives/transitions.es.js';
 import { c as cn } from './cn-65Adrsfj.js';
@@ -20,6 +21,10 @@ const tabListVariants = cva("relative flex items-center text-body", {
     variant: "pill"
   }
 });
+function indicatorHeightClass(variant, contained) {
+  if (variant !== "pill") return "h-full";
+  return contained ? "h-[calc(100%-0.5rem)]" : "h-[calc(100%-0.25rem)]";
+}
 const TabList = ({ children, className, variant, size = "md", sticky, style }) => {
   const resolvedVariant = variant ?? "pill";
   const tabs = useContext(TabsContext);
@@ -46,6 +51,8 @@ const TabList = ({ children, className, variant, size = "md", sticky, style }) =
     []
   );
   const contained = tabs?.appearance === "contained";
+  const pillTrack = resolvedVariant === "pill" && !contained;
+  const indicatorHeight = indicatorHeightClass(resolvedVariant, contained);
   useLayoutEffect(() => {
     const viewport = scrollRef.current;
     if (!viewport || !contained) return;
@@ -144,7 +151,14 @@ const TabList = ({ children, className, variant, size = "md", sticky, style }) =
             "data-overflow": hiddenTabs.length > 0 || void 0,
             "data-variant": resolvedVariant,
             "data-size": size,
-            className: cn("group/tabs-list", tabListVariants({ variant: resolvedVariant }), className),
+            className: cn(
+              "group/tabs-list",
+              tabListVariants({ variant: resolvedVariant }),
+              // A filled pill track is the control: its outer box takes the rung (like SegmentedControl),
+              // and the tabs fill it inside the 2px inset.
+              pillTrack && cn(controlHeight[size], "items-stretch p-0.5"),
+              className
+            ),
             style,
             children: [
               children,
@@ -153,7 +167,7 @@ const TabList = ({ children, className, variant, size = "md", sticky, style }) =
                 {
                   className: cn(
                     "absolute top-1/2 left-0 z-0 rounded-full bg-[var(--tab-indicator-color,var(--fill-hover))]",
-                    resolvedVariant === "pill" ? "h-[calc(100%-0.5rem)]" : "h-full",
+                    indicatorHeight,
                     "w-[var(--active-tab-width)]",
                     "transition-[width,transform] duration-200 ease-in-out motion-reduce:transition-none"
                   ),
@@ -280,4 +294,4 @@ const TabList = ({ children, className, variant, size = "md", sticky, style }) =
 };
 export { TabList as T };
-//# sourceMappingURL=tabs-list-tLx5fgP0.js.map
+//# sourceMappingURL=tabs-list-DoSX2xLL.js.map

package/dist/tabs-list-DoSX2xLL.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tabs-list-DoSX2xLL.js","sources":["../src/ds/components/Tabs/tabs-list.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { ChevronDown, X } from 'lucide-react';\nimport { Fragment, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { DropdownMenu } from '../DropdownMenu/dropdown-menu';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../Tooltip/tooltip';\nimport { TabListContext, TabsContext } from './tabs-context';\nimport type { TabMeasurement } from './tabs-context';\nimport { controlHeight } from '@/ds/primitives/control-size';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst tabListVariants = cva('relative flex items-center text-body', {\n variants: {\n variant: {\n pill: 'w-fit gap-1 rounded-full bg-fill-subtle p-1',\n 'pill-ghost': 'w-fit gap-0.5 rounded-full',\n },\n },\n defaultVariants: {\n variant: 'pill',\n },\n});\n\ntype TabListVariantsProps = VariantProps<typeof tabListVariants>;\n\nexport type TabListVariant = NonNullable<TabListVariantsProps['variant']>;\n\n/** The shared control rung: a list of a size lines up with a Button or Input of that size. */\nexport type TabListSize = 'sm' | 'md';\n\nexport type TabListProps = Omit<TabListVariantsProps, 'variant'> & {\n children: React.ReactNode;\n className?: string;\n sticky?: boolean;\n size?: TabListSize;\n variant?: TabListVariant | null;\n style?: React.CSSProperties;\n};\n\n/** The active pill sits inside the track's inset: 2px on the rung-sized track, 4px when contained. */\nfunction indicatorHeightClass(variant: TabListVariant, contained: boolean) {\n if (variant !== 'pill') return 'h-full';\n return contained ? 'h-[calc(100%-0.5rem)]' : 'h-[calc(100%-0.25rem)]';\n}\n\nexport const TabList = ({ children, className, variant, size = 'md', sticky, style }: TabListProps) => {\n const resolvedVariant = variant ?? 'pill';\n const tabs = useContext(TabsContext);\n const scrollRef = useRef<HTMLDivElement>(null);\n const closeRefs = useRef(new Map<string, HTMLDivElement>());\n const tabPositions = useRef(new Map<string, number>());\n const selectedValue = useRef(tabs?.value);\n const [available, setAvailable] = useState<number | null>(null);\n const [measurements, setMeasurements] = useState<TabMeasurement[]>([]);\n const register = useCallback((tab: TabMeasurement) => {\n setMeasurements(previous => {\n const existing = previous.find(item => item.value === tab.value);\n if (\n existing &&\n existing.element === tab.element &&\n existing.width === tab.width &&\n existing.label === tab.label &&\n existing.disabled === tab.disabled &&\n existing.onClick === tab.onClick &&\n existing.onClose === tab.onClose\n )\n return previous;\n const next = existing ? previous.map(item => (item.value === tab.value ? tab : item)) : [...previous, tab];\n return next.sort((a, b) => {\n if (a.element === b.element) return 0;\n return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n });\n });\n }, []);\n const unregister = useCallback(\n (value: string) => setMeasurements(previous => previous.filter(tab => tab.value !== value)),\n [],\n );\n const contained = tabs?.appearance === 'contained';\n const pillTrack = resolvedVariant === 'pill' && !contained;\n const indicatorHeight = indicatorHeightClass(resolvedVariant, contained);\n useLayoutEffect(() => {\n const viewport = scrollRef.current;\n if (!viewport || !contained) return;\n const measure = () => setAvailable(viewport.clientWidth);\n measure();\n if (!('ResizeObserver' in globalThis)) return;\n const observer = new ResizeObserver(measure);\n observer.observe(viewport);\n return () => observer.disconnect();\n }, [contained]);\n const gap = contained ? 4 : 0;\n const frameReserve = contained ? 30 : 0;\n const hiddenValues = useMemo(() => {\n const hidden = new Set<string>();\n if (!contained || available === null) return hidden;\n const tabTotal = measurements.reduce((sum, tab) => sum + tab.width, 0) + gap * Math.max(measurements.length - 1, 0);\n if (tabTotal + frameReserve <= available) return hidden;\n let remaining = available - frameReserve - 48;\n const active = measurements.find(tab => tab.value === tabs?.value);\n if (active) remaining -= active.width + gap;\n let full = false;\n for (const tab of measurements) {\n if (tab === active) continue;\n if (full || tab.width + gap > remaining) {\n full = true;\n hidden.add(tab.value);\n } else remaining -= tab.width + gap;\n }\n return hidden;\n }, [contained, available, measurements, gap, frameReserve, tabs?.value]);\n const hiddenTabs = measurements.filter(tab => hiddenValues.has(tab.value));\n const overflowX = measurements\n .filter(tab => !hiddenValues.has(tab.value))\n .reduce((sum, tab) => sum + tab.width + gap, contained ? 4 : 0);\n const visibleClosableTabs = measurements.filter(tab => !hiddenValues.has(tab.value) && tab.onClose);\n const listContext = useMemo(\n () => ({ variant: resolvedVariant, size, hiddenValues, register, unregister }),\n [resolvedVariant, size, hiddenValues, register, unregister],\n );\n useLayoutEffect(() => {\n const nextPositions = new Map(tabPositions.current);\n const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n for (const tab of measurements) {\n if (hiddenValues.has(tab.value)) continue;\n const left = tab.element.offsetLeft;\n const previousLeft = tabPositions.current.get(tab.value);\n const close = closeRefs.current.get(tab.value);\n if (close) {\n close.style.left = `${left}px`;\n close.style.top = `${tab.element.offsetTop}px`;\n close.style.width = `${tab.element.offsetWidth}px`;\n close.style.height = `${tab.element.offsetHeight}px`;\n }\n const delta = previousLeft === undefined ? 0 : previousLeft - left;\n const shouldAnimate = tab.value !== tabs?.value && Math.abs(delta) <= 32;\n if (!reduceMotion && shouldAnimate && delta !== 0 && 'animate' in tab.element) {\n tab.element.animate([{ transform: `translateX(${delta}px)` }, { transform: 'translateX(0)' }], {\n duration: 180,\n easing: 'cubic-bezier(0.32, 0.72, 0, 1)',\n });\n }\n nextPositions.set(tab.value, left);\n }\n for (const value of nextPositions.keys()) {\n if (!measurements.some(tab => tab.value === value)) nextPositions.delete(value);\n }\n tabPositions.current = nextPositions;\n }, [hiddenValues, measurements, tabs?.value]);\n useLayoutEffect(() => {\n const previousValue = selectedValue.current;\n selectedValue.current = tabs?.value;\n const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n if (!contained || previousValue === tabs?.value || reduceMotion) return;\n const indicator = scrollRef.current?.querySelector<HTMLElement>('[data-slot=\"tabs-indicator\"]');\n if (!indicator || !('animate' in indicator)) return;\n indicator.animate(\n [\n { opacity: 0.72, scale: '0.97' },\n { opacity: 1, scale: '1' },\n ],\n {\n duration: 140,\n easing: 'cubic-bezier(0.32, 0.72, 0, 1)',\n },\n );\n }, [contained, tabs?.value]);\n\n return (\n <TabListContext.Provider value={listContext}>\n <TooltipProvider delay={200}>\n <div\n ref={scrollRef}\n data-slot=\"tabs-list-scroll\"\n className={cn('relative w-full overflow-x-auto', sticky && 'sticky top-0 z-10 bg-background')}\n >\n <BaseTabs.List\n data-slot=\"tabs-list\"\n data-overflow={hiddenTabs.length > 0 || undefined}\n data-variant={resolvedVariant}\n data-size={size}\n className={cn(\n 'group/tabs-list',\n tabListVariants({ variant: resolvedVariant }),\n // A filled pill track is the control: its outer box takes the rung (like SegmentedControl),\n // and the tabs fill it inside the 2px inset.\n pillTrack && cn(controlHeight[size], 'items-stretch p-0.5'),\n className,\n )}\n style={style}\n >\n {children}\n <BaseTabs.Indicator\n className={cn(\n 'absolute top-1/2 left-0 z-0 rounded-full bg-[var(--tab-indicator-color,var(--fill-hover))]',\n indicatorHeight,\n 'w-[var(--active-tab-width)]',\n 'transition-[width,transform] duration-200 ease-in-out motion-reduce:transition-none',\n )}\n data-slot=\"tabs-indicator\"\n style={{ transform: 'translateY(var(--tabs-indicator-y, -50%)) translateX(var(--active-tab-left))' }}\n />\n </BaseTabs.List>\n <div data-slot=\"tabs-close-actions\">\n {visibleClosableTabs.map(tab => (\n <div\n key={tab.value}\n ref={element => {\n if (element) closeRefs.current.set(tab.value, element);\n else closeRefs.current.delete(tab.value);\n }}\n data-slot=\"tab-close-item\"\n data-visible={tabs?.value === tab.value || undefined}\n >\n <Tooltip>\n <TooltipTrigger\n render={\n <button\n type=\"button\"\n tabIndex={tabs?.value === tab.value ? 0 : -1}\n data-slot=\"tab-close\"\n onClick={tab.onClose}\n className={cn(\n 'rounded p-0.5 hover:bg-fill-hover hover:text-destructive-foreground',\n transitions.colors,\n )}\n />\n }\n >\n <span className=\"sr-only\">Close {tab.label}</span>\n <X aria-hidden=\"true\" className=\"size-3\" />\n </TooltipTrigger>\n <TooltipContent>Close {tab.label}</TooltipContent>\n </Tooltip>\n </div>\n ))}\n </div>\n {hiddenTabs.length > 0 && (\n <div\n data-slot=\"tabs-overflow\"\n style={{ transform: `translateX(${overflowX}px)` }}\n className=\"tabs-overflow\"\n >\n <DropdownMenu>\n <DropdownMenu.Trigger\n aria-label={`${hiddenTabs.length} more tabs`}\n variant=\"ghost\"\n size=\"sm\"\n className=\"tabular-nums\"\n >\n +{hiddenTabs.length}\n <ChevronDown aria-hidden=\"true\" className=\"size-3\" />\n </DropdownMenu.Trigger>\n <DropdownMenu.Content className=\"grid\">\n {hiddenTabs.map((tab, index) => (\n <Fragment key={tab.value}>\n <DropdownMenu.Item\n data-slot=\"tabs-overflow-tab\"\n disabled={tab.disabled}\n className={tab.onClose ? 'pr-9' : undefined}\n style={{ gridArea: `${index + 1} / 1` }}\n onClick={() => {\n tabs?.select(tab.value);\n tab.onClick?.();\n }}\n >\n {tab.label}\n </DropdownMenu.Item>\n {tab.onClose ? (\n <Tooltip>\n <TooltipTrigger\n render={\n <DropdownMenu.Item\n data-slot=\"tabs-overflow-close\"\n className=\"pointer-events-none z-10 m-1 size-6 self-center justify-self-end p-0 opacity-0 hover:text-destructive-foreground data-[highlighted]:text-destructive-foreground\"\n style={{ gridArea: `${index + 1} / 1` }}\n onClick={tab.onClose}\n />\n }\n >\n <span className=\"sr-only\">Close {tab.label}</span>\n <X aria-hidden=\"true\" className=\"size-3\" />\n </TooltipTrigger>\n <TooltipContent side=\"right\">Close {tab.label}</TooltipContent>\n </Tooltip>\n ) : null}\n </Fragment>\n ))}\n </DropdownMenu.Content>\n </DropdownMenu>\n </div>\n )}\n </div>\n </TooltipProvider>\n </TabListContext.Provider>\n );\n};\n"],"names":["BaseTabs"],"mappings":"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"}

package/dist/tabs-root.css CHANGED Viewed

@@ -44,12 +44,12 @@
     [data-variant='pill'] [data-slot='tab'] {
       position: relative;
       z-index: 10;
-      padding: 4px 12px;
+      padding: 0 12px;
       border-radius: 9999px;
     }
     [data-variant='pill'][data-size='sm'] [data-slot='tab'] {
-      padding-block: 0;
+      padding: 0 10px;
     }
     :is([data-variant='pill'], [data-variant='pill-ghost']) [data-slot='tab'][data-active][data-closable] {