@ariakit/react-components 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-error.js","names":[],"sources":["../../src/form/form-error.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport { useStoreState } from \"@ariakit/react-store\";\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: { email: \"\" } });\n * const props = useFormError({ store, name: store.names.email });\n *\n * store.useValidate(() => {\n *   if (!store.getValue(store.names.email)) {\n *     store.setError(store.names.email, \"Email is required!\");\n *   }\n * });\n *\n * <Form store={store}>\n *   <FormLabel name={store.names.email}>Email</FormLabel>\n *   <FormInput name={store.names.email} />\n *   <Role {...props} />\n * </Form>\n * ```\n */\nexport const useFormError = createHook<TagName, FormErrorOptions>(\n  function useFormError({\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        \"FormError 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 = { ...item, id: id || item.id, name, type: \"error\" };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    const children = useStoreState(store, () => {\n      const error = store?.getError(name);\n      if (error == null) return;\n      if (!store?.getFieldTouched(name)) return;\n      return error;\n    });\n\n    props = {\n      role: \"alert\",\n      children,\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 an element that shows an error message. The `children` will\n * automatically display the error message defined in the store.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {16}\n * const form = useFormStore({\n *   defaultValues: {\n *     email: \"\",\n *   },\n * });\n *\n * form.useValidate(() => {\n *   if (!form.values.email) {\n *     form.setError(form.names.email, \"Email is required!\");\n *   }\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.email}>Email</FormLabel>\n *   <FormInput name={form.names.email} />\n *   <FormError name={form.names.email} />\n * </Form>\n * ```\n */\nexport const FormError = memo(\n  forwardRef(function FormError(props: FormErrorProps) {\n    const htmlProps = useFormError(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormErrorOptions<\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 associated with this error. This can either be a string\n   * or 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   * <FormError name=\"password\" />\n   * ```\n   */\n  name: StringLike;\n}\n\nexport type FormErrorProps<T extends ElementType = TagName> = Props<\n  T,\n  FormErrorOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmDI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,gDAAQ;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CACjC,MAAM,MAAA,OAAO,IAAO;CAEpB,MAAM,OAAA,OAAU,QAAA;OAEZ,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;CASA,CAAA;SACQ;EACN,MAAA;YARM,cAAe,aAAa;GAClC,MAAI,QAAS,OAAM,SAAA,IAAA;GACnB,IAAI,SAAQ,MAAA;GACZ,IAAA,CAAA,OAAO,gBAAA,IAAA,GAAA;GAKA,OAAA;EACP,CAAA;EACA,GAAA;EACA;EACF,KAAA,aAAA,KAAA,MAAA,GAAA;CAEA;SAA4B,kBAAA;EAAO;EAAU,GAAA;EAAS;CAEtD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8BI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}

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

