themelia-react-ui 2.0.3 → 2.0.4

package/dist/{form-field-CwH9y77i.js → form-field-CsgRmdit.js}

@@ -1,8 +1,8 @@
 "use client";
-import { t as e } from "./utils-BRhFDwuU.js";
-import { a as t, c as n } from "./typography-UTnveOEy.js";
-import { t as r } from "./structure-BmisBK-3.js";
-import "./form-sizing-BdP_Mf5p.js";
+import { t as e } from "./utils-CF3c95Io.js";
+import { a as t, c as n } from "./typography-CSyJrh28.js";
+import { t as r } from "./structure-C0V0_Fyf.js";
+import "./form-sizing-NXgjkmBG.js";
 import * as i from "react";
 import { forwardRef as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -16,7 +16,12 @@ var c = a(function({ children: a, label: c, required: l, hint: u, error: d, help
 		"meter",
 		"output",
 		"progress"
-	].includes(a.type)), w = C ? a.props.id : void 0, T = p ?? w ?? (c && C ? `form-field-${S}` : void 0), E = T && C && !w ? i.cloneElement(a, { id: T }) : a;
+	].includes(a.type)), w = C ? a.props.id : void 0, T = p ?? w ?? (c && C ? `form-field-${S}` : void 0), E = m ?? `form-field-${S}-supporting`, D = C ? a.props : void 0, O = [D?.["aria-describedby"], b ? E : void 0].filter((e) => !!e).flatMap((e) => e.split(/\s+/).filter(Boolean)), k = [...new Set(O)].join(" ") || void 0, A = C ? i.cloneElement(a, {
+		...T && !w ? { id: T } : {},
+		"aria-describedby": k,
+		"aria-invalid": v ? !0 : D?.["aria-invalid"],
+		"aria-required": D?.["aria-required"] ?? (x ? !0 : void 0)
+	}) : a;
 	return /* @__PURE__ */ s(r, {
 		ref: _,
 		gap: "xs",
@@ -31,12 +36,13 @@ var c = a(function({ children: a, label: c, required: l, hint: u, error: d, help
 					size: "inherit",
 					type: "error",
 					className: "form-field--required",
+					"aria-hidden": "true",
 					children: "*"
 				})]
 			}),
