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

package/dist/src/hooks/stories/text/use-measured-auto-height.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+declare function MeasuredAutoHeightDemo(): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof MeasuredAutoHeightDemo;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/hooks/stories/text/use-scroll-to-first-highlight.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+declare function ScrollToFirstHighlightDemo(): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof ScrollToFirstHighlightDemo;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/hooks/stories/text/use-text-highlight.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+declare function TextHighlightDemo(): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof TextHighlightDemo;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/lib/keyboard/use-keyboard-scope-depth.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+declare function KeyboardScopeDepthDemo(): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof KeyboardScopeDepthDemo;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/lib/keyboard/use-keyboard-shortcuts-context.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+declare function KeyboardShortcutsContextDemo(): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof KeyboardShortcutsContextDemo;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/lib/keyboard/use-table-keydown.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/style.css

@@ -129,7 +129,6 @@
     --color-red-500: oklch(63.7% .237 25.331);
     --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-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);
@@ -984,10 +983,6 @@
     grid-column-start: 1;
   }
 
-  .col-start-\[action\] {
-    grid-column-start: action;
-  }
-
   .col-start-\[icon\] {
     grid-column-start: icon;
   }
@@ -1632,10 +1627,6 @@
     margin-top: calc(var(--spacing) * -.5);
   }
 
-  .-mt-1 {
-    margin-top: calc(var(--spacing) * -1);
-  }
-
   .-mt-12 {
     margin-top: calc(var(--spacing) * -12);
   }
@@ -2209,10 +2200,6 @@
     height: calc(var(--spacing) * 125);
   }
 
-  .h-128 {
-    height: calc(var(--spacing) * 128);
-  }
-
   .h-136 {
     height: calc(var(--spacing) * 136);
   }
@@ -2521,10 +2508,6 @@
     min-height: calc(var(--spacing) * 60);
   }
 
-  .min-h-64 {
-    min-height: calc(var(--spacing) * 64);
-  }
-
   .min-h-72 {
     min-height: calc(var(--spacing) * 72);
   }
@@ -2817,12 +2800,12 @@
     width: calc(var(--spacing) * 220);
   }
 
-  .w-270 {
-    width: calc(var(--spacing) * 270);
+  .w-240 {
+    width: calc(var(--spacing) * 240);
   }
 
-  .w-\[3px\] {
-    width: 3px;
+  .w-270 {
+    width: calc(var(--spacing) * 270);
   }
 
   .w-\[20rem\] {
@@ -2853,10 +2836,6 @@
     width: 120%;
   }
 
-  .w-\[126px\] {
-    width: 126px;
-  }
-
   .w-\[140px\] {
     width: 140px;
   }
@@ -3589,6 +3568,10 @@
     scroll-margin-top: calc(var(--spacing) * 4);
   }
 
+  .scroll-py-8 {
+    scroll-padding-block: calc(var(--spacing) * 8);
+  }
+
   .list-disc {
     list-style-type: disc;
   }
@@ -3705,18 +3688,14 @@
     grid-template-columns: 200px auto;
   }
 
-  .grid-cols-\[\[title\]_auto_\[meta\]_minmax\(0\,1fr\)_\[action\]_auto_\[end\]\] {
-    grid-template-columns: [title] auto[meta] minmax(0, 1fr)[action] auto[end];
+  .grid-cols-\[\[title\]_auto_\[meta\]_minmax\(0\,1fr\)_\[end\]\] {
+    grid-template-columns: [title] auto[meta] minmax(0, 1fr)[end];
   }
 
   .grid-cols-\[auto_1fr\] {
     grid-template-columns: auto 1fr;
   }
 
-  .grid-cols-\[auto_1fr\]\! {
-    grid-template-columns: auto 1fr !important;
-  }
-
   .grid-cols-\[auto_minmax\(0\,1fr\)\] {
     grid-template-columns: auto minmax(0, 1fr);
   }
@@ -4691,10 +4670,6 @@
     }
   }
 
-  .border-red-900 {
-    border-color: var(--color-red-900);
-  }
-
   .border-transparent {
     border-color: #0000;
   }
@@ -4755,16 +4730,6 @@
     }
   }
 
-  .bg-accent1\/50 {
-    background-color: var(--color-accent1);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-accent1\/50 {
-      background-color: color-mix(in oklab, var(--color-accent1) 50%, transparent);
-    }
-  }
-
   .bg-accent1Dark {
     background-color: var(--color-accent1Dark);
   }
@@ -5085,6 +5050,10 @@
     background-color: var(--destructive);
   }
 
+  .bg-dialog {
+    background-color: var(--dialog);
+  }
+
   .bg-emerald-500\/10 {
     background-color: #00bb7f1a;
   }
@@ -5105,6 +5074,14 @@
     }
   }
 
