@ariakit/react-components 0.1.0

package/dist/combobox/combobox-item-check.d.ts

@@ -0,0 +1,61 @@
+import { CheckboxCheckOptions } from "../checkbox/checkbox-check.js";
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/combobox/combobox-item-check.d.ts
+declare const TagName = "span";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `ComboboxItemCheck` component. This hook must be
+ * used in a component that's wrapped with `ComboboxItem` or the `checked` prop
+ * must be explicitly passed to the component.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const props = useComboboxItemCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+declare const useComboboxItemCheck: import("@ariakit/react-utils").Hook<"span", ComboboxItemCheckOptions<"span">>;
+/**
+ * Renders a checkmark icon when the
+ * [`checked`](https://ariakit.com/reference/combobox-item-check#checked) prop
+ * is `true`. The icon can be overridden by providing a different one as
+ * children.
+ *
+ * When rendered inside a
+ * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component, the
+ * [`checked`](https://ariakit.com/reference/combobox-item-check#checked) prop
+ * is automatically derived from the context.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {5,9}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple">
+ *       <ComboboxItemCheck />
+ *       Apple
+ *     </ComboboxItem>
+ *     <ComboboxItem value="Orange">
+ *       <ComboboxItemCheck />
+ *       Orange
+ *     </ComboboxItem>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const ComboboxItemCheck: (props: ComboboxItemCheckProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxItemCheckOptions<T extends ElementType = TagName> extends CheckboxCheckOptions<T> {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook.
+   */
+  store?: ComboboxStore;
+}
+type ComboboxItemCheckProps<T extends ElementType = TagName> = Props<T, ComboboxItemCheckOptions<T>>;
+//#endregion
+export { ComboboxItemCheck, ComboboxItemCheckOptions, ComboboxItemCheckProps, useComboboxItemCheck };
+//# sourceMappingURL=combobox-item-check.d.ts.map

package/dist/combobox/combobox-item-check.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item-check.d.ts","names":["Props","ElementType","CheckboxCheckOptions","ComboboxStore","TagName","useComboboxItemCheck","ComboboxItemCheckOptions","Hook","ComboboxItemCheck","ComboboxItemCheckProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/combobox/combobox-item-check.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAY7B;AAdyD,cAcpCC,oBAAAA,iCAAqDE,IAAAA,SAAaD,wBAAwB;;;AAAA;AA6B/G;;;;;;;;;AAA2J;AAC3J;;;;;;;;;;;;;;;cADqBE,iBAAAA,GAAoBE,KAAAA,EAAOD,sBAAsB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrHN,wBAAAA,WAAmCL,WAAAA,GAAcG,OAAAA,UAAiBF,oBAAAA,CAAqBW,CAAAA;EAM/E;AAAA;AAEzB;;;EAFIC,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,sBAAAA,WAAiCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,wBAAAA,CAAyBO,CAAAA"}

package/dist/combobox/combobox-item-check.js

