@ariakit/react-components 0.1.0

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

@@ -0,0 +1,57 @@
+import { n as ButtonOptions } from "../button-Cp853csH.js";
+import { t as FormStore } from "../form-store-C4Kf5QHm.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/form/form-submit.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormReset` component.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore();
+ * const props = useFormSubmit({ store });
+ * <Form store={store}>
+ *   <Role {...props}>Submit</Role>
+ * </Form>
+ * ```
+ */
+declare const useFormSubmit: import("@ariakit/react-utils").Hook<"button", FormSubmitOptions<"button">>;
+/**
+ * Renders a native submit button inside a form. The button will be
+ * [`disabled`](https://ariakit.com/reference/form-submit#disabled) while the
+ * form is submitting, but it will remain accessible to keyboard and screen
+ * reader users thanks to the
+ * [`accessibleWhenDisabled`](https://ariakit.com/reference/form-submit#accessiblewhendisabled)
+ * prop that's enabled by default.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {4}
+ * const form = useFormStore();
+ *
+ * <Form store={form}>
+ *   <FormSubmit>Submit</FormSubmit>
+ * </Form>
+ * ```
+ */
+declare const FormSubmit: (props: FormSubmitProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormSubmitOptions<T extends ElementType = TagName> extends ButtonOptions<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;
+  /**
+   * @default true
+   */
+  accessibleWhenDisabled?: ButtonOptions<T>["accessibleWhenDisabled"];
+}
+type FormSubmitProps<T extends ElementType = TagName> = Props<T, FormSubmitOptions<T>>;
+//#endregion
+export { FormSubmit, FormSubmitOptions, FormSubmitProps, useFormSubmit };
+//# sourceMappingURL=form-submit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-submit.d.ts","names":["Props","ElementType","ButtonOptions","FormStore","TagName","useFormSubmit","FormSubmitOptions","Hook","FormSubmit","FormSubmitProps","props","ReactElement","JSXElementConstructor","T","store","accessibleWhenDisabled"],"sources":["../../src/form/form-submit.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAa7B;;AAfiD,cAe5BC,aAAAA,iCAA8CE,IAAAA,WAAeD,iBAAiB;;AAAA;AAkBnG;;;;;;;;;AAA6I;AAC7I;;;;;cADqBE,UAAAA,GAAaE,KAAAA,EAAOD,eAAe,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvGN,iBAAAA,WAA4BL,WAAAA,GAAcG,OAAAA,UAAiBF,aAAAA,CAAcW,CAAAA;EAY/CA;;;;;;;EAJvCC,KAAAA,GAAQX,SAAAA;EARgED;;;EAYxEa,sBAAAA,GAAyBb,aAAAA,CAAcW,CAAAA;AAAAA;AAAAA,KAE/BJ,eAAAA,WAA0BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,iBAAAA,CAAkBO,CAAAA"}

package/dist/form/form-submit.js

