@keboola/design 10.1.0 → 11.0.0

package/dist/chunk-5QCXHNCW.js

@@ -0,0 +1,404 @@
+import { OtpInput } from './chunk-K65C7CVE.js';
+import { Select } from './chunk-M6LTUPVP.js';
+import { Switch } from './chunk-576G5OES.js';
+import { Alert } from './chunk-KWKSHPDP.js';
+import { PasswordInput } from './chunk-U3A6YBTZ.js';
+import { Checkbox } from './chunk-Y4W3JORC.js';
+import { FormGroup } from './chunk-RTW56PWZ.js';
+import { NumberInput } from './chunk-QZAWRSEB.js';
+import { Textarea } from './chunk-EEK5NGZF.js';
+import { TextInput } from './chunk-HPMYYGP7.js';
+import { Label } from './chunk-S6TAF63G.js';
+import { Button } from './chunk-IXAYNBOY.js';
+import { Info } from './chunk-RQVK4IYC.js';
+import { Tooltip } from './chunk-SWQFYNYG.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { createFormHookContexts, createFormHook } from '@tanstack/react-form';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
+var 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();
+        void form.handleSubmit();
+      },
+      children
+    }
+  );
+};
+var 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
+        }
+      )
+    }
+  );
+};
+var 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 });
+};
+var 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 })
+    ] })
+  ] });
+};
+var 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
+    }
+  ) });
+};
+var 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
+        }
+      )
+    }
+  );
+};
+var 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)) })
+        }
+      )
+    }
+  );
+};
+var 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
+        }
+      )
+    }
+  );
+};
+var 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) => (
+        // `required` deliberately stays on `FieldItem` (which turns it into `aria-required` via
+        // `control`) and is not forwarded to the Radix root: a required hidden native select would
+        // fail browser constraint validation and swallow the submit event before the form sees it.
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            ...selectProps,
+            ...control,
+            className: triggerClassName ?? "tw:w-full",
+            value: field.state.value ?? "",
+            onValueChange: field.handleChange,
+            onBlur: field.handleBlur
+          }
+        )
+      )
+    }
+  );
+};
+var 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
+    }
+  ) });
+};
+var 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
+        }
+      )
+    }
+  );
+};
+var 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
+        }
+      )
+    }
+  );
+};
+
+// src/blocks/Form/formHook.ts
+var { useAppForm, withForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {
+    TextField,
+    NumberField,
+    PasswordField,
+    TextareaField,
+    SelectField,
+    CheckboxField,
+    SwitchField,
+    OtpInputField
+  },
+  formComponents: {
+    FormBody,
+    SubmitButton,
+    SubmitErrorAlert
+  }
+});
+
+// src/blocks/Form/setServerFieldErrors.ts
+var setServerFieldErrors = (form, errors) => {
+  for (const { field, message } of errors) {
+    form.setFieldMeta(field, (meta) => ({
+      ...meta,
+      isTouched: true,
+      errors: [message],
+      errorMap: { ...meta.errorMap, onServer: message }
+    }));
+  }
+};
+
+// src/blocks/Form/setSubmitError.ts
+var setSubmitError = (form, message) => {
+  form.setErrorMap({ onSubmit: { form: message, fields: {} } });
+};
+
+export { setServerFieldErrors, setSubmitError, useAppForm, withForm };
+//# sourceMappingURL=chunk-5QCXHNCW.js.map
+//# sourceMappingURL=chunk-5QCXHNCW.js.map

package/dist/chunk-5QCXHNCW.js.map

@@ -0,0 +1 @@
+{"version":3,"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"],"names":["jsx"],"mappings":"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","file":"chunk-5QCXHNCW.js","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"]}

package/dist/chunk-6DUMGC7Y.js

