@mastra/playground-ui 36.1.0-alpha.2 → 37.0.0-alpha.4

package/dist/switch-iBVqkTn8.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 './cn-BakJzhuv.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-iBVqkTn8.js.map

package/dist/switch-iBVqkTn8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-iBVqkTn8.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":";;;;;AAcA,MAAM,SAAS,KAAA,CAAM,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,QAAA,EAAU,IAAA,EAAM,WAAA,EAAa,aAAA,EAAe,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACrF,IAAA,MAAM,sBAAA,GAAyB,WAAA,KAAgB,MAAA,IAAa,aAAA,KAAkB,MAAA;AAC9E,IAAA,MAAM,gBAAA,GAAmB,SAAS,MAAA,IAAa,sBAAA;AAE/C,IAAA,MAAM,UAAA,GAAa,yBAAyB,MAAA,GAAY,IAAA;AACxD,IAAA,MAAM,SAAS,WAAA,IAAe,IAAA;AAC9B,IAAA,MAAM,UAAU,aAAA,IAAiB,IAAA;AAMjC,IAAA,MAAM,cACJ,OAAA,IAAW,KAAA,CAAM,eAAe,QAAQ,CAAA,GACpC,EAAE,MAAA,EAAQ,QAAA,EAA+B,GACzC,EAAE,wBAAQ,GAAA,CAAC,QAAA,EAAA,EAAO,MAAK,QAAA,EAAS,CAAA,EAAI,cAAc,IAAA,EAAK;AAE7D,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA,CAAgB,IAAA;AAAA,MAAhB;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,0IAAA;AAAA,UACA,iFAAA;AAAA,UACA,0BAAA;AAAA,UACA,2BAAA;AAAA,UACA,gHAAA;AAAA,UACA,mCAAA;AAAA,UACA,kCAAA;AAAA,UACA,mCAAA;AAAA,UACA,gHAAA;AAAA,UACA,yGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,WAAA;AAAA,QACH,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,OAAA,GAAU,MAAA,GAAY,QAAA;AAAA,0BACvB,GAAA;AAAA,YAACA,QAAA,CAAgB,KAAA;AAAA,YAAhB;AAAA,cACC,WAAA,EAAU,cAAA;AAAA,cACV,SAAA,EAAW,EAAA;AAAA,gBACT,yFAAA;AAAA,gBACA,uHAAA;AAAA,gBACA,0DAAA;AAAA,gBACA,wFAAA;AAAA,gBACA,kDAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEC,QAAA,EAAA,gBAAA,uBAAoB,eAAA,EAAA,EAAgB,WAAA,EAAa,QAAQ,IAAA,EAAM,UAAA,EAAY,aAAA,EAAe,OAAA,EAAS,CAAA,GAAK;AAAA;AAAA;AAC3G;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AAErB,SAAS,eAAA,CAAgB;AAAA,EACvB,WAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,MAAM,aAAA,GAAgB,EAAA;AAAA,IACpB,iEAAA;AAAA,IACA,0FAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,IAAI,SAAS,MAAA,EAAW;AACtB,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAW,IAAA;AAAA,QACX,WAAA,EAAU,mBAAA;AAAA,QACV,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,2CAA2C,CAAA;AAAA,QAEvE,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,aAAA,KAAkB,MAAA,mBACjB,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAW,IAAA;AAAA,QACX,WAAA,EAAU,mBAAA;AAAA,QACV,kBAAA,EAAiB,WAAA;AAAA,QACjB,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,mDAAmD,CAAA;AAAA,QAE/E,QAAA,EAAA;AAAA;AAAA,KACH,GACE,IAAA;AAAA,IACH,gBAAgB,MAAA,mBACf,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAW,IAAA;AAAA,QACX,WAAA,EAAU,mBAAA;AAAA,QACV,kBAAA,EAAiB,SAAA;AAAA,QACjB,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,iEAAiE,CAAA;AAAA,QAE7F,QAAA,EAAA;AAAA;AAAA,KACH,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}