@@ -0,0 +1,59 @@
+"use client";
+import { useButton } from "../button/button.js";
+import { useFormContext } from "./form-context.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/form/form-submit.tsx
+const TagName = "button";
+/**
+* Returns props to create a `FormReset` component.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore();
+* const props = useFormSubmit({ store });
+* <Form store={store}>
+*   <Role {...props}>Submit</Role>
+* </Form>
+* ```
+*/
+const useFormSubmit = createHook(function useFormSubmit({ store, accessibleWhenDisabled = true, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormSubmit must be wrapped in a Form component.");
+	props = {
+		type: "submit",
+		disabled: useStoreState(store, "submitting"),
+		...props
+	};
+	props = useButton({
+		...props,
+		accessibleWhenDisabled
+	});
+	return props;
+});
+/**
+* Renders a native submit button inside a form. The button will be
+* [`disabled`](https://ariakit.com/reference/form-submit#disabled) while the
+* form is submitting, but it will remain accessible to keyboard and screen
+* reader users thanks to the
+* [`accessibleWhenDisabled`](https://ariakit.com/reference/form-submit#accessiblewhendisabled)
+* prop that's enabled by default.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {4}
+* const form = useFormStore();
+*
+* <Form store={form}>
+*   <FormSubmit>Submit</FormSubmit>
+* </Form>
+* ```
+*/
+const FormSubmit = forwardRef(function FormSubmit(props) {
+	return createElement(TagName, useFormSubmit(props));
+});
+//#endregion
+export { FormSubmit, useFormSubmit };
+
+//# sourceMappingURL=form-submit.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-submit.js","names":[],"sources":["../../src/form/form-submit.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { ButtonOptions } from \"../button/button.tsx\";\nimport { useButton } from \"../button/button.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FormReset` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore();\n * const props = useFormSubmit({ store });\n * <Form store={store}>\n *   <Role {...props}>Submit</Role>\n * </Form>\n * ```\n */\nexport const useFormSubmit = createHook<TagName, FormSubmitOptions>(\n  function useFormSubmit({ store, accessibleWhenDisabled = true, ...props }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormSubmit must be wrapped in a Form component.\",\n    );\n\n    props = {\n      type: \"submit\",\n      disabled: useStoreState(store, \"submitting\"),\n      ...props,\n    };\n\n    props = useButton({ ...props, accessibleWhenDisabled });\n\n    return props;\n  },\n);\n\n/**\n * Renders a native submit button inside a form. The button will be\n * [`disabled`](https://ariakit.com/reference/form-submit#disabled) while the\n * form is submitting, but it will remain accessible to keyboard and screen\n * reader users thanks to the\n * [`accessibleWhenDisabled`](https://ariakit.com/reference/form-submit#accessiblewhendisabled)\n * prop that's enabled by default.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {4}\n * const form = useFormStore();\n *\n * <Form store={form}>\n *   <FormSubmit>Submit</FormSubmit>\n * </Form>\n * ```\n */\nexport const FormSubmit = forwardRef(function FormSubmit(\n  props: FormSubmitProps,\n) {\n  const htmlProps = useFormSubmit(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FormSubmitOptions<\n  T extends ElementType = TagName,\n> extends ButtonOptions<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   * @default true\n   */\n  accessibleWhenDisabled?: ButtonOptions<T>[\"accessibleWhenDisabled\"];\n}\n\nexport type FormSubmitProps<T extends ElementType = TagName> = Props<\n  T,\n  FormSubmitOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;MA2BI,gBAAgB,WAAe,SAAA,cAAA,EAAA,OAAA,yBAAA,MAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAQ,OAAA,iDAAA;SACA;EACN,MAAA;EACA,UAAG,cAAA,OAAA,YAAA;EACL,GAAA;CAEA;SAAuB,UAAA;EAAO,GAAA;EAAwB;CAEtD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;MAuBE,aAAO,WAAc,SADH,WACoB,OAAC;CACxC,OAAA,cAAA,SAAA,cAAA,KAAA,CAAA"}

package/dist/form/form.d.ts

@@ -0,0 +1,101 @@
+import { t as FormStore } from "../form-store-C4Kf5QHm.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/form/form.d.ts
+declare const TagName = "form";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Form` component.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore();
+ * const props = useForm({ store, render: <form /> });
+ * <Role {...props} />
+ * ```
+ */
+declare const useForm: import("@ariakit/react-utils").Hook<"form", FormOptions<"form">>;
+/**
+ * Renders a form element and provides a [form
+ * store](https://ariakit.com/reference/use-form-store) to its controls.
+ *
+ * The form is automatically validated on change and on blur. This behavior can
+ * be disabled with the
+ * [`validateOnChange`](https://ariakit.com/reference/form#validateonchange) and
+ * [`validateOnBlur`](https://ariakit.com/reference/form#validateonblur) props.
+ *
+ * When the form is submitted with errors, the first invalid field is
+ * automatically focused thanks to the
+ * [`autoFocusOnSubmit`](https://ariakit.com/reference/form#autofocusonsubmit)
+ * prop. If it's successful, the
+ * [`resetOnSubmit`](https://ariakit.com/reference/form#resetonsubmit) prop
+ * ensures the form is reset to its initial values as defined by the
+ * [`defaultValues`](https://ariakit.com/reference/use-form-store#defaultvalues)
+ * option on the [store](https://ariakit.com/reference/use-form-store).
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {5-8}
+ * const form = useFormStore({
+ *   defaultValues: { username: "johndoe" },
+ * });
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.username}>Username</FormLabel>
+ *   <FormInput name={form.names.username} />
+ * </Form>
+ * ```
+ */
+declare const Form: (props: FormProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not
+   * provided, the closest
+   * [`FormProvider`](https://ariakit.com/reference/form-provider) component's
+   * context will be used.
+   */
+  store?: FormStore;
+  /**
+   * Determines if the form should invoke the validation callbacks registered
+   * with
+   * [`useValidate`](https://ariakit.com/reference/use-form-store#usevalidate)
+   * when the [`values`](https://ariakit.com/reference/use-form-store#values)
+   * change.
+   * @default true
+   */
+  validateOnChange?: boolean;
+  /**
+   * Determines if the form should invoke the validation callbacks registered
+   * with
+   * [`useValidate`](https://ariakit.com/reference/use-form-store#usevalidate)
+   * when a field loses focus.
+   * @default true
+   */
+  validateOnBlur?: boolean;
+  /**
+   * Determines if the form state should reset to its
+   * [`defaultValues`](https://ariakit.com/reference/use-form-store#defaultvalues)
+   * when the [`Form`](https://ariakit.com/reference/form) component is
+   * unmounted.
+   * @default false
+   */
+  resetOnUnmount?: boolean;
+  /**
+   * Determines if the form state should be reset to its
+   * [`defaultValues`](https://ariakit.com/reference/use-form-store#defaultvalues)
+   * upon successful form submission.
+   * @default true
+   */
+  resetOnSubmit?: boolean;
+  /**
+   * Determines if the form should automatically focus on the first invalid
+   * field when the form is submitted.
+   * @default true
+   */
+  autoFocusOnSubmit?: boolean;
+}
+type FormProps<T extends ElementType = TagName> = Props<T, FormOptions<T>>;
+//#endregion
+export { Form, FormOptions, FormProps, useForm };
+//# sourceMappingURL=form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","names":["Options","Props","ElementType","FormStore","TagName","useForm","FormOptions","Hook","Form","FormProps","props","ReactElement","JSXElementConstructor","_T","store","validateOnChange","validateOnBlur","resetOnUnmount","resetOnSubmit","autoFocusOnSubmit","T"],"sources":["../../src/form/form.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAFoB,cAa5BC,OAAAA,iCAAwCE,IAAAA,SAAaD,WAAW;;;;AAAA;AA+BrF;;;;;;;;;AAAiI;AACjI;;;;;;;;;;;;;;;;cADqBE,IAAAA,GAAOE,KAAAA,EAAOD,SAAS,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC3FN,WAAAA,YAAuBJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAwCnEkB;;;AAMiB;AAErB;;;EAxCIJ,KAAAA,GAAQX,SAAAA;EAwCkCC;;;;;;;;EA/B1CW,gBAAAA;EA+B0CX;;;;;;AAAiC;EAvB3EY,cAAAA;;;;;;;;EAQAC,cAAAA;;;;;;;EAOAC,aAAAA;;;;;;EAMAC,iBAAAA;AAAAA;AAAAA,KAEQV,SAAAA,WAAoBP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMmB,CAAAA,EAAGd,WAAAA,CAAYc,CAAAA"}

package/dist/form/form.js

@@ -0,0 +1,146 @@
+"use client";
+import { FormScopedContextProvider, useFormContext } from "./form-context.js";
+import { createElement, createHook, forwardRef, useEvent, useInitialValue, useMergeRefs, useTagName, useUpdateEffect, useWrapElement } from "@ariakit/react-utils";
+import { invariant, isTextField } from "@ariakit/utils";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/form/form.tsx
+const TagName = "form";
+function isField(element, items) {
+	return items.some((item) => item.type === "field" && item.element === element);
+}
+function getFirstInvalidField(items) {
+	return items.find((item) => item.type === "field" && item.element?.getAttribute("aria-invalid") === "true");
+}
+/**
+* Returns props to create a `Form` component.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore();
+* const props = useForm({ store, render: <form /> });
+* <Role {...props} />
+* ```
+*/
+const useForm = createHook(function useForm({ store, validateOnChange = true, validateOnBlur = true, resetOnUnmount = false, resetOnSubmit = true, autoFocusOnSubmit = true, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "Form must receive a `store` prop or be wrapped in a FormProvider component.");
+	const ref = useRef(null);
+	const values = useStoreState(store, "values");
+	const submitSucceed = useStoreState(store, "submitSucceed");
+	const submitFailed = useStoreState(store, "submitFailed");
+	const items = useStoreState(store, "items");
+	const defaultValues = useInitialValue(values);
+	useEffect(() => resetOnUnmount ? store?.reset : void 0, [resetOnUnmount, store]);
+	useUpdateEffect(() => {
+		if (!validateOnChange) return;
+		if (values === defaultValues) return;
+		store?.validate();
+	}, [
+		validateOnChange,
+		values,
+		defaultValues,
+		store
+	]);
+	useEffect(() => {
+		if (!resetOnSubmit) return;
+		if (!submitSucceed) return;
+		store?.reset();
+	}, [
+		resetOnSubmit,
+		submitSucceed,
+		store
+	]);
+	const [shouldFocusOnSubmit, setShouldFocusOnSubmit] = useState(false);
+	useEffect(() => {
+		if (!shouldFocusOnSubmit) return;
+		if (!submitFailed) return;
+		const element = getFirstInvalidField(items)?.element;
+		if (!element) return;
+		setShouldFocusOnSubmit(false);
+		element.focus();
+		if (isTextField(element)) element.select();
+	}, [
+		autoFocusOnSubmit,
+		submitFailed,
+		items
+	]);
+	const onSubmitProp = props.onSubmit;
+	const onSubmit = useEvent((event) => {
+		onSubmitProp?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store?.submit();
+		if (!autoFocusOnSubmit) return;
+		setShouldFocusOnSubmit(true);
+	});
+	const onBlurProp = props.onBlur;
+	const onBlur = useEvent((event) => {
+		onBlurProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!validateOnBlur) return;
+		if (!store) return;
+		if (!isField(event.target, store.getState().items)) return;
+		store.validate();
+	});
+	const onResetProp = props.onReset;
+	const onReset = useEvent((event) => {
+		onResetProp?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store?.reset();
+	});
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(FormScopedContextProvider, {
+		value: store,
+		children: element
+	}), [store]);
+	props = {
+		role: useTagName(ref, TagName) !== "form" ? "form" : void 0,
+		noValidate: true,
+		...props,
+		ref: useMergeRefs(ref, props.ref),
+		onSubmit,
+		onBlur,
+		onReset
+	};
+	return props;
+});
+/**
+* Renders a form element and provides a [form
+* store](https://ariakit.com/reference/use-form-store) to its controls.
+*
+* The form is automatically validated on change and on blur. This behavior can
+* be disabled with the
+* [`validateOnChange`](https://ariakit.com/reference/form#validateonchange) and
+* [`validateOnBlur`](https://ariakit.com/reference/form#validateonblur) props.
+*
+* When the form is submitted with errors, the first invalid field is
+* automatically focused thanks to the
+* [`autoFocusOnSubmit`](https://ariakit.com/reference/form#autofocusonsubmit)
+* prop. If it's successful, the
+* [`resetOnSubmit`](https://ariakit.com/reference/form#resetonsubmit) prop
+* ensures the form is reset to its initial values as defined by the
+* [`defaultValues`](https://ariakit.com/reference/use-form-store#defaultvalues)
+* option on the [store](https://ariakit.com/reference/use-form-store).
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {5-8}
+* const form = useFormStore({
+*   defaultValues: { username: "johndoe" },
+* });
+*
+* <Form store={form}>
+*   <FormLabel name={form.names.username}>Username</FormLabel>
+*   <FormInput name={form.names.username} />
+* </Form>
+* ```
+*/
+const Form = forwardRef(function Form(props) {
+	return createElement(TagName, useForm(props));
+});
+//#endregion
+export { Form, useForm };
+
+//# sourceMappingURL=form.js.map

