@ariakit/react-components 0.1.0

package/dist/form/form-context.js

@@ -0,0 +1,27 @@
+"use client";
+import { CollectionContextProvider, CollectionScopedContextProvider } from "../collection/collection-context.js";
+import { createStoreContext } from "@ariakit/react-utils";
+//#region src/form/form-context.tsx
+const ctx = createStoreContext([CollectionContextProvider], [CollectionScopedContextProvider]);
+/**
+* Returns the form store from the nearest form container.
+* @example
+* function FormInput() {
+*   const store = useFormContext();
+*
+*   if (!store) {
+*     throw new Error("FormInput must be wrapped in FormProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const useFormContext = ctx.useContext;
+const useFormScopedContext = ctx.useScopedContext;
+const useFormProviderContext = ctx.useProviderContext;
+const FormContextProvider = ctx.ContextProvider;
+const FormScopedContextProvider = ctx.ScopedContextProvider;
+//#endregion
+export { FormContextProvider, FormScopedContextProvider, useFormContext, useFormProviderContext, useFormScopedContext };
+
+//# sourceMappingURL=form-context.js.map

package/dist/form/form-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-context.js","names":[],"sources":["../../src/form/form-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport {\n  CollectionContextProvider,\n  CollectionScopedContextProvider,\n} from \"../collection/collection-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst ctx = createStoreContext<FormStore>(\n  [CollectionContextProvider],\n  [CollectionScopedContextProvider],\n);\n\n/**\n * Returns the form store from the nearest form container.\n * @example\n * function FormInput() {\n *   const store = useFormContext();\n *\n *   if (!store) {\n *     throw new Error(\"FormInput must be wrapped in FormProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const useFormContext = ctx.useContext;\n\nexport const useFormScopedContext = ctx.useScopedContext;\n\nexport const useFormProviderContext = ctx.useProviderContext;\n\nexport const FormContextProvider = ctx.ContextProvider;\n\nexport const FormScopedContextProvider = ctx.ScopedContextProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,MAAa,iBAAA,IAAA;AAEb,MAAa,uBAAA,IAAyB;AAEtC,MAAa,yBAAsB,IAAI;AAEvC,MAAa,sBAAA,IAAA"}

package/dist/form/form-control.d.ts

@@ -0,0 +1,100 @@
+import { n as CollectionItemOptions } from "../collection-item-C-g2BwVF.js";
+import { t as FormStore } from "../form-store-C4Kf5QHm.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, FocusEvent } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+import { StringLike } from "@ariakit/components/form/types";
+
+//#region src/form/form-control.d.ts
+declare const TagName = "input";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormControl` component. Unlike `useFormInput`,
+ * this hook doesn't automatically returns the `value` and `onChange` props.
+ * This is so we can use it not only for native form elements but also for
+ * custom components whose value is not controlled by the native `value` and
+ * `onChange` props.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { content: "" } });
+ * const props = useFormControl({ store, name: store.names.content });
+ * const value = store.useValue(store.names.content);
+ *
+ * <Form store={store}>
+ *   <FormLabel name={store.names.content}>Content</FormLabel>
+ *   <Role
+ *     {...props}
+ *     value={value}
+ *     onChange={(value) => store.setValue(store.names.content, value)}
+ *     render={<Editor />}
+ *   />
+ * </Form>
+ * ```
+ */
+declare const useFormControl: import("@ariakit/react-utils").Hook<"input", FormControlOptions<"input">>;
+/**
+ * Abstract component that renders a form control. Unlike
+ * [`FormInput`](https://ariakit.com/reference/form-input), this component
+ * doesn't automatically pass the `value` and `onChange` props down to the
+ * underlying element. This is so we can use it not only for native form
+ * elements but also for custom components whose value is not controlled by the
+ * native `value` and `onChange` props.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {11-19}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     content: "",
+ *   },
+ * });
+ *
+ * const value = form.useValue(form.names.content);
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.content}>Content</FormLabel>
+ *   <FormControl
+ *     name={form.names.content}
+ *     render={
+ *       <Editor
+ *         value={value}
+ *         onChange={(value) => form.setValue(form.names.content, value)}
+ *       />
+ *     }
+ *   />
+ * </Form>
+ * ```
+ */
+declare const FormControl: (props: FormControlProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormControlOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
+  /**
+   * Object returned by the
+   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not
+   * provided, the closest [`Form`](https://ariakit.com/reference/form) or
+   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'
+   * context will be used.
+   */
+  store?: FormStore;
+  /**
+   * Field name. This can either be a string corresponding to an existing
+   * property name in the
+   * [`values`](https://ariakit.com/reference/use-form-store#values) state of
+   * the store, or a reference to a field name from the
+   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the
+   * store, ensuring type safety.
+   *
+   * Live examples:
+   * - [FormRadio](https://ariakit.com/examples/form-radio)
+   * - [Form with Select](https://ariakit.com/examples/form-select)
+   */
+  name: StringLike;
+  /**
+   * Whether the field should be marked touched on blur.
+   * @default true
+   */
+  touchOnBlur?: BooleanOrCallback<FocusEvent>;
+}
+type FormControlProps<T extends ElementType = TagName> = Props<T, FormControlOptions<T>>;
+//#endregion
+export { FormControl, FormControlOptions, FormControlProps, useFormControl };
+//# sourceMappingURL=form-control.d.ts.map