@@ -0,0 +1,62 @@
+"use client";
+import { useCheckboxCheck } from "../checkbox/checkbox-check.js";
+import { ComboboxItemCheckedContext } from "./combobox-context.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import { useContext } from "react";
+//#region src/combobox/combobox-item-check.tsx
+const TagName = "span";
+/**
+* Returns props to create a `ComboboxItemCheck` component. This hook must be
+* used in a component that's wrapped with `ComboboxItem` or the `checked` prop
+* must be explicitly passed to the component.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const props = useComboboxItemCheck({ checked: true });
+* <Role {...props} />
+* ```
+*/
+const useComboboxItemCheck = createHook(function useComboboxItemCheck({ store, checked, ...props }) {
+	const context = useContext(ComboboxItemCheckedContext);
+	checked = checked ?? context;
+	props = useCheckboxCheck({
+		...props,
+		checked
+	});
+	return props;
+});
+/**
+* Renders a checkmark icon when the
+* [`checked`](https://ariakit.com/reference/combobox-item-check#checked) prop
+* is `true`. The icon can be overridden by providing a different one as
+* children.
+*
+* When rendered inside a
+* [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component, the
+* [`checked`](https://ariakit.com/reference/combobox-item-check#checked) prop
+* is automatically derived from the context.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {5,9}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxPopover>
+*     <ComboboxItem value="Apple">
+*       <ComboboxItemCheck />
+*       Apple
+*     </ComboboxItem>
+*     <ComboboxItem value="Orange">
+*       <ComboboxItemCheck />
+*       Orange
+*     </ComboboxItem>
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxItemCheck = forwardRef(function ComboboxItemCheck(props) {
+	return createElement(TagName, useComboboxItemCheck(props));
+});
+//#endregion
+export { ComboboxItemCheck, useComboboxItemCheck };
+
+//# sourceMappingURL=combobox-item-check.js.map

package/dist/combobox/combobox-item-check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item-check.js","names":[],"sources":["../../src/combobox/combobox-item-check.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport { useContext } from \"react\";\nimport type { CheckboxCheckOptions } from \"../checkbox/checkbox-check.tsx\";\nimport { useCheckboxCheck } from \"../checkbox/checkbox-check.tsx\";\nimport { ComboboxItemCheckedContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"span\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `ComboboxItemCheck` component. This hook must be\n * used in a component that's wrapped with `ComboboxItem` or the `checked` prop\n * must be explicitly passed to the component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const props = useComboboxItemCheck({ checked: true });\n * <Role {...props} />\n * ```\n */\nexport const useComboboxItemCheck = createHook<\n  TagName,\n  ComboboxItemCheckOptions\n>(function useComboboxItemCheck({ store, checked, ...props }) {\n  const context = useContext(ComboboxItemCheckedContext);\n  checked = checked ?? context;\n  props = useCheckboxCheck({ ...props, checked });\n  return props;\n});\n\n/**\n * Renders a checkmark icon when the\n * [`checked`](https://ariakit.com/reference/combobox-item-check#checked) prop\n * is `true`. The icon can be overridden by providing a different one as\n * children.\n *\n * When rendered inside a\n * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component, the\n * [`checked`](https://ariakit.com/reference/combobox-item-check#checked) prop\n * is automatically derived from the context.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {5,9}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Apple\">\n *       <ComboboxItemCheck />\n *       Apple\n *     </ComboboxItem>\n *     <ComboboxItem value=\"Orange\">\n *       <ComboboxItemCheck />\n *       Orange\n *     </ComboboxItem>\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxItemCheck = forwardRef(function ComboboxItemCheck(\n  props: ComboboxItemCheckProps,\n) {\n  const htmlProps = useComboboxItemCheck(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxItemCheckOptions<\n  T extends ElementType = TagName,\n> extends CheckboxCheckOptions<T> {\n  /**\n   * Object returned by the\n   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)\n   * hook.\n   */\n  store?: ComboboxStore;\n}\n\nexport type ComboboxItemCheckProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxItemCheckOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;MA2BE,uBAA2B,WAAA,SAAA,qBAA0B,EAAA,OAAA,SAAA,GAAA,SAAA;CACrD,MAAA,UAAU,WAAW,0BAAA;CACrB,UAAQ,WAAA;SAAsB,iBAAA;EAAO,GAAA;EAAS;CAC9C,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkCC,oBAAqB,WADH,SAAA,kBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,qBAAA,KAAA,CAAA"}

package/dist/combobox/combobox-item-offscreen.d.ts

@@ -0,0 +1,34 @@
+import { CompositeItemOptions } from "../composite/composite-item-offscreen.js";
+import { ComboboxItemOptions as ComboboxItemOptions$1 } from "./combobox-item.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/combobox/combobox-item-offscreen.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+declare function useComboboxItemOffscreen<T extends ElementType, P extends ComboboxItemProps<T>>({
+  store,
+  value,
+  ...props
+}: P): {
+  id: string | undefined;
+  active: boolean;
+  ref: import("react").RefCallback<HTMLDivElement>;
+  "data-offscreen": true | undefined;
+} | {
+  role: string;
+  id: string | undefined;
+  active: boolean;
+  ref: import("react").RefCallback<HTMLDivElement>;
+  "data-offscreen": true | undefined;
+};
+declare const ComboboxItem: ({
+  offscreenMode,
+  offscreenRoot,
+  ...props
+}: ComboboxItemProps) => import("react/jsx-runtime").JSX.Element;
+interface ComboboxItemOptions<T extends ElementType = TagName> extends ComboboxItemOptions$1<T>, Omit<CompositeItemOptions<T>, "store"> {}
+type ComboboxItemProps<T extends ElementType = TagName> = Props<T, ComboboxItemOptions<T>>;
+//#endregion
+export { ComboboxItem, ComboboxItemOptions, ComboboxItemProps, useComboboxItemOffscreen };
+//# sourceMappingURL=combobox-item-offscreen.d.ts.map

