@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/field-block-DpejZ6U6.js

@@ -0,0 +1,86 @@
+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-edlaudVx.js';
+import { T as Txt } from './Txt-BP1SRHmL.js';
+
+function FieldBlockColumn({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-2 text-foreground", className), children });
+}
+
+function FieldBlockHelpText({ children }) {
+  return /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "muted", children });
+}
+
+function FieldBlockLabel({
+  children,
+  name,
+  htmlFor = `input-${name}`,
+  required,
+  disabled = false,
+  size = "default",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor,
+      className: cn(
+        "inline-flex items-center text-label",
+        {
+          "text-body": size === "bigger",
+          "text-foreground": !disabled,
+          "text-muted-foreground": disabled
+        },
+        className
+      ),
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("ml-0.5", disabled ? "text-muted-foreground" : "text-destructive-indicator"), children: "*" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (required)" })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+function FieldBlockLayout({
+  children,
+  className,
+  layout = "vertical",
+  labelColumnWidth
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative grid gap-2 text-foreground",
+        {
+          "horizontal-field-block grid-cols-[auto_1fr] items-baseline": layout === "horizontal"
+        },
+        className
+      ),
+      style: layout === "horizontal" && labelColumnWidth ? { gridTemplateColumns: `${labelColumnWidth} 1fr` } : void 0,
+      children
+    }
+  );
+}
+
+function FieldBlockMessage({ name, helpText, errorMsg }) {
+  return /* @__PURE__ */ jsx("div", { className: "h-[1lh] min-w-0 overflow-hidden text-caption [&>p]:truncate", children: errorMsg ? /* @__PURE__ */ jsx(FieldBlockErrorMsg, { name, className: "truncate", children: errorMsg }) : helpText ? /* @__PURE__ */ jsx(FieldBlockHelpText, { children: helpText }) : null });
+}
+
+const FieldBlock = Object.assign(
+  {},
+  {
+    Layout: FieldBlockLayout,
+    Column: FieldBlockColumn,
+    Label: FieldBlockLabel,
+    HelpText: FieldBlockHelpText,
+    ErrorMsg: FieldBlockErrorMsg,
+    Message: FieldBlockMessage
+  }
+);
+
+export { FieldBlock as F };
+//# sourceMappingURL=field-block-DpejZ6U6.js.map

package/dist/field-block-DpejZ6U6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-block-DpejZ6U6.js","sources":["../src/ds/components/FormFieldBlocks/block/field-block-column.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"],"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 { 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 aria-hidden className={cn('ml-0.5', disabled ? 'text-muted-foreground' : 'text-destructive-indicator')}>\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\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"],"names":[],"mappings":";;;;;AAOO,SAAS,gBAAA,CAAiB,EAAE,QAAA,EAAU,SAAA,EAAU,EAA0B;AAC/E,EAAA,2BAAQ,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,4BAAA,EAA8B,SAAS,GAAI,QAAA,EAAS,CAAA;AAChF;;ACJO,SAAS,kBAAA,CAAmB,EAAE,QAAA,EAAS,EAA4B;AACxE,EAAA,2BACG,GAAA,EAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,SACzB,QAAA,EACH,CAAA;AAEJ;;ACCO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA,GAAU,SAAS,IAAI,CAAA,CAAA;AAAA,EACvB,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,SAAA;AAAA,EACP;AACF,CAAA,EAAyB;AACvB,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,qCAAA;AAAA,QACA;AAAA,UACE,aAAa,IAAA,KAAS,QAAA;AAAA,UACtB,mBAAmB,CAAC,QAAA;AAAA,UACpB,uBAAA,EAAyB;AAAA,SAC3B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,2BACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,EAAA,CAAG,UAAU,QAAA,GAAW,uBAAA,GAA0B,4BAA4B,CAAA,EAAG,QAAA,EAAA,GAAA,EAE9G,CAAA;AAAA,0BACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,aAAA,EAAW;AAAA,SAAA,EACvC,CAAA,GACE;AAAA;AAAA;AAAA,GACN;AAEJ;;ACnCO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA,GAAS,UAAA;AAAA,EACT;AACF,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,qCAAA;AAAA,QACA;AAAA,UACE,8DAA8D,MAAA,KAAW;AAAA,SAC3E;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EACE,WAAW,YAAA,IAAgB,gBAAA,GAAmB,EAAE,mBAAA,EAAqB,CAAA,EAAG,gBAAgB,CAAA,IAAA,CAAA,EAAO,GAAI,MAAA;AAAA,MAGpG;AAAA;AAAA,GACH;AAEJ;;ACvBO,SAAS,iBAAA,CAAkB,EAAE,IAAA,EAAM,QAAA,EAAU,UAAS,EAA2B;AACtF,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAU,6DAAA,EACZ,QAAA,EAAA,QAAA,uBACE,kBAAA,EAAA,EAAmB,IAAA,EAAY,SAAA,EAAU,UAAA,EACvC,oBACH,CAAA,GACE,QAAA,uBACD,kBAAA,EAAA,EAAoB,QAAA,EAAA,QAAA,EAAS,IAC5B,IAAA,EACN,CAAA;AAEJ;;ACdO,MAAM,aAAa,MAAA,CAAO,MAAA;AAAA,EAC/B,EAAC;AAAA,EACD;AAAA,IACE,MAAA,EAAQ,gBAAA;AAAA,IACR,MAAA,EAAQ,gBAAA;AAAA,IACR,KAAA,EAAO,eAAA;AAAA,IACP,QAAA,EAAU,kBAAA;AAAA,IACV,QAAA,EAAU,kBAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb;;;;"}

package/dist/field-block-error-msg-B6-wnlAz.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Txt = require('./Txt-DPmEpNbp.cjs');
+const icons_Icon = require('./icons/Icon.cjs.js');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+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-indicator", 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 })
+      ]
+    }
+  );
+}
+
+exports.FieldBlockErrorMsg = FieldBlockErrorMsg;
+//# sourceMappingURL=field-block-error-msg-B6-wnlAz.cjs.map

