@ariakit/react-core 0.0.1 → 0.1.0

package/esm/form/form-checkbox.d.ts

@@ -0,0 +1,37 @@
+import type { CheckboxOptions } from "../checkbox/checkbox.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormFieldOptions } from "./form-field.js";
+/**
+ * Returns props to create a `FormCheckbox` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { acceptTerms: false } });
+ * const props = useFormCheckbox({ store, name: store.names.acceptTerms });
+ * <Form store={store}>
+ *   <label>
+ *     <Role {...props} />
+ *     Accept terms
+ *   </label>
+ * </Form>
+ * ```
+ */
+export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheckboxOptions<"input">>;
+/**
+ * Renders a checkbox as a form field.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({ defaultValues: { acceptTerms: false } });
+ * <Form store={form}>
+ *   <label>
+ *     <FormCheckbox name={form.names.acceptTerms} />
+ *     Accept terms
+ *   </label>
+ * </Form>
+ * ```
+ */
+export declare const FormCheckbox: import("../utils/types.js").Component<FormCheckboxOptions<"input">>;
+export interface FormCheckboxOptions<T extends As = "input"> extends FormFieldOptions<T>, Omit<CheckboxOptions<T>, "store"> {
+}
+export type FormCheckboxProps<T extends As = "input"> = Props<FormCheckboxOptions<T>>;

package/esm/form/form-checkbox.js

