@ariakit/react-components 0.1.0

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

@@ -0,0 +1,77 @@
+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-label.d.ts
+declare const TagName = "label";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormLabel` component. If the field is not a native
+ * input, select or textarea element, the hook will return props to render a
+ * `span` element. Instead of relying on the `htmlFor` prop, it'll rely on the
+ * `aria-labelledby` attribute on the form field. Clicking on the label will
+ * move focus to the field even if it's not a native input.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { email: "" } });
+ * const props = useFormLabel({ store, name: store.names.email });
+ * <Form store={store}>
+ *   <Role {...props}>Email</Role>
+ *   <FormInput name={store.names.email} />
+ * </Form>
+ * ```
+ */
+declare const useFormLabel: import("@ariakit/react-utils").Hook<"label", FormLabelOptions<"label">>;
+/**
+ * Renders a label associated with a form field, even if the field is not a
+ * native input.
+ *
+ * If the field is a native input, select or textarea element, this component
+ * will render a native `label` element and rely on its `htmlFor` prop.
+ * Otherwise, it'll render a `span` element and rely on the `aria-labelledby`
+ * attribute on the form field instead. Clicking on the label will move focus to
+ * the field even if it's not a native input.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {8}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     email: "",
+ *   },
+ * });
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.email}>Email</Role>
+ *   <FormInput name={form.names.email} />
+ * </Form>
+ * ```
+ */
+declare const FormLabel: (props: FormLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormLabelOptions<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 labeled 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
+   * <FormLabel name="email">Email</FormLabel>
+   * ```
+   */
+  name: StringLike;
+}
+type FormLabelProps<T extends ElementType = TagName> = Props<T, FormLabelOptions<T>>;
+//#endregion
+export { FormLabel, FormLabelOptions, FormLabelProps, useFormLabel };
+//# sourceMappingURL=form-label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-label.d.ts","names":["StringLike","Props","ElementType","CollectionItemOptions","FormStore","TagName","useFormLabel","FormLabelOptions","Hook","FormLabel","FormLabelProps","props","ReactElement","JSXElementConstructor","T","store","name"],"sources":["../../src/form/form-label.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAkB7B;;;;AAAgG;AAyBhG;;AA7CiD,cAoB5BC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;;;;;;;AAyB2C;AAC3I;;;;;;;;;;;;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAmBvFd;;AAAU;AAEpB;;;;EAbIe,KAAAA,GAAQX,SAAAA;EAawDU;;;;;;;;;;EAFhEE,IAAAA,EAAMhB,UAAAA;AAAAA;AAAAA,KAEEU,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-label.js

@@ -0,0 +1,120 @@
+"use client";
+import { useCollectionItem } from "../collection/collection-item.js";
+import { useFormContext } from "./form-context.js";
+import { createElement, createHook, forwardRef, memo, useEvent, useId, useMergeRefs, useTagName } from "@ariakit/react-utils";
+import { getFirstTabbableIn, invariant } from "@ariakit/utils";
+import { useCallback, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/form/form-label.tsx
+const TagName = "label";
+function supportsNativeLabel(tagName) {
+	return tagName === "input" || tagName === "textarea" || tagName === "select" || tagName === "meter" || tagName === "progress";
+}
+/**
+* Returns props to create a `FormLabel` component. If the field is not a native
+* input, select or textarea element, the hook will return props to render a
+* `span` element. Instead of relying on the `htmlFor` prop, it'll rely on the
+* `aria-labelledby` attribute on the form field. Clicking on the label will
+* move focus to the field even if it's not a native input.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore({ defaultValues: { email: "" } });
+* const props = useFormLabel({ store, name: store.names.email });
+* <Form store={store}>
+*   <Role {...props}>Email</Role>
+*   <FormInput name={store.names.email} />
+* </Form>
+* ```
+*/
+const useFormLabel = createHook(function useFormLabel({ store, name: nameProp, getItem: getItemProp, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormLabel 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: "label"
+		};
+		if (getItemProp) return getItemProp(nextItem);
+		return nextItem;
+	}, [
+		id,
+		name,
+		getItemProp
+	]);
+	const field = useStoreState(store, (state) => state.items.find((item) => item.type === "field" && item.name === name));
+	const isNativeLabel = supportsNativeLabel(useTagName(field?.element, "input"));
+	const onClickProp = props.onClick;
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		if (isNativeLabel) return;
+		const fieldElement = field?.element;
+		if (!fieldElement) return;
+		queueMicrotask(() => {
+			const focusableElement = getFirstTabbableIn(fieldElement, true, true);
+			focusableElement?.focus();
+			if (focusableElement?.getAttribute("role") === "combobox") return;
+			focusableElement?.click();
+		});
+	});
+	props = {
+		render: isNativeLabel ? /* @__PURE__ */ jsx("label", {}) : /* @__PURE__ */ jsx("span", {}),
+		htmlFor: isNativeLabel ? field?.id : void 0,
+		...props,
+		id,
+		ref: useMergeRefs(ref, props.ref),
+		onClick
+	};
+	if (!isNativeLabel) props = {
+		...props,
+		style: {
+			cursor: "default",
+			...props.style
+		}
+	};
+	props = useCollectionItem({
+		store,
+		...props,
+		getItem
+	});
+	return props;
+});
+/**
+* Renders a label associated with a form field, even if the field is not a
+* native input.
+*
+* If the field is a native input, select or textarea element, this component
+* will render a native `label` element and rely on its `htmlFor` prop.
+* Otherwise, it'll render a `span` element and rely on the `aria-labelledby`
+* attribute on the form field instead. Clicking on the label will move focus to
+* the field even if it's not a native input.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {8}
+* const form = useFormStore({
+*   defaultValues: {
+*     email: "",
+*   },
+* });
+*
+* <Form store={form}>
+*   <FormLabel name={form.names.email}>Email</Role>
+*   <FormInput name={form.names.email} />
+* </Form>
+* ```
+*/
+const FormLabel = memo(forwardRef(function FormLabel(props) {
+	return createElement(TagName, useFormLabel(props));
+}));
+//#endregion
+export { FormLabel, useFormLabel };
+
+//# sourceMappingURL=form-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-label.js","names":[],"sources":["../../src/form/form-label.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useId,\n  useMergeRefs,\n  useTagName,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getFirstTabbableIn, invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } 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 = \"label\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction supportsNativeLabel(tagName?: string) {\n  return (\n    tagName === \"input\" ||\n    tagName === \"textarea\" ||\n    tagName === \"select\" ||\n    tagName === \"meter\" ||\n    tagName === \"progress\"\n  );\n}\n\n/**\n * Returns props to create a `FormLabel` component. If the field is not a native\n * input, select or textarea element, the hook will return props to render a\n * `span` element. Instead of relying on the `htmlFor` prop, it'll rely on the\n * `aria-labelledby` attribute on the form field. Clicking on the label will\n * move focus to the field even if it's not a native input.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { email: \"\" } });\n * const props = useFormLabel({ store, name: store.names.email });\n * <Form store={store}>\n *   <Role {...props}>Email</Role>\n *   <FormInput name={store.names.email} />\n * </Form>\n * ```\n */\nexport const useFormLabel = createHook<TagName, FormLabelOptions>(\n  function useFormLabel({\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        \"FormLabel 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: \"label\" };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    const field = useStoreState(store, (state) =>\n      state.items.find((item) => item.type === \"field\" && item.name === name),\n    );\n    const fieldTagName = useTagName(field?.element, \"input\");\n    const isNativeLabel = supportsNativeLabel(fieldTagName);\n\n    const onClickProp = props.onClick;\n\n    const onClick = useEvent((event: MouseEvent<HTMLLabelElement>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      if (isNativeLabel) return;\n      const fieldElement = field?.element;\n      if (!fieldElement) return;\n      queueMicrotask(() => {\n        const focusableElement = getFirstTabbableIn(fieldElement, true, true);\n        focusableElement?.focus();\n        const role = focusableElement?.getAttribute(\"role\");\n        // If the field is a combobox, we don't want to click on it, as it'll\n        // open the listbox.\n        if (role === \"combobox\") return;\n        focusableElement?.click();\n      });\n    });\n\n    props = {\n      render: isNativeLabel ? <label /> : <span />,\n      htmlFor: isNativeLabel ? field?.id : undefined,\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n      onClick,\n    };\n\n    if (!isNativeLabel) {\n      props = {\n        ...props,\n        style: {\n          cursor: \"default\",\n          ...props.style,\n        },\n      };\n    }\n\n    props = useCollectionItem<TagName>({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a label associated with a form field, even if the field is not a\n * native input.\n *\n * If the field is a native input, select or textarea element, this component\n * will render a native `label` element and rely on its `htmlFor` prop.\n * Otherwise, it'll render a `span` element and rely on the `aria-labelledby`\n * attribute on the form field instead. Clicking on the label will move focus to\n * the field even if it's not a native input.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {8}\n * const form = useFormStore({\n *   defaultValues: {\n *     email: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.email}>Email</Role>\n *   <FormInput name={form.names.email} />\n * </Form>\n * ```\n */\nexport const FormLabel = memo(\n  forwardRef(function FormLabel(props: FormLabelProps) {\n    const htmlProps = useFormLabel(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormLabelOptions<\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 labeled by this element. This can either be a string or a\n   * 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   * <FormLabel name=\"email\">Email</FormLabel>\n   * ```\n   */\n  name: StringLike;\n}\n\nexport type FormLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  FormLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;AAyBA,MAAA,UAAS;SAEL,oBAAY,SACZ;CAKJ,OAAA,YAAA,WAAA,YAAA,cAAA,YAAA,YAAA,YAAA,WAAA,YAAA;;;;;;;;;;;;;;;;;;;MA0BI,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;CAEA,CAAA;CAIA,MAAM,QAAA,cAAgB,QAAA,UADD,MAAA,MAAW,MAAO,SAAS,KACM,SAAA,WAAA,KAAA,SAAA,IAAA,CAAA;CAEtD,MAAM,gBAAc,oBAAM,WAAA,OAAA,SAAA,OAAA,CAAA;CAE1B,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAI,MAAA,kBAAe;EACnB,IAAA,eAAM;EACN,MAAK,eAAc,OAAA;EACnB,IAAA,CAAA,cAAA;uBACQ;GACN,MAAA,mBAAwB,mBAAA,cAAA,MAAA,IAAA;GAIxB,kBAHa,MAAkB;GAI/B,IAAA,kBAAkB,aAAM,MAAA,MAAA,YAAA;GACzB,kBAAA,MAAA;EACF,CAAA;CAED,CAAA;SACE;EACA,QAAA,gBAAqC,oBAAA,SAAA,CAAA,CAAA,IAAA,oBAAA,QAAA,CAAA,CAAA;EACrC,SAAG,gBAAA,OAAA,KAAA,KAAA;EACH,GAAA;EACA;EACA,KAAA,aAAA,KAAA,MAAA,GAAA;EACF;CAEA;KAEO,CAAA,eAAA,QAAA;EACH,GAAA;SACE;GACA,QAAG;GACL,GAAA,MAAA;EACF;CAGF;SAAqC,kBAAA;EAAO;EAAU,GAAA;EAAS;CAE/D,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}

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

