@ariakit/react-components 0.1.0

package/dist/role/role.js

@@ -0,0 +1,68 @@
+"use client";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/role/role.tsx
+const TagName = "div";
+const elements = [
+	"a",
+	"button",
+	"details",
+	"dialog",
+	"div",
+	"form",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"header",
+	"img",
+	"input",
+	"label",
+	"li",
+	"nav",
+	"ol",
+	"p",
+	"section",
+	"select",
+	"span",
+	"summary",
+	"textarea",
+	"ul",
+	"svg"
+];
+/**
+* Returns props to create a `Role` component.
+* @see https://ariakit.com/components/role
+* @example
+* ```jsx
+* const props = useRole();
+* <Role {...props} />
+* ```
+*/
+const useRole = createHook(function useRole(props) {
+	return props;
+});
+/**
+* Renders an abstract element that supports the `render` prop and a
+* `wrapElement` prop that can be used to wrap the underlying element with React
+* Portal, Context or other component types.
+* @see https://ariakit.com/components/role
+* @example
+* ```jsx
+* <Role render={<div />} />
+* ```
+*/
+const Role = forwardRef(function Role(props) {
+	return createElement(TagName, props);
+});
+Object.assign(Role, elements.reduce((acc, element) => {
+	acc[element] = forwardRef(function Role(props) {
+		return createElement(element, props);
+	});
+	return acc;
+}, {}));
+//#endregion
+export { Role, useRole };
+
+//# sourceMappingURL=role.js.map

package/dist/role/role.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"role.js","names":[],"sources":["../../src/role/role.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport type { ElementType, FC } from \"react\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nconst elements = [\n  \"a\",\n  \"button\",\n  \"details\",\n  \"dialog\",\n  \"div\",\n  \"form\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"header\",\n  \"img\",\n  \"input\",\n  \"label\",\n  \"li\",\n  \"nav\",\n  \"ol\",\n  \"p\",\n  \"section\",\n  \"select\",\n  \"span\",\n  \"summary\",\n  \"textarea\",\n  \"ul\",\n  \"svg\",\n] as const;\n\ntype RoleElements = {\n  [K in (typeof elements)[number]]: FC<RoleProps<K>>;\n};\n\n/**\n * Returns props to create a `Role` component.\n * @see https://ariakit.com/components/role\n * @example\n * ```jsx\n * const props = useRole();\n * <Role {...props} />\n * ```\n */\nexport const useRole = createHook<TagName, RoleOptions>(\n  function useRole(props) {\n    return props;\n  },\n);\n\n/**\n * Renders an abstract element that supports the `render` prop and a\n * `wrapElement` prop that can be used to wrap the underlying element with React\n * Portal, Context or other component types.\n * @see https://ariakit.com/components/role\n * @example\n * ```jsx\n * <Role render={<div />} />\n * ```\n */\nexport const Role = forwardRef(function Role(props: RoleProps) {\n  return createElement(TagName, props);\n}) as FC<RoleProps> & RoleElements;\n\nObject.assign(\n  Role,\n  elements.reduce((acc, element) => {\n    acc[element] = forwardRef(function Role(props: RoleProps<typeof element>) {\n      return createElement(element, props);\n    });\n    return acc;\n  }, {} as RoleElements),\n);\n\nexport interface RoleOptions<\n  _T extends ElementType = TagName,\n> extends Options {}\n\nexport type RoleProps<T extends ElementType = TagName> = Props<\n  T,\n  RoleOptions<T>\n>;\n"],"mappings":";;;AAOA,MAAM,UAAA;MACJ,WAAA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACF;;;;;;;;;;;MAiBI,UAAO,WAAA,SAAA,QAAA,OAAA;CAEX,OAAA;;;;;;;;;;;;MAaE,OAAO,WAAc,SAAS,KAAK,OAAA;CACpC,OAAA,cAAA,SAAA,KAAA;AAED,CAAA;OAGQ,OAAA,MAAW,SAAW,QAAS,KAAK,YAAkC;KACxE,WAAO,WAAc,SAAS,KAAK,OAAA;EACpC,OAAA,cAAA,SAAA,KAAA;CACD,CAAA;CACF,OACF"}

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