package/dist/form/form-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.d.ts","names":["StringLike","Props","BooleanOrCallback","ElementType","FocusEvent","CollectionItemOptions","FormStore","TagName","useFormControl","FormControlOptions","Hook","FormControl","FormControlProps","props","ReactElement","JSXElementConstructor","T","store","name","touchOnBlur"],"sources":["../../src/form/form-control.d.ts"],"mappings":";;;;;;;;cAMcO,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAyB7B;;;;AAAoG;AAiCpG;;;;;;;;;AA5DiD,cA2B5BC,cAAAA,iCAA+CE,IAAAA,UAAcD,kBAAkB;AAkCpG;;;;;;;;;;;;;;;;;;;;;;;;;;AA0B8C;AAE9C;;;;;AA5BA,cADqBE,WAAAA,GAAcE,KAAAA,EAAOD,gBAAgB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzGN,kBAAAA,WAA6BN,WAAAA,GAAcI,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EA4B1BP;;;;;;;EApBrEQ,KAAAA,GAAQX,SAAAA;EAoB0DU;;;;AAAuB;;;;;;;;EAPzFE,IAAAA,EAAMlB,UAAAA;;;;;EAKNmB,WAAAA,GAAcjB,iBAAAA,CAAkBE,UAAAA;AAAAA;AAAAA,KAExBQ,gBAAAA,WAA2BT,WAAAA,GAAcI,OAAAA,IAAWN,KAAAA,CAAMe,CAAAA,EAAGP,kBAAAA,CAAmBO,CAAAA"}

package/dist/form/form-control.js