@@ -0,0 +1,28 @@
+import { a as FormStoreProps } from "../form-store-C4Kf5QHm.js";
+import { ReactElement, ReactNode } from "react";
+import { PickRequired } from "@ariakit/utils";
+import { FormStoreValues } from "@ariakit/components/form/form-store";
+
+//#region src/form/form-provider.d.ts
+type Values = FormStoreValues;
+/**
+ * Provides a form store to [Form](https://ariakit.com/components/form)
+ * components.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * <FormProvider defaultValues={{ email: "" }}>
+ *   <Form>
+ *     <FormInput />
+ *   </Form>
+ * </FormProvider>
+ * ```
+ */
+declare function FormProvider<T extends Values = Values>(props: PickRequired<FormProviderProps<T>, "values" | "defaultValues" | "errors" | "defaultErrors" | "touched" | "defaultTouched">): ReactElement;
+declare function FormProvider(props: FormProviderProps): ReactElement;
+interface FormProviderProps<T extends Values = Values> extends FormStoreProps<T> {
+  children?: ReactNode;
+}
+//#endregion
+export { FormProvider, FormProviderProps };
+//# sourceMappingURL=form-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-provider.d.ts","names":["FormStoreValues","PickRequired","ReactElement","ReactNode","FormStoreProps","Values","FormProvider","T","FormProviderProps","props","children"],"sources":["../../src/form/form-provider.d.ts"],"mappings":";;;;;;KAIKK,MAAAA,GAASL,eAAe;;AADyB;;;;AACzB;AAc7B;;;;;;;iBAAwBM,YAAAA,WAAuBD,MAAAA,GAASA,MAAAA,CAAAA,CAAQI,KAAAA,EAAOR,YAAAA,CAAaO,iBAAAA,CAAkBD,CAAAA,6FAA8FL,YAAAA;AAAAA,iBAC5KI,YAAAA,CAAaG,KAAAA,EAAOD,iBAAAA,GAAoBN,YAAY;AAAA,UAC3DM,iBAAAA,WAA4BH,MAAAA,GAASA,MAAAA,UAAgBD,cAAAA,CAAeG,CAAAA;EACjFG,QAAAA,GAAWP,SAAAA;AAAAA"}