package/dist/combobox/combobox-item-offscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item-offscreen.d.ts","names":["Props","ElementType","CompositeItemOptions","Base","TagName","useComboboxItemOffscreen","T","P","ComboboxItemProps","store","value","HTMLDivElement","props","id","active","ref","RefCallback","role","ComboboxItem","offscreenMode","offscreenRoot","JSX","Element","ComboboxItemOptions","Omit"],"sources":["../../src/combobox/combobox-item-offscreen.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAAA,iBACLC,wBAAAA,WAAmCJ,WAAAA,YAAuBO,iBAAAA,CAAkBF,CAAAA,EAAAA,CAAAA;EAAMG,KAAAA;EAAOC,KAAAA;EAAAA,GAAUE;AAAAA,GAASL,CAAAA;EAChIM,EAAAA;EACAC,MAAAA;EACAC,GAAAA,kBAAqBC,WAAAA,CAAYL,cAAAA;EACjC,gBAAA;AAAA;EAEAM,IAAAA;EACAJ,EAAAA;EACAC,MAAAA;EACAC,GAAAA,kBAAqBC,WAAAA,CAAYL,cAAAA;EACjC,gBAAA;AAAA;AAAA,cAEiBO,YAAAA;EAAiBC,aAAAA;EAAeC,aAAAA;EAAAA,GAAkBR;AAAAA,GAASJ,iBAAAA,iCAAkDa,GAAAA,CAAIC,OAAAA;AAAAA,UACrHC,mBAAAA,WAA8BtB,WAAAA,GAAcG,OAAAA,UAAiBD,qBAAAA,CAAyBG,CAAAA,GAAIkB,IAAAA,CAAKtB,oBAAAA,CAAqBI,CAAAA;AAAAA,KAEzHE,iBAAAA,WAA4BP,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMM,CAAAA,EAAGiB,mBAAAA,CAAoBjB,CAAAA"}

package/dist/combobox/combobox-item-offscreen.js

@@ -0,0 +1,53 @@
+"use client";
+import { Role } from "../role/role.js";
+import { ComboboxListRoleContext, useComboboxScopedContext } from "./combobox-context.js";
+import { useCompositeItemOffscreen } from "../composite/composite-item-offscreen.js";
+import { ComboboxItem as ComboboxItem$1 } from "./combobox-item.js";
+import { forwardRef, useMergeRefs } from "@ariakit/react-utils";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/combobox/combobox-item-offscreen.tsx
+const TagName = "div";
+const itemRoleByPopupRole = {
+	menu: "menuitem",
+	listbox: "option",
+	tree: "treeitem"
+};
+function getItemRole(popupRole) {
+	return itemRoleByPopupRole[popupRole] ?? "option";
+}
+function useComboboxItemOffscreen({ store, value, ...props }) {
+	const context = useComboboxScopedContext();
+	store = store || context;
+	const offscreenProps = useCompositeItemOffscreen({
+		store,
+		value,
+		...props
+	});
+	const popupRole = useContext(ComboboxListRoleContext);
+	if (!offscreenProps.active) return {
+		...offscreenProps,
+		role: getItemRole(popupRole)
+	};
+	return offscreenProps;
+}
+const ComboboxItem = forwardRef(function ComboboxItem({ offscreenMode, offscreenRoot, ...props }) {
+	const { active, ref, ...rest } = useComboboxItemOffscreen({
+		offscreenMode,
+		offscreenRoot,
+		...props
+	});
+	const allProps = {
+		...rest,
+		...props,
+		ref: useMergeRefs(ref, props.ref)
+	};
+	if (active) return /* @__PURE__ */ jsx(ComboboxItem$1, { ...allProps });
+	const { store, value, hideOnClick, setValueOnClick, selectValueOnClick, resetValueOnSelect, focusOnHover, blurOnHoverEnd, moveOnKeyPress, getItem, ...htmlProps } = allProps;
+	const Component = Role[TagName];
+	return /* @__PURE__ */ jsx(Component, { ...htmlProps });
+});
+//#endregion
+export { ComboboxItem, useComboboxItemOffscreen };
+
+//# sourceMappingURL=combobox-item-offscreen.js.map