-			E,
+			A,
 			!!b && /* @__PURE__ */ o(n, {
-				id: m,
+				id: E,
 				tag: "p",
 				size: "xs",
 				type: v ? "error" : "secondary",
@@ -54,4 +60,4 @@ c.displayName = "FormField";
 //#endregion
 export { c as t };
 
-//# sourceMappingURL=form-field-CwH9y77i.js.map
+//# sourceMappingURL=form-field-CsgRmdit.js.map

package/dist/form-field-CsgRmdit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-CsgRmdit.js","names":["React","cn","Label","Text","Stack","React$1","FormField","forwardRef","rootProps","hasError","error","supportingText","helperText","hint","showBottomText","resolvedRequired","required","generatedId","canAssociateChild","children","childId","resolvedHtmlFor","htmlFor","label","resolvedSupportingTextId","supportingTextId","childProps","descriptionIds","id","describedBy","resolvedChildren","className"],"sources":["../src/components/base/forms/form-field.tsx"],"sourcesContent":["/**\n * FormField — presentation chrome for a label, control, hint/helper and error.\n * This implementation keeps presentation separate from RHF state bindings.\n * The published `base/forms` family exports those bindings and types, so use\n * its listed react-hook-form peer even when selecting only FormField. Installing\n * that peer does not require adopting RHF for the app's own form state.\n */\n\nimport * as React from 'react';\nimport { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport { Stack } from '../structure';\nimport { Label, Text } from '../../typography';\nimport { cn } from '../../../lib/utils';\nimport { formLabelLineClass } from './form-sizing';\n\nexport interface FieldChromeProps {\n\t/** Caption rendered above the control, associated through `htmlFor`. */\n\tlabel?: ReactNode;\n\t/** Marks the field required and renders the required indicator by the label. */\n\trequired?: boolean;\n\t/**\n\t * Lowest-priority supporting line: shown only when neither `error` nor\n\t * `helperText` is set. Use for formatting rules and expectations.\n\t */\n\thint?: ReactNode;\n\t/**\n\t * Validation message, and the highest-priority supporting line — it replaces\n\t * `helperText` and `hint` rather than stacking with them. Rendered with\n\t * `role=\"alert\"` and `aria-live=\"polite\"` in the error tone.\n\t */\n\terror?: ReactNode;\n\t/**\n\t * Middle-priority supporting line: replaces `hint`, and is itself replaced by\n\t * `error`. The field renders exactly one supporting line, resolved as\n\t * `error || helperText || hint` — copy the user still needs while fixing a\n\t * validation failure therefore belongs in the `error` message itself.\n\t */\n\thelperText?: ReactNode;\n}\n\nexport interface FormFieldProps extends FieldChromeProps, Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n\tchildren: ReactNode;\n\t/** Native ID of the labelled control. With compound children, assign it to the nested control; passive wrappers are left untouched. Direct controls receive an automatic ID when omitted. */\n\thtmlFor?: string;\n\t/** ID for the resolved hint, helper, or error; controls can reference it explicitly. */\n\tsupportingTextId?: string;\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField({\n\tchildren,\n\tlabel,\n\trequired,\n\thint,\n\terror,\n\thelperText,\n\thtmlFor,\n\tsupportingTextId,\n\tclassName,\n\t...rootProps\n}, ref) {\n\tconst hasError = Boolean(error);\n\tconst supportingText = error || helperText || (!hasError ? hint : undefined);\n\tconst showBottomText = Boolean(supportingText);\n\tconst resolvedRequired = required;\n\tconst generatedId = React.useId();\n\t// A layout wrapper is not a labelable control. In a compound field,\n\t// htmlFor already names its nested control; copying it onto the wrapper\n\t// creates duplicate IDs and breaks the native label association.\n\tconst canAssociateChild = React.isValidElement(children) && children.type !== React.Fragment &&\n\t\t(typeof children.type !== 'string' || ['input', 'select', 'textarea', 'button', 'meter', 'output', 'progress'].includes(children.type));\n\tconst childId =\n\t\tcanAssociateChild\n\t\t\t? (children.props as { id?: string }).id\n\t\t\t: undefined;\n\tconst resolvedHtmlFor = htmlFor ?? childId ?? (label && canAssociateChild ? `form-field-${generatedId}` : undefined);\n\tconst resolvedSupportingTextId = supportingTextId ?? `form-field-${generatedId}-supporting`;\n\tconst childProps = canAssociateChild ? (children.props as React.AriaAttributes & { id?: string }) : undefined;\n\tconst descriptionIds = [childProps?.['aria-describedby'], showBottomText ? resolvedSupportingTextId : undefined]\n\t\t.filter((id): id is string => Boolean(id)).flatMap(id => id.split(/\\s+/).filter(Boolean));\n\tconst describedBy = [...new Set(descriptionIds)].join(' ') || undefined;\n\tconst resolvedChildren = canAssociateChild\n\t\t? React.cloneElement(children as React.ReactElement<React.AriaAttributes & { id?: string }>, {\n\t\t\t...(resolvedHtmlFor && !childId ? { id: resolvedHtmlFor } : {}),\n\t\t\t'aria-describedby': describedBy,\n\t\t\t'aria-invalid': hasError ? true : childProps?.['aria-invalid'],\n\t\t\t'aria-required': childProps?.['aria-required'] ?? (resolvedRequired ? true : undefined),\n\t\t})\n\t\t: children;\n\n\treturn (\n\t\t<Stack ref={ref} gap=\"xs\" className={cn('form-field--component w-full box-border', className)} {...rootProps}>\n\t\t\t{!!label && (\n\t\t\t\t<Label\n\t\t\t\t\thtmlFor={resolvedHtmlFor}\n\t\t\t\t\tclassName={cn('form-field--label flex items-center gap-space-xs text-inherit', formLabelLineClass)}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t\t{!!resolvedRequired && (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\ttag=\"span\"\n\t\t\t\t\t\t\tsize=\"inherit\"\n\t\t\t\t\t\t\ttype=\"error\"\n\t\t\t\t\t\t\tclassName=\"form-field--required\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t*\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t)}\n\t\t\t\t</Label>\n\t\t\t)}\n\n\t\t\t{resolvedChildren}\n\n\t\t\t{!!showBottomText && (\n\t\t\t\t<Text\n\t\t\t\t\tid={resolvedSupportingTextId}\n\t\t\t\t\ttag=\"p\"\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\ttype={hasError ? 'error' : 'secondary'}\n\t\t\t\t\t{...(hasError ? { role: 'alert', 'aria-live': 'polite' } : {})}\n\t\t\t\t\tclassName=\"form-field--supporting\"\n\t\t\t\t>\n\t\t\t\t\t{supportingText}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t</Stack>\n\t);\n});\n\nFormField.displayName = 'FormField';\n"],"mappings":";;;;;;;;;AAgDA,IAAaM,IAAYC,EAA2C,SAAmB,EACtF,aACA,UACA,aACA,SACA,UACA,eACA,YACA,qBACA,cACA,GAAGC,KACD,GAAK;CACP,IAAMC,IAAW,EAAQC,GACnBC,IAAiBD,KAASE,MAAgBH,IAAkB,KAAA,IAAPI,IACrDC,IAAiB,EAAQH,GACzBI,IAAmBC,GACnBC,IAAcjB,EAAM,MAAM,GAI1BkB,IAAoBlB,EAAM,eAAemB,CAAQ,KAAKA,EAAS,SAASnB,EAAM,aAClF,OAAOmB,EAAS,QAAS,YAAY;EAAC;EAAS;EAAU;EAAY;EAAU;EAAS;EAAU;CAAU,CAAC,CAAC,SAASA,EAAS,IAAI,IAChIC,IACLF,IACIC,EAAS,MAA0B,KACpC,KAAA,GACEE,IAAkBC,KAAWF,MAAYG,KAASL,IAAoB,cAAcD,MAAgB,KAAA,IACpGO,IAA2BC,KAAoB,cAAcR,EAAY,cACzES,IAAaR,IAAqBC,EAAS,QAAmD,KAAA,GAC9FQ,IAAiB,CAACD,IAAa,qBAAqBZ,IAAiBU,IAA2B,KAAA,CAAS,CAAC,CAC9G,QAAQ,MAAqB,EAAQI,CAAG,CAAC,CAAC,SAAQ,MAAMA,EAAG,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,CAAC,GACnFC,IAAc,CAAC,GAAG,IAAI,IAAIF,CAAc,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA,GACxDG,IAAmBZ,IACtBlB,EAAM,aAAamB,GAAwE;EAC5F,GAAIE,KAAmB,CAACD,IAAU,EAAE,IAAIC,EAAgB,IAAI,CAAC;EAC7D,oBAAoBQ;EACpB,gBAAgBpB,IAAW,KAAOiB,IAAa;EAC/C,iBAAiBA,IAAa,qBAAqBX,IAAmB,KAAO,KAAA;CAC9E,CAAC,IACCI;CAEH,OACC,kBAACf,GAAD;EAAY;EAAK,KAAI;EAAK,WAAWH,EAAG,2CAA2C8B,CAAS;EAAG,GAAIvB;EAAnG,UAAA;GACE,CAAC,CAACe,KACF,kBAACrB,GAAD;IACC,SAASmB;IACT,WAAWpB,EAAG,iEAAA,WAAmF;IAFlG,UAAA,CAIEsB,GACA,CAAC,CAACR,KACF,kBAACZ,GAAD;KACC,KAAI;KACJ,MAAK;KACL,MAAK;KACL,WAAU;KACV,eAAY;KACZ,UAAA;IAEK,CAAA,CAED;;GAGP2B;GAEA,CAAC,CAAChB,KACF,kBAACX,GAAD;IACC,IAAIqB;IACJ,KAAI;IACJ,MAAK;IACL,MAAMf,IAAW,UAAU;IAC3B,GAAKA,IAAW;KAAE,MAAM;KAAS,aAAa;IAAS,IAAI,CAAC;IAC5D,WAAU;IAET,UAAAE;GACI,CAAA;EAED;;AAET,CAAC;AAED,EAAU,cAAc"}

package/dist/{form-sizing-BdP_Mf5p.js → form-sizing-NXgjkmBG.js}

@@ -1,5 +1,5 @@
-import { v as e } from "./ui-provider-C_U0Xma4.js";
-import { t } from "./affordance-geometry.generated-tF36bREk.js";
+import { v as e } from "./ui-provider-CQCuCBcy.js";
+import { t } from "./affordance-geometry.generated-B8yGOr8-.js";
 import { t as n } from "./field-state-recipes-BVA2CWHo.js";
 import { t as r } from "./editable-text-recipe-Cn61kEcv.js";
 //#region src/components/base/forms/form-sizing.ts
@@ -122,4 +122,4 @@ function w(t, n) {
 //#endregion
 export { b as _, i as a, u as c, a as d, _ as f, x as g, S as h, d as i, h as l, C as m, m as n, o, v as p, p as r, l as s, f as t, s as u, y as v, w as y };
 
-//# sourceMappingURL=form-sizing-BdP_Mf5p.js.map
+//# sourceMappingURL=form-sizing-NXgjkmBG.js.map

package/dist/{form-sizing-BdP_Mf5p.js.map → form-sizing-NXgjkmBG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-sizing-BdP_Mf5p.js","names":["resolveComponentScale","fieldStateRecipes","editableTextSizeClasses","formControlHeightClasses","affordanceGeometry","formControlSizeClasses","formControlHorizontalPaddingClasses","formControlPaddingClasses","formControlInlineGapClasses","formControlIconClasses","formControlIconOffsetClasses","formControlEndIconOffsetClasses","formControlAddonOffsetClasses","formControlEndAddonOffsetClasses","formControlCountOffsetClasses","formControlMinHeightClasses","fieldTriggerInteractionClasses","formFieldFrameClasses","size","formFieldTriggerClasses","formTextareaSizeClasses","formTextareaInsetClasses","formTextareaAffordanceTopClasses","formLabelSizeClasses","formLabelLineClass","resolveFormControlSize","sizeProp","defaultScale"],"sources":["../src/components/base/forms/form-sizing.ts"],"sourcesContent":["import { fieldStateRecipes } from '../../../lib/field-state-recipes';\nimport { affordanceGeometry } from '../../../lib/affordance-geometry.generated';\nimport { editableTextSizeClasses } from '../../../lib/editable-text-recipe';\nimport type { ComponentScale } from '../../../lib/component-vocabulary';\nimport { resolveComponentScale } from '../../../lib/ui-provider/scale';\n\n/** Ordinary heights for compound frames that retain auto-height and class overrides. */\nexport const formControlHeightClasses = {\n\tsm: `h-control-sm ${affordanceGeometry.controlTextMinHeight}`,\n\tmd: `h-control ${affordanceGeometry.controlTextMinHeight}`,\n\tlg: `h-control-lg ${affordanceGeometry.controlTextMinHeight}`,\n} satisfies Record<ComponentScale, string>;\n\n// Important height utilities let our resolved height win against shadcn primitives that\n// bake their own `data-[size=*]:h-{n}` defaults (Select, DatePicker\n// trigger via Button, etc.). Without `!`, the primitive's\n// attribute-selector specificity beats our class-selector and every\n// non-Input field renders 4px taller than Input.\n// Keep the important spellings literal so Tailwind emits them in package CSS.\nexport const formControlSizeClasses = {\n\tsm: [\n\t\t'box-border',\n\t\t'!h-control-sm',\n\t\taffordanceGeometry.controlTextMinHeight,\n\t\t'font-sans text-foreground',\n\t\t'text-pxs',\n\t].join(' '),\n\tmd: [\n\t\t'box-border',\n\t\t'!h-control',\n\t\taffordanceGeometry.controlTextMinHeight,\n\t\t'font-sans text-foreground',\n\t\t'text-sm',\n\t].join(' '),\n\tlg: [\n\t\t'box-border',\n\t\t'!h-control-lg',\n\t\taffordanceGeometry.controlTextMinHeight,\n\t\t'font-sans text-foreground',\n\t\t'text-sm',\n\t].join(' '),\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlHorizontalPaddingClasses = {\n\tsm: 'px-control-sm',\n\tmd: 'px-control',\n\tlg: 'px-control',\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlPaddingClasses = {\n\tsm: `${formControlHorizontalPaddingClasses.sm} ${affordanceGeometry.controlBlockPadding.sm}`,\n\tmd: `${formControlHorizontalPaddingClasses.md} ${affordanceGeometry.controlBlockPadding.md}`,\n\tlg: `${formControlHorizontalPaddingClasses.lg} ${affordanceGeometry.controlBlockPadding.lg}`,\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlInlineGapClasses = {\n\tsm: 'gap-space-sm',\n\tmd: 'gap-space-md',\n\tlg: 'gap-space-lg',\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlIconClasses = {\n\tsm: 'size-icon-sm',\n\tmd: 'size-icon',\n\tlg: 'size-icon-lg',\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlIconOffsetClasses = {\n\tsm: 'ps-control-icon-sm',\n\tmd: 'ps-control-icon',\n\tlg: affordanceGeometry.largeIconStart,\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlEndIconOffsetClasses = {\n\tsm: 'pe-control-icon-sm',\n\tmd: 'pe-control-icon',\n\tlg: affordanceGeometry.largeIconEnd,\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlAddonOffsetClasses = {\n\tsm: 'ps-control-addon-sm',\n\tmd: 'ps-control-addon',\n\tlg: 'ps-control-addon',\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlEndAddonOffsetClasses = {\n\tsm: 'pe-control-addon-sm',\n\tmd: 'pe-control-addon',\n\tlg: 'pe-control-addon',\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlCountOffsetClasses = {\n\tsm: 'pe-control-count-sm',\n\tmd: 'pe-control-count',\n\tlg: 'pe-control-count',\n} satisfies Record<ComponentScale, string>;\n\n/**\n * Min-heights matching `formControlSizeClasses` so multi-line trigger\n * variants (e.g. `Select` showing wrapped descriptions) can keep the\n * size's vertical rhythm without locking to a fixed `h-{n}`.\n */\nexport const formControlMinHeightClasses = {\n\tsm: 'min-h-control-sm',\n\tmd: 'min-h-control',\n\tlg: 'min-h-control-lg',\n} satisfies Record<ComponentScale, string>;\n\n/**\n * Field triggers never take an action hover or press fill: a native field has\n * neither. The variants repeat the Button interaction recipe's exact selectors so\n * class merging replaces its fill instead of losing a specificity contest.\n */\nconst fieldTriggerInteractionClasses = [\n\t'[&:hover:not(:active):not(:disabled):not([data-disabled]):not([aria-disabled=true])]:bg-transparent',\n\t'[&:active:not(:disabled):not([data-disabled]):not([aria-disabled=true])]:bg-transparent',\n].join(' ');\n\n/**\n * The one field frame, drawn by `Input` on its native field and by\n * `formFieldTriggerClasses` on button-shaped triggers: the `--input` boundary,\n * inner radius, transparent fill (the library is intentionally flat), control\n * height, editable text size, control padding and the shared focus, invalid and\n * disabled states. Layout (`flex`, width) stays with each owner.\n *\n * The displayed value is the field's value, so it follows the editable text\n * recipe: on coarse pointers a trigger matches the touch input size of an\n * adjoining `Input` instead of rendering a step smaller.\n */\nexport function formFieldFrameClasses(size: ComponentScale): string {\n\treturn [\n\t\t'box-border rounded-inner border border-input bg-transparent',\n\t\t'shadow-none transition-[color,box-shadow] outline-none',\n\t\tformControlSizeClasses[size],\n\t\teditableTextSizeClasses[size],\n\t\tformControlPaddingClasses[size],\n\t\tfieldStateRecipes.focus,\n\t\tfieldStateRecipes.invalid,\n\t\t'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n\t].join(' ');\n}\n\n/**\n * Canonical \"input-shaped trigger\" chrome — used by any control that\n * renders as a button-style trigger but visually has to read as a form\n * field (DatePicker, TimePicker, Cascader, the inner Select inside composite\n * fields, etc.). It is `Input`'s own frame plus button resets, so when the\n * canonical input look changes every trigger picks it up.\n */\nexport function formFieldTriggerClasses(size: ComponentScale): string {\n\treturn [\n\t\t'flex w-full items-center justify-between text-start font-normal',\n\t\tformFieldFrameClasses(size),\n\t\tformControlInlineGapClasses[size],\n\t\t'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n\t\t// Read-only matches Input's read-only fill.\n\t\t'data-readonly:bg-muted',\n\t\tfieldTriggerInteractionClasses,\n\t].join(' ');\n}\n\nexport const formTextareaSizeClasses = {\n\tsm: [\n\t\t'min-h-textarea-sm',\n\t\t'font-sans text-foreground',\n\t\t'text-pxs',\n\t].join(' '),\n\tmd: [\n\t\t'min-h-textarea',\n\t\t'font-sans text-foreground',\n\t\t'text-sm',\n\t].join(' '),\n\tlg: [\n\t\t'min-h-textarea',\n\t\t'font-sans text-foreground',\n\t\t'text-sm',\n\t].join(' '),\n} satisfies Record<ComponentScale, string>;\n\n/**\n * Vertical inset of multi-line fields. Their first line sits exactly where a\n * single-line control of the same size draws its value (inside the 1px border),\n * so a Textarea beside an Input shares its first line. `1lh` is the field's own\n * line height, so the inset follows the editable text size on every pointer.\n */\nexport const formTextareaInsetClasses = affordanceGeometry.textareaBlockPadding satisfies Record<ComponentScale, string>;\n\n/**\n * Top offsets that centre multi-line field affordances on the first line, where a\n * single-line control of the same size centres them: the clear target\n * (`size-control-clear`) and a `size-icon` glyph such as the loading spinner.\n */\nexport const formTextareaAffordanceTopClasses = {\n\ttarget: affordanceGeometry.textareaClearTop,\n\ticon: affordanceGeometry.textareaIconTop,\n} as const satisfies Record<'target' | 'icon', Record<ComponentScale, string>>;\n\nexport const formLabelSizeClasses = {\n\tsm: 'text-xs',\n\tmd: 'text-sm',\n\tlg: 'text-base',\n} satisfies Record<ComponentScale, string>;\n\n/** Field labels share one line box, so a label row lines up beside its field at every size. */\nexport const formLabelLineClass = 'leading-6';\n\nexport function resolveFormControlSize(\n\tsizeProp: ComponentScale | undefined,\n\tdefaultScale: ComponentScale | undefined,\n): ComponentScale {\n\treturn resolveComponentScale(sizeProp, defaultScale);\n}\n\nexport function resolveFormLabelSize(\n\tsizeProp: ComponentScale | undefined,\n\tdefaultScale: ComponentScale | undefined,\n): ComponentScale {\n\treturn resolveComponentScale(sizeProp, defaultScale);\n}\n"],"mappings":";;;;;AAOA,IAAaG,IAA2B;CACvC,IAAI,gBAAgBC,EAAmB;CACvC,IAAI,aAAaA,EAAmB;CACpC,IAAI,gBAAgBA,EAAmB;AACxC,GAQaC,IAAyB;CACrC,IAAI;EACH;EACA;EACAD,EAAmB;EACnB;EACA;CACD,CAAC,CAAC,KAAK,GAAG;CACV,IAAI;EACH;EACA;EACAA,EAAmB;EACnB;EACA;CACD,CAAC,CAAC,KAAK,GAAG;CACV,IAAI;EACH;EACA;EACAA,EAAmB;EACnB;EACA;CACD,CAAC,CAAC,KAAK,GAAG;AACX,GAEaE,IAAsC;CAClD,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEaC,IAA4B;CACxC,IAAI,GAAGD,EAAoC,GAAG,GAAGF,EAAmB,oBAAoB;CACxF,IAAI,GAAGE,EAAoC,GAAG,GAAGF,EAAmB,oBAAoB;CACxF,IAAI,GAAGE,EAAoC,GAAG,GAAGF,EAAmB,oBAAoB;AACzF,GAEaI,IAA8B;CAC1C,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEaC,IAAyB;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEaC,IAA+B;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAIN,EAAmB;AACxB,GAEaO,IAAkC;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAIP,EAAmB;AACxB,GAEaQ,IAAgC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEaC,IAAmC;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEaC,IAAgC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAOaC,IAA8B;CAC1C,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAOMC,IAAiC,CACtC,uGACA,yFACD,CAAC,CAAC,KAAK,GAAG;AAaV,SAAgBC,EAAsB,GAA8B;CACnE,OAAO;EACN;EACA;EACAZ,EAAuBa;EACvBhB,EAAwBgB;EACxBX,EAA0BW;EAC1BjB,EAAkB;EAClBA,EAAkB;EAClB;CACD,CAAC,CAAC,KAAK,GAAG;AACX;AASA,SAAgBkB,EAAwB,GAA8B;CACrE,OAAO;EACN;EACAF,EAAsBC,CAAI;EAC1BV,EAA4BU;EAC5B;EAEA;EACAF;CACD,CAAC,CAAC,KAAK,GAAG;AACX;AAEA,IAAaI,IAA0B;CACtC,IAAI;EACH;EACA;EACA;CACD,CAAC,CAAC,KAAK,GAAG;CACV,IAAI;EACH;EACA;EACA;CACD,CAAC,CAAC,KAAK,GAAG;CACV,IAAI;EACH;EACA;EACA;CACD,CAAC,CAAC,KAAK,GAAG;AACX,GAQaC,IAA2BjB,EAAmB,sBAO9CkB,IAAmC;CAC/C,QAAQlB,EAAmB;CAC3B,MAAMA,EAAmB;AAC1B,GAEamB,IAAuB;CACnC,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAGaC,IAAqB;AAElC,SAAgBC,EACf,GACA,GACiB;CACjB,OAAOzB,EAAsB0B,GAAUC,CAAY;AACpD"}
+{"version":3,"file":"form-sizing-NXgjkmBG.js","names":["resolveComponentScale","fieldStateRecipes","editableTextSizeClasses","formControlHeightClasses","affordanceGeometry","formControlSizeClasses","formControlHorizontalPaddingClasses","formControlPaddingClasses","formControlInlineGapClasses","formControlIconClasses","formControlIconOffsetClasses","formControlEndIconOffsetClasses","formControlAddonOffsetClasses","formControlEndAddonOffsetClasses","formControlCountOffsetClasses","formControlMinHeightClasses","fieldTriggerInteractionClasses","formFieldFrameClasses","size","formFieldTriggerClasses","formTextareaSizeClasses","formTextareaInsetClasses","formTextareaAffordanceTopClasses","formLabelSizeClasses","formLabelLineClass","resolveFormControlSize","sizeProp","defaultScale"],"sources":["../src/components/base/forms/form-sizing.ts"],"sourcesContent":["import { fieldStateRecipes } from '../../../lib/field-state-recipes';\nimport { affordanceGeometry } from '../../../lib/affordance-geometry.generated';\nimport { editableTextSizeClasses } from '../../../lib/editable-text-recipe';\nimport type { ComponentScale } from '../../../lib/component-vocabulary';\nimport { resolveComponentScale } from '../../../lib/ui-provider/scale';\n\n/** Ordinary heights for compound frames that retain auto-height and class overrides. */\nexport const formControlHeightClasses = {\n\tsm: `h-control-sm ${affordanceGeometry.controlTextMinHeight}`,\n\tmd: `h-control ${affordanceGeometry.controlTextMinHeight}`,\n\tlg: `h-control-lg ${affordanceGeometry.controlTextMinHeight}`,\n} satisfies Record<ComponentScale, string>;\n\n// Important height utilities let our resolved height win against shadcn primitives that\n// bake their own `data-[size=*]:h-{n}` defaults (Select, DatePicker\n// trigger via Button, etc.). Without `!`, the primitive's\n// attribute-selector specificity beats our class-selector and every\n// non-Input field renders 4px taller than Input.\n// Keep the important spellings literal so Tailwind emits them in package CSS.\nexport const formControlSizeClasses = {\n\tsm: [\n\t\t'box-border',\n\t\t'!h-control-sm',\n\t\taffordanceGeometry.controlTextMinHeight,\n\t\t'font-sans text-foreground',\n\t\t'text-pxs',\n\t].join(' '),\n\tmd: [\n\t\t'box-border',\n\t\t'!h-control',\n\t\taffordanceGeometry.controlTextMinHeight,\n\t\t'font-sans text-foreground',\n\t\t'text-sm',\n\t].join(' '),\n\tlg: [\n\t\t'box-border',\n\t\t'!h-control-lg',\n\t\taffordanceGeometry.controlTextMinHeight,\n\t\t'font-sans text-foreground',\n\t\t'text-sm',\n\t].join(' '),\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlHorizontalPaddingClasses = {\n\tsm: 'px-control-sm',\n\tmd: 'px-control',\n\tlg: 'px-control',\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlPaddingClasses = {\n\tsm: `${formControlHorizontalPaddingClasses.sm} ${affordanceGeometry.controlBlockPadding.sm}`,\n\tmd: `${formControlHorizontalPaddingClasses.md} ${affordanceGeometry.controlBlockPadding.md}`,\n\tlg: `${formControlHorizontalPaddingClasses.lg} ${affordanceGeometry.controlBlockPadding.lg}`,\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlInlineGapClasses = {\n\tsm: 'gap-space-sm',\n\tmd: 'gap-space-md',\n\tlg: 'gap-space-lg',\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlIconClasses = {\n\tsm: 'size-icon-sm',\n\tmd: 'size-icon',\n\tlg: 'size-icon-lg',\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlIconOffsetClasses = {\n\tsm: 'ps-control-icon-sm',\n\tmd: 'ps-control-icon',\n\tlg: affordanceGeometry.largeIconStart,\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlEndIconOffsetClasses = {\n\tsm: 'pe-control-icon-sm',\n\tmd: 'pe-control-icon',\n\tlg: affordanceGeometry.largeIconEnd,\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlAddonOffsetClasses = {\n\tsm: 'ps-control-addon-sm',\n\tmd: 'ps-control-addon',\n\tlg: 'ps-control-addon',\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlEndAddonOffsetClasses = {\n\tsm: 'pe-control-addon-sm',\n\tmd: 'pe-control-addon',\n\tlg: 'pe-control-addon',\n} satisfies Record<ComponentScale, string>;\n\nexport const formControlCountOffsetClasses = {\n\tsm: 'pe-control-count-sm',\n\tmd: 'pe-control-count',\n\tlg: 'pe-control-count',\n} satisfies Record<ComponentScale, string>;\n\n/**\n * Min-heights matching `formControlSizeClasses` so multi-line trigger\n * variants (e.g. `Select` showing wrapped descriptions) can keep the\n * size's vertical rhythm without locking to a fixed `h-{n}`.\n */\nexport const formControlMinHeightClasses = {\n\tsm: 'min-h-control-sm',\n\tmd: 'min-h-control',\n\tlg: 'min-h-control-lg',\n} satisfies Record<ComponentScale, string>;\n\n/**\n * Field triggers never take an action hover or press fill: a native field has\n * neither. The variants repeat the Button interaction recipe's exact selectors so\n * class merging replaces its fill instead of losing a specificity contest.\n */\nconst fieldTriggerInteractionClasses = [\n\t'[&:hover:not(:active):not(:disabled):not([data-disabled]):not([aria-disabled=true])]:bg-transparent',\n\t'[&:active:not(:disabled):not([data-disabled]):not([aria-disabled=true])]:bg-transparent',\n].join(' ');\n\n/**\n * The one field frame, drawn by `Input` on its native field and by\n * `formFieldTriggerClasses` on button-shaped triggers: the `--input` boundary,\n * inner radius, transparent fill (the library is intentionally flat), control\n * height, editable text size, control padding and the shared focus, invalid and\n * disabled states. Layout (`flex`, width) stays with each owner.\n *\n * The displayed value is the field's value, so it follows the editable text\n * recipe: on coarse pointers a trigger matches the touch input size of an\n * adjoining `Input` instead of rendering a step smaller.\n */\nexport function formFieldFrameClasses(size: ComponentScale): string {\n\treturn [\n\t\t'box-border rounded-inner border border-input bg-transparent',\n\t\t'shadow-none transition-[color,box-shadow] outline-none',\n\t\tformControlSizeClasses[size],\n\t\teditableTextSizeClasses[size],\n\t\tformControlPaddingClasses[size],\n\t\tfieldStateRecipes.focus,\n\t\tfieldStateRecipes.invalid,\n\t\t'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n\t].join(' ');\n}\n\n/**\n * Canonical \"input-shaped trigger\" chrome — used by any control that\n * renders as a button-style trigger but visually has to read as a form\n * field (DatePicker, TimePicker, Cascader, the inner Select inside composite\n * fields, etc.). It is `Input`'s own frame plus button resets, so when the\n * canonical input look changes every trigger picks it up.\n */\nexport function formFieldTriggerClasses(size: ComponentScale): string {\n\treturn [\n\t\t'flex w-full items-center justify-between text-start font-normal',\n\t\tformFieldFrameClasses(size),\n\t\tformControlInlineGapClasses[size],\n\t\t'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n\t\t// Read-only matches Input's read-only fill.\n\t\t'data-readonly:bg-muted',\n\t\tfieldTriggerInteractionClasses,\n\t].join(' ');\n}\n\nexport const formTextareaSizeClasses = {\n\tsm: [\n\t\t'min-h-textarea-sm',\n\t\t'font-sans text-foreground',\n\t\t'text-pxs',\n\t].join(' '),\n\tmd: [\n\t\t'min-h-textarea',\n\t\t'font-sans text-foreground',\n\t\t'text-sm',\n\t].join(' '),\n\tlg: [\n\t\t'min-h-textarea',\n\t\t'font-sans text-foreground',\n\t\t'text-sm',\n\t].join(' '),\n} satisfies Record<ComponentScale, string>;\n\n/**\n * Vertical inset of multi-line fields. Their first line sits exactly where a\n * single-line control of the same size draws its value (inside the 1px border),\n * so a Textarea beside an Input shares its first line. `1lh` is the field's own\n * line height, so the inset follows the editable text size on every pointer.\n */\nexport const formTextareaInsetClasses = affordanceGeometry.textareaBlockPadding satisfies Record<ComponentScale, string>;\n\n/**\n * Top offsets that centre multi-line field affordances on the first line, where a\n * single-line control of the same size centres them: the clear target\n * (`size-control-clear`) and a `size-icon` glyph such as the loading spinner.\n */\nexport const formTextareaAffordanceTopClasses = {\n\ttarget: affordanceGeometry.textareaClearTop,\n\ticon: affordanceGeometry.textareaIconTop,\n} as const satisfies Record<'target' | 'icon', Record<ComponentScale, string>>;\n\nexport const formLabelSizeClasses = {\n\tsm: 'text-xs',\n\tmd: 'text-sm',\n\tlg: 'text-base',\n} satisfies Record<ComponentScale, string>;\n\n/** Field labels share one line box, so a label row lines up beside its field at every size. */\nexport const formLabelLineClass = 'leading-6';\n\nexport function resolveFormControlSize(\n\tsizeProp: ComponentScale | undefined,\n\tdefaultScale: ComponentScale | undefined,\n): ComponentScale {\n\treturn resolveComponentScale(sizeProp, defaultScale);\n}\n\nexport function resolveFormLabelSize(\n\tsizeProp: ComponentScale | undefined,\n\tdefaultScale: ComponentScale | undefined,\n): ComponentScale {\n\treturn resolveComponentScale(sizeProp, defaultScale);\n}\n"],"mappings":";;;;;AAOA,IAAaG,IAA2B;CACvC,IAAI,gBAAgBC,EAAmB;CACvC,IAAI,aAAaA,EAAmB;CACpC,IAAI,gBAAgBA,EAAmB;AACxC,GAQaC,IAAyB;CACrC,IAAI;EACH;EACA;EACAD,EAAmB;EACnB;EACA;CACD,CAAC,CAAC,KAAK,GAAG;CACV,IAAI;EACH;EACA;EACAA,EAAmB;EACnB;EACA;CACD,CAAC,CAAC,KAAK,GAAG;CACV,IAAI;EACH;EACA;EACAA,EAAmB;EACnB;EACA;CACD,CAAC,CAAC,KAAK,GAAG;AACX,GAEaE,IAAsC;CAClD,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEaC,IAA4B;CACxC,IAAI,GAAGD,EAAoC,GAAG,GAAGF,EAAmB,oBAAoB;CACxF,IAAI,GAAGE,EAAoC,GAAG,GAAGF,EAAmB,oBAAoB;CACxF,IAAI,GAAGE,EAAoC,GAAG,GAAGF,EAAmB,oBAAoB;AACzF,GAEaI,IAA8B;CAC1C,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEaC,IAAyB;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEaC,IAA+B;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAIN,EAAmB;AACxB,GAEaO,IAAkC;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAIP,EAAmB;AACxB,GAEaQ,IAAgC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEaC,IAAmC;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEaC,IAAgC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAOaC,IAA8B;CAC1C,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAOMC,IAAiC,CACtC,uGACA,yFACD,CAAC,CAAC,KAAK,GAAG;AAaV,SAAgBC,EAAsB,GAA8B;CACnE,OAAO;EACN;EACA;EACAZ,EAAuBa;EACvBhB,EAAwBgB;EACxBX,EAA0BW;EAC1BjB,EAAkB;EAClBA,EAAkB;EAClB;CACD,CAAC,CAAC,KAAK,GAAG;AACX;AASA,SAAgBkB,EAAwB,GAA8B;CACrE,OAAO;EACN;EACAF,EAAsBC,CAAI;EAC1BV,EAA4BU;EAC5B;EAEA;EACAF;CACD,CAAC,CAAC,KAAK,GAAG;AACX;AAEA,IAAaI,IAA0B;CACtC,IAAI;EACH;EACA;EACA;CACD,CAAC,CAAC,KAAK,GAAG;CACV,IAAI;EACH;EACA;EACA;CACD,CAAC,CAAC,KAAK,GAAG;CACV,IAAI;EACH;EACA;EACA;CACD,CAAC,CAAC,KAAK,GAAG;AACX,GAQaC,IAA2BjB,EAAmB,sBAO9CkB,IAAmC;CAC/C,QAAQlB,EAAmB;CAC3B,MAAMA,EAAmB;AAC1B,GAEamB,IAAuB;CACnC,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAGaC,IAAqB;AAElC,SAAgBC,EACf,GACA,GACiB;CACjB,OAAOzB,EAAsB0B,GAAUC,CAAY;AACpD"}

package/dist/{forms-B9G_xwzi.js → forms-BV5m5aQF.js}

@@ -1,52 +1,69 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-BRhFDwuU.js";
-import { n } from "./buttons-DPZekJFu.js";
-import { c as r } from "./typography-UTnveOEy.js";
-import { t as i } from "./structure-BmisBK-3.js";
-import { h as a, m as o, p as s, t as c, v as l } from "./smart-card-DiC5aac3.js";
-import { t as u } from "./input-DQdEd0YD.js";
-import { t as d } from "./form-field-CwH9y77i.js";
-import { useMemo as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { Controller as h, useForm as g } from "react-hook-form";
+import { t } from "./utils-CF3c95Io.js";
+import { n } from "./buttons-BbfzgczK.js";
+import { c as r } from "./typography-CSyJrh28.js";
+import { t as i } from "./structure-C0V0_Fyf.js";
+import { h as a, m as o, p as s, t as c, v as l } from "./smart-card-CqkzQsK-.js";
+import { n as u, t as d } from "./composition.recipes-COdiFhxB.js";
+import { t as f } from "./input-Cdw4k0fb.js";
+import { t as p } from "./form-field-CsgRmdit.js";
+import { useMemo as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Controller as _, useForm as v } from "react-hook-form";
 //#region src/components/base/forms/controlled-form-field.strings.ts
-var _ = {
+var y = {
 	required: "This field is required",
 	requiredWithLabel: "{{label}} is required",
 	invalid: "Invalid value"
 };
-function v(e, t) {
+function b(e, t) {
 	return e.replace(/\{\{\s*label\s*\}\}/g, t);
 }
 //#endregion
 //#region src/components/base/forms/controlled-form-field.tsx
-function y({ name: n, control: r, rules: i, error: a, strings: o, children: s, ...c }) {
-	let l = e(_, o);
-	return /* @__PURE__ */ p(h, {
+function x({ name: n, control: r, rules: i, error: a, strings: o, children: s, ...c }) {
+	let l = e(y, o);
+	return /* @__PURE__ */ h(_, {
 		name: n,
 		control: r,
 		rules: i,
 		render: ({ field: e, fieldState: r }) => {
-			let i = r.error?.message || (r.error ? r.error.type === "required" ? typeof c.label == "string" ? v(l.requiredWithLabel, c.label) : l.required : l.invalid : void 0), o = a?.(n) || i || void 0, u = !!o;
-			return /* @__PURE__ */ p(d, {
+			let i = r.error?.message || (r.error ? r.error.type === "required" ? typeof c.label == "string" ? b(l.requiredWithLabel, c.label) : l.required : l.invalid : void 0), o = (typeof a == "function" ? a(n) : a) || i || void 0, u = typeof o == "string" ? o : i, d = !!o;
+			return /* @__PURE__ */ h(p, {
 				...c,
 				error: o,
-				htmlFor: n,
 				className: t("controlled-form-field--component", c.className),
-				children: s(e, o, u, r)
+				children: s(e, u, d, r)
 			});
 		}
 	});
 }
-y.displayName = "ControlledFormField";
+x.displayName = "ControlledFormField";
+//#endregion
+//#region src/components/base/forms/server-errors.ts
+function S(e, t, { fields: n, root: r = "root.server" }) {
+	if (!t || typeof t != "object" || Array.isArray(t)) return 0;
+	let i = new Set(n), a = [], o = 0;
+	for (let [n, r] of Object.entries(t)) {
+		let t = typeof r == "string" ? r.trim() ? r : void 0 : Array.isArray(r) && r.filter((e) => typeof e == "string" && e.trim() !== "").join("\n") || void 0;
+		t && (i.has(n) ? (e(n, {
+			type: "server",
+			message: t
+		}), o++) : a.push(t));
+	}
+	return a.length && (e(r, {
+		type: "server",
+		message: a.join("\n")
+	}), o++), o;
+}
 //#endregion
 //#region src/components/base/forms/workflow.tsx
-function b(e) {
+function C(e) {
 	return typeof e == "string" || typeof e == "number" || typeof e == "bigint";
 }
-function x({ title: e, description: n, actions: r, children: i, footer: a, surface: o = "card", className: s, contentClassName: l }) {
-	return /* @__PURE__ */ p(c, {
+function w({ title: e, description: n, actions: r, children: i, footer: a, surface: o = "card", padding: s, className: l, contentClassName: u }) {
+	return /* @__PURE__ */ h(c, {
 		"data-component": "form-section",
 		"data-slot": "form-section",
 		title: e,
@@ -54,36 +71,37 @@ function x({ title: e, description: n, actions: r, children: i, footer: a, surfa
 		headerAction: r,
 		footerSlot: a,
 		surface: o,
-		className: t("form-section--component", s),
-		contentClassName: t("form-section--content grid gap-space-xl", l),
+		padding: s,
+		className: t("form-section--component", l),
+		contentClassName: t("form-section--content grid", d.related, u),
 		children: i
 	});
 }
-function S({ children: e, leading: n, trailing: a, sticky: o = !1, className: s }) {
+function T({ children: e, leading: n, trailing: a, sticky: o = !1, className: s }) {
 	let c = a ?? e;
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ h("div", {
 		className: t("form-actions-bar--component @container/form-actions-bar", o && "sticky bottom-0 z-30", s),
-		children: /* @__PURE__ */ p("div", {
+		children: /* @__PURE__ */ h("div", {
 			"data-component": "form-actions-bar",
 			"data-slot": "form-actions-bar",
 			className: "form-actions-bar--row border-t border-border bg-background p-surface",
-			children: /* @__PURE__ */ m("div", {
+			children: /* @__PURE__ */ g("div", {
 				className: "form-actions-bar--layout flex min-w-0 flex-col gap-space-lg @md/form-actions-bar:flex-row @md/form-actions-bar:items-center @md/form-actions-bar:flex-nowrap",
-				children: [n != null && /* @__PURE__ */ p("div", {
+				children: [n != null && /* @__PURE__ */ h("div", {
 					"data-slot": "form-actions-leading",
 					className: "form-actions-bar--leading min-w-0 flex-1",
-					children: b(n) ? /* @__PURE__ */ p(r, {
+					children: C(n) ? /* @__PURE__ */ h(r, {
 						tag: "span",
 						size: "xs",
 						type: "secondary",
 						className: "form-actions-bar--leading-text",
 						children: n
 					}) : n
-				}), c != null && /* @__PURE__ */ p(i, {
+				}), c != null && /* @__PURE__ */ h(i, {
 					"data-slot": "form-actions-trailing",
 					wrap: !0,
 					direction: "horizontal",
-					gap: "md",
+					gap: u.commands,
 					justify: "end",
 					className: "form-actions-bar--trailing min-w-0 w-full max-w-full shrink-0 @md/form-actions-bar:ml-auto @md/form-actions-bar:w-auto @md/form-actions-bar:shrink",
 					children: c
@@ -92,53 +110,53 @@ function S({ children: e, leading: n, trailing: a, sticky: o = !1, className: s
 		})
 	});
 }
-function C({ title: e, description: n, errors: c = [], action: u, className: d }) {
-	return /* @__PURE__ */ m(s, {
+function E({ title: e, description: n, errors: c = [], action: u, className: d }) {
+	return /* @__PURE__ */ g(s, {
 		"data-component": "error-summary",
 		"data-slot": "error-summary",
 		tone: "destructive",
 		className: t("error-summary--component", d),
 		children: [
-			/* @__PURE__ */ p(l, { children: e }),
-			!!n && /* @__PURE__ */ p(a, { children: n }),
-			c.length > 0 && /* @__PURE__ */ p(i, {
-				render: /* @__PURE__ */ p("ul", {}),
+			/* @__PURE__ */ h(l, { children: e }),
+			!!n && /* @__PURE__ */ h(a, { children: n }),
+			c.length > 0 && /* @__PURE__ */ h(i, {
+				render: /* @__PURE__ */ h("ul", {}),
 				gap: "xs",
 				"data-slot": "error-summary-list",
 				className: "error-summary--list col-start-2 m-0 list-disc ps-space-xl text-sm text-muted-foreground",
-				children: c.map((e, t) => /* @__PURE__ */ p("li", { children: typeof e == "string" || typeof e == "number" || typeof e == "bigint" ? /* @__PURE__ */ p(r, {
+				children: c.map((e, t) => /* @__PURE__ */ h("li", { children: typeof e == "string" || typeof e == "number" || typeof e == "bigint" ? /* @__PURE__ */ h(r, {
 					tag: "span",
 					type: "secondary",
 					children: e
 				}) : e }, t))
 			}),
-			!!u && /* @__PURE__ */ p(o, { children: u })
+			!!u && /* @__PURE__ */ h(o, { children: u })
 		]
 	});
 }
-function w({ title: e, description: n, actions: r, tone: o = "warning", className: c }) {
-	return /* @__PURE__ */ m(s, {
+function D({ title: e, description: n, actions: r, tone: o = "warning", className: c }) {
+	return /* @__PURE__ */ g(s, {
 		"data-component": "dirty-state-banner",
 		"data-slot": "dirty-state-banner",
 		tone: o,
 		className: t("dirty-state-banner--component", c),
 		children: [
-			/* @__PURE__ */ p(l, { children: e }),
-			!!n && /* @__PURE__ */ p(a, { children: n }),
-			r != null && /* @__PURE__ */ p("div", {
+			/* @__PURE__ */ h(l, { children: e }),
+			!!n && /* @__PURE__ */ h(a, { children: n }),
+			r != null && /* @__PURE__ */ h("div", {
 				className: "dirty-state-banner--actions col-start-2 min-w-0 pt-space-sm",
-				children: /* @__PURE__ */ p(i, {
+				children: /* @__PURE__ */ h(i, {
 					direction: "horizontal",
 					wrap: !0,
-					gap: "sm",
+					gap: u.commands,
 					children: r
 				})
 			})
 		]
 	});
 }
-function T({ submitting: e = !1, dirty: r = !0, disableWhenPristine: i = !1, disabled: a, children: o, ...s }) {
-	return /* @__PURE__ */ p(n, {
+function O({ submitting: e = !1, dirty: r = !0, disableWhenPristine: i = !1, disabled: a, children: o, ...s }) {
+	return /* @__PURE__ */ h(n, {
 		tone: "primary",
 		...s,
 		"data-component": "submit-state-button",
@@ -152,43 +170,43 @@ function T({ submitting: e = !1, dirty: r = !0, disableWhenPristine: i = !1, dis
 }
 //#endregion
 //#region src/components/base/forms/operation-password-form.tsx
-function E(e) {
+function k(e) {
 	let { formId: t, onSubmit: n, errors: a, loading: o = !1, label: s } = e, c = ((e) => {
 		let t = a?.[e];
 		return Array.isArray(t) ? t[0] : t;
-	})("password"), l = c ? () => c : void 0, d = (Array.isArray(a?.general) ? a.general[0] : a?.general) || (Array.isArray(a?.server) ? a.server[0] : a?.server), h = f(() => ({ password: "" }), []), { handleSubmit: _, control: v } = g({ defaultValues: h }), b = async (e) => {
+	})("password"), l = c ? () => c : void 0, u = (Array.isArray(a?.general) ? a.general[0] : a?.general) || (Array.isArray(a?.server) ? a.server[0] : a?.server), d = m(() => ({ password: "" }), []), { handleSubmit: p, control: _ } = v({ defaultValues: d }), y = async (e) => {
 		await n({ password: e.password });
-	}, x = o;
-	return /* @__PURE__ */ m(i, {
-		render: /* @__PURE__ */ p("form", {}),
+	}, b = o;
+	return /* @__PURE__ */ g(i, {
+		render: /* @__PURE__ */ h("form", {}),
 		gap: "xl",
 		id: t,
-		onSubmit: _(b),
+		onSubmit: p(y),
 		className: "operation-password-form--component",
-		children: [!!d && /* @__PURE__ */ p(r, {
+		children: [!!u && /* @__PURE__ */ h(r, {
 			type: "error",
-			children: d
-		}), /* @__PURE__ */ p(y, {
+			children: u
+		}), /* @__PURE__ */ h(x, {
 			name: "password",
-			control: v,
+			control: _,
 			error: l,
 			label: s,
 			required: !0,
-			children: (e, t, n) => /* @__PURE__ */ p(u, {
+			children: (e, t, n) => /* @__PURE__ */ h(f, {
 				type: "password",
 				value: e.value ?? "",
 				onChange: e.onChange,
 				onBlur: e.onBlur,
 				name: e.name,
 				invalid: n,
-				disabled: x,
+				disabled: b,
 				autoFocus: !0
 			})
 		})]
 	});
 }
-E.displayName = "OperationPasswordForm";
+k.displayName = "OperationPasswordForm";
 //#endregion
-export { x as a, _ as c, S as i, w as n, T as o, C as r, y as s, E as t };
+export { w as a, x as c, T as i, y as l, D as n, O as o, E as r, S as s, k as t };
 
-//# sourceMappingURL=forms-B9G_xwzi.js.map
+//# sourceMappingURL=forms-BV5m5aQF.js.map

package/dist/forms-BV5m5aQF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms-BV5m5aQF.js","names":["Text","Stack","AlertDescription","AlertAction","Alert","Card","AlertTitle","compositionRhythm","compositionClasses","Input","FormField","defaultControlledFormFieldStrings","interpolateControlledFormFieldString","template","label","ControlledFormField","errorProp","stringsProp","chromeProps","strings","useStrings","Controller","validationError","fieldState","resolvedError","name","errorMessage","invalid","cn","children","field","applyServerErrors","errors","allowed","fields","rootMessages","applied","value","message","part","setError","root","isSimpleText","FormSection","actions","footer","className","contentClassName","FormActionsBar","trailing","sticky","leading","ErrorSummary","title","description","error","index","action","DirtyStateBanner","SubmitStateButton","props","Button","submitting","disabled","disableWhenPristine","dirty","OperationPasswordForm","passwordError","passwordErrorFn","topLevelError","defaultValues","useMemo","useForm","submit","onSubmit","values","loading","formId","handleSubmit"],"sources":["../src/components/base/forms/controlled-form-field.strings.ts","../src/components/base/forms/controlled-form-field.tsx","../src/components/base/forms/server-errors.ts","../src/components/base/forms/workflow.tsx","../src/components/base/forms/operation-password-form.tsx"],"sourcesContent":["export interface ControlledFormFieldStrings {\n\trequired: string;\n\trequiredWithLabel: string;\n\tinvalid: string;\n}\n\nexport const defaultControlledFormFieldStrings: ControlledFormFieldStrings = {\n\trequired: 'This field is required',\n\trequiredWithLabel: '{{label}} is required',\n\tinvalid: 'Invalid value',\n};\n\nexport function interpolateControlledFormFieldString(template: string, label: string) {\n\treturn template.replace(/\\{\\{\\s*label\\s*\\}\\}/g, label);\n}\n","/**\n * ControlledFormField — react-hook-form integration for the presentational\n * `FormField` component. Runtime state bindings stay in this module; the\n * published family still reports RHF for its exported bindings and types.\n */\nimport type { ComponentProps, ReactNode } from 'react';\nimport {\n\tController,\n\ttype Control,\n\ttype ControllerFieldState,\n\ttype ControllerRenderProps,\n\ttype FieldPath,\n\ttype FieldValues,\n\ttype RegisterOptions,\n} from 'react-hook-form';\n\nimport { FormField } from './form-field';\nimport {\n\tdefaultControlledFormFieldStrings,\n\tinterpolateControlledFormFieldString,\n\ttype ControlledFormFieldStrings,\n} from './controlled-form-field.strings';\nimport { useStrings, type StringsProp } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\ntype FieldChromeProps = Omit<\n\tComponentProps<typeof FormField>,\n\t'children' | 'error'\n>;\n\nexport type FormFieldErrorGetter<TName extends string> = (field: TName) => string | undefined;\n\nexport interface ControlledFormFieldProps<\n\tTFieldValues extends FieldValues,\n\tTName extends FieldPath<TFieldValues>,\n> extends FieldChromeProps {\n\t/** Field name in the react-hook-form schema. */\n\tname: TName;\n\t/** The form's `control` object from `useForm`. */\n\tcontrol: Control<TFieldValues>;\n\t/** Validation rules passed to react-hook-form. */\n\trules?: RegisterOptions<TFieldValues, TName>;\n\t/** Validation message, overriding the one derived from form state. */\n\terror?: ReactNode | FormFieldErrorGetter<TName>;\n\t/** Overrides the field's own copy. */\n\tstrings?: StringsProp<ControlledFormFieldStrings>;\n\tchildren: (\n\t\tfield: ControllerRenderProps<TFieldValues, TName>,\n\t\t/** Validation message, overriding the one derived from form state. */\n\t\terror: string | undefined,\n\t\tinvalid: boolean,\n\t\tfieldState: ControllerFieldState,\n\t) => ReactNode;\n}\n\nexport function ControlledFormField<\n\tTFieldValues extends FieldValues,\n\tTName extends FieldPath<TFieldValues>,\n>({\n\tname,\n\tcontrol,\n\trules,\n\terror: errorProp,\n\tstrings: stringsProp,\n\tchildren,\n\t...chromeProps\n}: ControlledFormFieldProps<TFieldValues, TName>) {\n\tconst strings = useStrings(defaultControlledFormFieldStrings, stringsProp);\n\n\treturn (\n\t\t<Controller\n\t\t\tname={name}\n\t\t\tcontrol={control}\n\t\t\trules={rules}\n\t\t\trender={({ field, fieldState }) => {\n\t\t\t\tconst validationError = fieldState.error?.message\n\t\t\t\t\t|| (fieldState.error\n\t\t\t\t\t\t? fieldState.error.type === 'required'\n\t\t\t\t\t\t\t? typeof chromeProps.label === 'string'\n\t\t\t\t\t\t\t\t? interpolateControlledFormFieldString(strings.requiredWithLabel, chromeProps.label)\n\t\t\t\t\t\t\t\t: strings.required\n\t\t\t\t\t\t\t: strings.invalid\n\t\t\t\t\t\t: undefined);\n\t\t\t\tconst customError = typeof errorProp === 'function' ? errorProp(name) : errorProp;\n\t\t\t\tconst resolvedError = customError || validationError || undefined;\n\t\t\t\t// Rich chrome does not widen the established string callback contract.\n\t\t\t\tconst errorMessage = typeof resolvedError === 'string' ? resolvedError : validationError;\n\t\t\t\tconst invalid = Boolean(resolvedError);\n\n\t\t\t\treturn (\n\t\t\t\t\t<FormField\n\t\t\t\t\t\t{...chromeProps}\n\t\t\t\t\t\terror={resolvedError}\n\t\t\t\t\t\tclassName={cn('controlled-form-field--component', chromeProps.className)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children(field, errorMessage, invalid, fieldState)}\n\t\t\t\t\t</FormField>\n\t\t\t\t);\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nControlledFormField.displayName = 'ControlledFormField';\n\nexport {\n\tdefaultControlledFormFieldStrings,\n\ttype ControlledFormFieldStrings,\n} from './controlled-form-field.strings';\n","import type { FieldPath, FieldValues, UseFormSetError } from 'react-hook-form';\n\n/** Flat server validation messages; transport libraries keep ownership of requests. */\nexport type ServerErrors<TName extends string = string> = Partial<Record<TName, string | readonly string[]>>;\n\nexport interface ApplyServerErrorsOptions<TFieldValues extends FieldValues> {\n\t/** Allowed schema paths. Unknown server keys are reported at the root. */\n\tfields: readonly FieldPath<TFieldValues>[];\n\t/** Root error path for unknown fields and general errors. Defaults to root.server. */\n\troot?: `root.${string}`;\n}\n\n/**\n * Apply an untrusted transport error bag without importing a transport or RHF at\n * runtime. The allowlist prevents unknown server keys from becoming form fields.\n * Invalid/empty messages are ignored; arrays retain every string message.\n * Returns the number of field/root errors applied.\n */\nexport function applyServerErrors<TFieldValues extends FieldValues>(\n\tsetError: UseFormSetError<TFieldValues>,\n\terrors: unknown,\n\t{ fields, root = 'root.server' }: ApplyServerErrorsOptions<TFieldValues>,\n): number {\n\tif (!errors || typeof errors !== 'object' || Array.isArray(errors)) return 0;\n\tconst allowed = new Set<string>(fields);\n\tconst rootMessages: string[] = [];\n\tlet applied = 0;\n\tfor (const [name, value] of Object.entries(errors)) {\n\t\tconst message = typeof value === 'string'\n\t\t\t? value.trim() ? value : undefined\n\t\t\t: Array.isArray(value) ? value.filter((part): part is string => typeof part === 'string' && part.trim() !== '').join('\\n') || undefined : undefined;\n\t\tif (!message) continue;\n\t\tif (allowed.has(name)) {\n\t\t\tsetError(name as FieldPath<TFieldValues>, { type: 'server', message });\n\t\t\tapplied++;\n\t\t} else rootMessages.push(message);\n\t}\n\tif (rootMessages.length) {\n\t\tsetError(root, { type: 'server', message: rootMessages.join('\\n') });\n\t\tapplied++;\n\t}\n\treturn applied;\n}\n","/** Form workflow primitives — section chrome, errors, dirty state, and submit state. */\nimport type { ReactNode } from 'react';\n\nimport { Button } from '../buttons';\nimport type { ButtonProps } from '../buttons';\nimport { Card, type CardProps } from '../cards';\nimport { Stack } from '../structure';\nimport { compositionClasses, compositionRhythm } from '../structure/composition.recipes';\nimport type { SmartCardSurface } from '../cards';\nimport { Alert, AlertAction, AlertDescription, AlertTitle } from '../feedback';\nimport type { AlertTone } from '../feedback';\nimport { Text } from '../../typography';\nimport { cn } from '../../../lib/utils';\n\nfunction isSimpleText(value: ReactNode): value is string | number | bigint {\n\treturn typeof value === 'string' || typeof value === 'number' || typeof value === 'bigint';\n}\n\nexport interface FormSectionProps {\n\t/** Section title. */\n\ttitle?: ReactNode;\n\t/** Supporting sentence under the title. */\n\tdescription?: ReactNode;\n\t/** Controls in the section header. */\n\tactions?: ReactNode;\n\tchildren?: ReactNode;\n\t/** Content below the section body. */\n\tfooter?: ReactNode;\n\t/** Outer chrome. Use `flat` with `padding=\"none\"` inside a padded Card. */\n\tsurface?: SmartCardSurface;\n\t/** Card region insets. Defaults to Card's ordinary inset; use `none` when the parent already owns padding. */\n\tpadding?: CardProps['padding'];\n\tclassName?: string;\n\t/** Merged onto the section body. */\n\tcontentClassName?: string;\n}\n\nexport function FormSection({\n\ttitle,\n\tdescription,\n\tactions,\n\tchildren,\n\tfooter,\n\tsurface = 'card',\n\tpadding,\n\tclassName,\n\tcontentClassName,\n}: FormSectionProps) {\n\treturn (\n\t\t<Card\n\t\t\tdata-component=\"form-section\"\n\t\t\tdata-slot=\"form-section\"\n\t\t\ttitle={title}\n\t\t\tdescription={description}\n\t\t\theaderAction={actions}\n\t\t\tfooterSlot={footer}\n\t\t\tsurface={surface}\n\t\t\tpadding={padding}\n\t\t\tclassName={cn('form-section--component', className)}\n\t\t\tcontentClassName={cn('form-section--content grid', compositionClasses.related, contentClassName)}\n\t\t>\n\t\t\t{children}\n\t\t</Card>\n\t);\n}\n\nexport interface FormActionsBarProps {\n\t/** Action content used when `trailing` is not provided. */\n\tchildren?: ReactNode;\n\t/** Optional status or context shown before the actions. Scalar copy uses secondary Typography. */\n\tleading?: ReactNode;\n\t/** Preferred action slot. When provided, it takes precedence over `children`. */\n\ttrailing?: ReactNode;\n\t/** Keep the bar attached to the bottom of its nearest scrolling ancestor. */\n\tsticky?: boolean;\n\tclassName?: string;\n}\n\n/** Responsive form-footer chrome for status and consumer-owned actions. */\nexport function FormActionsBar({\n\tchildren,\n\tleading,\n\ttrailing,\n\tsticky = false,\n\tclassName,\n}: FormActionsBarProps) {\n\tconst actions = trailing ?? children;\n\n\treturn (\n\t\t/*\n\t\t * Two elements, because the bar has to be measured and stick at the same\n\t\t * time and one element cannot do both. Its stack/row switch depends on its\n\t\t * own width — a form footer is as often in a drawer as at page width — and\n\t\t * an element cannot match its own container query, so the row has to sit\n\t\t * inside the measured box. `sticky` then has to live on the OUTER element:\n\t\t * a sticky child is confined to its parent's box, so a sticky row inside an\n\t\t * auto-height wrapper has nowhere to travel and silently stops sticking.\n\t\t */\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t'form-actions-bar--component @container/form-actions-bar',\n\t\t\t\tsticky && 'sticky bottom-0 z-30',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t<div\n\t\t\tdata-component=\"form-actions-bar\"\n\t\t\tdata-slot=\"form-actions-bar\"\n\t\t\t// Opaque, so a sticky bar covers content scrolling under it without a blur.\n\t\t\tclassName=\"form-actions-bar--row border-t border-border bg-background p-surface\"\n\t\t>\n\t\t<div className=\"form-actions-bar--layout flex min-w-0 flex-col gap-space-lg @md/form-actions-bar:flex-row @md/form-actions-bar:items-center @md/form-actions-bar:flex-nowrap\">\n\t\t\t{leading != null && (\n\t\t\t\t<div data-slot=\"form-actions-leading\" className=\"form-actions-bar--leading min-w-0 flex-1\">\n\t\t\t\t\t{isSimpleText(leading) ? (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\ttag=\"span\"\n\t\t\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\t\t\ttype=\"secondary\"\n\t\t\t\t\t\t\tclassName=\"form-actions-bar--leading-text\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{leading}\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) : leading}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{actions != null && (\n\t\t\t\t<Stack\n\t\t\t\t\tdata-slot=\"form-actions-trailing\"\n\t\t\t\t\twrap\n\t\t\t\t\tdirection=\"horizontal\"\n\t\t\t\t\tgap={compositionRhythm.commands}\n\t\t\t\t\tjustify=\"end\"\n\t\t\t\t\tclassName=\"form-actions-bar--trailing min-w-0 w-full max-w-full shrink-0 @md/form-actions-bar:ml-auto @md/form-actions-bar:w-auto @md/form-actions-bar:shrink\"\n\t\t\t\t>\n\t\t\t\t\t{actions}\n\t\t\t\t</Stack>\n\t\t\t)}\n\t\t</div>\n\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport interface ErrorSummaryProps {\n\t/** Section title. */\n\ttitle: ReactNode;\n\t/** Supporting sentence under the title. */\n\tdescription?: ReactNode;\n\t/** Validation messages listed in the error summary. */\n\terrors?: readonly ReactNode[];\n\t/** Control offered alongside the summary. */\n\taction?: ReactNode;\n\tclassName?: string;\n}\n\nexport function ErrorSummary({\n\ttitle,\n\tdescription,\n\terrors = [],\n\taction,\n\tclassName,\n}: ErrorSummaryProps) {\n\treturn (\n\t\t<Alert\n\t\t\tdata-component=\"error-summary\"\n\t\t\tdata-slot=\"error-summary\"\n\t\t\ttone=\"destructive\"\n\t\t\tclassName={cn('error-summary--component', className)}\n\t\t>\n\t\t\t<AlertTitle>{title}</AlertTitle>\n\t\t\t{!!description && <AlertDescription>{description}</AlertDescription>}\n\t\t\t{errors.length > 0 && (\n\t\t\t\t\t// The messages are the summary's content: they keep the description's\n\t\t\t\t\t// size and ink, and the bullets take that ink too.\n\t\t\t\t\t<Stack render={<ul />} gap=\"xs\" data-slot=\"error-summary-list\" className=\"error-summary--list col-start-2 m-0 list-disc ps-space-xl text-sm text-muted-foreground\">\n\t\t\t\t\t{errors.map((error, index) => (\n\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t{typeof error === 'string' || typeof error === 'number' || typeof error === 'bigint' ? (\n\t\t\t\t\t\t\t\t<Text tag=\"span\" type=\"secondary\">\n\t\t\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) : error}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t\t</Stack>\n\t\t\t)}\n\t\t\t{!!action && <AlertAction>{action}</AlertAction>}\n\t\t</Alert>\n\t);\n}\n\nexport interface DirtyStateBannerProps {\n\t/** Section title. */\n\ttitle: ReactNode;\n\t/** Supporting sentence under the title. */\n\tdescription?: ReactNode;\n\t/** Controls in the section header. */\n\tactions?: ReactNode;\n\t/** Semantic tone of the banner. */\n\ttone?: Extract<AlertTone, 'neutral' | 'info' | 'warning'>;\n\tclassName?: string;\n}\n\nexport function DirtyStateBanner({\n\ttitle,\n\tdescription,\n\tactions,\n\ttone = 'warning',\n\tclassName,\n}: DirtyStateBannerProps) {\n\treturn (\n\t\t<Alert\n\t\t\tdata-component=\"dirty-state-banner\"\n\t\t\tdata-slot=\"dirty-state-banner\"\n\t\t\ttone={tone}\n\t\t\tclassName={cn('dirty-state-banner--component', className)}\n\t\t>\n\t\t\t<AlertTitle>{title}</AlertTitle>\n\t\t\t{!!description && (\n\t\t\t\t<AlertDescription>\n\t\t\t\t\t{description}\n\t\t\t\t</AlertDescription>\n\t\t\t)}\n\t\t\t{actions != null && (\n\t\t\t\t<div className=\"dirty-state-banner--actions col-start-2 min-w-0 pt-space-sm\">\n\t\t\t\t\t<Stack direction=\"horizontal\" wrap gap={compositionRhythm.commands}>{actions}</Stack>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Alert>\n\t);\n}\n\nexport interface SubmitStateButtonProps extends Omit<ButtonProps, 'loading'> {\n\t/** Semantic color. Defaults to `primary`: submitting is the form's main command. */\n\ttone?: ButtonProps['tone'];\n\t/** Shows the pending state and blocks repeat submissions. */\n\tsubmitting?: boolean;\n\t/** Whether the form has unsaved changes. */\n\tdirty?: boolean;\n\t/** Disables submit until `dirty` is true, so a clean form cannot be re-saved. */\n\tdisableWhenPristine?: boolean;\n}\n\nexport function SubmitStateButton({\n\tsubmitting = false,\n\tdirty = true,\n\tdisableWhenPristine = false,\n\tdisabled,\n\tchildren,\n\t...props\n}: SubmitStateButtonProps) {\n\treturn (\n\t\t<Button\n\t\t\t// Submitting is the form's main command; props can still choose another tone.\n\t\t\ttone=\"primary\"\n\t\t\t{...props}\n\t\t\tdata-component=\"submit-state-button\"\n\t\t\tdata-slot=\"submit-state-button\"\n\t\t\ttype={props.type ?? 'submit'}\n\t\t\tloading={submitting}\n\t\t\tdisabled={disabled || (disableWhenPristine && !dirty)}\n\t\t\tclassName={cn('submit-state-button--component', props.className)}\n\t\t>\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n","import { useMemo } from 'react';\nimport type { SubmitHandler } from 'react-hook-form';\nimport { useForm } from 'react-hook-form';\n\nimport { ControlledFormField } from './controlled-form-field';\nimport { Input } from '../text-inputs';\nimport { Stack } from '../structure';\nimport { Text } from '../../typography';\n\nexport type ErrorBag = Record<string, string | string[] | undefined>;\n\nexport interface OperationPasswordFormProps {\n\tformId: string;\n\tonSubmit: (data: { password: string }) => Promise<void>;\n\terrors?: ErrorBag;\n\t/** Shows the pending indicator. */\n\tloading?: boolean;\n\t/** Display label. */\n\tlabel: string;\n}\n\ninterface PasswordFormValues {\n\tpassword: string;\n}\n\nexport function OperationPasswordForm(props: OperationPasswordFormProps) {\n\tconst { formId, onSubmit, errors, loading = false, label } = props;\n\n\tconst getError = (field: keyof PasswordFormValues): string | undefined => {\n\t\tconst value = errors?.[field];\n\t\treturn Array.isArray(value) ? value[0] : value;\n\t};\n\tconst passwordError = getError('password');\n\tconst passwordErrorFn = passwordError ? () => passwordError : undefined;\n\n\tconst topLevelError =\n\t\t(Array.isArray(errors?.general) ? errors.general[0] : errors?.general) ||\n\t\t(Array.isArray(errors?.server) ? errors.server[0] : errors?.server);\n\n\tconst defaultValues = useMemo<PasswordFormValues>(() => ({ password: '' }), []);\n\n\tconst { handleSubmit, control } = useForm<PasswordFormValues>({ defaultValues });\n\n\tconst submit: SubmitHandler<PasswordFormValues> = async (values) => {\n\t\tawait onSubmit({ password: values.password });\n\t};\n\n\tconst disabled = loading;\n\n\treturn (\n\t\t<Stack\n\t\t\trender={<form />}\n\t\t\tgap=\"xl\"\n\t\t\tid={formId}\n\t\t\tonSubmit={handleSubmit(submit)}\n\t\t\tclassName=\"operation-password-form--component\"\n\t\t>\n\t\t\t{Boolean(topLevelError) && (\n\t\t\t\t<Text\n\t\t\t\t\ttype=\"error\"\n\t\t\t\t>\n\t\t\t\t\t{topLevelError}\n\t\t\t\t</Text>\n\t\t\t)}\n\n\t\t\t<ControlledFormField\n\t\t\t\tname=\"password\"\n\t\t\t\tcontrol={control}\n\t\t\t\terror={passwordErrorFn}\n\t\t\t\tlabel={label}\n\t\t\t\trequired\n\t\t\t>\n\t\t\t\t{(field, _error, invalid) => (\n\t\t\t\t\t<Input\n\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\tvalue={field.value ?? ''}\n\t\t\t\t\t\tonChange={field.onChange}\n\t\t\t\t\t\tonBlur={field.onBlur}\n\t\t\t\t\t\tname={field.name}\n\t\t\t\t\t\tinvalid={invalid}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</ControlledFormField>\n\t\t</Stack>\n\t);\n}\n\nOperationPasswordForm.displayName = 'OperationPasswordForm';\n"],"mappings":"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"}