package/dist/form/form-provider.js

@@ -0,0 +1,15 @@
+"use client";
+import { FormContextProvider } from "./form-context.js";
+import { useFormStore } from "./form-store.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/form-provider.tsx
+function FormProvider(props = {}) {
+	return /* @__PURE__ */ jsx(FormContextProvider, {
+		value: useFormStore(props),
+		children: props.children
+	});
+}
+//#endregion
+export { FormProvider };
+
+//# sourceMappingURL=form-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-provider.js","names":[],"sources":["../../src/form/form-provider.tsx"],"sourcesContent":["import type { FormStoreValues } from \"@ariakit/components/form/form-store\";\nimport type { PickRequired } from \"@ariakit/utils\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { FormContextProvider } from \"./form-context.tsx\";\nimport type { FormStoreProps } from \"./form-store.ts\";\nimport { useFormStore } from \"./form-store.ts\";\n\ntype Values = FormStoreValues;\n\n/**\n * Provides a form store to [Form](https://ariakit.com/components/form)\n * components.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * <FormProvider defaultValues={{ email: \"\" }}>\n *   <Form>\n *     <FormInput />\n *   </Form>\n * </FormProvider>\n * ```\n */\n\nexport function FormProvider<T extends Values = Values>(\n  props: PickRequired<\n    FormProviderProps<T>,\n    | \"values\"\n    | \"defaultValues\"\n    | \"errors\"\n    | \"defaultErrors\"\n    | \"touched\"\n    | \"defaultTouched\"\n  >,\n): ReactElement;\n\nexport function FormProvider(props: FormProviderProps): ReactElement;\n\nexport function FormProvider(props: FormProviderProps = {}) {\n  const store = useFormStore(props);\n  return (\n    <FormContextProvider value={store}>{props.children}</FormContextProvider>\n  );\n}\n\nexport interface FormProviderProps<\n  T extends Values = Values,\n> extends FormStoreProps<T> {\n  children?: ReactNode;\n}\n"],"mappings":";;;;;SAwCI,aAAA,QAAC,CAAA,GAAA;QAFwB,oBAEO,qBAAA;sBAAU,KAAA;EAA8B,UAAA,MAAA;CAE5E,CAAA"}

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