@@ -0,0 +1,65 @@
+import {
+  useFormField
+} from "../__chunks/RFLPDFU5.js";
+import {
+  FormContext
+} from "../__chunks/P3I4MECH.js";
+import {
+  useCheckbox
+} from "../__chunks/4RNONDN5.js";
+import {
+  useCheckboxStore
+} from "../__chunks/HRNQJHNJ.js";
+import "../__chunks/M5KYRTQG.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/5TGAWEHD.js";
+import {
+  createElement,
+  createHook,
+  createMemoComponent
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/form/form-checkbox.ts
+import { useContext } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+var useFormCheckbox = createHook(
+  ({ store, name: nameProp, value, checked, defaultChecked, ...props }) => {
+    const context = useContext(FormContext);
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "FormCheckbox must be wrapped in a Form component"
+    );
+    const name = `${nameProp}`;
+    const checkboxStore = useCheckboxStore({
+      value: store.useValue(name),
+      setValue: (value2) => store?.setValue(name, value2)
+    });
+    props = useCheckbox({ store: checkboxStore, value, checked, ...props });
+    props = useFormField({
+      store,
+      name,
+      "aria-labelledby": void 0,
+      ...props
+    });
+    return props;
+  }
+);
+var FormCheckbox = createMemoComponent(
+  (props) => {
+    const htmlProps = useFormCheckbox(props);
+    return createElement("input", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  FormCheckbox.displayName = "FormCheckbox";
+}
+export {
+  FormCheckbox,
+  useFormCheckbox
+};

package/esm/form/form-context.d.ts

@@ -0,0 +1,2 @@
+import type { FormStore } from "./form-store.js";
+export declare const FormContext: import("react").Context<FormStore | undefined>;

package/esm/form/form-context.js

@@ -0,0 +1,6 @@
+import {
+  FormContext
+} from "../__chunks/P3I4MECH.js";
+export {
+  FormContext
+};

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

@@ -0,0 +1,47 @@
+import type { StringLike } from "@ariakit/core/form/types";
+import type { CollectionItemOptions } from "../collection/collection-item.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormDescription` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { password: "" } });
+ * const props = useFormDescription({ store, name: store.names.password });
+ * <Form store={store}>
+ *   <FormLabel name={store.names.password}>Password</FormLabel>
+ *   <FormInput name={store.names.password} type="password" />
+ *   <Role {...props}>Password with at least 8 characters.</Role>
+ * </Form>
+ * ```
+ */
+export declare const useFormDescription: import("../utils/types.js").Hook<FormDescriptionOptions<"div">>;
+/**
+ * Renders a description element for a form field.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({ defaultValues: { password: "" } });
+ * <Form store={form}>
+ *   <FormLabel name={form.names.password}>Password</FormLabel>
+ *   <FormInput name={form.names.password} type="password" />
+ *   <FormDescription name={form.names.password}>
+ *     Password with at least 8 characters.
+ *   </FormDescription>
+ * </Form>
+ * ```
+ */
+export declare const FormDescription: import("../utils/types.js").Component<FormDescriptionOptions<"div">>;
+export interface FormDescriptionOptions<T extends As = "div"> extends CollectionItemOptions<T> {
+    /**
+     * Object returned by the `useFormStore` hook. If not provided, the parent
+     * `Form` component's context will be used.
+     */
+    store?: FormStore;
+    /**
+     * Name of the field.
+     */
+    name: StringLike;
+}
+export type FormDescriptionProps<T extends As = "div"> = Props<FormDescriptionOptions<T>>;

package/esm/form/form-description.js

@@ -0,0 +1,69 @@
+import {
+  FormContext
+} from "../__chunks/P3I4MECH.js";
+import {
+  useCollectionItem
+} from "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import {
+  createElement,
+  createHook,
+  createMemoComponent
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useForkRef,
+  useId
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/form/form-description.ts
+import { useCallback, useContext, useRef } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+var useFormDescription = createHook(
+  ({ store, name: nameProp, getItem: getItemProp, ...props }) => {
+    const context = useContext(FormContext);
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "FormDescription must be wrapped in a Form component"
+    );
+    const id = useId(props.id);
+    const ref = useRef(null);
+    const name = `${nameProp}`;
+    const getItem = useCallback(
+      (item) => {
+        const nextItem = {
+          ...item,
+          id: id || item.id,
+          name,
+          type: "description"
+        };
+        if (getItemProp) {
+          return getItemProp(nextItem);
+        }
+        return nextItem;
+      },
+      [id, name, getItemProp]
+    );
+    props = {
+      id,
+      ...props,
+      ref: useForkRef(ref, props.ref)
+    };
+    props = useCollectionItem({ store, ...props, getItem });
+    return props;
+  }
+);
+var FormDescription = createMemoComponent(
+  (props) => {
+    const htmlProps = useFormDescription(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  FormDescription.displayName = "FormDescription";
+}
+export {
+  FormDescription,
+  useFormDescription
+};

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

@@ -0,0 +1,60 @@
+import type { StringLike } from "@ariakit/core/form/types";
+import type { CollectionItemOptions } from "../collection/collection-item.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormDescription` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { email: "" } });
+ * const props = useFormError({ store, name: store.names.email });
+ *
+ * store.useValidate(() => {
+ *   if (!store.getValue(store.names.email)) {
+ *     store.setError(store.names.email, "Email is required!");
+ *   }
+ * });
+ *
+ * <Form store={store}>
+ *   <FormLabel name={store.names.email}>Email</FormLabel>
+ *   <FormInput name={store.names.email} />
+ *   <Role {...props} />
+ * </Form>
+ * ```
+ */
+export declare const useFormError: import("../utils/types.js").Hook<FormErrorOptions<"div">>;
+/**
+ * Renders an element that displays an error message. The `children` will be
+ * automatically set to the error message set on the store.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({ defaultValues: { email: "" } });
+ *
+ * form.useValidate(() => {
+ *   if (!form.values.email) {
+ *     form.setError(form.names.email, "Email is required!");
+ *   }
+ * });
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.email}>Email</FormLabel>
+ *   <FormInput name={form.names.email} />
+ *   <FormError name={form.names.email} />
+ * </Form>
+ * ```
+ */
+export declare const FormError: import("../utils/types.js").Component<FormErrorOptions<"div">>;
+export interface FormErrorOptions<T extends As = "div"> extends CollectionItemOptions<T> {
+    /**
+     * Object returned by the `useFormStore` hook. If not provided, the parent
+     * `Form` component's context will be used.
+     */
+    store?: FormStore;
+    /**
+     * Name of the field.
+     */
+    name: StringLike;
+}
+export type FormErrorProps<T extends As = "div"> = Props<FormErrorOptions<T>>;

package/esm/form/form-error.js

@@ -0,0 +1,72 @@
+import {
+  FormContext
+} from "../__chunks/P3I4MECH.js";
+import {
+  useCollectionItem
+} from "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import {
+  createElement,
+  createHook,
+  createMemoComponent
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useForkRef,
+  useId
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/form/form-error.ts
+import { useCallback, useContext, useRef } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+var useFormError = createHook(
+  ({ store, name: nameProp, getItem: getItemProp, ...props }) => {
+    const context = useContext(FormContext);
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "FormError must be wrapped in a Form component"
+    );
+    const id = useId(props.id);
+    const ref = useRef(null);
+    const name = `${nameProp}`;
+    const getItem = useCallback(
+      (item) => {
+        const nextItem = { ...item, id: id || item.id, name, type: "error" };
+        if (getItemProp) {
+          return getItemProp(nextItem);
+        }
+        return nextItem;
+      },
+      [id, name, getItemProp]
+    );
+    const children = store.useState(() => {
+      const error = store?.getError(name);
+      if (error == null)
+        return;
+      if (!store?.getFieldTouched(name))
+        return;
+      return error;
+    });
+    props = {
+      id,
+      role: "alert",
+      children,
+      ...props,
+      ref: useForkRef(ref, props.ref)
+    };
+    props = useCollectionItem({ store, ...props, getItem });
+    return props;
+  }
+);
+var FormError = createMemoComponent((props) => {
+  const htmlProps = useFormError(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  FormError.displayName = "FormError";
+}
+export {
+  FormError,
+  useFormError
+};

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

@@ -0,0 +1,72 @@
+import type { FocusEvent } from "react";
+import type { StringLike } from "@ariakit/core/form/types";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { CollectionItemOptions } from "../collection/collection-item.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * 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.
+ * @see https://ariakit.org/components/form
+ * @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}
+ *     as={Editor}
+ *     value={value}
+ *     onChange={(value) => store.setValue(store.names.content, value)}
+ *   />
+ * </Form>
+ * ```
+ */
+export declare const useFormField: import("../utils/types.js").Hook<FormFieldOptions<"input">>;
+/**
+ * Renders a form field. Unlike `FormInput`, this component doesn't
+ * automatically pass the `value` and `onChange` props down to the underlying
+ * element. This is so we can use it not only for native form elements but also
+ * for custom components whose value is not controlled by the native `value` and
+ * `onChange` props.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({ defaultValues: { content: "" } });
+ * const value = form.useValue(form.names.content);
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.content}>Content</FormLabel>
+ *   <FormField
+ *     {...props}
+ *     as={Editor}
+ *     value={value}
+ *     onChange={(value) => form.setValue(form.names.content, value)}
+ *   />
+ * </Form>
+ * ```
+ */
+export declare const FormField: import("../utils/types.js").Component<FormFieldOptions<"input">>;
+export interface FormFieldOptions<T extends As = "input"> extends CollectionItemOptions<T> {
+    /**
+     * Object returned by the `useFormStore` hook. If not provided, the parent
+     * `Form` component's context will be used.
+     */
+    store?: FormStore;
+    /**
+     * Name of the field.
+     */
+    name: StringLike;
+    /**
+     * Whether the field should be marked touched on blur.
+     * @default true
+     */
+    touchOnBlur?: BooleanOrCallback<FocusEvent>;
+}
+export type FormFieldProps<T extends As = "input"> = Props<FormFieldOptions<T>>;

package/esm/form/form-field.js

@@ -0,0 +1,14 @@
+import {
+  FormField,
+  useFormField
+} from "../__chunks/RFLPDFU5.js";
+import "../__chunks/P3I4MECH.js";
+import "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  FormField,
+  useFormField
+};

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

@@ -0,0 +1,49 @@
+import type { GroupLabelOptions } from "../group/group-label.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * 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.org/components/form
+ * @example
+ * ```jsx
+ * // This component must be wrapped with FormGroup
+ * const props = useFormGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+export declare const useFormGroupLabel: import("../utils/types.js").Hook<FormGroupLabelOptions<"div">>;
+/**
+ * Renders a label in a form group. This component must be wrapped with
+ * `FormGroup` so the `aria-labelledby` prop is properly set on the form group
+ * element.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * 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>
+ * ```
+ */
+export declare const FormGroupLabel: import("../utils/types.js").Component<FormGroupLabelOptions<"div">>;
+export interface FormGroupLabelOptions<T extends As = "div"> extends GroupLabelOptions<T> {
+    /**
+     * Object returned by the `useFormStore` hook. If not provided, the parent
+     * `Form` component's context will be used.
+     */
+    store?: FormStore;
+}
+export type FormGroupLabelProps<T extends As = "div"> = Props<FormGroupLabelOptions<T>>;

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

@@ -0,0 +1,32 @@
+import {
+  useGroupLabel
+} from "../__chunks/SE7IFIBU.js";
+import "../__chunks/F5VAC7MB.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/form/form-group-label.ts
+var useFormGroupLabel = createHook(
+  ({ store, ...props }) => {
+    props = useGroupLabel(props);
+    return props;
+  }
+);
+var FormGroupLabel = createComponent(
+  (props) => {
+    const htmlProps = useFormGroupLabel(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  FormGroupLabel.displayName = "FormGroupLabel";
+}
+export {
+  FormGroupLabel,
+  useFormGroupLabel
+};

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

@@ -0,0 +1,49 @@
+import type { GroupOptions } from "../group/group.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormGroup` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore();
+ * const props = useFormGroup({ store });
+ * <Form store={store}>
+ *   <Role {...props}>
+ *     <FormGroupLabel>Label</FormGroupLabel>
+ *   </Role>
+ * </Form>
+ * ```
+ */
+export declare const useFormGroup: import("../utils/types.js").Hook<FormGroupOptions<"div">>;
+/**
+ * Renders a form group.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * 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>
+ * ```
+ */
+export declare const FormGroup: import("../utils/types.js").Component<FormGroupOptions<"div">>;
+export interface FormGroupOptions<T extends As = "div"> extends GroupOptions<T> {
+    /**
+     * Object returned by the `useFormStore` hook. If not provided, the parent
+     * `Form` component's context will be used.
+     */
+    store?: FormStore;
+}
+export type FormGroupProps<T extends As = "div"> = Props<FormGroupOptions<T>>;

package/esm/form/form-group.js

@@ -0,0 +1,13 @@
+import {
+  FormGroup,
+  useFormGroup
+} from "../__chunks/KO6UUYKG.js";
+import "../__chunks/SG5D3YRB.js";
+import "../__chunks/F5VAC7MB.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  FormGroup,
+  useFormGroup
+};

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

@@ -0,0 +1,37 @@
+import type { FocusableOptions } from "../focusable/focusable.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormFieldOptions } from "./form-field.js";
+/**
+ * Returns props to create a `FormInput` component. Unlike `useFormField`, this
+ * hook returns the `value` and `onChange` props that can be passed to a native
+ * input, select or textarea elements.
+ * @see https://ariakit.org/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 as="input" {...props} />
+ * </Form>
+ * ```
+ */
+export declare const useFormInput: import("../utils/types.js").Hook<FormInputOptions<"input">>;
+/**
+ * Renders a form input. Unlike `FormField`, this component passes the `value`
+ * and `onChange` props down to the underlying element that can be a native
+ * input, select or textarea elements.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({ defaultValues: { email: "" } });
+ * <Form store={form}>
+ *   <FormLabel name={form.names.email}>Email</FormLabel>
+ *   <FormInput name={form.names.email} />
+ * </Form>
+ * ```
+ */
+export declare const FormInput: import("../utils/types.js").Component<FormInputOptions<"input">>;
+export interface FormInputOptions<T extends As = "input"> extends FormFieldOptions<T>, FocusableOptions<T> {
+}
+export type FormInputProps<T extends As = "input"> = Props<FormInputOptions<T>>;