@aviala-design/spiral 2.9.0 → 3.0.0

package/dist/form.cjs

@@ -0,0 +1,187 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+
+
+
+
+var _chunkCXGFGGGIcjs = require('./chunk-CXGFGGGI.cjs');
+
+// src/components/form-field.tsx
+
+
+
+var _icons = require('@aviala-design/icons');
+
+
+
+
+var _react = require('react');
+
+
+
+var _reacthookform = require('react-hook-form');
+var _jsxruntime = require('react/jsx-runtime');
+var FormFieldLayout = _react.forwardRef.call(void 0, 
+  ({
+    className,
+    label,
+    htmlFor,
+    description,
+    error,
+    info,
+    alert,
+    required,
+    direction = "vertical",
+    children,
+    ...props
+  }, ref) => {
+    const reactId = _react.useId.call(void 0, );
+    const labelId = `${reactId}-label`;
+    const hasLabel = label != null && label !== "";
+    const invalid = Boolean(error);
+    const controlContext = _react.useMemo.call(void 0, () => ({ invalid }), [invalid]);
+    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "label",
+      {
+        htmlFor,
+        className: "aviala-form__label aviala-form__label--control",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkCXGFGGGIcjs.Typeface,
+          {
+            id: labelId,
+            content: "textCaption",
+            primary: hasLabel ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+              label,
+              required ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+            ] }) : void 0,
+            secondary: description
+          }
+        )
+      }
+    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkCXGFGGGIcjs.Typeface,
+      {
+        id: labelId,
+        className: "aviala-form__label",
+        content: "textCaption",
+        primary: hasLabel ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          label,
+          required ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+        ] }) : void 0,
+        secondary: description
+      }
+    ) : null;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _chunkCXGFGGGIcjs.cn.call(void 0, "aviala-form", className),
+        "data-direction": direction,
+        "aria-labelledby": hasLabel ? labelId : void 0,
+        ...props,
+        children: [
+          labelNode,
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "aviala-form__content", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCXGFGGGIcjs.FormFieldControlContext.Provider, { value: controlContext, children }),
+            error ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "div",
+              {
+                className: "aviala-form__message aviala-form__message--error",
+                role: "alert",
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _icons.SymbolWrongCircle,
+                    {
+                      className: "aviala-form__message-icon",
+                      width: 14,
+                      height: 14,
+                      "aria-hidden": true
+                    }
+                  ),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _chunkCXGFGGGIcjs.Typography,
+                    {
+                      level: "caption",
+                      as: "p",
+                      className: "aviala-form__message-text",
+                      children: error
+                    }
+                  )
+                ]
+              }
+            ) : null,
+            info ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "aviala-form__message aviala-form__message--info", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _icons.SymbolInformationCircle,
+                {
+                  className: "aviala-form__message-icon",
+                  width: 14,
+                  height: 14,
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkCXGFGGGIcjs.Typography,
+                {
+                  level: "caption",
+                  as: "p",
+                  className: "aviala-form__message-text",
+                  children: info
+                }
+              )
+            ] }) : null,
+            alert ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aviala-form__alert", children: alert }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+FormFieldLayout.displayName = "FormFieldLayout";
+var FormFieldControlled = _react.forwardRef.call(void 0, 
+  ({
+    control,
+    name,
+    rules,
+    defaultValue,
+    shouldUnregister,
+    disabled,
+    render,
+    error,
+    ...layoutProps
+  }, ref) => {
+    const id = _react.useId.call(void 0, );
+    const { field, fieldState, formState } = _reacthookform.useController.call(void 0, {
+      name,
+      control,
+      rules,
+      defaultValue,
+      shouldUnregister,
+      disabled
+    });
+    const message = error !== void 0 ? error : _nullishCoalesce(_optionalChain([fieldState, 'access', _ => _.error, 'optionalAccess', _2 => _2.message]), () => ( null));
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormFieldLayout, { ref, ...layoutProps, htmlFor: id, error: message, children: render({ field, fieldState, formState, id }) });
+  }
+);
+FormFieldControlled.displayName = "FormFieldControlled";
+function isControlledProps(props) {
+  return "render" in props && typeof props.render === "function" && "name" in props;
+}
+var FormFieldRoot = _react.forwardRef.call(void 0, 
+  (props, ref) => {
+    if (isControlledProps(props)) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormFieldControlled, { ref, ...props });
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormFieldLayout, { ref, ...props });
+  }
+);
+var FormField = FormFieldRoot;
+FormField.displayName = "FormField";
+var Form = _reacthookform.FormProvider;
+
+
+
+
+exports.Form = Form; exports.FormField = FormField; exports.useResolvedControlError = _chunkCXGFGGGIcjs.useResolvedControlError;
+//# sourceMappingURL=form.cjs.map