+  .bg-field {
+    background-color: var(--field);
+  }
+
+  .bg-field-disabled {
+    background-color: var(--field-disabled);
+  }
+
   .bg-fill {
     background-color: var(--fill);
   }
@@ -5425,16 +5402,6 @@
     background-color: var(--color-red-700);
   }
 
-  .bg-red-900\/10 {
-    background-color: #82181a1a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-red-900\/10 {
-      background-color: color-mix(in oklab, var(--color-red-900) 10%, transparent);
-    }
-  }
-
   .bg-scrim, .bg-scrim\/30 {
     background-color: var(--color-scrim);
   }
@@ -5868,6 +5835,10 @@
     padding-block: calc(var(--spacing) * 10);
   }
 
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+
   .py-\[0\.6rem\] {
     padding-block: .6rem;
   }
@@ -6658,10 +6629,6 @@
     color: var(--color-red-700);
   }
 
-  .text-red-900 {
-    color: var(--color-red-900);
-  }
-
   .text-sidebar {
     color: var(--sidebar);
   }
@@ -6846,6 +6813,12 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-input {
+    --surface-tint: transparent;
+    --surface-rim: var(--field-rim);
+    box-shadow: var(--elevation-lip), inset 0 0 0 1px var(--surface-rim), inset 0 0 0 9999px var(--surface-tint), var(--elevation-raised);
+  }
+
   .shadow-overlay {
     --surface-tint: transparent;
     box-shadow: var(--elevation-lip), inset 0 0 0 1px var(--surface-rim), inset 0 0 0 9999px var(--surface-tint), var(--elevation-overlay);
@@ -6856,6 +6829,16 @@
     box-shadow: var(--elevation-lip), inset 0 0 0 1px var(--surface-rim), inset 0 0 0 9999px var(--surface-tint), var(--elevation-raised);
   }
 
+  .shadow-dialog {
+    --tw-shadow-color: var(--dialog);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-dialog {
+      --tw-shadow-color: color-mix(in oklab, var(--dialog) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
   .ring-accent1, .ring-accent1\/70 {
     --tw-ring-color: var(--color-accent1);
   }
@@ -7363,6 +7346,46 @@
     }
   }
 
+  .\[--field-disabled\:var\(--field-on-surface\)\] {
+    --field-disabled: var(--field-on-surface);
+  }
+
+  .\[--field-disabled\:var\(--fill-subtle\)\] {
+    --field-disabled: var(--fill-subtle);
+  }
+
+  .\[--field-rim-focus\:var\(--destructive\)\] {
+    --field-rim-focus: var(--destructive);
+  }
+
+  .\[--field-rim-focus\:var\(--field-rim-focus-on-surface\)\] {
+    --field-rim-focus: var(--field-rim-focus-on-surface);
+  }
+
+  .\[--field-rim-focus\:var\(--surface-rim-focus\)\] {
+    --field-rim-focus: var(--surface-rim-focus);
+  }
+
+  .\[--field-rim\:var\(--destructive\)\] {
+    --field-rim: var(--destructive);
+  }
+
+  .\[--field-rim\:var\(--field-rim-on-surface\)\] {
+    --field-rim: var(--field-rim-on-surface);
+  }
+
+  .\[--field-rim\:var\(--surface-rim\)\] {
+    --field-rim: var(--surface-rim);
+  }
+
+  .\[--field\:var\(--card\)\] {
+    --field: var(--card);
+  }
+
+  .\[--field\:var\(--field-on-surface\)\] {
+    --field: var(--field-on-surface);
+  }
+
   .\[--filter-bar-segment-padding\:0\.5rem_0\] {
     --filter-bar-segment-padding: .5rem 0;
   }
@@ -8478,8 +8501,8 @@
     }
   }
 
-  .focus-within\:\[--surface-rim\:var\(--surface-rim-focus\)\]:focus-within {
-    --surface-rim: var(--surface-rim-focus);
+  .focus-within\:\[--surface-rim\:var\(--field-rim-focus\)\]:focus-within {
+    --surface-rim: var(--field-rim-focus);
   }
 
   @media (hover: hover) {
@@ -8684,10 +8707,6 @@
       --surface-tint: var(--fill-subtle);
     }
 
-    .not-disabled\:hover\:border-border-hover:not(:disabled):hover {
-      border-color: var(--border-hover);
-    }
-
     .not-disabled\:hover\:bg-destructive\/20:not(:disabled):hover {
       background-color: var(--destructive);
     }
@@ -8947,6 +8966,10 @@
     outline-style: solid;
   }
 
+  .focus-visible\:\[--surface-rim\:var\(--field-rim-focus\)\]:focus-visible {
+    --surface-rim: var(--field-rim-focus);
+  }
+
   .focus-visible\:\[--surface-rim\:var\(--surface-rim-focus\)\]:focus-visible {
     --surface-rim: var(--surface-rim-focus);
   }