package/dist/combobox/combobox-item-offscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item-offscreen.js","names":["key","Base.ComboboxItem"],"sources":["../../src/combobox/combobox-item-offscreen.tsx"],"sourcesContent":["import { useMergeRefs, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport { useContext } from \"react\";\nimport type { CompositeItemOptions } from \"../composite/composite-item-offscreen.tsx\";\nimport { useCompositeItemOffscreen } from \"../composite/composite-item-offscreen.tsx\";\nimport { Role } from \"../role/role.tsx\";\nimport {\n  ComboboxListRoleContext,\n  useComboboxScopedContext,\n} from \"./combobox-context.tsx\";\nimport * as Base from \"./combobox-item.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nconst itemRoleByPopupRole = {\n  menu: \"menuitem\",\n  listbox: \"option\",\n  tree: \"treeitem\",\n};\n\nfunction getItemRole(popupRole?: string) {\n  const key = popupRole as keyof typeof itemRoleByPopupRole;\n  return itemRoleByPopupRole[key] ?? \"option\";\n}\n\nexport function useComboboxItemOffscreen<\n  T extends ElementType,\n  // oxlint-disable-next-line no-unnecessary-type-parameters\n  P extends ComboboxItemProps<T>,\n>({ store, value, ...props }: P) {\n  const context = useComboboxScopedContext();\n  store = store || context;\n\n  const offscreenProps = useCompositeItemOffscreen({ store, value, ...props });\n  const popupRole = useContext(ComboboxListRoleContext);\n\n  if (!offscreenProps.active) {\n    return {\n      ...offscreenProps,\n      role: getItemRole(popupRole),\n    };\n  }\n\n  return offscreenProps;\n}\n\nexport const ComboboxItem = forwardRef(function ComboboxItem({\n  offscreenMode,\n  offscreenRoot,\n  ...props\n}: ComboboxItemProps) {\n  const { active, ref, ...rest } = useComboboxItemOffscreen({\n    offscreenMode,\n    offscreenRoot,\n    ...props,\n  });\n  const allProps = { ...rest, ...props, ref: useMergeRefs(ref, props.ref) };\n  if (active) {\n    return <Base.ComboboxItem {...allProps} />;\n  }\n  // Remove ComboboxItem props\n  const {\n    store,\n    value,\n    hideOnClick,\n    setValueOnClick,\n    selectValueOnClick,\n    resetValueOnSelect,\n    focusOnHover,\n    blurOnHoverEnd,\n    moveOnKeyPress,\n    getItem,\n    ...htmlProps\n  } = allProps;\n  const Component = Role[TagName];\n  return <Component {...htmlProps} />;\n});\n\nexport interface ComboboxItemOptions<T extends ElementType = TagName>\n  extends Base.ComboboxItemOptions<T>, Omit<CompositeItemOptions<T>, \"store\"> {}\n\nexport type ComboboxItemProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxItemOptions<T>\n>;\n"],"mappings":";;;;;;;;;AAgBA,MAAM,UAAA;MACJ,sBAAM;CACN,MAAA;CACA,SAAM;CACR,MAAA;AAEA;SAES,YAAA,WAAoBA;CAC7B,OAAA,oBAAA,cAAA;AAEA;SAKQ,yBAAU,EAAA,OAAyB,OAAA,GAAA,SAAA;CACzC,MAAA,UAAQ,yBAAS;CAEjB,QAAM,SAAA;OAA6C,iBAAA,0BAAA;EAAO;EAAO;EAAU,GAAA;CAC3E,CAAA;CAEA,MAAK,YAAA,WACH,uBAAO;KACF,CAAA,eAAA,QAAA,OAAA;EACH,GAAA;EACF,MAAA,YAAA,SAAA;CAGF;CACF,OAAA;AAEA;MAKE,eAAgB,WAAQ,SAAS,aAAA,EAAA,eAAyB,eAAA,GAAA,SAAA;OACxD,EAAA,QAAA,KAAA,GAAA,SAAA,yBAAA;EACA;EACA;EACD,GAAA;CACD,CAAA;OAAsB,WAAA;EAAM,GAAG;EAAO,GAAA;EAAkC,KAAA,aAAA,KAAA,MAAA,GAAA;CACxE;CAIA,IAAA,QACE,OAGA,oBAAA,gBACA,EAAA,GAAA,SAAA,CAAA;CAQF,MAAM,EAAA,OAAA,OAAY,aAAK,iBAAA,oBAAA,oBAAA,cAAA,gBAAA,gBAAA,SAAA,GAAA,cAAA;CACvB,MAAA,YAAO,KAAA;CACR,OAAA,oBAAA,WAAA,EAAA,GAAA,UAAA,CAAA"}

package/dist/combobox/combobox-item-value.d.ts

@@ -0,0 +1,103 @@
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType, ReactElement } from "react";
+
+//#region src/combobox/combobox-item-value.d.ts
+declare const TagName = "span";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `ComboboxItemValue` component that displays a value
+ * element inside a combobox item. The value will be split into span elements
+ * and returned as the children prop. The portions of the value that correspond
+ * to the store value will have a `data-user-value` attribute. The other
+ * portions will have a `data-autocomplete-value` attribute.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore({ value: "p" });
+ * const props = useComboboxItemValue({ store, value: "Apple" });
+ * <Role {...props} />
+ * // This will result in the following DOM:
+ * <span>
+ *   <span data-autocomplete-value>A</span>
+ *   <span data-user-value>p</span>
+ *   <span data-user-value>p</span>
+ *   <span data-autocomplete-value>le</span>
+ * </span>
+ * ```
+ */
+declare const useComboboxItemValue: import("@ariakit/react-utils").Hook<"span", ComboboxItemValueOptions<"span">>;
+/**
+ * Renders a `span` element with the combobox item value as children. The value
+ * is split into span elements. Portions of the value matching the user input
+ * will have a
+ * [`data-user-value`](https://ariakit.com/guide/styling#data-user-value)
+ * attribute, while the rest will have a
+ * [`data-autocomplete-value`](https://ariakit.com/guide/styling#data-autocomplete-value)
+ * attribute.
+ *
+ * The item value is automatically set to the value of the closest
+ * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component's
+ * [`value`](https://ariakit.com/reference/combobox-item#value) prop. The user
+ * input value is automatically set to the combobox store's
+ * [`value`](https://ariakit.com/reference/use-combobox-store#value) state. Both
+ * values can be overridden by providing the
+ * [`value`](https://ariakit.com/reference/combobox-item-value#value) and
+ * [`userValue`](https://ariakit.com/reference/combobox-item-value#uservalue)
+ * props, respectively.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {5} "value"
+ * <ComboboxProvider value="p">
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple">
+ *       <ComboboxItemValue />
+ *     </ComboboxItem>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ *
+ * // The Apple item will have a value element that looks like this:
+ * <span>
+ *   <span data-autocomplete-value>A</span>
+ *   <span data-user-value>p</span>
+ *   <span data-user-value>p</span>
+ *   <span data-autocomplete-value>le</span>
+ * </span>
+ * ```
+ */
+declare const ComboboxItemValue: (props: ComboboxItemValueProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxItemValueOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook. If not provided, the closest
+   * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or
+   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components' context will be used.
+   */
+  store?: ComboboxStore;
+  /**
+   * The current combobox item value. If not provided, the parent
+   * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component's
+   * [`value`](https://ariakit.com/reference/combobox-item#value) prop will be
+   * used.
+   *
+   * This is the value rendered by the component. It can be customized to
+   * display different children.
+   */
+  value?: string;
+  /**
+   * The current user input value. If not provided, the combobox store's
+   * [`value`](https://ariakit.com/reference/use-combobox-store#value) state
+   * will be used.
+   *
+   * This is the value used to highlight the matching portions of the item
+   * value. It can be customized to highlight different portions.
+   */
+  userValue?: string | string[];
+}
+type ComboboxItemValueProps<T extends ElementType = TagName> = Props<T, ComboboxItemValueOptions<T>>;
+//#endregion
+export { ComboboxItemValue, ComboboxItemValueOptions, ComboboxItemValueProps, useComboboxItemValue };
+//# sourceMappingURL=combobox-item-value.d.ts.map