package/dist/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":[],"sources":["../../src/form/form.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useInitialValue,\n  useMergeRefs,\n  useTagName,\n  useUpdateEffect,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { isTextField, invariant } from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, FormEvent } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { FormScopedContextProvider, useFormContext } from \"./form-context.tsx\";\nimport type { FormStore, FormStoreState } from \"./form-store.ts\";\n\nconst TagName = \"form\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction isField(element: HTMLElement, items: FormStoreState[\"items\"]) {\n  return items.some(\n    (item) => item.type === \"field\" && item.element === element,\n  );\n}\n\nfunction getFirstInvalidField(items: FormStoreState[\"items\"]) {\n  return items.find(\n    (item) =>\n      item.type === \"field\" &&\n      item.element?.getAttribute(\"aria-invalid\") === \"true\",\n  );\n}\n\n/**\n * Returns props to create a `Form` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore();\n * const props = useForm({ store, render: <form /> });\n * <Role {...props} />\n * ```\n */\nexport const useForm = createHook<TagName, FormOptions>(function useForm({\n  store,\n  validateOnChange = true,\n  validateOnBlur = true,\n  resetOnUnmount = false,\n  resetOnSubmit = true,\n  autoFocusOnSubmit = true,\n  ...props\n}) {\n  const context = useFormContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"Form must receive a `store` prop or be wrapped in a FormProvider component.\",\n  );\n\n  const ref = useRef<HTMLType>(null);\n  const values = useStoreState(store, \"values\");\n  const submitSucceed = useStoreState(store, \"submitSucceed\");\n  const submitFailed = useStoreState(store, \"submitFailed\");\n  const items = useStoreState(store, \"items\");\n  const defaultValues = useInitialValue(values);\n\n  useEffect(\n    () => (resetOnUnmount ? store?.reset : undefined),\n    [resetOnUnmount, store],\n  );\n\n  useUpdateEffect(() => {\n    if (!validateOnChange) return;\n    if (values === defaultValues) return;\n    void store?.validate();\n  }, [validateOnChange, values, defaultValues, store]);\n\n  useEffect(() => {\n    if (!resetOnSubmit) return;\n    if (!submitSucceed) return;\n    store?.reset();\n  }, [resetOnSubmit, submitSucceed, store]);\n\n  const [shouldFocusOnSubmit, setShouldFocusOnSubmit] = useState(false);\n\n  useEffect(() => {\n    if (!shouldFocusOnSubmit) return;\n    if (!submitFailed) return;\n    const field = getFirstInvalidField(items);\n    const element = field?.element;\n    if (!element) return;\n    setShouldFocusOnSubmit(false);\n    element.focus();\n    if (isTextField(element)) {\n      element.select();\n    }\n    // oxlint-disable-next-line exhaustive-deps\n  }, [autoFocusOnSubmit, submitFailed, items]);\n\n  const onSubmitProp = props.onSubmit;\n\n  const onSubmit = useEvent((event: FormEvent<HTMLType>) => {\n    onSubmitProp?.(event);\n    if (event.defaultPrevented) return;\n    event.preventDefault();\n    void store?.submit();\n    if (!autoFocusOnSubmit) return;\n    setShouldFocusOnSubmit(true);\n  });\n\n  const onBlurProp = props.onBlur;\n\n  const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n    onBlurProp?.(event);\n    if (event.defaultPrevented) return;\n    if (!validateOnBlur) return;\n    if (!store) return;\n    if (!isField(event.target, store.getState().items)) return;\n    void store.validate();\n  });\n\n  const onResetProp = props.onReset;\n\n  const onReset = useEvent((event: FormEvent<HTMLType>) => {\n    onResetProp?.(event);\n    if (event.defaultPrevented) return;\n    event.preventDefault();\n    store?.reset();\n  });\n\n  props = useWrapElement(\n    props,\n    (element) => (\n      <FormScopedContextProvider value={store}>\n        {element}\n      </FormScopedContextProvider>\n    ),\n    [store],\n  );\n\n  const tagName = useTagName(ref, TagName);\n\n  props = {\n    role: tagName !== \"form\" ? \"form\" : undefined,\n    noValidate: true,\n    ...props,\n    ref: useMergeRefs(ref, props.ref),\n    onSubmit,\n    onBlur,\n    onReset,\n  };\n\n  return props;\n});\n\n/**\n * Renders a form element and provides a [form\n * store](https://ariakit.com/reference/use-form-store) to its controls.\n *\n * The form is automatically validated on change and on blur. This behavior can\n * be disabled with the\n * [`validateOnChange`](https://ariakit.com/reference/form#validateonchange) and\n * [`validateOnBlur`](https://ariakit.com/reference/form#validateonblur) props.\n *\n * When the form is submitted with errors, the first invalid field is\n * automatically focused thanks to the\n * [`autoFocusOnSubmit`](https://ariakit.com/reference/form#autofocusonsubmit)\n * prop. If it's successful, the\n * [`resetOnSubmit`](https://ariakit.com/reference/form#resetonsubmit) prop\n * ensures the form is reset to its initial values as defined by the\n * [`defaultValues`](https://ariakit.com/reference/use-form-store#defaultvalues)\n * option on the [store](https://ariakit.com/reference/use-form-store).\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {5-8}\n * const form = useFormStore({\n *   defaultValues: { username: \"johndoe\" },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.username}>Username</FormLabel>\n *   <FormInput name={form.names.username} />\n * </Form>\n * ```\n */\nexport const Form = forwardRef(function Form(props: FormProps) {\n  const htmlProps = useForm(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FormOptions<_T extends ElementType = TagName> extends Options {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) component's\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Determines if the form should invoke the validation callbacks registered\n   * with\n   * [`useValidate`](https://ariakit.com/reference/use-form-store#usevalidate)\n   * when the [`values`](https://ariakit.com/reference/use-form-store#values)\n   * change.\n   * @default true\n   */\n  validateOnChange?: boolean;\n  /**\n   * Determines if the form should invoke the validation callbacks registered\n   * with\n   * [`useValidate`](https://ariakit.com/reference/use-form-store#usevalidate)\n   * when a field loses focus.\n   * @default true\n   */\n  validateOnBlur?: boolean;\n  /**\n   * Determines if the form state should reset to its\n   * [`defaultValues`](https://ariakit.com/reference/use-form-store#defaultvalues)\n   * when the [`Form`](https://ariakit.com/reference/form) component is\n   * unmounted.\n   * @default false\n   */\n  resetOnUnmount?: boolean;\n  /**\n   * Determines if the form state should be reset to its\n   * [`defaultValues`](https://ariakit.com/reference/use-form-store#defaultvalues)\n   * upon successful form submission.\n   * @default true\n   */\n  resetOnSubmit?: boolean;\n  /**\n   * Determines if the form should automatically focus on the first invalid\n   * field when the form is submitted.\n   * @default true\n   */\n  autoFocusOnSubmit?: boolean;\n}\n\nexport type FormProps<T extends ElementType = TagName> = Props<\n  T,\n  FormOptions<T>\n>;\n"],"mappings":";;;;;;;;AAuBA,MAAA,UAAS;SACA,QAAM,SACV,OAAS;CAEd,OAAA,MAAA,MAAA,SAAA,KAAA,SAAA,WAAA,KAAA,YAAA,OAAA;AAEA;SACS,qBAEH,OAAK;CAGX,OAAA,MAAA,MAAA,SAAA,KAAA,SAAA,WAAA,KAAA,SAAA,aAAA,cAAA,MAAA,MAAA;;;;;;;;;;;;MAqBE,UAAM,WAAU,SAAe,QAAA,EAAA,OAAA,mBAAA,MAAA,iBAAA,MAAA,iBAAA,OAAA,gBAAA,MAAA,oBAAA,MAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAM,6EAAqB;CACjC,MAAM,MAAA,OAAS,IAAA;CACf,MAAM,SAAA,cAAgB,OAAc,QAAO;CAC3C,MAAM,gBAAe,cAAc,OAAO,eAAc;CACxD,MAAM,eAAQ,cAAqB,OAAO,cAAA;CAC1C,MAAM,QAAA,cAAgB,OAAA,OAAgB;CAEtC,MAAA,gBACS,gBAAiB,MAAO;CAIjC,gBAAA,iBAAsB,OAAA,QAAA,KAAA,GAAA,CAAA,gBAAA,KAAA,CAAA;uBACf;EACL,IAAI,CAAA,kBAAW;EACf,IAAK,WAAO,eAAS;EACvB,OAAG,SAAA;IAAC;EAAkB;EAAQ;EAAe;EAAM;CAEnD,CAAA;iBACO;EACL,IAAI,CAAC,eAAe;EACpB,IAAA,CAAA,eAAa;EACf,OAAG,MAAA;IAAC;EAAe;EAAe;EAAM;CAExC,CAAA;CAEA,MAAA,CAAA,qBAAgB,0BAAA,SAAA,KAAA;iBACT;EACL,IAAI,CAAC,qBAAc;EAEnB,IAAA,CAAA,cADc;EAEd,MAAK,UAAS,qBAAA,KAAA,GAAA;EACd,IAAA,CAAA,SAAA;EACA,uBAAc,KAAA;EACd,QAAI,MAAA;EAIN,IAAG,YAAA,OAAA,GAAA,QAAA,OAAA;IAAC;EAAmB;EAAc;EAAM;CAE3C,CAAA;CAEA,MAAM,eAAW,MAAU;OACzB,WAAe,UAAK,UAAA;EACpB,eAAU,KAAA;EACV,IAAA,MAAM,kBAAe;EACrB,MAAK,eAAc;EACnB,OAAK,OAAA;EACL,IAAA,CAAA,mBAAuB;EACxB,uBAAA,IAAA;CAED,CAAA;CAEA,MAAM,aAAS,MAAU;OACvB,SAAa,UAAK,UAAA;EAClB,aAAU,KAAA;EACV,IAAI,MAAC,kBAAgB;EACrB,IAAI,CAAC,gBAAO;EACZ,IAAI,CAAC,OAAA;EACL,IAAK,CAAA,QAAM,MAAS,QAAA,MAAA,SAAA,EAAA,KAAA,GAAA;EACrB,MAAA,SAAA;CAED,CAAA;CAEA,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAM,kBAAe;EACrB,MAAA,eAAa;EACd,OAAA,MAAA;CAED,CAAA;SAGsC,eAAA,QAAA,YAAA,oBAAA,2BAAA;;EAEP,UAG/B;CAIA,CAAA,GAAA,CAAA,KAAQ,CAAA;SAFQ;EAId,MAAA,WAAY,KAAA,OAAA,MAAA,SAAA,SAAA,KAAA;EACZ,YAAG;EACH,GAAA;EACA,KAAA,aAAA,KAAA,MAAA,GAAA;EACA;EACA;EACF;CAEA;CACD,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkCC,OAAO,WAAc,SADH,KAAA,OACqB;CACxC,OAAA,cAAA,SAAA,QAAA,KAAA,CAAA"}

