@mastra/playground-ui 33.0.0-alpha.3 → 33.0.0

package/dist/switch-DJRX_Onf.cjs

@@ -0,0 +1,124 @@
+'use strict';
+
+require('./switch.css');const jsxRuntime = require('react/jsx-runtime');
+const _switch = require('@base-ui/react/switch');
+const React = require('react');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Switch = React__namespace.forwardRef(
+  ({ className, asChild, children, icon, checkedIcon, uncheckedIcon, ...props }, ref) => {
+    const shouldRenderStateIcons = checkedIcon !== void 0 || uncheckedIcon !== void 0;
+    const shouldRenderIcon = icon !== void 0 || shouldRenderStateIcons;
+    const singleIcon = shouldRenderStateIcons ? void 0 : icon;
+    const onIcon = checkedIcon ?? icon;
+    const offIcon = uncheckedIcon ?? icon;
+    const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : { render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }), nativeButton: true };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      _switch.Switch.Root,
+      {
+        ref,
+        "data-slot": "switch",
+        className: utils.cn(
+          "peer group/switch inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-0 bg-neutral6/[0.14] p-0.5 outline-hidden",
+          "transition-colors duration-normal ease-out-custom motion-reduce:transition-none",
+          "hover:bg-neutral6/[0.18]",
+          "active:bg-neutral6/[0.22]",
+          "focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
+          "data-[checked]:bg-neutral6/[0.92]",
+          "data-[checked]:hover:bg-neutral6",
+          "data-[checked]:active:bg-neutral5",
+          "data-[disabled]:cursor-not-allowed data-[disabled]:bg-neutral6/[0.16] data-[disabled]:hover:bg-neutral6/[0.16]",
+          "data-[disabled]:data-[checked]:bg-neutral6/[0.3] data-[disabled]:data-[checked]:hover:bg-neutral6/[0.3]",
+          className
+        ),
+        ...renderProps,
+        ...props,
+        children: [
+          asChild ? void 0 : children,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            _switch.Switch.Thumb,
+            {
+              "data-slot": "switch-thumb",
+              className: utils.cn(
+                "switch-thumb-motion pointer-events-none relative block h-4 w-5 rounded-full bg-neutral6",
+                "transition-[background-color,translate,width,transform] duration-normal ease-out-custom motion-reduce:transition-none",
+                "group-active/switch:w-6 group-data-[disabled]/switch:w-5",
+                "data-[checked]:translate-x-3 data-[checked]:bg-surface1 data-[unchecked]:translate-x-0",
+                "group-active/switch:data-[checked]:translate-x-2",
+                "data-[disabled]:data-[unchecked]:bg-neutral6/[0.42] data-[disabled]:data-[checked]:bg-surface1/80"
+              ),
+              children: shouldRenderIcon ? /* @__PURE__ */ jsxRuntime.jsx(SwitchThumbIcon, { checkedIcon: onIcon, icon: singleIcon, uncheckedIcon: offIcon }) : null
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+function SwitchThumbIcon({
+  checkedIcon,
+  icon,
+  uncheckedIcon
+}) {
+  const iconClassName = utils.cn(
+    "absolute inset-0 flex items-center justify-center text-surface1",
+    "transition-[color,opacity] duration-normal ease-out-custom motion-reduce:transition-none",
+    "[&_svg]:size-2.5 [&_svg]:stroke-[2.5]"
+  );
+  if (icon !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-slot": "switch-thumb-icon",
+        className: utils.cn(iconClassName, "group-data-[checked]/switch:text-neutral6"),
+        children: icon
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    uncheckedIcon !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-slot": "switch-thumb-icon",
+        "data-switch-icon": "unchecked",
+        className: utils.cn(iconClassName, "opacity-100 group-data-[checked]/switch:opacity-0"),
+        children: uncheckedIcon
+      }
+    ) : null,
+    checkedIcon !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-slot": "switch-thumb-icon",
+        "data-switch-icon": "checked",
+        className: utils.cn(iconClassName, "text-neutral6 opacity-0 group-data-[checked]/switch:opacity-100"),
+        children: checkedIcon
+      }
+    ) : null
+  ] });
+}
+
+exports.Switch = Switch;
+//# sourceMappingURL=switch-DJRX_Onf.cjs.map