@@ -0,0 +1,139 @@
+"use client";
+import { useCollectionItem } from "../collection/collection-item.js";
+import { useFormContext } from "./form-context.js";
+import { createElement, createHook, forwardRef, memo, useBooleanEvent, useEvent, useId, useMergeRefs } from "@ariakit/react-utils";
+import { cx, getDocument, invariant } from "@ariakit/utils";
+import { useCallback, useRef } from "react";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/form/form-control.tsx
+const TagName = "input";
+function getNamedElement(ref, name) {
+	const element = ref.current;
+	if (!element) return null;
+	if (element.name === name) return element;
+	if (element.form) return element.form.elements.namedItem(name);
+	return getDocument(element).getElementsByName(name)[0];
+}
+function useItem(store, name, type) {
+	return useStoreState(store, (state) => state.items.find((item) => item.type === type && item.name === name));
+}
+/**
+* Returns props to create a `FormControl` component. Unlike `useFormInput`,
+* this hook doesn't automatically returns the `value` and `onChange` props.
+* This is so we can use it not only for native form elements but also for
+* custom components whose value is not controlled by the native `value` and
+* `onChange` props.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore({ defaultValues: { content: "" } });
+* const props = useFormControl({ store, name: store.names.content });
+* const value = store.useValue(store.names.content);
+*
+* <Form store={store}>
+*   <FormLabel name={store.names.content}>Content</FormLabel>
+*   <Role
+*     {...props}
+*     value={value}
+*     onChange={(value) => store.setValue(store.names.content, value)}
+*     render={<Editor />}
+*   />
+* </Form>
+* ```
+*/
+const useFormControl = createHook(function useFormControl({ store, name: nameProp, getItem: getItemProp, touchOnBlur = true, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormControl must be wrapped in a Form component.");
+	const name = String(nameProp);
+	const id = useId(props.id);
+	const ref = useRef(null);
+	store.useValidate(async () => {
+		const element = getNamedElement(ref, name);
+		if (!element) return;
+		await Promise.resolve();
+		if ("validity" in element && !element.validity.valid) store?.setError(name, element.validationMessage);
+	});
+	const getItem = useCallback((item) => {
+		const nextItem = {
+			...item,
+			id: id || item.id,
+			name,
+			type: "field"
+		};
+		if (getItemProp) return getItemProp(nextItem);
+		return nextItem;
+	}, [
+		id,
+		name,
+		getItemProp
+	]);
+	const onBlurProp = props.onBlur;
+	const touchOnBlurProp = useBooleanEvent(touchOnBlur);
+	const onBlur = useEvent((event) => {
+		onBlurProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!touchOnBlurProp(event)) return;
+		store?.setFieldTouched(name, true);
+	});
+	const label = useItem(store, name, "label");
+	const error = useItem(store, name, "error");
+	const description = useItem(store, name, "description");
+	const describedBy = cx(error?.id, description?.id, props["aria-describedby"]);
+	const invalid = useStoreState(store, () => !!store?.getError(name) && store.getFieldTouched(name));
+	props = {
+		"aria-labelledby": props["aria-label"] != null ? void 0 : label?.id,
+		"aria-invalid": invalid,
+		...props,
+		id,
+		"aria-describedby": describedBy || void 0,
+		ref: useMergeRefs(ref, props.ref),
+		onBlur
+	};
+	props = useCollectionItem({
+		store,
+		...props,
+		name,
+		getItem
+	});
+	return props;
+});
+/**
+* Abstract component that renders a form control. Unlike
+* [`FormInput`](https://ariakit.com/reference/form-input), this component
+* doesn't automatically pass the `value` and `onChange` props down to the
+* underlying element. This is so we can use it not only for native form
+* elements but also for custom components whose value is not controlled by the
+* native `value` and `onChange` props.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {11-19}
+* const form = useFormStore({
+*   defaultValues: {
+*     content: "",
+*   },
+* });
+*
+* const value = form.useValue(form.names.content);
+*
+* <Form store={form}>
+*   <FormLabel name={form.names.content}>Content</FormLabel>
+*   <FormControl
+*     name={form.names.content}
+*     render={
+*       <Editor
+*         value={value}
+*         onChange={(value) => form.setValue(form.names.content, value)}
+*       />
+*     }
+*   />
+* </Form>
+* ```
+*/
+const FormControl = memo(forwardRef(function FormControl(props) {
+	return createElement(TagName, useFormControl(props));
+}));
+//#endregion
+export { FormControl, useFormControl };
+
+//# sourceMappingURL=form-control.js.map