@@ -9050,16 +9073,12 @@
     background-color: #0000;
   }
 
-  .disabled\:pointer-events-none:disabled {
-    pointer-events: none;
-  }
-
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
 
-  .disabled\:border-border:disabled {
-    border-color: var(--border);
+  .disabled\:bg-field-disabled:disabled {
+    background-color: var(--field-disabled);
   }
 
   .disabled\:bg-fill-destructive-disabled:disabled {
@@ -9181,8 +9200,8 @@
     cursor: not-allowed;
   }
 
-  .has-\[\:disabled\]\:bg-fill-subtle:has(:disabled) {
-    background-color: var(--fill-subtle);
+  .has-\[\:disabled\]\:bg-field-disabled:has(:disabled) {
+    background-color: var(--field-disabled);
   }
 
   .has-\[\:disabled\]\:text-muted-foreground:has(:disabled) {
@@ -9198,8 +9217,12 @@
     --tw-ring-color: var(--border-focus);
   }
 
-  .has-\[\[aria-invalid\=true\]\]\:\[--surface-rim\:var\(--destructive\)\]:has([aria-invalid="true"]) {
-    --surface-rim: var(--destructive);
+  .has-\[\[aria-invalid\=true\]\]\:\[--field-rim-focus\:var\(--destructive\)\]:has([aria-invalid="true"]) {
+    --field-rim-focus: var(--destructive);
+  }
+
+  .has-\[\[aria-invalid\=true\]\]\:\[--field-rim\:var\(--destructive\)\]:has([aria-invalid="true"]) {
+    --field-rim: var(--destructive);
   }
 
   .has-\[textarea\]\:h-auto:has(:is(textarea)) {
@@ -9234,8 +9257,8 @@
     border-radius: var(--radius-xl);
   }
 
-  .has-\[\>\[data-slot\=page-header-icon\]\]\:grid-cols-\[\[icon\]_auto_\[title\]_auto_\[meta\]_minmax\(0\,1fr\)_\[action\]_auto_\[end\]\]:has( > [data-slot="page-header-icon"]) {
-    grid-template-columns: [icon] auto[title] auto[meta] minmax(0, 1fr)[action] auto[end];
+  .has-\[\>\[data-slot\=page-header-icon\]\]\:grid-cols-\[\[icon\]_auto_\[title\]_auto_\[meta\]_minmax\(0\,1fr\)_\[end\]\]:has( > [data-slot="page-header-icon"]) {
+    grid-template-columns: [icon] auto[title] auto[meta] minmax(0, 1fr)[end];
   }
 
   .has-\[\>button\]\:pr-1:has( > button) {
@@ -9258,8 +9281,8 @@
     cursor: wait;
   }
 
-  .aria-disabled\:border-border[aria-disabled="true"] {
-    border-color: var(--border);
+  .aria-disabled\:bg-field-disabled[aria-disabled="true"] {
+    background-color: var(--field-disabled);
   }
 
   .aria-disabled\:bg-fill-destructive-disabled[aria-disabled="true"] {
@@ -9322,7 +9345,19 @@
     }
   }
 
-  .aria-invalid\:border-destructive[aria-invalid="true"], .aria-invalid\:focus-visible\:border-destructive[aria-invalid="true"]:focus-visible {
+  .aria-invalid\:border-destructive[aria-invalid="true"] {
+    border-color: var(--destructive);
+  }
+
+  .aria-invalid\:\[--field-rim-focus\:var\(--destructive\)\][aria-invalid="true"] {
+    --field-rim-focus: var(--destructive);
+  }
+
+  .aria-invalid\:\[--field-rim\:var\(--destructive\)\][aria-invalid="true"] {
+    --field-rim: var(--destructive);
+  }
+
+  .aria-invalid\:focus-visible\:border-destructive[aria-invalid="true"]:focus-visible {
     border-color: var(--destructive);
   }
 
@@ -9583,6 +9618,10 @@
     border-color: var(--border);
   }
 
+  .data-\[disabled\]\:bg-field-disabled[data-disabled] {
+    background-color: var(--field-disabled);
+  }
+
   .data-\[disabled\]\:bg-fill-hover[data-disabled] {
     background-color: var(--fill-hover);
   }
@@ -9909,10 +9948,6 @@
     color: var(--muted-foreground);
   }
 
-  .data-\[popup-open\]\:border-border-hover[data-popup-open] {
-    border-color: var(--border-hover);
-  }
-
   .data-\[popup-open\]\:bg-fill-hover[data-popup-open] {
     background-color: var(--fill-hover);
   }
@@ -10078,6 +10113,12 @@
       transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
 
+    .motion-safe\:transition-\[height\] {
+      transition-property: height;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
     .motion-safe\:transition-colors {
       transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -10095,6 +10136,11 @@
       transition-duration: .15s;
     }
 
+    .motion-safe\:duration-200 {
+      --tw-duration: .2s;
+      transition-duration: .2s;
+    }
+
     .motion-safe\:before\:animate-spin:before {
       content: var(--tw-content);
       animation: var(--animate-spin);
@@ -10415,10 +10461,6 @@
       padding-inline: calc(var(--spacing) * 4);
     }
 
-    .sm\:px-6 {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-
     .sm\:px-8 {
       padding-inline: calc(var(--spacing) * 8);
     }
@@ -10737,10 +10779,6 @@
       height: calc(var(--spacing) * 16);
     }
 
-    .\@md\:grid-cols-\[auto_auto_auto_1fr\]\! {
-      grid-template-columns: auto auto auto 1fr !important;
-    }
-
     .\@md\:flex-row {
       flex-direction: row;
     }
@@ -10781,12 +10819,6 @@
     }
   }
 
-  @container (min-width: 36rem) {
-    .\@xl\:grid-cols-\[auto_auto_auto_auto_auto_1fr\]\! {
-      grid-template-columns: auto auto auto auto auto 1fr !important;
-    }
-  }
-
   .rtl\:translate-x-0:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
     --tw-translate-x: 0px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -11229,6 +11261,11 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .\[\&_svg\]\:size-8 svg {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+
   .\[\&_svg\]\:size-\[1\.1em\] svg {
     width: 1.1em;
     height: 1.1em;
@@ -11840,15 +11877,6 @@
     color: var(--foreground);
   }
 
-  .\[\&\>img\]\:size-full > img {
-    width: 100%;
-    height: 100%;
-  }
-
-  .\[\&\>img\]\:object-contain > img {
-    object-fit: contain;
-  }
-
   .\[\&\>label\]\:absolute > label {
     position: absolute;
   }
@@ -12525,6 +12553,10 @@ html.light {
   --surface-rim: oklch(100% 0 0 / .05);
   --surface-rim-focus: oklch(100% 0 0 / .14);
   --elevation-raised: 0 1px 2px -1px oklch(0% 0 0 / .22), 0 2px 3px -2px oklch(0% 0 0 / .14);
+  --dialog: var(--card);
+  --field-on-surface: var(--gray-1);
+  --field-rim-on-surface: oklch(100% 0 0 / .05);
+  --field-rim-focus-on-surface: oklch(100% 0 0 / .14);
   --elevation-overlay: 0 2px 2px oklch(0% 0 0 / .1), 0 4px 4px oklch(0% 0 0 / .1), 0 8px 8px oklch(0% 0 0 / .1);
 }
 
@@ -12537,6 +12569,10 @@ html.light {
   --surface-rim: oklch(0% 0 0 / .08);
   --surface-rim-focus: oklch(0% 0 0 / .18);
   --elevation-raised: 0 1px 2px -1px oklch(0% 0 0 / .05), 0 1px 3px -2px oklch(0% 0 0 / .04);
+  --dialog: var(--background);
+  --field-on-surface: var(--background-3);
+  --field-rim-on-surface: oklch(0% 0 0 / .14);
+  --field-rim-focus-on-surface: oklch(0% 0 0 / .32);
   --elevation-overlay: 0 2px 4px -1px oklch(0% 0 0 / .08), 0 4px 8px -2px oklch(0% 0 0 / .06), 0 8px 16px -4px oklch(0% 0 0 / .06);
 }
 
@@ -12561,6 +12597,10 @@ html.light {
   --sidebar: var(--background-1);
   --card: var(--background-3);
   --popover: var(--background-3);
+  --field: var(--card);
+  --field-disabled: var(--fill-subtle);
+  --field-rim: var(--surface-rim);
+  --field-rim-focus: var(--surface-rim-focus);
   --muted: var(--gray-1);
   --foreground: var(--gray-10);
   --muted-foreground: var(--gray-8);

package/dist/{tabs-content-DMrffE9p.js → tabs-content-7ODUUdQ0.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-u6LS5twu.js';
+import { a as TabsContext } from './tabs-tab-DluwCnDF.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-DMrffE9p.js.map
+//# sourceMappingURL=tabs-content-7ODUUdQ0.js.map

package/dist/{tabs-content-DMrffE9p.js.map → tabs-content-7ODUUdQ0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tabs-content-DMrffE9p.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-7ODUUdQ0.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-CuUlcS67.cjs → tabs-content-DlCJoQUW.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-ClmulJmM.cjs');
+const tabsTab = require('./tabs-tab-DFmRMdi3.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-CuUlcS67.cjs.map
+//# sourceMappingURL=tabs-content-DlCJoQUW.cjs.map