@mastra/playground-ui 60.1.0 → 60.2.0-alpha.0

package/dist/field-control-aria-DB6y41tQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-control-aria-DB6y41tQ.js","sources":["../src/ds/components/Field/field-control-aria.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type FieldAriaIds = {\n  labelId: string;\n  descriptionId: string;\n  errorId: string;\n  controlId: string;\n  invalid: boolean;\n  hasDescription: boolean;\n  setHasDescription: (hasDescription: boolean) => void;\n};\n\nexport type ControlNameProps = {\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n};\n\nexport const FieldAriaContext = createContext<FieldAriaIds | null>(null);\n\nexport function useFieldAriaIds() {\n  return useContext(FieldAriaContext);\n}\n\nexport function hasOwnAccessibleName({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: ControlNameProps) {\n  return Boolean(ariaLabel) && ariaLabelledBy === undefined;\n}\n\nexport function keepOwnAccessibleName(nameProps: ControlNameProps): { 'aria-labelledby'?: undefined } {\n  return hasOwnAccessibleName(nameProps) ? { 'aria-labelledby': undefined } : {};\n}\n\n// Base UI controls are wired by the Field; only non-Base-UI controls (CodeMirror) need this.\nexport function useFieldControlAria(nameProps: ControlNameProps = {}) {\n  const field = useFieldAriaIds();\n  if (!field) return {};\n  const describedByIds = [field.hasDescription && field.descriptionId, field.invalid && field.errorId].filter(Boolean);\n  return {\n    id: field.controlId,\n    'aria-labelledby': hasOwnAccessibleName(nameProps) ? undefined : field.labelId,\n    'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,\n    'aria-invalid': field.invalid || undefined,\n  };\n}\n"],"names":[],"mappings":";;AAiBO,MAAM,gBAAA,GAAmB,cAAmC,IAAI;AAEhE,SAAS,eAAA,GAAkB;AAChC,EAAA,OAAO,WAAW,gBAAgB,CAAA;AACpC;AAEO,SAAS,qBAAqB,EAAE,YAAA,EAAc,SAAA,EAAW,iBAAA,EAAmB,gBAAe,EAAqB;AACrH,EAAA,OAAO,OAAA,CAAQ,SAAS,CAAA,IAAK,cAAA,KAAmB,MAAA;AAClD;AAEO,SAAS,sBAAsB,SAAA,EAAgE;AACpG,EAAA,OAAO,qBAAqB,SAAS,CAAA,GAAI,EAAE,iBAAA,EAAmB,MAAA,KAAc,EAAC;AAC/E;AAGO,SAAS,mBAAA,CAAoB,SAAA,GAA8B,EAAC,EAAG;AACpE,EAAA,MAAM,QAAQ,eAAA,EAAgB;AAC9B,EAAA,IAAI,CAAC,KAAA,EAAO,OAAO,EAAC;AACpB,EAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,CAAM,cAAA,IAAkB,KAAA,CAAM,aAAA,EAAe,KAAA,CAAM,OAAA,IAAW,KAAA,CAAM,OAAO,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA;AACnH,EAAA,OAAO;AAAA,IACL,IAAI,KAAA,CAAM,SAAA;AAAA,IACV,iBAAA,EAAmB,oBAAA,CAAqB,SAAS,CAAA,GAAI,SAAY,KAAA,CAAM,OAAA;AAAA,IACvE,oBAAoB,cAAA,CAAe,MAAA,GAAS,IAAI,cAAA,CAAe,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AAAA,IAC3E,cAAA,EAAgB,MAAM,OAAA,IAAW;AAAA,GACnC;AACF;;;;"}

package/dist/field-control-aria-WzMGs0A4.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+const React = require('react');
+
+const FieldAriaContext = React.createContext(null);
+function useFieldAriaIds() {
+  return React.useContext(FieldAriaContext);
+}
+function hasOwnAccessibleName({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) {
+  return Boolean(ariaLabel) && ariaLabelledBy === void 0;
+}
+function keepOwnAccessibleName(nameProps) {
+  return hasOwnAccessibleName(nameProps) ? { "aria-labelledby": void 0 } : {};
+}
+function useFieldControlAria(nameProps = {}) {
+  const field = useFieldAriaIds();
+  if (!field) return {};
+  const describedByIds = [field.hasDescription && field.descriptionId, field.invalid && field.errorId].filter(Boolean);
+  return {
+    id: field.controlId,
+    "aria-labelledby": hasOwnAccessibleName(nameProps) ? void 0 : field.labelId,
+    "aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
+    "aria-invalid": field.invalid || void 0
+  };
+}
+
+exports.FieldAriaContext = FieldAriaContext;
+exports.keepOwnAccessibleName = keepOwnAccessibleName;
+exports.useFieldAriaIds = useFieldAriaIds;
+exports.useFieldControlAria = useFieldControlAria;
+//# sourceMappingURL=field-control-aria-WzMGs0A4.cjs.map

package/dist/field-control-aria-WzMGs0A4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-control-aria-WzMGs0A4.cjs","sources":["../src/ds/components/Field/field-control-aria.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type FieldAriaIds = {\n  labelId: string;\n  descriptionId: string;\n  errorId: string;\n  controlId: string;\n  invalid: boolean;\n  hasDescription: boolean;\n  setHasDescription: (hasDescription: boolean) => void;\n};\n\nexport type ControlNameProps = {\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n};\n\nexport const FieldAriaContext = createContext<FieldAriaIds | null>(null);\n\nexport function useFieldAriaIds() {\n  return useContext(FieldAriaContext);\n}\n\nexport function hasOwnAccessibleName({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: ControlNameProps) {\n  return Boolean(ariaLabel) && ariaLabelledBy === undefined;\n}\n\nexport function keepOwnAccessibleName(nameProps: ControlNameProps): { 'aria-labelledby'?: undefined } {\n  return hasOwnAccessibleName(nameProps) ? { 'aria-labelledby': undefined } : {};\n}\n\n// Base UI controls are wired by the Field; only non-Base-UI controls (CodeMirror) need this.\nexport function useFieldControlAria(nameProps: ControlNameProps = {}) {\n  const field = useFieldAriaIds();\n  if (!field) return {};\n  const describedByIds = [field.hasDescription && field.descriptionId, field.invalid && field.errorId].filter(Boolean);\n  return {\n    id: field.controlId,\n    'aria-labelledby': hasOwnAccessibleName(nameProps) ? undefined : field.labelId,\n    'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,\n    'aria-invalid': field.invalid || undefined,\n  };\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAiBO,MAAM,gBAAA,GAAmBA,oBAAmC,IAAI;AAEhE,SAAS,eAAA,GAAkB;AAChC,EAAA,OAAOC,iBAAW,gBAAgB,CAAA;AACpC;AAEO,SAAS,qBAAqB,EAAE,YAAA,EAAc,SAAA,EAAW,iBAAA,EAAmB,gBAAe,EAAqB;AACrH,EAAA,OAAO,OAAA,CAAQ,SAAS,CAAA,IAAK,cAAA,KAAmB,MAAA;AAClD;AAEO,SAAS,sBAAsB,SAAA,EAAgE;AACpG,EAAA,OAAO,qBAAqB,SAAS,CAAA,GAAI,EAAE,iBAAA,EAAmB,MAAA,KAAc,EAAC;AAC/E;AAGO,SAAS,mBAAA,CAAoB,SAAA,GAA8B,EAAC,EAAG;AACpE,EAAA,MAAM,QAAQ,eAAA,EAAgB;AAC9B,EAAA,IAAI,CAAC,KAAA,EAAO,OAAO,EAAC;AACpB,EAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,CAAM,cAAA,IAAkB,KAAA,CAAM,aAAA,EAAe,KAAA,CAAM,OAAA,IAAW,KAAA,CAAM,OAAO,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA;AACnH,EAAA,OAAO;AAAA,IACL,IAAI,KAAA,CAAM,SAAA;AAAA,IACV,iBAAA,EAAmB,oBAAA,CAAqB,SAAS,CAAA,GAAI,SAAY,KAAA,CAAM,OAAA;AAAA,IACvE,oBAAoB,cAAA,CAAe,MAAA,GAAS,IAAI,cAAA,CAAe,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AAAA,IAC3E,cAAA,EAAgB,MAAM,OAAA,IAAW;AAAA,GACnC;AACF;;;;;;;"}

package/dist/{field-block-DtaPqBa3.cjs → field-error-id-4DYu4KZ2.cjs}

@@ -2,13 +2,30 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const utils_cn = require('./cn-DG0X1KEP.cjs');
-const fieldBlockErrorMsg = require('./field-block-error-msg-CkhEN6nU.cjs');
+const lucideReact = require('lucide-react');
 const Txt = require('./Txt-DPmEpNbp.cjs');
+const icons_Icon = require('./icons/Icon.cjs.js');
 
 function FieldBlockColumn({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid gap-2 text-foreground", className), children });
 }
 
+function FieldBlockErrorMsg({ children, name, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Txt.Txt,
+    {
+      variant: "caption",
+      role: "alert",
+      id: name !== void 0 ? `error-${name}` : void 0,
+      className: utils_cn.cn("flex gap-1 text-destructive-foreground", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", className: "mt-0.75 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlertIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+      ]
+    }
+  );
+}
+
 function FieldBlockHelpText({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", tone: "muted", children });
 }
@@ -76,7 +93,7 @@ function FieldBlockLayout({
 }
 
 function FieldBlockMessage({ name, helpText, errorMsg }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[1lh] min-w-0 overflow-hidden text-caption [&>p]:truncate", children: errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlockErrorMsg.FieldBlockErrorMsg, { name, className: "truncate", children: errorMsg }) : helpText ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlockHelpText, { children: helpText }) : null });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[1lh] min-w-0 overflow-hidden text-caption [&>p]:truncate", children: errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlockErrorMsg, { name, className: "truncate", children: errorMsg }) : helpText ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlockHelpText, { children: helpText }) : null });
 }
 
 const FieldBlock = Object.assign(
@@ -86,10 +103,13 @@ const FieldBlock = Object.assign(
     Column: FieldBlockColumn,
     Label: FieldBlockLabel,
     HelpText: FieldBlockHelpText,
-    ErrorMsg: fieldBlockErrorMsg.FieldBlockErrorMsg,
+    ErrorMsg: FieldBlockErrorMsg,
     Message: FieldBlockMessage
   }
 );
 
+const fieldErrorId = (name) => `error-${name}`;
+
 exports.FieldBlock = FieldBlock;
-//# sourceMappingURL=field-block-DtaPqBa3.cjs.map
+exports.fieldErrorId = fieldErrorId;
+//# sourceMappingURL=field-error-id-4DYu4KZ2.cjs.map

package/dist/field-error-id-4DYu4KZ2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-error-id-4DYu4KZ2.cjs","sources":["../src/ds/components/FormFieldBlocks/block/field-block-column.tsx","../src/ds/components/FormFieldBlocks/block/field-block-error-msg.tsx","../src/ds/components/FormFieldBlocks/block/field-block-help-text.tsx","../src/ds/components/FormFieldBlocks/block/field-block-label.tsx","../src/ds/components/FormFieldBlocks/block/field-block-layout.tsx","../src/ds/components/FormFieldBlocks/block/field-block-message.tsx","../src/ds/components/FormFieldBlocks/block/field-block.tsx","../src/ds/components/FormFieldBlocks/block/field-error-id.ts"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type FieldBlockColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function FieldBlockColumn({ children, className }: FieldBlockColumnProps) {\n  return <div className={cn('grid gap-2 text-foreground', className)}>{children}</div>;\n}\n","import { CircleAlertIcon } from 'lucide-react';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { cn } from '@/lib/utils';\n\nexport type FieldBlockErrorMsgProps = {\n  children?: React.ReactNode;\n  /**\n   * The field this message belongs to, matching the `name` given to `FieldBlock.Label`.\n   * Sets a stable `error-<name>` id so the control can point at it with\n   * `aria-describedby` and a screen reader reads the message with the field.\n   */\n  name?: string;\n  className?: string;\n};\n\nexport function FieldBlockErrorMsg({ children, name, className }: FieldBlockErrorMsgProps) {\n  return (\n    <Txt\n      variant=\"caption\"\n      // `role=\"alert\"` lives here rather than in a wrapper at every call site, so an\n      // error announces itself wherever it is used instead of depending on each caller\n      // remembering to wrap it.\n      role=\"alert\"\n      id={name !== undefined ? `error-${name}` : undefined}\n      className={cn('flex gap-1 text-destructive-foreground', className)}\n    >\n      <Icon size=\"xs\" className=\"mt-0.75 shrink-0\" aria-hidden>\n        <CircleAlertIcon />\n      </Icon>\n      <span>{children}</span>\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nexport type FieldBlockHelpTextProps = {\n  children?: React.ReactNode;\n};\n\nexport function FieldBlockHelpText({ children }: FieldBlockHelpTextProps) {\n  return (\n    <Txt variant=\"caption\" tone=\"muted\">\n      {children}\n    </Txt>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockLabelProps = {\n  children: React.ReactNode;\n  name: string;\n  htmlFor?: string;\n  required?: boolean;\n  disabled?: boolean;\n  size?: 'default' | 'bigger';\n  className?: string;\n};\n\nexport function FieldBlockLabel({\n  children,\n  name,\n  htmlFor = `input-${name}`,\n  required,\n  disabled = false,\n  size = 'default',\n  className,\n}: FieldBlockLabelProps) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(\n        'inline-flex items-center text-label',\n        {\n          'text-body': size === 'bigger',\n          'text-foreground': !disabled,\n          'text-muted-foreground': disabled,\n        },\n        className,\n      )}\n    >\n      {children}\n      {required ? (\n        <>\n          <span\n            aria-hidden\n            className={cn('ml-0.5', disabled ? 'text-muted-foreground' : 'text-destructive-foreground')}\n          >\n            *\n          </span>\n          <span className=\"sr-only\"> (required)</span>\n        </>\n      ) : null}\n    </label>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockLayoutProps = {\n  children: React.ReactNode;\n  className?: string;\n  layout?: 'vertical' | 'horizontal';\n  // Optional prop to specify label column width in horizontal layout\n  labelColumnWidth?: string; // e.g., '150px' or '30%'\n};\n\nexport function FieldBlockLayout({\n  children,\n  className,\n  layout = 'vertical',\n  labelColumnWidth,\n}: FieldBlockLayoutProps) {\n  return (\n    <div\n      className={cn(\n        'relative grid gap-2 text-foreground',\n        {\n          'horizontal-field-block grid-cols-[auto_1fr] items-baseline': layout === 'horizontal',\n        },\n        className,\n      )}\n      style={\n        layout === 'horizontal' && labelColumnWidth ? { gridTemplateColumns: `${labelColumnWidth} 1fr` } : undefined\n      }\n    >\n      {children}\n    </div>\n  );\n}\n","import { FieldBlockErrorMsg } from './field-block-error-msg';\nimport { FieldBlockHelpText } from './field-block-help-text';\n\nexport type FieldBlockMessageProps = {\n  name: string;\n  helpText?: React.ReactNode;\n  errorMsg?: React.ReactNode;\n};\n\nexport function FieldBlockMessage({ name, helpText, errorMsg }: FieldBlockMessageProps) {\n  return (\n    <div className=\"h-[1lh] min-w-0 overflow-hidden text-caption [&>p]:truncate\">\n      {errorMsg ? (\n        <FieldBlockErrorMsg name={name} className=\"truncate\">\n          {errorMsg}\n        </FieldBlockErrorMsg>\n      ) : helpText ? (\n        <FieldBlockHelpText>{helpText}</FieldBlockHelpText>\n      ) : null}\n    </div>\n  );\n}\n","import { FieldBlockColumn } from './field-block-column';\nimport { FieldBlockErrorMsg } from './field-block-error-msg';\nimport { FieldBlockHelpText } from './field-block-help-text';\nimport { FieldBlockLabel } from './field-block-label';\nimport { FieldBlockLayout } from './field-block-layout';\nimport { FieldBlockMessage } from './field-block-message';\n\n/** @deprecated Use `Field` with `FieldLabel`, `FieldDescription` and `FieldError`. */\nexport const FieldBlock = Object.assign(\n  {},\n  {\n    Layout: FieldBlockLayout,\n    Column: FieldBlockColumn,\n    Label: FieldBlockLabel,\n    HelpText: FieldBlockHelpText,\n    ErrorMsg: FieldBlockErrorMsg,\n    Message: FieldBlockMessage,\n  },\n);\n","/** @deprecated Wrap the control in a `Field`: `FieldError` links itself to the control. */\nexport const fieldErrorId = (name: string) => `error-${name}`;\n"],"names":["cn","jsxs","Txt","jsx","Icon","CircleAlertIcon","Fragment"],"mappings":"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"}