package/dist/combobox/combobox-item-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item-value.d.ts","names":["Options","Props","ElementType","ReactElement","ComboboxStore","TagName","useComboboxItemValue","ComboboxItemValueOptions","Hook","ComboboxItemValue","ComboboxItemValueProps","props","JSXElementConstructor","_T","store","value","userValue","T"],"sources":["../../src/combobox/combobox-item-value.d.ts"],"mappings":";;;;;cAGcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAsB7B;;;;AAA+G;AAwC/G;;;;;;AAhEyD,cAwBpCC,oBAAAA,iCAAqDE,IAAAA,SAAaD,wBAAwB;;;AAwC4B;AAC3I;;;;;;;;;;;;;;;;;;AA4Ba;AAEb;;;;;;;;;;;;;;;;;cA/BqBE,iBAAAA,GAAoBE,KAAAA,EAAOD,sBAAAA,KAA2BP,YAAY,+BAA+BS,qBAAAA;AAAAA,UACrGL,wBAAAA,YAAoCL,WAAAA,GAAcG,OAAAA,UAAiBL,OAAAA;EA8BqB;;;;;;;;EArBrGc,KAAAA,GAAQV,aAAAA;;;;;;;;;;EAURW,KAAAA;;;;;;;;;EASAC,SAAAA;AAAAA;AAAAA,KAEQN,sBAAAA,WAAiCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMgB,CAAAA,EAAGV,wBAAAA,CAAyBU,CAAAA"}

package/dist/combobox/combobox-item-value.js