package/dist/form-store-C4Kf5QHm.d.ts

@@ -0,0 +1,120 @@
+import { i as CollectionStoreOptions, n as CollectionStoreFunctions, o as CollectionStoreState } from "./collection-store-CbwzYsWf.js";
+import { PickRequired } from "@ariakit/utils";
+import { Store } from "@ariakit/react-store";
+import { StringLike } from "@ariakit/components/form/types";
+import * as Core from "@ariakit/components/form/form-store";
+
+//#region src/form/form-store.d.ts
+declare function useFormStoreProps<T extends Omit<FormStore, "useValue" | "useValidate" | "useSubmit">>(store: T, update: () => void, props: FormStoreProps): T & {
+  useValue: <T_1 = any>(name: StringLike) => T_1;
+  useValidate: (callback: Core.FormStoreCallback<FormStoreState<FormStoreValues$1>>) => void;
+  useSubmit: (callback: Core.FormStoreCallback<FormStoreState<FormStoreValues$1>>) => void;
+};
+/**
+ * Creates a form store to control the state of
+ * [Form](https://ariakit.com/components/form) components.
+ * @example
+ * ```jsx
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     email: "",
+ *   },
+ * });
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.email}>Email</FormLabel>
+ *   <FormInput name={form.names.email} />
+ *   <FormError name={form.names.email} />
+ *   <FormSubmit>Submit</FormSubmit>
+ * </Form>
+ * ```
+ */
+declare function useFormStore<T extends FormStoreValues$1 = FormStoreValues$1>(props: PickRequired<FormStoreProps<T>, "values" | "defaultValues" | "errors" | "defaultErrors" | "touched" | "defaultTouched">): FormStore<T>;
+declare function useFormStore(props: FormStoreProps): FormStore;
+interface FormStoreValues$1 extends Core.FormStoreValues {}
+interface FormStoreItem extends Core.FormStoreItem {}
+interface FormStoreState<T extends FormStoreValues$1 = FormStoreValues$1> extends Core.FormStoreState<T>, CollectionStoreState<FormStoreItem> {}
+interface FormStoreFunctions<T extends FormStoreValues$1 = FormStoreValues$1> extends Core.FormStoreFunctions<T>, CollectionStoreFunctions<FormStoreItem> {
+  /**
+   * A custom hook that rerenders the component when the value of the given
+   * field changes. It accepts 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. It returns the value of the field.
+   *
+   * Live examples:
+   * - [Form with Select](https://ariakit.com/examples/form-select)
+   * @example
+   * const nameValue = store.useValue("name");
+   * // Can also use store.names for type safety.
+   * const emailValue = store.useValue(store.names.email);
+   */
+  useValue: <T = any>(name: StringLike) => T;
+  /**
+   * Custom hook that accepts a callback that will be used to validate the form
+   * when [`validate`](https://ariakit.com/reference/use-form-store#validate) is
+   * called, typically when a form field is touched or when the form is
+   * submitted.
+   *
+   * Live examples:
+   * - [FormRadio](https://ariakit.com/examples/form-radio)
+   * @example
+   * store.useValidate(async (state) => {
+   *   const errors = await api.validate(state.values);
+   *   if (errors) {
+   *     store.setErrors(errors);
+   *   }
+   * });
+   */
+  useValidate: (callback: Core.FormStoreCallback<FormStoreState<T>>) => void;
+  /**
+   * Custom hook that accepts a callback that will be used to submit the form
+   * when [`submit`](https://ariakit.com/reference/use-form-store#submit) is
+   * called.
+   *
+   * Live examples:
+   * - [FormRadio](https://ariakit.com/examples/form-radio)
+   * - [Form with Select](https://ariakit.com/examples/form-select)
+   * @example
+   * store.useSubmit(async (state) => {
+   *   try {
+   *     await api.submit(state.values);
+   *   } catch (errors) {
+   *     store.setErrors(errors);
+   *   }
+   * });
+   */
+  useSubmit: (callback: Core.FormStoreCallback<FormStoreState<T>>) => void;
+}
+interface FormStoreOptions<T extends FormStoreValues$1 = FormStoreValues$1> extends Core.FormStoreOptions<T>, CollectionStoreOptions<FormStoreItem> {
+  /**
+   * Function that will be called when
+   * [`values`](https://ariakit.com/reference/use-form-store#values) state
+   * changes.
+   * @example
+   * function MyForm({ values, onChange }) {
+   *   const form = useFormStore({ values, setValues: onChange });
+   * }
+   */
+  setValues?: (values: FormStoreState<T>["values"]) => void;
+  /**
+   * Function that will be called when the
+   * [`errors`](https://ariakit.com/reference/use-form-store#errors) state
+   * changes.
+   * @example
+   * useFormStore({ setErrors: (errors) => console.log(errors) });
+   */
+  setErrors?: (errors: FormStoreState<T>["errors"]) => void;
+  /**
+   * Function that will be called when the
+   * [`touched`](https://ariakit.com/reference/use-form-store#touched) state
+   * changes.
+   * @example
+   * useFormStore({ setTouched: (touched) => console.log(touched) });
+   */
+  setTouched?: (touched: FormStoreState<T>["touched"]) => void;
+}
+interface FormStoreProps<T extends FormStoreValues$1 = FormStoreValues$1> extends FormStoreOptions<T>, Core.FormStoreProps<T> {}
+interface FormStore<T extends FormStoreValues$1 = FormStoreValues$1> extends FormStoreFunctions<T>, Store<Core.FormStore<T>> {}
+//#endregion
+export { FormStoreProps as a, useFormStore as c, FormStoreOptions as i, useFormStoreProps as l, FormStoreFunctions as n, FormStoreState as o, FormStoreItem as r, FormStoreValues$1 as s, FormStore as t };
+//# sourceMappingURL=form-store-C4Kf5QHm.d.ts.map