package/dist/switch-DJRX_Onf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-DJRX_Onf.cjs","sources":["../src/ds/components/Switch/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport './switch.css';\n\ntype SwitchProps = Omit<SwitchPrimitive.Root.Props, 'className'> & {\n  className?: string;\n  asChild?: boolean;\n  icon?: React.ReactNode;\n  checkedIcon?: React.ReactNode;\n  uncheckedIcon?: React.ReactNode;\n};\n\nconst Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ className, asChild, children, icon, checkedIcon, uncheckedIcon, ...props }, ref) => {\n    const shouldRenderStateIcons = checkedIcon !== undefined || uncheckedIcon !== undefined;\n    const shouldRenderIcon = icon !== undefined || shouldRenderStateIcons;\n\n    const singleIcon = shouldRenderStateIcons ? undefined : icon;\n    const onIcon = checkedIcon ?? icon;\n    const offIcon = uncheckedIcon ?? icon;\n\n    // Base UI's Switch.Root defaults to a `<span>` and forwards `id` to its\n    // hidden checkbox input. Render a native `<button>` (with `nativeButton`) so\n    // the consumer's `id` — and the click target — lands on the visible control,\n    // matching the previous Radix behavior.\n    const renderProps =\n      asChild && React.isValidElement(children)\n        ? { render: children as React.ReactElement }\n        : { render: <button type=\"button\" />, nativeButton: true };\n\n    return (\n      <SwitchPrimitive.Root\n        ref={ref}\n        data-slot=\"switch\"\n        className={cn(\n          'peer group/switch inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-0 bg-neutral6/[0.14] p-0.5 outline-hidden',\n          'transition-colors duration-normal ease-out-custom motion-reduce:transition-none',\n          'hover:bg-neutral6/[0.18]',\n          'active:bg-neutral6/[0.22]',\n          'focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55',\n          'data-[checked]:bg-neutral6/[0.92]',\n          'data-[checked]:hover:bg-neutral6',\n          'data-[checked]:active:bg-neutral5',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:bg-neutral6/[0.16] data-[disabled]:hover:bg-neutral6/[0.16]',\n          'data-[disabled]:data-[checked]:bg-neutral6/[0.3] data-[disabled]:data-[checked]:hover:bg-neutral6/[0.3]',\n          className,\n        )}\n        {...renderProps}\n        {...props}\n      >\n        {asChild ? undefined : children}\n        <SwitchPrimitive.Thumb\n          data-slot=\"switch-thumb\"\n          className={cn(\n            'switch-thumb-motion pointer-events-none relative block h-4 w-5 rounded-full bg-neutral6',\n            'transition-[background-color,translate,width,transform] duration-normal ease-out-custom motion-reduce:transition-none',\n            'group-active/switch:w-6 group-data-[disabled]/switch:w-5',\n            'data-[checked]:translate-x-3 data-[checked]:bg-surface1 data-[unchecked]:translate-x-0',\n            'group-active/switch:data-[checked]:translate-x-2',\n            'data-[disabled]:data-[unchecked]:bg-neutral6/[0.42] data-[disabled]:data-[checked]:bg-surface1/80',\n          )}\n        >\n          {shouldRenderIcon ? <SwitchThumbIcon checkedIcon={onIcon} icon={singleIcon} uncheckedIcon={offIcon} /> : null}\n        </SwitchPrimitive.Thumb>\n      </SwitchPrimitive.Root>\n    );\n  },\n);\nSwitch.displayName = 'Switch';\n\nfunction SwitchThumbIcon({\n  checkedIcon,\n  icon,\n  uncheckedIcon,\n}: {\n  checkedIcon?: React.ReactNode;\n  icon?: React.ReactNode;\n  uncheckedIcon?: React.ReactNode;\n}) {\n  const iconClassName = cn(\n    'absolute inset-0 flex items-center justify-center text-surface1',\n    'transition-[color,opacity] duration-normal ease-out-custom motion-reduce:transition-none',\n    '[&_svg]:size-2.5 [&_svg]:stroke-[2.5]',\n  );\n\n  if (icon !== undefined) {\n    return (\n      <span\n        aria-hidden\n        data-slot=\"switch-thumb-icon\"\n        className={cn(iconClassName, 'group-data-[checked]/switch:text-neutral6')}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      {uncheckedIcon !== undefined ? (\n        <span\n          aria-hidden\n          data-slot=\"switch-thumb-icon\"\n          data-switch-icon=\"unchecked\"\n          className={cn(iconClassName, 'opacity-100 group-data-[checked]/switch:opacity-0')}\n        >\n          {uncheckedIcon}\n        </span>\n      ) : null}\n      {checkedIcon !== undefined ? (\n        <span\n          aria-hidden\n          data-slot=\"switch-thumb-icon\"\n          data-switch-icon=\"checked\"\n          className={cn(iconClassName, 'text-neutral6 opacity-0 group-data-[checked]/switch:opacity-100')}\n        >\n          {checkedIcon}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { Switch };\nexport type { SwitchProps };\n"],"names":["React","jsx","jsxs","SwitchPrimitive","cn","Fragment"],"mappings":"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"}

package/dist/switch-VX4iYp3j.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+import * as React from 'react';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+import './switch.css';const Switch = React.forwardRef(
+  ({ className, asChild, children, icon, checkedIcon, uncheckedIcon, ...props }, ref) => {
+    const shouldRenderStateIcons = checkedIcon !== void 0 || uncheckedIcon !== void 0;
+    const shouldRenderIcon = icon !== void 0 || shouldRenderStateIcons;
+    const singleIcon = shouldRenderStateIcons ? void 0 : icon;
+    const onIcon = checkedIcon ?? icon;
+    const offIcon = uncheckedIcon ?? icon;
+    const renderProps = asChild && React.isValidElement(children) ? { render: children } : { render: /* @__PURE__ */ jsx("button", { type: "button" }), nativeButton: true };
+    return /* @__PURE__ */ jsxs(
+      Switch$1.Root,
+      {
+        ref,
+        "data-slot": "switch",
+        className: cn(
+          "peer group/switch inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-0 bg-neutral6/[0.14] p-0.5 outline-hidden",
+          "transition-colors duration-normal ease-out-custom motion-reduce:transition-none",
+          "hover:bg-neutral6/[0.18]",
+          "active:bg-neutral6/[0.22]",
+          "focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
+          "data-[checked]:bg-neutral6/[0.92]",
+          "data-[checked]:hover:bg-neutral6",
+          "data-[checked]:active:bg-neutral5",
+          "data-[disabled]:cursor-not-allowed data-[disabled]:bg-neutral6/[0.16] data-[disabled]:hover:bg-neutral6/[0.16]",
+          "data-[disabled]:data-[checked]:bg-neutral6/[0.3] data-[disabled]:data-[checked]:hover:bg-neutral6/[0.3]",
+          className
+        ),
+        ...renderProps,
+        ...props,
+        children: [
+          asChild ? void 0 : children,
+          /* @__PURE__ */ jsx(
+            Switch$1.Thumb,
+            {
+              "data-slot": "switch-thumb",
+              className: cn(
+                "switch-thumb-motion pointer-events-none relative block h-4 w-5 rounded-full bg-neutral6",
+                "transition-[background-color,translate,width,transform] duration-normal ease-out-custom motion-reduce:transition-none",
+                "group-active/switch:w-6 group-data-[disabled]/switch:w-5",
+                "data-[checked]:translate-x-3 data-[checked]:bg-surface1 data-[unchecked]:translate-x-0",
+                "group-active/switch:data-[checked]:translate-x-2",
+                "data-[disabled]:data-[unchecked]:bg-neutral6/[0.42] data-[disabled]:data-[checked]:bg-surface1/80"
+              ),
+              children: shouldRenderIcon ? /* @__PURE__ */ jsx(SwitchThumbIcon, { checkedIcon: onIcon, icon: singleIcon, uncheckedIcon: offIcon }) : null
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+function SwitchThumbIcon({
+  checkedIcon,
+  icon,
+  uncheckedIcon
+}) {
+  const iconClassName = cn(
+    "absolute inset-0 flex items-center justify-center text-surface1",
+    "transition-[color,opacity] duration-normal ease-out-custom motion-reduce:transition-none",
+    "[&_svg]:size-2.5 [&_svg]:stroke-[2.5]"
+  );
+  if (icon !== void 0) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-slot": "switch-thumb-icon",
+        className: cn(iconClassName, "group-data-[checked]/switch:text-neutral6"),
+        children: icon
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    uncheckedIcon !== void 0 ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-slot": "switch-thumb-icon",
+        "data-switch-icon": "unchecked",
+        className: cn(iconClassName, "opacity-100 group-data-[checked]/switch:opacity-0"),
+        children: uncheckedIcon
+      }
+    ) : null,
+    checkedIcon !== void 0 ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-slot": "switch-thumb-icon",
+        "data-switch-icon": "checked",
+        className: cn(iconClassName, "text-neutral6 opacity-0 group-data-[checked]/switch:opacity-100"),
+        children: checkedIcon
+      }
+    ) : null
+  ] });
+}
+
+export { Switch as S };
+//# sourceMappingURL=switch-VX4iYp3j.js.map

package/dist/switch-VX4iYp3j.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-VX4iYp3j.js","sources":["../src/ds/components/Switch/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport './switch.css';\n\ntype SwitchProps = Omit<SwitchPrimitive.Root.Props, 'className'> & {\n  className?: string;\n  asChild?: boolean;\n  icon?: React.ReactNode;\n  checkedIcon?: React.ReactNode;\n  uncheckedIcon?: React.ReactNode;\n};\n\nconst Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ className, asChild, children, icon, checkedIcon, uncheckedIcon, ...props }, ref) => {\n    const shouldRenderStateIcons = checkedIcon !== undefined || uncheckedIcon !== undefined;\n    const shouldRenderIcon = icon !== undefined || shouldRenderStateIcons;\n\n    const singleIcon = shouldRenderStateIcons ? undefined : icon;\n    const onIcon = checkedIcon ?? icon;\n    const offIcon = uncheckedIcon ?? icon;\n\n    // Base UI's Switch.Root defaults to a `<span>` and forwards `id` to its\n    // hidden checkbox input. Render a native `<button>` (with `nativeButton`) so\n    // the consumer's `id` — and the click target — lands on the visible control,\n    // matching the previous Radix behavior.\n    const renderProps =\n      asChild && React.isValidElement(children)\n        ? { render: children as React.ReactElement }\n        : { render: <button type=\"button\" />, nativeButton: true };\n\n    return (\n      <SwitchPrimitive.Root\n        ref={ref}\n        data-slot=\"switch\"\n        className={cn(\n          'peer group/switch inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-0 bg-neutral6/[0.14] p-0.5 outline-hidden',\n          'transition-colors duration-normal ease-out-custom motion-reduce:transition-none',\n          'hover:bg-neutral6/[0.18]',\n          'active:bg-neutral6/[0.22]',\n          'focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55',\n          'data-[checked]:bg-neutral6/[0.92]',\n          'data-[checked]:hover:bg-neutral6',\n          'data-[checked]:active:bg-neutral5',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:bg-neutral6/[0.16] data-[disabled]:hover:bg-neutral6/[0.16]',\n          'data-[disabled]:data-[checked]:bg-neutral6/[0.3] data-[disabled]:data-[checked]:hover:bg-neutral6/[0.3]',\n          className,\n        )}\n        {...renderProps}\n        {...props}\n      >\n        {asChild ? undefined : children}\n        <SwitchPrimitive.Thumb\n          data-slot=\"switch-thumb\"\n          className={cn(\n            'switch-thumb-motion pointer-events-none relative block h-4 w-5 rounded-full bg-neutral6',\n            'transition-[background-color,translate,width,transform] duration-normal ease-out-custom motion-reduce:transition-none',\n            'group-active/switch:w-6 group-data-[disabled]/switch:w-5',\n            'data-[checked]:translate-x-3 data-[checked]:bg-surface1 data-[unchecked]:translate-x-0',\n            'group-active/switch:data-[checked]:translate-x-2',\n            'data-[disabled]:data-[unchecked]:bg-neutral6/[0.42] data-[disabled]:data-[checked]:bg-surface1/80',\n          )}\n        >\n          {shouldRenderIcon ? <SwitchThumbIcon checkedIcon={onIcon} icon={singleIcon} uncheckedIcon={offIcon} /> : null}\n        </SwitchPrimitive.Thumb>\n      </SwitchPrimitive.Root>\n    );\n  },\n);\nSwitch.displayName = 'Switch';\n\nfunction SwitchThumbIcon({\n  checkedIcon,\n  icon,\n  uncheckedIcon,\n}: {\n  checkedIcon?: React.ReactNode;\n  icon?: React.ReactNode;\n  uncheckedIcon?: React.ReactNode;\n}) {\n  const iconClassName = cn(\n    'absolute inset-0 flex items-center justify-center text-surface1',\n    'transition-[color,opacity] duration-normal ease-out-custom motion-reduce:transition-none',\n    '[&_svg]:size-2.5 [&_svg]:stroke-[2.5]',\n  );\n\n  if (icon !== undefined) {\n    return (\n      <span\n        aria-hidden\n        data-slot=\"switch-thumb-icon\"\n        className={cn(iconClassName, 'group-data-[checked]/switch:text-neutral6')}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      {uncheckedIcon !== undefined ? (\n        <span\n          aria-hidden\n          data-slot=\"switch-thumb-icon\"\n          data-switch-icon=\"unchecked\"\n          className={cn(iconClassName, 'opacity-100 group-data-[checked]/switch:opacity-0')}\n        >\n          {uncheckedIcon}\n        </span>\n      ) : null}\n      {checkedIcon !== undefined ? (\n        <span\n          aria-hidden\n          data-slot=\"switch-thumb-icon\"\n          data-switch-icon=\"checked\"\n          className={cn(iconClassName, 'text-neutral6 opacity-0 group-data-[checked]/switch:opacity-100')}\n        >\n          {checkedIcon}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { Switch };\nexport type { SwitchProps };\n"],"names":["SwitchPrimitive"],"mappings":"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"}

package/dist/switch.css

@@ -0,0 +1,51 @@
+/* State-change motion lives in CSS so the switch does not need React state just
+ * to time a visual-only settling effect. Base UI swaps `data-checked` and
+ * `data-unchecked`; distinct animation names make each direction restart. */
+
+@keyframes switch-thumb-settle-on {
+  0% {
+    transform: scaleY(1);
+  }
+
+  48% {
+    transform: scaleY(0.8);
+  }
+
+  100% {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes switch-thumb-settle-off {
+  0% {
+    transform: scaleY(1);
+  }
+
+  48% {
+    transform: scaleY(0.8);
+  }
+
+  100% {
+    transform: scaleY(1);
+  }
+}
+
+.switch-thumb-motion {
+  transform: scaleY(1);
+  transform-origin: center;
+}
+
+.switch-thumb-motion[data-checked] {
+  animation: switch-thumb-settle-on 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.switch-thumb-motion[data-unchecked] {
+  animation: switch-thumb-settle-off 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .switch-thumb-motion[data-checked],
+  .switch-thumb-motion[data-unchecked] {
+    animation: none;
+  }
+}

package/dist/tabs-content-D-fKCtLW.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { Tabs } from '@base-ui/react/tabs';
+import { f as focusRing } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const TabContent = ({ children, value, className }) => {
+  return /* @__PURE__ */ jsx(
+    Tabs.Panel,
+    {
+      value,
+      className: cn("grid py-3 overflow-y-auto ring-offset-background", focusRing.visible, className),
+      children
+    }
+  );
+};
+
+export { TabContent as T };
+//# sourceMappingURL=tabs-content-D-fKCtLW.js.map

package/dist/tabs-content-D-fKCtLW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-content-D-fKCtLW.js","sources":["../src/ds/components/Tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type TabContentProps = {\n  children: React.ReactNode;\n  value: string;\n  className?: string;\n};\n\nexport const TabContent = ({ children, value, className }: TabContentProps) => {\n  return (\n    <BaseTabs.Panel\n      value={value}\n      className={cn('grid py-3 overflow-y-auto ring-offset-background', focusRing.visible, className)}\n    >\n      {children}\n    </BaseTabs.Panel>\n  );\n};\n"],"names":["BaseTabs"],"mappings":";;;;;AAUO,MAAM,aAAa,CAAC,EAAE,QAAA,EAAU,KAAA,EAAO,WAAU,KAAuB;AAC7E,EAAA,uBACE,GAAA;AAAA,IAACA,IAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACC,KAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,kDAAA,EAAoD,SAAA,CAAU,SAAS,SAAS,CAAA;AAAA,MAE7F;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/tabs-content-m86TGI_b.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const tabs = require('@base-ui/react/tabs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const TabContent = ({ children, value, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.Panel,
+    {
+      value,
+      className: utils.cn("grid py-3 overflow-y-auto ring-offset-background", transitions.focusRing.visible, className),
+      children
+    }
+  );
+};
+
+exports.TabContent = TabContent;
+//# sourceMappingURL=tabs-content-m86TGI_b.cjs.map

package/dist/tabs-content-m86TGI_b.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-content-m86TGI_b.cjs","sources":["../src/ds/components/Tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type TabContentProps = {\n  children: React.ReactNode;\n  value: string;\n  className?: string;\n};\n\nexport const TabContent = ({ children, value, className }: TabContentProps) => {\n  return (\n    <BaseTabs.Panel\n      value={value}\n      className={cn('grid py-3 overflow-y-auto ring-offset-background', focusRing.visible, className)}\n    >\n      {children}\n    </BaseTabs.Panel>\n  );\n};\n"],"names":["jsx","BaseTabs","cn","focusRing"],"mappings":";;;;;;;AAUO,MAAM,aAAa,CAAC,EAAE,QAAA,EAAU,KAAA,EAAO,WAAU,KAAuB;AAC7E,EAAA,uBACEA,cAAA;AAAA,IAACC,SAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACC,KAAA;AAAA,MACA,SAAA,EAAWC,QAAA,CAAG,kDAAA,EAAoDC,qBAAA,CAAU,SAAS,SAAS,CAAA;AAAA,MAE7F;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/tabs-tab-Cjv_3xGC.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { c as cn } from './utils-CzYGxqbG.js';
+import { c as cva } from './index-CsyK0ihk.js';
+import { X } from 'lucide-react';
+import { t as transitions, f as focusRing } from './transitions-tFfqxz40.js';
+
+const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      defaultValue: defaultTab,
+      value,
+      onValueChange: onValueChange ? (next) => onValueChange(next) : void 0,
+      className: cn("overflow-y-auto", className),
+      children
+    }
+  );
+};
+
+const tabListVariants = cva("flex items-center relative text-ui-lg", {
+  variants: {
+    variant: {
+      line: "w-max min-w-full border-b border-border1",
+      pill: "w-fit gap-1 rounded-full bg-surface2 p-1",
+      "pill-ghost": "w-fit gap-1 rounded-full p-1"
+    }
+  },
+  defaultVariants: {
+    variant: "line"
+  }
+});
+const TabList = ({ children, className, variant, sticky, style }) => {
+  const resolvedVariant = variant ?? "line";
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", sticky && "sticky top-0 z-10 bg-surface2"), children: /* @__PURE__ */ jsxs(
+    Tabs$1.List,
+    {
+      "data-variant": resolvedVariant,
+      className: cn("group/tabs-list", tabListVariants({ variant: resolvedVariant }), className),
+      style,
+      children: [
+        children,
+        resolvedVariant === "line" && /* @__PURE__ */ jsx(
+          Tabs$1.Indicator,
+          {
+            className: cn(
+              "absolute bottom-0 left-0 bg-[var(--tab-indicator-color,var(--neutral3))]",
+              "w-[var(--active-tab-width)] h-0.5",
+              "transition-all duration-200 ease-in-out"
+            ),
+            style: { transform: "translateX(var(--active-tab-left))" }
+          }
+        ),
+        (resolvedVariant === "pill" || resolvedVariant === "pill-ghost") && /* @__PURE__ */ jsx(
+          Tabs$1.Indicator,
+          {
+            className: cn(
+              "absolute top-1/2 left-0 z-0 rounded-full bg-[var(--tab-indicator-color,var(--surface4))]",
+              "w-[var(--active-tab-width)] h-[calc(100%-0.5rem)]",
+              "transition-all duration-200 ease-in-out"
+            ),
+            style: { transform: "translateY(-50%) translateX(var(--active-tab-left))" }
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+const Tab = ({ children, value, onClick, onClose, disabled, className }) => {
+  return /* @__PURE__ */ jsxs(
+    Tabs$1.Tab,
+    {
+      value,
+      disabled,
+      className: cn(
+        "text-ui-md font-normal text-neutral3",
+        "whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none cursor-pointer",
+        transitions.colors,
+        focusRing.visible,
+        "hover:text-neutral4",
+        "data-[active]:text-neutral5",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:text-neutral3",
+        // Line variant (default) — active state drawn by <Tabs.Indicator> in TabList
+        "group-data-[variant=line]/tabs-list:py-2 group-data-[variant=line]/tabs-list:px-5",
+        "group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent",
+        // Pill variant
+        "group-data-[variant=pill]/tabs-list:relative group-data-[variant=pill]/tabs-list:z-10",
+        "group-data-[variant=pill]/tabs-list:py-1 group-data-[variant=pill]/tabs-list:px-3",
+        "group-data-[variant=pill]/tabs-list:rounded-full",
+        // Pill-ghost variant (pill without list background)
+        "group-data-[variant=pill-ghost]/tabs-list:relative group-data-[variant=pill-ghost]/tabs-list:z-10",
+        "group-data-[variant=pill-ghost]/tabs-list:py-1 group-data-[variant=pill-ghost]/tabs-list:px-3",
+        "group-data-[variant=pill-ghost]/tabs-list:rounded-full",
+        className
+      ),
+      onClick,
+      children: [
+        children,
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose();
+            },
+            className: cn("p-0.5 hover:bg-surface4 rounded", transitions.colors, "hover:text-neutral5"),
+            "aria-label": "Close tab",
+            children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Tab as T, TabList as a, Tabs as b };
+//# sourceMappingURL=tabs-tab-Cjv_3xGC.js.map

package/dist/tabs-tab-Cjv_3xGC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab-Cjv_3xGC.js","sources":["../src/ds/components/Tabs/tabs-root.tsx","../src/ds/components/Tabs/tabs-list.tsx","../src/ds/components/Tabs/tabs-tab.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { cn } from '@/lib/utils';\n\nexport type TabsRootProps<T extends string> = {\n  children: React.ReactNode;\n  defaultTab: T;\n  value?: T;\n  onValueChange?: (value: T) => void;\n  className?: string;\n};\n\nexport const Tabs = <T extends string>({ children, defaultTab, value, onValueChange, className }: TabsRootProps<T>) => {\n  return (\n    <BaseTabs.Root\n      defaultValue={defaultTab}\n      value={value}\n      onValueChange={onValueChange ? next => onValueChange(next as T) : undefined}\n      className={cn('overflow-y-auto', className)}\n    >\n      {children}\n    </BaseTabs.Root>\n  );\n};\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst tabListVariants = cva('flex items-center relative text-ui-lg', {\n  variants: {\n    variant: {\n      line: 'w-max min-w-full border-b border-border1',\n      pill: 'w-fit gap-1 rounded-full bg-surface2 p-1',\n      'pill-ghost': 'w-fit gap-1 rounded-full p-1',\n    },\n  },\n  defaultVariants: {\n    variant: 'line',\n  },\n});\n\nexport type TabListProps = {\n  children: React.ReactNode;\n  className?: string;\n  sticky?: boolean;\n  /**\n   * Optional inline styles applied to the underlying tab list element.\n   * To override the active tab indicator color, set the `--tab-indicator-color`\n   * CSS variable, e.g. `style={{ '--tab-indicator-color': 'var(--accent5)' } as React.CSSProperties}`.\n   */\n  style?: React.CSSProperties;\n} & VariantProps<typeof tabListVariants>;\n\nexport const TabList = ({ children, className, variant, sticky, style }: TabListProps) => {\n  const resolvedVariant = variant ?? 'line';\n\n  return (\n    <div className={cn('w-full overflow-x-auto', sticky && 'sticky top-0 z-10 bg-surface2')}>\n      <BaseTabs.List\n        data-variant={resolvedVariant}\n        className={cn('group/tabs-list', tabListVariants({ variant: resolvedVariant }), className)}\n        style={style}\n      >\n        {children}\n        {resolvedVariant === 'line' && (\n          <BaseTabs.Indicator\n            className={cn(\n              'absolute bottom-0 left-0 bg-[var(--tab-indicator-color,var(--neutral3))]',\n              'w-[var(--active-tab-width)] h-0.5',\n              'transition-all duration-200 ease-in-out',\n            )}\n            style={{ transform: 'translateX(var(--active-tab-left))' }}\n          />\n        )}\n        {(resolvedVariant === 'pill' || resolvedVariant === 'pill-ghost') && (\n          <BaseTabs.Indicator\n            className={cn(\n              'absolute top-1/2 left-0 z-0 rounded-full bg-[var(--tab-indicator-color,var(--surface4))]',\n              'w-[var(--active-tab-width)] h-[calc(100%-0.5rem)]',\n              'transition-all duration-200 ease-in-out',\n            )}\n            style={{ transform: 'translateY(-50%) translateX(var(--active-tab-left))' }}\n          />\n        )}\n      </BaseTabs.List>\n    </div>\n  );\n};\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { X } from 'lucide-react';\nimport { transitions, focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type TabProps = {\n  children: React.ReactNode;\n  value: string;\n  onClick?: () => void;\n  onClose?: () => void;\n  disabled?: boolean;\n  className?: string;\n};\n\nexport const Tab = ({ children, value, onClick, onClose, disabled, className }: TabProps) => {\n  return (\n    <BaseTabs.Tab\n      value={value}\n      disabled={disabled}\n      className={cn(\n        'text-ui-md font-normal text-neutral3',\n        'whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none cursor-pointer',\n        transitions.colors,\n        focusRing.visible,\n        'hover:text-neutral4',\n        'data-[active]:text-neutral5',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:text-neutral3',\n        // Line variant (default) — active state drawn by <Tabs.Indicator> in TabList\n        'group-data-[variant=line]/tabs-list:py-2 group-data-[variant=line]/tabs-list:px-5',\n        'group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent',\n        // Pill variant\n        'group-data-[variant=pill]/tabs-list:relative group-data-[variant=pill]/tabs-list:z-10',\n        'group-data-[variant=pill]/tabs-list:py-1 group-data-[variant=pill]/tabs-list:px-3',\n        'group-data-[variant=pill]/tabs-list:rounded-full',\n        // Pill-ghost variant (pill without list background)\n        'group-data-[variant=pill-ghost]/tabs-list:relative group-data-[variant=pill-ghost]/tabs-list:z-10',\n        'group-data-[variant=pill-ghost]/tabs-list:py-1 group-data-[variant=pill-ghost]/tabs-list:px-3',\n        'group-data-[variant=pill-ghost]/tabs-list:rounded-full',\n        className,\n      )}\n      onClick={onClick}\n    >\n      {children}\n      {onClose && (\n        <button\n          onClick={e => {\n            e.stopPropagation();\n            onClose();\n          }}\n          className={cn('p-0.5 hover:bg-surface4 rounded', transitions.colors, 'hover:text-neutral5')}\n          aria-label=\"Close tab\"\n        >\n          <X className=\"w-3 h-3\" />\n        </button>\n      )}\n    </BaseTabs.Tab>\n  );\n};\n"],"names":["BaseTabs"],"mappings":"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"}

package/dist/tabs-tab-Dl9FqQhm.cjs

@@ -0,0 +1,122 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const tabs = require('@base-ui/react/tabs');
+const utils = require('./utils-vA5sWo9W.cjs');
+const index = require('./index-DPkWrpVb.cjs');
+const lucideReact = require('lucide-react');
+const transitions = require('./transitions-DpczSjmD.cjs');
+
+const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.Root,
+    {
+      defaultValue: defaultTab,
+      value,
+      onValueChange: onValueChange ? (next) => onValueChange(next) : void 0,
+      className: utils.cn("overflow-y-auto", className),
+      children
+    }
+  );
+};
+
+const tabListVariants = index.cva("flex items-center relative text-ui-lg", {
+  variants: {
+    variant: {
+      line: "w-max min-w-full border-b border-border1",
+      pill: "w-fit gap-1 rounded-full bg-surface2 p-1",
+      "pill-ghost": "w-fit gap-1 rounded-full p-1"
+    }
+  },
+  defaultVariants: {
+    variant: "line"
+  }
+});
+const TabList = ({ children, className, variant, sticky, style }) => {
+  const resolvedVariant = variant ?? "line";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("w-full overflow-x-auto", sticky && "sticky top-0 z-10 bg-surface2"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    tabs.Tabs.List,
+    {
+      "data-variant": resolvedVariant,
+      className: utils.cn("group/tabs-list", tabListVariants({ variant: resolvedVariant }), className),
+      style,
+      children: [
+        children,
+        resolvedVariant === "line" && /* @__PURE__ */ jsxRuntime.jsx(
+          tabs.Tabs.Indicator,
+          {
+            className: utils.cn(
+              "absolute bottom-0 left-0 bg-[var(--tab-indicator-color,var(--neutral3))]",
+              "w-[var(--active-tab-width)] h-0.5",
+              "transition-all duration-200 ease-in-out"
+            ),
+            style: { transform: "translateX(var(--active-tab-left))" }
+          }
+        ),
+        (resolvedVariant === "pill" || resolvedVariant === "pill-ghost") && /* @__PURE__ */ jsxRuntime.jsx(
+          tabs.Tabs.Indicator,
+          {
+            className: utils.cn(
+              "absolute top-1/2 left-0 z-0 rounded-full bg-[var(--tab-indicator-color,var(--surface4))]",
+              "w-[var(--active-tab-width)] h-[calc(100%-0.5rem)]",
+              "transition-all duration-200 ease-in-out"
+            ),
+            style: { transform: "translateY(-50%) translateX(var(--active-tab-left))" }
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+const Tab = ({ children, value, onClick, onClose, disabled, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    tabs.Tabs.Tab,
+    {
+      value,
+      disabled,
+      className: utils.cn(
+        "text-ui-md font-normal text-neutral3",
+        "whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none cursor-pointer",
+        transitions.transitions.colors,
+        transitions.focusRing.visible,
+        "hover:text-neutral4",
+        "data-[active]:text-neutral5",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:text-neutral3",
+        // Line variant (default) — active state drawn by <Tabs.Indicator> in TabList
+        "group-data-[variant=line]/tabs-list:py-2 group-data-[variant=line]/tabs-list:px-5",
+        "group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent",
+        // Pill variant
+        "group-data-[variant=pill]/tabs-list:relative group-data-[variant=pill]/tabs-list:z-10",
+        "group-data-[variant=pill]/tabs-list:py-1 group-data-[variant=pill]/tabs-list:px-3",
+        "group-data-[variant=pill]/tabs-list:rounded-full",
+        // Pill-ghost variant (pill without list background)
+        "group-data-[variant=pill-ghost]/tabs-list:relative group-data-[variant=pill-ghost]/tabs-list:z-10",
+        "group-data-[variant=pill-ghost]/tabs-list:py-1 group-data-[variant=pill-ghost]/tabs-list:px-3",
+        "group-data-[variant=pill-ghost]/tabs-list:rounded-full",
+        className
+      ),
+      onClick,
+      children: [
+        children,
+        onClose && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose();
+            },
+            className: utils.cn("p-0.5 hover:bg-surface4 rounded", transitions.transitions.colors, "hover:text-neutral5"),
+            "aria-label": "Close tab",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.Tabs = Tabs;
+//# sourceMappingURL=tabs-tab-Dl9FqQhm.cjs.map

package/dist/tabs-tab-Dl9FqQhm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab-Dl9FqQhm.cjs","sources":["../src/ds/components/Tabs/tabs-root.tsx","../src/ds/components/Tabs/tabs-list.tsx","../src/ds/components/Tabs/tabs-tab.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { cn } from '@/lib/utils';\n\nexport type TabsRootProps<T extends string> = {\n  children: React.ReactNode;\n  defaultTab: T;\n  value?: T;\n  onValueChange?: (value: T) => void;\n  className?: string;\n};\n\nexport const Tabs = <T extends string>({ children, defaultTab, value, onValueChange, className }: TabsRootProps<T>) => {\n  return (\n    <BaseTabs.Root\n      defaultValue={defaultTab}\n      value={value}\n      onValueChange={onValueChange ? next => onValueChange(next as T) : undefined}\n      className={cn('overflow-y-auto', className)}\n    >\n      {children}\n    </BaseTabs.Root>\n  );\n};\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst tabListVariants = cva('flex items-center relative text-ui-lg', {\n  variants: {\n    variant: {\n      line: 'w-max min-w-full border-b border-border1',\n      pill: 'w-fit gap-1 rounded-full bg-surface2 p-1',\n      'pill-ghost': 'w-fit gap-1 rounded-full p-1',\n    },\n  },\n  defaultVariants: {\n    variant: 'line',\n  },\n});\n\nexport type TabListProps = {\n  children: React.ReactNode;\n  className?: string;\n  sticky?: boolean;\n  /**\n   * Optional inline styles applied to the underlying tab list element.\n   * To override the active tab indicator color, set the `--tab-indicator-color`\n   * CSS variable, e.g. `style={{ '--tab-indicator-color': 'var(--accent5)' } as React.CSSProperties}`.\n   */\n  style?: React.CSSProperties;\n} & VariantProps<typeof tabListVariants>;\n\nexport const TabList = ({ children, className, variant, sticky, style }: TabListProps) => {\n  const resolvedVariant = variant ?? 'line';\n\n  return (\n    <div className={cn('w-full overflow-x-auto', sticky && 'sticky top-0 z-10 bg-surface2')}>\n      <BaseTabs.List\n        data-variant={resolvedVariant}\n        className={cn('group/tabs-list', tabListVariants({ variant: resolvedVariant }), className)}\n        style={style}\n      >\n        {children}\n        {resolvedVariant === 'line' && (\n          <BaseTabs.Indicator\n            className={cn(\n              'absolute bottom-0 left-0 bg-[var(--tab-indicator-color,var(--neutral3))]',\n              'w-[var(--active-tab-width)] h-0.5',\n              'transition-all duration-200 ease-in-out',\n            )}\n            style={{ transform: 'translateX(var(--active-tab-left))' }}\n          />\n        )}\n        {(resolvedVariant === 'pill' || resolvedVariant === 'pill-ghost') && (\n          <BaseTabs.Indicator\n            className={cn(\n              'absolute top-1/2 left-0 z-0 rounded-full bg-[var(--tab-indicator-color,var(--surface4))]',\n              'w-[var(--active-tab-width)] h-[calc(100%-0.5rem)]',\n              'transition-all duration-200 ease-in-out',\n            )}\n            style={{ transform: 'translateY(-50%) translateX(var(--active-tab-left))' }}\n          />\n        )}\n      </BaseTabs.List>\n    </div>\n  );\n};\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { X } from 'lucide-react';\nimport { transitions, focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type TabProps = {\n  children: React.ReactNode;\n  value: string;\n  onClick?: () => void;\n  onClose?: () => void;\n  disabled?: boolean;\n  className?: string;\n};\n\nexport const Tab = ({ children, value, onClick, onClose, disabled, className }: TabProps) => {\n  return (\n    <BaseTabs.Tab\n      value={value}\n      disabled={disabled}\n      className={cn(\n        'text-ui-md font-normal text-neutral3',\n        'whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none cursor-pointer',\n        transitions.colors,\n        focusRing.visible,\n        'hover:text-neutral4',\n        'data-[active]:text-neutral5',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:text-neutral3',\n        // Line variant (default) — active state drawn by <Tabs.Indicator> in TabList\n        'group-data-[variant=line]/tabs-list:py-2 group-data-[variant=line]/tabs-list:px-5',\n        'group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent',\n        // Pill variant\n        'group-data-[variant=pill]/tabs-list:relative group-data-[variant=pill]/tabs-list:z-10',\n        'group-data-[variant=pill]/tabs-list:py-1 group-data-[variant=pill]/tabs-list:px-3',\n        'group-data-[variant=pill]/tabs-list:rounded-full',\n        // Pill-ghost variant (pill without list background)\n        'group-data-[variant=pill-ghost]/tabs-list:relative group-data-[variant=pill-ghost]/tabs-list:z-10',\n        'group-data-[variant=pill-ghost]/tabs-list:py-1 group-data-[variant=pill-ghost]/tabs-list:px-3',\n        'group-data-[variant=pill-ghost]/tabs-list:rounded-full',\n        className,\n      )}\n      onClick={onClick}\n    >\n      {children}\n      {onClose && (\n        <button\n          onClick={e => {\n            e.stopPropagation();\n            onClose();\n          }}\n          className={cn('p-0.5 hover:bg-surface4 rounded', transitions.colors, 'hover:text-neutral5')}\n          aria-label=\"Close tab\"\n        >\n          <X className=\"w-3 h-3\" />\n        </button>\n      )}\n    </BaseTabs.Tab>\n  );\n};\n"],"names":["jsx","BaseTabs","cn","cva","jsxs","transitions","focusRing","X"],"mappings":"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"}