@@ -0,0 +1,73 @@
+import { FormControlOptions } from "./form-control.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/form/form-field.d.ts
+declare const TagName = "input";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormField` 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.
+ * @deprecated Use `useFormControl` instead.
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { content: "" } });
+ * const props = useFormField({ 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 useFormField: import("@ariakit/react-utils").Hook<"input", FormFieldOptions<"input">>;
+/**
+ * Abstract component that renders a form field. 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.
+ * @deprecated
+ * This component has been renamed to
+ * [`FormControl`](https://ariakit.com/reference/form-control). The API remains
+ * the same.
+ * @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>
+ *   <FormField
+ *     name={form.names.content}
+ *     render={
+ *       <Editor
+ *         value={value}
+ *         onChange={(value) => form.setValue(form.names.content, value)}
+ *       />
+ *     }
+ *   />
+ * </Form>
+ * ```
+ */
+declare const FormField: (props: FormFieldProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormFieldOptions<T extends ElementType = TagName> extends FormControlOptions<T> {}
+type FormFieldProps<T extends ElementType = TagName> = Props<T, FormFieldOptions<T>>;
+//#endregion
+export { FormField, FormFieldOptions, FormFieldProps, useFormField };
+//# sourceMappingURL=form-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","names":["Props","ElementType","FormControlOptions","TagName","useFormField","FormFieldOptions","Hook","FormField","FormFieldProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/form/form-field.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAyB7B;;;;AAAgG;AAoChG;;;;;;;;;AA/D6D,cA2BxCC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;AAqChG;;;;;;;;;;;;;;;AAA+F;AAE/F;;;;;;;;;;;;;;;;;;;AAFA,cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BJ,WAAAA,GAAcE,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA;AAAAA,KAElFJ,cAAAA,WAAyBP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-field.js

@@ -0,0 +1,74 @@
+"use client";
+import { useFormControl } from "./form-control.js";
+import { createElement, createHook, forwardRef, memo } from "@ariakit/react-utils";
+//#region src/form/form-field.tsx
+const TagName = "input";
+/**
+* Returns props to create a `FormField` 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.
+* @deprecated Use `useFormControl` instead.
+* @example
+* ```jsx
+* const store = useFormStore({ defaultValues: { content: "" } });
+* const props = useFormField({ 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 useFormField = createHook(function useFormField(props) {
+	return useFormControl(props);
+});
+/**
+* Abstract component that renders a form field. 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.
+* @deprecated
+* This component has been renamed to
+* [`FormControl`](https://ariakit.com/reference/form-control). The API remains
+* the same.
+* @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>
+*   <FormField
+*     name={form.names.content}
+*     render={
+*       <Editor
+*         value={value}
+*         onChange={(value) => form.setValue(form.names.content, value)}
+*       />
+*     }
+*   />
+* </Form>
+* ```
+*/
+const FormField = memo(forwardRef(function FormField(props) {
+	return createElement(TagName, useFormField(props));
+}));
+//#endregion
+export { FormField, useFormField };
+
+//# sourceMappingURL=form-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","names":[],"sources":["../../src/form/form-field.tsx"],"sourcesContent":["import {\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { FormControlOptions } from \"./form-control.tsx\";\nimport { useFormControl } from \"./form-control.tsx\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FormField` component. Unlike `useFormInput`, this\n * hook doesn't automatically returns the `value` and `onChange` props. This is\n * so we can use it not only for native form elements but also for custom\n * components whose value is not controlled by the native `value` and `onChange`\n * props.\n * @deprecated Use `useFormControl` instead.\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { content: \"\" } });\n * const props = useFormField({ 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 useFormField = createHook<TagName, FormFieldOptions>(\n  function useFormField(props) {\n    return useFormControl(props);\n  },\n);\n\n/**\n * Abstract component that renders a form field. 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 * @deprecated\n * This component has been renamed to\n * [`FormControl`](https://ariakit.com/reference/form-control). The API remains\n * the same.\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 *   <FormField\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 FormField = memo(\n  forwardRef(function FormField(props: FormFieldProps) {\n    const htmlProps = useFormField(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormFieldOptions<\n  T extends ElementType = TagName,\n> extends FormControlOptions<T> {}\n\nexport type FormFieldProps<T extends ElementType = TagName> = Props<\n  T,\n  FormFieldOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwCI,eAAO,WAAoB,SAAA,aAAA,OAAA;CAE/B,OAAA,eAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwCI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/form/form-group-label.d.ts

@@ -0,0 +1,62 @@
+import { n as GroupLabelOptions } from "../group-label-C16IDs1b.js";
+import { t as FormStore } from "../form-store-C4Kf5QHm.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/form/form-group-label.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormGroupLabel` component. This hook must be used
+ * in a component that's wrapped with `FormGroup` so the `aria-labelledby` prop
+ * is properly set on the form group element.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * // This component must be wrapped with FormGroup
+ * const props = useFormGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+declare const useFormGroupLabel: import("@ariakit/react-utils").Hook<"div", FormGroupLabelOptions<"div">>;
+/**
+ * Renders a label in a form group. This component must be wrapped with the
+ * [`FormGroup`](https://ariakit.com/reference/form-group) or
+ * [`FormRadioGroup`](https://ariakit.com/reference/form-radio-group) components
+ * so the `aria-labelledby` prop is properly set on the form group element.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {10}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     username: "",
+ *     email: "",
+ *   },
+ * });
+ *
+ * <Form store={form}>
+ *   <FormGroup>
+ *     <FormGroupLabel>Account</FormGroupLabel>
+ *     <FormLabel name={form.names.username}>Username</FormLabel>
+ *     <FormInput name={form.names.username} />
+ *     <FormLabel name={form.names.email}>Email</FormLabel>
+ *     <FormInput name={form.names.email} />
+ *   </FormGroup>
+ * </Form>
+ * ```
+ */
+declare const FormGroupLabel: (props: FormGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormGroupLabelOptions<T extends ElementType = TagName> extends GroupLabelOptions<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;
+}
+type FormGroupLabelProps<T extends ElementType = TagName> = Props<T, FormGroupLabelOptions<T>>;
+//#endregion
+export { FormGroupLabel, FormGroupLabelOptions, FormGroupLabelProps, useFormGroupLabel };
+//# sourceMappingURL=form-group-label.d.ts.map

package/dist/form/form-group-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-group-label.d.ts","names":["Props","ElementType","GroupLabelOptions","FormStore","TagName","useFormGroupLabel","FormGroupLabelOptions","Hook","FormGroupLabel","FormGroupLabelProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/form/form-group-label.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAa7B;;AAfiD,cAe5BC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;;AAAA;AA2BxG;;;;;;;;;AAAqJ;AACrJ;;;;;;;;;;;;;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,WAAgCL,WAAAA,GAAcG,OAAAA,UAAiBF,iBAAAA,CAAkBW,CAAAA;EAQtFV;;AAAS;AAErB;;;;EAFIW,KAAAA,GAAQX,SAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}