@@ -0,0 +1,102 @@
+import { n as ButtonOptions } from "../button-Cp853csH.js";
+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-push.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormPush` component.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({
+ *   defaultValues: {
+ *     languages: ["JavaScript", "PHP"],
+ *   },
+ * });
+ * const props = useFormPush({
+ *   store,
+ *   name: store.names.languages,
+ *   value: "",
+ * });
+ * const values = useStoreState(store, "values");
+ *
+ * <Form store={store}>
+ *   {values.languages.map((_, i) => (
+ *     <FormInput key={i} name={store.names.languages[i]} />
+ *   ))}
+ *   <Role {...props}>Add new language</Role>
+ * </Form>
+ * ```
+ */
+declare const useFormPush: import("@ariakit/react-utils").Hook<"button", FormPushOptions<"button">>;
+/**
+ * Renders a button that will push items to an array value in the form store
+ * when clicked.
+ *
+ * The [`name`](https://ariakit.com/reference/form-push#name) prop needs to be
+ * provided to identify the array field. The
+ * [`value`](https://ariakit.com/reference/form-push#value) prop is required to
+ * define the value that will be added to the array.
+ *
+ * By default, the newly added input will be automatically focused when the
+ * button is clicked unless the
+ * [`autoFocusOnClick`](https://ariakit.com/reference/form-push#autofocusonclick)
+ * prop is set to `false`.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {13-15}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     languages: ["JavaScript", "PHP"],
+ *   },
+ * });
+ *
+ * const values = useStoreState(form, "values");
+ *
+ * <Form store={form}>
+ *   {values.languages.map((_, i) => (
+ *     <FormInput key={i} name={form.names.languages[i]} />
+ *   ))}
+ *   <FormPush name={form.names.languages} value="">
+ *     Add new language
+ *   </FormPush>
+ * </Form>
+ * ```
+ */
+declare const FormPush: (props: FormPushProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormPushOptions<T extends ElementType = TagName> extends ButtonOptions<T>, 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 array field. 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.
+   */
+  name: StringLike;
+  /**
+   * Value that will initially be assigned to the array item when it's pushed.
+   */
+  value: unknown;
+  /**
+   * Whether the newly added input should be automatically focused when the
+   * button is clicked.
+   * @default true
+   */
+  autoFocusOnClick?: boolean;
+}
+type FormPushProps<T extends ElementType = TagName> = Props<T, FormPushOptions<T>>;
+//#endregion
+export { FormPush, FormPushOptions, FormPushProps, useFormPush };
+//# sourceMappingURL=form-push.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-push.d.ts","names":["StringLike","Props","ElementType","ButtonOptions","CollectionItemOptions","FormStore","TagName","useFormPush","FormPushOptions","Hook","FormPush","FormPushProps","props","ReactElement","JSXElementConstructor","T","store","name","value","autoFocusOnClick"],"sources":["../../src/form/form-push.d.ts"],"mappings":";;;;;;;;cAMcM,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AA0B7B;;;;AAA+F;AAmC/F;;;;;;;;;AAAyI;AA/DxF,cA4B5BC,WAAAA,iCAA4CE,IAAAA,WAAeD,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6D3E;AAEpB;;;;;;;cA5BqBE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnGN,eAAAA,WAA0BN,WAAAA,GAAcI,OAAAA,UAAiBH,aAAAA,CAAcY,CAAAA,GAAIX,qBAAAA,CAAsBW,CAAAA;EA2BhD;;;;;;;EAnB9DC,KAAAA,GAAQX,SAAAA;EAmB0EU;;AAAC;;;;EAZnFE,IAAAA,EAAMjB,UAAAA;;;;EAINkB,KAAAA;;;;;;EAMAC,gBAAAA;AAAAA;AAAAA,KAEQR,aAAAA,WAAwBT,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,eAAAA,CAAgBO,CAAAA"}

