@ariakit/react-components 0.1.0

package/dist/select/select-value.d.ts

@@ -0,0 +1,84 @@
+import { s as SelectStoreValue, t as SelectStore } from "../select-store-BsLTAyKh.js";
+import { ReactNode } from "react";
+import { PickRequired, ToPrimitive } from "@ariakit/utils";
+
+//#region src/select/select-value.d.ts
+type Value = SelectStoreValue;
+/**
+ * Renders the current
+ * [`value`](https://ariakit.com/reference/use-select-store#value) state in the
+ * [select store](https://ariakit.com/reference/use-select-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props. It can optionally accept a
+ * [`fallback`](https://ariakit.com/reference/select-value#fallback) prop to use
+ * as a default value if the store's
+ * [`value`](https://ariakit.com/reference/use-select-store#value) is
+ * `undefined`.
+ *
+ * Additionally, it takes a
+ * [`children`](https://ariakit.com/reference/select-value#children) function
+ * that gets called with the current value as an argument. This is handy for
+ * rendering the value in a custom way.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {3}
+ * <SelectProvider>
+ *   <Select>
+ *     <SelectValue fallback="Select a value" />
+ *     <SelectArrow />
+ *   </Select>
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Banana" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ * @example
+ * ```jsx {1-3,7}
+ * function renderValue(value) {
+ *   // render custom JSX
+ * }
+ *
+ * <SelectProvider>
+ *   <Select>
+ *     <SelectValue>{renderValue}</SelectValue>
+ *     <SelectArrow />
+ *   </Select>
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Banana" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+declare function SelectValue<T extends Value = Value>(props: PickRequired<SelectValueProps<T>, "fallback">): T;
+declare function SelectValue(props?: SelectValueProps): Value;
+interface SelectValueProps<T extends Value = Value> {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If
+   * not provided, the parent
+   * [`SelectList`](https://ariakit.com/reference/select-list) or
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components'
+   * context will be used.
+   */
+  store?: SelectStore<T>;
+  /**
+   * The value to use as a default if the store's
+   * [`value`](https://ariakit.com/reference/use-select-store#value) is
+   * `undefined`.
+   * @default ""
+   */
+  fallback?: T;
+  /**
+   * A function that gets called with the current value as an argument. This is
+   * handy for rendering the value in a custom way.
+   */
+  children?: (value: ToPrimitive<T>) => ReactNode;
+}
+//#endregion
+export { SelectValue, SelectValueProps };
+//# sourceMappingURL=select-value.d.ts.map

package/dist/select/select-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-value.d.ts","names":["PickRequired","ToPrimitive","ReactNode","SelectStore","SelectStoreValue","Value","SelectValue","T","SelectValueProps","props","store","fallback","children","value"],"sources":["../../src/select/select-value.d.ts"],"mappings":";;;;;KAGKK,KAAAA,GAAQD,gBAAgB;;AAD0C;;;;AAC1C;AAmD7B;;;;;;;;;;;;;;;;;;;;AAAqH;AACrH;;;;;;;;AAAoE;AACpE;;;;;;;;;;;;;;iBAFwBE,WAAAA,WAAsBD,KAAAA,GAAQA,KAAAA,CAAAA,CAAOI,KAAAA,EAAOT,YAAAA,CAAaQ,gBAAAA,CAAiBD,CAAAA,iBAAkBA,CAAAA;AAAAA,iBAC5FD,WAAAA,CAAYG,KAAAA,GAAQD,gBAAAA,GAAmBH,KAAK;AAAA,UACnDG,gBAAAA,WAA2BH,KAAAA,GAAQA,KAAAA;EASxCF;;;;;;;;EAARO,KAAAA,GAAQP,WAAAA,CAAYI,CAAAA;EAY2B;AAAA;;;;;EAL/CI,QAAAA,GAAWJ,CAAAA;;;;;EAKXK,QAAAA,IAAYC,KAAAA,EAAOZ,WAAAA,CAAYM,CAAAA,MAAOL,SAAAA;AAAAA"}

package/dist/select/select-value.js

@@ -0,0 +1,18 @@
+"use client";
+import { useSelectContext } from "./select-context.js";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/select/select-value.tsx
+function SelectValue({ store, fallback, children } = {}) {
+	const context = useSelectContext();
+	store = store || context;
+	const value = useStoreState(store, (state) => {
+		if (!state?.value.length) return fallback;
+		return state.value;
+	});
+	if (children) return children(value || "");
+	return value;
+}
+//#endregion
+export { SelectValue };
+
+//# sourceMappingURL=select-value.js.map