package/dist/{field-block--PeppIRb.js → field-error-id-BSQLcfHo.js}

@@ -1,12 +1,29 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { c as cn } from './cn-65Adrsfj.js';
-import { F as FieldBlockErrorMsg } from './field-block-error-msg-LXwhKzIq.js';
+import { CircleAlertIcon } from 'lucide-react';
 import { T as Txt } from './Txt-BP1SRHmL.js';
+import { Icon } from './icons/Icon.es.js';
 
 function FieldBlockColumn({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("grid gap-2 text-foreground", className), children });
 }
 
+function FieldBlockErrorMsg({ children, name, className }) {
+  return /* @__PURE__ */ jsxs(
+    Txt,
+    {
+      variant: "caption",
+      role: "alert",
+      id: name !== void 0 ? `error-${name}` : void 0,
+      className: cn("flex gap-1 text-destructive-foreground", className),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { size: "xs", className: "mt-0.75 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsx(CircleAlertIcon, {}) }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+}
+
 function FieldBlockHelpText({ children }) {
   return /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "muted", children });
 }
@@ -89,5 +106,7 @@ const FieldBlock = Object.assign(
   }
 );
 
-export { FieldBlock as F };
-//# sourceMappingURL=field-block--PeppIRb.js.map
+const fieldErrorId = (name) => `error-${name}`;
+
+export { FieldBlock as F, fieldErrorId as f };
+//# sourceMappingURL=field-error-id-BSQLcfHo.js.map

package/dist/field-error-id-BSQLcfHo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-error-id-BSQLcfHo.js","sources":["../src/ds/components/FormFieldBlocks/block/field-block-column.tsx","../src/ds/components/FormFieldBlocks/block/field-block-error-msg.tsx","../src/ds/components/FormFieldBlocks/block/field-block-help-text.tsx","../src/ds/components/FormFieldBlocks/block/field-block-label.tsx","../src/ds/components/FormFieldBlocks/block/field-block-layout.tsx","../src/ds/components/FormFieldBlocks/block/field-block-message.tsx","../src/ds/components/FormFieldBlocks/block/field-block.tsx","../src/ds/components/FormFieldBlocks/block/field-error-id.ts"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type FieldBlockColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function FieldBlockColumn({ children, className }: FieldBlockColumnProps) {\n  return <div className={cn('grid gap-2 text-foreground', className)}>{children}</div>;\n}\n","import { CircleAlertIcon } from 'lucide-react';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { cn } from '@/lib/utils';\n\nexport type FieldBlockErrorMsgProps = {\n  children?: React.ReactNode;\n  /**\n   * The field this message belongs to, matching the `name` given to `FieldBlock.Label`.\n   * Sets a stable `error-<name>` id so the control can point at it with\n   * `aria-describedby` and a screen reader reads the message with the field.\n   */\n  name?: string;\n  className?: string;\n};\n\nexport function FieldBlockErrorMsg({ children, name, className }: FieldBlockErrorMsgProps) {\n  return (\n    <Txt\n      variant=\"caption\"\n      // `role=\"alert\"` lives here rather than in a wrapper at every call site, so an\n      // error announces itself wherever it is used instead of depending on each caller\n      // remembering to wrap it.\n      role=\"alert\"\n      id={name !== undefined ? `error-${name}` : undefined}\n      className={cn('flex gap-1 text-destructive-foreground', className)}\n    >\n      <Icon size=\"xs\" className=\"mt-0.75 shrink-0\" aria-hidden>\n        <CircleAlertIcon />\n      </Icon>\n      <span>{children}</span>\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nexport type FieldBlockHelpTextProps = {\n  children?: React.ReactNode;\n};\n\nexport function FieldBlockHelpText({ children }: FieldBlockHelpTextProps) {\n  return (\n    <Txt variant=\"caption\" tone=\"muted\">\n      {children}\n    </Txt>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockLabelProps = {\n  children: React.ReactNode;\n  name: string;\n  htmlFor?: string;\n  required?: boolean;\n  disabled?: boolean;\n  size?: 'default' | 'bigger';\n  className?: string;\n};\n\nexport function FieldBlockLabel({\n  children,\n  name,\n  htmlFor = `input-${name}`,\n  required,\n  disabled = false,\n  size = 'default',\n  className,\n}: FieldBlockLabelProps) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(\n        'inline-flex items-center text-label',\n        {\n          'text-body': size === 'bigger',\n          'text-foreground': !disabled,\n          'text-muted-foreground': disabled,\n        },\n        className,\n      )}\n    >\n      {children}\n      {required ? (\n        <>\n          <span\n            aria-hidden\n            className={cn('ml-0.5', disabled ? 'text-muted-foreground' : 'text-destructive-foreground')}\n          >\n            *\n          </span>\n          <span className=\"sr-only\"> (required)</span>\n        </>\n      ) : null}\n    </label>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockLayoutProps = {\n  children: React.ReactNode;\n  className?: string;\n  layout?: 'vertical' | 'horizontal';\n  // Optional prop to specify label column width in horizontal layout\n  labelColumnWidth?: string; // e.g., '150px' or '30%'\n};\n\nexport function FieldBlockLayout({\n  children,\n  className,\n  layout = 'vertical',\n  labelColumnWidth,\n}: FieldBlockLayoutProps) {\n  return (\n    <div\n      className={cn(\n        'relative grid gap-2 text-foreground',\n        {\n          'horizontal-field-block grid-cols-[auto_1fr] items-baseline': layout === 'horizontal',\n        },\n        className,\n      )}\n      style={\n        layout === 'horizontal' && labelColumnWidth ? { gridTemplateColumns: `${labelColumnWidth} 1fr` } : undefined\n      }\n    >\n      {children}\n    </div>\n  );\n}\n","import { FieldBlockErrorMsg } from './field-block-error-msg';\nimport { FieldBlockHelpText } from './field-block-help-text';\n\nexport type FieldBlockMessageProps = {\n  name: string;\n  helpText?: React.ReactNode;\n  errorMsg?: React.ReactNode;\n};\n\nexport function FieldBlockMessage({ name, helpText, errorMsg }: FieldBlockMessageProps) {\n  return (\n    <div className=\"h-[1lh] min-w-0 overflow-hidden text-caption [&>p]:truncate\">\n      {errorMsg ? (\n        <FieldBlockErrorMsg name={name} className=\"truncate\">\n          {errorMsg}\n        </FieldBlockErrorMsg>\n      ) : helpText ? (\n        <FieldBlockHelpText>{helpText}</FieldBlockHelpText>\n      ) : null}\n    </div>\n  );\n}\n","import { FieldBlockColumn } from './field-block-column';\nimport { FieldBlockErrorMsg } from './field-block-error-msg';\nimport { FieldBlockHelpText } from './field-block-help-text';\nimport { FieldBlockLabel } from './field-block-label';\nimport { FieldBlockLayout } from './field-block-layout';\nimport { FieldBlockMessage } from './field-block-message';\n\n/** @deprecated Use `Field` with `FieldLabel`, `FieldDescription` and `FieldError`. */\nexport const FieldBlock = Object.assign(\n  {},\n  {\n    Layout: FieldBlockLayout,\n    Column: FieldBlockColumn,\n    Label: FieldBlockLabel,\n    HelpText: FieldBlockHelpText,\n    ErrorMsg: FieldBlockErrorMsg,\n    Message: FieldBlockMessage,\n  },\n);\n","/** @deprecated Wrap the control in a `Field`: `FieldError` links itself to the control. */\nexport const fieldErrorId = (name: string) => `error-${name}`;\n"],"names":[],"mappings":"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"}