@@ -0,0 +1,60 @@
+import { PopoverDisclosureArrowOptions } from "../popover/popover-disclosure-arrow.js";
+import { t as SelectStore } from "../select-store-BsLTAyKh.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/select/select-arrow.d.ts
+declare const TagName = "span";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `SelectArrow` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectArrow({ store });
+ * <Select store={store}>
+ *   {store.value}
+ *   <Role {...props} />
+ * </Select>
+ * <SelectPopover store={store}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </SelectPopover>
+ * ```
+ */
+declare const useSelectArrow: import("@ariakit/react-utils").Hook<"span", SelectArrowOptions<"span">>;
+/**
+ * Renders an arrow pointing to the select popover position. It's usually
+ * rendered inside the [`Select`](https://ariakit.com/reference/select)
+ * component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {4}
+ * <SelectProvider>
+ *   <Select>
+ *     {select.value}
+ *     <SelectArrow />
+ *   </Select>
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+declare const SelectArrow: (props: SelectArrowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface SelectArrowOptions<T extends ElementType = TagName> extends PopoverDisclosureArrowOptions<T> {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If
+   * not provided, the closest [`Select`](https://ariakit.com/reference/select)
+   * or [`SelectProvider`](https://ariakit.com/reference/select-provider)
+   * components' context will be used.
+   */
+  store?: SelectStore;
+}
+type SelectArrowProps<T extends ElementType = TagName> = Props<T, SelectArrowOptions<T>>;
+//#endregion
+export { SelectArrow, SelectArrowOptions, SelectArrowProps, useSelectArrow };
+//# sourceMappingURL=select-arrow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-arrow.d.ts","names":["Props","ElementType","PopoverDisclosureArrowOptions","SelectStore","TagName","useSelectArrow","SelectArrowOptions","Hook","SelectArrow","SelectArrowProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/select/select-arrow.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AACQ;AAkB7B;;;;AAAmG;AAoBnG;;AAxCqD,cAoBhCC,cAAAA,iCAA+CE,IAAAA,SAAaD,kBAAkB;;;;;;;AAoB4C;AAC/I;;;;;;;;;;;;cADqBE,WAAAA,GAAcE,KAAAA,EAAOD,gBAAgB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzGN,kBAAAA,WAA6BL,WAAAA,GAAcG,OAAAA,UAAiBF,6BAAAA,CAA8BW,CAAAA;EAAAA;;;;AAQpF;AAEvB;;EAFIC,KAAAA,GAAQX,WAAAA;AAAAA;AAAAA,KAEAM,gBAAAA,WAA2BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,kBAAAA,CAAmBO,CAAAA"}

package/dist/select/select-arrow.js

@@ -0,0 +1,58 @@
+"use client";
+import { usePopoverDisclosureArrow } from "../popover/popover-disclosure-arrow.js";
+import { useSelectContext } from "./select-context.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/select/select-arrow.tsx
+const TagName = "span";
+/**
+* Returns props to create a `SelectArrow` component.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx
+* const store = useSelectStore();
+* const props = useSelectArrow({ store });
+* <Select store={store}>
+*   {store.value}
+*   <Role {...props} />
+* </Select>
+* <SelectPopover store={store}>
+*   <SelectItem value="Apple" />
+*   <SelectItem value="Orange" />
+* </SelectPopover>
+* ```
+*/
+const useSelectArrow = createHook(function useSelectArrow({ store, ...props }) {
+	const context = useSelectContext();
+	store = store || context;
+	props = usePopoverDisclosureArrow({
+		store,
+		...props
+	});
+	return props;
+});
+/**
+* Renders an arrow pointing to the select popover position. It's usually
+* rendered inside the [`Select`](https://ariakit.com/reference/select)
+* component.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx {4}
+* <SelectProvider>
+*   <Select>
+*     {select.value}
+*     <SelectArrow />
+*   </Select>
+*   <SelectPopover>
+*     <SelectItem value="Apple" />
+*     <SelectItem value="Orange" />
+*   </SelectPopover>
+* </SelectProvider>
+* ```
+*/
+const SelectArrow = forwardRef(function SelectArrow(props) {
+	return createElement(TagName, useSelectArrow(props));
+});
+//#endregion
+export { SelectArrow, useSelectArrow };
+
+//# sourceMappingURL=select-arrow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-arrow.js","names":[],"sources":["../../src/select/select-arrow.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { PopoverDisclosureArrowOptions } from \"../popover/popover-disclosure-arrow.tsx\";\nimport { usePopoverDisclosureArrow } from \"../popover/popover-disclosure-arrow.tsx\";\nimport { useSelectContext } from \"./select-context.tsx\";\nimport type { SelectStore } from \"./select-store.ts\";\n\nconst TagName = \"span\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `SelectArrow` component.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx\n * const store = useSelectStore();\n * const props = useSelectArrow({ store });\n * <Select store={store}>\n *   {store.value}\n *   <Role {...props} />\n * </Select>\n * <SelectPopover store={store}>\n *   <SelectItem value=\"Apple\" />\n *   <SelectItem value=\"Orange\" />\n * </SelectPopover>\n * ```\n */\nexport const useSelectArrow = createHook<TagName, SelectArrowOptions>(\n  function useSelectArrow({ store, ...props }) {\n    const context = useSelectContext();\n    store = store || context;\n    props = usePopoverDisclosureArrow({ store, ...props });\n    return props;\n  },\n);\n\n/**\n * Renders an arrow pointing to the select popover position. It's usually\n * rendered inside the [`Select`](https://ariakit.com/reference/select)\n * component.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx {4}\n * <SelectProvider>\n *   <Select>\n *     {select.value}\n *     <SelectArrow />\n *   </Select>\n *   <SelectPopover>\n *     <SelectItem value=\"Apple\" />\n *     <SelectItem value=\"Orange\" />\n *   </SelectPopover>\n * </SelectProvider>\n * ```\n */\nexport const SelectArrow = forwardRef(function SelectArrow(\n  props: SelectArrowProps,\n) {\n  const htmlProps = useSelectArrow(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface SelectArrowOptions<\n  T extends ElementType = TagName,\n> extends PopoverDisclosureArrowOptions<T> {\n  /**\n   * Object returned by the\n   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If\n   * not provided, the closest [`Select`](https://ariakit.com/reference/select)\n   * or [`SelectProvider`](https://ariakit.com/reference/select-provider)\n   * components' context will be used.\n   */\n  store?: SelectStore;\n}\n\nexport type SelectArrowProps<T extends ElementType = TagName> = Props<\n  T,\n  SelectArrowOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MA8BI,iBAAgB,WAAiB,SAAA,eAAA,EAAA,OAAA,GAAA,SAAA;CACjC,MAAA,UAAQ,iBAAS;CACjB,QAAQ,SAAA;SAA4B,0BAAA;EAAO;EAAU,GAAA;CACrD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;MAyBE,cAAO,WADW,SAAA,YACqB,OAAA;CACxC,OAAA,cAAA,SAAA,eAAA,KAAA,CAAA"}

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