package/dist/form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/spiral-2/spiral-2/packages/ui/dist/form.cjs","../src/components/form-field.tsx"],"names":[],"mappings":"AAAA,6rBAAY;AACZ;AACE;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACA;ACTA;AACE;AACA;AAAA,6CACK;AACP;AACE;AACA;AACA;AAAA,8BAKK;AACP;AACE;AACA;AAAA,gDAQK;AAsGW,+CAAA;AAlClB,IAAM,gBAAA,EAAkB,+BAAA;AAAA,EACtB,CACE;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA,EAAY,UAAA;AAAA,IACZ,QAAA;AAAA,IACA,GAAG;AAAA,EACL,CAAA,EACA,GAAA,EAAA,GACG;AACH,IAAA,MAAM,QAAA,EAAU,0BAAA,CAAM;AACtB,IAAA,MAAM,QAAA,EAAU,CAAA,EAAA;AACC,IAAA;AACD,IAAA;AACV,IAAA;AACA,IAAA;AAGC,MAAA;AAAA,MAAA;AACC,QAAA;AACU,QAAA;AAEV,QAAA;AAAC,UAAA;AAAA,UAAA;AACK,YAAA;AACI,YAAA;AAEN,YAAA;AAEK,cAAA;AACA,cAAA;AAMD,YAAA;AAEN,YAAA;AAAW,UAAA;AACb,QAAA;AAAA,MAAA;AAGF,IAAA;AAAC,MAAA;AAAA,MAAA;AACK,QAAA;AACM,QAAA;AACF,QAAA;AAEN,QAAA;AAEK,UAAA;AAEC,UAAA;AAKF,QAAA;AAEK,QAAA;AAAA,MAAA;AAGb,IAAA;AAGJ,IAAA;AAAC,MAAA;AAAA,MAAA;AACC,QAAA;AACW,QAAA;AACX,QAAA;AACA,QAAA;AACI,QAAA;AAEH,QAAA;AAAA,UAAA;AACD,0BAAA;AACE,4BAAA;AAIE,YAAA;AAAC,cAAA;AAAA,cAAA;AACC,gBAAA;AACA,gBAAA;AAEA,gBAAA;AAAA,kCAAA;AAAC,oBAAA;AAAA,oBAAA;AAAA,sBAAA;AACW,sBAAA;AACH,sBAAA;AACC,sBAAA;AACG,oBAAA;AACb,kBAAA;AACA,kCAAA;AAAC,oBAAA;AAAA,oBAAA;AAAA,sBAAA;AACO,sBAAA;AACH,sBAAA;AACO,sBAAA;AAET,oBAAA;AACH,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAEA,YAAA;AAEF,YAAA;AACE,8BAAA;AAAC,gBAAA;AAAA,gBAAA;AACC,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AAAW,gBAAA;AACb,cAAA;AACA,8BAAA;AAAC,gBAAA;AAAA,gBAAA;AACC,kBAAA;AACA,kBAAA;AACA,kBAAA;AAEC,kBAAA;AAAA,gBAAA;AACH,cAAA;AAEA,YAAA;AACK,YAAA;AACX,UAAA;AAAA,QAAA;AAAA,MAAA;AACF,IAAA;AAEJ,EAAA;AACF;AACgB;AAEV;AAKF,EAAA;AACE,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACG,IAAA;AAGF,EAAA;AACc,IAAA;AACF,IAAA;AACb,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACD,IAAA;AAEC,IAAA;AAGA,IAAA;AAIJ,EAAA;AACF;AACoB;AAEX;AAIO,EAAA;AAEhB;AAEsB;AACJ,EAAA;AACV,IAAA;AACK,MAAA;AACT,IAAA;AACO,IAAA;AACT,EAAA;AACF;AA6ByB;AASf;AAGU;ADpIC;AACA;AACA;AACA;AACA","file":"/home/runner/work/spiral-2/spiral-2/packages/ui/dist/form.cjs","sourcesContent":[null,"import {\n  SymbolInformationCircle,\n  SymbolWrongCircle,\n} from \"@aviala-design/icons\";\nimport {\n  forwardRef,\n  useId,\n  useMemo,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport {\n  FormProvider,\n  useController,\n  type Control,\n  type ControllerFieldState,\n  type ControllerRenderProps,\n  type FieldPath,\n  type FieldValues,\n  type UseControllerProps,\n  type UseFormStateReturn,\n} from \"react-hook-form\";\nimport { cn } from \"../lib/utils\";\nimport { FormFieldControlContext } from \"./form-field-context\";\nimport { Typeface } from \"./typeface\";\nimport { Typography } from \"./typography\";\n\n/** Figma Components → System Composition → Form (527:57461 / 527:57641) */\nexport type FormFieldDirection = \"vertical\" | \"horizontal\";\n\nexport { useResolvedControlError } from \"./form-field-context\";\n\n/** Layout mode — the original props-driven wrapper */\nexport type FormFieldLayoutProps = HTMLAttributes<HTMLDivElement> & {\n  label?: ReactNode;\n  htmlFor?: string;\n  description?: ReactNode;\n  error?: ReactNode;\n  info?: ReactNode;\n  /** Optional Alert / Feedback under the control */\n  alert?: ReactNode;\n  required?: boolean;\n  /** Figma `Direction` — vertical stacks label above control; horizontal places label beside */\n  direction?: FormFieldDirection;\n  children?: ReactNode;\n};\n\n/** Render arguments passed to `render` in react-hook-form mode */\nexport type FormFieldRenderProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  field: ControllerRenderProps<TFieldValues, TName>;\n  fieldState: ControllerFieldState;\n  formState: UseFormStateReturn<TFieldValues>;\n  /**\n   * Auto-generated control id. The field label is already wired to it via\n   * `htmlFor` — pass it to the underlying input (`<Input id={id} />`).\n   */\n  id: string;\n};\n\n/**\n * react-hook-form mode — bind the field to a form via `name` (+ optional\n * `control`; falls back to the surrounding `<Form>` context). Validation\n * errors from the resolver (zod etc.) are rendered automatically unless the\n * `error` prop overrides them. Nested controls inherit the invalid state via\n * context unless they set an explicit `error` prop.\n */\nexport type FormFieldControlledProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = Omit<FormFieldLayoutProps, \"children\" | \"htmlFor\"> &\n  Pick<\n    UseControllerProps<TFieldValues, TName>,\n    \"rules\" | \"defaultValue\" | \"shouldUnregister\" | \"disabled\"\n  > & {\n    name: TName;\n    control?: Control<TFieldValues>;\n    render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;\n    /** Overrides the validation error message shown under the control */\n    error?: ReactNode;\n  };\n\nexport type FormFieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = FormFieldLayoutProps | FormFieldControlledProps<TFieldValues, TName>;\n\nconst FormFieldLayout = forwardRef<HTMLDivElement, FormFieldLayoutProps>(\n  (\n    {\n      className,\n      label,\n      htmlFor,\n      description,\n      error,\n      info,\n      alert,\n      required,\n      direction = \"vertical\",\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = useId();\n    const labelId = `${reactId}-label`;\n    const hasLabel = label != null && label !== \"\";\n    const invalid = Boolean(error);\n    const controlContext = useMemo(() => ({ invalid }), [invalid]);\n    const labelNode =\n      hasLabel || description ? (\n        htmlFor ? (\n          <label\n            htmlFor={htmlFor}\n            className=\"aviala-form__label aviala-form__label--control\"\n          >\n            <Typeface\n              id={labelId}\n              content=\"textCaption\"\n              primary={\n                hasLabel ? (\n                  <>\n                    {label}\n                    {required ? (\n                      <span className=\"aviala-form__required\" aria-hidden>\n                        *\n                      </span>\n                    ) : null}\n                  </>\n                ) : undefined\n              }\n              secondary={description}\n            />\n          </label>\n        ) : (\n          <Typeface\n            id={labelId}\n            className=\"aviala-form__label\"\n            content=\"textCaption\"\n            primary={\n              hasLabel ? (\n                <>\n                  {label}\n                  {required ? (\n                    <span className=\"aviala-form__required\" aria-hidden>\n                      *\n                    </span>\n                  ) : null}\n                </>\n              ) : undefined\n            }\n            secondary={description}\n          />\n        )\n      ) : null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"aviala-form\", className)}\n        data-direction={direction}\n        aria-labelledby={hasLabel ? labelId : undefined}\n        {...props}\n      >\n        {labelNode}\n        <div className=\"aviala-form__content\">\n          <FormFieldControlContext.Provider value={controlContext}>\n            {children}\n          </FormFieldControlContext.Provider>\n          {error ? (\n            <div\n              className=\"aviala-form__message aviala-form__message--error\"\n              role=\"alert\"\n            >\n              <SymbolWrongCircle\n                className=\"aviala-form__message-icon\"\n                width={14}\n                height={14}\n                aria-hidden\n              />\n              <Typography\n                level=\"caption\"\n                as=\"p\"\n                className=\"aviala-form__message-text\"\n              >\n                {error}\n              </Typography>\n            </div>\n          ) : null}\n          {info ? (\n            <div className=\"aviala-form__message aviala-form__message--info\">\n              <SymbolInformationCircle\n                className=\"aviala-form__message-icon\"\n                width={14}\n                height={14}\n                aria-hidden\n              />\n              <Typography\n                level=\"caption\"\n                as=\"p\"\n                className=\"aviala-form__message-text\"\n              >\n                {info}\n              </Typography>\n            </div>\n          ) : null}\n          {alert ? <div className=\"aviala-form__alert\">{alert}</div> : null}\n        </div>\n      </div>\n    );\n  }\n);\nFormFieldLayout.displayName = \"FormFieldLayout\";\n\nconst FormFieldControlled = forwardRef<\n  HTMLDivElement,\n  FormFieldControlledProps\n>(\n  (\n    {\n      control,\n      name,\n      rules,\n      defaultValue,\n      shouldUnregister,\n      disabled,\n      render,\n      error,\n      ...layoutProps\n    },\n    ref\n  ) => {\n    const id = useId();\n    const { field, fieldState, formState } = useController({\n      name,\n      control,\n      rules,\n      defaultValue,\n      shouldUnregister,\n      disabled,\n    });\n    const message =\n      error !== undefined ? error : (fieldState.error?.message ?? null);\n\n    return (\n      <FormFieldLayout ref={ref} {...layoutProps} htmlFor={id} error={message}>\n        {render({ field, fieldState, formState, id })}\n      </FormFieldLayout>\n    );\n  }\n);\nFormFieldControlled.displayName = \"FormFieldControlled\";\n\nfunction isControlledProps(\n  props: FormFieldProps\n): props is FormFieldControlledProps {\n  return (\n    \"render\" in props && typeof props.render === \"function\" && \"name\" in props\n  );\n}\n\nconst FormFieldRoot = forwardRef<HTMLDivElement, FormFieldProps>(\n  (props, ref) => {\n    if (isControlledProps(props)) {\n      return <FormFieldControlled ref={ref} {...props} />;\n    }\n    return <FormFieldLayout ref={ref} {...props} />;\n  }\n);\n\n/**\n * FormField — layout wrapper around a form control, or a react-hook-form\n * bound field when given `name` + `render` (shadcn-style).\n *\n * When an error tip is shown, nested Spiral controls that support `error`\n * (Input, Textarea, SelectTrigger, …) inherit the invalid state unless they\n * set an explicit `error` prop.\n *\n * @example Layout mode\n * <FormField label=\"Email\" htmlFor=\"email\" error=\"Required\">\n *   <Input id=\"email\" />\n * </FormField>\n *\n * @example react-hook-form + zod mode\n * <Form {...form}>\n *   <form onSubmit={form.handleSubmit(onSubmit)}>\n *     <FormField\n *       control={form.control}\n *       name=\"email\"\n *       label=\"Email\"\n *       render={({ field, id }) => (\n *         <Input id={id} {...field} />\n *       )}\n *     />\n *   </form>\n * </Form>\n */\nexport const FormField = FormFieldRoot as {\n  <\n    TFieldValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  >(\n    props: FormFieldProps<TFieldValues, TName> & { ref?: Ref<HTMLDivElement> }\n  ): ReactElement | null;\n  displayName?: string;\n};\nFormField.displayName = \"FormField\";\n\n/** Alias of react-hook-form's FormProvider — wrap your form with it (shadcn-style `<Form {...form}>`) */\nexport const Form = FormProvider;\n"]}