@@ -0,0 +1,105 @@
+import { cn } from './chunk-LXLIQ2D6.js';
+import * as RSeparator from '@radix-ui/react-separator';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var separatorVariants = cva(
+  [
+    // position
+    "tw:flex",
+    "tw:items-center",
+    "tw:justify-center",
+    "tw:self-stretch",
+    // before
+    "tw:before:content-['']",
+    "tw:before:bg-border"
+  ],
+  {
+    defaultVariants: {
+      orientation: "vertical",
+      size: "full"
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        size: "full",
+        className: ["tw:before:w-full"]
+      },
+      {
+        orientation: "horizontal",
+        size: "1/2",
+        className: ["tw:before:w-1/2"]
+      },
+      {
+        orientation: "horizontal",
+        size: "3/4",
+        className: ["tw:before:w-3/4"]
+      },
+      {
+        orientation: "vertical",
+        size: "full",
+        className: ["tw:before:h-full"]
+      },
+      {
+        orientation: "vertical",
+        size: "1/2",
+        className: ["tw:before:h-1/2"]
+      },
+      {
+        orientation: "vertical",
+        size: "3/4",
+        className: ["tw:before:h-3/4"]
+      }
+    ],
+    variants: {
+      size: {
+        full: ["tw:before:h-full"],
+        "1/2": [],
+        "3/4": []
+      },
+      orientation: {
+        vertical: ["tw:before:w-px"],
+        horizontal: ["tw:before:h-px"]
+      }
+    }
+  }
+);
+var Separator = ({
+  className,
+  orientation = "vertical",
+  size = "full",
+  label,
+  ...props
+}) => {
+  if (label != null && label !== false) {
+    return /* @__PURE__ */ jsx(
+      RSeparator.Root,
+      {
+        ...props,
+        decorative: true,
+        orientation: "horizontal",
+        className: cn(
+          "tw:flex tw:w-full tw:items-center tw:gap-3 tw:self-stretch",
+          "tw:text-xs tw:font-medium tw:text-muted-foreground",
+          "tw:before:content-[''] tw:before:h-px tw:before:flex-1 tw:before:bg-border",
+          "tw:after:content-[''] tw:after:h-px tw:after:flex-1 tw:after:bg-border",
+          className
+        ),
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    RSeparator.Root,
+    {
+      ...props,
+      decorative: true,
+      orientation,
+      className: separatorVariants({ size, orientation, className })
+    }
+  );
+};
+
+export { Separator };
+//# sourceMappingURL=chunk-6DUMGC7Y.js.map
+//# sourceMappingURL=chunk-6DUMGC7Y.js.map

package/dist/chunk-6DUMGC7Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Separator/Separator.tsx"],"names":[],"mappings":";;;;;AAOA,IAAM,iBAAA,GAAoB,GAAA;AAAA,EACxB;AAAA;AAAA,IAEE,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAA;AAAA,IACA,iBAAA;AAAA;AAAA,IAGA,wBAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,eAAA,EAAiB;AAAA,MACf,WAAA,EAAa,UAAA;AAAA,MACb,IAAA,EAAM;AAAA,KACR;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB;AAAA,QACE,WAAA,EAAa,YAAA;AAAA,QACb,IAAA,EAAM,MAAA;AAAA,QACN,SAAA,EAAW,CAAC,kBAAkB;AAAA,OAChC;AAAA,MACA;AAAA,QACE,WAAA,EAAa,YAAA;AAAA,QACb,IAAA,EAAM,KAAA;AAAA,QACN,SAAA,EAAW,CAAC,iBAAiB;AAAA,OAC/B;AAAA,MACA;AAAA,QACE,WAAA,EAAa,YAAA;AAAA,QACb,IAAA,EAAM,KAAA;AAAA,QACN,SAAA,EAAW,CAAC,iBAAiB;AAAA,OAC/B;AAAA,MACA;AAAA,QACE,WAAA,EAAa,UAAA;AAAA,QACb,IAAA,EAAM,MAAA;AAAA,QACN,SAAA,EAAW,CAAC,kBAAkB;AAAA,OAChC;AAAA,MACA;AAAA,QACE,WAAA,EAAa,UAAA;AAAA,QACb,IAAA,EAAM,KAAA;AAAA,QACN,SAAA,EAAW,CAAC,iBAAiB;AAAA,OAC/B;AAAA,MACA;AAAA,QACE,WAAA,EAAa,UAAA;AAAA,QACb,IAAA,EAAM,KAAA;AAAA,QACN,SAAA,EAAW,CAAC,iBAAiB;AAAA;AAC/B,KACF;AAAA,IACA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,CAAC,kBAAkB,CAAA;AAAA,QACzB,OAAO,EAAC;AAAA,QACR,OAAO;AAAC,OACV;AAAA,MACA,WAAA,EAAa;AAAA,QACX,QAAA,EAAU,CAAC,gBAAgB,CAAA;AAAA,QAC3B,UAAA,EAAY,CAAC,gBAAgB;AAAA;AAC/B;AACF;AAEJ,CAAA;AAYO,IAAM,YAAY,CAAC;AAAA,EACxB,SAAA;AAAA,EACA,WAAA,GAAc,UAAA;AAAA,EACd,IAAA,GAAO,MAAA;AAAA,EACP,KAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAa;AACX,EAAA,IAAI,KAAA,IAAS,IAAA,IAAQ,KAAA,KAAU,KAAA,EAAO;AACpC,IAAA,uBACE,GAAA;AAAA,MAAY,UAAA,CAAA,IAAA;AAAA,MAAX;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,UAAA,EAAU,IAAA;AAAA,QACV,WAAA,EAAY,YAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,4DAAA;AAAA,UACA,oDAAA;AAAA,UACA,4EAAA;AAAA,UACA,wEAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAY,UAAA,CAAA,IAAA;AAAA,IAAX;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,UAAA,EAAU,IAAA;AAAA,MACV,WAAA;AAAA,MACA,WAAW,iBAAA,CAAkB,EAAE,IAAA,EAAM,WAAA,EAAa,WAAW;AAAA;AAAA,GAC/D;AAEJ","file":"chunk-6DUMGC7Y.js","sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport * as RSeparator from '@radix-ui/react-separator';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst separatorVariants = cva(\n  [\n    // position\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:self-stretch',\n\n    // before\n    \"tw:before:content-['']\",\n    'tw:before:bg-border',\n  ],\n  {\n    defaultVariants: {\n      orientation: 'vertical',\n      size: 'full',\n    },\n    compoundVariants: [\n      {\n        orientation: 'horizontal',\n        size: 'full',\n        className: ['tw:before:w-full'],\n      },\n      {\n        orientation: 'horizontal',\n        size: '1/2',\n        className: ['tw:before:w-1/2'],\n      },\n      {\n        orientation: 'horizontal',\n        size: '3/4',\n        className: ['tw:before:w-3/4'],\n      },\n      {\n        orientation: 'vertical',\n        size: 'full',\n        className: ['tw:before:h-full'],\n      },\n      {\n        orientation: 'vertical',\n        size: '1/2',\n        className: ['tw:before:h-1/2'],\n      },\n      {\n        orientation: 'vertical',\n        size: '3/4',\n        className: ['tw:before:h-3/4'],\n      },\n    ],\n    variants: {\n      size: {\n        full: ['tw:before:h-full'],\n        '1/2': [],\n        '3/4': [],\n      },\n      orientation: {\n        vertical: ['tw:before:w-px'],\n        horizontal: ['tw:before:h-px'],\n      },\n    },\n  },\n);\n\ntype Props = VariantProps<typeof separatorVariants> &\n  Omit<ComponentProps<typeof RSeparator.Root>, 'decorative'> & {\n    /**\n     * Optional label rendered centered between two line segments\n     * (typical \"OR\" divider). Implies `orientation=\"horizontal\"`.\n     * Overrides any `children` passed to the component.\n     */\n    label?: ReactNode;\n  };\n\nexport const Separator = ({\n  className,\n  orientation = 'vertical',\n  size = 'full',\n  label,\n  ...props\n}: Props) => {\n  if (label != null && label !== false) {\n    return (\n      <RSeparator.Root\n        {...props}\n        decorative\n        orientation=\"horizontal\"\n        className={cn(\n          'tw:flex tw:w-full tw:items-center tw:gap-3 tw:self-stretch',\n          'tw:text-xs tw:font-medium tw:text-muted-foreground',\n          \"tw:before:content-[''] tw:before:h-px tw:before:flex-1 tw:before:bg-border\",\n          \"tw:after:content-[''] tw:after:h-px tw:after:flex-1 tw:after:bg-border\",\n          className,\n        )}\n      >\n        {label}\n      </RSeparator.Root>\n    );\n  }\n\n  return (\n    <RSeparator.Root\n      {...props}\n      decorative\n      orientation={orientation}\n      className={separatorVariants({ size, orientation, className })}\n    />\n  );\n};\n"]}