@ariakit/react-components 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @ariakit/react-components
+
+## 0.1.0
+
+### Added component packages
+
+The internal component packages are now available under these names:
+
+- `@ariakit/components`
+- `@ariakit/react-components`
+- `@ariakit/solid-components`
+
+### Other updates
+
+- Fixed [`Menu`](https://ariakit.com/reference/menu) to respect the [`autoFocusOnShow`](https://ariakit.com/reference/menu#autofocusonshow) prop when set to `false` or when a callback returns `false`, while still allowing arrow keys to move focus into an already-open menu.
+- Updated dependencies: `@ariakit/components@0.1.0`, `@ariakit/utils@0.1.0`, `@ariakit/store@0.1.0`, `@ariakit/react-utils@0.1.0`, `@ariakit/react-store@0.1.0`
+
+## 0.0.0
+
+Initial release.

package/dist/button/button.d.ts

@@ -0,0 +1,2 @@
+import { i as useButton, n as ButtonOptions, r as ButtonProps, t as Button } from "../button-Cp853csH.js";
+export { Button, ButtonOptions, ButtonProps, useButton };

package/dist/button/button.js

@@ -0,0 +1,53 @@
+"use client";
+import { useCommand } from "../command/command.js";
+import { createElement, createHook, forwardRef, useMergeRefs, useTagName } from "@ariakit/react-utils";
+import { isButton } from "@ariakit/utils";
+import { useEffect, useRef, useState } from "react";
+//#region src/button/button.tsx
+const TagName = "button";
+/**
+* Returns props to create a `Button` component. If the element is not a native
+* button, the hook will return additional props to make sure it's accessible.
+* @see https://ariakit.com/components/button
+* @example
+* ```jsx
+* const props = useButton({ render: <div /> });
+* <Role {...props}>Accessible button</Role>
+* ```
+*/
+const useButton = createHook(function useButton(props) {
+	const ref = useRef(null);
+	const tagName = useTagName(ref, TagName);
+	const [isNativeButton, setIsNativeButton] = useState(() => !!tagName && isButton({
+		tagName,
+		type: props.type
+	}));
+	useEffect(() => {
+		if (!ref.current) return;
+		setIsNativeButton(isButton(ref.current));
+	}, []);
+	props = {
+		role: !isNativeButton && tagName !== "a" ? "button" : void 0,
+		...props,
+		ref: useMergeRefs(ref, props.ref)
+	};
+	props = useCommand(props);
+	return props;
+});
+/**
+* Renders an accessible button element. If the underlying element is not a
+* native button, this component will pass additional attributes to make sure
+* it's accessible.
+* @see https://ariakit.com/components/button
+* @example
+* ```jsx
+* <Button>Button</Button>
+* ```
+*/
+const Button = forwardRef(function Button(props) {
+	return createElement(TagName, useButton(props));
+});
+//#endregion
+export { Button, useButton };
+
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../src/button/button.tsx"],"sourcesContent":["import {\n  useMergeRefs,\n  useTagName,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { isButton } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { CommandOptions } from \"../command/command.tsx\";\nimport { useCommand } from \"../command/command.tsx\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `Button` component. If the element is not a native\n * button, the hook will return additional props to make sure it's accessible.\n * @see https://ariakit.com/components/button\n * @example\n * ```jsx\n * const props = useButton({ render: <div /> });\n * <Role {...props}>Accessible button</Role>\n * ```\n */\nexport const useButton = createHook<TagName, ButtonOptions>(\n  function useButton(props) {\n    const ref = useRef<HTMLType>(null);\n    const tagName = useTagName(ref, TagName);\n    const [isNativeButton, setIsNativeButton] = useState(\n      () => !!tagName && isButton({ tagName, type: props.type }),\n    );\n\n    useEffect(() => {\n      if (!ref.current) return;\n      setIsNativeButton(isButton(ref.current));\n    }, []);\n\n    props = {\n      role: !isNativeButton && tagName !== \"a\" ? \"button\" : undefined,\n      ...props,\n      ref: useMergeRefs(ref, props.ref),\n    };\n\n    props = useCommand(props);\n\n    return props;\n  },\n);\n\n/**\n * Renders an accessible button element. If the underlying element is not a\n * native button, this component will pass additional attributes to make sure\n * it's accessible.\n * @see https://ariakit.com/components/button\n * @example\n * ```jsx\n * <Button>Button</Button>\n * ```\n */\nexport const Button = forwardRef(function Button(props: ButtonProps) {\n  const htmlProps = useButton(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ButtonOptions<\n  T extends ElementType = TagName,\n> extends CommandOptions<T> {}\n\nexport type ButtonProps<T extends ElementType = TagName> = Props<\n  T,\n  ButtonOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;MA8BI,YAAY,WAAqB,SAAA,UAAA,OAAA;CACjC,MAAM,MAAA,OAAU,IAAA;CAChB,MAAM,UAAC,WAAgB,KAAA,OAAA;OACS,CAAA,gBAAA,qBAAA,eAAA,CAAA,CAAA,WAAA,SAAA;EAAS;EAAkB,MAC3D,MAAA;CAEA,CAAA,CAAA;iBACW;EACT,IAAA,CAAA,IAAA,SAAkB;EACpB,kBAAK,SAAA,IAAA,OAAA,CAAA;CAEL,GAAA,CAAA,CAAA;SACS;EACP,MAAG,CAAA,kBAAA,YAAA,MAAA,WAAA,KAAA;EACH,GAAA;EACF,KAAA,aAAA,KAAA,MAAA,GAAA;CAEA;CAEA,QAAO,WAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;MAcE,SAAO,WAAc,SADH,OAAU,OACW;CACxC,OAAA,cAAA,SAAA,UAAA,KAAA,CAAA"}

package/dist/button-Cp853csH.d.ts

@@ -0,0 +1,34 @@
+import { n as CommandOptions } from "./command-DckndCUK.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/button/button.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Button` component. If the element is not a native
+ * button, the hook will return additional props to make sure it's accessible.
+ * @see https://ariakit.com/components/button
+ * @example
+ * ```jsx
+ * const props = useButton({ render: <div /> });
+ * <Role {...props}>Accessible button</Role>
+ * ```
+ */
+declare const useButton: import("@ariakit/react-utils").Hook<"button", ButtonOptions<"button">>;
+/**
+ * Renders an accessible button element. If the underlying element is not a
+ * native button, this component will pass additional attributes to make sure
+ * it's accessible.
+ * @see https://ariakit.com/components/button
+ * @example
+ * ```jsx
+ * <Button>Button</Button>
+ * ```
+ */
+declare const Button: (props: ButtonProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ButtonOptions<T extends ElementType = TagName> extends CommandOptions<T> {}
+type ButtonProps<T extends ElementType = TagName> = Props<T, ButtonOptions<T>>;
+//#endregion
+export { useButton as i, ButtonOptions as n, ButtonProps as r, Button as t };
+//# sourceMappingURL=button-Cp853csH.d.ts.map

package/dist/button-Cp853csH.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-Cp853csH.d.ts","names":["Props","ElementType","CommandOptions","TagName","useButton","ButtonOptions","Hook","Button","ButtonProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../src/button/button.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAFgC,cAaxCC,SAAAA,iCAA0CE,IAAAA,WAAeD,aAAa;;;;AAAA;AAW3F;;;;;;cAAqBE,MAAAA,GAASE,KAAAA,EAAOD,WAAW,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/FN,aAAAA,WAAwBJ,WAAAA,GAAcE,OAAAA,UAAiBD,cAAAA,CAAeU,CAAAA;AAAAA,KAE3EJ,WAAAA,WAAsBP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,aAAAA,CAAcO,CAAAA"}

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

@@ -0,0 +1,56 @@
+import { t as CheckboxStore } from "../checkbox-store-CYZPR4N4.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/checkbox/checkbox-check.d.ts
+declare const TagName = "span";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CheckboxCheck` component, that's usually rendered
+ * inside a `Checkbox` component.
+ * @see https://ariakit.com/components/checkbox
+ * @example
+ * ```jsx
+ * const props = useCheckboxCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+declare const useCheckboxCheck: import("@ariakit/react-utils").Hook<"span", CheckboxCheckOptions<"span">>;
+/**
+ * Renders a checkmark icon when the
+ * [`checked`](https://ariakit.com/reference/checkbox-check#checked) prop is
+ * `true`. The icon can be overridden by providing a different one as children.
+ *
+ * When rendered inside a [`Checkbox`](https://ariakit.com/reference/checkbox)
+ * component, the
+ * [`checked`](https://ariakit.com/reference/checkbox-check#checked) prop is
+ * automatically derived from the context.
+ * @see https://ariakit.com/components/checkbox
+ * @example
+ * ```jsx
+ * <CheckboxCheck checked />
+ * ```
+ */
+declare const CheckboxCheck: (props: CheckboxCheckProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CheckboxCheckOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useCheckboxStore`](https://ariakit.com/reference/use-checkbox-store)
+   * hook.
+   */
+  store?: CheckboxStore;
+  /**
+   * Determines if the checkmark should be rendered. This value is automatically
+   * derived from the context when it exists. Manually setting this prop will
+   * supersede the derived value.
+   *
+   * Live examples:
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   */
+  checked?: boolean;
+}
+type CheckboxCheckProps<T extends ElementType = TagName> = Props<T, CheckboxCheckOptions<T>>;
+//#endregion
+export { CheckboxCheck, CheckboxCheckOptions, CheckboxCheckProps, useCheckboxCheck };
+//# sourceMappingURL=checkbox-check.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-check.d.ts","names":["Options","Props","ElementType","CheckboxStore","TagName","useCheckboxCheck","CheckboxCheckOptions","Hook","CheckboxCheck","CheckboxCheckProps","props","ReactElement","JSXElementConstructor","_T","store","checked","T"],"sources":["../../src/checkbox/checkbox-check.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAF4B,cAapCC,gBAAAA,iCAAiDE,IAAAA,SAAaD,oBAAoB;;;;AAAA;AAgBvG;;;;;;;;;AAAmJ;AACnJ;cADqBE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC7GN,oBAAAA,YAAgCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAA/BE;;;;;EAM7CY,KAAAA,GAAQX,aAAAA;EAN0BU;;;;;;;;AAgB3B;EAAPE,OAAAA;AAAAA;AAAAA,KAEQN,kBAAAA,WAA6BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMe,CAAAA,EAAGV,oBAAAA,CAAqBU,CAAAA"}

package/dist/checkbox/checkbox-check.js

@@ -0,0 +1,77 @@
+"use client";
+import { CheckboxCheckedContext } from "./checkbox-checked-context.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import { removeUndefinedValues } from "@ariakit/utils";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/checkbox/checkbox-check.tsx
+const TagName = "span";
+const checkmark = /* @__PURE__ */ jsx("svg", {
+	display: "block",
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 1.5,
+	viewBox: "0 0 16 16",
+	height: "1em",
+	width: "1em",
+	children: /* @__PURE__ */ jsx("polyline", { points: "4,8 7,12 12,4" })
+});
+function getChildren(props) {
+	if (props.checked) return props.children || checkmark;
+	if (typeof props.children === "function") return props.children;
+	return null;
+}
+/**
+* Returns props to create a `CheckboxCheck` component, that's usually rendered
+* inside a `Checkbox` component.
+* @see https://ariakit.com/components/checkbox
+* @example
+* ```jsx
+* const props = useCheckboxCheck({ checked: true });
+* <Role {...props} />
+* ```
+*/
+const useCheckboxCheck = createHook(function useCheckboxCheck({ store, checked, ...props }) {
+	const context = useContext(CheckboxCheckedContext);
+	checked = checked ?? context;
+	const children = getChildren({
+		checked,
+		children: props.children
+	});
+	props = {
+		"aria-hidden": true,
+		...props,
+		children,
+		style: {
+			width: "1em",
+			height: "1em",
+			pointerEvents: "none",
+			...props.style
+		}
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a checkmark icon when the
+* [`checked`](https://ariakit.com/reference/checkbox-check#checked) prop is
+* `true`. The icon can be overridden by providing a different one as children.
+*
+* When rendered inside a [`Checkbox`](https://ariakit.com/reference/checkbox)
+* component, the
+* [`checked`](https://ariakit.com/reference/checkbox-check#checked) prop is
+* automatically derived from the context.
+* @see https://ariakit.com/components/checkbox
+* @example
+* ```jsx
+* <CheckboxCheck checked />
+* ```
+*/
+const CheckboxCheck = forwardRef(function CheckboxCheck(props) {
+	return createElement(TagName, useCheckboxCheck(props));
+});
+//#endregion
+export { CheckboxCheck, useCheckboxCheck };
+
+//# sourceMappingURL=checkbox-check.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-check.js","names":[],"sources":["../../src/checkbox/checkbox-check.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } 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 { CheckboxCheckedContext } from \"./checkbox-checked-context.tsx\";\nimport type { CheckboxStore } from \"./checkbox-store.ts\";\n\nconst TagName = \"span\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nconst checkmark = (\n  <svg\n    display=\"block\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    strokeWidth={1.5}\n    viewBox=\"0 0 16 16\"\n    height=\"1em\"\n    width=\"1em\"\n  >\n    <polyline points=\"4,8 7,12 12,4\" />\n  </svg>\n);\n\nfunction getChildren(props: Pick<CheckboxCheckProps, \"checked\" | \"children\">) {\n  if (props.checked) {\n    return props.children || checkmark;\n  }\n  if (typeof props.children === \"function\") {\n    return props.children;\n  }\n  return null;\n}\n\n/**\n * Returns props to create a `CheckboxCheck` component, that's usually rendered\n * inside a `Checkbox` component.\n * @see https://ariakit.com/components/checkbox\n * @example\n * ```jsx\n * const props = useCheckboxCheck({ checked: true });\n * <Role {...props} />\n * ```\n */\nexport const useCheckboxCheck = createHook<TagName, CheckboxCheckOptions>(\n  function useCheckboxCheck({ store, checked, ...props }) {\n    const context = useContext(CheckboxCheckedContext);\n    checked = checked ?? context;\n    const children = getChildren({ checked, children: props.children });\n\n    props = {\n      \"aria-hidden\": true,\n      ...props,\n      children,\n      style: {\n        width: \"1em\",\n        height: \"1em\",\n        pointerEvents: \"none\",\n        ...props.style,\n      },\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders a checkmark icon when the\n * [`checked`](https://ariakit.com/reference/checkbox-check#checked) prop is\n * `true`. The icon can be overridden by providing a different one as children.\n *\n * When rendered inside a [`Checkbox`](https://ariakit.com/reference/checkbox)\n * component, the\n * [`checked`](https://ariakit.com/reference/checkbox-check#checked) prop is\n * automatically derived from the context.\n * @see https://ariakit.com/components/checkbox\n * @example\n * ```jsx\n * <CheckboxCheck checked />\n * ```\n */\nexport const CheckboxCheck = forwardRef(function CheckboxCheck(\n  props: CheckboxCheckProps,\n) {\n  const htmlProps = useCheckboxCheck(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CheckboxCheckOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCheckboxStore`](https://ariakit.com/reference/use-checkbox-store)\n   * hook.\n   */\n  store?: CheckboxStore;\n  /**\n   * Determines if the checkmark should be rendered. This value is automatically\n   * derived from the context when it exists. Manually setting this prop will\n   * supersede the derived value.\n   *\n   * Live examples:\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   */\n  checked?: boolean;\n}\n\nexport type CheckboxCheckProps<T extends ElementType = TagName> = Props<\n  T,\n  CheckboxCheckOptions<T>\n>;\n"],"mappings":";;;;;;;AAWA,MAAM,UAAA;MAEF,YAAQ,oBAAA,OAAA;CACR,SAAK;CACL,MAAA;CACA,QAAA;CACA,eAAA;CACA,gBAAa;CACb,aAAQ;CACR,SAAO;CACP,QAAM;;CAGH,UAAA,oBAAA,YAAA,EAAA,QAAA,gBAAA,CAAA;AAGP,CAAA;SACM,YACF,OAAO;CAET,IAAI,MAAA,SAAa,OAAA,MAAa,YAC5B;CAEF,IAAA,OAAO,MAAA,aAAA,YAAA,OAAA,MAAA;CACT,OAAA;;;;;;;;;;;;MAcI,mBAAgB,WAAW,SAAA,iBAAsB,EAAA,OAAA,SAAA,GAAA,SAAA;CACjD,MAAA,UAAU,WAAW,sBAAA;CACrB,UAAM,WAAW;OAAc,WAAA,YAAA;EAAS;EAA0B,UAAA,MAAA;CAElE,CAAA;SACE;EACA,eAAG;EACH,GAAA;EACA;SACE;GACA,OAAA;GACA,QAAA;GACA,eAAS;GACX,GAAA,MAAA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;MAqBE,gBAAqB,WADH,SAAA,cACqB,OAAA;CACxC,OAAA,cAAA,SAAA,iBAAA,KAAA,CAAA"}

package/dist/checkbox/checkbox-checked-context.d.ts

@@ -0,0 +1,5 @@
+//#region src/checkbox/checkbox-checked-context.d.ts
+declare const CheckboxCheckedContext: import("react").Context<boolean>;
+//#endregion
+export { CheckboxCheckedContext };
+//# sourceMappingURL=checkbox-checked-context.d.ts.map

package/dist/checkbox/checkbox-checked-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-checked-context.d.ts","names":["CheckboxCheckedContext","Context"],"sources":["../../src/checkbox/checkbox-checked-context.d.ts"],"mappings":";cAAqBA,sBAAAA,kBAAwCC,OAAO"}

package/dist/checkbox/checkbox-checked-context.js

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

package/dist/checkbox/checkbox-checked-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-checked-context.js","names":[],"sources":["../../src/checkbox/checkbox-checked-context.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport const CheckboxCheckedContext = createContext(false);\n"],"mappings":""}

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

@@ -0,0 +1,24 @@
+import { t as CheckboxStore } from "../checkbox-store-CYZPR4N4.js";
+
+//#region src/checkbox/checkbox-context.d.ts
+/**
+ * Returns the checkbox store from the nearest checkbox container.
+ * @example
+ * function Checkbox() {
+ *   const store = useCheckboxContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Checkbox must be wrapped in CheckboxProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+declare const useCheckboxContext: () => CheckboxStore<import("@ariakit/components/checkbox/checkbox-store").CheckboxStoreValue> | undefined;
+declare const useCheckboxScopedContext: (onlyScoped?: boolean) => CheckboxStore<import("@ariakit/components/checkbox/checkbox-store").CheckboxStoreValue> | undefined;
+declare const useCheckboxProviderContext: () => CheckboxStore<import("@ariakit/components/checkbox/checkbox-store").CheckboxStoreValue> | undefined;
+declare const CheckboxContextProvider: (props: import("react").ProviderProps<CheckboxStore<import("@ariakit/components/checkbox/checkbox-store").CheckboxStoreValue> | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const CheckboxScopedContextProvider: (props: import("react").ProviderProps<CheckboxStore<import("@ariakit/components/checkbox/checkbox-store").CheckboxStoreValue> | undefined>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { CheckboxContextProvider, CheckboxScopedContextProvider, useCheckboxContext, useCheckboxProviderContext, useCheckboxScopedContext };
+//# sourceMappingURL=checkbox-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-context.d.ts","names":["CheckboxStore","useCheckboxContext","CheckboxStoreValue","useCheckboxScopedContext","onlyScoped","useCheckboxProviderContext","CheckboxContextProvider","ProviderProps","props","JSX","Element","CheckboxScopedContextProvider"],"sources":["../../src/checkbox/checkbox-context.d.ts"],"mappings":";;;;;AAcA;;;;AAAqI;AACrI;;;;;;cADqBC,kBAAAA,QAA0BD,aAAa,uDAAuDE,kBAAkB;AAAA,cAChHC,wBAAAA,GAA2BC,UAAAA,eAAyBJ,aAAa,uDAAuDE,kBAAAA;AAAAA,cACxHG,0BAAAA,QAAkCL,aAAa,uDAAuDE,kBAAkB;AAAA,cACxHI,uBAAAA,GAA0BE,KAAAA,kBAAuBD,aAAAA,CAAcP,aAAa,uDAAuDE,kBAAAA,+CAAiEO,GAAAA,CAAIC,OAAAA;AAAAA,cACxMC,6BAAAA,GAAgCH,KAAAA,kBAAuBD,aAAAA,CAAcP,aAAa,uDAAuDE,kBAAAA,+CAAiEO,GAAAA,CAAIC,OAAAA"}

package/dist/checkbox/checkbox-context.js

@@ -0,0 +1,26 @@
+"use client";
+import { createStoreContext } from "@ariakit/react-utils";
+//#region src/checkbox/checkbox-context.tsx
+const ctx = createStoreContext();
+/**
+* Returns the checkbox store from the nearest checkbox container.
+* @example
+* function Checkbox() {
+*   const store = useCheckboxContext();
+*
+*   if (!store) {
+*     throw new Error("Checkbox must be wrapped in CheckboxProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const useCheckboxContext = ctx.useContext;
+const useCheckboxScopedContext = ctx.useScopedContext;
+const useCheckboxProviderContext = ctx.useProviderContext;
+const CheckboxContextProvider = ctx.ContextProvider;
+const CheckboxScopedContextProvider = ctx.ScopedContextProvider;
+//#endregion
+export { CheckboxContextProvider, CheckboxScopedContextProvider, useCheckboxContext, useCheckboxProviderContext, useCheckboxScopedContext };
+
+//# sourceMappingURL=checkbox-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-context.js","names":[],"sources":["../../src/checkbox/checkbox-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport type { CheckboxStore } from \"./checkbox-store.ts\";\n\nconst ctx = createStoreContext<CheckboxStore>();\n\n/**\n * Returns the checkbox store from the nearest checkbox container.\n * @example\n * function Checkbox() {\n *   const store = useCheckboxContext();\n *\n *   if (!store) {\n *     throw new Error(\"Checkbox must be wrapped in CheckboxProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const useCheckboxContext = ctx.useContext;\n\nexport const useCheckboxScopedContext = ctx.useScopedContext;\n\nexport const useCheckboxProviderContext = ctx.useProviderContext;\n\nexport const CheckboxContextProvider = ctx.ContextProvider;\n\nexport const CheckboxScopedContextProvider = ctx.ScopedContextProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAa,qBAAA,IAAA;AAEb,MAAa,2BAAA,IAA6B;AAE1C,MAAa,6BAA0B,IAAI;AAE3C,MAAa,0BAAA,IAAA"}

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

@@ -0,0 +1,35 @@
+import { i as CheckboxStoreProps, o as CheckboxStoreValue } from "../checkbox-store-CYZPR4N4.js";
+import { ReactElement, ReactNode } from "react";
+import { PickRequired } from "@ariakit/utils";
+
+//#region src/checkbox/checkbox-provider.d.ts
+type Value = CheckboxStoreValue;
+/**
+ * Provides a checkbox store for its descendants. This comes in handy when
+ * creating a group of checkboxes that share the same state. `CheckboxProvider`
+ * can efficiently manage the value of a checkbox, whether it's a single string,
+ * number, or boolean value, or an array of such values.
+ * @see https://ariakit.com/components/checkbox
+ * @example
+ * ```jsx
+ * <CheckboxProvider defaultValue={["orange"]}>
+ *   <label>
+ *     <Checkbox value="apple" /> Apple
+ *   </label>
+ *   <label>
+ *     <Checkbox value="orange" /> Orange
+ *   </label>
+ *   <label>
+ *     <Checkbox value="mango" /> Mango
+ *   </label>
+ * </CheckboxProvider>
+ * ```
+ */
+declare function CheckboxProvider<T extends Value = Value>(props: PickRequired<CheckboxProviderProps<T>, "value" | "defaultValue">): ReactElement;
+declare function CheckboxProvider(props?: CheckboxProviderProps): ReactElement;
+interface CheckboxProviderProps<T extends Value = Value> extends CheckboxStoreProps<T> {
+  children?: ReactNode;
+}
+//#endregion
+export { CheckboxProvider, CheckboxProviderProps };
+//# sourceMappingURL=checkbox-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-provider.d.ts","names":["PickRequired","ReactElement","ReactNode","CheckboxStoreProps","CheckboxStoreValue","Value","CheckboxProvider","T","CheckboxProviderProps","props","children"],"sources":["../../src/checkbox/checkbox-provider.d.ts"],"mappings":";;;;;KAGKK,KAAAA,GAAQD,kBAAkB;;AADmD;;;;AACnD;AAsB/B;;;;;;;;;;;;;;;iBAAwBE,gBAAAA,WAA2BD,KAAAA,GAAQA,KAAAA,CAAAA,CAAOI,KAAAA,EAAOT,YAAAA,CAAaQ,qBAAAA,CAAsBD,CAAAA,+BAAgCN,YAAAA;AAAAA,iBACpHK,gBAAAA,CAAiBG,KAAAA,GAAQD,qBAAAA,GAAwBP,YAAY;AAAA,UACpEO,qBAAAA,WAAgCH,KAAAA,GAAQA,KAAAA,UAAeF,kBAAAA,CAAmBI,CAAAA;EACvFG,QAAAA,GAAWR,SAAAA;AAAAA"}

package/dist/checkbox/checkbox-provider.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-provider.js","names":[],"sources":["../../src/checkbox/checkbox-provider.tsx"],"sourcesContent":["import type { PickRequired } from \"@ariakit/utils\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { CheckboxContextProvider } from \"./checkbox-context.tsx\";\nimport type {\n  CheckboxStoreProps,\n  CheckboxStoreValue,\n} from \"./checkbox-store.ts\";\nimport { useCheckboxStore } from \"./checkbox-store.ts\";\n\ntype Value = CheckboxStoreValue;\n\n/**\n * Provides a checkbox store for its descendants. This comes in handy when\n * creating a group of checkboxes that share the same state. `CheckboxProvider`\n * can efficiently manage the value of a checkbox, whether it's a single string,\n * number, or boolean value, or an array of such values.\n * @see https://ariakit.com/components/checkbox\n * @example\n * ```jsx\n * <CheckboxProvider defaultValue={[\"orange\"]}>\n *   <label>\n *     <Checkbox value=\"apple\" /> Apple\n *   </label>\n *   <label>\n *     <Checkbox value=\"orange\" /> Orange\n *   </label>\n *   <label>\n *     <Checkbox value=\"mango\" /> Mango\n *   </label>\n * </CheckboxProvider>\n * ```\n */\n\nexport function CheckboxProvider<T extends Value = Value>(\n  props: PickRequired<CheckboxProviderProps<T>, \"value\" | \"defaultValue\">,\n): ReactElement;\n\nexport function CheckboxProvider(props?: CheckboxProviderProps): ReactElement;\n\nexport function CheckboxProvider(props: CheckboxProviderProps = {}) {\n  const store = useCheckboxStore(props);\n  return (\n    <CheckboxContextProvider value={store}>\n      {props.children}\n    </CheckboxContextProvider>\n  );\n}\n\nexport interface CheckboxProviderProps<\n  T extends Value = Value,\n> extends CheckboxStoreProps<T> {\n  children?: ReactNode;\n}\n"],"mappings":";;;;;SA0CI,iBAAA,QAAC,CAAA,GAAA;QAFW,oBAAiB,yBAEO;0BAC3B,KAAA;EACgB,UAAA,MAAA;CAE7B,CAAA"}

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

@@ -0,0 +1,2 @@
+import { a as CheckboxStoreState, c as useCheckboxStoreProps, i as CheckboxStoreProps, n as CheckboxStoreFunctions, o as CheckboxStoreValue, r as CheckboxStoreOptions, s as useCheckboxStore, t as CheckboxStore } from "../checkbox-store-CYZPR4N4.js";
+export { CheckboxStore, CheckboxStoreFunctions, CheckboxStoreOptions, CheckboxStoreProps, CheckboxStoreState, CheckboxStoreValue, useCheckboxStore, useCheckboxStoreProps };

package/dist/checkbox/checkbox-store.js

@@ -0,0 +1,18 @@
+"use client";
+import { useUpdateEffect } from "@ariakit/react-utils";
+import * as Core from "@ariakit/components/checkbox/checkbox-store";
+import { useStore, useStoreProps } from "@ariakit/react-store";
+//#region src/checkbox/checkbox-store.ts
+function useCheckboxStoreProps(store, update, props) {
+	useUpdateEffect(update, [props.store]);
+	useStoreProps(store, props, "value", "setValue");
+	return store;
+}
+function useCheckboxStore(props = {}) {
+	const [store, update] = useStore(Core.createCheckboxStore, props);
+	return useCheckboxStoreProps(store, update, props);
+}
+//#endregion
+export { useCheckboxStore, useCheckboxStoreProps };
+
+//# sourceMappingURL=checkbox-store.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-store.js","names":[],"sources":["../../src/checkbox/checkbox-store.ts"],"sourcesContent":["import * as Core from \"@ariakit/components/checkbox/checkbox-store\";\nimport { useStore, useStoreProps } from \"@ariakit/react-store\";\nimport type { Store } from \"@ariakit/react-store\";\nimport { useUpdateEffect } from \"@ariakit/react-utils\";\nimport type { BivariantCallback, PickRequired } from \"@ariakit/utils\";\n\nexport function useCheckboxStoreProps<T extends Core.CheckboxStore>(\n  store: T,\n  update: () => void,\n  props: CheckboxStoreProps,\n) {\n  useUpdateEffect(update, [props.store]);\n  useStoreProps(store, props, \"value\", \"setValue\");\n  return store;\n}\n\n/**\n * Creates a checkbox store to conveniently manage a checkbox value,\n * whether it's a string, number, boolean, or an array of strings or numbers.\n * @see https://ariakit.com/components/checkbox\n * @example\n * ```jsx\n * const checkbox = useCheckboxStore({ defaultValue: true });\n * <Checkbox store={checkbox} />\n * ```\n */\n\nexport function useCheckboxStore<\n  T extends CheckboxStoreValue = CheckboxStoreValue,\n>(\n  props: PickRequired<CheckboxStoreProps<T>, \"value\" | \"defaultValue\">,\n): CheckboxStore<T>;\n\nexport function useCheckboxStore(props?: CheckboxStoreProps): CheckboxStore;\n\nexport function useCheckboxStore(\n  props: CheckboxStoreProps = {},\n): CheckboxStore {\n  const [store, update] = useStore(Core.createCheckboxStore, props);\n  return useCheckboxStoreProps(store, update, props);\n}\n\nexport type CheckboxStoreValue = Core.CheckboxStoreValue;\n\nexport type CheckboxStoreState<\n  T extends CheckboxStoreValue = CheckboxStoreValue,\n> = Core.CheckboxStoreState<T>;\n\nexport type CheckboxStoreFunctions<\n  T extends CheckboxStoreValue = CheckboxStoreValue,\n> = Core.CheckboxStoreFunctions<T>;\n\nexport interface CheckboxStoreOptions<\n  T extends CheckboxStoreValue = CheckboxStoreValue,\n> extends Core.CheckboxStoreOptions<T> {\n  /**\n   * A callback that gets called when the\n   * [`value`](https://ariakit.com/reference/checkbox-provider#value) state\n   * changes.\n   * @example\n   * function MyCheckbox({ value, onChange }) {\n   *   const checkbox = useCheckboxStore({ value, setValue: onChange });\n   * }\n   */\n  setValue?: BivariantCallback<(value: CheckboxStoreState<T>[\"value\"]) => void>;\n}\n\nexport interface CheckboxStoreProps<\n  T extends CheckboxStoreValue = CheckboxStoreValue,\n>\n  extends CheckboxStoreOptions<T>, Core.CheckboxStoreProps<T> {}\n\nexport interface CheckboxStore<\n  T extends CheckboxStoreValue = CheckboxStoreValue,\n>\n  extends CheckboxStoreFunctions<T>, Store<Core.CheckboxStore<T>> {}\n"],"mappings":";;;;;SAWE,sBAAyB,OAAY,QAAA,OAAA;CACrC,gBAAc,QAAO,CAAA,MAAO,KAAA,CAAS;CACrC,cAAO,OAAA,OAAA,SAAA,UAAA;CACT,OAAA;AAqBA;SAGS,iBAAiB,QAAS,CAAA,GAAA;CACjC,MAAA,CAAO,OAAA,UAAA,SAAsB,KAAO,qBAAa,KAAA;CACnD,OAAA,sBAAA,OAAA,QAAA,KAAA"}

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,91 @@
+import { n as CommandOptions } from "../command-DckndCUK.js";
+import { t as CheckboxStore } from "../checkbox-store-CYZPR4N4.js";
+import { Props } from "@ariakit/react-utils";
+import { ComponentPropsWithoutRef, ElementType } from "react";
+
+//#region src/checkbox/checkbox.d.ts
+declare const TagName = "input";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Checkbox` component. If the element is not a
+ * native checkbox, the hook will return additional props to make sure it's
+ * accessible.
+ * @see https://ariakit.com/components/checkbox
+ * @example
+ * ```jsx
+ * const props = useCheckbox({ render: <div /> });
+ * <Role {...props}>Accessible checkbox</Role>
+ * ```
+ */
+declare const useCheckbox: import("@ariakit/react-utils").Hook<"input", CheckboxOptions<"input">>;
+/**
+ * Renders an accessible checkbox element. If the underlying element is not a
+ * native checkbox, this component will pass additional attributes to make sure
+ * it's accessible.
+ * @see https://ariakit.com/components/checkbox
+ * @example
+ * ```jsx
+ * <Checkbox render={<div />}>Accessible checkbox</Checkbox>
+ * ```
+ */
+declare const Checkbox: (props: CheckboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CheckboxOptions<T extends ElementType = TagName> extends CommandOptions<T> {
+  /**
+   * Object returned by the
+   * [`useCheckboxStore`](https://ariakit.com/reference/use-checkbox-store)
+   * hook. If not provided, the closest
+   * [`CheckboxProvider`](https://ariakit.com/reference/checkbox-provider)
+   * component's context will be used. Otherwise, the component will fall back
+   * to an internal store.
+   *
+   * Live examples:
+   * - [Checkbox as button](https://ariakit.com/examples/checkbox-as-button)
+   */
+  store?: CheckboxStore;
+  /**
+   * The native `name` attribute.
+   *
+   * Live examples:
+   * - [MenuItemCheckbox](https://ariakit.com/examples/menu-item-checkbox)
+   */
+  name?: string;
+  /**
+   * The value of the checkbox. This is useful when the same checkbox store is
+   * used for multiple [`Checkbox`](https://ariakit.com/reference/checkbox)
+   * elements, in which case the value will be an array of checked values.
+   *
+   * Live examples:
+   * - [Checkbox group](https://ariakit.com/examples/checkbox-group)
+   * - [MenuItemCheckbox](https://ariakit.com/examples/menu-item-checkbox)
+   * @example
+   * ```jsx "value"
+   * <CheckboxProvider defaultValue={["Apple", "Orange"]}>
+   *   <Checkbox value="Apple" />
+   *   <Checkbox value="Orange" />
+   *   <Checkbox value="Watermelon" />
+   * </CheckboxProvider>
+   * ```
+   */
+  value?: ComponentPropsWithoutRef<TagName>["value"];
+  /**
+   * The default checked state of the checkbox. This prop is ignored if the
+   * [`checked`](https://ariakit.com/reference/checkbox#checked) or the
+   * [`store`](https://ariakit.com/reference/checkbox#store) props are provided.
+   */
+  defaultChecked?: "mixed" | boolean;
+  /**
+   * The checked state of the checkbox. This will override the value inferred
+   * from [`store`](https://ariakit.com/reference/checkbox#store) prop, if
+   * provided. This can be `"mixed"` to indicate that the checkbox is partially
+   * checked.
+   */
+  checked?: "mixed" | boolean;
+  /**
+   * A function that is called when the checkbox's checked state changes.
+   */
+  onChange?: ComponentPropsWithoutRef<TagName>["onChange"];
+}
+type CheckboxProps<T extends ElementType = TagName> = Props<T, CheckboxOptions<T>>;
+//#endregion
+export { Checkbox, CheckboxOptions, CheckboxProps, useCheckbox };
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","names":["Props","ComponentPropsWithoutRef","ElementType","CommandOptions","CheckboxStore","TagName","useCheckbox","CheckboxOptions","Hook","Checkbox","CheckboxProps","props","ReactElement","JSXElementConstructor","T","store","name","value","defaultChecked","checked","onChange"],"sources":["../../src/checkbox/checkbox.d.ts"],"mappings":";;;;;;cAIcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAY7B;AAdyD,cAcpCC,WAAAA,iCAA4CE,IAAAA,UAAcD,eAAe;;;AAAA;AAW9F;;;;;;;cAAqBE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnGN,eAAAA,WAA0BL,WAAAA,GAAcG,OAAAA,UAAiBF,cAAAA,CAAeW,CAAAA;EADgD;AACzI;;;;;;;;;;EAYIC,KAAAA,GAAQX,aAAAA;EAZ8DD;;;;;;EAmBtEa,IAAAA;EAnBqFF;;;;;;;;;;;;;AAsD1C;AAE/C;;;EAnBIG,KAAAA,GAAQhB,wBAAAA,CAAyBI,OAAAA;EAmBaA;;;;;EAb9Ca,cAAAA;EAa8D;;;;;;EAN9DC,OAAAA;EAMkFL;;AAAC;EAFnFM,QAAAA,GAAWnB,wBAAAA,CAAyBI,OAAAA;AAAAA;AAAAA,KAE5BK,aAAAA,WAAwBR,WAAAA,GAAcG,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,eAAAA,CAAgBO,CAAAA"}