package/dist/form.d.cts

@@ -0,0 +1,85 @@
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, UseControllerProps, Control, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
+import { HTMLAttributes, ReactNode, Ref, ReactElement } from 'react';
+export { u as useResolvedControlError } from './form-field-context-XYh-G1KL.cjs';
+
+/** Figma Components → System Composition → Form (527:57461 / 527:57641) */
+type FormFieldDirection = "vertical" | "horizontal";
+
+/** Layout mode — the original props-driven wrapper */
+type FormFieldLayoutProps = HTMLAttributes<HTMLDivElement> & {
+    label?: ReactNode;
+    htmlFor?: string;
+    description?: ReactNode;
+    error?: ReactNode;
+    info?: ReactNode;
+    /** Optional Alert / Feedback under the control */
+    alert?: ReactNode;
+    required?: boolean;
+    /** Figma `Direction` — vertical stacks label above control; horizontal places label beside */
+    direction?: FormFieldDirection;
+    children?: ReactNode;
+};
+/** Render arguments passed to `render` in react-hook-form mode */
+type FormFieldRenderProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    field: ControllerRenderProps<TFieldValues, TName>;
+    fieldState: ControllerFieldState;
+    formState: UseFormStateReturn<TFieldValues>;
+    /**
+     * Auto-generated control id. The field label is already wired to it via
+     * `htmlFor` — pass it to the underlying input (`<Input id={id} />`).
+     */
+    id: string;
+};
+/**
+ * react-hook-form mode — bind the field to a form via `name` (+ optional
+ * `control`; falls back to the surrounding `<Form>` context). Validation
+ * errors from the resolver (zod etc.) are rendered automatically unless the
+ * `error` prop overrides them. Nested controls inherit the invalid state via
+ * context unless they set an explicit `error` prop.
+ */
+type FormFieldControlledProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<FormFieldLayoutProps, "children" | "htmlFor"> & Pick<UseControllerProps<TFieldValues, TName>, "rules" | "defaultValue" | "shouldUnregister" | "disabled"> & {
+    name: TName;
+    control?: Control<TFieldValues>;
+    render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;
+    /** Overrides the validation error message shown under the control */
+    error?: ReactNode;
+};
+type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldLayoutProps | FormFieldControlledProps<TFieldValues, TName>;
+/**
+ * FormField — layout wrapper around a form control, or a react-hook-form
+ * bound field when given `name` + `render` (shadcn-style).
+ *
+ * When an error tip is shown, nested Spiral controls that support `error`
+ * (Input, Textarea, SelectTrigger, …) inherit the invalid state unless they
+ * set an explicit `error` prop.
+ *
+ * @example Layout mode
+ * <FormField label="Email" htmlFor="email" error="Required">
+ *   <Input id="email" />
+ * </FormField>
+ *
+ * @example react-hook-form + zod mode
+ * <Form {...form}>
+ *   <form onSubmit={form.handleSubmit(onSubmit)}>
+ *     <FormField
+ *       control={form.control}
+ *       name="email"
+ *       label="Email"
+ *       render={({ field, id }) => (
+ *         <Input id={id} {...field} />
+ *       )}
+ *     />
+ *   </form>
+ * </Form>
+ */
+declare const FormField: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> & {
+        ref?: Ref<HTMLDivElement>;
+    }): ReactElement | null;
+    displayName?: string;
+};
+/** Alias of react-hook-form's FormProvider — wrap your form with it (shadcn-style `<Form {...form}>`) */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+
+export { Form, FormField, type FormFieldControlledProps, type FormFieldDirection, type FormFieldLayoutProps, type FormFieldProps, type FormFieldRenderProps };