package/dist/form/form-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.js","names":[],"sources":["../../src/form/form-control.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getDocument, cx, invariant } from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, RefObject } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\ntype ItemType = \"label\" | \"error\" | \"description\";\n\nfunction getNamedElement(\n  ref: RefObject<HTMLInputElement | null>,\n  name: string,\n) {\n  const element = ref.current;\n  if (!element) return null;\n  if (element.name === name) return element;\n  if (element.form) {\n    return element.form.elements.namedItem(name) as HTMLInputElement | null;\n  }\n  const document = getDocument(element);\n  return document.getElementsByName(name)[0] as HTMLInputElement | null;\n}\n\nfunction useItem(store: FormStore, name: string, type: ItemType) {\n  return useStoreState(store, (state) =>\n    state.items.find((item) => item.type === type && item.name === name),\n  );\n}\n\n/**\n * Returns props to create a `FormControl` component. Unlike `useFormInput`,\n * this hook doesn't automatically returns the `value` and `onChange` props.\n * This is so we can use it not only for native form elements but also for\n * custom components whose value is not controlled by the native `value` and\n * `onChange` props.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { content: \"\" } });\n * const props = useFormControl({ store, name: store.names.content });\n * const value = store.useValue(store.names.content);\n *\n * <Form store={store}>\n *   <FormLabel name={store.names.content}>Content</FormLabel>\n *   <Role\n *     {...props}\n *     value={value}\n *     onChange={(value) => store.setValue(store.names.content, value)}\n *     render={<Editor />}\n *   />\n * </Form>\n * ```\n */\nexport const useFormControl = createHook<TagName, FormControlOptions>(\n  function useFormControl({\n    store,\n    name: nameProp,\n    getItem: getItemProp,\n    touchOnBlur = true,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormControl must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n\n    store.useValidate(async () => {\n      const element = getNamedElement(ref, name);\n      if (!element) return;\n      // Flush microtasks to make sure the validity state is up to date\n      await Promise.resolve();\n      if (\"validity\" in element && !element.validity.valid) {\n        store?.setError(name, element.validationMessage);\n      }\n    });\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, id: id || item.id, name, type: \"field\" };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    const onBlurProp = props.onBlur;\n    const touchOnBlurProp = useBooleanEvent(touchOnBlur);\n\n    const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n      onBlurProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!touchOnBlurProp(event)) return;\n      store?.setFieldTouched(name, true);\n    });\n\n    const label = useItem(store, name, \"label\");\n    const error = useItem(store, name, \"error\");\n    const description = useItem(store, name, \"description\");\n    const describedBy = cx(\n      error?.id,\n      description?.id,\n      props[\"aria-describedby\"],\n    );\n\n    const invalid = useStoreState(\n      store,\n      () => !!store?.getError(name) && store.getFieldTouched(name),\n    );\n\n    props = {\n      \"aria-labelledby\": props[\"aria-label\"] != null ? undefined : label?.id,\n      \"aria-invalid\": invalid,\n      ...props,\n      id,\n      \"aria-describedby\": describedBy || undefined,\n      ref: useMergeRefs(ref, props.ref),\n      onBlur,\n    };\n\n    props = useCollectionItem<TagName>({ store, ...props, name, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Abstract component that renders a form control. Unlike\n * [`FormInput`](https://ariakit.com/reference/form-input), this component\n * doesn't automatically pass the `value` and `onChange` props down to the\n * underlying element. This is so we can use it not only for native form\n * elements but also for custom components whose value is not controlled by the\n * native `value` and `onChange` props.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {11-19}\n * const form = useFormStore({\n *   defaultValues: {\n *     content: \"\",\n *   },\n * });\n *\n * const value = form.useValue(form.names.content);\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.content}>Content</FormLabel>\n *   <FormControl\n *     name={form.names.content}\n *     render={\n *       <Editor\n *         value={value}\n *         onChange={(value) => form.setValue(form.names.content, value)}\n *       />\n *     }\n *   />\n * </Form>\n * ```\n */\nexport const FormControl = memo(\n  forwardRef(function FormControl(props: FormControlProps) {\n    const htmlProps = useFormControl(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormControlOptions<\n  T extends ElementType = TagName,\n> extends CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Field name. This can either be a string corresponding to an existing\n   * property name in the\n   * [`values`](https://ariakit.com/reference/use-form-store#values) state of\n   * the store, or a reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, ensuring type safety.\n   *\n   * Live examples:\n   * - [FormRadio](https://ariakit.com/examples/form-radio)\n   * - [Form with Select](https://ariakit.com/examples/form-select)\n   */\n  name: StringLike;\n  /**\n   * Whether the field should be marked touched on blur.\n   * @default true\n   */\n  touchOnBlur?: BooleanOrCallback<FocusEvent>;\n}\n\nexport type FormControlProps<T extends ElementType = TagName> = Props<\n  T,\n  FormControlOptions<T>\n>;\n"],"mappings":";;;;;;;;AA2BA,MAAA,UAAS;SAID,gBAAc,KAAA,MAAA;CACpB,MAAK,UAAS,IAAA;CACd,IAAI,CAAA,SAAQ,OAAS;CACrB,IAAI,QAAQ,SACV,MAAO,OAAQ;CAGjB,IAAA,QADiB,MAAA,OAAY,QACb,KAAA,SAAkB,UAAM,IAAA;CAC1C,OAAA,YAAA,OAAA,EAAA,kBAAA,IAAA,EAAA;AAEA;SACS,QAAA,OAAc,MAAQ,MAAA;CAG/B,OAAA,cAAA,QAAA,UAAA,MAAA,MAAA,MAAA,SAAA,KAAA,SAAA,QAAA,KAAA,SAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MAkCI,iBAAgB,WAAe,SAAA,eAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,cAAA,MAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAO,kDAAe;CAC5B,MAAM,OAAK,OAAM,QAAQ;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CAEjC,MAAM,MAAA,OAAY,IAAA;OAChB,YAAgB,YAAA;EAChB,MAAK,UAAS,gBAAA,KAAA,IAAA;EAEd,IAAA,CAAA,SAAc;EACd,MAAI,QAAA,QAAc;EAGnB,IAAA,cAAA,WAAA,CAAA,QAAA,SAAA,OAAA,OAAA,SAAA,MAAA,QAAA,iBAAA;CAED,CAAA;OAEI,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAmB,IAAA,MAAA,KAAA;GAAM;GAAc,MAAA;EACnE;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAI;EAAM;EACb;CAEA,CAAA;CACA,MAAM,aAAA,MAAkB;CAExB,MAAM,kBAAS,gBAA0C,WAAA;OACvD,SAAa,UAAK,UAAA;EAClB,aAAU,KAAA;EACV,IAAI,MAAC,kBAAqB;EAC1B,IAAA,CAAA,gBAAO,KAAgB,GAAM;EAC9B,OAAA,gBAAA,MAAA,IAAA;CAED,CAAA;CACA,MAAM,QAAQ,QAAQ,OAAO,MAAM,OAAO;CAC1C,MAAM,QAAA,QAAc,OAAQ,MAAO,OAAM;CACzC,MAAM,cAAc,QAClB,OACA,MAAA,aACA;CAGF,MAAM,cAAU,GAAA,OACd,IAAA,aACQ,IAAA,MAAO,mBAAwB;CAGzC,MAAA,UAAQ,cAAA,aAAA,CAAA,CAAA,OAAA,SAAA,IAAA,KAAA,MAAA,gBAAA,IAAA,CAAA;SACN;EACA,mBAAgB,MAAA,iBAAA,OAAA,KAAA,IAAA,OAAA;EAChB,gBAAG;EACH,GAAA;EACA;EACA,oBAAkB,eAAc,KAAA;EAChC,KAAA,aAAA,KAAA,MAAA,GAAA;EACF;CAEA;SAAqC,kBAAA;EAAO;EAAU,GAAA;EAAM;EAAS;CAErE,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqCI,cAAO,KAAc,WADH,SAAA,YACqB,OAAA;CACxC,OACH,cAAA,SAAA,eAAA,KAAA,CAAA"}