@@ -0,0 +1,143 @@
+"use client";
+import { ComboboxItemValueContext, useComboboxScopedContext } from "./combobox-context.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import { normalizeString, removeUndefinedValues, toArray } from "@ariakit/utils";
+import { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/combobox/combobox-item-value.tsx
+const TagName = "span";
+function normalizeValue(value) {
+	return normalizeString(value).toLowerCase();
+}
+function getOffsets(string, values) {
+	const offsets = [];
+	for (const value of values) {
+		let pos = 0;
+		const length = value.length;
+		while (string.indexOf(value, pos) !== -1) {
+			const index = string.indexOf(value, pos);
+			if (index !== -1) offsets.push([index, length]);
+			pos = index + 1;
+		}
+	}
+	return offsets;
+}
+function filterOverlappingOffsets(offsets) {
+	return offsets.filter(([offset, length], i, arr) => {
+		return !arr.some(([o, l], j) => j !== i && o <= offset && o + l >= offset + length);
+	});
+}
+function sortOffsets(offsets) {
+	return offsets.sort(([a], [b]) => a - b);
+}
+function splitValue(itemValue, userValue) {
+	if (!itemValue) return itemValue;
+	if (!userValue) return itemValue;
+	const userValues = toArray(userValue).filter(Boolean).map(normalizeValue);
+	const parts = [];
+	const span = (value, autocomplete = false) => /* @__PURE__ */ jsx("span", {
+		"data-autocomplete-value": autocomplete ? "" : void 0,
+		"data-user-value": autocomplete ? void 0 : "",
+		children: value
+	}, parts.length);
+	const offsets = sortOffsets(filterOverlappingOffsets(getOffsets(normalizeValue(itemValue), new Set(userValues))));
+	const firstEntry = offsets[0];
+	if (!firstEntry) {
+		parts.push(span(itemValue, true));
+		return parts;
+	}
+	const [firstOffset] = firstEntry;
+	[itemValue.slice(0, firstOffset), ...offsets.flatMap(([offset, length], i) => {
+		const value = itemValue.slice(offset, offset + length);
+		const nextOffset = offsets[i + 1]?.[0];
+		return [value, itemValue.slice(offset + length, nextOffset)];
+	})].forEach((value, i) => {
+		if (!value) return;
+		parts.push(span(value, i % 2 === 0));
+	});
+	return parts;
+}
+/**
+* Returns props to create a `ComboboxItemValue` component that displays a value
+* element inside a combobox item. The value will be split into span elements
+* and returned as the children prop. The portions of the value that correspond
+* to the store value will have a `data-user-value` attribute. The other
+* portions will have a `data-autocomplete-value` attribute.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const store = useComboboxStore({ value: "p" });
+* const props = useComboboxItemValue({ store, value: "Apple" });
+* <Role {...props} />
+* // This will result in the following DOM:
+* <span>
+*   <span data-autocomplete-value>A</span>
+*   <span data-user-value>p</span>
+*   <span data-user-value>p</span>
+*   <span data-autocomplete-value>le</span>
+* </span>
+* ```
+*/
+const useComboboxItemValue = createHook(function useComboboxItemValue({ store, value, userValue, ...props }) {
+	const context = useComboboxScopedContext();
+	store = store || context;
+	const itemContext = useContext(ComboboxItemValueContext);
+	const itemValue = value ?? itemContext;
+	const inputValue = useStoreState(store, (state) => userValue ?? state?.value);
+	props = {
+		children: useMemo(() => {
+			if (!itemValue) return;
+			if (!inputValue) return itemValue;
+			return splitValue(itemValue, inputValue);
+		}, [itemValue, inputValue]),
+		...props
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a `span` element with the combobox item value as children. The value
+* is split into span elements. Portions of the value matching the user input
+* will have a
+* [`data-user-value`](https://ariakit.com/guide/styling#data-user-value)
+* attribute, while the rest will have a
+* [`data-autocomplete-value`](https://ariakit.com/guide/styling#data-autocomplete-value)
+* attribute.
+*
+* The item value is automatically set to the value of the closest
+* [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component's
+* [`value`](https://ariakit.com/reference/combobox-item#value) prop. The user
+* input value is automatically set to the combobox store's
+* [`value`](https://ariakit.com/reference/use-combobox-store#value) state. Both
+* values can be overridden by providing the
+* [`value`](https://ariakit.com/reference/combobox-item-value#value) and
+* [`userValue`](https://ariakit.com/reference/combobox-item-value#uservalue)
+* props, respectively.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {5} "value"
+* <ComboboxProvider value="p">
+*   <Combobox />
+*   <ComboboxPopover>
+*     <ComboboxItem value="Apple">
+*       <ComboboxItemValue />
+*     </ComboboxItem>
+*   </ComboboxPopover>
+* </ComboboxProvider>
+*
+* // The Apple item will have a value element that looks like this:
+* <span>
+*   <span data-autocomplete-value>A</span>
+*   <span data-user-value>p</span>
+*   <span data-user-value>p</span>
+*   <span data-autocomplete-value>le</span>
+* </span>
+* ```
+*/
+const ComboboxItemValue = forwardRef(function ComboboxItemValue(props) {
+	return createElement(TagName, useComboboxItemValue(props));
+});
+//#endregion
+export { ComboboxItemValue, useComboboxItemValue };
+
+//# sourceMappingURL=combobox-item-value.js.map

package/dist/combobox/combobox-item-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item-value.js","names":[],"sources":["../../src/combobox/combobox-item-value.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  toArray,\n  normalizeString,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { ElementType, ReactElement } from \"react\";\nimport { useContext, useMemo } from \"react\";\nimport {\n  ComboboxItemValueContext,\n  useComboboxScopedContext,\n} from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"span\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nfunction normalizeValue(value: string) {\n  return normalizeString(value).toLowerCase();\n}\n\nfunction getOffsets(string: string, values: Iterable<string>) {\n  const offsets = [] as Array<[number, number]>;\n  for (const value of values) {\n    let pos = 0;\n    const length = value.length;\n    while (string.indexOf(value, pos) !== -1) {\n      const index = string.indexOf(value, pos);\n      if (index !== -1) {\n        offsets.push([index, length]);\n      }\n      pos = index + 1;\n    }\n  }\n  return offsets;\n}\n\nfunction filterOverlappingOffsets(offsets: Array<[number, number]>) {\n  return offsets.filter(([offset, length], i, arr) => {\n    return !arr.some(\n      ([o, l], j) => j !== i && o <= offset && o + l >= offset + length,\n    );\n  });\n}\n\nfunction sortOffsets(offsets: Array<[number, number]>) {\n  return offsets.sort(([a], [b]) => a - b);\n}\n\nfunction splitValue(itemValue?: string | null, userValue?: string | string[]) {\n  if (!itemValue) return itemValue;\n  if (!userValue) return itemValue;\n  const userValues = toArray(userValue).filter(Boolean).map(normalizeValue);\n  const parts: ReactElement[] = [];\n\n  const span = (value: string, autocomplete = false) => (\n    <span\n      key={parts.length}\n      data-autocomplete-value={autocomplete ? \"\" : undefined}\n      data-user-value={autocomplete ? undefined : \"\"}\n    >\n      {value}\n    </span>\n  );\n\n  const offsets = sortOffsets(\n    filterOverlappingOffsets(\n      // Convert userValues into a set to avoid duplicates\n      getOffsets(normalizeValue(itemValue), new Set(userValues)),\n    ),\n  );\n\n  const firstEntry = offsets[0];\n\n  if (!firstEntry) {\n    parts.push(span(itemValue, true));\n    return parts;\n  }\n\n  const [firstOffset] = firstEntry;\n\n  const values = [\n    itemValue.slice(0, firstOffset),\n    ...offsets.flatMap(([offset, length], i) => {\n      const value = itemValue.slice(offset, offset + length);\n      const nextOffset = offsets[i + 1]?.[0];\n      const nextValue = itemValue.slice(offset + length, nextOffset);\n      return [value, nextValue];\n    }),\n  ];\n\n  values.forEach((value, i) => {\n    if (!value) return;\n    parts.push(span(value, i % 2 === 0));\n  });\n\n  return parts;\n}\n\n/**\n * Returns props to create a `ComboboxItemValue` component that displays a value\n * element inside a combobox item. The value will be split into span elements\n * and returned as the children prop. The portions of the value that correspond\n * to the store value will have a `data-user-value` attribute. The other\n * portions will have a `data-autocomplete-value` attribute.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore({ value: \"p\" });\n * const props = useComboboxItemValue({ store, value: \"Apple\" });\n * <Role {...props} />\n * // This will result in the following DOM:\n * <span>\n *   <span data-autocomplete-value>A</span>\n *   <span data-user-value>p</span>\n *   <span data-user-value>p</span>\n *   <span data-autocomplete-value>le</span>\n * </span>\n * ```\n */\nexport const useComboboxItemValue = createHook<\n  TagName,\n  ComboboxItemValueOptions\n>(function useComboboxItemValue({ store, value, userValue, ...props }) {\n  const context = useComboboxScopedContext();\n  store = store || context;\n\n  const itemContext = useContext(ComboboxItemValueContext);\n  const itemValue = value ?? itemContext;\n\n  const inputValue = useStoreState(store, (state) => userValue ?? state?.value);\n\n  const children = useMemo(() => {\n    if (!itemValue) return;\n    if (!inputValue) return itemValue;\n    return splitValue(itemValue, inputValue);\n  }, [itemValue, inputValue]);\n\n  props = {\n    children,\n    ...props,\n  };\n\n  return removeUndefinedValues(props);\n});\n\n/**\n * Renders a `span` element with the combobox item value as children. The value\n * is split into span elements. Portions of the value matching the user input\n * will have a\n * [`data-user-value`](https://ariakit.com/guide/styling#data-user-value)\n * attribute, while the rest will have a\n * [`data-autocomplete-value`](https://ariakit.com/guide/styling#data-autocomplete-value)\n * attribute.\n *\n * The item value is automatically set to the value of the closest\n * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component's\n * [`value`](https://ariakit.com/reference/combobox-item#value) prop. The user\n * input value is automatically set to the combobox store's\n * [`value`](https://ariakit.com/reference/use-combobox-store#value) state. Both\n * values can be overridden by providing the\n * [`value`](https://ariakit.com/reference/combobox-item-value#value) and\n * [`userValue`](https://ariakit.com/reference/combobox-item-value#uservalue)\n * props, respectively.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {5} \"value\"\n * <ComboboxProvider value=\"p\">\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Apple\">\n *       <ComboboxItemValue />\n *     </ComboboxItem>\n *   </ComboboxPopover>\n * </ComboboxProvider>\n *\n * // The Apple item will have a value element that looks like this:\n * <span>\n *   <span data-autocomplete-value>A</span>\n *   <span data-user-value>p</span>\n *   <span data-user-value>p</span>\n *   <span data-autocomplete-value>le</span>\n * </span>\n * ```\n */\nexport const ComboboxItemValue = forwardRef(function ComboboxItemValue(\n  props: ComboboxItemValueProps,\n) {\n  const htmlProps = useComboboxItemValue(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxItemValueOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)\n   * hook. If not provided, the closest\n   * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or\n   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n   * components' context will be used.\n   */\n  store?: ComboboxStore;\n  /**\n   * The current combobox item value. If not provided, the parent\n   * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component's\n   * [`value`](https://ariakit.com/reference/combobox-item#value) prop will be\n   * used.\n   *\n   * This is the value rendered by the component. It can be customized to\n   * display different children.\n   */\n  value?: string;\n  /**\n   * The current user input value. If not provided, the combobox store's\n   * [`value`](https://ariakit.com/reference/use-combobox-store#value) state\n   * will be used.\n   *\n   * This is the value used to highlight the matching portions of the item\n   * value. It can be customized to highlight different portions.\n   */\n  userValue?: string | string[];\n}\n\nexport type ComboboxItemValueProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxItemValueOptions<T>\n>;\n"],"mappings":";;;;;;;;AAmBA,MAAA,UAAS;SACA,eAAgB,OAAO;CAChC,OAAA,gBAAA,KAAA,EAAA,YAAA;AAEA;SACQ,WAAW,QAAA,QAAA;CACjB,MAAK,UAAM,CAAA;MACL,MAAM,SAAA,QAAA;EACV,IAAA,MAAM;EACN,MAAA,SAAc,MAAA;SACN,OAAA,QAAe,OAAA,GAAQ,MAAO,IAAG;GACvC,MAAI,QAAU,OACZ,QAAQ,OAAM,GAAO;GAEvB,IAAA,UAAc,IAAA,QAAA,KAAA,CAAA,OAAA,MAAA,CAAA;GAChB,MAAA,QAAA;EACF;CACA;CACF,OAAA;AAEA;SACS,yBAAyB,SAAS;QACvC,QAAY,QACL,CAAA,QAAI,SAAY,GAAK,QAAK;EAElC,OAAA,CAAA,IAAA,MAAA,CAAA,GAAA,IAAA,MAAA,MAAA,KAAA,KAAA,UAAA,IAAA,KAAA,SAAA,MAAA;CACH,CAAA;AAEA;SACS,YAAQ,SAAY;CAC7B,OAAA,QAAA,MAAA,CAAA,IAAA,CAAA,OAAA,IAAA,CAAA;AAEA;SACO,WAAW,WAAO,WAAA;CACvB,IAAI,CAAC,WAAW,OAAO;CACvB,IAAA,CAAA,WAAM,OAAa;CACnB,MAAM,aAAyB,QAAA,SAAA,EAAA,OAAA,OAAA,EAAA,IAAA,cAAA;CAE/B,MAAM,QAAQ,CAAA;OAGV,QAAA,OAAA,eAAyB,UAAoB,oBAAA,QAAA;EAC7C,2BAAiB,eAAe,KAAY,KAAA;qBAE3C,eAAA,KAAA,IAAA;EACG,UALO;CAQf,GAAA,MAAM,MAAA;CAON,MAAM,UAAA,YAAqB,yBAAA,WAAA,eAAA,SAAA,GAAA,IAAA,IAAA,UAAA,CAAA,CAAA,CAAA;CAE3B,MAAK,aAAY,QAAA;KACf,CAAA,YAAgB;EAChB,MAAA,KAAO,KAAA,WAAA,IAAA,CAAA;EACT,OAAA;CAEA;CAYA,MATE,CAAA,eAAmB;EAEjB,UAAM,MAAQ,GAAA,WAAgB,GAAA,GAAA,QAAQ,SAAe,CAAA,QAAA,SAAA,MAAA;EACrD,MAAM,QAAA,UAAa,MAAQ,QAAS,SAAA,MAAA;EAEpC,MAAA,aADkB,QAAU,IAAM,KAAA;EAEnC,OAGI,CAAA,OAAS,UAAa,MAAA,SAAA,QAAA,UAAA,CAAA;EAC3B,CAAA,EAAA,SAAY,OAAA,MAAA;EACZ,IAAA,CAAA,OAAW;EACZ,MAAA,KAAA,KAAA,OAAA,IAAA,MAAA,CAAA,CAAA;CAED,CAAA;CACF,OAAA;;;;;;;;;;;;;;;;;;;;;;;MA2BE,uBAAgB,WAAA,SAAyB,qBAAA,EAAA,OAAA,OAAA,WAAA,GAAA,SAAA;CACzC,MAAA,UAAQ,yBAAS;CAEjB,QAAM,SAAA;CACN,MAAM,cAAY,WAAS,wBAAA;CAE3B,MAAM,YAAA,SAAa;CAQnB,MAAA,aAAQ,cAAA,QAAA,UAAA,aAAA,OAAA,KAAA;SACN;YANK,cAAW;GAChB,IAAI,CAAC,WAAA;GACL,IAAA,CAAA,YAAO,OAAW;GACpB,OAAI,WAAW,WAGN,UAAA;EACP,GAAG,CAAA,WAAA,UAAA,CAAA;EACL,GAAA;CAEA;CACD,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6CC,oBAAqB,WADH,SAAA,kBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,qBAAA,KAAA,CAAA"}