@@ -0,0 +1,27 @@
+import { t as SelectStore } from "../select-store-BsLTAyKh.js";
+import { Dispatch, SetStateAction } from "react";
+
+//#region src/select/select-context.d.ts
+/**
+ * Returns the select store from the nearest select container.
+ * @example
+ * function Select() {
+ *   const store = useSelectContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Select must be wrapped in SelectProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+declare const useSelectContext: () => SelectStore<import("@ariakit/components/select/select-store").SelectStoreValue> | undefined;
+declare const useSelectScopedContext: (onlyScoped?: boolean) => SelectStore<import("@ariakit/components/select/select-store").SelectStoreValue> | undefined;
+declare const useSelectProviderContext: () => SelectStore<import("@ariakit/components/select/select-store").SelectStoreValue> | undefined;
+declare const SelectContextProvider: (props: import("react").ProviderProps<SelectStore<import("@ariakit/components/select/select-store").SelectStoreValue> | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectScopedContextProvider: (props: import("react").ProviderProps<SelectStore<import("@ariakit/components/select/select-store").SelectStoreValue> | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectItemCheckedContext: import("react").Context<boolean>;
+declare const SelectHeadingContext: import("react").Context<[string | undefined, Dispatch<SetStateAction<string | undefined>>] | null>;
+//#endregion
+export { SelectContextProvider, SelectHeadingContext, SelectItemCheckedContext, SelectScopedContextProvider, useSelectContext, useSelectProviderContext, useSelectScopedContext };
+//# sourceMappingURL=select-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-context.d.ts","names":["Dispatch","SetStateAction","SelectStore","useSelectContext","SelectStoreValue","useSelectScopedContext","onlyScoped","useSelectProviderContext","SelectContextProvider","ProviderProps","props","JSX","Element","SelectScopedContextProvider","SelectItemCheckedContext","Context","SelectHeadingContext"],"sources":["../../src/select/select-context.d.ts"],"mappings":";;;;;;AAeA;;;;AAA2H;AAC3H;;;;;;cADqBG,gBAAAA,QAAwBD,WAAW,mDAAmDE,gBAAgB;AAAA,cACtGC,sBAAAA,GAAyBC,UAAAA,eAAyBJ,WAAW,mDAAmDE,gBAAAA;AAAAA,cAChHG,wBAAAA,QAAgCL,WAAW,mDAAmDE,gBAAgB;AAAA,cAC9GI,qBAAAA,GAAwBE,KAAAA,kBAAuBD,aAAAA,CAAcP,WAAW,mDAAmDE,gBAAAA,+CAA+DO,GAAAA,CAAIC,OAAAA;AAAAA,cAC9LC,2BAAAA,GAA8BH,KAAAA,kBAAuBD,aAAAA,CAAcP,WAAW,mDAAmDE,gBAAAA,+CAA+DO,GAAAA,CAAIC,OAAAA;AAAAA,cACpME,wBAAAA,kBAA0CC,OAAO;AAAA,cACjDC,oBAAAA,kBAAsCD,OAAAA,sBAA6Bf,QAAQ,CAACC,cAAAA"}

package/dist/select/select-context.js

@@ -0,0 +1,31 @@
+"use client";
+import { CompositeContextProvider, CompositeScopedContextProvider } from "../composite/composite-context.js";
+import { PopoverContextProvider, PopoverScopedContextProvider } from "../popover/popover-context.js";
+import { createStoreContext } from "@ariakit/react-utils";
+import { createContext } from "react";
+//#region src/select/select-context.tsx
+const ctx = createStoreContext([PopoverContextProvider, CompositeContextProvider], [PopoverScopedContextProvider, CompositeScopedContextProvider]);
+/**
+* Returns the select store from the nearest select container.
+* @example
+* function Select() {
+*   const store = useSelectContext();
+*
+*   if (!store) {
+*     throw new Error("Select must be wrapped in SelectProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const useSelectContext = ctx.useContext;
+const useSelectScopedContext = ctx.useScopedContext;
+const useSelectProviderContext = ctx.useProviderContext;
+const SelectContextProvider = ctx.ContextProvider;
+const SelectScopedContextProvider = ctx.ScopedContextProvider;
+const SelectItemCheckedContext = createContext(false);
+const SelectHeadingContext = createContext(null);
+//#endregion
+export { SelectContextProvider, SelectHeadingContext, SelectItemCheckedContext, SelectScopedContextProvider, useSelectContext, useSelectProviderContext, useSelectScopedContext };
+
+//# sourceMappingURL=select-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-context.js","names":[],"sources":["../../src/select/select-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { createContext } from \"react\";\nimport {\n  CompositeContextProvider,\n  CompositeScopedContextProvider,\n} from \"../composite/composite-context.tsx\";\nimport {\n  PopoverContextProvider,\n  PopoverScopedContextProvider,\n} from \"../popover/popover-context.tsx\";\nimport type { SelectStore } from \"./select-store.ts\";\n\nconst ctx = createStoreContext<SelectStore>(\n  [PopoverContextProvider, CompositeContextProvider],\n  [PopoverScopedContextProvider, CompositeScopedContextProvider],\n);\n\n/**\n * Returns the select store from the nearest select container.\n * @example\n * function Select() {\n *   const store = useSelectContext();\n *\n *   if (!store) {\n *     throw new Error(\"Select must be wrapped in SelectProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const useSelectContext = ctx.useContext;\n\nexport const useSelectScopedContext = ctx.useScopedContext;\n\nexport const useSelectProviderContext = ctx.useProviderContext;\n\nexport const SelectContextProvider = ctx.ContextProvider;\n\nexport const SelectScopedContextProvider = ctx.ScopedContextProvider;\n\nexport const SelectItemCheckedContext = createContext(false);\n\nexport const SelectHeadingContext = createContext<\n  [string | undefined, Dispatch<SetStateAction<string | undefined>>] | null\n>(null);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,mBAAA,IAAA;AAEb,MAAa,yBAAA,IAA2B;AAExC,MAAa,2BAAwB,IAAI;AAEzC,MAAa,wBAAA,IAAA;AAEb,MAAa,8BAA2B,IAAA;AAExC,MAAa,2BAAuB,cAE9B,KAAA"}

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

@@ -0,0 +1,59 @@
+import { n as PopoverDismissOptions } from "../popover-dismiss-DPeI6Zse.js";
+import { t as SelectStore } from "../select-store-BsLTAyKh.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/select/select-dismiss.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `SelectDismiss` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const props = useSelectDismiss();
+ * <Role.button {...props} />
+ * ```
+ */
+declare const useSelectDismiss: import("@ariakit/react-utils").Hook<"button", SelectDismissOptions<"button">>;
+/**
+ * Renders a button that hides a
+ * [`SelectPopover`](https://ariakit.com/reference/select-popover) component
+ * when clicked.
+ *
+ * When this component is rendered within
+ * [`SelectPopover`](https://ariakit.com/reference/select-popover), all
+ * [`SelectItem`](https://ariakit.com/reference/select-item) elements must be
+ * rendered within a [`SelectList`](https://ariakit.com/reference/select-list)
+ * instead of directly within the popover.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {4}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectDismiss />
+ *     <SelectList>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectList>
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+declare const SelectDismiss: (props: SelectDismissProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface SelectDismissOptions<T extends ElementType = TagName> extends PopoverDismissOptions<T> {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook.
+   * If not provided, the closest
+   * [`Select`](https://ariakit.com/reference/select) or
+   * [`SelectProvider`](https://ariakit.com/reference/select-provider)
+   * components' context will be used.
+   */
+  store?: SelectStore;
+}
+type SelectDismissProps<T extends ElementType = TagName> = Props<T, SelectDismissOptions<T>>;
+//#endregion
+export { SelectDismiss, SelectDismissOptions, SelectDismissProps, useSelectDismiss };
+//# sourceMappingURL=select-dismiss.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-dismiss.d.ts","names":["Props","ElementType","PopoverDismissOptions","SelectStore","TagName","useSelectDismiss","SelectDismissOptions","Hook","SelectDismiss","SelectDismissProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/select/select-dismiss.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AADgC,cAYhCC,gBAAAA,iCAAiDE,IAAAA,WAAeD,oBAAoB;AAAzG;;;;AAAyG;AA0BzG;;;;;;;;;AAAmJ;AACnJ;;;;;;;;;;AA3BA,cA0BqBE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC7GN,oBAAAA,WAA+BL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAAvCT;;;;;;AASvC;AAEvB;EAFIU,KAAAA,GAAQX,WAAAA;AAAAA;AAAAA,KAEAM,kBAAAA,WAA6BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,oBAAAA,CAAqBO,CAAAA"}