package/dist/form/form-description.d.ts

@@ -0,0 +1,73 @@
+import { n as CollectionItemOptions } from "../collection-item-C-g2BwVF.js";
+import { t as FormStore } from "../form-store-C4Kf5QHm.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+import { StringLike } from "@ariakit/components/form/types";
+
+//#region src/form/form-description.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormDescription` component.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { password: "" } });
+ * const props = useFormDescription({ store, name: store.names.password });
+ * <Form store={store}>
+ *   <FormLabel name={store.names.password}>Password</FormLabel>
+ *   <FormInput name={store.names.password} type="password" />
+ *   <Role {...props}>Password with at least 8 characters.</Role>
+ * </Form>
+ * ```
+ */
+declare const useFormDescription: import("@ariakit/react-utils").Hook<"div", FormDescriptionOptions<"div">>;
+/**
+ * Renders a description element for a form field, which will automatically
+ * receive an `aria-describedby` attribute pointing to this element.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {10-12}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     password: "",
+ *   },
+ * });
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.password}>Password</FormLabel>
+ *   <FormInput name={form.names.password} type="password" />
+ *   <FormDescription name={form.names.password}>
+ *     Password with at least 8 characters.
+ *   </FormDescription>
+ * </Form>
+ * ```
+ */
+declare const FormDescription: (props: FormDescriptionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormDescriptionOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
+  /**
+   * Object returned by the
+   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not
+   * provided, the closest [`Form`](https://ariakit.com/reference/form) or
+   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'
+   * context will be used.
+   */
+  store?: FormStore;
+  /**
+   * Name of the field described by this element. This can either be a string or
+   * a reference to a field name from the
+   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the
+   * store, for type safety.
+   * @example
+   * ```jsx
+   * <FormDescription name="password">
+   *   Password with at least 8 characters.
+   * </FormDescription>
+   * ```
+   */
+  name: StringLike;
+}
+type FormDescriptionProps<T extends ElementType = TagName> = Props<T, FormDescriptionOptions<T>>;
+//#endregion
+export { FormDescription, FormDescriptionOptions, FormDescriptionProps, useFormDescription };
+//# sourceMappingURL=form-description.d.ts.map

