@ariakit/react-components 0.1.0

package/dist/focusable/focusable.js

@@ -0,0 +1,273 @@
+"use client";
+import { FocusableContext } from "./focusable-context.js";
+import { createElement, createHook, forwardRef, useEvent, useMergeRefs, useMetadataProps, useTagName } from "@ariakit/react-utils";
+import { addGlobalEventListener, disabledFromProps, hasFocus, isFocusEventOutside, isFocusable, isSafari, isSelfTarget, queueBeforeEvent, removeUndefinedValues } from "@ariakit/utils";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+//#region src/focusable/focusable.tsx
+const TagName = "div";
+const accessibleWhenDisabledSymbol = Symbol("accessibleWhenDisabled");
+const isSafariBrowser = isSafari();
+const alwaysFocusVisibleInputTypes = [
+	"text",
+	"search",
+	"url",
+	"tel",
+	"email",
+	"password",
+	"number",
+	"date",
+	"month",
+	"week",
+	"time",
+	"datetime",
+	"datetime-local"
+];
+function isAlwaysFocusVisible(element) {
+	const { tagName, readOnly, type } = element;
+	if (tagName === "TEXTAREA" && !readOnly) return true;
+	if (tagName === "SELECT" && !readOnly) return true;
+	if (tagName === "INPUT" && !readOnly) return alwaysFocusVisibleInputTypes.includes(type);
+	if (element.isContentEditable) return true;
+	if (element.getAttribute("role") === "combobox" && element.dataset.name) return true;
+	return false;
+}
+function isNativeTabbable(tagName) {
+	if (!tagName) return true;
+	return tagName === "button" || tagName === "summary" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a";
+}
+function supportsDisabledAttribute(tagName) {
+	if (!tagName) return true;
+	return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea";
+}
+const buttonInputTypes = [
+	"button",
+	"color",
+	"file",
+	"image",
+	"reset",
+	"submit"
+];
+function needsSafariTabIndex(tagName, inputType) {
+	if (tagName === "button") return true;
+	if (tagName === "input" && inputType) {
+		if (inputType === "checkbox" || inputType === "radio") return true;
+		return buttonInputTypes.includes(inputType);
+	}
+	return false;
+}
+function getTabIndex({ focusable, trulyDisabled, nativeTabbable, supportsDisabled, safariTabIndex, tabIndexProp }) {
+	if (!focusable) return tabIndexProp;
+	if (trulyDisabled) {
+		if (nativeTabbable && !supportsDisabled) return -1;
+		return;
+	}
+	if (nativeTabbable) {
+		if (safariTabIndex && tabIndexProp == null) return 0;
+		return tabIndexProp;
+	}
+	return tabIndexProp ?? 0;
+}
+function useDisableEvent(onEvent, disabled) {
+	return useEvent((event) => {
+		onEvent?.(event);
+		if (event.defaultPrevented) return;
+		if (disabled) {
+			event.stopPropagation();
+			event.preventDefault();
+		}
+	});
+}
+let hasInstalledGlobalEventListeners = false;
+let isKeyboardModality = true;
+function onGlobalMouseDown(event) {
+	const target = event.target;
+	if (target && "hasAttribute" in target) {
+		if (!target.hasAttribute("data-focus-visible")) isKeyboardModality = false;
+	}
+}
+function onGlobalKeyDown(event) {
+	if (event.metaKey) return;
+	if (event.ctrlKey) return;
+	if (event.altKey) return;
+	isKeyboardModality = true;
+}
+/**
+* Returns props to create a `Focusable` component.
+* @see https://ariakit.com/components/focusable
+* @example
+* ```jsx
+* const props = useFocusable();
+* <Role {...props}>Focusable</Role>
+* ```
+*/
+const useFocusable = createHook(function useFocusable({ focusable = true, accessibleWhenDisabled, autoFocus, onFocusVisible, ...props }) {
+	const ref = useRef(null);
+	const [parentAccessibleWhenDisabled, metadataProps] = useMetadataProps(props, accessibleWhenDisabledSymbol, accessibleWhenDisabled);
+	accessibleWhenDisabled ??= parentAccessibleWhenDisabled;
+	useEffect(() => {
+		if (!focusable) return;
+		if (hasInstalledGlobalEventListeners) return;
+		addGlobalEventListener("mousedown", onGlobalMouseDown, true);
+		addGlobalEventListener("keydown", onGlobalKeyDown, true);
+		hasInstalledGlobalEventListeners = true;
+	}, [focusable]);
+	const disabled = focusable && disabledFromProps(props);
+	const trulyDisabled = disabled && !accessibleWhenDisabled;
+	const [focusVisible, setFocusVisible] = useState(false);
+	useEffect(() => {
+		if (!focusable) return;
+		if (trulyDisabled && focusVisible) setFocusVisible(false);
+	}, [
+		focusable,
+		trulyDisabled,
+		focusVisible
+	]);
+	useEffect(() => {
+		if (!focusable) return;
+		if (!focusVisible) return;
+		const element = ref.current;
+		if (!element) return;
+		if (typeof IntersectionObserver === "undefined") return;
+		const observer = new IntersectionObserver(() => {
+			if (!isFocusable(element)) setFocusVisible(false);
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [focusable, focusVisible]);
+	const onKeyPressCapture = useDisableEvent(props.onKeyPressCapture, disabled);
+	const onMouseDownCapture = useDisableEvent(props.onMouseDownCapture, disabled);
+	const onClickCapture = useDisableEvent(props.onClickCapture, disabled);
+	const handleFocusVisible = (event, currentTarget) => {
+		if (currentTarget) event.currentTarget = currentTarget;
+		if (!focusable) return;
+		const element = event.currentTarget;
+		if (!element) return;
+		if (!hasFocus(element)) return;
+		onFocusVisible?.(event);
+		if (event.defaultPrevented) return;
+		element.dataset.focusVisible = "true";
+		setFocusVisible(true);
+	};
+	const onKeyDownCaptureProp = props.onKeyDownCapture;
+	const onKeyDownCapture = useEvent((event) => {
+		onKeyDownCaptureProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!focusable) return;
+		if (focusVisible) return;
+		if (event.metaKey) return;
+		if (event.altKey) return;
+		if (event.ctrlKey) return;
+		if (!isSelfTarget(event)) return;
+		const element = event.currentTarget;
+		const applyFocusVisible = () => handleFocusVisible(event, element);
+		queueBeforeEvent(element, "focusout", applyFocusVisible);
+	});
+	const onFocusCaptureProp = props.onFocusCapture;
+	const onFocusCapture = useEvent((event) => {
+		onFocusCaptureProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!focusable) return;
+		if (!isSelfTarget(event)) {
+			setFocusVisible(false);
+			return;
+		}
+		const element = event.currentTarget;
+		const applyFocusVisible = () => handleFocusVisible(event, element);
+		if (isKeyboardModality || isAlwaysFocusVisible(event.target)) queueBeforeEvent(event.target, "focusout", applyFocusVisible);
+		else setFocusVisible(false);
+	});
+	const onBlurProp = props.onBlur;
+	const onBlur = useEvent((event) => {
+		onBlurProp?.(event);
+		if (!focusable) return;
+		if (!isFocusEventOutside(event)) return;
+		event.currentTarget.removeAttribute("data-focus-visible");
+		setFocusVisible(false);
+	});
+	const autoFocusOnShow = useContext(FocusableContext);
+	const autoFocusRef = useEvent((element) => {
+		if (!focusable) return;
+		if (!autoFocus) return;
+		if (!element) return;
+		if (!autoFocusOnShow) return;
+		queueMicrotask(() => {
+			if (hasFocus(element)) return;
+			if (!isFocusable(element)) return;
+			element.focus();
+		});
+	});
+	const tagName = useTagName(ref);
+	const nativeTabbable = focusable && isNativeTabbable(tagName);
+	const supportsDisabled = focusable && supportsDisabledAttribute(tagName);
+	const [safariTabIndex, setSafariTabIndex] = useState(false);
+	if (isSafariBrowser) useEffect(() => {
+		if (!focusable) return;
+		const element = ref.current;
+		if (!element) return;
+		const tag = element.tagName.toLowerCase();
+		const type = element.type;
+		setSafariTabIndex(needsSafariTabIndex(tag, type));
+	}, [focusable]);
+	const styleProp = props.style;
+	const style = useMemo(() => {
+		if (trulyDisabled) return {
+			pointerEvents: "none",
+			...styleProp
+		};
+		return styleProp;
+	}, [trulyDisabled, styleProp]);
+	props = {
+		"data-focus-visible": focusable && focusVisible || void 0,
+		"data-autofocus": autoFocus || void 0,
+		"aria-disabled": disabled || void 0,
+		...props,
+		...metadataProps,
+		ref: useMergeRefs(ref, autoFocusRef, props.ref),
+		style,
+		tabIndex: getTabIndex({
+			focusable,
+			trulyDisabled,
+			nativeTabbable,
+			supportsDisabled,
+			safariTabIndex,
+			tabIndexProp: props.tabIndex
+		}),
+		disabled: supportsDisabled && trulyDisabled ? true : void 0,
+		contentEditable: disabled ? void 0 : props.contentEditable,
+		onKeyPressCapture,
+		onClickCapture,
+		onMouseDownCapture,
+		onKeyDownCapture,
+		onFocusCapture,
+		onBlur
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a focusable element. When this element gains keyboard focus, it gets
+* a
+* [`data-focus-visible`](https://ariakit.com/guide/styling#data-focus-visible)
+* attribute and triggers the
+* [`onFocusVisible`](https://ariakit.com/reference/focusable#onfocusvisible)
+* prop.
+*
+* The `Focusable` component supports the
+* [`disabled`](https://ariakit.com/reference/focusable#disabled) prop for all
+* elements, even those not supporting the native `disabled` attribute. Disabled
+* elements using the `Focusable` component may be still accessible via keyboard
+* by using the the
+* [`accessibleWhenDisabled`](https://ariakit.com/reference/focusable#accessiblewhendisabled)
+* prop.
+* @see https://ariakit.com/components/focusable
+* @example
+* ```jsx
+* <Focusable>Focusable</Focusable>
+* ```
+*/
+const Focusable = forwardRef(function Focusable(props) {
+	return createElement(TagName, useFocusable(props));
+});
+//#endregion
+export { Focusable, useFocusable };
+
+//# sourceMappingURL=focusable.js.map

package/dist/focusable/focusable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable.js","names":[],"sources":["../../src/focusable/focusable.tsx"],"sourcesContent":["import {\n  useEvent,\n  useMergeRefs,\n  useMetadataProps,\n  useTagName,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  addGlobalEventListener,\n  isFocusEventOutside,\n  isSelfTarget,\n  queueBeforeEvent,\n  hasFocus,\n  isFocusable,\n  disabledFromProps,\n  removeUndefinedValues,\n  isSafari,\n} from \"@ariakit/utils\";\nimport type { BivariantCallback } from \"@ariakit/utils\";\nimport type {\n  ElementType,\n  EventHandler,\n  FocusEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  SyntheticEvent,\n} from \"react\";\nimport { useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport { FocusableContext } from \"./focusable-context.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nconst accessibleWhenDisabledSymbol = Symbol(\"accessibleWhenDisabled\");\n\nconst isSafariBrowser = isSafari();\n\nconst alwaysFocusVisibleInputTypes = [\n  \"text\",\n  \"search\",\n  \"url\",\n  \"tel\",\n  \"email\",\n  \"password\",\n  \"number\",\n  \"date\",\n  \"month\",\n  \"week\",\n  \"time\",\n  \"datetime\",\n  \"datetime-local\",\n];\n\nfunction isAlwaysFocusVisible(element: HTMLElement) {\n  const { tagName, readOnly, type } = element as HTMLInputElement;\n  if (tagName === \"TEXTAREA\" && !readOnly) return true;\n  if (tagName === \"SELECT\" && !readOnly) return true;\n  if (tagName === \"INPUT\" && !readOnly) {\n    return alwaysFocusVisibleInputTypes.includes(type);\n  }\n  if (element.isContentEditable) return true;\n  // Take into account custom Ariakit Select within a form.\n  const role = element.getAttribute(\"role\");\n  if (role === \"combobox\" && element.dataset.name) {\n    return true;\n  }\n  return false;\n}\n\nfunction isNativeTabbable(tagName?: string) {\n  if (!tagName) return true;\n  return (\n    tagName === \"button\" ||\n    tagName === \"summary\" ||\n    tagName === \"input\" ||\n    tagName === \"select\" ||\n    tagName === \"textarea\" ||\n    tagName === \"a\"\n  );\n}\n\nfunction supportsDisabledAttribute(tagName?: string) {\n  if (!tagName) return true;\n  return (\n    tagName === \"button\" ||\n    tagName === \"input\" ||\n    tagName === \"select\" ||\n    tagName === \"textarea\"\n  );\n}\n\ninterface GetTabIndexParams {\n  focusable: boolean;\n  trulyDisabled: boolean;\n  nativeTabbable: boolean;\n  supportsDisabled: boolean;\n  safariTabIndex: boolean;\n  tabIndexProp?: number;\n}\n\nconst buttonInputTypes = [\n  \"button\",\n  \"color\",\n  \"file\",\n  \"image\",\n  \"reset\",\n  \"submit\",\n];\n\nfunction needsSafariTabIndex(tagName?: string, inputType?: string) {\n  if (tagName === \"button\") return true;\n  if (tagName === \"input\" && inputType) {\n    if (inputType === \"checkbox\" || inputType === \"radio\") return true;\n    return buttonInputTypes.includes(inputType);\n  }\n  return false;\n}\n\nfunction getTabIndex({\n  focusable,\n  trulyDisabled,\n  nativeTabbable,\n  supportsDisabled,\n  safariTabIndex,\n  tabIndexProp,\n}: GetTabIndexParams) {\n  if (!focusable) return tabIndexProp;\n  if (trulyDisabled) {\n    if (nativeTabbable && !supportsDisabled) {\n      // Anchor, audio and video tags don't support the `disabled` attribute.\n      // We must pass tabIndex={-1} so they don't receive focus on tab.\n      return -1;\n    }\n    // Elements that support the `disabled` attribute don't need tabIndex.\n    return;\n  }\n  if (nativeTabbable) {\n    // On Safari, buttons and button-like inputs (checkboxes, radios, submit,\n    // reset, etc.) require an explicit tabIndex to receive focus on mousedown.\n    if (safariTabIndex && tabIndexProp == null) {\n      return 0;\n    }\n    return tabIndexProp;\n  }\n  // If the element is enabled and is not natively tabbable, we have to\n  // fallback tabIndex={0}.\n  return tabIndexProp ?? 0;\n}\n\nfunction useDisableEvent(\n  onEvent?: EventHandler<SyntheticEvent>,\n  disabled?: boolean,\n) {\n  return useEvent((event: SyntheticEvent) => {\n    onEvent?.(event);\n    if (event.defaultPrevented) return;\n    if (disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  });\n}\n\nlet hasInstalledGlobalEventListeners = false;\n\n// isKeyboardModality should be true by default.\nlet isKeyboardModality = true;\n\nfunction onGlobalMouseDown(event: MouseEvent) {\n  const target = event.target as HTMLElement | EventTarget | null;\n  if (target && \"hasAttribute\" in target) {\n    // If the target element is already focus-visible, we keep the keyboard\n    // modality.\n    if (!target.hasAttribute(\"data-focus-visible\")) {\n      isKeyboardModality = false;\n    }\n  }\n}\n\nfunction onGlobalKeyDown(event: KeyboardEvent) {\n  if (event.metaKey) return;\n  if (event.ctrlKey) return;\n  if (event.altKey) return;\n  isKeyboardModality = true;\n}\n\n/**\n * Returns props to create a `Focusable` component.\n * @see https://ariakit.com/components/focusable\n * @example\n * ```jsx\n * const props = useFocusable();\n * <Role {...props}>Focusable</Role>\n * ```\n */\nexport const useFocusable = createHook<TagName, FocusableOptions>(\n  function useFocusable({\n    focusable = true,\n    accessibleWhenDisabled,\n    autoFocus,\n    onFocusVisible,\n    ...props\n  }) {\n    const ref = useRef<HTMLType>(null);\n    const [parentAccessibleWhenDisabled, metadataProps] = useMetadataProps(\n      props,\n      accessibleWhenDisabledSymbol,\n      accessibleWhenDisabled,\n    );\n    accessibleWhenDisabled ??= parentAccessibleWhenDisabled;\n\n    // Add global event listeners to determine whether the user is using a\n    // keyboard to navigate the site or not.\n    useEffect(() => {\n      if (!focusable) return;\n      if (hasInstalledGlobalEventListeners) return;\n      addGlobalEventListener(\"mousedown\", onGlobalMouseDown, true);\n      addGlobalEventListener(\"keydown\", onGlobalKeyDown, true);\n      hasInstalledGlobalEventListeners = true;\n    }, [focusable]);\n\n    const disabled = focusable && disabledFromProps(props);\n    const trulyDisabled = disabled && !accessibleWhenDisabled;\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    // When the focusable element is disabled, it doesn't trigger a blur event\n    // so we can't set focusVisible to false there. Instead, we have to do it\n    // here by checking the element's disabled attribute.\n    useEffect(() => {\n      if (!focusable) return;\n      if (trulyDisabled && focusVisible) {\n        setFocusVisible(false);\n      }\n    }, [focusable, trulyDisabled, focusVisible]);\n\n    // When an element that has focus becomes hidden, it doesn't trigger a blur\n    // event so we can't set focusVisible to false there. We observe the element\n    // and check if it's still focusable. Otherwise, we set focusVisible to\n    // false.\n    useEffect(() => {\n      if (!focusable) return;\n      if (!focusVisible) return;\n      const element = ref.current;\n      if (!element) return;\n      if (typeof IntersectionObserver === \"undefined\") return;\n      const observer = new IntersectionObserver(() => {\n        if (!isFocusable(element)) {\n          setFocusVisible(false);\n        }\n      });\n      observer.observe(element);\n      return () => observer.disconnect();\n    }, [focusable, focusVisible]);\n\n    // Disable events when the element is disabled.\n    const onKeyPressCapture = useDisableEvent(\n      props.onKeyPressCapture,\n      disabled,\n    );\n    const onMouseDownCapture = useDisableEvent(\n      props.onMouseDownCapture,\n      disabled,\n    );\n    const onClickCapture = useDisableEvent(props.onClickCapture, disabled);\n\n    const handleFocusVisible = (\n      event: SyntheticEvent<HTMLType>,\n      currentTarget?: HTMLType,\n    ) => {\n      if (currentTarget) {\n        event.currentTarget = currentTarget;\n      }\n      if (!focusable) return;\n      const element = event.currentTarget;\n      if (!element) return;\n      // Some extensions like 1password dispatches some keydown events on\n      // autofill and immediately moves focus to the next field. That's why we\n      // need to check if the current element is still focused.\n      if (!hasFocus(element)) return;\n      onFocusVisible?.(event);\n      if (event.defaultPrevented) return;\n      // Make sure data-focus-visible is applied visually at the same time as\n      // other data attributes like data-active-item. See\n      // https://github.com/ariakit/ariakit/issues/4083\n      element.dataset.focusVisible = \"true\";\n      setFocusVisible(true);\n    };\n\n    const onKeyDownCaptureProp = props.onKeyDownCapture;\n\n    const onKeyDownCapture = useEvent((event: ReactKeyboardEvent<HTMLType>) => {\n      onKeyDownCaptureProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!focusable) return;\n      if (focusVisible) return;\n      if (event.metaKey) return;\n      if (event.altKey) return;\n      if (event.ctrlKey) return;\n      if (!isSelfTarget(event)) return;\n      const element = event.currentTarget;\n      const applyFocusVisible = () => handleFocusVisible(event, element);\n      queueBeforeEvent(element, \"focusout\", applyFocusVisible);\n    });\n\n    const onFocusCaptureProp = props.onFocusCapture;\n\n    const onFocusCapture = useEvent((event: FocusEvent<HTMLType>) => {\n      onFocusCaptureProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!focusable) return;\n      if (!isSelfTarget(event)) {\n        setFocusVisible(false);\n        return;\n      }\n      const element = event.currentTarget;\n      const applyFocusVisible = () => handleFocusVisible(event, element);\n      if (isKeyboardModality || isAlwaysFocusVisible(event.target)) {\n        queueBeforeEvent(event.target, \"focusout\", applyFocusVisible);\n      } else {\n        setFocusVisible(false);\n      }\n    });\n\n    const onBlurProp = props.onBlur;\n\n    // Note: Can't use onBlurCapture here otherwise it will not work with\n    // CompositeItem's with the virtualFocus state set to true.\n    const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n      onBlurProp?.(event);\n      if (!focusable) return;\n      if (!isFocusEventOutside(event)) return;\n      // Since we set the data-focus-visible attribute on the element in the\n      // handleFocusVisible function, we remove it directly here. Otherwise, the\n      // attribute might not be removed on lower-end devices.\n      event.currentTarget.removeAttribute(\"data-focus-visible\");\n      setFocusVisible(false);\n    });\n\n    const autoFocusOnShow = useContext(FocusableContext);\n\n    // The native autoFocus prop is problematic in many ways. For example, when\n    // an element has the native autofocus attribute, the focus event will be\n    // triggered before React effects (even layout effects) and before refs are\n    // assigned. This means we won't have access to the element's ref or\n    // anything else that's set up by React effects on the onFocus event. So we\n    // don't pass the autoFocus prop to the element and instead manually focus\n    // the element when it's mounted. The order in which this effect runs also\n    // matters. See\n    // https://x.com/diegohaz/status/1408180632933388289\n    const autoFocusRef = useEvent((element: HTMLElement | null) => {\n      if (!focusable) return;\n      if (!autoFocus) return;\n      if (!element) return;\n      if (!autoFocusOnShow) return;\n      // We have to queue focus so other effects and refs can be applied first.\n      // See select-animated example.\n      queueMicrotask(() => {\n        if (hasFocus(element)) return;\n        if (!isFocusable(element)) return;\n        element.focus();\n      });\n    });\n\n    const tagName = useTagName(ref);\n    const nativeTabbable = focusable && isNativeTabbable(tagName);\n    const supportsDisabled = focusable && supportsDisabledAttribute(tagName);\n\n    // On Safari, buttons and button-like inputs don't receive focus on\n    // mousedown. We detect this from the DOM element (not props) so it works\n    // with render={<input type=\"submit\" />} and custom components.\n    const [safariTabIndex, setSafariTabIndex] = useState(false);\n\n    if (isSafariBrowser) {\n      useEffect(() => {\n        if (!focusable) return;\n        const element = ref.current;\n        if (!element) return;\n        const tag = element.tagName.toLowerCase();\n        const type = (element as HTMLInputElement).type;\n        setSafariTabIndex(needsSafariTabIndex(tag, type));\n      }, [focusable]);\n    }\n\n    const styleProp = props.style;\n    const style = useMemo(() => {\n      if (trulyDisabled) {\n        return { pointerEvents: \"none\" as const, ...styleProp };\n      }\n      return styleProp;\n    }, [trulyDisabled, styleProp]);\n\n    props = {\n      \"data-focus-visible\": (focusable && focusVisible) || undefined,\n      \"data-autofocus\": autoFocus || undefined,\n      \"aria-disabled\": disabled || undefined,\n      ...props,\n      ...metadataProps,\n      ref: useMergeRefs(ref, autoFocusRef, props.ref),\n      style,\n      tabIndex: getTabIndex({\n        focusable,\n        trulyDisabled,\n        nativeTabbable,\n        supportsDisabled,\n        safariTabIndex,\n        tabIndexProp: props.tabIndex,\n      }),\n      disabled: supportsDisabled && trulyDisabled ? true : undefined,\n      // TODO: Test Focusable contentEditable.\n      contentEditable: disabled ? undefined : props.contentEditable,\n      onKeyPressCapture,\n      onClickCapture,\n      onMouseDownCapture,\n      onKeyDownCapture,\n      onFocusCapture,\n      onBlur,\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders a focusable element. When this element gains keyboard focus, it gets\n * a\n * [`data-focus-visible`](https://ariakit.com/guide/styling#data-focus-visible)\n * attribute and triggers the\n * [`onFocusVisible`](https://ariakit.com/reference/focusable#onfocusvisible)\n * prop.\n *\n * The `Focusable` component supports the\n * [`disabled`](https://ariakit.com/reference/focusable#disabled) prop for all\n * elements, even those not supporting the native `disabled` attribute. Disabled\n * elements using the `Focusable` component may be still accessible via keyboard\n * by using the the\n * [`accessibleWhenDisabled`](https://ariakit.com/reference/focusable#accessiblewhendisabled)\n * prop.\n * @see https://ariakit.com/components/focusable\n * @example\n * ```jsx\n * <Focusable>Focusable</Focusable>\n * ```\n */\nexport const Focusable = forwardRef(function Focusable(props: FocusableProps) {\n  const htmlProps = useFocusable(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FocusableOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Determines if the element is disabled. This sets the `aria-disabled`\n   * attribute accordingly, enabling support for all elements, including those\n   * that don't support the native `disabled` attribute.\n   *\n   * This feature can be combined with the\n   * [`accessibleWhenDisabled`](https://ariakit.com/reference/focusable#accessiblewhendisabled)\n   * prop to make disabled elements still accessible via keyboard.\n   *\n   * **Note**: For this prop to work, the\n   * [`focusable`](https://ariakit.com/reference/command#focusable) prop must be\n   * set to `true`, if it's not set by default.\n   *\n   * Live examples:\n   * - [Submenu](https://ariakit.com/examples/menu-nested)\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * - [Context Menu](https://ariakit.com/examples/menu-context-menu)\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Automatically focuses the element upon mounting, similar to the native\n   * `autoFocus` prop. This addresses an issue where the element with the native\n   * `autoFocus` attribute might receive focus before React effects are\n   * executed.\n   *\n   * The `autoFocus` prop can also be used with\n   * [Focusable](https://ariakit.com/components/focusable) elements within a\n   * [Dialog](https://ariakit.com/components/dialog) component, establishing the\n   * initial focus as the dialog opens.\n   *\n   * **Note**: For this prop to work, the\n   * [`focusable`](https://ariakit.com/reference/command#focusable) prop must be\n   * set to `true`, if it's not set by default.\n   *\n   * Live examples:\n   * - [Warning on Dialog\n   *   hide](https://ariakit.com/examples/dialog-hide-warning)\n   * - [Dialog with React\n   *   Router](https://ariakit.com/examples/dialog-react-router)\n   * - [Nested Dialog](https://ariakit.com/examples/dialog-nested)\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Determines if [Focusable](https://ariakit.com/components/focusable)\n   * features should be active on non-native focusable elements.\n   *\n   * **Note**: This prop only turns off the additional features provided by the\n   * [`Focusable`](https://ariakit.com/reference/focusable) component.\n   * Non-native focusable elements will lose their focusability entirely.\n   * However, native focusable elements will retain their inherent focusability,\n   * but without added features such as improved\n   * [`autoFocus`](https://ariakit.com/reference/focusable#autofocus),\n   * [`accessibleWhenDisabled`](https://ariakit.com/reference/focusable#accessiblewhendisabled),\n   * [`onFocusVisible`](https://ariakit.com/reference/focusable#onfocusvisible),\n   * etc.\n   * @default true\n   */\n  focusable?: boolean;\n  /**\n   * Indicates whether the element should be focusable even when it is\n   * [`disabled`](https://ariakit.com/reference/focusable#disabled).\n   *\n   * This is important when discoverability is a concern. For example:\n   *\n   * > A toolbar in an editor contains a set of special smart paste functions\n   * that are disabled when the clipboard is empty or when the function is not\n   * applicable to the current content of the clipboard. It could be helpful to\n   * keep the disabled buttons focusable if the ability to discover their\n   * functionality is primarily via their presence on the toolbar.\n   *\n   * Learn more on [Focusability of disabled\n   * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).\n   *\n   * Live examples:\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * - [Command Menu with\n   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)\n   */\n  accessibleWhenDisabled?: boolean;\n  /**\n   * Custom event handler invoked when the element gains focus through keyboard\n   * interaction or a key press occurs while the element is in focus. This is\n   * the programmatic equivalent of the\n   * [`data-focus-visible`](https://ariakit.com/guide/styling#data-focus-visible)\n   * attribute.\n   *\n   * **Note**: For this prop to work, the\n   * [`focusable`](https://ariakit.com/reference/command#focusable) prop must be\n   * set to `true`, if it's not set by default.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   * - [Custom Checkbox](https://ariakit.com/examples/checkbox-custom)\n   */\n  onFocusVisible?: BivariantCallback<\n    (event: SyntheticEvent<HTMLElement>) => void\n  >;\n}\n\nexport type FocusableProps<T extends ElementType = TagName> = Props<\n  T,\n  FocusableOptions<T>\n>;\n"],"mappings":"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"}

package/dist/focusable-B00tOxtB.d.ts

@@ -0,0 +1,142 @@
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType, SyntheticEvent } from "react";
+import { BivariantCallback } from "@ariakit/utils";
+
+//#region src/focusable/focusable.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Focusable` component.
+ * @see https://ariakit.com/components/focusable
+ * @example
+ * ```jsx
+ * const props = useFocusable();
+ * <Role {...props}>Focusable</Role>
+ * ```
+ */
+declare const useFocusable: import("@ariakit/react-utils").Hook<"div", FocusableOptions<"div">>;
+/**
+ * Renders a focusable element. When this element gains keyboard focus, it gets
+ * a
+ * [`data-focus-visible`](https://ariakit.com/guide/styling#data-focus-visible)
+ * attribute and triggers the
+ * [`onFocusVisible`](https://ariakit.com/reference/focusable#onfocusvisible)
+ * prop.
+ *
+ * The `Focusable` component supports the
+ * [`disabled`](https://ariakit.com/reference/focusable#disabled) prop for all
+ * elements, even those not supporting the native `disabled` attribute. Disabled
+ * elements using the `Focusable` component may be still accessible via keyboard
+ * by using the the
+ * [`accessibleWhenDisabled`](https://ariakit.com/reference/focusable#accessiblewhendisabled)
+ * prop.
+ * @see https://ariakit.com/components/focusable
+ * @example
+ * ```jsx
+ * <Focusable>Focusable</Focusable>
+ * ```
+ */
+declare const Focusable: (props: FocusableProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FocusableOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Determines if the element is disabled. This sets the `aria-disabled`
+   * attribute accordingly, enabling support for all elements, including those
+   * that don't support the native `disabled` attribute.
+   *
+   * This feature can be combined with the
+   * [`accessibleWhenDisabled`](https://ariakit.com/reference/focusable#accessiblewhendisabled)
+   * prop to make disabled elements still accessible via keyboard.
+   *
+   * **Note**: For this prop to work, the
+   * [`focusable`](https://ariakit.com/reference/command#focusable) prop must be
+   * set to `true`, if it's not set by default.
+   *
+   * Live examples:
+   * - [Submenu](https://ariakit.com/examples/menu-nested)
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * - [Context Menu](https://ariakit.com/examples/menu-context-menu)
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Automatically focuses the element upon mounting, similar to the native
+   * `autoFocus` prop. This addresses an issue where the element with the native
+   * `autoFocus` attribute might receive focus before React effects are
+   * executed.
+   *
+   * The `autoFocus` prop can also be used with
+   * [Focusable](https://ariakit.com/components/focusable) elements within a
+   * [Dialog](https://ariakit.com/components/dialog) component, establishing the
+   * initial focus as the dialog opens.
+   *
+   * **Note**: For this prop to work, the
+   * [`focusable`](https://ariakit.com/reference/command#focusable) prop must be
+   * set to `true`, if it's not set by default.
+   *
+   * Live examples:
+   * - [Warning on Dialog
+   *   hide](https://ariakit.com/examples/dialog-hide-warning)
+   * - [Dialog with React
+   *   Router](https://ariakit.com/examples/dialog-react-router)
+   * - [Nested Dialog](https://ariakit.com/examples/dialog-nested)
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Determines if [Focusable](https://ariakit.com/components/focusable)
+   * features should be active on non-native focusable elements.
+   *
+   * **Note**: This prop only turns off the additional features provided by the
+   * [`Focusable`](https://ariakit.com/reference/focusable) component.
+   * Non-native focusable elements will lose their focusability entirely.
+   * However, native focusable elements will retain their inherent focusability,
+   * but without added features such as improved
+   * [`autoFocus`](https://ariakit.com/reference/focusable#autofocus),
+   * [`accessibleWhenDisabled`](https://ariakit.com/reference/focusable#accessiblewhendisabled),
+   * [`onFocusVisible`](https://ariakit.com/reference/focusable#onfocusvisible),
+   * etc.
+   * @default true
+   */
+  focusable?: boolean;
+  /**
+   * Indicates whether the element should be focusable even when it is
+   * [`disabled`](https://ariakit.com/reference/focusable#disabled).
+   *
+   * This is important when discoverability is a concern. For example:
+   *
+   * > A toolbar in an editor contains a set of special smart paste functions
+   * that are disabled when the clipboard is empty or when the function is not
+   * applicable to the current content of the clipboard. It could be helpful to
+   * keep the disabled buttons focusable if the ability to discover their
+   * functionality is primarily via their presence on the toolbar.
+   *
+   * Learn more on [Focusability of disabled
+   * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+   *
+   * Live examples:
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * - [Command Menu with
+   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
+   */
+  accessibleWhenDisabled?: boolean;
+  /**
+   * Custom event handler invoked when the element gains focus through keyboard
+   * interaction or a key press occurs while the element is in focus. This is
+   * the programmatic equivalent of the
+   * [`data-focus-visible`](https://ariakit.com/guide/styling#data-focus-visible)
+   * attribute.
+   *
+   * **Note**: For this prop to work, the
+   * [`focusable`](https://ariakit.com/reference/command#focusable) prop must be
+   * set to `true`, if it's not set by default.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Custom Checkbox](https://ariakit.com/examples/checkbox-custom)
+   */
+  onFocusVisible?: BivariantCallback<(event: SyntheticEvent<HTMLElement>) => void>;
+}
+type FocusableProps<T extends ElementType = TagName> = Props<T, FocusableOptions<T>>;
+//#endregion
+export { useFocusable as i, FocusableOptions as n, FocusableProps as r, Focusable as t };
+//# sourceMappingURL=focusable-B00tOxtB.d.ts.map

package/dist/focusable-B00tOxtB.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable-B00tOxtB.d.ts","names":["Options","Props","BivariantCallback","ElementType","SyntheticEvent","TagName","useFocusable","FocusableOptions","Hook","Focusable","FocusableProps","props","ReactElement","JSXElementConstructor","_T","HTMLElement","disabled","autoFocus","focusable","accessibleWhenDisabled","onFocusVisible","event","T"],"sources":["../src/focusable/focusable.d.ts"],"mappings":";;;;;cAGcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AADoC,cAYpCC,YAAAA,iCAA6CE,IAAAA,QAAYD,gBAAgB;AAA9F;;;;AAA8F;AAsB9F;;;;;;;;;AAA2I;AAC3I;;;;;;AAvBA,cAsBqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,YAA4BJ,WAAAA,GAAcE,OAAAA,UAAiBL,OAAAA;EAAAA;;;;;;;;;;;;;;;;;AAiGF;AAE1E;EA/EIgB,QAAAA;EA+EsBM;;;;;;;;;;;;;;;;;AAA+D;;;;;;EAvDrFL,SAAAA;;;;;;;;;;;;;;;;EAgBAC,SAAAA;;;;;;;;;;;;;;;;;;;;;EAqBAC,sBAAAA;;;;;;;;;;;;;;;;EAgBAC,cAAAA,GAAiBlB,iBAAAA,EAAmBmB,KAAAA,EAAOjB,cAAAA,CAAeW,WAAAA;AAAAA;AAAAA,KAElDL,cAAAA,WAAyBP,WAAAA,GAAcE,OAAAA,IAAWJ,KAAAA,CAAMqB,CAAAA,EAAGf,gBAAAA,CAAiBe,CAAAA"}

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

@@ -0,0 +1,50 @@
+import { CheckboxOptions } from "../checkbox/checkbox.js";
+import { FormControlOptions } from "./form-control.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/form/form-checkbox.d.ts
+declare const TagName = "input";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormCheckbox` component.
+ * @see https://ariakit.com/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>
+ * ```
+ */
+declare const useFormCheckbox: import("@ariakit/react-utils").Hook<"input", FormCheckboxOptions<"input">>;
+/**
+ * Renders a checkbox input as a form control, representing a boolean, string,
+ * number, or array value.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {9}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     acceptTerms: false,
+ *   },
+ * });
+ *
+ * <Form store={form}>
+ *   <label>
+ *     <FormCheckbox name={form.names.acceptTerms} />
+ *     Accept terms
+ *   </label>
+ * </Form>
+ * ```
+ */
+declare const FormCheckbox: (props: FormCheckboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormCheckboxOptions<T extends ElementType = TagName> extends FormControlOptions<T>, Omit<CheckboxOptions<T>, "store" | "name"> {}
+type FormCheckboxProps<T extends ElementType = TagName> = Props<T, FormCheckboxOptions<T>>;
+//#endregion
+export { FormCheckbox, FormCheckboxOptions, FormCheckboxProps, useFormCheckbox };
+//# sourceMappingURL=form-checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-checkbox.d.ts","names":["Props","ElementType","CheckboxOptions","FormControlOptions","TagName","useFormCheckbox","FormCheckboxOptions","Hook","FormCheckbox","FormCheckboxProps","props","ReactElement","JSXElementConstructor","T","Omit"],"sources":["../../src/form/form-checkbox.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAgB7B;;;;AAAsG;AAlBzC,cAkBxCC,eAAAA,iCAAgDE,IAAAA,UAAcD,mBAAmB;;;;;;;;;AAqB2C;AACjJ;;;;;;;;;;;cADqBE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC3GN,mBAAAA,WAA8BL,WAAAA,GAAcG,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA,GAAIC,IAAAA,CAAKZ,eAAAA,CAAgBW,CAAAA;AAAAA,KAE9GJ,iBAAAA,WAA4BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,mBAAAA,CAAoBO,CAAAA"}

package/dist/form/form-checkbox.js

@@ -0,0 +1,73 @@
+"use client";
+import { useCheckboxStore } from "../checkbox/checkbox-store.js";
+import { useCheckbox } from "../checkbox/checkbox.js";
+import { useFormContext } from "./form-context.js";
+import { useFormControl } from "./form-control.js";
+import { createElement, createHook, forwardRef, memo } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+//#region src/form/form-checkbox.tsx
+const TagName = "input";
+/**
+* Returns props to create a `FormCheckbox` component.
+* @see https://ariakit.com/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>
+* ```
+*/
+const useFormCheckbox = createHook(function useFormCheckbox({ store, name: nameProp, value, checked, defaultChecked, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormCheckbox must be wrapped in a Form component.");
+	const name = String(nameProp);
+	props = useCheckbox({
+		store: useCheckboxStore({
+			value: store.useValue(name),
+			setValue: (value) => store?.setValue(name, value)
+		}),
+		value,
+		checked,
+		...props
+	});
+	props = useFormControl({
+		store,
+		name,
+		"aria-labelledby": void 0,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a checkbox input as a form control, representing a boolean, string,
+* number, or array value.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {9}
+* const form = useFormStore({
+*   defaultValues: {
+*     acceptTerms: false,
+*   },
+* });
+*
+* <Form store={form}>
+*   <label>
+*     <FormCheckbox name={form.names.acceptTerms} />
+*     Accept terms
+*   </label>
+* </Form>
+* ```
+*/
+const FormCheckbox = memo(forwardRef(function FormCheckbox(props) {
+	return createElement(TagName, useFormCheckbox(props));
+}));
+//#endregion
+export { FormCheckbox, useFormCheckbox };
+
+//# sourceMappingURL=form-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-checkbox.js","names":[],"sources":["../../src/form/form-checkbox.tsx"],"sourcesContent":["import {\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useCheckboxStore } from \"../checkbox/checkbox-store.ts\";\nimport type { CheckboxOptions } from \"../checkbox/checkbox.tsx\";\nimport { useCheckbox } from \"../checkbox/checkbox.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormControlOptions } from \"./form-control.tsx\";\nimport { useFormControl } from \"./form-control.tsx\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FormCheckbox` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { acceptTerms: false } });\n * const props = useFormCheckbox({ store, name: store.names.acceptTerms });\n * <Form store={store}>\n *   <label>\n *     <Role {...props} />\n *     Accept terms\n *   </label>\n * </Form>\n * ```\n */\nexport const useFormCheckbox = createHook<TagName, FormCheckboxOptions>(\n  function useFormCheckbox({\n    store,\n    name: nameProp,\n    value,\n    checked,\n    defaultChecked,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormCheckbox must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n\n    const checkboxStore = useCheckboxStore({\n      value: store.useValue(name),\n      setValue: (value) => store?.setValue(name, value),\n    });\n\n    props = useCheckbox({ store: checkboxStore, value, checked, ...props });\n\n    props = useFormControl({\n      store,\n      name,\n      \"aria-labelledby\": undefined,\n      ...props,\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a checkbox input as a form control, representing a boolean, string,\n * number, or array value.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {9}\n * const form = useFormStore({\n *   defaultValues: {\n *     acceptTerms: false,\n *   },\n * });\n *\n * <Form store={form}>\n *   <label>\n *     <FormCheckbox name={form.names.acceptTerms} />\n *     Accept terms\n *   </label>\n * </Form>\n * ```\n */\nexport const FormCheckbox = memo(\n  forwardRef(function FormCheckbox(props: FormCheckboxProps) {\n    const htmlProps = useFormCheckbox(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormCheckboxOptions<T extends ElementType = TagName>\n  extends FormControlOptions<T>, Omit<CheckboxOptions<T>, \"store\" | \"name\"> {}\n\nexport type FormCheckboxProps<T extends ElementType = TagName> = Props<\n  T,\n  FormCheckboxOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;MA2CI,kBAAgB,WAAe,SAAA,gBAAA,EAAA,OAAA,MAAA,UAAA,OAAA,SAAA,gBAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAO,mDAAe;CAO5B,MAAA,OAAQ,OAAY,QAAA;SALE,YAAA;SACpB,iBAAsB;GACtB,OAAA,MAAW,SAAU,IAAA;GAGkB,WAAA,UAAA,OAAA,SAAA,MAAA,KAAA;EAAG,CAAA;EAAO;EAAS;EAAU,GAAA;CAEtE,CAAA;SACE,eAAA;EACA;EACA;EACA,mBAAG,KAAA;EACJ,GAAA;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;MAyBI,eAAO,KAAc,WADH,SAAA,aACqB,OAAA;CACxC,OACH,cAAA,SAAA,gBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,24 @@
+import { s as FormStoreValues, t as FormStore } from "../form-store-C4Kf5QHm.js";
+
+//#region src/form/form-context.d.ts
+/**
+ * Returns the form store from the nearest form container.
+ * @example
+ * function FormInput() {
+ *   const store = useFormContext();
+ *
+ *   if (!store) {
+ *     throw new Error("FormInput must be wrapped in FormProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+declare const useFormContext: () => FormStore<FormStoreValues> | undefined;
+declare const useFormScopedContext: (onlyScoped?: boolean) => FormStore<FormStoreValues> | undefined;
+declare const useFormProviderContext: () => FormStore<FormStoreValues> | undefined;
+declare const FormContextProvider: (props: import("react").ProviderProps<FormStore<FormStoreValues> | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const FormScopedContextProvider: (props: import("react").ProviderProps<FormStore<FormStoreValues> | undefined>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FormContextProvider, FormScopedContextProvider, useFormContext, useFormProviderContext, useFormScopedContext };
+//# sourceMappingURL=form-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-context.d.ts","names":["FormStore","useFormContext","_$__form_store_ts0","FormStoreValues","useFormScopedContext","onlyScoped","useFormProviderContext","FormContextProvider","ProviderProps","props","JSX","Element","FormScopedContextProvider"],"sources":["../../src/form/form-context.d.ts"],"mappings":";;;;;AAcA;;;;AAAoD;AACpD;;;;;;cADqBC,cAAAA,QAAsBD,SAAS,CAAuDE,eAAAA;AAAAA,cACtFE,oBAAAA,GAAuBC,UAAAA,eAAyBL,SAAS,CAAuDE,eAAAA;AAAAA,cAChHI,sBAAAA,QAA8BN,SAAS,CAAuDE,eAAAA;AAAAA,cAC9FK,mBAAAA,GAAsBE,KAAAA,kBAAuBD,aAAAA,CAAcR,SAAS,CAAoGE,eAAAA,+CAAXQ,GAAAA,CAAIC,OAAAA;AAAAA,cACjKC,yBAAAA,GAA4BH,KAAAA,kBAAuBD,aAAAA,CAAcR,SAAS,CAAoGE,eAAAA,+CAAXQ,GAAAA,CAAIC,OAAAA"}