package/dist/form-store-C4Kf5QHm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-store-C4Kf5QHm.d.ts","names":["Core","StringLike","Store","PickRequired","CollectionStoreFunctions","CollectionStoreOptions","CollectionStoreState","useFormStoreProps","T_1","T","FormStore","Omit","FormStoreProps","FormStoreValues","FormStoreState","FormStoreCallback","store","update","props","useValue","name","useValidate","callback","useSubmit","useFormStore","FormStoreItem","FormStoreFunctions","FormStoreOptions","setValues","values","setErrors","errors","setTouched","touched"],"sources":["../src/form/form-store.d.ts"],"mappings":";;;;;;;iBAKwBO,iBAAAA,WAA4BI,IAAAA,CAAKD,SAAAA,4CAAAA,CAAsDM,KAAAA,EAAOP,CAAAA,EAAGQ,MAAAA,cAAoBC,KAAAA,EAAON,cAAAA,GAAiBH,CAAAA;EACjKU,QAAAA,cAAsBC,IAAAA,EAAMnB,UAAAA,KAAeO,GAAAA;EAC3Ca,WAAAA,GAAcC,QAAAA,EAAUtB,IAAAA,CAAKe,iBAAAA,CAAkBD,cAAAA,CAAeD,iBAAAA;EAC9DU,SAAAA,GAAYD,QAAAA,EAAUtB,IAAAA,CAAKe,iBAAAA,CAAkBD,cAAAA,CAAeD,iBAAAA;AAAAA;;;;;;;;;;;;;;;;;;;;iBAqBxCW,YAAAA,WAAuBX,iBAAAA,GAAkBA,iBAAAA,CAAAA,CAAiBK,KAAAA,EAAOf,YAAAA,CAAaS,cAAAA,CAAeH,CAAAA,6FAA8FC,SAAAA,CAAUD,CAAAA;AAAAA,iBACrMe,YAAAA,CAAaN,KAAAA,EAAON,cAAAA,GAAiBF,SAAS;AAAA,UACrDG,iBAAAA,SAAwBb,IAAAA,CAAKa,eAAe;AAAA,UAE5CY,aAAAA,SAAsBzB,IAAAA,CAAKyB,aAAa;AAAA,UAExCX,cAAAA,WAAyBD,iBAAAA,GAAkBA,iBAAAA,UAAyBb,IAAAA,CAAKc,cAAAA,CAAeL,CAAAA,GAAIH,oBAAAA,CAAqBmB,aAAAA;AAAAA,UAEjHC,kBAAAA,WAA6Bb,iBAAAA,GAAkBA,iBAAAA,UAAyBb,IAAAA,CAAK0B,kBAAAA,CAAmBjB,CAAAA,GAAIL,wBAAAA,CAAyBqB,aAAAA;EA/B/FjB;;;;;;;;;;;;;EA6C3CW,QAAAA,YAAoBC,IAAAA,EAAMnB,UAAAA,KAAeQ,CAAAA;EA3CoC;AAqBjF;;;;;;;;;;;;;;;EAuCIY,WAAAA,GAAcC,QAAAA,EAAUtB,IAAAA,CAAKe,iBAAAA,CAAkBD,cAAAA,CAAeL,CAAAA;EAvCoCG;;;;;;AAAwH;AAC9N;;;;;;;;AAAsE;AACtE;EAuDIW,SAAAA,GAAYD,QAAAA,EAAUtB,IAAAA,CAAKe,iBAAAA,CAAkBD,cAAAA,CAAeL,CAAAA;AAAAA;AAAAA,UAE/CkB,gBAAAA,WAA2Bd,iBAAAA,GAAkBA,iBAAAA,UAAyBb,IAAAA,CAAK2B,gBAAAA,CAAiBlB,CAAAA,GAAIJ,sBAAAA,CAAuBoB,aAAAA;EAzD3E;AAE7D;;;;AAAyD;AAEzD;;;EA+DIG,SAAAA,IAAaC,MAAAA,EAAQf,cAAAA,CAAeL,CAAAA;EA/DoBI;;;;;;;EAuExDiB,SAAAA,IAAaC,MAAAA,EAAQjB,cAAAA,CAAeL,CAAAA;EAvEEI;;;;;;;EA+EtCmB,UAAAA,IAAcC,OAAAA,EAASnB,cAAAA,CAAeL,CAAAA;AAAAA;AAAAA,UAEzBG,cAAAA,WAAyBC,iBAAAA,GAAkBA,iBAAAA,UAAyBc,gBAAAA,CAAiBlB,CAAAA,GAAIT,IAAAA,CAAKY,cAAAA,CAAeH,CAAAA;AAAAA,UAE7GC,SAAAA,WAAoBG,iBAAAA,GAAkBA,iBAAAA,UAAyBa,kBAAAA,CAAmBjB,CAAAA,GAAIP,KAAAA,CAAMF,IAAAA,CAAKU,SAAAA,CAAUD,CAAAA"}

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