package/dist/select/select-dismiss.js

@@ -0,0 +1,56 @@
+"use client";
+import { usePopoverDismiss } from "../popover/popover-dismiss.js";
+import { useSelectScopedContext } from "./select-context.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/select/select-dismiss.tsx
+const TagName = "button";
+/**
+* Returns props to create a `SelectDismiss` component.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx
+* const props = useSelectDismiss();
+* <Role.button {...props} />
+* ```
+*/
+const useSelectDismiss = createHook(function useSelectDismiss({ store, ...props }) {
+	const context = useSelectScopedContext();
+	store = store || context;
+	props = usePopoverDismiss({
+		store,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a button that hides a
+* [`SelectPopover`](https://ariakit.com/reference/select-popover) component
+* when clicked.
+*
+* When this component is rendered within
+* [`SelectPopover`](https://ariakit.com/reference/select-popover), all
+* [`SelectItem`](https://ariakit.com/reference/select-item) elements must be
+* rendered within a [`SelectList`](https://ariakit.com/reference/select-list)
+* instead of directly within the popover.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx {4}
+* <SelectProvider>
+*   <Select />
+*   <SelectPopover>
+*     <SelectDismiss />
+*     <SelectList>
+*       <SelectItem value="Apple" />
+*       <SelectItem value="Orange" />
+*     </SelectList>
+*   </SelectPopover>
+* </SelectProvider>
+* ```
+*/
+const SelectDismiss = forwardRef(function SelectDismiss(props) {
+	return createElement(TagName, useSelectDismiss(props));
+});
+//#endregion
+export { SelectDismiss, useSelectDismiss };
+
+//# sourceMappingURL=select-dismiss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-dismiss.js","names":[],"sources":["../../src/select/select-dismiss.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { PopoverDismissOptions } from \"../popover/popover-dismiss.tsx\";\nimport { usePopoverDismiss } from \"../popover/popover-dismiss.tsx\";\nimport { useSelectScopedContext } from \"./select-context.tsx\";\nimport type { SelectStore } from \"./select-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `SelectDismiss` component.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx\n * const props = useSelectDismiss();\n * <Role.button {...props} />\n * ```\n */\nexport const useSelectDismiss = createHook<TagName, SelectDismissOptions>(\n  function useSelectDismiss({ store, ...props }) {\n    const context = useSelectScopedContext();\n    store = store || context;\n    props = usePopoverDismiss({ store, ...props });\n    return props;\n  },\n);\n\n/**\n * Renders a button that hides a\n * [`SelectPopover`](https://ariakit.com/reference/select-popover) component\n * when clicked.\n *\n * When this component is rendered within\n * [`SelectPopover`](https://ariakit.com/reference/select-popover), all\n * [`SelectItem`](https://ariakit.com/reference/select-item) elements must be\n * rendered within a [`SelectList`](https://ariakit.com/reference/select-list)\n * instead of directly within the popover.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx {4}\n * <SelectProvider>\n *   <Select />\n *   <SelectPopover>\n *     <SelectDismiss />\n *     <SelectList>\n *       <SelectItem value=\"Apple\" />\n *       <SelectItem value=\"Orange\" />\n *     </SelectList>\n *   </SelectPopover>\n * </SelectProvider>\n * ```\n */\nexport const SelectDismiss = forwardRef(function SelectDismiss(\n  props: SelectDismissProps,\n) {\n  const htmlProps = useSelectDismiss(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface SelectDismissOptions<\n  T extends ElementType = TagName,\n> extends PopoverDismissOptions<T> {\n  /**\n   * Object returned by the\n   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook.\n   * If not provided, the closest\n   * [`Select`](https://ariakit.com/reference/select) or\n   * [`SelectProvider`](https://ariakit.com/reference/select-provider)\n   * components' context will be used.\n   */\n  store?: SelectStore;\n}\n\nexport type SelectDismissProps<T extends ElementType = TagName> = Props<\n  T,\n  SelectDismissOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;MAsBI,mBAAgB,WAAA,SAAuB,iBAAA,EAAA,OAAA,GAAA,SAAA;CACvC,MAAA,UAAQ,uBAAS;CACjB,QAAQ,SAAA;SAAoB,kBAAA;EAAO;EAAU,GAAA;CAC7C,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BE,gBAAqB,WADH,SAAA,cACqB,OAAA;CACxC,OAAA,cAAA,SAAA,iBAAA,KAAA,CAAA"}

package/dist/select/select-group-label.d.ts

@@ -0,0 +1,61 @@
+import { CompositeGroupLabelOptions } from "../composite/composite-group-label.js";
+import { t as SelectStore } from "../select-store-BsLTAyKh.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/select/select-group-label.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `SelectGroupLabel` component. This hook must be
+ * used in a component that's wrapped with `SelectGroup` so the
+ * `aria-labelledby` prop is properly set on the select group element.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * // This component must be wrapped with SelectGroup
+ * const props = useSelectGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+declare const useSelectGroupLabel: import("@ariakit/react-utils").Hook<"div", SelectGroupLabelOptions<"div">>;
+/**
+ * Renders a label in a select group. This component must be wrapped with
+ * [`SelectGroup`](https://ariakit.com/reference/select-group) so the
+ * `aria-labelledby` prop is properly set on the select group element.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {5,10}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectGroup>
+ *       <SelectGroupLabel>Fruits</SelectGroupLabel>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectGroup>
+ *     <SelectGroup>
+ *       <SelectGroupLabel>Meat</SelectGroupLabel>
+ *       <SelectItem value="Beef" />
+ *       <SelectItem value="Chicken" />
+ *     </SelectGroup>
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+declare const SelectGroupLabel: (props: SelectGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface SelectGroupLabelOptions<T extends ElementType = TagName> extends CompositeGroupLabelOptions<T> {
+  /**
+   * 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;
+}
+type SelectGroupLabelProps<T extends ElementType = TagName> = Props<T, SelectGroupLabelOptions<T>>;
+//#endregion
+export { SelectGroupLabel, SelectGroupLabelOptions, SelectGroupLabelProps, useSelectGroupLabel };
+//# sourceMappingURL=select-group-label.d.ts.map

package/dist/select/select-group-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-group-label.d.ts","names":["Props","ElementType","CompositeGroupLabelOptions","SelectStore","TagName","useSelectGroupLabel","SelectGroupLabelOptions","Hook","SelectGroupLabel","SelectGroupLabelProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/select/select-group-label.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AACQ;AAa7B;;AAfqD,cAehCC,mBAAAA,iCAAoDE,IAAAA,QAAYD,uBAAuB;;AAAA;AAyB5G;;;;;;;;;AAAyJ;AACzJ;;;;;;;;;;;;cADqBE,gBAAAA,GAAmBE,KAAAA,EAAOD,qBAAqB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnHN,uBAAAA,WAAkCL,WAAAA,GAAcG,OAAAA,UAAiBF,0BAAAA,CAA2BW,CAAAA;EAAAA;;;;AAStF;AAEvB;;;EAFIC,KAAAA,GAAQX,WAAAA;AAAAA;AAAAA,KAEAM,qBAAAA,WAAgCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,uBAAAA,CAAwBO,CAAAA"}

package/dist/select/select-group-label.js

@@ -0,0 +1,52 @@
+"use client";
+import { useCompositeGroupLabel } from "../composite/composite-group-label.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/select/select-group-label.tsx
+const TagName = "div";
+/**
+* Returns props to create a `SelectGroupLabel` component. This hook must be
+* used in a component that's wrapped with `SelectGroup` so the
+* `aria-labelledby` prop is properly set on the select group element.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx
+* // This component must be wrapped with SelectGroup
+* const props = useSelectGroupLabel();
+* <Role {...props}>Label</Role>
+* ```
+*/
+const useSelectGroupLabel = createHook(function useSelectGroupLabel(props) {
+	props = useCompositeGroupLabel(props);
+	return props;
+});
+/**
+* Renders a label in a select group. This component must be wrapped with
+* [`SelectGroup`](https://ariakit.com/reference/select-group) so the
+* `aria-labelledby` prop is properly set on the select group element.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx {5,10}
+* <SelectProvider>
+*   <Select />
+*   <SelectPopover>
+*     <SelectGroup>
+*       <SelectGroupLabel>Fruits</SelectGroupLabel>
+*       <SelectItem value="Apple" />
+*       <SelectItem value="Orange" />
+*     </SelectGroup>
+*     <SelectGroup>
+*       <SelectGroupLabel>Meat</SelectGroupLabel>
+*       <SelectItem value="Beef" />
+*       <SelectItem value="Chicken" />
+*     </SelectGroup>
+*   </SelectPopover>
+* </SelectProvider>
+* ```
+*/
+const SelectGroupLabel = forwardRef(function SelectGroupLabel(props) {
+	return createElement(TagName, useSelectGroupLabel(props));
+});
+//#endregion
+export { SelectGroupLabel, useSelectGroupLabel };
+
+//# sourceMappingURL=select-group-label.js.map

package/dist/select/select-group-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-group-label.js","names":[],"sources":["../../src/select/select-group-label.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeGroupLabelOptions } from \"../composite/composite-group-label.tsx\";\nimport { useCompositeGroupLabel } from \"../composite/composite-group-label.tsx\";\nimport type { SelectStore } from \"./select-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `SelectGroupLabel` component. This hook must be\n * used in a component that's wrapped with `SelectGroup` so the\n * `aria-labelledby` prop is properly set on the select group element.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx\n * // This component must be wrapped with SelectGroup\n * const props = useSelectGroupLabel();\n * <Role {...props}>Label</Role>\n * ```\n */\nexport const useSelectGroupLabel = createHook<TagName, SelectGroupLabelOptions>(\n  function useSelectGroupLabel(props) {\n    props = useCompositeGroupLabel(props);\n    return props;\n  },\n);\n\n/**\n * Renders a label in a select group. This component must be wrapped with\n * [`SelectGroup`](https://ariakit.com/reference/select-group) so the\n * `aria-labelledby` prop is properly set on the select group element.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx {5,10}\n * <SelectProvider>\n *   <Select />\n *   <SelectPopover>\n *     <SelectGroup>\n *       <SelectGroupLabel>Fruits</SelectGroupLabel>\n *       <SelectItem value=\"Apple\" />\n *       <SelectItem value=\"Orange\" />\n *     </SelectGroup>\n *     <SelectGroup>\n *       <SelectGroupLabel>Meat</SelectGroupLabel>\n *       <SelectItem value=\"Beef\" />\n *       <SelectItem value=\"Chicken\" />\n *     </SelectGroup>\n *   </SelectPopover>\n * </SelectProvider>\n * ```\n */\nexport const SelectGroupLabel = forwardRef(function SelectGroupLabel(\n  props: SelectGroupLabelProps,\n) {\n  const htmlProps = useSelectGroupLabel(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface SelectGroupLabelOptions<\n  T extends ElementType = TagName,\n> extends CompositeGroupLabelOptions<T> {\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;\n}\n\nexport type SelectGroupLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  SelectGroupLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;MAwBI,sBAAQ,WAA4B,SAAA,oBAAA,OAAA;CACpC,QAAO,uBAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MA8BE,mBAAqB,WADH,SAAA,iBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,oBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,62 @@
+import { CompositeGroupOptions } from "../composite/composite-group.js";
+import { t as SelectStore } from "../select-store-BsLTAyKh.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/select/select-group.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `SelectGroup` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectGroup({ store });
+ * <Select store={store} />
+ * <SelectPopover store={store}>
+ *   <Role {...props}>
+ *     <SelectGroupLabel>Fruits</SelectGroupLabel>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </Role>
+ * </SelectPopover>
+ * ```
+ */
+declare const useSelectGroup: import("@ariakit/react-utils").Hook<"div", SelectGroupOptions<"div">>;
+/**
+ * Renders a group for [`SelectItem`](https://ariakit.com/reference/select-item)
+ * elements. Optionally, a
+ * [`SelectGroupLabel`](https://ariakit.com/reference/select-group-label) can be
+ * rendered as a child to provide a label for the group.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {4-8}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectGroup>
+ *       <SelectGroupLabel>Fruits</SelectGroupLabel>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectGroup>
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+declare const SelectGroup: (props: SelectGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface SelectGroupOptions<T extends ElementType = TagName> extends CompositeGroupOptions<T> {
+  /**
+   * 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;
+}
+type SelectGroupProps<T extends ElementType = TagName> = Props<T, SelectGroupOptions<T>>;
+//#endregion
+export { SelectGroup, SelectGroupOptions, SelectGroupProps, useSelectGroup };
+//# sourceMappingURL=select-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-group.d.ts","names":["Props","ElementType","CompositeGroupOptions","SelectStore","TagName","useSelectGroup","SelectGroupOptions","Hook","SelectGroup","SelectGroupProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/select/select-group.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AACQ;AAkB7B;;;;AAAkG;AAqBlG;;AAzCqD,cAoBhCC,cAAAA,iCAA+CE,IAAAA,QAAYD,kBAAkB;;;;;;;AAqB6C;AAC/I;;;;;;;;;;;;;cADqBE,WAAAA,GAAcE,KAAAA,EAAOD,gBAAgB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzGN,kBAAAA,WAA6BL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAS/FC;;;AAAmB;AAEvB;;;;EAFIA,KAAAA,GAAQX,WAAAA;AAAAA;AAAAA,KAEAM,gBAAAA,WAA2BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,kBAAAA,CAAmBO,CAAAA"}