package/dist/form.d.ts

@@ -0,0 +1,85 @@
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, UseControllerProps, Control, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
+import { HTMLAttributes, ReactNode, Ref, ReactElement } from 'react';
+export { u as useResolvedControlError } from './form-field-context-XYh-G1KL.js';
+
+/** Figma Components → System Composition → Form (527:57461 / 527:57641) */
+type FormFieldDirection = "vertical" | "horizontal";
+
+/** Layout mode — the original props-driven wrapper */
+type FormFieldLayoutProps = HTMLAttributes<HTMLDivElement> & {
+    label?: ReactNode;
+    htmlFor?: string;
+    description?: ReactNode;
+    error?: ReactNode;
+    info?: ReactNode;
+    /** Optional Alert / Feedback under the control */
+    alert?: ReactNode;
+    required?: boolean;
+    /** Figma `Direction` — vertical stacks label above control; horizontal places label beside */
+    direction?: FormFieldDirection;
+    children?: ReactNode;
+};
+/** Render arguments passed to `render` in react-hook-form mode */
+type FormFieldRenderProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    field: ControllerRenderProps<TFieldValues, TName>;
+    fieldState: ControllerFieldState;
+    formState: UseFormStateReturn<TFieldValues>;
+    /**
+     * Auto-generated control id. The field label is already wired to it via
+     * `htmlFor` — pass it to the underlying input (`<Input id={id} />`).
+     */
+    id: string;
+};
+/**
+ * react-hook-form mode — bind the field to a form via `name` (+ optional
+ * `control`; falls back to the surrounding `<Form>` context). Validation
+ * errors from the resolver (zod etc.) are rendered automatically unless the
+ * `error` prop overrides them. Nested controls inherit the invalid state via
+ * context unless they set an explicit `error` prop.
+ */
+type FormFieldControlledProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<FormFieldLayoutProps, "children" | "htmlFor"> & Pick<UseControllerProps<TFieldValues, TName>, "rules" | "defaultValue" | "shouldUnregister" | "disabled"> & {
+    name: TName;
+    control?: Control<TFieldValues>;
+    render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;
+    /** Overrides the validation error message shown under the control */
+    error?: ReactNode;
+};
+type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldLayoutProps | FormFieldControlledProps<TFieldValues, TName>;
+/**
+ * FormField — layout wrapper around a form control, or a react-hook-form
+ * bound field when given `name` + `render` (shadcn-style).
+ *
+ * When an error tip is shown, nested Spiral controls that support `error`
+ * (Input, Textarea, SelectTrigger, …) inherit the invalid state unless they
+ * set an explicit `error` prop.
+ *
+ * @example Layout mode
+ * <FormField label="Email" htmlFor="email" error="Required">
+ *   <Input id="email" />
+ * </FormField>
+ *
+ * @example react-hook-form + zod mode
+ * <Form {...form}>
+ *   <form onSubmit={form.handleSubmit(onSubmit)}>
+ *     <FormField
+ *       control={form.control}
+ *       name="email"
+ *       label="Email"
+ *       render={({ field, id }) => (
+ *         <Input id={id} {...field} />
+ *       )}
+ *     />
+ *   </form>
+ * </Form>
+ */
+declare const FormField: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> & {
+        ref?: Ref<HTMLDivElement>;
+    }): ReactElement | null;
+    displayName?: string;
+};
+/** Alias of react-hook-form's FormProvider — wrap your form with it (shadcn-style `<Form {...form}>`) */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+
+export { Form, FormField, type FormFieldControlledProps, type FormFieldDirection, type FormFieldLayoutProps, type FormFieldProps, type FormFieldRenderProps };

