@mastra/playground-ui 61.0.0 → 62.0.0-alpha.0

package/dist/input-group-B_60bxtW.cjs

@@ -0,0 +1,208 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const input = require('@base-ui/react/input');
+const index = require('./index-DlPxfJz9.cjs');
+const React = require('react');
+const Button = require('./Button-BTuu6_hv.cjs');
+const fieldControlAria = require('./field-control-aria-WzMGs0A4.cjs');
+const primitives_controlSize = require('./primitives/control-size.cjs.js');
+const primitives_formElement = require('./primitives/form-element.cjs.js');
+const primitives_textareaControl = require('./primitives/textarea-control.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.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 inputGroupBaseClassName = utils_cn.cn(
+  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor
+  // so it never collapses to 0. `items-center` centres the control: it carries its own
+  // h-form-* (2px taller than the root's content box), so stretch would push its text low
+  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.
+  "group/input-group relative flex w-full flex-1 items-center",
+  // The wrapper owns its control's width — a bare control has no width of its own,
+  // so the group is the one that decides the input fills the remaining space.
+  "[&>[data-slot=input-group-control]]:min-w-0 [&>[data-slot=input-group-control]]:flex-1",
+  "text-foreground",
+  "has-[:disabled]:cursor-not-allowed has-[:disabled]:text-muted-foreground",
+  // Height is on the root (border-box) so the group matches a same-size sibling control.
+  // Auto height when vertical (block-* addon) or wrapping a textarea.
+  "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col",
+  "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
+  "has-[textarea]:h-auto",
+  "has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0",
+  "has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0",
+  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.
+  "has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none",
+  "has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none"
+);
+const inputGroupRoundedTextareaClassName = utils_cn.cn(
+  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl
+  // whenever the group goes vertical (block-* addon) or wraps a textarea.
+  "has-[>[data-align=block-start]]:rounded-xl",
+  "has-[>[data-align=block-end]]:rounded-xl",
+  "has-[textarea]:rounded-xl"
+);
+const inputGroupClassName = utils_cn.cn(
+  inputGroupBaseClassName,
+  "rounded-full",
+  primitives_formElement.inputSurfaceAndFocusWithinStyle,
+  primitives_formElement.fieldErrorRimWithin,
+  inputGroupRoundedTextareaClassName
+);
+function InputGroup({ className, size, ...props }) {
+  const groupSize = React__namespace.useContext(primitives_controlSize.ControlSizeContext);
+  const resolved = groupSize ?? size ?? "md";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group",
+      "data-size": resolved,
+      className: utils_cn.cn(inputGroupClassName, primitives_controlSize.controlHeight[resolved], className),
+      ...props
+    }
+  );
+}
+const inputGroupControlTextBySize = utils_cn.cn(
+  "group-data-[size=sm]/input-group:text-caption",
+  "group-data-[size=md]/input-group:text-body-sm",
+  "group-data-[size=lg]/input-group:text-body"
+);
+const inputGroupAddonVariants = index.cva(
+  utils_cn.cn(
+    "flex items-center justify-center gap-2 text-muted-foreground select-none",
+    inputGroupControlTextBySize,
+    "group-has-[:disabled]/input-group:text-muted-foreground",
+    "[&>svg:not([class*='size-'])]:size-4"
+  ),
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pr-1 pl-3 has-[>button]:pl-1",
+        "inline-end": "order-last pr-3 pl-1 has-[>button]:pr-1",
+        "block-start": "order-first w-full justify-start border-b border-border px-3 pt-2 pb-1",
+        "block-end": "order-last w-full justify-start border-t border-border px-3 pt-1 pb-2"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({ className, align = "inline-start", onClick, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: utils_cn.cn(inputGroupAddonVariants({ align }), className),
+      onClick: (event) => {
+        const target = event.target;
+        if (!target.closest('button, input, textarea, [role="button"]')) {
+          event.currentTarget.parentElement?.querySelector("[data-slot=input-group-control]")?.focus();
+        }
+        onClick?.(event);
+      },
+      ...props
+    }
+  );
+}
+const inputGroupControlHeightBySize = utils_cn.cn(
+  "group-data-[size=sm]/input-group:h-[calc(var(--spacing-control-sm)-2px)]",
+  "group-data-[size=md]/input-group:h-[calc(var(--spacing-control-md)-2px)]",
+  "group-data-[size=lg]/input-group:h-[calc(var(--spacing-control-lg)-2px)]"
+);
+const inputGroupControlClassName = utils_cn.cn(
+  "min-w-0 flex-1 bg-transparent px-3 text-label text-foreground outline-hidden",
+  inputGroupControlHeightBySize,
+  "placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal",
+  "focus:placeholder:opacity-70",
+  "disabled:cursor-not-allowed"
+);
+function InputGroupInput({ className, testId, error, type = "text", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    input.Input,
+    {
+      type,
+      "data-slot": "input-group-control",
+      "data-testid": testId,
+      className: utils_cn.cn(
+        inputGroupControlClassName,
+        // WebKit and Firefox use different selectors for native number spinners.
+        "[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none",
+        "[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none",
+        "[&[type=number]]:[appearance:textfield]",
+        // type="search": drop WebKit's native clear button so it doesn't double up with a
+        // custom clear control (e.g. the scorers toolbar's InputGroupButton).
+        "[&::-webkit-search-cancel-button]:appearance-none",
+        className
+      ),
+      ...primitives_formElement.deprecatedErrorAria(error),
+      ...props,
+      ...fieldControlAria.keepOwnAccessibleName(props)
+    }
+  );
+}
+function InputGroupTextarea({ className, testId, error, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    primitives_textareaControl.TextareaControl,
+    {
+      "data-slot": "input-group-control",
+      "data-testid": testId,
+      className: utils_cn.cn(
+        "min-h-15 min-w-0 flex-1 resize-y bg-transparent px-3 py-2 text-foreground outline-hidden",
+        inputGroupControlTextBySize,
+        "placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal",
+        "focus:placeholder:opacity-70",
+        "disabled:cursor-not-allowed",
+        className
+      ),
+      ...primitives_formElement.deprecatedErrorAria(error),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils_cn.cn(
+        "flex items-center gap-2 text-caption text-muted-foreground [&_svg]:pointer-events-none",
+        "[&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupButton({ size = "icon-sm", variant = "ghost", type = "button", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type, size, variant, ...props });
+}
+
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupButton = InputGroupButton;
+exports.InputGroupInput = InputGroupInput;
+exports.InputGroupText = InputGroupText;
+exports.InputGroupTextarea = InputGroupTextarea;
+exports.inputGroupClassName = inputGroupClassName;
+exports.inputGroupControlClassName = inputGroupControlClassName;
+//# sourceMappingURL=input-group-B_60bxtW.cjs.map

package/dist/input-group-B_60bxtW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-B_60bxtW.cjs","sources":["../src/ds/components/InputGroup/input-group.tsx"],"sourcesContent":["import { Input as InputPrimitive } from '@base-ui/react/input';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { keepOwnAccessibleName } from '@/ds/components/Field/field-control-aria';\nimport { ControlSizeContext, controlHeight } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport {\n  deprecatedErrorAria,\n  fieldErrorRimWithin,\n  inputSurfaceAndFocusWithinStyle,\n} from '@/ds/primitives/form-element';\nimport { TextareaControl } from '@/ds/primitives/textarea-control';\nimport { cn } from '@/lib/utils';\n\n// Size flows down as `data-size` on the named group root (`group/input-group`), read by the\n// control through `group-data-[size=…]` variants — no prop drilling. The one context read is\n// upward: a wrapper that owns the rung (ButtonsGroup) hands it to the field.\n\nconst inputGroupBaseClassName = cn(\n  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor\n  // so it never collapses to 0. `items-center` centres the control: it carries its own\n  // h-form-* (2px taller than the root's content box), so stretch would push its text low\n  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.\n  'group/input-group relative flex w-full flex-1 items-center',\n  // The wrapper owns its control's width — a bare control has no width of its own,\n  // so the group is the one that decides the input fills the remaining space.\n  '[&>[data-slot=input-group-control]]:min-w-0 [&>[data-slot=input-group-control]]:flex-1',\n  'text-foreground',\n  'has-[:disabled]:cursor-not-allowed has-[:disabled]:text-muted-foreground',\n  // Height is on the root (border-box) so the group matches a same-size sibling control.\n  // Auto height when vertical (block-* addon) or wrapping a textarea.\n  'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col',\n  'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col',\n  'has-[textarea]:h-auto',\n  'has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0',\n  'has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0',\n  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.\n  'has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none',\n  'has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none',\n);\n\nconst inputGroupRoundedTextareaClassName = cn(\n  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl\n  // whenever the group goes vertical (block-* addon) or wraps a textarea.\n  'has-[>[data-align=block-start]]:rounded-xl',\n  'has-[>[data-align=block-end]]:rounded-xl',\n  'has-[textarea]:rounded-xl',\n);\n\n// A group wears the field material — the same `bg-card` plus rim an Input wears — so a\n// group and a bare field beside it are one surface. Its states move the rim, and they\n// read the nested control's focus (`focus-within`) because the wrapper never takes focus\n// itself. There is no second look: a transparent `outline` group existed alongside this\n// one and only ever produced two boundary languages for the same control, which is why\n// four of its call sites had wrapped it in a hand-made `bg-card rounded-full` div to get\n// the material back.\n// eslint-disable-next-line react-refresh/only-export-components -- shared with InputNumber\nexport const inputGroupClassName = cn(\n  inputGroupBaseClassName,\n  'rounded-full',\n  inputSurfaceAndFocusWithinStyle,\n  fieldErrorRimWithin,\n  inputGroupRoundedTextareaClassName,\n);\n\nexport type InputGroupProps = React.ComponentProps<'div'> & {\n  size?: ControlSize;\n};\n\nfunction InputGroup({ className, size, ...props }: InputGroupProps) {\n  // A wrapper's rung wins over the field's own: inside a ButtonsGroup the group owns the\n  // height of every segment, so a field that kept its own type scale would sit at one rung\n  // and read at another.\n  const groupSize = React.useContext(ControlSizeContext);\n  const resolved = groupSize ?? size ?? 'md';\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group\"\n      data-size={resolved}\n      className={cn(inputGroupClassName, controlHeight[resolved], className)}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupControlTextBySize = cn(\n  'group-data-[size=sm]/input-group:text-caption',\n  'group-data-[size=md]/input-group:text-body-sm',\n  'group-data-[size=lg]/input-group:text-body',\n);\n\nconst inputGroupAddonVariants = cva(\n  cn(\n    'flex items-center justify-center gap-2 text-muted-foreground select-none',\n    inputGroupControlTextBySize,\n    'group-has-[:disabled]/input-group:text-muted-foreground',\n    \"[&>svg:not([class*='size-'])]:size-4\",\n  ),\n  {\n    variants: {\n      align: {\n        'inline-start': 'order-first pr-1 pl-3 has-[>button]:pl-1',\n        'inline-end': 'order-last pr-3 pl-1 has-[>button]:pr-1',\n        'block-start': 'order-first w-full justify-start border-b border-border px-3 pt-2 pb-1',\n        'block-end': 'order-last w-full justify-start border-t border-border px-3 pt-1 pb-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\nexport type InputGroupAddonProps = React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>;\n\nfunction InputGroupAddon({ className, align = 'inline-start', onClick, ...props }: InputGroupAddonProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={event => {\n        // Click on non-interactive addon area focuses the control inside the group.\n        // Skip when a button/input handled the click itself.\n        const target = event.target as HTMLElement;\n        if (!target.closest('button, input, textarea, [role=\"button\"]')) {\n          event.currentTarget.parentElement\n            ?.querySelector<HTMLInputElement | HTMLTextAreaElement>('[data-slot=input-group-control]')\n            ?.focus();\n        }\n        onClick?.(event);\n      }}\n      {...props}\n    />\n  );\n}\n\n// Size flows from the parent group's `data-size` (no React context). All four sizes are\n// written out so Tailwind's scanner emits them. The control is sized to the root's\n// content box (token height minus the 1px border on each side) so it never overflows the\n// root — otherwise, in a flex-column parent, the root's content-based minimum would win\n// over its explicit height and the group would render 2px taller than a sibling control.\n// The explicit height also keeps the control from collapsing to the line-height in block\n// mode (flex-col + flex-none).\nconst inputGroupControlHeightBySize = cn(\n  'group-data-[size=sm]/input-group:h-[calc(var(--spacing-control-sm)-2px)]',\n  'group-data-[size=md]/input-group:h-[calc(var(--spacing-control-md)-2px)]',\n  'group-data-[size=lg]/input-group:h-[calc(var(--spacing-control-lg)-2px)]',\n);\n\n// eslint-disable-next-line react-refresh/only-export-components -- shared with InputNumber\nexport const inputGroupControlClassName = cn(\n  'min-w-0 flex-1 bg-transparent px-3 text-label text-foreground outline-hidden',\n  inputGroupControlHeightBySize,\n  'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n  'focus:placeholder:opacity-70',\n  'disabled:cursor-not-allowed',\n);\n\nexport type InputGroupInputProps = Omit<React.ComponentProps<'input'>, 'size'> & {\n  testId?: string;\n  /** @deprecated Wrap the group in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */\n  error?: boolean;\n};\n\nfunction InputGroupInput({ className, testId, error, type = 'text', ...props }: InputGroupInputProps) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input-group-control\"\n      data-testid={testId}\n      className={cn(\n        inputGroupControlClassName,\n        // WebKit and Firefox use different selectors for native number spinners.\n        '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',\n        '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',\n        '[&[type=number]]:[appearance:textfield]',\n        // type=\"search\": drop WebKit's native clear button so it doesn't double up with a\n        // custom clear control (e.g. the scorers toolbar's InputGroupButton).\n        '[&::-webkit-search-cancel-button]:appearance-none',\n        className,\n      )}\n      {...deprecatedErrorAria(error)}\n      {...props}\n      {...keepOwnAccessibleName(props)}\n    />\n  );\n}\n\nexport type InputGroupTextareaProps = React.ComponentProps<'textarea'> & {\n  testId?: string;\n  /** @deprecated Wrap the group in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */\n  error?: boolean;\n};\n\nfunction InputGroupTextarea({ className, testId, error, ...props }: InputGroupTextareaProps) {\n  return (\n    <TextareaControl\n      data-slot=\"input-group-control\"\n      data-testid={testId}\n      className={cn(\n        'min-h-15 min-w-0 flex-1 resize-y bg-transparent px-3 py-2 text-foreground outline-hidden',\n        inputGroupControlTextBySize,\n        'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n        'focus:placeholder:opacity-70',\n        'disabled:cursor-not-allowed',\n        className,\n      )}\n      {...deprecatedErrorAria(error)}\n      {...props}\n    />\n  );\n}\n\nexport type InputGroupTextProps = React.ComponentProps<'span'>;\n\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-caption text-muted-foreground [&_svg]:pointer-events-none',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, 'size' | 'variant'> & {\n  size?: ButtonProps['size'];\n  variant?: ButtonProps['variant'];\n};\n\nfunction InputGroupButton({ size = 'icon-sm', variant = 'ghost', type = 'button', ...props }: InputGroupButtonProps) {\n  return <Button type={type} size={size} variant={variant} {...props} />;\n}\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupText, InputGroupButton };\n"],"names":["cn","inputSurfaceAndFocusWithinStyle","fieldErrorRimWithin","React","ControlSizeContext","jsx","controlHeight","cva","InputPrimitive","deprecatedErrorAria","keepOwnAccessibleName","TextareaControl","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,uBAAA,GAA0BA,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,4DAAA;AAAA;AAAA;AAAA,EAGA,wFAAA;AAAA,EACA,iBAAA;AAAA,EACA,0EAAA;AAAA;AAAA;AAAA,EAGA,iFAAA;AAAA,EACA,6EAAA;AAAA,EACA,uBAAA;AAAA,EACA,2EAAA;AAAA,EACA,yEAAA;AAAA;AAAA,EAEA,0JAAA;AAAA,EACA;AACF,CAAA;AAEA,MAAM,kCAAA,GAAqCA,WAAA;AAAA;AAAA;AAAA,EAGzC,4CAAA;AAAA,EACA,0CAAA;AAAA,EACA;AACF,CAAA;AAUO,MAAM,mBAAA,GAAsBA,WAAA;AAAA,EACjC,uBAAA;AAAA,EACA,cAAA;AAAA,EACAC,sDAAA;AAAA,EACAC,0CAAA;AAAA,EACA;AACF;AAMA,SAAS,WAAW,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,OAAM,EAAoB;AAIlE,EAAA,MAAM,SAAA,GAAYC,gBAAA,CAAM,UAAA,CAAWC,yCAAkB,CAAA;AACrD,EAAA,MAAM,QAAA,GAAW,aAAa,IAAA,IAAQ,IAAA;AACtC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAU,aAAA;AAAA,MACV,WAAA,EAAW,QAAA;AAAA,MACX,WAAWL,WAAA,CAAG,mBAAA,EAAqBM,oCAAA,CAAc,QAAQ,GAAG,SAAS,CAAA;AAAA,MACpE,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,MAAM,2BAAA,GAA8BN,WAAA;AAAA,EAClC,+CAAA;AAAA,EACA,+CAAA;AAAA,EACA;AACF,CAAA;AAEA,MAAM,uBAAA,GAA0BO,SAAA;AAAA,EAC9BP,WAAA;AAAA,IACE,0EAAA;AAAA,IACA,2BAAA;AAAA,IACA,yDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,cAAA,EAAgB,0CAAA;AAAA,QAChB,YAAA,EAAc,yCAAA;AAAA,QACd,aAAA,EAAe,wEAAA;AAAA,QACf,WAAA,EAAa;AAAA;AACf,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,KAAA,EAAO;AAAA;AACT;AAEJ,CAAA;AAIA,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,KAAA,GAAQ,gBAAgB,OAAA,EAAS,GAAG,OAAM,EAAyB;AACvG,EAAA,uBACEK,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAU,mBAAA;AAAA,MACV,YAAA,EAAY,KAAA;AAAA,MACZ,WAAWL,WAAA,CAAG,uBAAA,CAAwB,EAAE,KAAA,EAAO,GAAG,SAAS,CAAA;AAAA,MAC3D,SAAS,CAAA,KAAA,KAAS;AAGhB,QAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AACrB,QAAA,IAAI,CAAC,MAAA,CAAO,OAAA,CAAQ,0CAA0C,CAAA,EAAG;AAC/D,UAAA,KAAA,CAAM,aAAA,CAAc,aAAA,EAChB,aAAA,CAAsD,iCAAiC,GACvF,KAAA,EAAM;AAAA,QACZ;AACA,QAAA,OAAA,GAAU,KAAK,CAAA;AAAA,MACjB,CAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AASA,MAAM,6BAAA,GAAgCA,WAAA;AAAA,EACpC,0EAAA;AAAA,EACA,0EAAA;AAAA,EACA;AACF,CAAA;AAGO,MAAM,0BAAA,GAA6BA,WAAA;AAAA,EACxC,8EAAA;AAAA,EACA,6BAAA;AAAA,EACA,8FAAA;AAAA,EACA,8BAAA;AAAA,EACA;AACF;AAQA,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,MAAA,EAAQ,OAAO,IAAA,GAAO,MAAA,EAAQ,GAAG,KAAA,EAAM,EAAyB;AACpG,EAAA,uBACEK,cAAA;AAAA,IAACG,WAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,WAAA,EAAU,qBAAA;AAAA,MACV,aAAA,EAAa,MAAA;AAAA,MACb,SAAA,EAAWR,WAAA;AAAA,QACT,0BAAA;AAAA;AAAA,QAEA,mFAAA;AAAA,QACA,mFAAA;AAAA,QACA,yCAAA;AAAA;AAAA;AAAA,QAGA,mDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAGS,2CAAoB,KAAK,CAAA;AAAA,MAC5B,GAAG,KAAA;AAAA,MACH,GAAGC,uCAAsB,KAAK;AAAA;AAAA,GACjC;AAEJ;AAQA,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAQ,KAAA,EAAO,GAAG,OAAM,EAA4B;AAC3F,EAAA,uBACEL,cAAA;AAAA,IAACM,0CAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,qBAAA;AAAA,MACV,aAAA,EAAa,MAAA;AAAA,MACb,SAAA,EAAWX,WAAA;AAAA,QACT,0FAAA;AAAA,QACA,2BAAA;AAAA,QACA,8FAAA;AAAA,QACA,8BAAA;AAAA,QACA,6BAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAGS,2CAAoB,KAAK,CAAA;AAAA,MAC5B,GAAG;AAAA;AAAA,GACN;AAEJ;AAIA,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AACpE,EAAA,uBACEJ,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWL,WAAA;AAAA,QACT,wFAAA;AAAA,QACA,sCAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAOA,SAAS,gBAAA,CAAiB,EAAE,IAAA,GAAO,SAAA,EAAW,OAAA,GAAU,SAAS,IAAA,GAAO,QAAA,EAAU,GAAG,KAAA,EAAM,EAA0B;AACnH,EAAA,sCAAQY,aAAA,EAAA,EAAO,IAAA,EAAY,IAAA,EAAY,OAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AACtE;;;;;;;;;;;"}

package/dist/input-vi0ICZHe.js

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import { Input as Input$1 } from '@base-ui/react/input';
+import { c as cva } from './index-D_f78K7e.js';
+import { k as keepOwnAccessibleName } from './field-control-aria-DB6y41tQ.js';
+import { controlSizeClasses } from './primitives/control-size.es.js';
+import { deprecatedErrorAria, fieldErrorRim, resolveFieldVariant, unstyledFormElementStyle, sharedFormElementDisabledStyle, inputSurfaceAndFocusStyle } from './primitives/form-element.es.js';
+import { controlStateColorTransition } from './primitives/transitions.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+const inputVariants = cva(
+  cn(
+    // A text field is a block control: it fills its field. Content-sized controls (a
+    // Select or Combobox trigger, a Button) do the opposite and let the call site grow them.
+    "flex w-full text-ellipsis text-foreground",
+    controlStateColorTransition,
+    "placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal",
+    "focus:placeholder:opacity-70 motion-reduce:placeholder:transition-none",
+    // Native number spinners clip the pill; WebKit and Firefox need different selectors.
+    "[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none",
+    "[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none",
+    "[&[type=number]]:[appearance:textfield]",
+    // type="search": drop WebKit's native clear button so the DS owns the search chrome.
+    // Compose an <InputGroup> with an InputGroupButton to add a clear control.
+    "[&::-webkit-search-cancel-button]:appearance-none"
+  ),
+  {
+    variants: {
+      variant: {
+        default: cn(inputSurfaceAndFocusStyle, "rounded-full", sharedFormElementDisabledStyle),
+        unstyled: unstyledFormElementStyle
+      },
+      size: {
+        sm: cn(controlSizeClasses.sm, "px-[.75em]"),
+        md: cn(controlSizeClasses.md, "px-[.75em]"),
+        lg: cn(controlSizeClasses.lg, "px-[.85em]")
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function Input({ className, size, testId, variant, error, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      className: cn(inputVariants({ variant: resolveFieldVariant(variant), size }), fieldErrorRim, className),
+      "data-testid": testId,
+      ...deprecatedErrorAria(error),
+      ...props,
+      ...keepOwnAccessibleName(props)
+    }
+  );
+}
+
+export { Input as I };
+//# sourceMappingURL=input-vi0ICZHe.js.map

package/dist/input-vi0ICZHe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-vi0ICZHe.js","sources":["../src/ds/components/Input/input.tsx"],"sourcesContent":["import { Input as InputPrimitive } from '@base-ui/react/input';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { keepOwnAccessibleName } from '@/ds/components/Field/field-control-aria';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport {\n  deprecatedErrorAria,\n  fieldErrorRim,\n  inputSurfaceAndFocusStyle,\n  resolveFieldVariant,\n  sharedFormElementDisabledStyle,\n  unstyledFormElementStyle,\n} from '@/ds/primitives/form-element';\nimport type { DeprecatedFilledVariant } from '@/ds/primitives/form-element';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst inputVariants = cva(\n  cn(\n    // A text field is a block control: it fills its field. Content-sized controls (a\n    // Select or Combobox trigger, a Button) do the opposite and let the call site grow them.\n    'flex w-full text-ellipsis text-foreground',\n    controlStateColorTransition,\n    'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n    'focus:placeholder:opacity-70 motion-reduce:placeholder:transition-none',\n    // Native number spinners clip the pill; WebKit and Firefox need different selectors.\n    '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',\n    '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',\n    '[&[type=number]]:[appearance:textfield]',\n    // type=\"search\": drop WebKit's native clear button so the DS owns the search chrome.\n    // Compose an <InputGroup> with an InputGroupButton to add a clear control.\n    '[&::-webkit-search-cancel-button]:appearance-none',\n  ),\n  {\n    variants: {\n      variant: {\n        default: cn(inputSurfaceAndFocusStyle, 'rounded-full', sharedFormElementDisabledStyle),\n        unstyled: unstyledFormElementStyle,\n      },\n      size: {\n        sm: cn(controlSizeClasses.sm, 'px-[.75em]'),\n        md: cn(controlSizeClasses.md, 'px-[.75em]'),\n        lg: cn(controlSizeClasses.lg, 'px-[.85em]'),\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n);\n\nexport type InputProps = Omit<React.ComponentProps<'input'>, 'size'> &\n  Omit<VariantProps<typeof inputVariants>, 'variant'> & {\n    /** `filled` is a deprecated alias for `default`; both render the filled surface. */\n    variant?: VariantProps<typeof inputVariants>['variant'] | DeprecatedFilledVariant;\n    testId?: string;\n    /** @deprecated Wrap the control in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */\n    error?: boolean;\n  };\n\nfunction Input({ className, size, testId, variant, error, ...props }: InputProps) {\n  return (\n    <InputPrimitive\n      className={cn(inputVariants({ variant: resolveFieldVariant(variant), size }), fieldErrorRim, className)}\n      data-testid={testId}\n      {...deprecatedErrorAria(error)}\n      {...props}\n      {...keepOwnAccessibleName(props)}\n    />\n  );\n}\n\nexport { Input };\n"],"names":["InputPrimitive"],"mappings":";;;;;;;;;AAmBA,MAAM,aAAA,GAAgB,GAAA;AAAA,EACpB,EAAA;AAAA;AAAA;AAAA,IAGE,2CAAA;AAAA,IACA,2BAAA;AAAA,IACA,8FAAA;AAAA,IACA,wEAAA;AAAA;AAAA,IAEA,mFAAA;AAAA,IACA,mFAAA;AAAA,IACA,yCAAA;AAAA;AAAA;AAAA,IAGA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,EAAA,CAAG,yBAAA,EAA2B,cAAA,EAAgB,8BAA8B,CAAA;AAAA,QACrF,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,EAAA,CAAG,kBAAA,CAAmB,EAAA,EAAI,YAAY,CAAA;AAAA,QAC1C,EAAA,EAAI,EAAA,CAAG,kBAAA,CAAmB,EAAA,EAAI,YAAY,CAAA;AAAA,QAC1C,EAAA,EAAI,EAAA,CAAG,kBAAA,CAAmB,EAAA,EAAI,YAAY;AAAA;AAC5C,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAWA,SAAS,KAAA,CAAM,EAAE,SAAA,EAAW,IAAA,EAAM,QAAQ,OAAA,EAAS,KAAA,EAAO,GAAG,KAAA,EAAM,EAAe;AAChF,EAAA,uBACE,GAAA;AAAA,IAACA,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,aAAA,CAAc,EAAE,OAAA,EAAS,mBAAA,CAAoB,OAAO,CAAA,EAAG,IAAA,EAAM,CAAA,EAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MACtG,aAAA,EAAa,MAAA;AAAA,MACZ,GAAG,oBAAoB,KAAK,CAAA;AAAA,MAC5B,GAAG,KAAA;AAAA,MACH,GAAG,sBAAsB,KAAK;AAAA;AAAA,GACjC;AAEJ;;;;"}

package/dist/kbd-Btlcy-er.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+const sizeClasses = {
+  default: "h-6 min-w-6 rounded-md px-1.5 text-caption",
+  sm: "h-5 min-w-5 rounded-md px-1 text-meta",
+  xs: "h-4 min-w-4 rounded px-1 text-meta leading-none"
+};
+const Kbd = ({ children, size = "default", className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "kbd",
+    {
+      className: utils_cn.cn(
+        "inline-flex items-center justify-center bg-card font-mono text-foreground shadow-raised",
+        sizeClasses[size],
+        primitives_transitions.transitions.transform,
+        "active:scale-95 active:shadow-none",
+        className
+      ),
+      children
+    }
+  );
+};
+
+exports.Kbd = Kbd;
+//# sourceMappingURL=kbd-Btlcy-er.cjs.map

package/dist/kbd-Btlcy-er.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-Btlcy-er.cjs","sources":["../src/ds/components/Kbd/kbd.tsx"],"sourcesContent":["import { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type KbdProps = {\n  children: React.ReactNode;\n  size?: 'default' | 'sm' | 'xs';\n  className?: string;\n};\n\n// Fixed heights, not padding — `font-mono` normal leading varies per glyph set and desyncs the scale\nconst sizeClasses: Record<NonNullable<KbdProps['size']>, string> = {\n  default: 'h-6 min-w-6 rounded-md px-1.5 text-caption',\n  sm: 'h-5 min-w-5 rounded-md px-1 text-meta',\n  xs: 'h-4 min-w-4 rounded px-1 text-meta leading-none',\n};\n\nexport const Kbd = ({ children, size = 'default', className }: KbdProps) => {\n  return (\n    <kbd\n      className={cn(\n        'inline-flex items-center justify-center bg-card font-mono text-foreground shadow-raised',\n        sizeClasses[size],\n        transitions.transform,\n        'active:scale-95 active:shadow-none',\n        className,\n      )}\n    >\n      {children}\n    </kbd>\n  );\n};\n"],"names":["jsx","cn","transitions"],"mappings":";;;;;;AAUA,MAAM,WAAA,GAA6D;AAAA,EACjE,OAAA,EAAS,4CAAA;AAAA,EACT,EAAA,EAAI,uCAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,MAAM,CAAC,EAAE,UAAU,IAAA,GAAO,SAAA,EAAW,WAAU,KAAgB;AAC1E,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,yFAAA;AAAA,QACA,YAAY,IAAI,CAAA;AAAA,QAChBC,kCAAA,CAAY,SAAA;AAAA,QACZ,oCAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/kbd-DECuVAC9.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { transitions } from './primitives/transitions.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+const sizeClasses = {
+  default: "h-6 min-w-6 rounded-md px-1.5 text-caption",
+  sm: "h-5 min-w-5 rounded-md px-1 text-meta",
+  xs: "h-4 min-w-4 rounded px-1 text-meta leading-none"
+};
+const Kbd = ({ children, size = "default", className }) => {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: cn(
+        "inline-flex items-center justify-center bg-card font-mono text-foreground shadow-raised",
+        sizeClasses[size],
+        transitions.transform,
+        "active:scale-95 active:shadow-none",
+        className
+      ),
+      children
+    }
+  );
+};
+
+export { Kbd as K };
+//# sourceMappingURL=kbd-DECuVAC9.js.map

package/dist/kbd-DECuVAC9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-DECuVAC9.js","sources":["../src/ds/components/Kbd/kbd.tsx"],"sourcesContent":["import { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type KbdProps = {\n  children: React.ReactNode;\n  size?: 'default' | 'sm' | 'xs';\n  className?: string;\n};\n\n// Fixed heights, not padding — `font-mono` normal leading varies per glyph set and desyncs the scale\nconst sizeClasses: Record<NonNullable<KbdProps['size']>, string> = {\n  default: 'h-6 min-w-6 rounded-md px-1.5 text-caption',\n  sm: 'h-5 min-w-5 rounded-md px-1 text-meta',\n  xs: 'h-4 min-w-4 rounded px-1 text-meta leading-none',\n};\n\nexport const Kbd = ({ children, size = 'default', className }: KbdProps) => {\n  return (\n    <kbd\n      className={cn(\n        'inline-flex items-center justify-center bg-card font-mono text-foreground shadow-raised',\n        sizeClasses[size],\n        transitions.transform,\n        'active:scale-95 active:shadow-none',\n        className,\n      )}\n    >\n      {children}\n    </kbd>\n  );\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,WAAA,GAA6D;AAAA,EACjE,OAAA,EAAS,4CAAA;AAAA,EACT,EAAA,EAAI,uCAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,MAAM,CAAC,EAAE,UAAU,IAAA,GAAO,SAAA,EAAW,WAAU,KAAgB;AAC1E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,yFAAA;AAAA,QACA,YAAY,IAAI,CAAA;AAAA,QAChB,WAAA,CAAY,SAAA;AAAA,QACZ,oCAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/layout/tabbed-container.cjs.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 require('../tabbed-container.css');const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const combobox = require('../combobox-anmnqGB0.cjs');
-const dataList = require('../data-list-DQgIgmjy.cjs');
-const listSearch = require('../list-search-BiATHpQj.cjs');
-const tabsContent = require('../tabs-content-DfH1hhpU.cjs');
+const combobox = require('../combobox-C94lovBP.cjs');
+const dataList = require('../data-list-DLFiFrph.cjs');
+const listSearch = require('../list-search-BlgDm306.cjs');
+const tabsContent = require('../tabs-content-C3VQRDXH.cjs');
 const tabsContext = require('../tabs-context-pnspPkI-.cjs');
-const tabsList = require('../tabs-list-BeWntzEw.cjs');
-const tabsRoot = require('../tabs-root-Hkt7A6oq.cjs');
-const tabsTab = require('../tabs-tab-DhLs9bO0.cjs');
-const tooltip = require('../tooltip-DIZ5oqjV.cjs');
-const Txt = require('../Txt-DFPibRb3.cjs');
-const utils_cn = require('../cn-DG0X1KEP.cjs');
+const tabsList = require('../tabs-list-xikY_dug.cjs');
+const tabsRoot = require('../tabs-root-Phsi-P1b.cjs');
+const tabsTab = require('../tabs-tab-rYy3Vtvm.cjs');
+const tooltip = require('../tooltip-C4txPRSa.cjs');
+const Txt = require('../Txt-DXjXpX9r.cjs');
+const utils_cn = require('../cn-TqD01zH-.cjs');
 
 const TabbedContainerPanel = ({ value, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value, keepMounted: true, className: utils_cn.cn("min-h-0 flex-1", className), children });
 const TabbedContainerDataList = ({ value, columns, fit, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value, keepMounted: true, className: utils_cn.cn("tabbed-container-data-list min-h-0 flex-1", className), children: /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList, { columns, fit, variant: "light", className: "min-h-0 px-0 pb-0", children }) });

package/dist/layout/tabbed-container.es.js

@@ -1,17 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ListFilterIcon } from 'lucide-react';
 import { Children, isValidElement, useContext } from 'react';
-import { C as Combobox } from '../combobox-Dwf4U1CZ.js';
-import { D as DataList } from '../data-list-B6DT-u-0.js';
-import { L as ListSearch } from '../list-search-B9t_AAN5.js';
-import { T as TabContent } from '../tabs-content-OWF8un_n.js';
+import { C as Combobox } from '../combobox-Cm87oqoh.js';
+import { e as DataList } from '../data-list-D5XeKpNR.js';
+import { L as ListSearch } from '../list-search-CtuCqehq.js';
+import { T as TabContent } from '../tabs-content-6EaLEj8a.js';
 import { T as TabsContext } from '../tabs-context-Cbuw7i0u.js';
-import { T as TabList } from '../tabs-list-DoSX2xLL.js';
-import { T as Tabs } from '../tabs-root-BbzhUZl4.js';
-import { T as Tab } from '../tabs-tab-BI3hb-HP.js';
-import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-DsQPiynb.js';
-import { T as Txt } from '../Txt-CuuPO9Ho.js';
-import { c as cn } from '../cn-65Adrsfj.js';
+import { T as TabList } from '../tabs-list-DY_hziv7.js';
+import { T as Tabs } from '../tabs-root-CvGhdNKc.js';
+import { T as Tab } from '../tabs-tab-BvPKLjyo.js';
+import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-CCZcMbgy.js';
+import { T as Txt } from '../Txt-BuzYj7Vy.js';
+import { c as cn } from '../cn-coERSHz5.js';
 
 import '../tabbed-container.css';const TabbedContainerPanel = ({ value, children, className }) => /* @__PURE__ */ jsx(TabContent, { value, keepMounted: true, className: cn("min-h-0 flex-1", className), children });
 const TabbedContainerDataList = ({ value, columns, fit, children, className }) => /* @__PURE__ */ jsx(TabContent, { value, keepMounted: true, className: cn("tabbed-container-data-list min-h-0 flex-1", className), children: /* @__PURE__ */ jsx(DataList, { columns, fit, variant: "light", className: "min-h-0 px-0 pb-0", children }) });

package/dist/lib/form/components/array-element-wrapper.cjs.js

@@ -9,9 +9,9 @@ const reactHookForm = require('react-hook-form');
 const lib_form_fieldContext = require('../field-context.cjs.js');
 const lib_form_useSectionDisclosure = require('../use-section-disclosure.cjs.js');
 const lib_form_utils = require('../utils.cjs.js');
-const Button = require('../../../Button-CXhSUBxN.cjs');
-const collapsible = require('../../../collapsible-jfzzU7Gp.cjs');
-const Txt = require('../../../Txt-DFPibRb3.cjs');
+const Button = require('../../../Button-BTuu6_hv.cjs');
+const collapsible = require('../../../collapsible-BzlQAuym.cjs');
+const Txt = require('../../../Txt-DXjXpX9r.cjs');
 
 const HUMAN_SUMMARY_KEYS = ["title", "name", "label"];
 function firstFilledText(values) {

package/dist/lib/form/components/array-element-wrapper.es.js

@@ -5,9 +5,9 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { FieldPathContext, FormReadOnlyContext, ArrayAddButtonContext } from '../field-context.es.js';
 import { useSectionDisclosure } from '../use-section-disclosure.es.js';
 import { isPlainObject } from '../utils.es.js';
-import { B as Button } from '../../../Button-D43ghVKt.js';
-import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../../../collapsible-BNUn4644.js';
-import { T as Txt } from '../../../Txt-CuuPO9Ho.js';
+import { B as Button } from '../../../Button-D76HGlPP.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../../../collapsible-8h5KBZPX.js';
+import { T as Txt } from '../../../Txt-BuzYj7Vy.js';
 
 const HUMAN_SUMMARY_KEYS = ["title", "name", "label"];
 function firstFilledText(values) {

package/dist/lib/form/components/array-wrapper.cjs.js

@@ -6,8 +6,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const lib_form_fieldContext = require('../field-context.cjs.js');
-const Button = require('../../../Button-CXhSUBxN.cjs');
-const Txt = require('../../../Txt-DFPibRb3.cjs');
+const Button = require('../../../Button-BTuu6_hv.cjs');
+const Txt = require('../../../Txt-DXjXpX9r.cjs');
 
 function ArrayWrapper({ label, children, onAddItem }) {
   const readOnly = React.useContext(lib_form_fieldContext.FormReadOnlyContext);

package/dist/lib/form/components/array-wrapper.es.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Brackets, Plus } from 'lucide-react';
 import { useContext, Children, useRef } from 'react';
 import { FormReadOnlyContext, ArrayAddButtonContext } from '../field-context.es.js';
-import { B as Button } from '../../../Button-D43ghVKt.js';
-import { T as Txt } from '../../../Txt-CuuPO9Ho.js';
+import { B as Button } from '../../../Button-D76HGlPP.js';
+import { T as Txt } from '../../../Txt-BuzYj7Vy.js';
 
 function ArrayWrapper({ label, children, onAddItem }) {
   const readOnly = useContext(FormReadOnlyContext);

package/dist/lib/form/components/boolean-field.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const checkbox = require('../../../checkbox-Bkobte27.cjs');
-const field = require('../../../field-BkeKcz_6.cjs');
+const checkbox = require('../../../checkbox-DNlMGoJH.cjs');
+const field = require('../../../field-D1SVMPMz.cjs');
 require('../../../field-control-aria-WzMGs0A4.cjs');
 
 const BooleanField = ({ field: field$1, label, inputProps }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [

package/dist/lib/form/components/boolean-field.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { C as Checkbox } from '../../../checkbox-DcNIsz5L.js';
-import { e as FieldLabel } from '../../../field-BiMIiq2Y.js';
+import { C as Checkbox } from '../../../checkbox-mmR3rD2j.js';
+import { e as FieldLabel } from '../../../field-B89BEZg4.js';
 import '../../../field-control-aria-DB6y41tQ.js';
 
 const BooleanField = ({ field, label, inputProps }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [

package/dist/lib/form/components/date-field.cjs.js

@@ -6,12 +6,12 @@ const jsxRuntime = require('react/jsx-runtime');
 const dateFns = require('date-fns');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const Button = require('../../../Button-CXhSUBxN.cjs');
-const datePicker = require('../../../date-picker-dRZF8frf.cjs');
+const Button = require('../../../Button-BTuu6_hv.cjs');
+const datePicker = require('../../../date-picker-CoBCcoY4.cjs');
 const fieldControlAria = require('../../../field-control-aria-WzMGs0A4.cjs');
-const popover = require('../../../popover-lBqKiPtp.cjs');
+const popover = require('../../../popover-CWHYNPp8.cjs');
 const primitives_formElement = require('../../../primitives/form-element.cjs.js');
-const utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const utils_cn = require('../../../cn-TqD01zH-.cjs');
 
 const DateField = ({ inputProps, field }) => {
   const { key, ...props } = inputProps;

package/dist/lib/form/components/date-field.es.js

@@ -2,12 +2,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { isValid, format } from 'date-fns';
 import { CalendarIcon, X } from 'lucide-react';
 import { useState, useEffect } from 'react';
-import { B as Button } from '../../../Button-D43ghVKt.js';
-import { D as DatePicker } from '../../../date-picker-DgWTsiJ7.js';
+import { B as Button } from '../../../Button-D76HGlPP.js';
+import { D as DatePicker } from '../../../date-picker-BN8OEPyr.js';
 import { u as useFieldControlAria } from '../../../field-control-aria-DB6y41tQ.js';
-import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../../../popover-Dg70UGyn.js';
+import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../../../popover-Jf2UUdQ1.js';
 import { fieldTriggerErrorBorder } from '../../../primitives/form-element.es.js';
-import { c as cn } from '../../../cn-65Adrsfj.js';
+import { c as cn } from '../../../cn-coERSHz5.js';
 
 const DateField = ({ inputProps, field }) => {
   const { key, ...props } = inputProps;

package/dist/lib/form/components/error-message.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Notice = require('../../../Notice-CjQQjfK7.cjs');
+const Notice = require('../../../Notice-c8dMiAtZ.cjs');
 
 const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice, { variant: "destructive", title: error });
 

package/dist/lib/form/components/error-message.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { N as Notice } from '../../../Notice-CmFkTliT.js';
+import { N as Notice } from '../../../Notice-Wy1grdLu.js';
 
 const ErrorMessage = ({ error }) => /* @__PURE__ */ jsx(Notice, { variant: "destructive", title: error });
 

package/dist/lib/form/components/field-wrapper.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const field = require('../../../field-BkeKcz_6.cjs');
+const field = require('../../../field-D1SVMPMz.cjs');
 require('../../../field-control-aria-WzMGs0A4.cjs');
 
 const GROUP_TYPES = ["object", "array"];
@@ -31,7 +31,8 @@ const FieldWrapper = ({ label, children, field: field$1, error }) => {
   }
   const rendersOwnLabel = field$1.type === "boolean";
   return /* @__PURE__ */ jsxRuntime.jsxs(field.Field, { invalid: Boolean(error), className: "pb-4 last:pb-0", children: [
-    !rendersOwnLabel && /* @__PURE__ */ jsxRuntime.jsx(field.FieldLabel, { required: field$1.required, children: label }),
+    !rendersOwnLabel && // A block label keeps the required asterisk right after the text when a long label wraps.
+    /* @__PURE__ */ jsxRuntime.jsx(field.FieldLabel, { required: field$1.required, className: "block", children: label }),
     children,
     description && /* @__PURE__ */ jsxRuntime.jsx(field.FieldDescription, { children: description }),
     /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { children: error })

package/dist/lib/form/components/field-wrapper.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-wrapper.cjs.js","sources":["../../../../src/lib/form/components/field-wrapper.tsx"],"sourcesContent":["import type { FieldWrapperProps } from '@autoform/react';\nimport React from 'react';\nimport { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from '@/ds/components/Field';\n\nconst GROUP_TYPES = ['object', 'array'];\n\nfunction GroupFooter({ description, error }: { description?: React.ReactNode; error?: string }) {\n  if (!description && !error) return null;\n  return (\n    <Field invalid={Boolean(error)}>\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n}\n\nexport const FieldWrapper: React.FC<FieldWrapperProps> = ({ label, children, field, error }) => {\n  const description = field.fieldConfig?.description;\n\n  if (field.type === 'record') {\n    return (\n      <Fieldset className=\"gap-2 pb-4 last:pb-0\">\n        <FieldsetLegend required={field.required}>{label}</FieldsetLegend>\n        {children}\n        <GroupFooter description={description} error={error} />\n      </Fieldset>\n    );\n  }\n\n  if (GROUP_TYPES.includes(field.type)) {\n    return (\n      <div className=\"pb-4 last:pb-0\">\n        {children}\n        <GroupFooter description={description} error={error} />\n      </div>\n    );\n  }\n\n  const rendersOwnLabel = field.type === 'boolean';\n\n  return (\n    <Field invalid={Boolean(error)} className=\"pb-4 last:pb-0\">\n      {!rendersOwnLabel && <FieldLabel required={field.required}>{label}</FieldLabel>}\n\n      {children}\n\n      {description && <FieldDescription>{description}</FieldDescription>}\n\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n};\n"],"names":["jsxs","Field","jsx","FieldDescription","FieldError","field","Fieldset","FieldsetLegend","FieldLabel"],"mappings":";;;;;;;;AAIA,MAAM,WAAA,GAAc,CAAC,QAAA,EAAU,OAAO,CAAA;AAEtC,SAAS,WAAA,CAAY,EAAE,WAAA,EAAa,KAAA,EAAM,EAAsD;AAC9F,EAAA,IAAI,CAAC,WAAA,IAAe,CAAC,KAAA,EAAO,OAAO,IAAA;AACnC,EAAA,uBACEA,eAAA,CAACC,WAAA,EAAA,EAAM,OAAA,EAAS,OAAA,CAAQ,KAAK,CAAA,EAC1B,QAAA,EAAA;AAAA,IAAA,WAAA,oBAAeC,cAAA,CAACC,0BAAkB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAC/CD,cAAA,CAACE,oBAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACrB,CAAA;AAEJ;AAEO,MAAM,eAA4C,CAAC,EAAE,OAAO,QAAA,SAAUC,OAAA,EAAO,OAAM,KAAM;AAC9F,EAAA,MAAM,WAAA,GAAcA,QAAM,WAAA,EAAa,WAAA;AAEvC,EAAA,IAAIA,OAAA,CAAM,SAAS,QAAA,EAAU;AAC3B,IAAA,uBACEL,eAAA,CAACM,cAAA,EAAA,EAAS,SAAA,EAAU,sBAAA,EAClB,QAAA,EAAA;AAAA,sBAAAJ,cAAA,CAACK,oBAAA,EAAA,EAAe,QAAA,EAAUF,OAAA,CAAM,QAAA,EAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAChD,QAAA;AAAA,sBACDH,cAAA,CAAC,WAAA,EAAA,EAAY,WAAA,EAA0B,KAAA,EAAc;AAAA,KAAA,EACvD,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,WAAA,CAAY,QAAA,CAASG,OAAA,CAAM,IAAI,CAAA,EAAG;AACpC,IAAA,uBACEL,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACDE,cAAA,CAAC,WAAA,EAAA,EAAY,WAAA,EAA0B,KAAA,EAAc;AAAA,KAAA,EACvD,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,eAAA,GAAkBG,QAAM,IAAA,KAAS,SAAA;AAEvC,EAAA,uCACGJ,WAAA,EAAA,EAAM,OAAA,EAAS,QAAQ,KAAK,CAAA,EAAG,WAAU,gBAAA,EACvC,QAAA,EAAA;AAAA,IAAA,CAAC,mCAAmBC,cAAA,CAACM,gBAAA,EAAA,EAAW,QAAA,EAAUH,OAAA,CAAM,UAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAEjE,QAAA;AAAA,IAEA,WAAA,oBAAeH,cAAA,CAACC,sBAAA,EAAA,EAAkB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAE/CD,cAAA,CAACE,oBAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACrB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"field-wrapper.cjs.js","sources":["../../../../src/lib/form/components/field-wrapper.tsx"],"sourcesContent":["import type { FieldWrapperProps } from '@autoform/react';\nimport React from 'react';\nimport { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from '@/ds/components/Field';\n\nconst GROUP_TYPES = ['object', 'array'];\n\nfunction GroupFooter({ description, error }: { description?: React.ReactNode; error?: string }) {\n  if (!description && !error) return null;\n  return (\n    <Field invalid={Boolean(error)}>\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n}\n\nexport const FieldWrapper: React.FC<FieldWrapperProps> = ({ label, children, field, error }) => {\n  const description = field.fieldConfig?.description;\n\n  if (field.type === 'record') {\n    return (\n      <Fieldset className=\"gap-2 pb-4 last:pb-0\">\n        <FieldsetLegend required={field.required}>{label}</FieldsetLegend>\n        {children}\n        <GroupFooter description={description} error={error} />\n      </Fieldset>\n    );\n  }\n\n  if (GROUP_TYPES.includes(field.type)) {\n    return (\n      <div className=\"pb-4 last:pb-0\">\n        {children}\n        <GroupFooter description={description} error={error} />\n      </div>\n    );\n  }\n\n  const rendersOwnLabel = field.type === 'boolean';\n\n  return (\n    <Field invalid={Boolean(error)} className=\"pb-4 last:pb-0\">\n      {!rendersOwnLabel && (\n        // A block label keeps the required asterisk right after the text when a long label wraps.\n        <FieldLabel required={field.required} className=\"block\">\n          {label}\n        </FieldLabel>\n      )}\n\n      {children}\n\n      {description && <FieldDescription>{description}</FieldDescription>}\n\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n};\n"],"names":["jsxs","Field","jsx","FieldDescription","FieldError","field","Fieldset","FieldsetLegend","FieldLabel"],"mappings":";;;;;;;;AAIA,MAAM,WAAA,GAAc,CAAC,QAAA,EAAU,OAAO,CAAA;AAEtC,SAAS,WAAA,CAAY,EAAE,WAAA,EAAa,KAAA,EAAM,EAAsD;AAC9F,EAAA,IAAI,CAAC,WAAA,IAAe,CAAC,KAAA,EAAO,OAAO,IAAA;AACnC,EAAA,uBACEA,eAAA,CAACC,WAAA,EAAA,EAAM,OAAA,EAAS,OAAA,CAAQ,KAAK,CAAA,EAC1B,QAAA,EAAA;AAAA,IAAA,WAAA,oBAAeC,cAAA,CAACC,0BAAkB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAC/CD,cAAA,CAACE,oBAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACrB,CAAA;AAEJ;AAEO,MAAM,eAA4C,CAAC,EAAE,OAAO,QAAA,SAAUC,OAAA,EAAO,OAAM,KAAM;AAC9F,EAAA,MAAM,WAAA,GAAcA,QAAM,WAAA,EAAa,WAAA;AAEvC,EAAA,IAAIA,OAAA,CAAM,SAAS,QAAA,EAAU;AAC3B,IAAA,uBACEL,eAAA,CAACM,cAAA,EAAA,EAAS,SAAA,EAAU,sBAAA,EAClB,QAAA,EAAA;AAAA,sBAAAJ,cAAA,CAACK,oBAAA,EAAA,EAAe,QAAA,EAAUF,OAAA,CAAM,QAAA,EAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAChD,QAAA;AAAA,sBACDH,cAAA,CAAC,WAAA,EAAA,EAAY,WAAA,EAA0B,KAAA,EAAc;AAAA,KAAA,EACvD,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,WAAA,CAAY,QAAA,CAASG,OAAA,CAAM,IAAI,CAAA,EAAG;AACpC,IAAA,uBACEL,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACDE,cAAA,CAAC,WAAA,EAAA,EAAY,WAAA,EAA0B,KAAA,EAAc;AAAA,KAAA,EACvD,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,eAAA,GAAkBG,QAAM,IAAA,KAAS,SAAA;AAEvC,EAAA,uCACGJ,WAAA,EAAA,EAAM,OAAA,EAAS,QAAQ,KAAK,CAAA,EAAG,WAAU,gBAAA,EACvC,QAAA,EAAA;AAAA,IAAA,CAAC,eAAA;AAAA,mCAECO,gBAAA,EAAA,EAAW,QAAA,EAAUH,QAAM,QAAA,EAAU,SAAA,EAAU,SAC7C,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IAGD,QAAA;AAAA,IAEA,WAAA,oBAAeH,cAAA,CAACC,sBAAA,EAAA,EAAkB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAE/CD,cAAA,CAACE,oBAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACrB,CAAA;AAEJ;;;;"}