package/dist/select/select-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-value.js","names":[],"sources":["../../src/select/select-value.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport type { PickRequired, ToPrimitive } from \"@ariakit/utils\";\nimport type { ReactNode } from \"react\";\nimport { useSelectContext } from \"./select-context.tsx\";\nimport type { SelectStore, SelectStoreValue } from \"./select-store.ts\";\n\ntype Value = SelectStoreValue;\n\n/**\n * Renders the current\n * [`value`](https://ariakit.com/reference/use-select-store#value) state in the\n * [select store](https://ariakit.com/reference/use-select-store).\n *\n * As a value component, it doesn't render any DOM elements and therefore\n * doesn't accept HTML props. It can optionally accept a\n * [`fallback`](https://ariakit.com/reference/select-value#fallback) prop to use\n * as a default value if the store's\n * [`value`](https://ariakit.com/reference/use-select-store#value) is\n * `undefined`.\n *\n * Additionally, it takes a\n * [`children`](https://ariakit.com/reference/select-value#children) function\n * that gets called with the current value as an argument. This is handy for\n * rendering the value in a custom way.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx {3}\n * <SelectProvider>\n *   <Select>\n *     <SelectValue fallback=\"Select a value\" />\n *     <SelectArrow />\n *   </Select>\n *   <SelectPopover>\n *     <SelectItem value=\"Apple\" />\n *     <SelectItem value=\"Banana\" />\n *     <SelectItem value=\"Orange\" />\n *   </SelectPopover>\n * </SelectProvider>\n * ```\n * @example\n * ```jsx {1-3,7}\n * function renderValue(value) {\n *   // render custom JSX\n * }\n *\n * <SelectProvider>\n *   <Select>\n *     <SelectValue>{renderValue}</SelectValue>\n *     <SelectArrow />\n *   </Select>\n *   <SelectPopover>\n *     <SelectItem value=\"Apple\" />\n *     <SelectItem value=\"Banana\" />\n *     <SelectItem value=\"Orange\" />\n *   </SelectPopover>\n * </SelectProvider>\n * ```\n */\n\nexport function SelectValue<T extends Value = Value>(\n  props: PickRequired<SelectValueProps<T>, \"fallback\">,\n): T;\n\nexport function SelectValue(props?: SelectValueProps): Value;\n\nexport function SelectValue({\n  store,\n  fallback,\n  children,\n}: SelectValueProps = {}) {\n  const context = useSelectContext();\n  store = store || context;\n\n  const value = useStoreState(store, (state) => {\n    if (!state?.value.length) return fallback;\n    return state.value;\n  });\n\n  if (children) {\n    return children(value || \"\");\n  }\n\n  return value;\n}\n\nexport interface SelectValueProps<T extends Value = Value> {\n  /**\n   * Object returned by the\n   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If\n   * not provided, the parent\n   * [`SelectList`](https://ariakit.com/reference/select-list) or\n   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components'\n   * context will be used.\n   */\n  store?: SelectStore<T>;\n  /**\n   * The value to use as a default if the store's\n   * [`value`](https://ariakit.com/reference/use-select-store#value) is\n   * `undefined`.\n   * @default \"\"\n   */\n  fallback?: T;\n  /**\n   * A function that gets called with the current value as an argument. This is\n   * handy for rendering the value in a custom way.\n   */\n  children?: (value: ToPrimitive<T>) => ReactNode;\n}\n"],"mappings":";;;;SAsEQ,YAAU,EAAA,OAAA,UAAiB,aAAA,CAAA,GAAA;CACjC,MAAA,UAAQ,iBAAS;CAEjB,QAAM,SAAQ;OACP,QAAO,cAAc,QAAO,UAAA;EACjC,IAAA,CAAA,OAAO,MAAM,QAAA,OAAA;EACd,OAAA,MAAA;CAED,CAAA;CAIA,IAAA,UAAO,OAAA,SAAA,SAAA,EAAA;CACT,OAAA"}

package/dist/select/select.d.ts

