@mastra/playground-ui 56.0.0 → 57.0.0-alpha.1

package/dist/src/ds/primitives/fluid-menu.d.ts

@@ -16,8 +16,12 @@ import * as React from 'react';
  *
  * The keyboard path stays honest: the library sets `activeAttr` on the row it
  * considers highlighted (Base UI: `data-highlighted`, cmdk: `data-selected`),
- * and the item hook mirrors that onto the fluid highlight, so arrow keys move
- * the same surface the mouse does.
+ * or moves focus onto it (roving-focus lists), and the item hook mirrors that
+ * onto the fluid highlight, so arrow keys move the same surface the mouse does.
+ *
+ * A row whose submenu is open (`data-popup-open`) holds the highlight once the
+ * pointer leaves for the submenu, so the path to the open submenu stays lit
+ * on the one surface instead of a second background painted by the row.
  */
 type FluidMenuContextValue = {
     registerItem: UseFluidHoverReturn['registerItem'];
@@ -25,6 +29,7 @@ type FluidMenuContextValue = {
     activeAttr: string;
     allocateIndex: () => number;
     releaseIndex: (index: number) => void;
+    setHeld: (index: number, held: boolean) => void;
 };
 type MouseHandlers = Pick<React.HTMLAttributes<HTMLElement>, 'onMouseMove' | 'onMouseEnter' | 'onMouseLeave' | 'onClick'>;
 export type UseFluidMenuOptions = {
@@ -60,5 +65,5 @@ export declare function FluidMenuItems({ menu, className, children, }: {
  * state and mirrors the library's highlighted attribute onto it. A no-op
  * outside a provider, so rows still render standalone.
  */
-export declare function useFluidMenuItemRef<T extends HTMLElement>(forwardedRef: React.ForwardedRef<T>): (element: T | null) => void;
+export declare function useFluidMenuItemRef<T extends HTMLElement>(forwardedRef?: React.ForwardedRef<T>): (element: T | null) => void;
 export {};

package/dist/src/ds/primitives/form-element.d.ts

@@ -1,12 +1,11 @@
 export declare const sharedFormElementDisabledStyle = "disabled:cursor-not-allowed disabled:text-muted-foreground";
-export declare const disabledFilledSurfaceStyle = "disabled:border-border disabled:bg-fill-subtle";
 export declare const disabledOutlineSurfaceStyle = "disabled:border-border disabled:bg-transparent";
 export declare const inputFocusBorderVisible = "focus-visible:border-border-focus";
 export declare const inputFocusBorderWithin = "focus-within:border-border-focus";
 export declare const controlFocusBorderVisible = "outline-hidden focus-visible:outline-hidden focus-visible:border-border-focus";
 export declare const inputSurfaceAndFocusStyle: string;
 export declare const inputSurfaceAndFocusWithinStyle: string;
-export declare const fieldTriggerSurfaceStyle: string;
+export declare const raisedControlSurfaceStyle: string;
 export type DeprecatedFilledVariant = 'filled';
 export declare function resolveFieldVariant<TVariant extends string>(variant: TVariant | DeprecatedFilledVariant | null | undefined): TVariant | 'default' | null | undefined;
 export declare const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";

package/dist/src/hooks/use-fluid-hover.d.ts

@@ -47,10 +47,15 @@ export interface UseFluidHoverReturn {
      */
     isMeasured: boolean;
     sessionRef: RefObject<number>;
+    /**
+     * Events whose target sits outside the container in the DOM are ignored:
+     * React bubbles events from a portaled child (a submenu) through its React
+     * parents, and those must not steer or click this list.
+     */
     handlers: {
         onMouseMove: (e: React.MouseEvent) => void;
-        onMouseEnter: () => void;
-        onMouseLeave: () => void;
+        onMouseEnter: (e: React.MouseEvent) => void;
+        onMouseLeave: (e: React.MouseEvent) => void;
         /**
          * Routes a click that lands between items (a gap, the padding, past the
          * last row) to the highlighted item, so the highlight and the click agree:

package/dist/style.css

@@ -130,7 +130,6 @@
     --color-red-600: oklch(57.7% .245 27.325);
     --color-red-700: oklch(50.5% .213 27.518);
     --color-red-900: oklch(39.6% .141 25.723);
-    --color-orange-400: oklch(75% .183 55.934);
     --color-amber-400: oklch(82.8% .189 84.429);
     --color-yellow-500: oklch(79.5% .184 86.047);
     --color-yellow-600: oklch(68.1% .162 75.834);
@@ -149,7 +148,6 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
-    --breakpoint-lg: 64rem;
     --breakpoint-2xl: 1536px;
     --container-xs: 20rem;
     --container-sm: 24rem;
@@ -1080,10 +1078,6 @@
     margin: var(--spacing);
   }
 
-  .m-1\.5 {
-    margin: calc(var(--spacing) * 1.5);
-  }
-
   .m-2\! {
     margin: calc(var(--spacing) * 2) !important;
   }
@@ -1133,10 +1127,6 @@
     margin-inline: var(--spacing);
   }
 
-  .mx-1\.5 {
-    margin-inline: calc(var(--spacing) * 1.5);
-  }
-
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -2207,14 +2197,14 @@
     height: calc(var(--spacing) * 96);
   }
 
-  .h-100 {
-    height: calc(var(--spacing) * 100);
-  }
-
   .h-105 {
     height: calc(var(--spacing) * 105);
   }
 
+  .h-120 {
+    height: calc(var(--spacing) * 120);
+  }
+
   .h-125 {
     height: calc(var(--spacing) * 125);
   }
@@ -2239,6 +2229,10 @@
     height: calc(var(--spacing) * 152);
   }
 
+  .h-155 {
+    height: calc(var(--spacing) * 155);
+  }
+
   .h-180 {
     height: calc(var(--spacing) * 180);
   }
@@ -2275,8 +2269,8 @@
     height: 400px;
   }
 
-  .h-\[620px\] {
-    height: 620px;
+  .h-\[480px\] {
+    height: 480px;
   }
 
   .h-\[calc\(85dvh\+1\.5rem\)\] {
@@ -2531,10 +2525,6 @@
     min-height: calc(var(--spacing) * 72);
   }
 
-  .min-h-136 {
-    min-height: calc(var(--spacing) * 136);
-  }
-
   .min-h-140 {
     min-height: calc(var(--spacing) * 140);
   }
@@ -2803,6 +2793,10 @@
     width: calc(var(--spacing) * 160);
   }
 
+  .w-172 {
+    width: calc(var(--spacing) * 172);
+  }
+
   .w-175 {
     width: calc(var(--spacing) * 175);
   }
@@ -2899,10 +2893,6 @@
     width: 400px;
   }
 
-  .w-\[420px\] {
-    width: 420px;
-  }
-
   .w-\[450px\] {
     width: 450px;
   }
@@ -2915,10 +2905,6 @@
     width: 600px;
   }
 
-  .w-\[688px\] {
-    width: 688px;
-  }
-
   .w-\[calc\(32rem\+1\.5rem\)\] {
     width: 33.5rem;
   }
@@ -2967,6 +2953,10 @@
     width: min(52rem, 100vw - 3rem);
   }
 
+  .w-\[min\(92vw\,44rem\)\] {
+    width: min(92vw, 44rem);
+  }
+
   .w-\[var\(--active-tab-width\)\] {
     width: var(--active-tab-width);
   }
@@ -3247,10 +3237,6 @@
     max-width: none;
   }
 
-  .max-w-screen-lg {
-    max-width: var(--breakpoint-lg);
-  }
-
   .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -3355,10 +3341,6 @@
     min-width: var(--container-md);
   }
 
-  .min-w-min {
-    min-width: min-content;
-  }
-
   .min-w-px {
     min-width: 1px;
   }
@@ -3695,10 +3677,6 @@
     grid-template-columns: 9rem repeat(4, minmax(0, 1fr));
   }
 
-  .grid-cols-\[12rem_1fr_1fr\] {
-    grid-template-columns: 12rem 1fr 1fr;
-  }
-
   .grid-cols-\[18rem_1fr_0fr\] {
     grid-template-columns: 18rem 1fr 0fr;
   }
@@ -3735,6 +3713,10 @@
     grid-template-columns: auto 1fr !important;
   }
 
+  .grid-cols-\[auto_minmax\(0\,1fr\)\] {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
   .grid-cols-\[minmax\(0\,1fr\)\] {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -3815,10 +3797,6 @@
     grid-template-rows: auto 1fr 1fr;
   }
 
-  .grid-rows-\[auto_auto\] {
-    grid-template-rows: auto auto;
-  }
-
   .grid-rows-\[auto_minmax\(0\,1fr\)\] {
     grid-template-rows: auto minmax(0, 1fr);
   }
@@ -3863,10 +3841,6 @@
     align-content: center;
   }
 
-  .content-normal {
-    align-content: normal;
-  }
-
   .content-start {
     align-content: flex-start;
   }
@@ -4066,6 +4040,10 @@
     margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
+
   .gap-x-3 {
     column-gap: calc(var(--spacing) * 3);
   }
@@ -4625,10 +4603,6 @@
     }
   }
 
-  .border-orange-400 {
-    border-color: var(--color-orange-400);
-  }
-
   .border-placeholder {
     border-color: var(--placeholder);
   }
@@ -5678,10 +5652,6 @@
     stroke-width: 2px;
   }
 
-  .stroke-\[1\.5\] {
-    stroke-width: 1.5px;
-  }
-
   .object-cover {
     object-fit: cover;
   }
@@ -6754,10 +6724,6 @@
     text-decoration-line: underline;
   }
 
-  .accent-current {
-    accent-color: currentColor;
-  }
-
   .accent-foreground {
     accent-color: var(--foreground);
   }
@@ -7162,6 +7128,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[translate\,width\,height\,opacity\] {
+    transition-property: translate, width, height, opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[width\,background-color\] {
     transition-property: width, background-color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -7214,6 +7186,11 @@
     transition-property: none;
   }
 
+  .duration-100 {
+    --tw-duration: .1s;
+    transition-duration: .1s;
+  }
+
   .duration-150 {
     --tw-duration: .15s;
     transition-duration: .15s;
@@ -8622,10 +8599,6 @@
       }
     }
 
-    .hover\:bg-transparent:hover {
-      background-color: #0000;
-    }
-
     .hover\:bg-white\/\[0\.03\]:hover {
       background-color: #ffffff08;
     }
@@ -8691,10 +8664,6 @@
       border-color: var(--border-hover);
     }
 
-    .not-disabled\:hover\:bg-card:not(:disabled):hover {
-      background-color: var(--card);
-    }
-
     .not-disabled\:hover\:bg-destructive\/20:not(:disabled):hover {
       background-color: var(--destructive);
     }
@@ -8721,6 +8690,10 @@
       background-color: var(--fill-subtle);
     }
 
+    .not-disabled\:hover\:bg-transparent:not(:disabled):hover {
+      background-color: #0000;
+    }
+
     .not-disabled\:hover\:text-destructive:not(:disabled):hover {
       color: var(--destructive);
     }
@@ -9027,10 +9000,6 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .not-disabled\:active\:bg-card:not(:disabled):active {
-    background-color: var(--card);
-  }
-
   .not-disabled\:active\:bg-destructive\/30:not(:disabled):active {
     background-color: var(--destructive);
   }
@@ -9045,10 +9014,6 @@
     background-color: var(--fill);
   }
 
-  .not-disabled\:active\:bg-fill-active:not(:disabled):active {
-    background-color: var(--fill-active);
-  }
-
   .not-disabled\:active\:bg-fill-destructive-active:not(:disabled):active {
     background-color: var(--fill-destructive-active);
   }
@@ -9057,6 +9022,10 @@
     background-color: var(--fill-inverse-active);
   }
 
+  .not-disabled\:active\:bg-transparent:not(:disabled):active {
+    background-color: #0000;
+  }
+
   .disabled\:pointer-events-none:disabled {
     pointer-events: none;
   }
@@ -9184,14 +9153,6 @@
     }
   }
 
-  .has-\[\:checked\]\:\[--surface-rim\:var\(--border-strong\)\]:has(:checked) {
-    --surface-rim: var(--border-strong);
-  }
-
-  .has-\[\:checked\]\:\[--surface-tint\:var\(--fill-hover\)\]:has(:checked) {
-    --surface-tint: var(--fill-hover);
-  }
-
   .has-\[\:disabled\]\:cursor-not-allowed:has(:disabled) {
     cursor: not-allowed;
   }
@@ -9204,10 +9165,6 @@
     color: var(--muted-foreground);
   }
 
-  .has-\[\:disabled\]\:opacity-50:has(:disabled) {
-    opacity: .5;
-  }
-
   .has-\[\:focus-visible\]\:ring-2:has(:focus-visible) {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -9401,16 +9358,6 @@
     background-color: var(--surface-panel);
   }
 
-  .data-highlighted\:bg-destructive\/20[data-highlighted] {
-    background-color: var(--destructive);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .data-highlighted\:bg-destructive\/20[data-highlighted] {
-      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
-    }
-  }
-
   .data-highlighted\:text-destructive[data-highlighted] {
     color: var(--destructive);
   }
@@ -10162,6 +10109,12 @@
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
+    .motion-reduce\:transition-opacity {
+      transition-property: opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
     .motion-reduce\:transition-none {
       transition-property: none;
     }
@@ -10532,10 +10485,6 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
-    .md\:grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
     .md\:grid-cols-\[13rem_minmax\(0\,1fr\)\] {
       grid-template-columns: 13rem minmax(0, 1fr);
     }
@@ -10562,26 +10511,10 @@
   }
 
   @media (min-width: 64rem) {
-    .lg\:m-2 {
-      margin: calc(var(--spacing) * 2);
-    }
-
     .lg\:m-6 {
       margin: calc(var(--spacing) * 6);
     }
 
-    .lg\:mx-2 {
-      margin-inline: calc(var(--spacing) * 2);
-    }
-
-    .lg\:mb-2 {
-      margin-bottom: calc(var(--spacing) * 2);
-    }
-
-    .lg\:ml-0 {
-      margin-left: 0;
-    }
-
     .lg\:flex {
       display: flex;
     }
@@ -10694,6 +10627,10 @@
       gap: calc(var(--spacing) * 6);
     }
 
+    .lg\:p-2 {
+      padding: calc(var(--spacing) * 2);
+    }
+
     .lg\:p-6 {
       padding: calc(var(--spacing) * 6);
     }
@@ -10710,6 +10647,18 @@
       padding-top: calc(var(--spacing) * 6);
     }
 
+    .lg\:pr-2 {
+      padding-right: calc(var(--spacing) * 2);
+    }
+
+    .lg\:pb-2 {
+      padding-bottom: calc(var(--spacing) * 2);
+    }
+
+    .lg\:pl-0 {
+      padding-left: 0;
+    }
+
     .lg\:tabular-nums {
       --tw-numeric-spacing: tabular-nums;
       font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
@@ -11098,7 +11047,7 @@
     padding: 0;
   }
 
-  .\[\&_\[data-orientation\=vertical\]\[data-has-overflow-y\]\]\:opacity-100 [data-orientation="vertical"][data-has-overflow-y] {
+  .focus-within\:\[\&_\[data-orientation\=vertical\]\[data-has-overflow-y\]\]\:opacity-100:focus-within [data-orientation="vertical"][data-has-overflow-y] {
     opacity: 1;
   }
 
@@ -11407,6 +11356,10 @@
     appearance: none;
   }
 
+  .\[\&\:active\:not\(\:disabled\)\]\:\[--surface-tint\:var\(--fill\)\]:active:not(:disabled) {
+    --surface-tint: var(--fill);
+  }
+
   .\[\&\:after\]\:absolute:after {
     position: absolute;
   }
@@ -11510,6 +11463,16 @@
     border-bottom-right-radius: var(--radius-md);
   }
 
+  .\[\&\:has\(\[data-variant\=destructive\]\[data-fluid-hover-active\]\)_\[data-slot\=fluid-hover-highlight\]\]\:bg-destructive\/20:has([data-variant="destructive"][data-fluid-hover-active]) [data-slot="fluid-hover-highlight"] {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[\&\:has\(\[data-variant\=destructive\]\[data-fluid-hover-active\]\)_\[data-slot\=fluid-hover-highlight\]\]\:bg-destructive\/20:has([data-variant="destructive"][data-fluid-hover-active]) [data-slot="fluid-hover-highlight"] {
+      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
   .\[\&\:hover\]\:opacity-70:hover {
     opacity: .7;
   }
@@ -11530,7 +11493,7 @@
     color: var(--color-black);
   }
 
-  .\[\&\:hover\:not\(\:focus-visible\)\]\:\[--surface-tint\:var\(--fill-subtle\)\]:hover:not(:focus-visible), .\[\&\:hover\:not\(\:focus-visible\)\:not\(\:disabled\)\:not\(\[data-popup-open\]\)\]\:\[--surface-tint\:var\(--fill-subtle\)\]:hover:not(:focus-visible):not(:disabled):not([data-popup-open]), .\[\&\:hover\:not\(\:focus-within\)\:not\(\:has\(\:disabled\)\)\]\:\[--surface-tint\:var\(--fill-subtle\)\]:hover:not(:focus-within):not(:has(:disabled)) {
+  .\[\&\:hover\:not\(\:active\)\:not\(\:disabled\)\:not\(\[data-popup-open\]\)\]\:\[--surface-tint\:var\(--fill-subtle\)\]:hover:not(:active):not(:disabled):not([data-popup-open]), .\[\&\:hover\:not\(\:focus-visible\)\]\:\[--surface-tint\:var\(--fill-subtle\)\]:hover:not(:focus-visible), .\[\&\:hover\:not\(\:focus-visible\)\:not\(\:disabled\)\:not\(\[data-popup-open\]\)\]\:\[--surface-tint\:var\(--fill-subtle\)\]:hover:not(:focus-visible):not(:disabled):not([data-popup-open]), .\[\&\:hover\:not\(\:focus-within\)\:not\(\:has\(\:disabled\)\)\]\:\[--surface-tint\:var\(--fill-subtle\)\]:hover:not(:focus-within):not(:has(:disabled)) {
     --surface-tint: var(--fill-subtle);
   }
 

package/dist/{tabs-content-CKC4kIpH.js → tabs-content-BeFlc4E_.js}

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Tabs } from '@base-ui/react/tabs';
 import { useContext, useState, useEffect } from 'react';
-import { a as TabsContext } from './tabs-tab-BycF4dvx.js';
+import { a as TabsContext } from './tabs-tab-CoSCf5Ku.js';
 import { focusRing } from './primitives/transitions.es.js';
 import { c as cn } from './cn-65Adrsfj.js';
 
@@ -32,4 +32,4 @@ const TabContent = ({ children, value, flush = false, keepMounted = false, class
 };
 
 export { TabContent as T };
-//# sourceMappingURL=tabs-content-CKC4kIpH.js.map
+//# sourceMappingURL=tabs-content-BeFlc4E_.js.map

package/dist/{tabs-content-CKC4kIpH.js.map → tabs-content-BeFlc4E_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tabs-content-CKC4kIpH.js","sources":["../src/ds/components/Tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { useContext, useEffect, useState } from 'react';\nimport { TabsContext } from './tabs-context';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type TabContentProps = {\n  children: React.ReactNode;\n  value: string;\n  flush?: boolean;\n  keepMounted?: boolean;\n  className?: string;\n};\n\nexport const TabContent = ({ children, value, flush = false, keepMounted = false, className }: TabContentProps) => {\n  const tabs = useContext(TabsContext);\n  const selected = tabs?.value === value;\n  const [visited, setVisited] = useState(selected);\n  useEffect(() => {\n    if (keepMounted && selected) setVisited(true);\n  }, [keepMounted, selected]);\n  return (\n    <BaseTabs.Panel\n      value={value}\n      keepMounted={keepMounted}\n      data-slot=\"tabs-content\"\n      data-flush={flush || undefined}\n      className={cn(\n        'grid overflow-y-auto ring-offset-background',\n        // Flush panels give the row to their content (scroll region, code block) instead of padding it.\n        flush ? 'h-full min-h-0' : 'py-2',\n        focusRing.visible,\n        className,\n      )}\n    >\n      <div data-slot=\"tabs-content-body\" className=\"contents\">\n        {!keepMounted || selected || visited ? children : null}\n      </div>\n    </BaseTabs.Panel>\n  );\n};\n"],"names":["BaseTabs"],"mappings":";;;;;;;AAcO,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAU,KAAA,EAAO,QAAQ,KAAA,EAAO,WAAA,GAAc,KAAA,EAAO,SAAA,EAAU,KAAuB;AACjH,EAAA,MAAM,IAAA,GAAO,WAAW,WAAW,CAAA;AACnC,EAAA,MAAM,QAAA,GAAW,MAAM,KAAA,KAAU,KAAA;AACjC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,QAAQ,CAAA;AAC/C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAA,IAAe,QAAA,EAAU,UAAA,CAAW,IAAI,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,WAAA,EAAa,QAAQ,CAAC,CAAA;AAC1B,EAAA,uBACE,GAAA;AAAA,IAACA,IAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA,EAAU,cAAA;AAAA,MACV,cAAY,KAAA,IAAS,MAAA;AAAA,MACrB,SAAA,EAAW,EAAA;AAAA,QACT,6CAAA;AAAA;AAAA,QAEA,QAAQ,gBAAA,GAAmB,MAAA;AAAA,QAC3B,SAAA,CAAU,OAAA;AAAA,QACV;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,SAAA,EAAU,UAAA,EAC1C,QAAA,EAAA,CAAC,WAAA,IAAe,QAAA,IAAY,OAAA,GAAU,QAAA,GAAW,IAAA,EACpD;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"tabs-content-BeFlc4E_.js","sources":["../src/ds/components/Tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { useContext, useEffect, useState } from 'react';\nimport { TabsContext } from './tabs-context';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type TabContentProps = {\n  children: React.ReactNode;\n  value: string;\n  flush?: boolean;\n  keepMounted?: boolean;\n  className?: string;\n};\n\nexport const TabContent = ({ children, value, flush = false, keepMounted = false, className }: TabContentProps) => {\n  const tabs = useContext(TabsContext);\n  const selected = tabs?.value === value;\n  const [visited, setVisited] = useState(selected);\n  useEffect(() => {\n    if (keepMounted && selected) setVisited(true);\n  }, [keepMounted, selected]);\n  return (\n    <BaseTabs.Panel\n      value={value}\n      keepMounted={keepMounted}\n      data-slot=\"tabs-content\"\n      data-flush={flush || undefined}\n      className={cn(\n        'grid overflow-y-auto ring-offset-background',\n        // Flush panels give the row to their content (scroll region, code block) instead of padding it.\n        flush ? 'h-full min-h-0' : 'py-2',\n        focusRing.visible,\n        className,\n      )}\n    >\n      <div data-slot=\"tabs-content-body\" className=\"contents\">\n        {!keepMounted || selected || visited ? children : null}\n      </div>\n    </BaseTabs.Panel>\n  );\n};\n"],"names":["BaseTabs"],"mappings":";;;;;;;AAcO,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAU,KAAA,EAAO,QAAQ,KAAA,EAAO,WAAA,GAAc,KAAA,EAAO,SAAA,EAAU,KAAuB;AACjH,EAAA,MAAM,IAAA,GAAO,WAAW,WAAW,CAAA;AACnC,EAAA,MAAM,QAAA,GAAW,MAAM,KAAA,KAAU,KAAA;AACjC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,QAAQ,CAAA;AAC/C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAA,IAAe,QAAA,EAAU,UAAA,CAAW,IAAI,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,WAAA,EAAa,QAAQ,CAAC,CAAA;AAC1B,EAAA,uBACE,GAAA;AAAA,IAACA,IAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA,EAAU,cAAA;AAAA,MACV,cAAY,KAAA,IAAS,MAAA;AAAA,MACrB,SAAA,EAAW,EAAA;AAAA,QACT,6CAAA;AAAA;AAAA,QAEA,QAAQ,gBAAA,GAAmB,MAAA;AAAA,QAC3B,SAAA,CAAU,OAAA;AAAA,QACV;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,SAAA,EAAU,UAAA,EAC1C,QAAA,EAAA,CAAC,WAAA,IAAe,QAAA,IAAY,OAAA,GAAU,QAAA,GAAW,IAAA,EACpD;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/{tabs-content-Bz6CZuv9.cjs → tabs-content-Cdu6HP8U.cjs}

@@ -3,7 +3,7 @@
 const jsxRuntime = require('react/jsx-runtime');
 const tabs = require('@base-ui/react/tabs');
 const React = require('react');
-const tabsTab = require('./tabs-tab-DA466DbX.cjs');
+const tabsTab = require('./tabs-tab-J91Szy3Q.cjs');
 const primitives_transitions = require('./primitives/transitions.cjs.js');
 const utils_cn = require('./cn-DG0X1KEP.cjs');
 
@@ -34,4 +34,4 @@ const TabContent = ({ children, value, flush = false, keepMounted = false, class
 };
 
 exports.TabContent = TabContent;
-//# sourceMappingURL=tabs-content-Bz6CZuv9.cjs.map
+//# sourceMappingURL=tabs-content-Cdu6HP8U.cjs.map

package/dist/{tabs-content-Bz6CZuv9.cjs.map → tabs-content-Cdu6HP8U.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"tabs-content-Bz6CZuv9.cjs","sources":["../src/ds/components/Tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { useContext, useEffect, useState } from 'react';\nimport { TabsContext } from './tabs-context';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type TabContentProps = {\n  children: React.ReactNode;\n  value: string;\n  flush?: boolean;\n  keepMounted?: boolean;\n  className?: string;\n};\n\nexport const TabContent = ({ children, value, flush = false, keepMounted = false, className }: TabContentProps) => {\n  const tabs = useContext(TabsContext);\n  const selected = tabs?.value === value;\n  const [visited, setVisited] = useState(selected);\n  useEffect(() => {\n    if (keepMounted && selected) setVisited(true);\n  }, [keepMounted, selected]);\n  return (\n    <BaseTabs.Panel\n      value={value}\n      keepMounted={keepMounted}\n      data-slot=\"tabs-content\"\n      data-flush={flush || undefined}\n      className={cn(\n        'grid overflow-y-auto ring-offset-background',\n        // Flush panels give the row to their content (scroll region, code block) instead of padding it.\n        flush ? 'h-full min-h-0' : 'py-2',\n        focusRing.visible,\n        className,\n      )}\n    >\n      <div data-slot=\"tabs-content-body\" className=\"contents\">\n        {!keepMounted || selected || visited ? children : null}\n      </div>\n    </BaseTabs.Panel>\n  );\n};\n"],"names":["tabs","useContext","TabsContext","useState","useEffect","jsx","BaseTabs","cn","focusRing"],"mappings":";;;;;;;;;AAcO,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAU,KAAA,EAAO,QAAQ,KAAA,EAAO,WAAA,GAAc,KAAA,EAAO,SAAA,EAAU,KAAuB;AACjH,EAAA,MAAMA,MAAA,GAAOC,iBAAWC,mBAAW,CAAA;AACnC,EAAA,MAAM,QAAA,GAAWF,QAAM,KAAA,KAAU,KAAA;AACjC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIG,eAAS,QAAQ,CAAA;AAC/C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAA,IAAe,QAAA,EAAU,UAAA,CAAW,IAAI,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,WAAA,EAAa,QAAQ,CAAC,CAAA;AAC1B,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA,EAAU,cAAA;AAAA,MACV,cAAY,KAAA,IAAS,MAAA;AAAA,MACrB,SAAA,EAAWC,WAAA;AAAA,QACT,6CAAA;AAAA;AAAA,QAEA,QAAQ,gBAAA,GAAmB,MAAA;AAAA,QAC3BC,gCAAA,CAAU,OAAA;AAAA,QACV;AAAA,OACF;AAAA,MAEA,QAAA,kBAAAH,cAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,SAAA,EAAU,UAAA,EAC1C,QAAA,EAAA,CAAC,WAAA,IAAe,QAAA,IAAY,OAAA,GAAU,QAAA,GAAW,IAAA,EACpD;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"tabs-content-Cdu6HP8U.cjs","sources":["../src/ds/components/Tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { useContext, useEffect, useState } from 'react';\nimport { TabsContext } from './tabs-context';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type TabContentProps = {\n  children: React.ReactNode;\n  value: string;\n  flush?: boolean;\n  keepMounted?: boolean;\n  className?: string;\n};\n\nexport const TabContent = ({ children, value, flush = false, keepMounted = false, className }: TabContentProps) => {\n  const tabs = useContext(TabsContext);\n  const selected = tabs?.value === value;\n  const [visited, setVisited] = useState(selected);\n  useEffect(() => {\n    if (keepMounted && selected) setVisited(true);\n  }, [keepMounted, selected]);\n  return (\n    <BaseTabs.Panel\n      value={value}\n      keepMounted={keepMounted}\n      data-slot=\"tabs-content\"\n      data-flush={flush || undefined}\n      className={cn(\n        'grid overflow-y-auto ring-offset-background',\n        // Flush panels give the row to their content (scroll region, code block) instead of padding it.\n        flush ? 'h-full min-h-0' : 'py-2',\n        focusRing.visible,\n        className,\n      )}\n    >\n      <div data-slot=\"tabs-content-body\" className=\"contents\">\n        {!keepMounted || selected || visited ? children : null}\n      </div>\n    </BaseTabs.Panel>\n  );\n};\n"],"names":["tabs","useContext","TabsContext","useState","useEffect","jsx","BaseTabs","cn","focusRing"],"mappings":";;;;;;;;;AAcO,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAU,KAAA,EAAO,QAAQ,KAAA,EAAO,WAAA,GAAc,KAAA,EAAO,SAAA,EAAU,KAAuB;AACjH,EAAA,MAAMA,MAAA,GAAOC,iBAAWC,mBAAW,CAAA;AACnC,EAAA,MAAM,QAAA,GAAWF,QAAM,KAAA,KAAU,KAAA;AACjC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIG,eAAS,QAAQ,CAAA;AAC/C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAA,IAAe,QAAA,EAAU,UAAA,CAAW,IAAI,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,WAAA,EAAa,QAAQ,CAAC,CAAA;AAC1B,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA,EAAU,cAAA;AAAA,MACV,cAAY,KAAA,IAAS,MAAA;AAAA,MACrB,SAAA,EAAWC,WAAA;AAAA,QACT,6CAAA;AAAA;AAAA,QAEA,QAAQ,gBAAA,GAAmB,MAAA;AAAA,QAC3BC,gCAAA,CAAU,OAAA;AAAA,QACV;AAAA,OACF;AAAA,MAEA,QAAA,kBAAAH,cAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,SAAA,EAAU,UAAA,EAC1C,QAAA,EAAA,CAAC,WAAA,IAAe,QAAA,IAAY,OAAA,GAAU,QAAA,GAAW,IAAA,EACpD;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/{tabs-root-C5ABfm1F.cjs → tabs-root-BiV8irc3.cjs}

@@ -5,9 +5,9 @@ const tabs = require('@base-ui/react/tabs');
 const index = require('./index-C-fBJhpb.cjs');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const dropdownMenu = require('./dropdown-menu-DNRCA4Gj.cjs');
+const dropdownMenu = require('./dropdown-menu-j2y37TL5.cjs');
 const tooltip = require('./tooltip-FvWL16Xn.cjs');
-const tabsTab = require('./tabs-tab-DA466DbX.cjs');
+const tabsTab = require('./tabs-tab-J91Szy3Q.cjs');
 const primitives_transitions = require('./primitives/transitions.cjs.js');
 const utils_cn = require('./cn-DG0X1KEP.cjs');
 
@@ -250,7 +250,7 @@ const TabList = ({ children, className, variant, size = "md", sticky, style }) =
                         dropdownMenu.DropdownMenu.Item,
                         {
                           "data-slot": "tabs-overflow-close",
-                          className: "hover:text-accent2 data-[highlighted]:text-accent2 pointer-events-none z-10 m-1 size-6 self-center justify-self-end p-0 opacity-0",
+                          className: "pointer-events-none z-10 m-1 size-6 self-center justify-self-end p-0 opacity-0 hover:text-accent2 data-[highlighted]:text-accent2",
                           style: { gridArea: `${index + 1} / 1` },
                           onClick: tab.onClose
                         }
@@ -312,4 +312,4 @@ const Tabs = ({
 
 exports.TabList = TabList;
 exports.Tabs = Tabs;
-//# sourceMappingURL=tabs-root-C5ABfm1F.cjs.map
+//# sourceMappingURL=tabs-root-BiV8irc3.cjs.map