package/dist/form/form-description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-description.d.ts","names":["StringLike","Props","ElementType","CollectionItemOptions","FormStore","TagName","useFormDescription","FormDescriptionOptions","Hook","FormDescription","FormDescriptionProps","props","ReactElement","JSXElementConstructor","T","store","name"],"sources":["../../src/form/form-description.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAe7B;;;;AAjBiD,cAiB5BC,kBAAAA,iCAAmDE,IAAAA,QAAYD,sBAAsB;AAsB1G;;;;;;;;;AAAuJ;AACvJ;;;;;;;;;;;AADA,cAAqBE,eAAAA,GAAkBE,KAAAA,EAAOD,oBAAoB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACjHN,sBAAAA,WAAiCL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAAvCT;;;;;;;EAQ5DU,KAAAA,GAAQX,SAAAA;EAaQ;AAEpB;;;;;;;;;;;EAFIY,IAAAA,EAAMhB,UAAAA;AAAAA;AAAAA,KAEEU,oBAAAA,WAA+BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,sBAAAA,CAAuBO,CAAAA"}

package/dist/form/form-description.js

@@ -0,0 +1,83 @@
+"use client";
+import { useCollectionItem } from "../collection/collection-item.js";
+import { useFormContext } from "./form-context.js";
+import { createElement, createHook, forwardRef, memo, useId, useMergeRefs } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useCallback, useRef } from "react";
+//#region src/form/form-description.tsx
+const TagName = "div";
+/**
+* Returns props to create a `FormDescription` component.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore({ defaultValues: { password: "" } });
+* const props = useFormDescription({ store, name: store.names.password });
+* <Form store={store}>
+*   <FormLabel name={store.names.password}>Password</FormLabel>
+*   <FormInput name={store.names.password} type="password" />
+*   <Role {...props}>Password with at least 8 characters.</Role>
+* </Form>
+* ```
+*/
+const useFormDescription = createHook(function useFormDescription({ store, name: nameProp, getItem: getItemProp, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormDescription must be wrapped in a Form component.");
+	const id = useId(props.id);
+	const ref = useRef(null);
+	const name = String(nameProp);
+	const getItem = useCallback((item) => {
+		const nextItem = {
+			...item,
+			id: id || item.id,
+			name,
+			type: "description"
+		};
+		if (getItemProp) return getItemProp(nextItem);
+		return nextItem;
+	}, [
+		id,
+		name,
+		getItemProp
+	]);
+	props = {
+		...props,
+		id,
+		ref: useMergeRefs(ref, props.ref)
+	};
+	props = useCollectionItem({
+		store,
+		...props,
+		getItem
+	});
+	return props;
+});
+/**
+* Renders a description element for a form field, which will automatically
+* receive an `aria-describedby` attribute pointing to this element.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {10-12}
+* const form = useFormStore({
+*   defaultValues: {
+*     password: "",
+*   },
+* });
+*
+* <Form store={form}>
+*   <FormLabel name={form.names.password}>Password</FormLabel>
+*   <FormInput name={form.names.password} type="password" />
+*   <FormDescription name={form.names.password}>
+*     Password with at least 8 characters.
+*   </FormDescription>
+* </Form>
+* ```
+*/
+const FormDescription = memo(forwardRef(function FormDescription(props) {
+	return createElement(TagName, useFormDescription(props));
+}));
+//#endregion
+export { FormDescription, useFormDescription };
+
+//# sourceMappingURL=form-description.js.map

package/dist/form/form-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-description.js","names":[],"sources":["../../src/form/form-description.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport {\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `FormDescription` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { password: \"\" } });\n * const props = useFormDescription({ store, name: store.names.password });\n * <Form store={store}>\n *   <FormLabel name={store.names.password}>Password</FormLabel>\n *   <FormInput name={store.names.password} type=\"password\" />\n *   <Role {...props}>Password with at least 8 characters.</Role>\n * </Form>\n * ```\n */\nexport const useFormDescription = createHook<TagName, FormDescriptionOptions>(\n  function useFormDescription({\n    store,\n    name: nameProp,\n    getItem: getItemProp,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormDescription must be wrapped in a Form component.\",\n    );\n\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n    const name = String(nameProp);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = {\n          ...item,\n          id: id || item.id,\n          name,\n          type: \"description\",\n        };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    props = {\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n    };\n\n    props = useCollectionItem({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a description element for a form field, which will automatically\n * receive an `aria-describedby` attribute pointing to this element.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {10-12}\n * const form = useFormStore({\n *   defaultValues: {\n *     password: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.password}>Password</FormLabel>\n *   <FormInput name={form.names.password} type=\"password\" />\n *   <FormDescription name={form.names.password}>\n *     Password with at least 8 characters.\n *   </FormDescription>\n * </Form>\n * ```\n */\nexport const FormDescription = memo(\n  forwardRef(function FormDescription(props: FormDescriptionProps) {\n    const htmlProps = useFormDescription(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormDescriptionOptions<\n  T extends ElementType = TagName,\n> extends CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Name of the field described by this element. This can either be a string or\n   * a reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   * @example\n   * ```jsx\n   * <FormDescription name=\"password\">\n   *   Password with at least 8 characters.\n   * </FormDescription>\n   * ```\n   */\n  name: StringLike;\n}\n\nexport type FormDescriptionProps<T extends ElementType = TagName> = Props<\n  T,\n  FormDescriptionOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MA2CI,qBAAgB,WAAe,SAAA,mBAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,sDAAQ;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CACjC,MAAM,MAAA,OAAO,IAAO;CAEpB,MAAM,OAAA,OAAU,QAAA;OAEZ,UAAM,aAAW,SAAA;QACZ,WAAA;GACH,GAAA;GACA,IAAA,MAAA,KAAA;GACA;GACF,MAAA;EACA;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAI;EAAM;EACb;CAEA,CAAA;SACK;EACH,GAAA;EACA;EACF,KAAA,aAAA,KAAA,MAAA,GAAA;CAEA;SAA4B,kBAAA;EAAO;EAAU,GAAA;EAAS;CAEtD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;MA0BI,kBAAqB,KAAA,WADH,SAAA,gBACqB,OAAA;CACxC,OACH,cAAA,SAAA,mBAAA,KAAA,CAAA"}

package/dist/form/form-error.d.ts

@@ -0,0 +1,82 @@
+import { n as CollectionItemOptions } from "../collection-item-C-g2BwVF.js";
+import { t as FormStore } from "../form-store-C4Kf5QHm.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+import { StringLike } from "@ariakit/components/form/types";
+
+//#region src/form/form-error.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormDescription` component.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { email: "" } });
+ * const props = useFormError({ store, name: store.names.email });
+ *
+ * store.useValidate(() => {
+ *   if (!store.getValue(store.names.email)) {
+ *     store.setError(store.names.email, "Email is required!");
+ *   }
+ * });
+ *
+ * <Form store={store}>
+ *   <FormLabel name={store.names.email}>Email</FormLabel>
+ *   <FormInput name={store.names.email} />
+ *   <Role {...props} />
+ * </Form>
+ * ```
+ */
+declare const useFormError: import("@ariakit/react-utils").Hook<"div", FormErrorOptions<"div">>;
+/**
+ * Renders an element that shows an error message. The `children` will
+ * automatically display the error message defined in the store.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {16}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     email: "",
+ *   },
+ * });
+ *
+ * form.useValidate(() => {
+ *   if (!form.values.email) {
+ *     form.setError(form.names.email, "Email is required!");
+ *   }
+ * });
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.email}>Email</FormLabel>
+ *   <FormInput name={form.names.email} />
+ *   <FormError name={form.names.email} />
+ * </Form>
+ * ```
+ */
+declare const FormError: (props: FormErrorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormErrorOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
+  /**
+   * Object returned by the
+   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not
+   * provided, the closest [`Form`](https://ariakit.com/reference/form) or
+   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'
+   * context will be used.
+   */
+  store?: FormStore;
+  /**
+   * Name of the field associated with this error. This can either be a string
+   * or a reference to a field name from the
+   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the
+   * store, for type safety.
+   * @example
+   * ```jsx
+   * <FormError name="password" />
+   * ```
+   */
+  name: StringLike;
+}
+type FormErrorProps<T extends ElementType = TagName> = Props<T, FormErrorOptions<T>>;
+//#endregion
+export { FormError, FormErrorOptions, FormErrorProps, useFormError };
+//# sourceMappingURL=form-error.d.ts.map

package/dist/form/form-error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-error.d.ts","names":["StringLike","Props","ElementType","CollectionItemOptions","FormStore","TagName","useFormError","FormErrorOptions","Hook","FormError","FormErrorProps","props","ReactElement","JSXElementConstructor","T","store","name"],"sources":["../../src/form/form-error.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAsB7B;;;;AAA8F;AA0B9F;;;;;;AAlDiD,cAwB5BC,YAAAA,iCAA6CE,IAAAA,QAAYD,gBAAgB;;;AA0B6C;AAC3I;;;;;;;;;;;;;;;;;;;;;AAmBoB;cApBCE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAqBvEA;;;;;;;EAbtBC,KAAAA,GAAQX,SAAAA;EAauD;;;;;;;;;AAAsB;EAFrFY,IAAAA,EAAMhB,UAAAA;AAAAA;AAAAA,KAEEU,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-error.js

@@ -0,0 +1,102 @@
+"use client";
+import { useCollectionItem } from "../collection/collection-item.js";
+import { useFormContext } from "./form-context.js";
+import { createElement, createHook, forwardRef, memo, useId, useMergeRefs } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useCallback, useRef } from "react";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/form/form-error.tsx
+const TagName = "div";
+/**
+* Returns props to create a `FormDescription` component.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore({ defaultValues: { email: "" } });
+* const props = useFormError({ store, name: store.names.email });
+*
+* store.useValidate(() => {
+*   if (!store.getValue(store.names.email)) {
+*     store.setError(store.names.email, "Email is required!");
+*   }
+* });
+*
+* <Form store={store}>
+*   <FormLabel name={store.names.email}>Email</FormLabel>
+*   <FormInput name={store.names.email} />
+*   <Role {...props} />
+* </Form>
+* ```
+*/
+const useFormError = createHook(function useFormError({ store, name: nameProp, getItem: getItemProp, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormError must be wrapped in a Form component.");
+	const id = useId(props.id);
+	const ref = useRef(null);
+	const name = String(nameProp);
+	const getItem = useCallback((item) => {
+		const nextItem = {
+			...item,
+			id: id || item.id,
+			name,
+			type: "error"
+		};
+		if (getItemProp) return getItemProp(nextItem);
+		return nextItem;
+	}, [
+		id,
+		name,
+		getItemProp
+	]);
+	props = {
+		role: "alert",
+		children: useStoreState(store, () => {
+			const error = store?.getError(name);
+			if (error == null) return;
+			if (!store?.getFieldTouched(name)) return;
+			return error;
+		}),
+		...props,
+		id,
+		ref: useMergeRefs(ref, props.ref)
+	};
+	props = useCollectionItem({
+		store,
+		...props,
+		getItem
+	});
+	return props;
+});
+/**
+* Renders an element that shows an error message. The `children` will
+* automatically display the error message defined in the store.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {16}
+* const form = useFormStore({
+*   defaultValues: {
+*     email: "",
+*   },
+* });
+*
+* form.useValidate(() => {
+*   if (!form.values.email) {
+*     form.setError(form.names.email, "Email is required!");
+*   }
+* });
+*
+* <Form store={form}>
+*   <FormLabel name={form.names.email}>Email</FormLabel>
+*   <FormInput name={form.names.email} />
+*   <FormError name={form.names.email} />
+* </Form>
+* ```
+*/
+const FormError = memo(forwardRef(function FormError(props) {
+	return createElement(TagName, useFormError(props));
+}));
+//#endregion
+export { FormError, useFormError };
+
+//# sourceMappingURL=form-error.js.map