package/dist/field-ip9xiOVa.cjs

@@ -0,0 +1,198 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const field = require('@base-ui/react/field');
+const fieldset = require('@base-ui/react/fieldset');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const fieldControlAria = require('./field-control-aria-WzMGs0A4.cjs');
+const icons_Icon = require('./icons/Icon.cjs.js');
+const utils_cn = require('./cn-DG0X1KEP.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 orientationClassName = {
+  vertical: "grid gap-2",
+  horizontal: "flex items-center gap-2 has-[>[data-slot=field-label]:first-child]:justify-between",
+  responsive: "flex flex-col gap-2 sm:flex-row sm:items-center"
+};
+function Field({ className, orientation = "vertical", invalid = false, ...props }) {
+  const id = React__namespace.useId();
+  const [hasDescription, setHasDescription] = React__namespace.useState(false);
+  const ariaIds = React__namespace.useMemo(
+    () => ({
+      labelId: `${id}-label`,
+      descriptionId: `${id}-description`,
+      errorId: `${id}-error`,
+      controlId: `${id}-control`,
+      invalid,
+      hasDescription,
+      setHasDescription
+    }),
+    [id, invalid, hasDescription]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(fieldControlAria.FieldAriaContext.Provider, { value: ariaIds, children: /* @__PURE__ */ jsxRuntime.jsx(
+    field.Field.Root,
+    {
+      invalid,
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: utils_cn.cn("min-w-0 text-foreground", orientationClassName[orientation], className),
+      ...props
+    }
+  ) });
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "field-content", className: utils_cn.cn("grid min-w-0 flex-1 gap-2", className), ...props });
+}
+function FieldItem({ className, ...props }) {
+  const isInsideField = fieldControlAria.useFieldAriaIds() !== null;
+  const ItemScope = isInsideField ? field.Field.Item : field.Field.Root;
+  return /* @__PURE__ */ jsxRuntime.jsx(fieldControlAria.FieldAriaContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ItemScope, { "data-slot": "field-item", className: utils_cn.cn("flex min-w-0 items-center gap-2", className), ...props }) });
+}
+function RequiredMark() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "ml-0.5 text-destructive-foreground in-data-disabled:text-muted-foreground", children: "*" }),
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "(required)" })
+  ] });
+}
+function FieldLabel({ className, required = false, size = "default", children, onClick, ...props }) {
+  const field$1 = fieldControlAria.useFieldAriaIds();
+  const focusManualControl = (event) => {
+    onClick?.(event);
+    if (!field$1 || event.defaultPrevented) return;
+    event.currentTarget.ownerDocument.getElementById(field$1.controlId)?.focus();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    field.Field.Label,
+    {
+      id: field$1?.labelId,
+      "data-slot": "field-label",
+      className: utils_cn.cn(
+        "inline-flex shrink-0 items-center text-label text-foreground data-disabled:text-muted-foreground",
+        "not-data-disabled:has-[[role=checkbox],[role=switch],[role=radio]]:cursor-pointer",
+        "not-data-disabled:[:is([data-slot=field],[data-slot=field-item]):has(>[role=checkbox],>[role=switch],>[role=radio])_&]:cursor-pointer",
+        "data-disabled:cursor-not-allowed",
+        size === "smaller" && "text-column",
+        size === "bigger" && "text-body",
+        className
+      ),
+      onClick: focusManualControl,
+      ...props,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsxRuntime.jsx(RequiredMark, {}) : null
+      ]
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  const field$1 = fieldControlAria.useFieldAriaIds();
+  const setHasDescription = field$1?.setHasDescription;
+  React__namespace.useEffect(() => {
+    if (!setHasDescription) return;
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [setHasDescription]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    field.Field.Description,
+    {
+      id: field$1?.descriptionId,
+      "data-slot": "field-description",
+      className: utils_cn.cn("-mt-1 text-caption text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+const fieldErrorClassName = "-mt-1 flex gap-1 text-caption text-destructive-foreground";
+function FieldErrorIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", className: "mt-0.75 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlertIcon, {}) });
+}
+function FieldError({ className, children, ...props }) {
+  const field$1 = fieldControlAria.useFieldAriaIds();
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      field.Field.Error,
+      {
+        id: field$1?.errorId,
+        match: true,
+        role: "alert",
+        "data-slot": "field-error",
+        className: utils_cn.cn(fieldErrorClassName, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FieldErrorIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children })
+        ]
+      },
+      "external"
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    field.Field.Error,
+    {
+      id: field$1?.errorId,
+      role: "alert",
+      "data-slot": "field-error",
+      className: utils_cn.cn(fieldErrorClassName, className),
+      ...props,
+      render: ({ children: message, ...errorProps }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ...errorProps, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FieldErrorIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: message })
+      ] })
+    },
+    "native"
+  );
+}
+function Fieldset({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    fieldset.Fieldset.Root,
+    {
+      "data-slot": "fieldset",
+      className: utils_cn.cn("m-0 grid min-w-0 gap-3 border-0 p-0", className),
+      ...props
+    }
+  );
+}
+function FieldsetLegend({ className, required = false, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    fieldset.Fieldset.Legend,
+    {
+      "data-slot": "fieldset-legend",
+      className: utils_cn.cn("text-label text-foreground data-disabled:text-muted-foreground", className),
+      ...props,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsxRuntime.jsx(RequiredMark, {}) : null
+      ]
+    }
+  );
+}
+
+exports.Field = Field;
+exports.FieldContent = FieldContent;
+exports.FieldDescription = FieldDescription;
+exports.FieldError = FieldError;
+exports.FieldItem = FieldItem;
+exports.FieldLabel = FieldLabel;
+exports.Fieldset = Fieldset;
+exports.FieldsetLegend = FieldsetLegend;
+//# sourceMappingURL=field-ip9xiOVa.cjs.map