package/dist/form/form-push.js

@@ -0,0 +1,134 @@
+"use client";
+import { useButton } from "../button/button.js";
+import { useCollectionItem } from "../collection/collection-item.js";
+import { useFormContext } from "./form-context.js";
+import { createElement, createHook, forwardRef, useEvent } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useCallback, useEffect, useState } from "react";
+//#region src/form/form-push.tsx
+const TagName = "button";
+function getFirstFieldsByName(items, name) {
+	if (!items) return [];
+	const fields = [];
+	for (const item of items) {
+		if (item.type !== "field") continue;
+		if (!item.name.startsWith(name)) continue;
+		const nameWithIndex = item.name.replace(/(\.\d+)\..+$/, "$1");
+		const regex = new RegExp(`^${nameWithIndex}`);
+		if (!fields.some((i) => regex.test(i.name))) fields.push(item);
+	}
+	return fields;
+}
+/**
+* Returns props to create a `FormPush` component.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore({
+*   defaultValues: {
+*     languages: ["JavaScript", "PHP"],
+*   },
+* });
+* const props = useFormPush({
+*   store,
+*   name: store.names.languages,
+*   value: "",
+* });
+* const values = useStoreState(store, "values");
+*
+* <Form store={store}>
+*   {values.languages.map((_, i) => (
+*     <FormInput key={i} name={store.names.languages[i]} />
+*   ))}
+*   <Role {...props}>Add new language</Role>
+* </Form>
+* ```
+*/
+const useFormPush = createHook(function useFormPush({ store, value, name: nameProp, getItem: getItemProp, autoFocusOnClick = true, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormPush must be wrapped in a Form component.");
+	const name = String(nameProp);
+	const [shouldFocus, setShouldFocus] = useState(false);
+	useEffect(() => {
+		if (!shouldFocus) return;
+		const items = getFirstFieldsByName(store?.getState().items, name);
+		const element = items?.[items.length - 1]?.element;
+		if (!element) return;
+		element.focus();
+		setShouldFocus(false);
+	}, [
+		store,
+		shouldFocus,
+		name
+	]);
+	const getItem = useCallback((item) => {
+		const nextItem = {
+			...item,
+			type: "button",
+			name
+		};
+		if (getItemProp) return getItemProp(nextItem);
+		return nextItem;
+	}, [name, getItemProp]);
+	const onClickProp = props.onClick;
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		store?.pushValue(name, value);
+		if (!autoFocusOnClick) return;
+		setShouldFocus(true);
+	});
+	props = {
+		...props,
+		onClick
+	};
+	props = useButton(props);
+	props = useCollectionItem({
+		store,
+		...props,
+		getItem
+	});
+	return props;
+});
+/**
+* Renders a button that will push items to an array value in the form store
+* when clicked.
+*
+* The [`name`](https://ariakit.com/reference/form-push#name) prop needs to be
+* provided to identify the array field. The
+* [`value`](https://ariakit.com/reference/form-push#value) prop is required to
+* define the value that will be added to the array.
+*
+* By default, the newly added input will be automatically focused when the
+* button is clicked unless the
+* [`autoFocusOnClick`](https://ariakit.com/reference/form-push#autofocusonclick)
+* prop is set to `false`.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {13-15}
+* const form = useFormStore({
+*   defaultValues: {
+*     languages: ["JavaScript", "PHP"],
+*   },
+* });
+*
+* const values = useStoreState(form, "values");
+*
+* <Form store={form}>
+*   {values.languages.map((_, i) => (
+*     <FormInput key={i} name={form.names.languages[i]} />
+*   ))}
+*   <FormPush name={form.names.languages} value="">
+*     Add new language
+*   </FormPush>
+* </Form>
+* ```
+*/
+const FormPush = forwardRef(function FormPush(props) {
+	return createElement(TagName, useFormPush(props));
+});
+//#endregion
+export { FormPush, useFormPush };
+
+//# sourceMappingURL=form-push.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-push.js","names":[],"sources":["../../src/form/form-push.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport type { ButtonOptions } from \"../button/button.tsx\";\nimport { useButton } from \"../button/button.tsx\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore, FormStoreState } from \"./form-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getFirstFieldsByName(\n  items: FormStoreState[\"items\"] | undefined,\n  name: string,\n) {\n  if (!items) return [];\n  const fields: FormStoreState[\"items\"] = [];\n  for (const item of items) {\n    if (item.type !== \"field\") continue;\n    if (!item.name.startsWith(name)) continue;\n    const nameWithIndex = item.name.replace(/(\\.\\d+)\\..+$/, \"$1\");\n    const regex = new RegExp(`^${nameWithIndex}`);\n    if (!fields.some((i) => regex.test(i.name))) {\n      fields.push(item);\n    }\n  }\n  return fields;\n}\n\n/**\n * Returns props to create a `FormPush` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({\n *   defaultValues: {\n *     languages: [\"JavaScript\", \"PHP\"],\n *   },\n * });\n * const props = useFormPush({\n *   store,\n *   name: store.names.languages,\n *   value: \"\",\n * });\n * const values = useStoreState(store, \"values\");\n *\n * <Form store={store}>\n *   {values.languages.map((_, i) => (\n *     <FormInput key={i} name={store.names.languages[i]} />\n *   ))}\n *   <Role {...props}>Add new language</Role>\n * </Form>\n * ```\n */\nexport const useFormPush = createHook<TagName, FormPushOptions>(\n  function useFormPush({\n    store,\n    value,\n    name: nameProp,\n    getItem: getItemProp,\n    autoFocusOnClick = true,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormPush must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const [shouldFocus, setShouldFocus] = useState(false);\n\n    useEffect(() => {\n      if (!shouldFocus) return;\n      const items = getFirstFieldsByName(store?.getState().items, name);\n      const element = items?.[items.length - 1]?.element;\n      if (!element) return;\n      element.focus();\n      setShouldFocus(false);\n    }, [store, shouldFocus, name]);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, type: \"button\", name };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [name, getItemProp],\n    );\n\n    const onClickProp = props.onClick;\n\n    const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.pushValue(name, value);\n      if (!autoFocusOnClick) return;\n      setShouldFocus(true);\n    });\n\n    props = {\n      ...props,\n      onClick,\n    };\n\n    props = useButton(props);\n    props = useCollectionItem<TagName>({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a button that will push items to an array value in the form store\n * when clicked.\n *\n * The [`name`](https://ariakit.com/reference/form-push#name) prop needs to be\n * provided to identify the array field. The\n * [`value`](https://ariakit.com/reference/form-push#value) prop is required to\n * define the value that will be added to the array.\n *\n * By default, the newly added input will be automatically focused when the\n * button is clicked unless the\n * [`autoFocusOnClick`](https://ariakit.com/reference/form-push#autofocusonclick)\n * prop is set to `false`.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {13-15}\n * const form = useFormStore({\n *   defaultValues: {\n *     languages: [\"JavaScript\", \"PHP\"],\n *   },\n * });\n *\n * const values = useStoreState(form, \"values\");\n *\n * <Form store={form}>\n *   {values.languages.map((_, i) => (\n *     <FormInput key={i} name={form.names.languages[i]} />\n *   ))}\n *   <FormPush name={form.names.languages} value=\"\">\n *     Add new language\n *   </FormPush>\n * </Form>\n * ```\n */\nexport const FormPush = forwardRef(function FormPush(props: FormPushProps) {\n  const htmlProps = useFormPush(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FormPushOptions<T extends ElementType = TagName>\n  extends ButtonOptions<T>, 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 array field. This can either be a string or a reference to a\n   * field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   */\n  name: StringLike;\n  /**\n   * Value that will initially be assigned to the array item when it's pushed.\n   */\n  value: unknown;\n  /**\n   * Whether the newly added input should be automatically focused when the\n   * button is clicked.\n   * @default true\n   */\n  autoFocusOnClick?: boolean;\n}\n\nexport type FormPushProps<T extends ElementType = TagName> = Props<\n  T,\n  FormPushOptions<T>\n>;\n"],"mappings":";;;;;;;;AAsBA,MAAA,UAAS;SAIF,qBAAe,OAAA,MAAA;CACpB,IAAA,CAAA,OAAM,OAAmC,CAAA;CACzC,MAAK,SAAM,CAAA;MACL,MAAK,QAAS,OAAA;EAClB,IAAI,KAAC,SAAU,SAAW;EAC1B,IAAA,CAAA,KAAM,KAAA,WAAgB,IAAK,GAAK;EAChC,MAAM,gBAAY,KAAO,KAAI,QAAA,gBAAe,IAAA;EAC5C,MAAK,QAAO,IAAM,OAAM,IAAA,eAAkB;EAG5C,IAAA,CAAA,OAAA,MAAA,MAAA,MAAA,KAAA,EAAA,IAAA,CAAA,GAAA,OAAA,KAAA,IAAA;CACA;CACF,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MAoCI,cAAgB,WAAA,SAAe,YAAA,EAAA,OAAA,OAAA,MAAA,UAAA,SAAA,aAAA,mBAAA,MAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAO,+CAAe;CAC5B,MAAM,OAAC,OAAa,QAAA;CAEpB,MAAA,CAAA,aAAgB,kBAAA,SAAA,KAAA;iBACT;EACL,IAAA,CAAA,aAAc;EACd,MAAM,QAAA,qBAAwB,OAAS,SAAI,EAAA,OAAA,IAAA;EAC3C,MAAK,UAAS,QAAA,MAAA,SAAA,IAAA;EACd,IAAA,CAAA,SAAc;EACd,QAAA,MAAA;EACF,eAAG,KAAA;IAAC;EAAO;EAAa;EAAK;CAE7B,CAAA;OAEI,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAgB,MAAA;GAAK;EACjD;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACC;CAGH,GAAA,CAAA,MAAM,WAAc,CAAA;CAEpB,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAO,kBAAqB;EAC5B,OAAK,UAAA,MAAkB,KAAA;EACvB,IAAA,CAAA,kBAAmB;EACpB,eAAA,IAAA;CAED,CAAA;SACK;EACH,GAAA;EACF;CAEA;CACA,QAAQ,UAAA,KAAA;SAA6B,kBAAA;EAAO;EAAU,GAAA;EAAS;CAE/D,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAsCE,WAAO,WAAc,SADH,SAAY,OACS;CACxC,OAAA,cAAA,SAAA,YAAA,KAAA,CAAA"}

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

