@keboola/design 11.0.0 → 11.0.1

package/dist/Form-BDCef6O9.js

@@ -0,0 +1,371 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Tooltip } from "./utils-D0c5VAyF.js";
+import { Info } from "./icons-Cek151jC.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { Label } from "./internal/components/Label.js";
+import { TextInput } from "./TextInput-BGed-V13.js";
+import { Switch } from "./Switch-CX2A0v50.js";
+import { Select } from "./Select-4YX38G5h.js";
+import { Checkbox } from "./Checkbox-GJ8-srt4.js";
+import { Textarea } from "./internal/blocks/Textarea.js";
+import { NumberInput } from "./internal/blocks/NumberInput.js";
+import { PasswordInput } from "./internal/blocks/PasswordInput.js";
+import { OtpInput } from "./OtpInput-CbbymqYs.js";
+import { FormGroup } from "./FormGroup-S9mPNHKH.js";
+import { Alert } from "./Alert-DfZq9kGe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
+//#region src/blocks/Form/contexts.ts
+const { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
+//#endregion
+//#region src/blocks/Form/components/FormBody.tsx
+const FormBody = ({ children, className, ...formProps }) => {
+	const form = useFormContext();
+	return /* @__PURE__ */ jsx("form", {
+		...formProps,
+		className: cn("tw:flex tw:flex-col tw:gap-4", className),
+		onSubmit: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			form.handleSubmit();
+		},
+		children
+	});
+};
+//#endregion
+//#region src/blocks/Form/components/SubmitButton.tsx
+const SubmitButton = ({ children = "Submit", ...buttonProps }) => {
+	const form = useFormContext();
+	return /* @__PURE__ */ jsx(form.Subscribe, {
+		selector: (state) => ({
+			isSubmitting: state.isSubmitting,
+			canSubmit: state.canSubmit
+		}),
+		children: ({ isSubmitting, canSubmit }) => /* @__PURE__ */ jsx(Button, {
+			...buttonProps,
+			type: "submit",
+			isLoading: isSubmitting,
+			disabled: !canSubmit || isSubmitting,
+			children
+		})
+	});
+};
+//#endregion
+//#region src/blocks/Form/components/SubmitErrorAlert.tsx
+/**
+* Renders the form-level submit error (set via `setSubmitError` → `errorMap.onSubmit`) as an error
+* `Alert`. Place inside `form.FormBody`, typically just above the submit button. Renders nothing when
+* there is no submit error.
+*/
+const SubmitErrorAlert = () => {
+	const form = useFormContext();
+	return /* @__PURE__ */ jsx(form.Subscribe, {
+		selector: (state) => state.errorMap.onSubmit,
+		children: (submitError) => typeof submitError === "string" ? /* @__PURE__ */ jsx(Alert, {
+			variant: "error",
+			title: submitError
+		}) : null
+	});
+};
+//#endregion
+//#region src/blocks/Form/connectors/FieldItem.tsx
+/**
+* Shared frame for a form field: label (+ required marker + tooltip), the control, and help/error
+* text. It reads the field from context and owns everything derivable — validity, the error/help
+* ids, and the control's `aria-*` wiring — so a connector only picks a control and binds its value.
+*/
+const FieldItem = ({ label, action, required, requiredMark = "required", help, tooltip, className, "aria-describedby": ariaDescribedBy, children }) => {
+	const field = useFieldContext();
+	const { errors, isTouched } = field.state.meta;
+	const isInvalid = isTouched && errors.length > 0;
+	const errorId = `${field.name}-error`;
+	const descriptionId = `${field.name}-description`;
+	const describedBy = [
+		ariaDescribedBy,
+		!!help && descriptionId,
+		isInvalid && errorId
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs(FormGroup, {
+		className,
+		children: [
+			(label || action) && /* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:items-center tw:justify-between tw:gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:items-center tw:gap-1",
+					children: [label && /* @__PURE__ */ jsxs(Label, {
+						htmlFor: field.name,
+						children: [
+							label,
+							requiredMark === "required" && required && /* @__PURE__ */ jsx(Label.Required, {}),
+							requiredMark === "optional" && !required && /* @__PURE__ */ jsx(Label.Optional, {})
+						]
+					}), tooltip && /* @__PURE__ */ jsx(Tooltip, {
+						tooltip,
+						placement: "top",
+						triggerAsChild: true,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": typeof label === "string" ? `More information about ${label}` : "More information",
+							className: "tw:text-muted-foreground tw:focus:outline-hidden tw:focus-visible:text-primary tailwindcss-preflight",
+							children: /* @__PURE__ */ jsx(Info, { className: "tw:size-3" })
+						})
+					})]
+				}), action]
+			}),
+			children({
+				id: field.name,
+				name: field.name,
+				"aria-required": required || void 0,
+				"aria-invalid": isInvalid || void 0,
+				"aria-describedby": describedBy
+			}),
+			(help || isInvalid) && /* @__PURE__ */ jsxs("div", { children: [help && /* @__PURE__ */ jsx(FormGroup.Help, {
+				id: descriptionId,
+				children: help
+			}), isInvalid && /* @__PURE__ */ jsx(FormGroup.Error, {
+				id: errorId,
+				errors
+			})] })
+		]
+	});
+};
+//#endregion
+//#region src/blocks/Form/connectors/CheckboxField.tsx
+const CheckboxField = ({ className, children, ...checkboxProps }) => {
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(FieldItem, {
+		className,
+		children: (control) => /* @__PURE__ */ jsx(Checkbox, {
+			...checkboxProps,
+			...control,
+			checked: field.state.value ?? false,
+			onCheckedChange: (checked) => field.handleChange(checked === true),
+			onBlur: field.handleBlur,
+			children
+		})
+	});
+};
+//#endregion
+//#region src/blocks/Form/connectors/NumberField.tsx
+const NumberField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }) => {
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(FieldItem, {
+		label,
+		action,
+		required,
+		requiredMark,
+		help,
+		tooltip,
+		className,
+		"aria-describedby": ariaDescribedBy,
+		children: (control) => /* @__PURE__ */ jsx(NumberInput, {
+			...inputProps,
+			...control,
+			value: field.state.value ?? null,
+			onValueChange: field.handleChange,
+			onBlur: field.handleBlur
+		})
+	});
+};
+//#endregion
+//#region src/blocks/Form/connectors/OtpInputField.tsx
+const OtpInputField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, maxLength, ...otpProps }) => {
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(FieldItem, {
+		label,
+		action,
+		required,
+		requiredMark,
+		help,
+		tooltip,
+		className,
+		"aria-describedby": ariaDescribedBy,
+		children: (control) => /* @__PURE__ */ jsx(OtpInput, {
+			...otpProps,
+			...control,
+			maxLength,
+			value: field.state.value ?? "",
+			onChange: field.handleChange,
+			onBlur: field.handleBlur,
+			children: /* @__PURE__ */ jsx(OtpInput.Group, { children: Array.from({ length: maxLength }, (_, index) => /* @__PURE__ */ jsx(OtpInput.Slot, { index }, index)) })
+		})
+	});
+};
+//#endregion
+//#region src/blocks/Form/connectors/PasswordField.tsx
+const PasswordField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }) => {
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(FieldItem, {
+		label,
+		action,
+		required,
+		requiredMark,
+		help,
+		tooltip,
+		className,
+		"aria-describedby": ariaDescribedBy,
+		children: (control) => /* @__PURE__ */ jsx(PasswordInput, {
+			...inputProps,
+			...control,
+			value: field.state.value ?? "",
+			onValueChange: field.handleChange,
+			onBlur: field.handleBlur
+		})
+	});
+};
+//#endregion
+//#region src/blocks/Form/connectors/SelectField.tsx
+const SelectField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, triggerClassName, ...selectProps }) => {
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(FieldItem, {
+		label,
+		action,
+		required,
+		requiredMark,
+		help,
+		tooltip,
+		className,
+		"aria-describedby": ariaDescribedBy,
+		children: (control) => /* @__PURE__ */ jsx(Select, {
+			...selectProps,
+			...control,
+			className: triggerClassName ?? "tw:w-full",
+			value: field.state.value ?? "",
+			onValueChange: field.handleChange,
+			onBlur: field.handleBlur
+		})
+	});
+};
+//#endregion
+//#region src/blocks/Form/connectors/SwitchField.tsx
+const SwitchField = ({ className, children, ...switchProps }) => {
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(FieldItem, {
+		className,
+		children: (control) => /* @__PURE__ */ jsx(Switch, {
+			...switchProps,
+			...control,
+			checked: field.state.value ?? false,
+			onCheckedChange: field.handleChange,
+			onBlur: field.handleBlur,
+			children
+		})
+	});
+};
+//#endregion
+//#region src/blocks/Form/connectors/TextareaField.tsx
+const TextareaField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }) => {
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(FieldItem, {
+		label,
+		action,
+		required,
+		requiredMark,
+		help,
+		tooltip,
+		className,
+		"aria-describedby": ariaDescribedBy,
+		children: (control) => /* @__PURE__ */ jsx(Textarea, {
+			...inputProps,
+			...control,
+			value: field.state.value ?? "",
+			onValueChange: field.handleChange,
+			onBlur: field.handleBlur
+		})
+	});
+};
+//#endregion
+//#region src/blocks/Form/connectors/TextField.tsx
+const TextField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }) => {
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(FieldItem, {
+		label,
+		action,
+		required,
+		requiredMark,
+		help,
+		tooltip,
+		className,
+		"aria-describedby": ariaDescribedBy,
+		children: (control) => /* @__PURE__ */ jsx(TextInput, {
+			...inputProps,
+			...control,
+			value: field.state.value ?? "",
+			onValueChange: field.handleChange,
+			onBlur: field.handleBlur
+		})
+	});
+};
+//#endregion
+//#region src/blocks/Form/formHook.ts
+/**
+* Typed form hook + `withForm` binding for the design system.
+*
+* **When to use:** any form layout that has validation, server-side errors, or a submit state — pages,
+* modals, drawers, multi-step wizards. Use `useAppForm({ defaultValues, validators, onSubmit })` at the
+* top of the form component, then render the typed `field.TextField` / `field.NumberField` /
+* `field.PasswordField` / `field.TextareaField` / `field.SelectField` / `field.CheckboxField` /
+* `field.SwitchField` connectors inside `form.AppForm` → `form.FormBody`. Submit via `form.SubmitButton`.
+* **When NOT to use:** for a single uncontrolled `<input>` use `TextInput` directly; for a bare label + input
+* pair without validation use `FormGroup` + `FormGroup.TextInput`.
+* **Composition:** schema-library agnostic — pass any [Standard Schema](https://standardschema.dev/) validator
+* (zod, valibot, …) in the consuming app. Server errors come from `setServerFieldErrors` (also re-exported).
+*
+* @see RECIPES.md#modal-form — for the canonical form-in-modal composition
+*/
+const { useAppForm, withForm } = createFormHook({
+	fieldContext,
+	formContext,
+	fieldComponents: {
+		TextField,
+		NumberField,
+		PasswordField,
+		TextareaField,
+		SelectField,
+		CheckboxField,
+		SwitchField,
+		OtpInputField
+	},
+	formComponents: {
+		FormBody,
+		SubmitButton,
+		SubmitErrorAlert
+	}
+});
+//#endregion
+//#region src/blocks/Form/setServerFieldErrors.ts
+/**
+* Map a list of server-returned field errors onto a TanStack form instance.
+* Marks each field as touched so the error renders immediately.
+*/
+const setServerFieldErrors = (form, errors) => {
+	for (const { field, message } of errors) form.setFieldMeta(field, (meta) => ({
+		...meta,
+		isTouched: true,
+		errors: [message],
+		errorMap: {
+			...meta.errorMap,
+			onServer: message
+		}
+	}));
+};
+//#endregion
+//#region src/blocks/Form/setSubmitError.ts
+/**
+* Set a **form-level** submit error on a TanStack form instance — a failed submission that isn't tied
+* to a single field (bad credentials, 5xx, network). Stored on `errorMap.onSubmit` and rendered by
+* `SubmitErrorAlert`. For field-specific server errors use `setServerFieldErrors` instead.
+*
+* Note: any error entry makes the form "invalid", so pair this with `canSubmitWhenInvalid: true` on
+* the form to keep the submit button retryable (a resubmit re-runs the validators and clears it).
+*/
+const setSubmitError = (form, message) => {
+	form.setErrorMap({ onSubmit: {
+		form: message,
+		fields: {}
+	} });
+};
+//#endregion
+export { setServerFieldErrors, setSubmitError, useAppForm, withForm };
+
+//# sourceMappingURL=Form-BDCef6O9.js.map