package/dist/form/form-group-label.js

@@ -0,0 +1,54 @@
+"use client";
+import { useGroupLabel } from "../group/group-label.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/form/form-group-label.tsx
+const TagName = "div";
+/**
+* Returns props to create a `FormGroupLabel` component. This hook must be used
+* in a component that's wrapped with `FormGroup` so the `aria-labelledby` prop
+* is properly set on the form group element.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* // This component must be wrapped with FormGroup
+* const props = useFormGroupLabel();
+* <Role {...props}>Label</Role>
+* ```
+*/
+const useFormGroupLabel = createHook(function useFormGroupLabel({ store, ...props }) {
+	props = useGroupLabel(props);
+	return props;
+});
+/**
+* Renders a label in a form group. This component must be wrapped with the
+* [`FormGroup`](https://ariakit.com/reference/form-group) or
+* [`FormRadioGroup`](https://ariakit.com/reference/form-radio-group) components
+* so the `aria-labelledby` prop is properly set on the form group element.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {10}
+* const form = useFormStore({
+*   defaultValues: {
+*     username: "",
+*     email: "",
+*   },
+* });
+*
+* <Form store={form}>
+*   <FormGroup>
+*     <FormGroupLabel>Account</FormGroupLabel>
+*     <FormLabel name={form.names.username}>Username</FormLabel>
+*     <FormInput name={form.names.username} />
+*     <FormLabel name={form.names.email}>Email</FormLabel>
+*     <FormInput name={form.names.email} />
+*   </FormGroup>
+* </Form>
+* ```
+*/
+const FormGroupLabel = forwardRef(function FormGroupLabel(props) {
+	return createElement(TagName, useFormGroupLabel(props));
+});
+//#endregion
+export { FormGroupLabel, useFormGroupLabel };
+
+//# sourceMappingURL=form-group-label.js.map