@@ -0,0 +1,56 @@
+import { FormGroupOptions } from "./form-group.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/form/form-radio-group.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormRadioGroup` component.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { color: "red" } });
+ * const props = useFormRadioGroup({ store });
+ * <Form store={store}>
+ *   <Role {...props}>
+ *     <FormGroupLabel>Favorite color</FormGroupLabel>
+ *     <FormRadio name={store.names.color} value="red" />
+ *     <FormRadio name={store.names.color} value="blue" />
+ *     <FormRadio name={store.names.color} value="green" />
+ *   </Role>
+ * </Form>
+ * ```
+ */
+declare const useFormRadioGroup: import("@ariakit/react-utils").Hook<"div", FormRadioGroupOptions<"div">>;
+/**
+ * Renders a group element for
+ * [`FormRadio`](https://ariakit.com/reference/form-radio) elements. 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 {8-13}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     color: "red",
+ *   },
+ * });
+ *
+ * <Form store={form}>
+ *   <FormRadioGroup>
+ *     <FormGroupLabel>Favorite color</FormGroupLabel>
+ *     <FormRadio name={form.names.color} value="red" />
+ *     <FormRadio name={form.names.color} value="blue" />
+ *     <FormRadio name={form.names.color} value="green" />
+ *   </FormRadioGroup>
+ * </Form>
+ * ```
+ */
+declare const FormRadioGroup: (props: FormRadioGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+type FormRadioGroupOptions<T extends ElementType = TagName> = FormGroupOptions<T>;
+type FormRadioGroupProps<T extends ElementType = TagName> = Props<T, FormRadioGroupOptions<T>>;
+//#endregion
+export { FormRadioGroup, FormRadioGroupOptions, FormRadioGroupProps, useFormRadioGroup };
+//# sourceMappingURL=form-radio-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-radio-group.d.ts","names":["Props","ElementType","FormGroupOptions","TagName","useFormRadioGroup","FormRadioGroupOptions","Hook","FormRadioGroup","FormRadioGroupProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/form/form-radio-group.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAkB7B;;;;AAAwG;AA0BxG;;AA9CyD,cAoBpCC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;;;;;;;AA0B6C;AACrJ;;;;;;;;;;;;;;;AAAuF;AACvF;;cAFqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,KACpHN,qBAAAA,WAAgCJ,WAAAA,GAAcE,OAAAA,IAAWD,gBAAAA,CAAiBU,CAAAA;AAAAA,KAC1EJ,mBAAAA,WAA8BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}

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

@@ -0,0 +1,68 @@
+"use client";
+import { CompositeScopedContextProvider } from "../composite/composite-context.js";
+import { useFormGroup } from "./form-group.js";
+import { createElement, createHook, forwardRef, useWrapElement } from "@ariakit/react-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/form-radio-group.tsx
+const TagName = "div";
+/**
+* Returns props to create a `FormRadioGroup` component.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore({ defaultValues: { color: "red" } });
+* const props = useFormRadioGroup({ store });
+* <Form store={store}>
+*   <Role {...props}>
+*     <FormGroupLabel>Favorite color</FormGroupLabel>
+*     <FormRadio name={store.names.color} value="red" />
+*     <FormRadio name={store.names.color} value="blue" />
+*     <FormRadio name={store.names.color} value="green" />
+*   </Role>
+* </Form>
+* ```
+*/
+const useFormRadioGroup = createHook(function useFormRadioGroup({ store, ...props }) {
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(CompositeScopedContextProvider, {
+		value: void 0,
+		children: element
+	}), []);
+	props = {
+		role: "radiogroup",
+		...props
+	};
+	props = useFormGroup(props);
+	return props;
+});
+/**
+* Renders a group element for
+* [`FormRadio`](https://ariakit.com/reference/form-radio) elements. 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 {8-13}
+* const form = useFormStore({
+*   defaultValues: {
+*     color: "red",
+*   },
+* });
+*
+* <Form store={form}>
+*   <FormRadioGroup>
+*     <FormGroupLabel>Favorite color</FormGroupLabel>
+*     <FormRadio name={form.names.color} value="red" />
+*     <FormRadio name={form.names.color} value="blue" />
+*     <FormRadio name={form.names.color} value="green" />
+*   </FormRadioGroup>
+* </Form>
+* ```
+*/
+const FormRadioGroup = forwardRef(function FormRadioGroup(props) {
+	return createElement(TagName, useFormRadioGroup(props));
+});
+//#endregion
+export { FormRadioGroup, useFormRadioGroup };
+
+//# sourceMappingURL=form-radio-group.js.map