package/dist/Form-BDCef6O9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form-BDCef6O9.js","names":[],"sources":["../src/blocks/Form/contexts.ts","../src/blocks/Form/components/FormBody.tsx","../src/blocks/Form/components/SubmitButton.tsx","../src/blocks/Form/components/SubmitErrorAlert.tsx","../src/blocks/Form/connectors/FieldItem.tsx","../src/blocks/Form/connectors/CheckboxField.tsx","../src/blocks/Form/connectors/NumberField.tsx","../src/blocks/Form/connectors/OtpInputField.tsx","../src/blocks/Form/connectors/PasswordField.tsx","../src/blocks/Form/connectors/SelectField.tsx","../src/blocks/Form/connectors/SwitchField.tsx","../src/blocks/Form/connectors/TextareaField.tsx","../src/blocks/Form/connectors/TextField.tsx","../src/blocks/Form/formHook.ts","../src/blocks/Form/setServerFieldErrors.ts","../src/blocks/Form/setSubmitError.ts"],"sourcesContent":["import { createFormHookContexts } from '@tanstack/react-form';\n\nexport const { fieldContext, useFieldContext, formContext, useFormContext } =\n  createFormHookContexts();\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../../utils';\nimport { useFormContext } from '../contexts';\n\ntype Props = {\n  children: ReactNode;\n} & Omit<ComponentProps<'form'>, 'onSubmit'>;\n\nexport const FormBody = ({ children, className, ...formProps }: Props) => {\n  const form = useFormContext();\n\n  return (\n    <form\n      {...formProps}\n      className={cn('tw:flex tw:flex-col tw:gap-4', className)}\n      onSubmit={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        void form.handleSubmit();\n      }}\n    >\n      {children}\n    </form>\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../../components/Button';\nimport { useFormContext } from '../contexts';\n\ntype Props = {\n  children?: ReactNode;\n} & Omit<ComponentProps<typeof Button>, 'type' | 'isLoading' | 'disabled'>;\n\nexport const SubmitButton = ({ children = 'Submit', ...buttonProps }: Props) => {\n  const form = useFormContext();\n\n  return (\n    <form.Subscribe\n      selector={(state) => ({ isSubmitting: state.isSubmitting, canSubmit: state.canSubmit })}\n    >\n      {({ isSubmitting, canSubmit }) => (\n        <Button\n          {...buttonProps}\n          type=\"submit\"\n          isLoading={isSubmitting}\n          disabled={!canSubmit || isSubmitting}\n        >\n          {children}\n        </Button>\n      )}\n    </form.Subscribe>\n  );\n};\n","import { Alert } from '../../../components/Alert';\nimport { useFormContext } from '../contexts';\n\n/**\n * Renders the form-level submit error (set via `setSubmitError` → `errorMap.onSubmit`) as an error\n * `Alert`. Place inside `form.FormBody`, typically just above the submit button. Renders nothing when\n * there is no submit error.\n */\nexport const SubmitErrorAlert = () => {\n  const form = useFormContext();\n\n  return (\n    <form.Subscribe selector={(state) => state.errorMap.onSubmit}>\n      {(submitError) =>\n        typeof submitError === 'string' ? <Alert variant=\"error\" title={submitError} /> : null\n      }\n    </form.Subscribe>\n  );\n};\n","import type { ReactNode } from 'react';\n\nimport { Label } from '../../../components/Label';\nimport { Tooltip } from '../../../components/Tooltip';\nimport { Info } from '../../../icons';\nimport { FormGroup } from '../../FormGroup';\nimport { useFieldContext } from '../contexts';\n\n/**\n * The a11y wiring `FieldItem` derives from the field and hands back to the control — spread it onto\n * whatever element the field renders. Callers never author these attributes themselves.\n */\ntype FieldControlProps = {\n  id: string;\n  name: string;\n  'aria-required'?: true;\n  'aria-invalid'?: true;\n  'aria-describedby'?: string;\n};\n\n/** Which marker sits next to the label. Purely visual — `aria-required` is driven by `required`. */\ntype RequiredMark = 'required' | 'optional' | 'hidden';\n\ntype Props = {\n  label?: ReactNode;\n  /**\n   * Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a\n   * \"Forgot password?\" link beside a Password label. Presentational placement only; it is a sibling\n   * of the `<Label>`, not part of the field's accessible name. Provide an interactive element\n   * (`ButtonInline` / `Link`).\n   */\n  action?: ReactNode;\n  required?: boolean;\n  /**\n   * Which marker to show beside the label — gated by `required` so it never lies: `'required'`\n   * renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it\n   * is not; `'hidden'` renders neither. Defaults to `'required'`.\n   */\n  requiredMark?: RequiredMark;\n  help?: ReactNode;\n  tooltip?: ReactNode;\n  className?: string;\n  'aria-describedby'?: string;\n  children: (control: FieldControlProps) => ReactNode;\n};\n\nexport type FieldItemProps = Omit<Props, 'children'>;\n\n/**\n * Shared frame for a form field: label (+ required marker + tooltip), the control, and help/error\n * text. It reads the field from context and owns everything derivable — validity, the error/help\n * ids, and the control's `aria-*` wiring — so a connector only picks a control and binds its value.\n */\nexport const FieldItem = ({\n  label,\n  action,\n  required,\n  requiredMark = 'required',\n  help,\n  tooltip,\n  className,\n  'aria-describedby': ariaDescribedBy,\n  children,\n}: Props) => {\n  const field = useFieldContext();\n  const { errors, isTouched } = field.state.meta;\n  const isInvalid = isTouched && errors.length > 0;\n\n  const errorId = `${field.name}-error`;\n  const descriptionId = `${field.name}-description`;\n  // Help and error are not exclusive — link the control to whichever are present. Space-delimited\n  // ARIA idref list; falsy entries dropped, and `undefined` when empty so the attr is omitted.\n  const describedBy =\n    [ariaDescribedBy, !!help && descriptionId, isInvalid && errorId].filter(Boolean).join(' ') ||\n    undefined;\n\n  return (\n    <FormGroup className={className}>\n      {(label || action) && (\n        <div className=\"tw:flex tw:items-center tw:justify-between tw:gap-2\">\n          <div className=\"tw:flex tw:items-center tw:gap-1\">\n            {/* Marker binds to the label text; the interactive tooltip button is a sibling. */}\n            {label && (\n              <Label htmlFor={field.name}>\n                {label}\n                {/* Marker follows both flags: `*` only when actually required, `(optional)` only\n                    when not — a mismatched marker would lie. `hidden` shows neither. */}\n                {requiredMark === 'required' && required && <Label.Required />}\n                {requiredMark === 'optional' && !required && <Label.Optional />}\n              </Label>\n            )}\n\n            {tooltip && (\n              <Tooltip tooltip={tooltip} placement=\"top\" triggerAsChild>\n                <button\n                  type=\"button\"\n                  aria-label={\n                    typeof label === 'string'\n                      ? `More information about ${label}`\n                      : 'More information'\n                  }\n                  className=\"tw:text-muted-foreground tw:focus:outline-hidden tw:focus-visible:text-primary tailwindcss-preflight\"\n                >\n                  <Info className=\"tw:size-3\" />\n                </button>\n              </Tooltip>\n            )}\n          </div>\n\n          {action}\n        </div>\n      )}\n\n      {children({\n        id: field.name,\n        name: field.name,\n        'aria-required': required || undefined,\n        'aria-invalid': isInvalid || undefined,\n        'aria-describedby': describedBy,\n      })}\n\n      {(help || isInvalid) && (\n        <div>\n          {help && <FormGroup.Help id={descriptionId}>{help}</FormGroup.Help>}\n          {isInvalid && <FormGroup.Error id={errorId} errors={errors} />}\n        </div>\n      )}\n    </FormGroup>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { Checkbox } from '../../../components/Checkbox';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\n// Checkbox owns its own label + description (via children), so only the wrapper className applies.\ntype Props = Pick<FieldItemProps, 'className'> &\n  Omit<ComponentProps<typeof Checkbox>, 'id' | 'name' | 'checked' | 'onCheckedChange'>;\n\nexport const CheckboxField = ({ className, children, ...checkboxProps }: Props) => {\n  // Strictly boolean: coerce Radix's `'indeterminate'` to `false` so a non-boolean never leaks into\n  // form state (submit payloads / validators). `'indeterminate'` stays a purely visual state.\n  const field = useFieldContext<boolean>();\n\n  return (\n    <FieldItem className={className}>\n      {(control) => (\n        <Checkbox\n          {...checkboxProps}\n          {...control}\n          checked={field.state.value ?? false}\n          onCheckedChange={(checked) => field.handleChange(checked === true)}\n          onBlur={field.handleBlur}\n        >\n          {children}\n        </Checkbox>\n      )}\n    </FieldItem>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport type { FormGroup } from '../../FormGroup';\nimport { NumberInput } from '../../NumberInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n  Omit<\n    ComponentProps<typeof FormGroup.NumberInput>,\n    'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'\n  >;\n\nexport const NumberField = ({\n  label,\n  action,\n  required,\n  requiredMark,\n  help,\n  tooltip,\n  className,\n  'aria-describedby': ariaDescribedBy,\n  ...inputProps\n}: Props) => {\n  const field = useFieldContext<number | null>();\n\n  return (\n    <FieldItem\n      label={label}\n      action={action}\n      required={required}\n      requiredMark={requiredMark}\n      help={help}\n      tooltip={tooltip}\n      className={className}\n      aria-describedby={ariaDescribedBy}\n    >\n      {(control) => (\n        <NumberInput\n          {...inputProps}\n          {...control}\n          value={field.state.value ?? null}\n          onValueChange={field.handleChange}\n          onBlur={field.handleBlur}\n        />\n      )}\n    </FieldItem>\n  );\n};\n","import { OtpInput, type OtpInputProps } from '../../OtpInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n  Omit<\n    OtpInputProps,\n    | 'value'\n    | 'onChange'\n    | 'children'\n    | 'id'\n    | 'name'\n    | 'aria-describedby'\n    | 'aria-required'\n    | 'aria-invalid'\n  >;\n\nexport const OtpInputField = ({\n  label,\n  action,\n  required,\n  requiredMark,\n  help,\n  tooltip,\n  className,\n  'aria-describedby': ariaDescribedBy,\n  maxLength,\n  ...otpProps\n}: Props) => {\n  const field = useFieldContext<string>();\n\n  return (\n    <FieldItem\n      label={label}\n      action={action}\n      required={required}\n      requiredMark={requiredMark}\n      help={help}\n      tooltip={tooltip}\n      className={className}\n      aria-describedby={ariaDescribedBy}\n    >\n      {(control) => (\n        <OtpInput\n          {...otpProps}\n          {...control}\n          maxLength={maxLength}\n          value={field.state.value ?? ''}\n          onChange={field.handleChange}\n          onBlur={field.handleBlur}\n        >\n          <OtpInput.Group>\n            {Array.from({ length: maxLength }, (_, index) => (\n              <OtpInput.Slot key={index} index={index} />\n            ))}\n          </OtpInput.Group>\n        </OtpInput>\n      )}\n    </FieldItem>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { PasswordInput } from '../../PasswordInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n  Omit<ComponentProps<typeof PasswordInput>, 'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'>;\n\nexport const PasswordField = ({\n  label,\n  action,\n  required,\n  requiredMark,\n  help,\n  tooltip,\n  className,\n  'aria-describedby': ariaDescribedBy,\n  ...inputProps\n}: Props) => {\n  const field = useFieldContext<string>();\n\n  return (\n    <FieldItem\n      label={label}\n      action={action}\n      required={required}\n      requiredMark={requiredMark}\n      help={help}\n      tooltip={tooltip}\n      className={className}\n      aria-describedby={ariaDescribedBy}\n    >\n      {(control) => (\n        <PasswordInput\n          {...inputProps}\n          {...control}\n          value={field.state.value ?? ''}\n          onValueChange={field.handleChange}\n          onBlur={field.handleBlur}\n        />\n      )}\n    </FieldItem>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { Select, type SelectItem, type SelectItemGroup } from '../../../components/Select';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n  Omit<\n    ComponentProps<typeof Select>,\n    // Owned by the field / `FieldItem` — see the connector rules in AGENTS.md.\n    | 'id'\n    | 'name'\n    | 'value'\n    | 'defaultValue'\n    | 'onValueChange'\n    | 'onBlur'\n    | 'aria-describedby'\n    | 'aria-invalid'\n    | 'aria-required'\n    // `className` styles the field frame, so the trigger gets its own prop below.\n    | 'className'\n    | 'items'\n  > & {\n    items: readonly (SelectItem | SelectItemGroup)[];\n    triggerClassName?: string;\n  };\n\nexport const SelectField = ({\n  label,\n  action,\n  required,\n  requiredMark,\n  help,\n  tooltip,\n  className,\n  'aria-describedby': ariaDescribedBy,\n  triggerClassName,\n  ...selectProps\n}: Props) => {\n  const field = useFieldContext<string>();\n\n  return (\n    <FieldItem\n      label={label}\n      action={action}\n      required={required}\n      requiredMark={requiredMark}\n      help={help}\n      tooltip={tooltip}\n      className={className}\n      aria-describedby={ariaDescribedBy}\n    >\n      {(control) => (\n        // `required` deliberately stays on `FieldItem` (which turns it into `aria-required` via\n        // `control`) and is not forwarded to the Radix root: a required hidden native select would\n        // fail browser constraint validation and swallow the submit event before the form sees it.\n        <Select\n          {...selectProps}\n          {...control}\n          className={triggerClassName ?? 'tw:w-full'}\n          value={field.state.value ?? ''}\n          onValueChange={field.handleChange}\n          onBlur={field.handleBlur}\n        />\n      )}\n    </FieldItem>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { Switch } from '../../../components/Switch';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\n// Switch owns its own label + description (via children), so only the wrapper className applies.\ntype Props = Pick<FieldItemProps, 'className'> &\n  Omit<ComponentProps<typeof Switch>, 'id' | 'name' | 'checked' | 'onCheckedChange'>;\n\nexport const SwitchField = ({ className, children, ...switchProps }: Props) => {\n  const field = useFieldContext<boolean>();\n\n  return (\n    <FieldItem className={className}>\n      {(control) => (\n        <Switch\n          {...switchProps}\n          {...control}\n          checked={field.state.value ?? false}\n          onCheckedChange={field.handleChange}\n          onBlur={field.handleBlur}\n        >\n          {children}\n        </Switch>\n      )}\n    </FieldItem>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport type { FormGroup } from '../../FormGroup';\nimport { Textarea } from '../../Textarea';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n  Omit<\n    ComponentProps<typeof FormGroup.Textarea>,\n    'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'\n  >;\n\nexport const TextareaField = ({\n  label,\n  action,\n  required,\n  requiredMark,\n  help,\n  tooltip,\n  className,\n  'aria-describedby': ariaDescribedBy,\n  ...inputProps\n}: Props) => {\n  const field = useFieldContext<string>();\n\n  return (\n    <FieldItem\n      label={label}\n      action={action}\n      required={required}\n      requiredMark={requiredMark}\n      help={help}\n      tooltip={tooltip}\n      className={className}\n      aria-describedby={ariaDescribedBy}\n    >\n      {(control) => (\n        <Textarea\n          {...inputProps}\n          {...control}\n          value={field.state.value ?? ''}\n          onValueChange={field.handleChange}\n          onBlur={field.handleBlur}\n        />\n      )}\n    </FieldItem>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport type { FormGroup } from '../../FormGroup';\nimport { TextInput } from '../../TextInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n  Omit<ComponentProps<typeof FormGroup.TextInput>, 'id' | 'name' | 'value' | 'onChange' | 'onBlur'>;\n\nexport const TextField = ({\n  label,\n  action,\n  required,\n  requiredMark,\n  help,\n  tooltip,\n  className,\n  'aria-describedby': ariaDescribedBy,\n  ...inputProps\n}: Props) => {\n  const field = useFieldContext<string>();\n\n  return (\n    <FieldItem\n      label={label}\n      action={action}\n      required={required}\n      requiredMark={requiredMark}\n      help={help}\n      tooltip={tooltip}\n      className={className}\n      aria-describedby={ariaDescribedBy}\n    >\n      {(control) => (\n        <TextInput\n          {...inputProps}\n          {...control}\n          value={field.state.value ?? ''}\n          onValueChange={field.handleChange}\n          onBlur={field.handleBlur}\n        />\n      )}\n    </FieldItem>\n  );\n};\n","import { createFormHook } from '@tanstack/react-form';\n\nimport { FormBody } from './components/FormBody';\nimport { SubmitButton } from './components/SubmitButton';\nimport { SubmitErrorAlert } from './components/SubmitErrorAlert';\nimport { CheckboxField } from './connectors/CheckboxField';\nimport { NumberField } from './connectors/NumberField';\nimport { OtpInputField } from './connectors/OtpInputField';\nimport { PasswordField } from './connectors/PasswordField';\nimport { SelectField } from './connectors/SelectField';\nimport { SwitchField } from './connectors/SwitchField';\nimport { TextareaField } from './connectors/TextareaField';\nimport { TextField } from './connectors/TextField';\nimport { fieldContext, formContext } from './contexts';\n\n/**\n * Typed form hook + `withForm` binding for the design system.\n *\n * **When to use:** any form layout that has validation, server-side errors, or a submit state — pages,\n * modals, drawers, multi-step wizards. Use `useAppForm({ defaultValues, validators, onSubmit })` at the\n * top of the form component, then render the typed `field.TextField` / `field.NumberField` /\n * `field.PasswordField` / `field.TextareaField` / `field.SelectField` / `field.CheckboxField` /\n * `field.SwitchField` connectors inside `form.AppForm` → `form.FormBody`. Submit via `form.SubmitButton`.\n * **When NOT to use:** for a single uncontrolled `<input>` use `TextInput` directly; for a bare label + input\n * pair without validation use `FormGroup` + `FormGroup.TextInput`.\n * **Composition:** schema-library agnostic — pass any [Standard Schema](https://standardschema.dev/) validator\n * (zod, valibot, …) in the consuming app. Server errors come from `setServerFieldErrors` (also re-exported).\n *\n * @see RECIPES.md#modal-form — for the canonical form-in-modal composition\n */\nexport const { useAppForm, withForm } = createFormHook({\n  fieldContext,\n  formContext,\n  fieldComponents: {\n    TextField,\n    NumberField,\n    PasswordField,\n    TextareaField,\n    SelectField,\n    CheckboxField,\n    SwitchField,\n    OtpInputField,\n  },\n  formComponents: {\n    FormBody,\n    SubmitButton,\n    SubmitErrorAlert,\n  },\n});\n","import type { AnyFormApi } from '@tanstack/react-form';\n\nexport type ServerFieldError = {\n  field: string;\n  message: string;\n};\n\n/**\n * Map a list of server-returned field errors onto a TanStack form instance.\n * Marks each field as touched so the error renders immediately.\n */\nexport const setServerFieldErrors = (form: AnyFormApi, errors: readonly ServerFieldError[]) => {\n  for (const { field, message } of errors) {\n    form.setFieldMeta(field, (meta) => ({\n      ...meta,\n      isTouched: true,\n      errors: [message],\n      errorMap: { ...meta.errorMap, onServer: message },\n    }));\n  }\n};\n","import type { AnyFormApi } from '@tanstack/react-form';\n\n/**\n * Set a **form-level** submit error on a TanStack form instance — a failed submission that isn't tied\n * to a single field (bad credentials, 5xx, network). Stored on `errorMap.onSubmit` and rendered by\n * `SubmitErrorAlert`. For field-specific server errors use `setServerFieldErrors` instead.\n *\n * Note: any error entry makes the form \"invalid\", so pair this with `canSubmitWhenInvalid: true` on\n * the form to keep the submit button retryable (a resubmit re-runs the validators and clears it).\n */\nexport const setSubmitError = (form: AnyFormApi, message: string) => {\n  form.setErrorMap({ onSubmit: { form: message, fields: {} } });\n};\n"],"mappings":"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"}

package/dist/FormGroup-S9mPNHKH.js

@@ -0,0 +1,124 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { TextInput } from "./TextInput-BGed-V13.js";
+import { Textarea } from "./internal/blocks/Textarea.js";
+import { ColorInput } from "./ColorInput-Dx8Dsv7Y.js";
+import { NumberInput } from "./internal/blocks/NumberInput.js";
+import { HelpBlock } from "./internal/components/HelpBlock.js";
+import { createContext, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/blocks/FormGroup/context.ts
+const FormGroupContext = createContext({ state: "default" });
+const FormGroupProvider = FormGroupContext;
+const useFormGroupContext = () => use(FormGroupContext);
+//#endregion
+//#region src/blocks/FormGroup/FormGroupColorInput.tsx
+const FormGroupColorInput = ({ ref, ...props }) => {
+	const { state } = useFormGroupContext();
+	return /* @__PURE__ */ jsx(ColorInput, {
+		state,
+		...props,
+		ref
+	});
+};
+//#endregion
+//#region src/blocks/FormGroup/FormGroupError.tsx
+const toMessage = (entry) => typeof entry === "string" ? entry : entry?.message;
+/**
+* Field error message. Unlike `FormGroup.Help` (advisory description), this is a validation
+* error, so it carries `role="alert"` — announced when it appears, even if focus isn't on the
+* field (e.g. surfaced on submit). Renders a `<div>` (not `<p>`) so multiple errors can render
+* as a `<ul>`.
+*/
+const FormGroupError = ({ children, className, errors, ...rest }) => {
+	const content = useMemo(() => {
+		if (children) return children;
+		const messages = (errors ?? []).map(toMessage).filter((message) => !!message);
+		if (messages.length === 0) return null;
+		if (messages.length === 1) return messages[0];
+		return /* @__PURE__ */ jsx("ul", {
+			className: "tw:m-0 tw:flex tw:list-disc tw:flex-col tw:gap-0 tw:pl-4",
+			children: messages.map((message, index) => /* @__PURE__ */ jsx("li", { children: message }, index))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "alert",
+		className: cn("tw:m-0 tw:text-xs tw:text-destructive", className),
+		children: content
+	});
+};
+//#endregion
+//#region src/blocks/FormGroup/FormGroupHelp.tsx
+const FormGroupHelp = ({ children, ...rest }) => {
+	const formGroupContext = useFormGroupContext();
+	return /* @__PURE__ */ jsx(HelpBlock, {
+		state: formGroupContext.state === "warning" ? "warning" : "default",
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region src/blocks/FormGroup/FormGroupNumberInput.tsx
+const FormGroupNumberInput = ({ ref, ...props }) => {
+	const { state } = useFormGroupContext();
+	return /* @__PURE__ */ jsx(NumberInput, {
+		...props,
+		ref,
+		state
+	});
+};
+//#endregion
+//#region src/blocks/FormGroup/FormGroupTextarea.tsx
+const FormGroupTextarea = (props) => {
+	const { state } = useFormGroupContext();
+	return /* @__PURE__ */ jsx(Textarea, {
+		state,
+		...props
+	});
+};
+//#endregion
+//#region src/blocks/FormGroup/FormGroupTextInput.tsx
+const FormGroupTextInput = ({ ref, ...props }) => {
+	const { state } = useFormGroupContext();
+	return /* @__PURE__ */ jsx(TextInput, {
+		state,
+		...props,
+		ref
+	});
+};
+//#endregion
+//#region src/blocks/FormGroup/FormGroup.tsx
+/**
+* Label + input + help-text grouping with shared validation state. Provides the chrome for a single field.
+*
+* **When to use:** rendering a label + bare input + help/error text outside `useAppForm` (e.g. one-off
+* filter fields, settings panes). `state="error"` flips `FormGroup.TextInput` chrome without per-component
+* wiring; the error message itself renders via `FormGroup.Error` (`role="alert"`), while `FormGroup.Help`
+* stays advisory.
+* **When NOT to use:** for a full form with validation and submit state, use `useAppForm` from `blocks/Form` —
+* it composes `FormGroup` internally via the typed field connectors.
+* **Composition:** nest a `Label`, then one of `FormGroup.TextInput` / `FormGroup.NumberInput` /
+* `FormGroup.ColorInput` / `FormGroup.Textarea`, optionally followed by `FormGroup.Help`
+* (advisory description) or `FormGroup.Error` (validation error, announced via `role="alert"`).
+*/
+const FormGroup = ({ className, children, state, ...rest }) => {
+	return /* @__PURE__ */ jsx(FormGroupProvider, {
+		value: { state },
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: cn("tw:flex tw:flex-col tw:gap-1", className),
+			children
+		})
+	});
+};
+FormGroup.Help = FormGroupHelp;
+FormGroup.Error = FormGroupError;
+FormGroup.TextInput = FormGroupTextInput;
+FormGroup.NumberInput = FormGroupNumberInput;
+FormGroup.ColorInput = FormGroupColorInput;
+FormGroup.Textarea = FormGroupTextarea;
+//#endregion
+export { FormGroup };
+
+//# sourceMappingURL=FormGroup-S9mPNHKH.js.map

package/dist/FormGroup-S9mPNHKH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup-S9mPNHKH.js","names":[],"sources":["../src/blocks/FormGroup/context.ts","../src/blocks/FormGroup/FormGroupColorInput.tsx","../src/blocks/FormGroup/FormGroupError.tsx","../src/blocks/FormGroup/FormGroupHelp.tsx","../src/blocks/FormGroup/FormGroupNumberInput.tsx","../src/blocks/FormGroup/FormGroupTextarea.tsx","../src/blocks/FormGroup/FormGroupTextInput.tsx","../src/blocks/FormGroup/FormGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nimport type { FormGroupContext } from './types';\n\nconst FormGroupContext = createContext<FormGroupContext>({\n  state: 'default',\n});\n\nexport const FormGroupProvider = FormGroupContext;\n\nexport const useFormGroupContext = () => use(FormGroupContext);\n","import type { ComponentProps } from 'react';\n\nimport { ColorInput } from '../ColorInput';\n\nimport { useFormGroupContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof ColorInput>, 'state'>;\n\nexport const FormGroupColorInput = ({ ref, ...props }: Props) => {\n  const { state } = useFormGroupContext();\n  return <ColorInput state={state} {...props} ref={ref} />;\n};\n","import { useMemo } from 'react';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'> & {\n  /**\n   * Field validation errors. TanStack Form errors are strings (function validators) or\n   * `{ message }` objects (Standard Schema / zod). A single message renders inline; several\n   * render as a list. Ignored when `children` is provided.\n   */\n  errors?: readonly (string | { message?: string } | undefined)[];\n};\n\n// Normalize a TanStack error entry (string or `{ message }`) to a display string.\nconst toMessage = (entry: string | { message?: string } | undefined): string | undefined =>\n  typeof entry === 'string' ? entry : entry?.message;\n\n/**\n * Field error message. Unlike `FormGroup.Help` (advisory description), this is a validation\n * error, so it carries `role=\"alert\"` — announced when it appears, even if focus isn't on the\n * field (e.g. surfaced on submit). Renders a `<div>` (not `<p>`) so multiple errors can render\n * as a `<ul>`.\n */\nexport const FormGroupError = ({ children, className, errors, ...rest }: Props) => {\n  const content = useMemo<ReactNode>(() => {\n    if (children) return children;\n\n    const messages = (errors ?? []).map(toMessage).filter((message) => !!message);\n    if (messages.length === 0) return null;\n    if (messages.length === 1) return messages[0];\n\n    return (\n      <ul className=\"tw:m-0 tw:flex tw:list-disc tw:flex-col tw:gap-0 tw:pl-4\">\n        {messages.map((message, index) => (\n          <li key={index}>{message}</li>\n        ))}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) return null;\n\n  return (\n    <div {...rest} role=\"alert\" className={cn('tw:m-0 tw:text-xs tw:text-destructive', className)}>\n      {content}\n    </div>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { HelpBlock } from '../../components/HelpBlock';\n\nimport { useFormGroupContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof HelpBlock>, 'state'>;\n\nexport const FormGroupHelp = ({ children, ...rest }: Props) => {\n  const formGroupContext = useFormGroupContext();\n\n  // Help stays advisory; a group's error state surfaces via FormGroup.Error, not here.\n  return (\n    <HelpBlock state={formGroupContext.state === 'warning' ? 'warning' : 'default'} {...rest}>\n      {children}\n    </HelpBlock>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { NumberInput } from '../NumberInput';\n\nimport { useFormGroupContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof NumberInput>, 'state'>;\n\nexport const FormGroupNumberInput = ({ ref, ...props }: Props) => {\n  const { state } = useFormGroupContext();\n  return <NumberInput {...props} ref={ref} state={state} />;\n};\n","import type { ComponentProps } from 'react';\n\nimport { Textarea } from '../Textarea';\n\nimport { useFormGroupContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Textarea>, 'state'>;\n\nexport const FormGroupTextarea = (props: Props) => {\n  const { state } = useFormGroupContext();\n  return <Textarea state={state} {...props} />;\n};\n","import type { ComponentProps } from 'react';\n\nimport { TextInput } from '../TextInput';\n\nimport { useFormGroupContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof TextInput>, 'state'>;\n\nexport const FormGroupTextInput = ({ ref, ...props }: Props) => {\n  const { state } = useFormGroupContext();\n  return <TextInput state={state} {...props} ref={ref} />;\n};\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { FormGroupProvider } from './context';\nimport { FormGroupColorInput } from './FormGroupColorInput';\nimport { FormGroupError } from './FormGroupError';\nimport { FormGroupHelp } from './FormGroupHelp';\nimport { FormGroupNumberInput } from './FormGroupNumberInput';\nimport { FormGroupTextarea } from './FormGroupTextarea';\nimport { FormGroupTextInput } from './FormGroupTextInput';\nimport type { FormGroupContext } from './types';\n\n/**\n * Props for `FormGroup`. `state` from `FormGroupContext` (\"default\" | \"error\" | \"warning\") propagates via\n * context to nested inputs. `FormGroup.Help` stays advisory (it reacts only to \"warning\"); validation errors\n * render through `FormGroup.Error`, not the input `state`.\n */\ntype FormGroupProps = ComponentPropsWithRef<'div'> & FormGroupContext;\n\n/**\n * Label + input + help-text grouping with shared validation state. Provides the chrome for a single field.\n *\n * **When to use:** rendering a label + bare input + help/error text outside `useAppForm` (e.g. one-off\n * filter fields, settings panes). `state=\"error\"` flips `FormGroup.TextInput` chrome without per-component\n * wiring; the error message itself renders via `FormGroup.Error` (`role=\"alert\"`), while `FormGroup.Help`\n * stays advisory.\n * **When NOT to use:** for a full form with validation and submit state, use `useAppForm` from `blocks/Form` —\n * it composes `FormGroup` internally via the typed field connectors.\n * **Composition:** nest a `Label`, then one of `FormGroup.TextInput` / `FormGroup.NumberInput` /\n * `FormGroup.ColorInput` / `FormGroup.Textarea`, optionally followed by `FormGroup.Help`\n * (advisory description) or `FormGroup.Error` (validation error, announced via `role=\"alert\"`).\n */\nexport const FormGroup = ({ className, children, state, ...rest }: FormGroupProps) => {\n  return (\n    <FormGroupProvider value={{ state }}>\n      <div {...rest} className={cn('tw:flex tw:flex-col tw:gap-1', className)}>\n        {children}\n      </div>\n    </FormGroupProvider>\n  );\n};\n\nFormGroup.Help = FormGroupHelp;\nFormGroup.Error = FormGroupError;\nFormGroup.TextInput = FormGroupTextInput;\nFormGroup.NumberInput = FormGroupNumberInput;\nFormGroup.ColorInput = FormGroupColorInput;\nFormGroup.Textarea = FormGroupTextarea;\n"],"mappings":";;;;;;;;;AAIA,MAAM,mBAAmB,cAAgC,EACvD,OAAO,UACT,CAAC;AAED,MAAa,oBAAoB;AAEjC,MAAa,4BAA4B,IAAI,gBAAgB;;;ACF7D,MAAa,uBAAuB,EAAE,KAAK,GAAG,YAAmB;CAC/D,MAAM,EAAE,UAAU,oBAAoB;CACtC,OAAO,oBAAC,YAAD;EAAmB;EAAO,GAAI;EAAY;CAAM,CAAA;AACzD;;;ACIA,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,QAAQ,OAAO;;;;;;;AAQ7C,MAAa,kBAAkB,EAAE,UAAU,WAAW,QAAQ,GAAG,WAAkB;CACjF,MAAM,UAAU,cAAyB;EACvC,IAAI,UAAU,OAAO;EAErB,MAAM,YAAY,UAAU,CAAC,EAAA,CAAG,IAAI,SAAS,CAAC,CAAC,QAAQ,YAAY,CAAC,CAAC,OAAO;EAC5E,IAAI,SAAS,WAAW,GAAG,OAAO;EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,SAAS;EAE3C,OACE,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,SAAS,KAAK,SAAS,UACtB,oBAAC,MAAD,EAAA,UAAiB,QAAY,GAApB,KAAoB,CAC9B;EACC,CAAA;CAER,GAAG,CAAC,UAAU,MAAM,CAAC;CAErB,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,MAAK;EAAQ,WAAW,GAAG,yCAAyC,SAAS;EACzF,UAAA;CACE,CAAA;AAET;;;ACxCA,MAAa,iBAAiB,EAAE,UAAU,GAAG,WAAkB;CAC7D,MAAM,mBAAmB,oBAAoB;CAG7C,OACE,oBAAC,WAAD;EAAW,OAAO,iBAAiB,UAAU,YAAY,YAAY;EAAW,GAAI;EACjF;CACQ,CAAA;AAEf;;;ACTA,MAAa,wBAAwB,EAAE,KAAK,GAAG,YAAmB;CAChE,MAAM,EAAE,UAAU,oBAAoB;CACtC,OAAO,oBAAC,aAAD;EAAa,GAAI;EAAY;EAAY;CAAQ,CAAA;AAC1D;;;ACHA,MAAa,qBAAqB,UAAiB;CACjD,MAAM,EAAE,UAAU,oBAAoB;CACtC,OAAO,oBAAC,UAAD;EAAiB;EAAO,GAAI;CAAQ,CAAA;AAC7C;;;ACHA,MAAa,sBAAsB,EAAE,KAAK,GAAG,YAAmB;CAC9D,MAAM,EAAE,UAAU,oBAAoB;CACtC,OAAO,oBAAC,WAAD;EAAkB;EAAO,GAAI;EAAY;CAAM,CAAA;AACxD;;;;;;;;;;;;;;;;ACsBA,MAAa,aAAa,EAAE,WAAW,UAAU,OAAO,GAAG,WAA2B;CACpF,OACE,oBAAC,mBAAD;EAAmB,OAAO,EAAE,MAAM;EAChC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAM,WAAW,GAAG,gCAAgC,SAAS;GACnE;EACE,CAAA;CACY,CAAA;AAEvB;AAEA,UAAU,OAAO;AACjB,UAAU,QAAQ;AAClB,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,UAAU,aAAa;AACvB,UAAU,WAAW"}