@@ -0,0 +1,89 @@
+import { PopoverDisclosureOptions } from "../popover/popover-disclosure.js";
+import { n as CompositeTypeaheadOptions } from "../composite-typeahead-DDhpyKqm.js";
+import { t as SelectStore } from "../select-store-BsLTAyKh.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, KeyboardEvent, MouseEvent, SelectHTMLAttributes } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/select/select.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Select` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelect({ store });
+ * <Role {...props} />
+ * ```
+ */
+declare const useSelect: import("@ariakit/react-utils").Hook<"button", SelectOptions<"button">>;
+/**
+ * Renders a custom select element that controls the visibility of either a
+ * [`SelectList`](https://ariakit.com/reference/select-list) or a
+ * [`SelectPopover`](https://ariakit.com/reference/select-popover) component.
+ *
+ * By default, the
+ * [`value`](https://ariakit.com/reference/select-provider#value) state is
+ * rendered as the children, followed by a
+ * [`SelectArrow`](https://ariakit.com/reference/select-arrow) component. This
+ * can be customized by passing different children to the component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {2}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+declare const Select: (props: SelectProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface SelectOptions<T extends ElementType = TagName> extends PopoverDisclosureOptions<T>, CompositeTypeaheadOptions<T>, Pick<SelectHTMLAttributes<HTMLSelectElement>, "name" | "form" | "required"> {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If
+   * not provided, the closest
+   * [`SelectProvider`](https://ariakit.com/reference/select-provider)
+   * component's context will be used.
+   */
+  store?: SelectStore;
+  /**
+   * Determines if the
+   * [`SelectList`](https://ariakit.com/reference/select-list) or
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components
+   * will appear when the user uses arrow keys while the select element is
+   * in focus.
+   *
+   * Live examples:
+   * - [Select Grid](https://ariakit.com/examples/select-grid)
+   * @default true
+   */
+  showOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * Determines whether pressing arrow keys will move the active item even when
+   * the [`SelectList`](https://ariakit.com/reference/select-list) or
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components
+   * are hidden.
+   * @default false
+   */
+  moveOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * Determines whether pressing Space, Enter, or a click event will
+   * [`toggle`](https://ariakit.com/reference/use-select-store#toggle) the
+   * [`SelectList`](https://ariakit.com/reference/select-list) or
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components.
+   * @default true
+   * @deprecated Use
+   * [`toggleOnClick`](https://ariakit.com/reference/select#toggleonclick)
+   * instead.
+   */
+  toggleOnPress?: BooleanOrCallback<MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>>;
+}
+type SelectProps<T extends ElementType = TagName> = Props<T, SelectOptions<T>>;
+//#endregion
+export { Select, SelectOptions, SelectProps, useSelect };
+//# sourceMappingURL=select.d.ts.map

package/dist/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","names":["Props","BooleanOrCallback","ElementType","KeyboardEvent","MouseEvent","SelectHTMLAttributes","CompositeTypeaheadOptions","PopoverDisclosureOptions","SelectStore","TagName","useSelect","SelectOptions","Hook","Select","SelectProps","props","ReactElement","JSXElementConstructor","T","HTMLSelectElement","HTMLElement","Pick","store","showOnKeyDown","moveOnKeyDown","toggleOnPress"],"sources":["../../src/select/select.d.ts"],"mappings":";;;;;;;;cAMcS,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AACQ;AAFwB,cAahCC,SAAAA,iCAA0CE,IAAAA,WAAeD,aAAa;;;;AAAA;AAuB3F;;;;;;;;;AAAqI;AACrI;;;;;;;;cADqBE,MAAAA,GAASE,KAAAA,EAAOD,WAAW,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/FN,aAAAA,WAAwBT,WAAAA,GAAcO,OAAAA,UAAiBF,wBAAAA,CAAyBW,CAAAA,GAAIZ,yBAAAA,CAA0BY,CAAAA,GAAIG,IAAAA,CAAKhB,oBAAAA,CAAqBc,iBAAAA;EAoBzGC;;;;;;;EAZhDE,KAAAA,GAAQd,WAAAA;EA+BkEY;;;;;;;;;;;EAnB1EG,aAAAA,GAAgBtB,iBAAAA,CAAkBE,aAAAA,CAAciB,WAAAA;EApB6CF;;;;;;;EA4B7FM,aAAAA,GAAgBvB,iBAAAA,CAAkBE,aAAAA,CAAciB,WAAAA;EARhDG;;;;;;;;;;EAmBAE,aAAAA,GAAgBxB,iBAAAA,CAAkBG,UAAAA,CAAWgB,WAAAA,IAAejB,aAAAA,CAAciB,WAAAA;AAAAA;AAAAA,KAElEN,WAAAA,WAAsBZ,WAAAA,GAAcO,OAAAA,IAAWT,KAAAA,CAAMkB,CAAAA,EAAGP,aAAAA,CAAcO,CAAAA"}

package/dist/select/select.js

@@ -0,0 +1,211 @@
+"use client";
+import { usePopoverDisclosure } from "../popover/popover-disclosure.js";
+import { useCompositeTypeahead } from "../composite/composite-typeahead.js";
+import { SelectScopedContextProvider, useSelectProviderContext } from "./select-context.js";
+import { SelectArrow } from "./select-arrow.js";
+import { createElement, createHook, forwardRef, useBooleanEvent, useEvent, useMergeRefs, useWrapElement } from "@ariakit/react-utils";
+import { getPopupRole, invariant, queueBeforeEvent, toArray } from "@ariakit/utils";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/select/select.tsx
+const TagName = "button";
+function getSelectedValues(select) {
+	return Array.from(select.selectedOptions).map((option) => option.value);
+}
+function nextWithValue(store, next) {
+	return () => {
+		const nextId = next();
+		if (!nextId) return;
+		let i = 0;
+		let nextItem = store.item(nextId);
+		const firstItem = nextItem;
+		while (nextItem && nextItem.value == null) {
+			const nextId = next(++i);
+			if (!nextId) return;
+			nextItem = store.item(nextId);
+			if (nextItem === firstItem) break;
+		}
+		return nextItem?.id;
+	};
+}
+/**
+* Returns props to create a `Select` component.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx
+* const store = useSelectStore();
+* const props = useSelect({ store });
+* <Role {...props} />
+* ```
+*/
+const useSelect = createHook(function useSelect({ store, name, form, required, showOnKeyDown = true, moveOnKeyDown = true, toggleOnPress = true, toggleOnClick = toggleOnPress, ...props }) {
+	const context = useSelectProviderContext();
+	store = store || context;
+	invariant(store, "Select must receive a `store` prop or be wrapped in a SelectProvider component.");
+	const onKeyDownProp = props.onKeyDown;
+	const showOnKeyDownProp = useBooleanEvent(showOnKeyDown);
+	const moveOnKeyDownProp = useBooleanEvent(moveOnKeyDown);
+	const dir = useStoreState(store, "placement").split("-")[0];
+	const value = useStoreState(store, "value");
+	const multiSelectable = Array.isArray(value);
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		const { orientation, items, activeId } = store.getState();
+		const isVertical = orientation !== "horizontal";
+		const isHorizontal = orientation !== "vertical";
+		const isGrid = !!items.find((item) => !item.disabled && item.value != null)?.rowId;
+		const getId = {
+			ArrowUp: (isGrid || isVertical) && nextWithValue(store, store.up),
+			ArrowRight: (isGrid || isHorizontal) && nextWithValue(store, store.next),
+			ArrowDown: (isGrid || isVertical) && nextWithValue(store, store.down),
+			ArrowLeft: (isGrid || isHorizontal) && nextWithValue(store, store.previous)
+		}[event.key];
+		if (getId && moveOnKeyDownProp(event)) {
+			event.preventDefault();
+			store.move(getId());
+		}
+		const isTopOrBottom = dir === "top" || dir === "bottom";
+		if ({
+			ArrowDown: isTopOrBottom,
+			ArrowUp: isTopOrBottom,
+			ArrowLeft: dir === "left",
+			ArrowRight: dir === "right"
+		}[event.key] && showOnKeyDownProp(event)) {
+			event.preventDefault();
+			store.move(activeId);
+			queueBeforeEvent(event.currentTarget, "keyup", store.show);
+		}
+	});
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(SelectScopedContextProvider, {
+		value: store,
+		children: element
+	}), [store]);
+	const [autofill, setAutofill] = useState(false);
+	const nativeSelectChangedRef = useRef(false);
+	useEffect(() => {
+		const nativeSelectChanged = nativeSelectChangedRef.current;
+		nativeSelectChangedRef.current = false;
+		if (nativeSelectChanged) return;
+		setAutofill(false);
+	}, [value]);
+	const labelId = useStoreState(store, (state) => state.labelElement?.id);
+	const label = props["aria-label"];
+	const labelledBy = props["aria-labelledby"] || labelId;
+	const items = useStoreState(store, (state) => {
+		if (!name) return;
+		return state.items;
+	});
+	const values = useMemo(() => {
+		return [...new Set(items?.map((i) => i.value).filter((v) => v != null))];
+	}, [items]);
+	props = useWrapElement(props, (element) => {
+		if (!name) return element;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("select", {
+			style: {
+				border: 0,
+				clip: "rect(0 0 0 0)",
+				height: "1px",
+				margin: "-1px",
+				overflow: "hidden",
+				padding: 0,
+				position: "absolute",
+				whiteSpace: "nowrap",
+				width: "1px"
+			},
+			tabIndex: -1,
+			"aria-hidden": true,
+			"aria-label": label,
+			"aria-labelledby": label != null ? void 0 : labelledBy,
+			name,
+			form,
+			required,
+			disabled: props.disabled,
+			value,
+			multiple: multiSelectable,
+			onFocus: () => store?.getState().selectElement?.focus(),
+			onChange: (event) => {
+				nativeSelectChangedRef.current = true;
+				setAutofill(true);
+				store?.setValue(multiSelectable ? getSelectedValues(event.target) : event.target.value);
+			},
+			children: [toArray(value).map((value) => {
+				if (value == null) return null;
+				if (values.includes(value)) return null;
+				return /* @__PURE__ */ jsx("option", {
+					value,
+					children: value
+				}, value);
+			}), values.map((value) => /* @__PURE__ */ jsx("option", {
+				value,
+				children: value
+			}, value))]
+		}), element] });
+	}, [
+		store,
+		label,
+		labelledBy,
+		name,
+		form,
+		required,
+		value,
+		multiSelectable,
+		values,
+		props.disabled
+	]);
+	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [value, /* @__PURE__ */ jsx(SelectArrow, {})] });
+	const contentElement = useStoreState(store, "contentElement");
+	props = {
+		role: "combobox",
+		"aria-autocomplete": "none",
+		"aria-labelledby": props["aria-label"] != null ? void 0 : labelId,
+		"aria-haspopup": getPopupRole(contentElement, "listbox"),
+		"data-autofill": autofill || void 0,
+		"data-name": name,
+		children,
+		...props,
+		ref: useMergeRefs(store.setSelectElement, props.ref),
+		onKeyDown
+	};
+	props = usePopoverDisclosure({
+		store,
+		toggleOnClick,
+		...props
+	});
+	props = useCompositeTypeahead({
+		store,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a custom select element that controls the visibility of either a
+* [`SelectList`](https://ariakit.com/reference/select-list) or a
+* [`SelectPopover`](https://ariakit.com/reference/select-popover) component.
+*
+* By default, the
+* [`value`](https://ariakit.com/reference/select-provider#value) state is
+* rendered as the children, followed by a
+* [`SelectArrow`](https://ariakit.com/reference/select-arrow) component. This
+* can be customized by passing different children to the component.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx {2}
+* <SelectProvider>
+*   <Select />
+*   <SelectPopover>
+*     <SelectItem value="Apple" />
+*     <SelectItem value="Orange" />
+*   </SelectPopover>
+* </SelectProvider>
+* ```
+*/
+const Select = forwardRef(function Select(props) {
+	return createElement(TagName, useSelect(props));
+});
+//#endregion
+export { Select, useSelect };
+
+//# sourceMappingURL=select.js.map

package/dist/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useMergeRefs,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  toArray,\n  getPopupRole,\n  queueBeforeEvent,\n  invariant,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type {\n  ElementType,\n  KeyboardEvent,\n  MouseEvent,\n  SelectHTMLAttributes,\n} from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { CompositeTypeaheadOptions } from \"../composite/composite-typeahead.tsx\";\nimport { useCompositeTypeahead } from \"../composite/composite-typeahead.tsx\";\nimport type { PopoverDisclosureOptions } from \"../popover/popover-disclosure.tsx\";\nimport { usePopoverDisclosure } from \"../popover/popover-disclosure.tsx\";\nimport { SelectArrow } from \"./select-arrow.tsx\";\nimport {\n  SelectScopedContextProvider,\n  useSelectProviderContext,\n} from \"./select-context.tsx\";\nimport type { SelectStore } from \"./select-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nfunction getSelectedValues(select: HTMLSelectElement) {\n  return Array.from(select.selectedOptions).map((option) => option.value);\n}\n\n// When moving through the items when the select list is closed, we don't want\n// to move to items without value, so we filter them out here.\nfunction nextWithValue(store: SelectStore, next: SelectStore[\"next\"]) {\n  return () => {\n    const nextId = next();\n    if (!nextId) return;\n    let i = 0;\n    let nextItem = store.item(nextId);\n    const firstItem = nextItem;\n    while (nextItem && nextItem.value == null) {\n      const nextId = next(++i);\n      if (!nextId) return;\n      nextItem = store.item(nextId);\n      // Prevents infinite loop when focusLoop is true\n      if (nextItem === firstItem) break;\n    }\n    return nextItem?.id;\n  };\n}\n\n/**\n * Returns props to create a `Select` component.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx\n * const store = useSelectStore();\n * const props = useSelect({ store });\n * <Role {...props} />\n * ```\n */\nexport const useSelect = createHook<TagName, SelectOptions>(function useSelect({\n  store,\n  name,\n  form,\n  required,\n  showOnKeyDown = true,\n  moveOnKeyDown = true,\n  toggleOnPress = true,\n  toggleOnClick = toggleOnPress,\n  ...props\n}) {\n  const context = useSelectProviderContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"Select must receive a `store` prop or be wrapped in a SelectProvider component.\",\n  );\n\n  const onKeyDownProp = props.onKeyDown;\n  const showOnKeyDownProp = useBooleanEvent(showOnKeyDown);\n  const moveOnKeyDownProp = useBooleanEvent(moveOnKeyDown);\n  const placement = useStoreState(store, \"placement\");\n  const dir = placement.split(\"-\")[0] as BasePlacement;\n  const value = useStoreState(store, \"value\");\n  const multiSelectable = Array.isArray(value);\n\n  const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n    onKeyDownProp?.(event);\n    if (event.defaultPrevented) return;\n    if (!store) return;\n    const { orientation, items, activeId } = store.getState();\n    // moveOnKeyDown\n    const isVertical = orientation !== \"horizontal\";\n    const isHorizontal = orientation !== \"vertical\";\n    const isGrid = !!items.find((item) => !item.disabled && item.value != null)\n      ?.rowId;\n    const moveKeyMap = {\n      ArrowUp: (isGrid || isVertical) && nextWithValue(store, store.up),\n      ArrowRight: (isGrid || isHorizontal) && nextWithValue(store, store.next),\n      ArrowDown: (isGrid || isVertical) && nextWithValue(store, store.down),\n      ArrowLeft:\n        (isGrid || isHorizontal) && nextWithValue(store, store.previous),\n    };\n    const getId = moveKeyMap[event.key as keyof typeof moveKeyMap];\n    if (getId && moveOnKeyDownProp(event)) {\n      event.preventDefault();\n      store.move(getId());\n    }\n    // showOnKeyDown\n    const isTopOrBottom = dir === \"top\" || dir === \"bottom\";\n    const isLeft = dir === \"left\";\n    const isRight = dir === \"right\";\n    const canShowKeyMap = {\n      ArrowDown: isTopOrBottom,\n      ArrowUp: isTopOrBottom,\n      ArrowLeft: isLeft,\n      ArrowRight: isRight,\n    };\n    const canShow = canShowKeyMap[event.key as keyof typeof canShowKeyMap];\n    if (canShow && showOnKeyDownProp(event)) {\n      event.preventDefault();\n      store.move(activeId);\n      // Schedule the show event to run after the key event has finished\n      // bubbling. This is necessary to avoid the page to scroll when the\n      // popover is shown.\n      queueBeforeEvent(event.currentTarget, \"keyup\", store.show);\n    }\n  });\n\n  props = useWrapElement(\n    props,\n    (element) => (\n      <SelectScopedContextProvider value={store}>\n        {element}\n      </SelectScopedContextProvider>\n    ),\n    [store],\n  );\n\n  const [autofill, setAutofill] = useState(false);\n  const nativeSelectChangedRef = useRef(false);\n\n  // Resets the autofilled state when the select value changes, but only if\n  // the change wasn't triggered by the native select element (which is an\n  // autofill).\n  useEffect(() => {\n    const nativeSelectChanged = nativeSelectChangedRef.current;\n    nativeSelectChangedRef.current = false;\n    if (nativeSelectChanged) return;\n    setAutofill(false);\n  }, [value]);\n\n  const labelId = useStoreState(store, (state) => state.labelElement?.id);\n  const label = props[\"aria-label\"];\n  const labelledBy = props[\"aria-labelledby\"] || labelId;\n  const items = useStoreState(store, (state) => {\n    if (!name) return;\n    return state.items;\n  });\n  const values = useMemo(() => {\n    // Filter out items without value and duplicate values.\n    return [...new Set(items?.map((i) => i.value!).filter((v) => v != null))];\n  }, [items]);\n\n  // Renders a native select element with the same value as the select so we\n  // support browser autofill. When the native select value changes, the\n  // onChange event is triggered and we set the autofill state to true.\n  props = useWrapElement(\n    props,\n    (element) => {\n      if (!name) return element;\n      return (\n        <>\n          <select\n            style={{\n              border: 0,\n              clip: \"rect(0 0 0 0)\",\n              height: \"1px\",\n              margin: \"-1px\",\n              overflow: \"hidden\",\n              padding: 0,\n              position: \"absolute\",\n              whiteSpace: \"nowrap\",\n              width: \"1px\",\n            }}\n            tabIndex={-1}\n            aria-hidden\n            aria-label={label}\n            aria-labelledby={label != null ? undefined : labelledBy}\n            name={name}\n            form={form}\n            required={required}\n            disabled={props.disabled}\n            value={value}\n            multiple={multiSelectable}\n            // Even though this element is visually hidden and is not\n            // tabbable, it's still focusable. Some autofill extensions like\n            // 1password will move focus to the next form element on autofill.\n            // In this case, we want to move focus to our custom select\n            // element.\n            onFocus={() => store?.getState().selectElement?.focus()}\n            onChange={(event) => {\n              nativeSelectChangedRef.current = true;\n              setAutofill(true);\n              store?.setValue(\n                multiSelectable\n                  ? getSelectedValues(event.target)\n                  : event.target.value,\n              );\n            }}\n          >\n            {toArray(value).map((value) => {\n              if (value == null) return null;\n              if (values.includes(value)) return null;\n              return (\n                <option key={value} value={value}>\n                  {value}\n                </option>\n              );\n            })}\n            {values.map((value) => (\n              <option key={value} value={value}>\n                {value}\n              </option>\n            ))}\n          </select>\n          {element}\n        </>\n      );\n    },\n    [\n      store,\n      label,\n      labelledBy,\n      name,\n      form,\n      required,\n      value,\n      multiSelectable,\n      values,\n      props.disabled,\n    ],\n  );\n\n  const children = (\n    <>\n      {value}\n      <SelectArrow />\n    </>\n  );\n\n  const contentElement = useStoreState(store, \"contentElement\");\n\n  props = {\n    role: \"combobox\",\n    \"aria-autocomplete\": \"none\",\n    \"aria-labelledby\": props[\"aria-label\"] != null ? undefined : labelId,\n    \"aria-haspopup\": getPopupRole(contentElement, \"listbox\"),\n    \"data-autofill\": autofill || undefined,\n    \"data-name\": name,\n    children,\n    ...props,\n    ref: useMergeRefs(store.setSelectElement, props.ref),\n    onKeyDown,\n  };\n\n  props = usePopoverDisclosure({ store, toggleOnClick, ...props });\n  props = useCompositeTypeahead<TagName>({ store, ...props });\n\n  return props;\n});\n\n/**\n * Renders a custom select element that controls the visibility of either a\n * [`SelectList`](https://ariakit.com/reference/select-list) or a\n * [`SelectPopover`](https://ariakit.com/reference/select-popover) component.\n *\n * By default, the\n * [`value`](https://ariakit.com/reference/select-provider#value) state is\n * rendered as the children, followed by a\n * [`SelectArrow`](https://ariakit.com/reference/select-arrow) component. This\n * can be customized by passing different children to the component.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx {2}\n * <SelectProvider>\n *   <Select />\n *   <SelectPopover>\n *     <SelectItem value=\"Apple\" />\n *     <SelectItem value=\"Orange\" />\n *   </SelectPopover>\n * </SelectProvider>\n * ```\n */\nexport const Select = forwardRef(function Select(props: SelectProps) {\n  const htmlProps = useSelect(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface SelectOptions<T extends ElementType = TagName>\n  extends\n    PopoverDisclosureOptions<T>,\n    CompositeTypeaheadOptions<T>,\n    Pick<\n      SelectHTMLAttributes<HTMLSelectElement>,\n      \"name\" | \"form\" | \"required\"\n    > {\n  /**\n   * Object returned by the\n   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If\n   * not provided, the closest\n   * [`SelectProvider`](https://ariakit.com/reference/select-provider)\n   * component's context will be used.\n   */\n  store?: SelectStore;\n  /**\n   * Determines if the\n   * [`SelectList`](https://ariakit.com/reference/select-list) or\n   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components\n   * will appear when the user uses arrow keys while the select element is\n   * in focus.\n   *\n   * Live examples:\n   * - [Select Grid](https://ariakit.com/examples/select-grid)\n   * @default true\n   */\n  showOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;\n  /**\n   * Determines whether pressing arrow keys will move the active item even when\n   * the [`SelectList`](https://ariakit.com/reference/select-list) or\n   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components\n   * are hidden.\n   * @default false\n   */\n  moveOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;\n  /**\n   * Determines whether pressing Space, Enter, or a click event will\n   * [`toggle`](https://ariakit.com/reference/use-select-store#toggle) the\n   * [`SelectList`](https://ariakit.com/reference/select-list) or\n   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components.\n   * @default true\n   * @deprecated Use\n   * [`toggleOnClick`](https://ariakit.com/reference/select#toggleonclick)\n   * instead.\n   */\n  toggleOnPress?: BooleanOrCallback<\n    MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>\n  >;\n}\n\nexport type SelectProps<T extends ElementType = TagName> = Props<\n  T,\n  SelectOptions<T>\n>;\n"],"mappings":"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"}

package/dist/select-store-BsLTAyKh.d.ts

@@ -0,0 +1,68 @@
+import { t as DisclosureStore } from "./disclosure-store-BsaBaRKv.js";
+import { i as CompositeStoreOptions, n as CompositeStoreFunctions, o as CompositeStoreState } from "./composite-store-DyJc-XRA.js";
+import { a as PopoverStoreState, n as PopoverStoreFunctions, r as PopoverStoreOptions } from "./popover-store-Bc-l5VVO.js";
+import { t as ComboboxStore } from "./combobox-store-DEVQ45mZ.js";
+import { BivariantCallback, PickRequired } from "@ariakit/utils";
+import { Store } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/select/select-store";
+
+//#region src/select/select-store.d.ts
+declare function useSelectStoreOptions<T extends Core.SelectStoreOptions>(props: T): {
+  id: string | undefined;
+} & T;
+declare function useSelectStoreProps<T extends Core.SelectStore>(store: T, update: () => void, props: SelectStoreProps): T & {
+  disclosure: DisclosureStore | null | undefined;
+} & {
+  combobox: ComboboxStore<import("@ariakit/components/combobox/combobox-store").ComboboxStoreSelectedValue> | null | undefined;
+};
+/**
+ * Creates a select store to control the state of
+ * [Select](https://ariakit.com/components/select) components.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const select = useSelectStore({ defaultValue: "Apple" });
+ *
+ * <Select store={select} />
+ * <SelectPopover store={select}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </SelectPopover>
+ * ```
+ */
+declare function useSelectStore<T extends SelectStoreValue = SelectStoreValue>(props: PickRequired<SelectStoreProps<T>, "value" | "defaultValue">): SelectStore<T>;
+declare function useSelectStore(props?: SelectStoreProps): SelectStore;
+type SelectStoreValue = Core.SelectStoreValue;
+interface SelectStoreItem extends Core.SelectStoreItem {}
+interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue> extends Core.SelectStoreState<T>, CompositeStoreState<SelectStoreItem>, PopoverStoreState {}
+interface SelectStoreFunctions<T extends SelectStoreValue = SelectStoreValue> extends Pick<SelectStoreOptions<T>, "combobox" | "disclosure">, Omit<Core.SelectStoreFunctions<T>, "combobox" | "disclosure">, CompositeStoreFunctions<SelectStoreItem>, PopoverStoreFunctions {}
+interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValue> extends Omit<Core.SelectStoreOptions<T>, "combobox" | "disclosure">, CompositeStoreOptions<SelectStoreItem>, PopoverStoreOptions {
+  /**
+   * Function that will be called when the
+   * [`value`](https://ariakit.com/reference/select-provider#value) state
+   * changes.
+   *
+   * Live examples:
+   * - [Form with Select](https://ariakit.com/examples/form-select)
+   * - [Select Grid](https://ariakit.com/examples/select-grid)
+   * - [Select with custom
+   *   items](https://ariakit.com/examples/select-item-custom)
+   * - [Multi-Select](https://ariakit.com/examples/select-multiple)
+   * - [Toolbar with Select](https://ariakit.com/examples/toolbar-select)
+   * - [Select with Next.js App
+   *   Router](https://ariakit.com/examples/select-next-router)
+   */
+  setValue?: BivariantCallback<(value: SelectStoreState<T>["value"]) => void>;
+  /**
+   * A reference to a [combobox
+   * store](https://ariakit.com/reference/use-combobox-store). It's
+   * automatically set when composing [Select with
+   * Combobox](https://ariakit.com/examples/select-combobox).
+   */
+  combobox?: ComboboxStore | null;
+}
+interface SelectStoreProps<T extends SelectStoreValue = SelectStoreValue> extends SelectStoreOptions<T>, Omit<Core.SelectStoreProps<T>, "combobox" | "disclosure"> {}
+interface SelectStore<T extends SelectStoreValue = SelectStoreValue> extends SelectStoreFunctions<T>, Omit<Store<Core.SelectStore<T>>, "combobox" | "disclosure"> {}
+//#endregion
+export { SelectStoreProps as a, useSelectStore as c, SelectStoreOptions as i, useSelectStoreOptions as l, SelectStoreFunctions as n, SelectStoreState as o, SelectStoreItem as r, SelectStoreValue as s, SelectStore as t, useSelectStoreProps as u };
+//# sourceMappingURL=select-store-BsLTAyKh.d.ts.map

package/dist/select-store-BsLTAyKh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-store-BsLTAyKh.d.ts","names":["Core","Store","BivariantCallback","PickRequired","ComboboxStore","CompositeStoreFunctions","CompositeStoreOptions","CompositeStoreState","PopoverStoreFunctions","PopoverStoreOptions","PopoverStoreState","useSelectStoreOptions","T","SelectStoreOptions","props","id","useSelectStoreProps","SelectStore","SelectStoreProps","_$___disclosure_disclosure_store_ts0","DisclosureStore","store","update","disclosure","combobox","ComboboxStoreSelectedValue","useSelectStore","SelectStoreValue","SelectStoreItem","SelectStoreState","SelectStoreFunctions","Pick","Omit","setValue","value"],"sources":["../src/select/select-store.d.ts"],"mappings":";;;;;;;;;iBAMwBW,qBAAAA,WAAgCX,IAAAA,CAAKa,kBAAAA,CAAAA,CAAoBC,KAAAA,EAAOF,CAAAA;EACpFG,EAAAA;AAAAA,IACAH,CAAAA;AAAAA,iBACoBI,mBAAAA,WAA8BhB,IAAAA,CAAKiB,WAAAA,CAAAA,CAAaI,KAAAA,EAAOT,CAAAA,EAAGU,MAAAA,cAAoBR,KAAAA,EAAOI,gBAAAA,GAAmBN,CAAAA;EAC5HW,UAAAA,EAD6HJ,eAAAA;AAAAA;EAG7HK,QAAAA,EAAUpB,aAAAA,uDAAoEqB,0BAAAA;AAAAA;;;;;;;;;;;;AAJ7E;AACL;;;iBAoBwBC,cAAAA,WAAyBC,gBAAAA,GAAmBA,gBAAAA,CAAAA,CAAkBb,KAAAA,EAAOX,YAAAA,CAAae,gBAAAA,CAAiBN,CAAAA,+BAAgCK,WAAAA,CAAYL,CAAAA;AAAAA,iBAC/Ic,cAAAA,CAAeZ,KAAAA,GAAQI,gBAAAA,GAAmBD,WAAW;AAAA,KACjEU,gBAAAA,GAAmB3B,IAAAA,CAAK2B,gBAAgB;AAAA,UACnCC,eAAAA,SAAwB5B,IAAAA,CAAK4B,eAAe;AAAA,UAE5CC,gBAAAA,WAA2BF,gBAAAA,GAAmBA,gBAAAA,UAA0B3B,IAAAA,CAAK6B,gBAAAA,CAAiBjB,CAAAA,GAAIL,mBAAAA,CAAoBqB,eAAAA,GAAkBlB,iBAAAA;AAAAA,UAExIoB,oBAAAA,WAA+BH,gBAAAA,GAAmBA,gBAAAA,UAA0BI,IAAAA,CAAKlB,kBAAAA,CAAmBD,CAAAA,+BAAgCoB,IAAAA,CAAKhC,IAAAA,CAAK8B,oBAAAA,CAAqBlB,CAAAA,+BAAgCP,uBAAAA,CAAwBuB,eAAAA,GAAkBpB,qBAAAA;AAAAA,UAE7OK,kBAAAA,WAA6Bc,gBAAAA,GAAmBA,gBAAAA,UAA0BK,IAAAA,CAAKhC,IAAAA,CAAKa,kBAAAA,CAAmBD,CAAAA,+BAAgCN,qBAAAA,CAAsBsB,eAAAA,GAAkBnB,mBAAAA;EA7BrIQ;;;;;;;;;;;;;AAGiD;AAiB5G;EAyBIgB,QAAAA,GAAW/B,iBAAAA,EAAmBgC,KAAAA,EAAOL,gBAAAA,CAAiBjB,CAAAA;EAzBpBA;;;;;;EAgClCY,QAAAA,GAAWpB,aAAAA;AAAAA;AAAAA,UAEEc,gBAAAA,WAA2BS,gBAAAA,GAAmBA,gBAAAA,UAA0Bd,kBAAAA,CAAmBD,CAAAA,GAAIoB,IAAAA,CAAKhC,IAAAA,CAAKkB,gBAAAA,CAAiBN,CAAAA;AAAAA,UAE1HK,WAAAA,WAAsBU,gBAAAA,GAAmBA,gBAAAA,UAA0BG,oBAAAA,CAAqBlB,CAAAA,GAAIoB,IAAAA,CAAK/B,KAAAA,CAAMD,IAAAA,CAAKiB,WAAAA,CAAYL,CAAAA"}

package/dist/separator/separator.d.ts

@@ -0,0 +1,2 @@
+import { i as useSeparator, n as SeparatorOptions, r as SeparatorProps, t as Separator } from "../separator--ozQfMcK.js";
+export { Separator, SeparatorOptions, SeparatorProps, useSeparator };

package/dist/separator/separator.js

@@ -0,0 +1,36 @@
+"use client";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/separator/separator.tsx
+const TagName = "hr";
+/**
+* Returns props to create a `Separator` component.
+* @see https://ariakit.com/components/separator
+* @example
+* ```jsx
+* const props = useSeparator({ orientation: "horizontal" });
+* <Role {...props} />
+* ```
+*/
+const useSeparator = createHook(function useSeparator({ orientation = "horizontal", ...props }) {
+	props = {
+		role: "separator",
+		"aria-orientation": orientation,
+		...props
+	};
+	return props;
+});
+/**
+* Renders a separator element.
+* @see https://ariakit.com/components/separator
+* @example
+* ```jsx
+* <Separator orientation="horizontal" />
+* ```
+*/
+const Separator = forwardRef(function Separator(props) {
+	return createElement(TagName, useSeparator(props));
+});
+//#endregion
+export { Separator, useSeparator };
+
+//# sourceMappingURL=separator.js.map

package/dist/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../src/separator/separator.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\n\nconst TagName = \"hr\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `Separator` component.\n * @see https://ariakit.com/components/separator\n * @example\n * ```jsx\n * const props = useSeparator({ orientation: \"horizontal\" });\n * <Role {...props} />\n * ```\n */\nexport const useSeparator = createHook<TagName, SeparatorOptions>(\n  function useSeparator({ orientation = \"horizontal\", ...props }) {\n    props = {\n      role: \"separator\",\n      \"aria-orientation\": orientation,\n      ...props,\n    };\n    return props;\n  },\n);\n\n/**\n * Renders a separator element.\n * @see https://ariakit.com/components/separator\n * @example\n * ```jsx\n * <Separator orientation=\"horizontal\" />\n * ```\n */\nexport const Separator = forwardRef(function Separator(props: SeparatorProps) {\n  const htmlProps = useSeparator(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface SeparatorOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * The orientation of the separator.\n   * @default \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport type SeparatorProps<T extends ElementType = TagName> = Props<\n  T,\n  SeparatorOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;MAkBI,eAAQ,WAAA,SAAA,aAAA,EAAA,cAAA,cAAA,GAAA,SAAA;SACA;EACN,MAAA;EACA,oBAAG;EACL,GAAA;CACA;CAEJ,OAAA;;;;;;;;;;MAYE,YAAO,WAAc,SADH,UAAa,OACQ;CACxC,OAAA,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/separator--ozQfMcK.d.ts

@@ -0,0 +1,36 @@
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/separator/separator.d.ts
+declare const TagName = "hr";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Separator` component.
+ * @see https://ariakit.com/components/separator
+ * @example
+ * ```jsx
+ * const props = useSeparator({ orientation: "horizontal" });
+ * <Role {...props} />
+ * ```
+ */
+declare const useSeparator: import("@ariakit/react-utils").Hook<"hr", SeparatorOptions<"hr">>;
+/**
+ * Renders a separator element.
+ * @see https://ariakit.com/components/separator
+ * @example
+ * ```jsx
+ * <Separator orientation="horizontal" />
+ * ```
+ */
+declare const Separator: (props: SeparatorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface SeparatorOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * The orientation of the separator.
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+}
+type SeparatorProps<T extends ElementType = TagName> = Props<T, SeparatorOptions<T>>;
+//#endregion
+export { useSeparator as i, SeparatorOptions as n, SeparatorProps as r, Separator as t };
+//# sourceMappingURL=separator--ozQfMcK.d.ts.map

package/dist/separator--ozQfMcK.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator--ozQfMcK.d.ts","names":["Options","Props","ElementType","TagName","useSeparator","SeparatorOptions","Hook","Separator","SeparatorProps","props","ReactElement","JSXElementConstructor","_T","orientation","T"],"sources":["../src/separator/separator.d.ts"],"mappings":";;;;cAEcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFY;;;;AACpB;AAAA;;;;AADoB,cAYpBC,YAAAA,iCAA6CE,IAAAA,OAAWD,gBAAgB;AAA7F;;;;AAA6F;AAS7F;;;AATA,cASqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,YAA4BH,WAAAA,GAAcC,OAAAA,UAAiBH,OAAAA;EAD3CS;;;;EAM7BI,WAAAA;AAAAA;AAAAA,KAEQL,cAAAA,WAAyBN,WAAAA,GAAcC,OAAAA,IAAWF,KAAAA,CAAMa,CAAAA,EAAGT,gBAAAA,CAAiBS,CAAAA"}

package/dist/store.d.ts

@@ -0,0 +1 @@
+export * from "@ariakit/react-store";

package/dist/store.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@ariakit/react-store";