@@ -0,0 +1,7 @@
+import { SetState } from "@ariakit/utils";
+
+//#region src/group/group-label-context.d.ts
+declare const GroupLabelContext: import("react").Context<SetState<string | undefined> | undefined>;
+//#endregion
+export { GroupLabelContext };
+//# sourceMappingURL=group-label-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group-label-context.d.ts","names":["SetState","GroupLabelContext","Context"],"sources":["../../src/group/group-label-context.d.ts"],"mappings":";;;cACqBC,iBAAAA,kBAAmCC,OAAAA,CAAQF,QAAQ"}

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

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from "react";
+//#region src/group/group-label-context.tsx
+const GroupLabelContext = createContext(void 0);
+//#endregion
+export { GroupLabelContext };
+
+//# sourceMappingURL=group-label-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group-label-context.js","names":[],"sources":["../../src/group/group-label-context.tsx"],"sourcesContent":["import type { SetState } from \"@ariakit/utils\";\nimport { createContext } from \"react\";\n\nexport const GroupLabelContext = createContext<\n  SetState<string | undefined> | undefined\n>(undefined);\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+import { i as useGroupLabel, n as GroupLabelOptions, r as GroupLabelProps, t as GroupLabel } from "../group-label-C16IDs1b.js";
+export { GroupLabel, GroupLabelOptions, GroupLabelProps, useGroupLabel };