package/dist/form/form-group-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-group-label.js","names":[],"sources":["../../src/form/form-group-label.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { GroupLabelOptions } from \"../group/group-label.tsx\";\nimport { useGroupLabel } from \"../group/group-label.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FormGroupLabel` component. This hook must be used\n * in a component that's wrapped with `FormGroup` so the `aria-labelledby` prop\n * is properly set on the form group element.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * // This component must be wrapped with FormGroup\n * const props = useFormGroupLabel();\n * <Role {...props}>Label</Role>\n * ```\n */\nexport const useFormGroupLabel = createHook<TagName, FormGroupLabelOptions>(\n  function useFormGroupLabel({ store, ...props }) {\n    props = useGroupLabel(props);\n    return props;\n  },\n);\n\n/**\n * Renders a label in a form group. This component must be wrapped with the\n * [`FormGroup`](https://ariakit.com/reference/form-group) or\n * [`FormRadioGroup`](https://ariakit.com/reference/form-radio-group) components\n * so the `aria-labelledby` prop is properly set on the form group element.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {10}\n * const form = useFormStore({\n *   defaultValues: {\n *     username: \"\",\n *     email: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormGroup>\n *     <FormGroupLabel>Account</FormGroupLabel>\n *     <FormLabel name={form.names.username}>Username</FormLabel>\n *     <FormInput name={form.names.username} />\n *     <FormLabel name={form.names.email}>Email</FormLabel>\n *     <FormInput name={form.names.email} />\n *   </FormGroup>\n * </Form>\n * ```\n */\nexport const FormGroupLabel = forwardRef(function FormGroupLabel(\n  props: FormGroupLabelProps,\n) {\n  const htmlProps = useFormGroupLabel(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FormGroupLabelOptions<\n  T extends ElementType = TagName,\n> extends GroupLabelOptions<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\nexport type FormGroupLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  FormGroupLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;MAwBI,oBAAsB,WAAK,SAAA,kBAAA,EAAA,OAAA,GAAA,SAAA;CAC3B,QAAO,cAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgCE,iBAAqB,WADH,SAAA,eACqB,OAAA;CACxC,OAAA,cAAA,SAAA,kBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,64 @@
+import { n as GroupOptions } from "../group-CamegDJA.js";
+import { t as FormStore } from "../form-store-C4Kf5QHm.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/form/form-group.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormGroup` component.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore();
+ * const props = useFormGroup({ store });
+ * <Form store={store}>
+ *   <Role {...props}>
+ *     <FormGroupLabel>Label</FormGroupLabel>
+ *   </Role>
+ * </Form>
+ * ```
+ */
+declare const useFormGroup: import("@ariakit/react-utils").Hook<"div", FormGroupOptions<"div">>;
+/**
+ * Renders a group element for form controls. The
+ * [`FormGroupLabel`](https://ariakit.com/reference/form-group-label) component
+ * can be used inside this component so the `aria-labelledby` prop is properly
+ * set on the group element.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {9-15}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     username: "",
+ *     email: "",
+ *   },
+ * });
+ *
+ * <Form store={form}>
+ *   <FormGroup>
+ *     <FormGroupLabel>Account</FormGroupLabel>
+ *     <FormLabel name={form.names.username}>Username</FormLabel>
+ *     <FormInput name={form.names.username} />
+ *     <FormLabel name={form.names.email}>Email</FormLabel>
+ *     <FormInput name={form.names.email} />
+ *   </FormGroup>
+ * </Form>
+ * ```
+ */
+declare const FormGroup: (props: FormGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormGroupOptions<T extends ElementType = TagName> extends GroupOptions<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;
+}
+type FormGroupProps<T extends ElementType = TagName> = Props<T, FormGroupOptions<T>>;
+//#endregion
+export { FormGroup, FormGroupOptions, FormGroupProps, useFormGroup };
+//# sourceMappingURL=form-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-group.d.ts","names":["Props","ElementType","GroupOptions","FormStore","TagName","useFormGroup","FormGroupOptions","Hook","FormGroup","FormGroupProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/form/form-group.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAe7B;;;;AAjBiD,cAiB5BC,YAAAA,iCAA6CE,IAAAA,QAAYD,gBAAgB;AA2B9F;;;;;;;;;AAA2I;AAC3I;;;;;;;;;;;;;;;;AADA,cAAqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,YAAAA,CAAaW,CAAAA;EAQnE;AAErB;;;;;;EAFIC,KAAAA,GAAQX,SAAAA;AAAAA;AAAAA,KAEAM,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-group.js