package/dist/field-block-error-msg-B6-wnlAz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-block-error-msg-B6-wnlAz.cjs","sources":["../src/ds/components/FormFieldBlocks/block/field-block-error-msg.tsx"],"sourcesContent":["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-indicator', 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"],"names":["jsxs","Txt","cn","jsx","Icon","CircleAlertIcon"],"mappings":";;;;;;;;AAgBO,SAAS,kBAAA,CAAmB,EAAE,QAAA,EAAU,IAAA,EAAM,WAAU,EAA4B;AACzF,EAAA,uBACEA,eAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,SAAA;AAAA,MAIR,IAAA,EAAK,OAAA;AAAA,MACL,EAAA,EAAI,IAAA,KAAS,MAAA,GAAY,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,GAAK,MAAA;AAAA,MAC3C,SAAA,EAAWC,WAAA,CAAG,uCAAA,EAAyC,SAAS,CAAA;AAAA,MAEhE,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,eAAA,EAAA,EAAK,MAAK,IAAA,EAAK,SAAA,EAAU,oBAAmB,aAAA,EAAW,IAAA,EACtD,QAAA,kBAAAD,cAAA,CAACE,2BAAA,EAAA,EAAgB,CAAA,EACnB,CAAA;AAAA,wBACAF,cAAA,CAAC,UAAM,QAAA,EAAS;AAAA;AAAA;AAAA,GAClB;AAEJ;;;;"}

package/dist/field-block-error-msg-edlaudVx.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CircleAlertIcon } from 'lucide-react';
+import { T as Txt } from './Txt-BP1SRHmL.js';
+import { Icon } from './icons/Icon.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+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-indicator", className),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { size: "xs", className: "mt-0.75 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsx(CircleAlertIcon, {}) }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+}
+
+export { FieldBlockErrorMsg as F };
+//# sourceMappingURL=field-block-error-msg-edlaudVx.js.map

package/dist/field-block-error-msg-edlaudVx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-block-error-msg-edlaudVx.js","sources":["../src/ds/components/FormFieldBlocks/block/field-block-error-msg.tsx"],"sourcesContent":["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-indicator', 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"],"names":[],"mappings":";;;;;;AAgBO,SAAS,kBAAA,CAAmB,EAAE,QAAA,EAAU,IAAA,EAAM,WAAU,EAA4B;AACzF,EAAA,uBACE,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,SAAA;AAAA,MAIR,IAAA,EAAK,OAAA;AAAA,MACL,EAAA,EAAI,IAAA,KAAS,MAAA,GAAY,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,GAAK,MAAA;AAAA,MAC3C,SAAA,EAAW,EAAA,CAAG,uCAAA,EAAyC,SAAS,CAAA;AAAA,MAEhE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,MAAK,IAAA,EAAK,SAAA,EAAU,oBAAmB,aAAA,EAAW,IAAA,EACtD,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,EACnB,CAAA;AAAA,wBACA,GAAA,CAAC,UAAM,QAAA,EAAS;AAAA;AAAA;AAAA,GAClB;AAEJ;;;;"}