package/dist/form.js

@@ -0,0 +1,187 @@
+"use client";
+import {
+  FormFieldControlContext,
+  Typeface,
+  Typography,
+  cn,
+  useResolvedControlError
+} from "./chunk-XVABQUTX.js";
+
+// src/components/form-field.tsx
+import {
+  SymbolInformationCircle,
+  SymbolWrongCircle
+} from "@aviala-design/icons";
+import {
+  forwardRef,
+  useId,
+  useMemo
+} from "react";
+import {
+  FormProvider,
+  useController
+} from "react-hook-form";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FormFieldLayout = forwardRef(
+  ({
+    className,
+    label,
+    htmlFor,
+    description,
+    error,
+    info,
+    alert,
+    required,
+    direction = "vertical",
+    children,
+    ...props
+  }, ref) => {
+    const reactId = useId();
+    const labelId = `${reactId}-label`;
+    const hasLabel = label != null && label !== "";
+    const invalid = Boolean(error);
+    const controlContext = useMemo(() => ({ invalid }), [invalid]);
+    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor,
+        className: "aviala-form__label aviala-form__label--control",
+        children: /* @__PURE__ */ jsx(
+          Typeface,
+          {
+            id: labelId,
+            content: "textCaption",
+            primary: hasLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              label,
+              required ? /* @__PURE__ */ jsx("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+            ] }) : void 0,
+            secondary: description
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      Typeface,
+      {
+        id: labelId,
+        className: "aviala-form__label",
+        content: "textCaption",
+        primary: hasLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          label,
+          required ? /* @__PURE__ */ jsx("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+        ] }) : void 0,
+        secondary: description
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("aviala-form", className),
+        "data-direction": direction,
+        "aria-labelledby": hasLabel ? labelId : void 0,
+        ...props,
+        children: [
+          labelNode,
+          /* @__PURE__ */ jsxs("div", { className: "aviala-form__content", children: [
+            /* @__PURE__ */ jsx(FormFieldControlContext.Provider, { value: controlContext, children }),
+            error ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "aviala-form__message aviala-form__message--error",
+                role: "alert",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SymbolWrongCircle,
+                    {
+                      className: "aviala-form__message-icon",
+                      width: 14,
+                      height: 14,
+                      "aria-hidden": true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      level: "caption",
+                      as: "p",
+                      className: "aviala-form__message-text",
+                      children: error
+                    }
+                  )
+                ]
+              }
+            ) : null,
+            info ? /* @__PURE__ */ jsxs("div", { className: "aviala-form__message aviala-form__message--info", children: [
+              /* @__PURE__ */ jsx(
+                SymbolInformationCircle,
+                {
+                  className: "aviala-form__message-icon",
+                  width: 14,
+                  height: 14,
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  level: "caption",
+                  as: "p",
+                  className: "aviala-form__message-text",
+                  children: info
+                }
+              )
+            ] }) : null,
+            alert ? /* @__PURE__ */ jsx("div", { className: "aviala-form__alert", children: alert }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+FormFieldLayout.displayName = "FormFieldLayout";
+var FormFieldControlled = forwardRef(
+  ({
+    control,
+    name,
+    rules,
+    defaultValue,
+    shouldUnregister,
+    disabled,
+    render,
+    error,
+    ...layoutProps
+  }, ref) => {
+    const id = useId();
+    const { field, fieldState, formState } = useController({
+      name,
+      control,
+      rules,
+      defaultValue,
+      shouldUnregister,
+      disabled
+    });
+    const message = error !== void 0 ? error : fieldState.error?.message ?? null;
+    return /* @__PURE__ */ jsx(FormFieldLayout, { ref, ...layoutProps, htmlFor: id, error: message, children: render({ field, fieldState, formState, id }) });
+  }
+);
+FormFieldControlled.displayName = "FormFieldControlled";
+function isControlledProps(props) {
+  return "render" in props && typeof props.render === "function" && "name" in props;
+}
+var FormFieldRoot = forwardRef(
+  (props, ref) => {
+    if (isControlledProps(props)) {
+      return /* @__PURE__ */ jsx(FormFieldControlled, { ref, ...props });
+    }
+    return /* @__PURE__ */ jsx(FormFieldLayout, { ref, ...props });
+  }
+);
+var FormField = FormFieldRoot;
+FormField.displayName = "FormField";
+var Form = FormProvider;
+export {
+  Form,
+  FormField,
+  useResolvedControlError
+};
+//# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form-field.tsx"],"sourcesContent":["import {\n  SymbolInformationCircle,\n  SymbolWrongCircle,\n} from \"@aviala-design/icons\";\nimport {\n  forwardRef,\n  useId,\n  useMemo,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport {\n  FormProvider,\n  useController,\n  type Control,\n  type ControllerFieldState,\n  type ControllerRenderProps,\n  type FieldPath,\n  type FieldValues,\n  type UseControllerProps,\n  type UseFormStateReturn,\n} from \"react-hook-form\";\nimport { cn } from \"../lib/utils\";\nimport { FormFieldControlContext } from \"./form-field-context\";\nimport { Typeface } from \"./typeface\";\nimport { Typography } from \"./typography\";\n\n/** Figma Components → System Composition → Form (527:57461 / 527:57641) */\nexport type FormFieldDirection = \"vertical\" | \"horizontal\";\n\nexport { useResolvedControlError } from \"./form-field-context\";\n\n/** Layout mode — the original props-driven wrapper */\nexport type FormFieldLayoutProps = HTMLAttributes<HTMLDivElement> & {\n  label?: ReactNode;\n  htmlFor?: string;\n  description?: ReactNode;\n  error?: ReactNode;\n  info?: ReactNode;\n  /** Optional Alert / Feedback under the control */\n  alert?: ReactNode;\n  required?: boolean;\n  /** Figma `Direction` — vertical stacks label above control; horizontal places label beside */\n  direction?: FormFieldDirection;\n  children?: ReactNode;\n};\n\n/** Render arguments passed to `render` in react-hook-form mode */\nexport type FormFieldRenderProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  field: ControllerRenderProps<TFieldValues, TName>;\n  fieldState: ControllerFieldState;\n  formState: UseFormStateReturn<TFieldValues>;\n  /**\n   * Auto-generated control id. The field label is already wired to it via\n   * `htmlFor` — pass it to the underlying input (`<Input id={id} />`).\n   */\n  id: string;\n};\n\n/**\n * react-hook-form mode — bind the field to a form via `name` (+ optional\n * `control`; falls back to the surrounding `<Form>` context). Validation\n * errors from the resolver (zod etc.) are rendered automatically unless the\n * `error` prop overrides them. Nested controls inherit the invalid state via\n * context unless they set an explicit `error` prop.\n */\nexport type FormFieldControlledProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = Omit<FormFieldLayoutProps, \"children\" | \"htmlFor\"> &\n  Pick<\n    UseControllerProps<TFieldValues, TName>,\n    \"rules\" | \"defaultValue\" | \"shouldUnregister\" | \"disabled\"\n  > & {\n    name: TName;\n    control?: Control<TFieldValues>;\n    render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;\n    /** Overrides the validation error message shown under the control */\n    error?: ReactNode;\n  };\n\nexport type FormFieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = FormFieldLayoutProps | FormFieldControlledProps<TFieldValues, TName>;\n\nconst FormFieldLayout = forwardRef<HTMLDivElement, FormFieldLayoutProps>(\n  (\n    {\n      className,\n      label,\n      htmlFor,\n      description,\n      error,\n      info,\n      alert,\n      required,\n      direction = \"vertical\",\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = useId();\n    const labelId = `${reactId}-label`;\n    const hasLabel = label != null && label !== \"\";\n    const invalid = Boolean(error);\n    const controlContext = useMemo(() => ({ invalid }), [invalid]);\n    const labelNode =\n      hasLabel || description ? (\n        htmlFor ? (\n          <label\n            htmlFor={htmlFor}\n            className=\"aviala-form__label aviala-form__label--control\"\n          >\n            <Typeface\n              id={labelId}\n              content=\"textCaption\"\n              primary={\n                hasLabel ? (\n                  <>\n                    {label}\n                    {required ? (\n                      <span className=\"aviala-form__required\" aria-hidden>\n                        *\n                      </span>\n                    ) : null}\n                  </>\n                ) : undefined\n              }\n              secondary={description}\n            />\n          </label>\n        ) : (\n          <Typeface\n            id={labelId}\n            className=\"aviala-form__label\"\n            content=\"textCaption\"\n            primary={\n              hasLabel ? (\n                <>\n                  {label}\n                  {required ? (\n                    <span className=\"aviala-form__required\" aria-hidden>\n                      *\n                    </span>\n                  ) : null}\n                </>\n              ) : undefined\n            }\n            secondary={description}\n          />\n        )\n      ) : null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"aviala-form\", className)}\n        data-direction={direction}\n        aria-labelledby={hasLabel ? labelId : undefined}\n        {...props}\n      >\n        {labelNode}\n        <div className=\"aviala-form__content\">\n          <FormFieldControlContext.Provider value={controlContext}>\n            {children}\n          </FormFieldControlContext.Provider>\n          {error ? (\n            <div\n              className=\"aviala-form__message aviala-form__message--error\"\n              role=\"alert\"\n            >\n              <SymbolWrongCircle\n                className=\"aviala-form__message-icon\"\n                width={14}\n                height={14}\n                aria-hidden\n              />\n              <Typography\n                level=\"caption\"\n                as=\"p\"\n                className=\"aviala-form__message-text\"\n              >\n                {error}\n              </Typography>\n            </div>\n          ) : null}\n          {info ? (\n            <div className=\"aviala-form__message aviala-form__message--info\">\n              <SymbolInformationCircle\n                className=\"aviala-form__message-icon\"\n                width={14}\n                height={14}\n                aria-hidden\n              />\n              <Typography\n                level=\"caption\"\n                as=\"p\"\n                className=\"aviala-form__message-text\"\n              >\n                {info}\n              </Typography>\n            </div>\n          ) : null}\n          {alert ? <div className=\"aviala-form__alert\">{alert}</div> : null}\n        </div>\n      </div>\n    );\n  }\n);\nFormFieldLayout.displayName = \"FormFieldLayout\";\n\nconst FormFieldControlled = forwardRef<\n  HTMLDivElement,\n  FormFieldControlledProps\n>(\n  (\n    {\n      control,\n      name,\n      rules,\n      defaultValue,\n      shouldUnregister,\n      disabled,\n      render,\n      error,\n      ...layoutProps\n    },\n    ref\n  ) => {\n    const id = useId();\n    const { field, fieldState, formState } = useController({\n      name,\n      control,\n      rules,\n      defaultValue,\n      shouldUnregister,\n      disabled,\n    });\n    const message =\n      error !== undefined ? error : (fieldState.error?.message ?? null);\n\n    return (\n      <FormFieldLayout ref={ref} {...layoutProps} htmlFor={id} error={message}>\n        {render({ field, fieldState, formState, id })}\n      </FormFieldLayout>\n    );\n  }\n);\nFormFieldControlled.displayName = \"FormFieldControlled\";\n\nfunction isControlledProps(\n  props: FormFieldProps\n): props is FormFieldControlledProps {\n  return (\n    \"render\" in props && typeof props.render === \"function\" && \"name\" in props\n  );\n}\n\nconst FormFieldRoot = forwardRef<HTMLDivElement, FormFieldProps>(\n  (props, ref) => {\n    if (isControlledProps(props)) {\n      return <FormFieldControlled ref={ref} {...props} />;\n    }\n    return <FormFieldLayout ref={ref} {...props} />;\n  }\n);\n\n/**\n * FormField — layout wrapper around a form control, or a react-hook-form\n * bound field when given `name` + `render` (shadcn-style).\n *\n * When an error tip is shown, nested Spiral controls that support `error`\n * (Input, Textarea, SelectTrigger, …) inherit the invalid state unless they\n * set an explicit `error` prop.\n *\n * @example Layout mode\n * <FormField label=\"Email\" htmlFor=\"email\" error=\"Required\">\n *   <Input id=\"email\" />\n * </FormField>\n *\n * @example react-hook-form + zod mode\n * <Form {...form}>\n *   <form onSubmit={form.handleSubmit(onSubmit)}>\n *     <FormField\n *       control={form.control}\n *       name=\"email\"\n *       label=\"Email\"\n *       render={({ field, id }) => (\n *         <Input id={id} {...field} />\n *       )}\n *     />\n *   </form>\n * </Form>\n */\nexport const FormField = FormFieldRoot as {\n  <\n    TFieldValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  >(\n    props: FormFieldProps<TFieldValues, TName> & { ref?: Ref<HTMLDivElement> }\n  ): ReactElement | null;\n  displayName?: string;\n};\nFormField.displayName = \"FormField\";\n\n/** Alias of react-hook-form's FormProvider — wrap your form with it (shadcn-style `<Form {...form}>`) */\nexport const Form = FormProvider;\n"],"mappings":"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","names":[]}