@@ -0,0 +1,56 @@
+"use client";
+import { useGroup } from "../group/group.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/form/form-group.tsx
+const TagName = "div";
+/**
+* Returns props to create a `FormGroup` component.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore();
+* const props = useFormGroup({ store });
+* <Form store={store}>
+*   <Role {...props}>
+*     <FormGroupLabel>Label</FormGroupLabel>
+*   </Role>
+* </Form>
+* ```
+*/
+const useFormGroup = createHook(function useFormGroup({ store, ...props }) {
+	props = useGroup(props);
+	return props;
+});
+/**
+* Renders a group element for form controls. The
+* [`FormGroupLabel`](https://ariakit.com/reference/form-group-label) component
+* can be used inside this component so the `aria-labelledby` prop is properly
+* set on the group element.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {9-15}
+* const form = useFormStore({
+*   defaultValues: {
+*     username: "",
+*     email: "",
+*   },
+* });
+*
+* <Form store={form}>
+*   <FormGroup>
+*     <FormGroupLabel>Account</FormGroupLabel>
+*     <FormLabel name={form.names.username}>Username</FormLabel>
+*     <FormInput name={form.names.username} />
+*     <FormLabel name={form.names.email}>Email</FormLabel>
+*     <FormInput name={form.names.email} />
+*   </FormGroup>
+* </Form>
+* ```
+*/
+const FormGroup = forwardRef(function FormGroup(props) {
+	return createElement(TagName, useFormGroup(props));
+});
+//#endregion
+export { FormGroup, useFormGroup };
+
+//# sourceMappingURL=form-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-group.js","names":[],"sources":["../../src/form/form-group.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { GroupOptions } from \"../group/group.tsx\";\nimport { useGroup } from \"../group/group.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FormGroup` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore();\n * const props = useFormGroup({ store });\n * <Form store={store}>\n *   <Role {...props}>\n *     <FormGroupLabel>Label</FormGroupLabel>\n *   </Role>\n * </Form>\n * ```\n */\nexport const useFormGroup = createHook<TagName, FormGroupOptions>(\n  function useFormGroup({ store, ...props }) {\n    props = useGroup(props);\n    return props;\n  },\n);\n\n/**\n * Renders a group element for form controls. The\n * [`FormGroupLabel`](https://ariakit.com/reference/form-group-label) component\n * can be used inside this component so the `aria-labelledby` prop is properly\n * set on the group element.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {9-15}\n * const form = useFormStore({\n *   defaultValues: {\n *     username: \"\",\n *     email: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormGroup>\n *     <FormGroupLabel>Account</FormGroupLabel>\n *     <FormLabel name={form.names.username}>Username</FormLabel>\n *     <FormInput name={form.names.username} />\n *     <FormLabel name={form.names.email}>Email</FormLabel>\n *     <FormInput name={form.names.email} />\n *   </FormGroup>\n * </Form>\n * ```\n */\nexport const FormGroup = forwardRef(function FormGroup(props: FormGroupProps) {\n  const htmlProps = useFormGroup(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FormGroupOptions<\n  T extends ElementType = TagName,\n> extends GroupOptions<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\nexport type FormGroupProps<T extends ElementType = TagName> = Props<\n  T,\n  FormGroupOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;MA0BI,eAAiB,WAAK,SAAA,aAAA,EAAA,OAAA,GAAA,SAAA;CACtB,QAAO,SAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8BE,YAAO,WAAc,SADH,UAAa,OACQ;CACxC,OAAA,cAAA,SAAA,aAAA,KAAA,CAAA"}

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

