@keboola/design 11.0.0 → 11.2.0

package/dist/Form-DHvcFoEi.js

@@ -0,0 +1,311 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Button } from "./Button-6xBX0nNl.js";
+import { TextInput } from "./TextInput-CMuN1WfY.js";
+import { Switch } from "./Switch-CX2A0v50.js";
+import { Select } from "./Select-Is0VkePH.js";
+import { Checkbox } from "./Checkbox-GJ8-srt4.js";
+import { FieldItem, fieldContext, formContext, useFieldContext, useFormContext } from "./FieldItem-D-h1NeBo.js";
+import { NumberInput } from "./internal/blocks/NumberInput.js";
+import { Textarea } from "./internal/blocks/Textarea.js";
+import { PasswordInput } from "./internal/blocks/PasswordInput.js";
+import { OtpInput } from "./OtpInput-CbbymqYs.js";
+import { Alert } from "./Alert-DfZq9kGe.js";
+import { jsx } from "react/jsx-runtime";
+import { createFormHook } from "@tanstack/react-form";
+//#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/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` / `field.OtpInputField` connectors inside `form.AppForm` → `form.FormBody`. Submit via `form.SubmitButton`.
+* `MultiComboboxField` (from `@keboola/design`) and `CodeEditorField` (from `@keboola/design/editors`)
+* compose the same way but are imported by name — `fieldComponents` does not shake per key, so a
+* control with heavy dependencies would be carried by every consumer. See their own docs.
+* **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 blurred — that is what `FieldItem` gates the error reveal on.
+* - `isTouched` alongside it, for anything reading TanStack's own meta (`canSubmit`, dirty checks).
+* - Both are needed. Called from a mutation's `onError` there is no submit attempt to fall back on, so
+*   without `isBlurred` the message would sit in `errorMap` and render nowhere.
+*/
+const setServerFieldErrors = (form, errors) => {
+	for (const { field, message } of errors) form.setFieldMeta(field, (meta) => ({
+		...meta,
+		isBlurred: true,
+		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-DHvcFoEi.js.map

package/dist/Form-DHvcFoEi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form-DHvcFoEi.js","names":[],"sources":["../src/blocks/Form/components/FormBody.tsx","../src/blocks/Form/components/SubmitButton.tsx","../src/blocks/Form/components/SubmitErrorAlert.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 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 { 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` / `field.OtpInputField` connectors inside `form.AppForm` → `form.FormBody`. Submit via `form.SubmitButton`.\n * `MultiComboboxField` (from `@keboola/design`) and `CodeEditorField` (from `@keboola/design/editors`)\n * compose the same way but are imported by name — `fieldComponents` does not shake per key, so a\n * control with heavy dependencies would be carried by every consumer. See their own docs.\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 *\n * - Marks each field blurred — that is what `FieldItem` gates the error reveal on.\n * - `isTouched` alongside it, for anything reading TanStack's own meta (`canSubmit`, dirty checks).\n * - Both are needed. Called from a mutation's `onError` there is no submit attempt to fall back on, so\n *   without `isBlurred` the message would sit in `errorMap` and render nowhere.\n */\nexport const setServerFieldErrors = (form: AnyFormApi, errors: readonly ServerFieldError[]) => {\n  for (const { field, message } of errors) {\n    form.setFieldMeta(field, (meta) => ({\n      ...meta,\n      isBlurred: true,\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-C41n65cE.js

@@ -0,0 +1,124 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { TextInput } from "./TextInput-CMuN1WfY.js";
+import { ColorInput } from "./ColorInput-B8z4j4Y_.js";
+import { HelpBlock } from "./internal/components/HelpBlock.js";
+import { NumberInput } from "./internal/blocks/NumberInput.js";
+import { Textarea } from "./internal/blocks/Textarea.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 = [...new Set((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) => /* @__PURE__ */ jsx("li", { children: message }, message))
+		});
+	}, [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-C41n65cE.js.map

package/dist/FormGroup-C41n65cE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup-C41n65cE.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    // Deduplicated: a field validated on more than one event (`onChange` **and** `onBlur` carrying the\n    // same schema) accumulates one entry per validator that ran, so after a blur the identical message\n    // is present twice and renders as \"RequiredRequired\". Two validators agreeing is still one thing to\n    // tell the reader. That pairing is not the setup to reach for — `Form/AGENTS.md` says to register\n    // the schema on `onChange` and nothing else — but this component renders whatever it is handed.\n    const messages = [...new Set((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) => (\n          // The message is the key: they are unique after the dedupe above, which also retires the\n          // array-index key this list used to need.\n          <li key={message}>{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;EAOrB,MAAM,WAAW,CAAC,GAAG,IAAI,KAAK,UAAU,CAAC,EAAA,CAAG,IAAI,SAAS,CAAC,CAAC,QAAQ,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC;EAC1F,IAAI,SAAS,WAAW,GAAG,OAAO;EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,SAAS;EAE3C,OACE,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,SAAS,KAAK,YAGb,oBAAC,MAAD,EAAA,UAAmB,QAAY,GAAtB,OAAsB,CAChC;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;;;AC/CA,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"}

package/dist/FullScreenModal-Cb3PGgh4.js

@@ -0,0 +1,96 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { ChevronLeft } from "./icons-Cek151jC.js";
+import { Button } from "./Button-6xBX0nNl.js";
+import { Truncated } from "./internal/components/Truncated.js";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/FullScreenModal/FullScreenModalBody.tsx
+const FullScreenModalBody = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:flex-1 tw:min-h-0 tw:overflow-auto", className),
+	...props,
+	children
+});
+//#endregion
+//#region src/components/FullScreenModal/FullScreenModalHeader.tsx
+const DEFAULT_TITLE_STYLES = "tw:text-2xl tw:leading-8 tw:font-normal tw:text-foreground tw:overflow-hidden";
+const FullScreenModalHeader = ({ title, titleClassName, titleWrapperClassName, defaultTitleStyles = true, isTitleWithIcon = false, children, onClose, className, showPreviousTitle = true, ...props }) => {
+	const previousTitle = useMemo(() => {
+		const modals = Array.from(document.querySelectorAll("[data-fullscreen-modal]"));
+		return showPreviousTitle && modals?.length > 0 && modals.at(-1)?.querySelector("[data-modal-title]")?.textContent;
+	}, [showPreviousTitle]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tw:p-4 tw:flex tw:shrink-0 tw:items-center tw:justify-between", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("tw:flex tw:flex-1 tw:items-center", titleWrapperClassName),
+			children: [previousTitle && onClose && /* @__PURE__ */ jsx(Button, {
+				onClick: onClose,
+				size: "icon",
+				className: "tw:mr-6",
+				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "tw:size-4" })
+			}), /* @__PURE__ */ jsx("div", {
+				className: "tw:w-full",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("tw:m-0", defaultTitleStyles && DEFAULT_TITLE_STYLES, titleClassName),
+					"data-modal-title": true,
+					children: [previousTitle && onClose && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onClose,
+						className: "tailwindcss-preflight",
+						"aria-label": `Go back to ${previousTitle}`,
+						children: /* @__PURE__ */ jsx(Truncated, {
+							text: previousTitle,
+							className: cn("tw:relative tw:top-0 tw:cursor-pointer tw:text-base tw:font-normal tw:text-muted-foreground tw:underline", "tw:hover:text-foreground tw:hover:no-underline", isTitleWithIcon && "tw:ml-14")
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: cn("tw:flex tw:items-center", { "tw:[&>img]:-mt-6": previousTitle }),
+						children: title
+					})]
+				})
+			})]
+		}), children]
+	});
+};
+//#endregion
+//#region src/components/FullScreenModal/FullScreenModalRoot.tsx
+const BODY_LOCK_CLASS = "full-screen-modal-open";
+const FullScreenModalRoot = ({ children, className, lockBodyScroll = true, onEscapeKeyDown, onKeyDown, ...props }) => {
+	const modalRef = useRef(null);
+	const renderArgo = useArgoDesign();
+	useEffect(() => {
+		const modalElement = modalRef.current;
+		if (lockBodyScroll) document.body.classList.add(BODY_LOCK_CLASS);
+		return () => {
+			if (!Array.from(document.querySelectorAll("[data-fullscreen-modal]")).some((el) => el !== modalElement)) document.body.classList.remove(BODY_LOCK_CLASS);
+		};
+	}, [lockBodyScroll]);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === "Escape" && !event.defaultPrevented) onEscapeKeyDown?.(event);
+	};
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		...props,
+		ref: modalRef,
+		role: "dialog",
+		"aria-modal": "true",
+		tabIndex: -1,
+		"data-fullscreen-modal": true,
+		"data-argo": renderArgo,
+		onKeyDown: handleKeyDown,
+		className: cn("tailwindcss-preflight", "tw:fixed", "tw:inset-0", "tw:z-[1039]", "tw:flex", "tw:flex-col", "tw:bg-background", "tw:text-foreground", "tw:focus-visible:outline-hidden", className),
+		children
+	}), document.body);
+};
+//#endregion
+//#region src/components/FullScreenModal/FullScreenModal.tsx
+const FullScreenModal = Object.assign(FullScreenModalRoot, {
+	Header: FullScreenModalHeader,
+	Body: FullScreenModalBody
+});
+//#endregion
+export { FullScreenModal, FullScreenModalBody, FullScreenModalHeader };
+
+//# sourceMappingURL=FullScreenModal-Cb3PGgh4.js.map

package/dist/FullScreenModal-Cb3PGgh4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenModal-Cb3PGgh4.js","names":[],"sources":["../src/components/FullScreenModal/FullScreenModalBody.tsx","../src/components/FullScreenModal/FullScreenModalHeader.tsx","../src/components/FullScreenModal/FullScreenModalRoot.tsx","../src/components/FullScreenModal/FullScreenModal.tsx"],"sourcesContent":["import type { HTMLAttributes, Ref } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = HTMLAttributes<HTMLDivElement>;\n\nexport const FullScreenModalBody = ({\n  ref,\n  className,\n  children,\n  ...props\n}: Props & { ref?: Ref<HTMLDivElement> }) => (\n  <div ref={ref} className={cn('tw:flex-1 tw:min-h-0 tw:overflow-auto', className)} {...props}>\n    {children}\n  </div>\n);\n","import { useMemo } from 'react';\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';\n\nimport { ChevronLeft } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Truncated } from '../Truncated';\n\nconst DEFAULT_TITLE_STYLES =\n  'tw:text-2xl tw:leading-8 tw:font-normal tw:text-foreground tw:overflow-hidden';\n\ntype Props = PropsWithChildren<\n  Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n    title: ReactNode;\n    titleClassName?: string;\n    titleWrapperClassName?: string;\n    defaultTitleStyles?: boolean;\n    isTitleWithIcon?: boolean;\n    onClose?: () => void;\n    showPreviousTitle?: boolean;\n  }\n>;\n\nexport const FullScreenModalHeader = ({\n  title,\n  titleClassName,\n  titleWrapperClassName,\n  defaultTitleStyles = true,\n  isTitleWithIcon = false,\n  children,\n  onClose,\n  className,\n  showPreviousTitle = true,\n  ...props\n}: Props) => {\n  const previousTitle = useMemo(() => {\n    const modals = Array.from(document.querySelectorAll('[data-fullscreen-modal]'));\n    return (\n      showPreviousTitle &&\n      modals?.length > 0 &&\n      modals.at(-1)?.querySelector('[data-modal-title]')?.textContent\n    );\n  }, [showPreviousTitle]);\n\n  return (\n    <div\n      className={cn('tw:p-4 tw:flex tw:shrink-0 tw:items-center tw:justify-between', className)}\n      {...props}\n    >\n      <div className={cn('tw:flex tw:flex-1 tw:items-center', titleWrapperClassName)}>\n        {previousTitle && onClose && (\n          <Button onClick={onClose} size=\"icon\" className=\"tw:mr-6\">\n            <ChevronLeft className=\"tw:size-4\" />\n          </Button>\n        )}\n\n        <div className=\"tw:w-full\">\n          <div\n            className={cn('tw:m-0', defaultTitleStyles && DEFAULT_TITLE_STYLES, titleClassName)}\n            data-modal-title\n          >\n            {previousTitle && onClose && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"tailwindcss-preflight\"\n                aria-label={`Go back to ${previousTitle}`}\n              >\n                <Truncated\n                  text={previousTitle}\n                  className={cn(\n                    'tw:relative tw:top-0 tw:cursor-pointer tw:text-base tw:font-normal tw:text-muted-foreground tw:underline',\n                    'tw:hover:text-foreground tw:hover:no-underline',\n                    isTitleWithIcon && 'tw:ml-14',\n                  )}\n                />\n              </button>\n            )}\n            <div\n              className={cn('tw:flex tw:items-center', {\n                'tw:[&>img]:-mt-6': previousTitle,\n              })}\n            >\n              {title}\n            </div>\n          </div>\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n};\n","import { useEffect, useRef } from 'react';\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n  /** Lock body scroll when modal is open. Default: true */\n  lockBodyScroll?: boolean;\n  /** Callback when ESC key is pressed */\n  onEscapeKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n};\n\nconst BODY_LOCK_CLASS = 'full-screen-modal-open';\n\nexport const FullScreenModalRoot = ({\n  children,\n  className,\n  lockBodyScroll = true,\n  onEscapeKeyDown,\n  onKeyDown,\n  ...props\n}: Props) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const renderArgo = useArgoDesign();\n\n  // Body scroll lock\n  useEffect(() => {\n    const modalElement = modalRef.current;\n\n    if (lockBodyScroll) {\n      document.body.classList.add(BODY_LOCK_CLASS);\n    }\n\n    return () => {\n      // Filter out the current modal because it may still be in the DOM\n      // when lockBodyScroll toggles from true to false (e.g. switching\n      // from full-screen to half-screen mode).\n      const hasOtherModals = Array.from(document.querySelectorAll('[data-fullscreen-modal]')).some(\n        (el) => el !== modalElement,\n      );\n\n      if (!hasOtherModals) {\n        document.body.classList.remove(BODY_LOCK_CLASS);\n      }\n    };\n  }, [lockBodyScroll]);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.key === 'Escape' && !event.defaultPrevented) {\n      onEscapeKeyDown?.(event);\n    }\n  };\n\n  return createPortal(\n    <div\n      {...props}\n      ref={modalRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      tabIndex={-1}\n      data-fullscreen-modal\n      data-argo={renderArgo}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        'tailwindcss-preflight',\n        'tw:fixed',\n        'tw:inset-0',\n        'tw:z-[1039]',\n        'tw:flex',\n        'tw:flex-col',\n        // One scheme-following surface for both chromes. The legacy branch used\n        // to pin `neutral-50`, which the dark scheme cannot reach — and its\n        // light value is within a shade of `background` anyway. `text-foreground`\n        // has to travel with it: the modal is portalled to `document.body`, so it\n        // inherits no app-level foreground and content would sit dark-on-dark.\n        'tw:bg-background',\n        'tw:text-foreground',\n        'tw:focus-visible:outline-hidden',\n        className,\n      )}\n    >\n      {children}\n    </div>,\n    document.body,\n  );\n};\n","import { FullScreenModalBody } from './FullScreenModalBody';\nimport { FullScreenModalHeader } from './FullScreenModalHeader';\nimport { FullScreenModalRoot } from './FullScreenModalRoot';\n\nexport const FullScreenModal = Object.assign(FullScreenModalRoot, {\n  Header: FullScreenModalHeader,\n  Body: FullScreenModalBody,\n});\n"],"mappings":";;;;;;;;;AAMA,MAAa,uBAAuB,EAClC,KACA,WACA,UACA,GAAG,YAEH,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,yCAAyC,SAAS;CAAG,GAAI;CACnF;AACE,CAAA;;;ACNP,MAAM,uBACJ;AAcF,MAAa,yBAAyB,EACpC,OACA,gBACA,uBACA,qBAAqB,MACrB,kBAAkB,OAClB,UACA,SACA,WACA,oBAAoB,MACpB,GAAG,YACQ;CACX,MAAM,gBAAgB,cAAc;EAClC,MAAM,SAAS,MAAM,KAAK,SAAS,iBAAiB,yBAAyB,CAAC;EAC9E,OACE,qBACA,QAAQ,SAAS,KACjB,OAAO,GAAG,EAAE,CAAC,EAAE,cAAc,oBAAoB,CAAC,EAAE;CAExD,GAAG,CAAC,iBAAiB,CAAC;CAEtB,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;EAFN,UAAA,CAIE,qBAAC,OAAD;GAAK,WAAW,GAAG,qCAAqC,qBAAqB;GAA7E,UAAA,CACG,iBAAiB,WAChB,oBAAC,QAAD;IAAQ,SAAS;IAAS,MAAK;IAAO,WAAU;IAC9C,UAAA,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA;GAC9B,CAAA,GAGV,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,qBAAC,OAAD;KACE,WAAW,GAAG,UAAU,sBAAsB,sBAAsB,cAAc;KAClF,oBAAA;KAFF,UAAA,CAIG,iBAAiB,WAChB,oBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;MACV,cAAY,cAAc;MAE1B,UAAA,oBAAC,WAAD;OACE,MAAM;OACN,WAAW,GACT,4GACA,kDACA,mBAAmB,UACrB;MACD,CAAA;KACK,CAAA,GAEV,oBAAC,OAAD;MACE,WAAW,GAAG,2BAA2B,EACvC,oBAAoB,cACtB,CAAC;MAEA,UAAA;KACE,CAAA,CACF;;GACF,CAAA,CACF;EACJ,CAAA,GAAA,QACE;;AAET;;;AC5EA,MAAM,kBAAkB;AAExB,MAAa,uBAAuB,EAClC,UACA,WACA,iBAAiB,MACjB,iBACA,WACA,GAAG,YACQ;CACX,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,aAAa,cAAc;CAGjC,gBAAgB;EACd,MAAM,eAAe,SAAS;EAE9B,IAAI,gBACF,SAAS,KAAK,UAAU,IAAI,eAAe;EAG7C,aAAa;GAQX,IAAI,CAJmB,MAAM,KAAK,SAAS,iBAAiB,yBAAyB,CAAC,CAAC,CAAC,MACrF,OAAO,OAAO,YAGC,GAChB,SAAS,KAAK,UAAU,OAAO,eAAe;EAElD;CACF,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,iBAAiB,UAAyC;EAC9D,YAAY,KAAK;EACjB,IAAI,MAAM,QAAQ,YAAY,CAAC,MAAM,kBACnC,kBAAkB,KAAK;CAE3B;CAEA,OAAO,aACL,oBAAC,OAAD;EACE,GAAI;EACJ,KAAK;EACL,MAAK;EACL,cAAW;EACX,UAAU;EACV,yBAAA;EACA,aAAW;EACX,WAAW;EACX,WAAW,GACT,yBACA,YACA,cACA,eACA,WACA,eAMA,oBACA,sBACA,mCACA,SACF;EAEC;CACE,CAAA,GACL,SAAS,IACX;AACF;;;ACrFA,MAAa,kBAAkB,OAAO,OAAO,qBAAqB;CAChE,QAAQ;CACR,MAAM;AACR,CAAC"}