package/dist/field-ip9xiOVa.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-ip9xiOVa.cjs","sources":["../src/ds/components/Field/field.tsx"],"sourcesContent":["import { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';\nimport { CircleAlertIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { FieldAriaContext, useFieldAriaIds } from './field-control-aria';\nimport { Icon } from '@/ds/icons/Icon';\nimport { cn } from '@/lib/utils';\n\ntype FieldProps = Omit<FieldPrimitive.Root.Props, 'className'> & {\n  className?: string;\n  orientation?: 'vertical' | 'horizontal' | 'responsive';\n};\n\nconst orientationClassName = {\n  vertical: 'grid gap-2',\n  horizontal: 'flex items-center gap-2 has-[>[data-slot=field-label]:first-child]:justify-between',\n  responsive: 'flex flex-col gap-2 sm:flex-row sm:items-center',\n} satisfies Record<NonNullable<FieldProps['orientation']>, string>;\n\nfunction Field({ className, orientation = 'vertical', invalid = false, ...props }: FieldProps) {\n  const id = React.useId();\n  const [hasDescription, setHasDescription] = React.useState(false);\n  const ariaIds = React.useMemo(\n    () => ({\n      labelId: `${id}-label`,\n      descriptionId: `${id}-description`,\n      errorId: `${id}-error`,\n      controlId: `${id}-control`,\n      invalid,\n      hasDescription,\n      setHasDescription,\n    }),\n    [id, invalid, hasDescription],\n  );\n\n  return (\n    <FieldAriaContext.Provider value={ariaIds}>\n      <FieldPrimitive.Root\n        invalid={invalid}\n        data-slot=\"field\"\n        data-orientation={orientation}\n        className={cn('min-w-0 text-foreground', orientationClassName[orientation], className)}\n        {...props}\n      />\n    </FieldAriaContext.Provider>\n  );\n}\n\ntype FieldContentProps = React.ComponentProps<'div'>;\n\nfunction FieldContent({ className, ...props }: FieldContentProps) {\n  return <div data-slot=\"field-content\" className={cn('grid min-w-0 flex-1 gap-2', className)} {...props} />;\n}\n\ntype FieldItemProps = Omit<FieldPrimitive.Item.Props, 'className'> & {\n  className?: string;\n};\n\nfunction FieldItem({ className, ...props }: FieldItemProps) {\n  const isInsideField = useFieldAriaIds() !== null;\n  const ItemScope = isInsideField ? FieldPrimitive.Item : FieldPrimitive.Root;\n\n  return (\n    <FieldAriaContext.Provider value={null}>\n      <ItemScope data-slot=\"field-item\" className={cn('flex min-w-0 items-center gap-2', className)} {...props} />\n    </FieldAriaContext.Provider>\n  );\n}\n\nfunction RequiredMark() {\n  return (\n    <>\n      <span aria-hidden className=\"ml-0.5 text-destructive-foreground in-data-disabled:text-muted-foreground\">\n        *\n      </span>{' '}\n      <span className=\"sr-only\">(required)</span>\n    </>\n  );\n}\n\ntype FieldLabelProps = Omit<FieldPrimitive.Label.Props, 'className' | 'id'> & {\n  className?: string;\n  required?: boolean;\n  size?: 'smaller' | 'default' | 'bigger';\n};\n\nfunction FieldLabel({ className, required = false, size = 'default', children, onClick, ...props }: FieldLabelProps) {\n  const field = useFieldAriaIds();\n\n  const focusManualControl: FieldLabelProps['onClick'] = event => {\n    onClick?.(event);\n    if (!field || event.defaultPrevented) return;\n    event.currentTarget.ownerDocument.getElementById(field.controlId)?.focus();\n  };\n\n  return (\n    <FieldPrimitive.Label\n      id={field?.labelId}\n      data-slot=\"field-label\"\n      className={cn(\n        'inline-flex shrink-0 items-center text-label text-foreground data-disabled:text-muted-foreground',\n        'not-data-disabled:has-[[role=checkbox],[role=switch],[role=radio]]:cursor-pointer',\n        'not-data-disabled:[:is([data-slot=field],[data-slot=field-item]):has(>[role=checkbox],>[role=switch],>[role=radio])_&]:cursor-pointer',\n        'data-disabled:cursor-not-allowed',\n        size === 'smaller' && 'text-column',\n        size === 'bigger' && 'text-body',\n        className,\n      )}\n      onClick={focusManualControl}\n      {...props}\n    >\n      {children}\n      {required ? <RequiredMark /> : null}\n    </FieldPrimitive.Label>\n  );\n}\n\ntype FieldDescriptionProps = Omit<FieldPrimitive.Description.Props, 'className' | 'id'> & {\n  className?: string;\n};\n\nfunction FieldDescription({ className, ...props }: FieldDescriptionProps) {\n  const field = useFieldAriaIds();\n  const setHasDescription = field?.setHasDescription;\n\n  React.useEffect(() => {\n    if (!setHasDescription) return;\n    setHasDescription(true);\n    return () => setHasDescription(false);\n  }, [setHasDescription]);\n\n  return (\n    <FieldPrimitive.Description\n      id={field?.descriptionId}\n      data-slot=\"field-description\"\n      className={cn('-mt-1 text-caption text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\ntype FieldErrorProps = Omit<FieldPrimitive.Error.Props, 'className' | 'match' | 'render'> & {\n  className?: string;\n};\n\nconst fieldErrorClassName = '-mt-1 flex gap-1 text-caption text-destructive-foreground';\n\nfunction FieldErrorIcon() {\n  return (\n    <Icon size=\"xs\" className=\"mt-0.75 shrink-0\" aria-hidden>\n      <CircleAlertIcon />\n    </Icon>\n  );\n}\n\nfunction FieldError({ className, children, ...props }: FieldErrorProps) {\n  const field = useFieldAriaIds();\n\n  if (children) {\n    return (\n      <FieldPrimitive.Error\n        key=\"external\"\n        id={field?.errorId}\n        match\n        role=\"alert\"\n        data-slot=\"field-error\"\n        className={cn(fieldErrorClassName, className)}\n        {...props}\n      >\n        <FieldErrorIcon />\n        <span className=\"min-w-0\">{children}</span>\n      </FieldPrimitive.Error>\n    );\n  }\n\n  return (\n    <FieldPrimitive.Error\n      key=\"native\"\n      id={field?.errorId}\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(fieldErrorClassName, className)}\n      {...props}\n      render={({ children: message, ...errorProps }) => (\n        <div {...errorProps}>\n          <FieldErrorIcon />\n          <span className=\"min-w-0\">{message}</span>\n        </div>\n      )}\n    />\n  );\n}\n\ntype FieldsetProps = Omit<FieldsetPrimitive.Root.Props, 'className'> & {\n  className?: string;\n};\n\nfunction Fieldset({ className, ...props }: FieldsetProps) {\n  return (\n    <FieldsetPrimitive.Root\n      data-slot=\"fieldset\"\n      className={cn('m-0 grid min-w-0 gap-3 border-0 p-0', className)}\n      {...props}\n    />\n  );\n}\n\ntype FieldsetLegendProps = Omit<FieldsetPrimitive.Legend.Props, 'className'> & {\n  className?: string;\n  required?: boolean;\n};\n\nfunction FieldsetLegend({ className, required = false, children, ...props }: FieldsetLegendProps) {\n  return (\n    <FieldsetPrimitive.Legend\n      data-slot=\"fieldset-legend\"\n      className={cn('text-label text-foreground data-disabled:text-muted-foreground', className)}\n      {...props}\n    >\n      {children}\n      {required ? <RequiredMark /> : null}\n    </FieldsetPrimitive.Legend>\n  );\n}\n\nexport { Field, FieldContent, FieldItem, FieldLabel, FieldDescription, FieldError, Fieldset, FieldsetLegend };\nexport type {\n  FieldProps,\n  FieldContentProps,\n  FieldItemProps,\n  FieldLabelProps,\n  FieldDescriptionProps,\n  FieldErrorProps,\n  FieldsetProps,\n  FieldsetLegendProps,\n};\n"],"names":["React","jsx","FieldAriaContext","FieldPrimitive","cn","useFieldAriaIds","jsxs","Fragment","field","Icon","CircleAlertIcon","FieldsetPrimitive"],"mappings":"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"}

package/dist/{filter-bar-chip-CBlHsz4A.cjs → filter-bar-chip-BsWm7SQr.cjs}

@@ -4,7 +4,7 @@ require('./filter-bar-chip.css');const jsxRuntime = require('react/jsx-runtime')
 const lucideReact = require('lucide-react');
 const React = require('react');
 const types = require('./types-Ns4ZNp-g.cjs');
-const comboboxStyles = require('./combobox-styles-DLflBH-G.cjs');
+const comboboxStyles = require('./combobox-styles-qL3FSgmU.cjs');
 const combobox = require('@base-ui/react/combobox');
 const spinner = require('./spinner-BCpN7LL9.cjs');
 const primitives_fluidMenu = require('./primitives/fluid-menu.cjs.js');
@@ -1230,4 +1230,4 @@ exports.matchesQueryFilter = matchesQueryFilter;
 exports.segmentClass = segmentClass;
 exports.useFilterBarContext = useFilterBarContext;
 exports.useValueStep = useValueStep;
-//# sourceMappingURL=filter-bar-chip-CBlHsz4A.cjs.map
+//# sourceMappingURL=filter-bar-chip-BsWm7SQr.cjs.map