package/dist/tabs-content-De3TzqG0.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_cn = require('./cn-vA5sWo9W.cjs');
+
+const TabContent = ({ children, value, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.Panel,
+    {
+      value,
+      className: utils_cn.cn("grid py-3 overflow-y-auto ring-offset-background", transitions.focusRing.visible, className),
+      children
+    }
+  );
+};
+
+exports.TabContent = TabContent;
+//# sourceMappingURL=tabs-content-De3TzqG0.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-content-De3TzqG0.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,WAAA,CAAG,kDAAA,EAAoDC,qBAAA,CAAU,SAAS,SAAS,CAAA;AAAA,MAE7F;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/tabs-content-J4YUF8-A.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 './cn-BakJzhuv.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-J4YUF8-A.js.map

package/dist/tabs-content-J4YUF8-A.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-content-J4YUF8-A.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-tab-CkHDocn9.cjs

@@ -0,0 +1,122 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const tabs = require('@base-ui/react/tabs');
+const index = require('./index-C-Lt4Bx_.cjs');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+const lucideReact = require('lucide-react');
+const transitions = require('./transitions-DpczSjmD.cjs');
+
+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.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.cn("group/tabs-list", tabListVariants({ variant: resolvedVariant }), className),
+      style,
+      children: [
+        children,
+        resolvedVariant === "line" && /* @__PURE__ */ jsxRuntime.jsx(
+          tabs.Tabs.Indicator,
+          {
+            className: utils_cn.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.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 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.cn("overflow-y-auto", className),
+      children
+    }
+  );
+};
+
+const Tab = ({ children, value, onClick, onClose, disabled, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    tabs.Tabs.Tab,
+    {
+      value,
+      disabled,
+      className: utils_cn.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.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-CkHDocn9.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab-CkHDocn9.cjs","sources":["../src/ds/components/Tabs/tabs-list.tsx","../src/ds/components/Tabs/tabs-root.tsx","../src/ds/components/Tabs/tabs-tab.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { 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 { 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 { 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":["cva","cn","jsxs","BaseTabs","jsx","transitions","focusRing","X"],"mappings":";;;;;;;;;AAKA,MAAM,eAAA,GAAkBA,UAAI,uCAAA,EAAyC;AAAA,EACnE,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,0CAAA;AAAA,MACN,IAAA,EAAM,0CAAA;AAAA,MACN,YAAA,EAAc;AAAA;AAChB,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAcM,MAAM,OAAA,GAAU,CAAC,EAAE,QAAA,EAAU,WAAW,OAAA,EAAS,MAAA,EAAQ,OAAM,KAAoB;AACxF,EAAA,MAAM,kBAAkB,OAAA,IAAW,MAAA;AAEnC,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,YAAG,wBAAA,EAA0B,MAAA,IAAU,+BAA+B,CAAA,EACpF,QAAA,kBAAAC,eAAA;AAAA,IAACC,SAAA,CAAS,IAAA;AAAA,IAAT;AAAA,MACC,cAAA,EAAc,eAAA;AAAA,MACd,SAAA,EAAWF,YAAG,iBAAA,EAAmB,eAAA,CAAgB,EAAE,OAAA,EAAS,eAAA,EAAiB,CAAA,EAAG,SAAS,CAAA;AAAA,MACzF,KAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,oBAAoB,MAAA,oBACnBG,cAAA;AAAA,UAACD,SAAA,CAAS,SAAA;AAAA,UAAT;AAAA,YACC,SAAA,EAAWF,WAAA;AAAA,cACT,0EAAA;AAAA,cACA,mCAAA;AAAA,cACA;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,SAAA,EAAW,oCAAA;AAAqC;AAAA,SAC3D;AAAA,QAAA,CAEA,eAAA,KAAoB,MAAA,IAAU,eAAA,KAAoB,YAAA,qBAClDG,cAAA;AAAA,UAACD,SAAA,CAAS,SAAA;AAAA,UAAT;AAAA,YACC,SAAA,EAAWF,WAAA;AAAA,cACT,0FAAA;AAAA,cACA,mDAAA;AAAA,cACA;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,SAAA,EAAW,qDAAA;AAAsD;AAAA;AAC5E;AAAA;AAAA,GAEJ,EACF,CAAA;AAEJ;;ACrDO,MAAM,IAAA,GAAO,CAAmB,EAAE,QAAA,EAAU,YAAY,KAAA,EAAO,aAAA,EAAe,WAAU,KAAwB;AACrH,EAAA,uBACEG,cAAA;AAAA,IAACD,SAAA,CAAS,IAAA;AAAA,IAAT;AAAA,MACC,YAAA,EAAc,UAAA;AAAA,MACd,KAAA;AAAA,MACA,aAAA,EAAe,aAAA,GAAgB,CAAA,IAAA,KAAQ,aAAA,CAAc,IAAS,CAAA,GAAI,MAAA;AAAA,MAClE,SAAA,EAAWF,WAAA,CAAG,iBAAA,EAAmB,SAAS,CAAA;AAAA,MAEzC;AAAA;AAAA,GACH;AAEJ;;ACRO,MAAM,GAAA,GAAM,CAAC,EAAE,QAAA,EAAU,OAAO,OAAA,EAAS,OAAA,EAAS,QAAA,EAAU,SAAA,EAAU,KAAgB;AAC3F,EAAA,uBACEC,eAAA;AAAA,IAACC,SAAA,CAAS,GAAA;AAAA,IAAT;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA,EAAWF,WAAA;AAAA,QACT,sCAAA;AAAA,QACA,iGAAA;AAAA,QACAI,uBAAA,CAAY,MAAA;AAAA,QACZC,qBAAA,CAAU,OAAA;AAAA,QACV,qBAAA;AAAA,QACA,6BAAA;AAAA,QACA,mGAAA;AAAA;AAAA,QAEA,mFAAA;AAAA,QACA,uGAAA;AAAA;AAAA,QAEA,uFAAA;AAAA,QACA,mFAAA;AAAA,QACA,kDAAA;AAAA;AAAA,QAEA,mGAAA;AAAA,QACA,+FAAA;AAAA,QACA,wDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,OAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,OAAA,oBACCF,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAS,CAAA,CAAA,KAAK;AACZ,cAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,cAAA,OAAA,EAAQ;AAAA,YACV,CAAA;AAAA,YACA,SAAA,EAAWH,WAAA,CAAG,iCAAA,EAAmCI,uBAAA,CAAY,QAAQ,qBAAqB,CAAA;AAAA,YAC1F,YAAA,EAAW,WAAA;AAAA,YAEX,QAAA,kBAAAD,cAAA,CAACG,aAAA,EAAA,EAAE,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA;AACzB;AAAA;AAAA,GAEJ;AAEJ;;;;;;"}

package/dist/tabs-tab-D0Ydz5KC.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 cva } from './index-CSm06eOE.js';
+import { c as cn } from './cn-BakJzhuv.js';
+import { X } from 'lucide-react';
+import { t as transitions, f as focusRing } from './transitions-tFfqxz40.js';
+
+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 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 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-D0Ydz5KC.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab-D0Ydz5KC.js","sources":["../src/ds/components/Tabs/tabs-list.tsx","../src/ds/components/Tabs/tabs-root.tsx","../src/ds/components/Tabs/tabs-tab.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { 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 { 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 { 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/text-field-block-DPyUlRc-.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const input = require('./input-DL5-kqK-.cjs');
+const fieldBlock = require('./field-block-BR_ZD9QO.cjs');
+const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+
+function TextFieldBlock({
+  name,
+  value,
+  label,
+  labelIsHidden = false,
+  labelColumnWidth,
+  helpText,
+  errorMsg,
+  required = false,
+  disabled = false,
+  labelSize,
+  layout = "vertical",
+  placeholder,
+  size = "default",
+  testId,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Layout, { layout, labelColumnWidth, className, children: [
+    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name, required, size: labelSize || "bigger", children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Column, { children: [
+      !labelIsHidden && layout === "vertical" ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name, required, size: labelSize || "default", children: label }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        input.Input,
+        {
+          name,
+          disabled,
+          required,
+          value,
+          placeholder,
+          "data-testid": testId,
+          size,
+          ...props
+        }
+      ),
+      helpText && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.HelpText, { children: helpText }),
+      errorMsg && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.ErrorMsg, { children: errorMsg })
+    ] })
+  ] });
+}
+
+exports.TextFieldBlock = TextFieldBlock;
+//# sourceMappingURL=text-field-block-DPyUlRc-.cjs.map

package/dist/text-field-block-DPyUlRc-.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-block-DPyUlRc-.cjs","sources":["../src/ds/components/FormFieldBlocks/fields/text-field-block.tsx"],"sourcesContent":["import { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { FieldBlock } from '../block/field-block';\nimport type { FieldBlockErrorMsgProps } from '../block/field-block-error-msg';\nimport type { FieldBlockHelpTextProps } from '../block/field-block-help-text';\nimport type { FieldBlockLabelProps } from '../block/field-block-label';\nimport type { FieldBlockLayoutProps } from '../block/field-block-layout';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\n\nexport type TextFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelColumnWidth'> &\n  Omit<InputProps, 'name' | 'size'> & {\n    name: string;\n    labelIsHidden?: boolean;\n    label?: FieldBlockLabelProps['children'];\n    labelSize?: FieldBlockLabelProps['size'];\n    helpText?: FieldBlockHelpTextProps['children'];\n    errorMsg?: FieldBlockErrorMsgProps['children'];\n    size?: InputProps['size'];\n  };\n\nexport function TextFieldBlock({\n  name,\n  value,\n  label,\n  labelIsHidden = false,\n  labelColumnWidth,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  labelSize,\n  layout = 'vertical',\n  placeholder,\n  size = 'default',\n  testId,\n  className,\n  ...props\n}: TextFieldBlockProps) {\n  return (\n    <FieldBlock.Layout layout={layout} labelColumnWidth={labelColumnWidth} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required} size={labelSize || 'bigger'}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {!labelIsHidden && layout === 'vertical' ? (\n          <FieldBlock.Label name={name} required={required} size={labelSize || 'default'}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <Input\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value}\n          placeholder={placeholder}\n          data-testid={testId}\n          size={size}\n          {...props}\n        />\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":["FieldBlock","jsx","VisuallyHidden","jsxs","Input"],"mappings":";;;;;;;AAoBO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,MAAA,GAAS,UAAA;AAAA,EACT,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,uCACGA,qBAAA,CAAW,MAAA,EAAX,EAAkB,MAAA,EAAgB,kBAAoC,SAAA,EACpE,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,YAAA,kCACTA,qBAAA,CAAW,MAAA,EAAX,EACC,QAAA,kBAAAC,cAAA,CAACD,qBAAA,CAAW,OAAX,EAAiB,IAAA,EAAY,UAAoB,IAAA,EAAM,SAAA,IAAa,UAClE,QAAA,EAAA,aAAA,mBAAgBC,cAAA,CAACC,sCAAgB,QAAA,EAAA,KAAA,EAAM,CAAA,GAAoB,KAAA,EAC9D,CAAA,EACF,CAAA,GACE,IAAA;AAAA,oBACJC,eAAA,CAACH,qBAAA,CAAW,MAAA,EAAX,EACE,QAAA,EAAA;AAAA,MAAA,CAAC,aAAA,IAAiB,MAAA,KAAW,UAAA,mBAC5BC,cAAA,CAACD,qBAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAAoB,IAAA,EAAM,SAAA,IAAa,SAAA,EAClE,iBACH,CAAA,GACE,IAAA;AAAA,sBACJC,cAAA;AAAA,QAACG,WAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,WAAA;AAAA,UACA,aAAA,EAAa,MAAA;AAAA,UACb,IAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC,QAAA,oBAAYH,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MAC3C,QAAA,oBAAYC,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS;AAAA,KAAA,EAC9C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/text-field-block-DybcFyt-.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { I as Input } from './input-CmF5qOKQ.js';
+import { F as FieldBlock } from './field-block-CpRBHzQO.js';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+
+function TextFieldBlock({
+  name,
+  value,
+  label,
+  labelIsHidden = false,
+  labelColumnWidth,
+  helpText,
+  errorMsg,
+  required = false,
+  disabled = false,
+  labelSize,
+  layout = "vertical",
+  placeholder,
+  size = "default",
+  testId,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(FieldBlock.Layout, { layout, labelColumnWidth, className, children: [
+    layout === "horizontal" ? /* @__PURE__ */ jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsx(FieldBlock.Label, { name, required, size: labelSize || "bigger", children: labelIsHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : label }) }) : null,
+    /* @__PURE__ */ jsxs(FieldBlock.Column, { children: [
+      !labelIsHidden && layout === "vertical" ? /* @__PURE__ */ jsx(FieldBlock.Label, { name, required, size: labelSize || "default", children: label }) : null,
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          name,
+          disabled,
+          required,
+          value,
+          placeholder,
+          "data-testid": testId,
+          size,
+          ...props
+        }
+      ),
+      helpText && /* @__PURE__ */ jsx(FieldBlock.HelpText, { children: helpText }),
+      errorMsg && /* @__PURE__ */ jsx(FieldBlock.ErrorMsg, { children: errorMsg })
+    ] })
+  ] });
+}
+
+export { TextFieldBlock as T };
+//# sourceMappingURL=text-field-block-DybcFyt-.js.map

package/dist/text-field-block-DybcFyt-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-block-DybcFyt-.js","sources":["../src/ds/components/FormFieldBlocks/fields/text-field-block.tsx"],"sourcesContent":["import { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { FieldBlock } from '../block/field-block';\nimport type { FieldBlockErrorMsgProps } from '../block/field-block-error-msg';\nimport type { FieldBlockHelpTextProps } from '../block/field-block-help-text';\nimport type { FieldBlockLabelProps } from '../block/field-block-label';\nimport type { FieldBlockLayoutProps } from '../block/field-block-layout';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\n\nexport type TextFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelColumnWidth'> &\n  Omit<InputProps, 'name' | 'size'> & {\n    name: string;\n    labelIsHidden?: boolean;\n    label?: FieldBlockLabelProps['children'];\n    labelSize?: FieldBlockLabelProps['size'];\n    helpText?: FieldBlockHelpTextProps['children'];\n    errorMsg?: FieldBlockErrorMsgProps['children'];\n    size?: InputProps['size'];\n  };\n\nexport function TextFieldBlock({\n  name,\n  value,\n  label,\n  labelIsHidden = false,\n  labelColumnWidth,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  labelSize,\n  layout = 'vertical',\n  placeholder,\n  size = 'default',\n  testId,\n  className,\n  ...props\n}: TextFieldBlockProps) {\n  return (\n    <FieldBlock.Layout layout={layout} labelColumnWidth={labelColumnWidth} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required} size={labelSize || 'bigger'}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {!labelIsHidden && layout === 'vertical' ? (\n          <FieldBlock.Label name={name} required={required} size={labelSize || 'default'}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <Input\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value}\n          placeholder={placeholder}\n          data-testid={testId}\n          size={size}\n          {...props}\n        />\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":[],"mappings":";;;;;AAoBO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,MAAA,GAAS,UAAA;AAAA,EACT,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,4BACG,UAAA,CAAW,MAAA,EAAX,EAAkB,MAAA,EAAgB,kBAAoC,SAAA,EACpE,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,YAAA,uBACT,UAAA,CAAW,MAAA,EAAX,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,CAAW,OAAX,EAAiB,IAAA,EAAY,UAAoB,IAAA,EAAM,SAAA,IAAa,UAClE,QAAA,EAAA,aAAA,mBAAgB,GAAA,CAAC,kBAAgB,QAAA,EAAA,KAAA,EAAM,CAAA,GAAoB,KAAA,EAC9D,CAAA,EACF,CAAA,GACE,IAAA;AAAA,oBACJ,IAAA,CAAC,UAAA,CAAW,MAAA,EAAX,EACE,QAAA,EAAA;AAAA,MAAA,CAAC,aAAA,IAAiB,MAAA,KAAW,UAAA,mBAC5B,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAAoB,IAAA,EAAM,SAAA,IAAa,SAAA,EAClE,iBACH,CAAA,GACE,IAAA;AAAA,sBACJ,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,WAAA;AAAA,UACA,aAAA,EAAa,MAAA;AAAA,UACb,IAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC,QAAA,oBAAY,GAAA,CAAC,UAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MAC3C,QAAA,oBAAY,GAAA,CAAC,UAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS;AAAA,KAAA,EAC9C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}