@@ -0,0 +1,50 @@
+import { n as FocusableOptions } from "../focusable-B00tOxtB.js";
+import { FormControlOptions } from "./form-control.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/form/form-input.d.ts
+declare const TagName = "input";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormInput` component. Unlike `useFormControl`, this
+ * hook returns the `value` and `onChange` props that can be passed to a native
+ * input, select or textarea elements.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { email: "" } });
+ * const props = useFormInput({ store, name: store.names.email });
+ * <Form store={store}>
+ *   <FormLabel name={store.names.email}>Email</FormLabel>
+ *   <Role {...props} render={<input />} />
+ * </Form>
+ * ```
+ */
+declare const useFormInput: import("@ariakit/react-utils").Hook<"input", FormInputOptions<"input">>;
+/**
+ * Renders a form input. Unlike
+ * [`FormControl`](https://ariakit.com/reference/form-control), this component
+ * passes the `value` and `onChange` props down to the underlying element that
+ * can be native input, select or textarea elements.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {9}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     email: "",
+ *   },
+ * });
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.email}>Email</FormLabel>
+ *   <FormInput name={form.names.email} />
+ * </Form>
+ * ```
+ */
+declare const FormInput: (props: FormInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormInputOptions<T extends ElementType = TagName> extends FormControlOptions<T>, FocusableOptions<T> {}
+type FormInputProps<T extends ElementType = TagName> = Props<T, FormInputOptions<T>>;
+//#endregion
+export { FormInput, FormInputOptions, FormInputProps, useFormInput };
+//# sourceMappingURL=form-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-input.d.ts","names":["Props","ElementType","FocusableOptions","FormControlOptions","TagName","useFormInput","FormInputOptions","Hook","FormInput","FormInputProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/form/form-input.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAgB7B;;;;AAAgG;AAlBnC,cAkBxCC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;;;;;;;;;AAqB2C;AAC3I;;;;;;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA,GAAIX,gBAAAA,CAAiBW,CAAAA;AAAAA,KAEvGJ,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-input.js

@@ -0,0 +1,74 @@
+"use client";
+import { useFocusable } from "../focusable/focusable.js";
+import { useFormContext } from "./form-context.js";
+import { useFormControl } from "./form-control.js";
+import { createElement, createHook, forwardRef, memo, useEvent } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+//#region src/form/form-input.tsx
+const TagName = "input";
+/**
+* Returns props to create a `FormInput` component. Unlike `useFormControl`, this
+* hook returns the `value` and `onChange` props that can be passed to a native
+* input, select or textarea elements.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore({ defaultValues: { email: "" } });
+* const props = useFormInput({ store, name: store.names.email });
+* <Form store={store}>
+*   <FormLabel name={store.names.email}>Email</FormLabel>
+*   <Role {...props} render={<input />} />
+* </Form>
+* ```
+*/
+const useFormInput = createHook(function useFormInput({ store, name: nameProp, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormInput must be wrapped in a Form component.");
+	const name = String(nameProp);
+	const onChangeProp = props.onChange;
+	const onChange = useEvent((event) => {
+		onChangeProp?.(event);
+		if (event.defaultPrevented) return;
+		store?.setValue(name, event.target.value);
+	});
+	props = {
+		value: store.useValue(name),
+		...props,
+		onChange
+	};
+	props = useFocusable(props);
+	props = useFormControl({
+		store,
+		name,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a form input. Unlike
+* [`FormControl`](https://ariakit.com/reference/form-control), this component
+* passes the `value` and `onChange` props down to the underlying element that
+* can be native input, select or textarea elements.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {9}
+* const form = useFormStore({
+*   defaultValues: {
+*     email: "",
+*   },
+* });
+*
+* <Form store={form}>
+*   <FormLabel name={form.names.email}>Email</FormLabel>
+*   <FormInput name={form.names.email} />
+* </Form>
+* ```
+*/
+const FormInput = memo(forwardRef(function FormInput(props) {
+	return createElement(TagName, useFormInput(props));
+}));
+//#endregion
+export { FormInput, useFormInput };
+
+//# sourceMappingURL=form-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-input.js","names":[],"sources":["../../src/form/form-input.tsx"],"sourcesContent":["import {\n  useEvent,\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 { ChangeEvent, ElementType } from \"react\";\nimport type { FocusableOptions } from \"../focusable/focusable.tsx\";\nimport { useFocusable } from \"../focusable/focusable.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormControlOptions } from \"./form-control.tsx\";\nimport { useFormControl } from \"./form-control.tsx\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `FormInput` component. Unlike `useFormControl`, this\n * hook returns the `value` and `onChange` props that can be passed to a native\n * input, select or textarea elements.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { email: \"\" } });\n * const props = useFormInput({ store, name: store.names.email });\n * <Form store={store}>\n *   <FormLabel name={store.names.email}>Email</FormLabel>\n *   <Role {...props} render={<input />} />\n * </Form>\n * ```\n */\nexport const useFormInput = createHook<TagName, FormInputOptions>(\n  function useFormInput({ store, name: nameProp, ...props }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormInput must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const onChangeProp = props.onChange;\n\n    const onChange = useEvent((event: ChangeEvent<HTMLType>) => {\n      onChangeProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.setValue(name, event.target.value);\n    });\n\n    const value = store.useValue(name);\n\n    props = {\n      value,\n      ...props,\n      onChange,\n    };\n\n    props = useFocusable<TagName>(props);\n    props = useFormControl({ store, name, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a form input. Unlike\n * [`FormControl`](https://ariakit.com/reference/form-control), this component\n * passes the `value` and `onChange` props down to the underlying element that\n * can be native input, select or textarea elements.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {9}\n * const form = useFormStore({\n *   defaultValues: {\n *     email: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.email}>Email</FormLabel>\n *   <FormInput name={form.names.email} />\n * </Form>\n * ```\n */\nexport const FormInput = memo(\n  forwardRef(function FormInput(props: FormInputProps) {\n    const htmlProps = useFormInput(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormInputOptions<T extends ElementType = TagName>\n  extends FormControlOptions<T>, FocusableOptions<T> {}\n\nexport type FormInputProps<T extends ElementType = TagName> = Props<\n  T,\n  FormInputOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAqCI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAO,gDAAe;CAC5B,MAAM,OAAA,OAAA,QAAqB;CAE3B,MAAM,eAAW,MAAU;OACzB,WAAe,UAAK,UAAA;EACpB,eAAU,KAAA;EACV,IAAA,MAAO,kBAAqB;EAC7B,OAAA,SAAA,MAAA,MAAA,OAAA,KAAA;CAID,CAAA;SAFc;EAIZ,OAAG,MAAA,SAAA,IAAA;EACH,GAAA;EACF;CAEA;CACA,QAAQ,aAAA,KAAe;SAAE,eAAA;EAAO;EAAM;EAAU,GAAA;CAEhD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;MAyBI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}