package/dist/group/group-label.js

@@ -0,0 +1,52 @@
+"use client";
+import { GroupLabelContext } from "./group-label-context.js";
+import { createElement, createHook, forwardRef, useId, useSafeLayoutEffect } from "@ariakit/react-utils";
+import { removeUndefinedValues } from "@ariakit/utils";
+import { useContext } from "react";
+//#region src/group/group-label.tsx
+const TagName = "div";
+/**
+* Returns props to create a `GroupLabel` component. This hook must be used in a
+* component that's wrapped with `Group` so the `aria-labelledby` prop is
+* properly set on the group element.
+* @see https://ariakit.com/components/group
+* @example
+* ```jsx
+* // This component must be wrapped with Group
+* const props = useGroupLabel();
+* <Role {...props}>Label</Role>
+* ```
+*/
+const useGroupLabel = createHook(function useGroupLabel(props) {
+	const setLabelId = useContext(GroupLabelContext);
+	const id = useId(props.id);
+	useSafeLayoutEffect(() => {
+		setLabelId?.(id);
+		return () => setLabelId?.(void 0);
+	}, [setLabelId, id]);
+	props = {
+		"aria-hidden": true,
+		...props,
+		id
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a label in a group. This component should be wrapped with a
+* [`Group`](https://ariakit.com/reference/group) so the `aria-labelledby`
+* prop is correctly set on the group element.
+* @see https://ariakit.com/components/group
+* @example
+* ```jsx
+* <Group>
+*   <GroupLabel>Label</GroupLabel>
+* </Group>
+* ```
+*/
+const GroupLabel = forwardRef(function GroupLabel(props) {
+	return createElement(TagName, useGroupLabel(props));
+});
+//#endregion
+export { GroupLabel, useGroupLabel };
+
+//# sourceMappingURL=group-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group-label.js","names":[],"sources":["../../src/group/group-label.tsx"],"sourcesContent":["import {\n  useId,\n  useSafeLayoutEffect,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { removeUndefinedValues } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useContext } from \"react\";\nimport { GroupLabelContext } from \"./group-label-context.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `GroupLabel` component. This hook must be used in a\n * component that's wrapped with `Group` so the `aria-labelledby` prop is\n * properly set on the group element.\n * @see https://ariakit.com/components/group\n * @example\n * ```jsx\n * // This component must be wrapped with Group\n * const props = useGroupLabel();\n * <Role {...props}>Label</Role>\n * ```\n */\nexport const useGroupLabel = createHook<TagName, GroupLabelOptions>(\n  function useGroupLabel(props) {\n    const setLabelId = useContext(GroupLabelContext);\n    const id = useId(props.id);\n\n    useSafeLayoutEffect(() => {\n      setLabelId?.(id);\n      return () => setLabelId?.(undefined);\n    }, [setLabelId, id]);\n\n    props = {\n      \"aria-hidden\": true,\n      ...props,\n      id,\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders a label in a group. This component should be wrapped with a\n * [`Group`](https://ariakit.com/reference/group) so the `aria-labelledby`\n * prop is correctly set on the group element.\n * @see https://ariakit.com/components/group\n * @example\n * ```jsx\n * <Group>\n *   <GroupLabel>Label</GroupLabel>\n * </Group>\n * ```\n */\nexport const GroupLabel = forwardRef(function GroupLabel(\n  props: GroupLabelProps,\n) {\n  const htmlProps = useGroupLabel(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface GroupLabelOptions<\n  _T extends ElementType = TagName,\n> extends Options {}\n\nexport type GroupLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  GroupLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;MA8BI,gBAAmB,WAAW,SAAA,cAAiB,OAAA;CAC/C,MAAM,aAAW,WAAQ,iBAAA;CAEzB,MAAA,KAAA,MAAA,MAAA,EAAA;2BACiB;EACf,aAAa,EAAA;EACf,aAAI,aAAe,KAAA,CAAA;CAEnB,GAAA,CAAA,YAAQ,EAAA,CAAA;SACN;EACA,eAAG;EACH,GAAA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;MAkBE,aAAO,WAAc,SADH,WACoB,OAAC;CACxC,OAAA,cAAA,SAAA,cAAA,KAAA,CAAA"}

package/dist/group/group.d.ts

@@ -0,0 +1,2 @@
+import { i as useGroup, n as GroupOptions, r as GroupProps, t as Group } from "../group-CamegDJA.js";
+export { Group, GroupOptions, GroupProps, useGroup };