@ariakit/react-components 0.1.0

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

@@ -0,0 +1,55 @@
+import { CompositeGroupLabelOptions } from "../composite/composite-group-label.js";
+import { t as MenuStore } from "../menu-store-0CKKmNek.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/menu/menu-group-label.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `MenuGroupLabel` component. This hook must be used
+ * in a component that's wrapped with `MenuGroup` so the `aria-labelledby` prop
+ * is properly set on the menu group element.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * // This component must be wrapped with MenuGroup
+ * const props = useMenuGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+declare const useMenuGroupLabel: import("@ariakit/react-utils").Hook<"div", MenuGroupLabelOptions<"div">>;
+/**
+ * Renders a label in a menu group. This component should be wrapped with
+ * [`MenuGroup`](https://ariakit.com/reference/menu-group) so the
+ * `aria-labelledby` is correctly set on the group element.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx {5}
+ * <MenuProvider>
+ *   <MenuButton>Recent Items</MenuButton>
+ *   <Menu>
+ *     <MenuGroup>
+ *       <MenuGroupLabel>Applications</MenuGroupLabel>
+ *       <MenuItem>Google Chrome.app</MenuItem>
+ *       <MenuItem>Safari.app</MenuItem>
+ *     </MenuGroup>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+declare const MenuGroupLabel: (props: MenuGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface MenuGroupLabelOptions<T extends ElementType = TagName> extends CompositeGroupLabelOptions<T> {
+  /**
+   * Object returned by the
+   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not
+   * provided, the closest [`Menu`](https://ariakit.com/reference/menu) or
+   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) components'
+   * context will be used.
+   */
+  store?: MenuStore;
+}
+type MenuGroupLabelProps<T extends ElementType = TagName> = Props<T, MenuGroupLabelOptions<T>>;
+//#endregion
+export { MenuGroupLabel, MenuGroupLabelOptions, MenuGroupLabelProps, useMenuGroupLabel };
+//# sourceMappingURL=menu-group-label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-label.d.ts","names":["Props","ElementType","CompositeGroupLabelOptions","MenuStore","TagName","useMenuGroupLabel","MenuGroupLabelOptions","Hook","MenuGroupLabel","MenuGroupLabelProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/menu/menu-group-label.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAa7B;;AAfiD,cAe5BC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;;AAAA;AAoBxG;;;;;;;;;AAAqJ;AACrJ;;;;;;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,WAAgCL,WAAAA,GAAcG,OAAAA,UAAiBF,0BAAAA,CAA2BW,CAAAA;EAAD;;;;;;;EAQtGC,KAAAA,GAAQX,SAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}

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

@@ -0,0 +1,47 @@
+"use client";
+import { useCompositeGroupLabel } from "../composite/composite-group-label.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/menu/menu-group-label.tsx
+const TagName = "div";
+/**
+* Returns props to create a `MenuGroupLabel` component. This hook must be used
+* in a component that's wrapped with `MenuGroup` so the `aria-labelledby` prop
+* is properly set on the menu group element.
+* @see https://ariakit.com/components/menu
+* @example
+* ```jsx
+* // This component must be wrapped with MenuGroup
+* const props = useMenuGroupLabel();
+* <Role {...props}>Label</Role>
+* ```
+*/
+const useMenuGroupLabel = createHook(function useMenuGroupLabel(props) {
+	props = useCompositeGroupLabel(props);
+	return props;
+});
+/**
+* Renders a label in a menu group. This component should be wrapped with
+* [`MenuGroup`](https://ariakit.com/reference/menu-group) so the
+* `aria-labelledby` is correctly set on the group element.
+* @see https://ariakit.com/components/menu
+* @example
+* ```jsx {5}
+* <MenuProvider>
+*   <MenuButton>Recent Items</MenuButton>
+*   <Menu>
+*     <MenuGroup>
+*       <MenuGroupLabel>Applications</MenuGroupLabel>
+*       <MenuItem>Google Chrome.app</MenuItem>
+*       <MenuItem>Safari.app</MenuItem>
+*     </MenuGroup>
+*   </Menu>
+* </MenuProvider>
+* ```
+*/
+const MenuGroupLabel = forwardRef(function MenuGroupLabel(props) {
+	return createElement(TagName, useMenuGroupLabel(props));
+});
+//#endregion
+export { MenuGroupLabel, useMenuGroupLabel };
+
+//# sourceMappingURL=menu-group-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-label.js","names":[],"sources":["../../src/menu/menu-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 { MenuStore } from \"./menu-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `MenuGroupLabel` component. This hook must be used\n * in a component that's wrapped with `MenuGroup` so the `aria-labelledby` prop\n * is properly set on the menu group element.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx\n * // This component must be wrapped with MenuGroup\n * const props = useMenuGroupLabel();\n * <Role {...props}>Label</Role>\n * ```\n */\nexport const useMenuGroupLabel = createHook<TagName, MenuGroupLabelOptions>(\n  function useMenuGroupLabel(props) {\n    props = useCompositeGroupLabel(props);\n    return props;\n  },\n);\n\n/**\n * Renders a label in a menu group. This component should be wrapped with\n * [`MenuGroup`](https://ariakit.com/reference/menu-group) so the\n * `aria-labelledby` is correctly set on the group element.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx {5}\n * <MenuProvider>\n *   <MenuButton>Recent Items</MenuButton>\n *   <Menu>\n *     <MenuGroup>\n *       <MenuGroupLabel>Applications</MenuGroupLabel>\n *       <MenuItem>Google Chrome.app</MenuItem>\n *       <MenuItem>Safari.app</MenuItem>\n *     </MenuGroup>\n *   </Menu>\n * </MenuProvider>\n * ```\n */\nexport const MenuGroupLabel = forwardRef(function MenuGroupLabel(\n  props: MenuGroupLabelProps,\n) {\n  const htmlProps = useMenuGroupLabel(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface MenuGroupLabelOptions<\n  T extends ElementType = TagName,\n> extends CompositeGroupLabelOptions<T> {\n  /**\n   * Object returned by the\n   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not\n   * provided, the closest [`Menu`](https://ariakit.com/reference/menu) or\n   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) components'\n   * context will be used.\n   */\n  store?: MenuStore;\n}\n\nexport type MenuGroupLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  MenuGroupLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;MAwBI,oBAAQ,WAA4B,SAAA,kBAAA,OAAA;CACpC,QAAO,uBAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;;;;;MAyBE,iBAAqB,WADH,SAAA,eACqB,OAAA;CACxC,OAAA,cAAA,SAAA,kBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,61 @@
+import { CompositeGroupOptions } from "../composite/composite-group.js";
+import { t as MenuStore } from "../menu-store-0CKKmNek.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/menu/menu-group.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `MenuGroup` component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore();
+ * const props = useMenuGroup({ store });
+ * <MenuButton store={store}>Recent Items</MenuButton>
+ * <Menu store={store}>
+ *   <Role {...props}>
+ *     <MenuGroupLabel>Applications</MenuGroupLabel>
+ *     <MenuItem>Google Chrome.app</MenuItem>
+ *     <MenuItem>Safari.app</MenuItem>
+ *   </Role>
+ * </Menu>
+ * ```
+ */
+declare const useMenuGroup: import("@ariakit/react-utils").Hook<"div", MenuGroupOptions<"div">>;
+/**
+ * Renders a group for [`MenuItem`](https://ariakit.com/reference/menu-item)
+ * elements. Optionally, a
+ * [`MenuGroupLabel`](https://ariakit.com/reference/menu-group-label) can be
+ * rendered as a child to provide a label for the group.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx {4-8}
+ * <MenuProvider>
+ *   <MenuButton>Recent Items</MenuButton>
+ *   <Menu>
+ *     <MenuGroup>
+ *       <MenuGroupLabel>Applications</MenuGroupLabel>
+ *       <MenuItem>Google Chrome.app</MenuItem>
+ *       <MenuItem>Safari.app</MenuItem>
+ *     </MenuGroup>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+declare const MenuGroup: (props: MenuGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface MenuGroupOptions<T extends ElementType = TagName> extends CompositeGroupOptions<T> {
+  /**
+   * Object returned by the
+   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not
+   * provided, the closest [`Menu`](https://ariakit.com/reference/menu) or
+   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) components'
+   * context will be used.
+   */
+  store?: MenuStore;
+}
+type MenuGroupProps<T extends ElementType = TagName> = Props<T, MenuGroupOptions<T>>;
+//#endregion
+export { MenuGroup, MenuGroupOptions, MenuGroupProps, useMenuGroup };
+//# sourceMappingURL=menu-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group.d.ts","names":["Props","ElementType","CompositeGroupOptions","MenuStore","TagName","useMenuGroup","MenuGroupOptions","Hook","MenuGroup","MenuGroupProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/menu/menu-group.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAkB7B;;;;AAA8F;AAqB9F;;AAzCiD,cAoB5BC,YAAAA,iCAA6CE,IAAAA,QAAYD,gBAAgB;;;;;;;AAqB6C;AAC3I;;;;;;;;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAQ7FC;;;AAAiB;AAErB;;;EAFIA,KAAAA,GAAQX,SAAAA;AAAAA;AAAAA,KAEAM,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/menu/menu-group.js

@@ -0,0 +1,53 @@
+"use client";
+import { useCompositeGroup } from "../composite/composite-group.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/menu/menu-group.tsx
+const TagName = "div";
+/**
+* Returns props to create a `MenuGroup` component.
+* @see https://ariakit.com/components/menu
+* @example
+* ```jsx
+* const store = useMenuStore();
+* const props = useMenuGroup({ store });
+* <MenuButton store={store}>Recent Items</MenuButton>
+* <Menu store={store}>
+*   <Role {...props}>
+*     <MenuGroupLabel>Applications</MenuGroupLabel>
+*     <MenuItem>Google Chrome.app</MenuItem>
+*     <MenuItem>Safari.app</MenuItem>
+*   </Role>
+* </Menu>
+* ```
+*/
+const useMenuGroup = createHook(function useMenuGroup(props) {
+	props = useCompositeGroup(props);
+	return props;
+});
+/**
+* Renders a group for [`MenuItem`](https://ariakit.com/reference/menu-item)
+* elements. Optionally, a
+* [`MenuGroupLabel`](https://ariakit.com/reference/menu-group-label) can be
+* rendered as a child to provide a label for the group.
+* @see https://ariakit.com/components/menu
+* @example
+* ```jsx {4-8}
+* <MenuProvider>
+*   <MenuButton>Recent Items</MenuButton>
+*   <Menu>
+*     <MenuGroup>
+*       <MenuGroupLabel>Applications</MenuGroupLabel>
+*       <MenuItem>Google Chrome.app</MenuItem>
+*       <MenuItem>Safari.app</MenuItem>
+*     </MenuGroup>
+*   </Menu>
+* </MenuProvider>
+* ```
+*/
+const MenuGroup = forwardRef(function MenuGroup(props) {
+	return createElement(TagName, useMenuGroup(props));
+});
+//#endregion
+export { MenuGroup, useMenuGroup };
+
+//# sourceMappingURL=menu-group.js.map

package/dist/menu/menu-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group.js","names":[],"sources":["../../src/menu/menu-group.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeGroupOptions } from \"../composite/composite-group.tsx\";\nimport { useCompositeGroup } from \"../composite/composite-group.tsx\";\nimport type { MenuStore } from \"./menu-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `MenuGroup` component.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx\n * const store = useMenuStore();\n * const props = useMenuGroup({ store });\n * <MenuButton store={store}>Recent Items</MenuButton>\n * <Menu store={store}>\n *   <Role {...props}>\n *     <MenuGroupLabel>Applications</MenuGroupLabel>\n *     <MenuItem>Google Chrome.app</MenuItem>\n *     <MenuItem>Safari.app</MenuItem>\n *   </Role>\n * </Menu>\n * ```\n */\nexport const useMenuGroup = createHook<TagName, MenuGroupOptions>(\n  function useMenuGroup(props) {\n    props = useCompositeGroup(props);\n    return props;\n  },\n);\n\n/**\n * Renders a group for [`MenuItem`](https://ariakit.com/reference/menu-item)\n * elements. Optionally, a\n * [`MenuGroupLabel`](https://ariakit.com/reference/menu-group-label) can be\n * rendered as a child to provide a label for the group.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx {4-8}\n * <MenuProvider>\n *   <MenuButton>Recent Items</MenuButton>\n *   <Menu>\n *     <MenuGroup>\n *       <MenuGroupLabel>Applications</MenuGroupLabel>\n *       <MenuItem>Google Chrome.app</MenuItem>\n *       <MenuItem>Safari.app</MenuItem>\n *     </MenuGroup>\n *   </Menu>\n * </MenuProvider>\n * ```\n */\nexport const MenuGroup = forwardRef(function MenuGroup(props: MenuGroupProps) {\n  const htmlProps = useMenuGroup(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface MenuGroupOptions<\n  T extends ElementType = TagName,\n> extends CompositeGroupOptions<T> {\n  /**\n   * Object returned by the\n   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not\n   * provided, the closest [`Menu`](https://ariakit.com/reference/menu) or\n   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) components'\n   * context will be used.\n   */\n  store?: MenuStore;\n}\n\nexport type MenuGroupProps<T extends ElementType = TagName> = Props<\n  T,\n  MenuGroupOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MA6BI,eAAQ,WAAuB,SAAA,aAAA,OAAA;CAC/B,QAAO,kBAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;;;;;;MAwBE,YAAO,WAAc,SADH,UAAa,OACQ;CACxC,OAAA,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/menu/menu-heading.d.ts

@@ -0,0 +1,50 @@
+import { HovercardHeadingOptions } from "../hovercard/hovercard-heading.js";
+import { t as MenuStore } from "../menu-store-0CKKmNek.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/menu/menu-heading.d.ts
+declare const TagName = "h1";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `MenuHeading` component. This hook must be used in
+ * a component that's wrapped with `Menu` so the `aria-labelledby` prop is
+ * properly set on the menu element.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Menu
+ * const props = useMenuHeading();
+ * <Role {...props}>Heading</Role>
+ * ```
+ */
+declare const useMenuHeading: import("@ariakit/react-utils").Hook<"h1", MenuHeadingOptions<"h1">>;
+/**
+ * Renders a heading in a menu. This component must be wrapped within
+ * [`Menu`](https://ariakit.com/reference/menu) so the `aria-labelledby` prop is
+ * properly set on the content element.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * <MenuProvider>
+ *   <Menu>
+ *     <MenuHeading>Heading</MenuHeading>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+declare const MenuHeading: (props: MenuHeadingProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface MenuHeadingOptions<T extends ElementType = TagName> extends HovercardHeadingOptions<T> {
+  /**
+   * Object returned by the
+   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not
+   * provided, the closest [`Menu`](https://ariakit.com/reference/menu) or
+   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) components'
+   * context will be used.
+   */
+  store?: MenuStore;
+}
+type MenuHeadingProps<T extends ElementType = TagName> = Props<T, MenuHeadingOptions<T>>;
+//#endregion
+export { MenuHeading, MenuHeadingOptions, MenuHeadingProps, useMenuHeading };
+//# sourceMappingURL=menu-heading.d.ts.map

package/dist/menu/menu-heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-heading.d.ts","names":["Props","ElementType","HovercardHeadingOptions","MenuStore","TagName","useMenuHeading","MenuHeadingOptions","Hook","MenuHeading","MenuHeadingProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/menu/menu-heading.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAa7B;;AAfiD,cAe5BC,cAAAA,iCAA+CE,IAAAA,OAAWD,kBAAkB;;AAAA;AAejG;;;;;;;;;AAA+I;AAC/I;;cADqBE,WAAAA,GAAcE,KAAAA,EAAOD,gBAAgB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzGN,kBAAAA,WAA6BL,WAAAA,GAAcG,OAAAA,UAAiBF,uBAAAA,CAAwBW,CAAAA;EAAzCT;;;;;;;EAQxDU,KAAAA,GAAQX,SAAAA;AAAAA;AAAAA,KAEAM,gBAAAA,WAA2BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,kBAAAA,CAAmBO,CAAAA"}

package/dist/menu/menu-heading.js

@@ -0,0 +1,42 @@
+"use client";
+import { useHovercardHeading } from "../hovercard/hovercard-heading.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/menu/menu-heading.tsx
+const TagName = "h1";
+/**
+* Returns props to create a `MenuHeading` component. This hook must be used in
+* a component that's wrapped with `Menu` so the `aria-labelledby` prop is
+* properly set on the menu element.
+* @see https://ariakit.com/components/menu
+* @example
+* ```jsx
+* // This component must be wrapped with Menu
+* const props = useMenuHeading();
+* <Role {...props}>Heading</Role>
+* ```
+*/
+const useMenuHeading = createHook(function useMenuHeading(props) {
+	props = useHovercardHeading(props);
+	return props;
+});
+/**
+* Renders a heading in a menu. This component must be wrapped within
+* [`Menu`](https://ariakit.com/reference/menu) so the `aria-labelledby` prop is
+* properly set on the content element.
+* @see https://ariakit.com/components/menu
+* @example
+* ```jsx
+* <MenuProvider>
+*   <Menu>
+*     <MenuHeading>Heading</MenuHeading>
+*   </Menu>
+* </MenuProvider>
+* ```
+*/
+const MenuHeading = forwardRef(function MenuHeading(props) {
+	return createElement(TagName, useMenuHeading(props));
+});
+//#endregion
+export { MenuHeading, useMenuHeading };
+
+//# sourceMappingURL=menu-heading.js.map

package/dist/menu/menu-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-heading.js","names":[],"sources":["../../src/menu/menu-heading.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { HovercardHeadingOptions } from \"../hovercard/hovercard-heading.tsx\";\nimport { useHovercardHeading } from \"../hovercard/hovercard-heading.tsx\";\nimport type { MenuStore } from \"./menu-store.ts\";\n\nconst TagName = \"h1\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `MenuHeading` component. This hook must be used in\n * a component that's wrapped with `Menu` so the `aria-labelledby` prop is\n * properly set on the menu element.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx\n * // This component must be wrapped with Menu\n * const props = useMenuHeading();\n * <Role {...props}>Heading</Role>\n * ```\n */\nexport const useMenuHeading = createHook<TagName, MenuHeadingOptions>(\n  function useMenuHeading(props) {\n    props = useHovercardHeading(props);\n    return props;\n  },\n);\n\n/**\n * Renders a heading in a menu. This component must be wrapped within\n * [`Menu`](https://ariakit.com/reference/menu) so the `aria-labelledby` prop is\n * properly set on the content element.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx\n * <MenuProvider>\n *   <Menu>\n *     <MenuHeading>Heading</MenuHeading>\n *   </Menu>\n * </MenuProvider>\n * ```\n */\nexport const MenuHeading = forwardRef(function MenuHeading(\n  props: MenuHeadingProps,\n) {\n  const htmlProps = useMenuHeading(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface MenuHeadingOptions<\n  T extends ElementType = TagName,\n> extends HovercardHeadingOptions<T> {\n  /**\n   * Object returned by the\n   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not\n   * provided, the closest [`Menu`](https://ariakit.com/reference/menu) or\n   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) components'\n   * context will be used.\n   */\n  store?: MenuStore;\n}\n\nexport type MenuHeadingProps<T extends ElementType = TagName> = Props<\n  T,\n  MenuHeadingOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;MAwBI,iBAAQ,WAAyB,SAAA,eAAA,OAAA;CACjC,QAAO,oBAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;MAoBE,cAAO,WADW,SAAA,YACqB,OAAA;CACxC,OAAA,cAAA,SAAA,eAAA,KAAA,CAAA"}

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

@@ -0,0 +1,58 @@
+import { CheckboxCheckOptions } from "../checkbox/checkbox-check.js";
+import { t as MenuStore } from "../menu-store-0CKKmNek.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/menu/menu-item-check.d.ts
+declare const TagName = "span";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `MenuItemCheck` component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * const props = useMenuItemCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+declare const useMenuItemCheck: import("@ariakit/react-utils").Hook<"span", MenuItemCheckOptions<"span">>;
+/**
+ * Renders a checkmark icon when the
+ * [`checked`](https://ariakit.com/reference/menu-item-check#checked) prop is
+ * `true`. The icon can be overridden by providing a different one as children.
+ *
+ * When rendered inside
+ * [`MenuItemCheckbox`](https://ariakit.com/reference/menu-item-checkbox) or
+ * [`MenuItemRadio`](https://ariakit.com/reference/menu-item-radio) components,
+ * the [`checked`](https://ariakit.com/reference/menu-item-check#checked) prop
+ * is automatically derived from the context.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx {5,9}
+ * <MenuProvider defaultValues={{ apple: true, orange: false }}>
+ *   <MenuButton>Fruits</MenuButton>
+ *   <Menu>
+ *     <MenuItemCheckbox name="apple">
+ *       <MenuItemCheck />
+ *       Apple
+ *     </MenuItemCheckbox>
+ *     <MenuItemCheckbox name="orange">
+ *       <MenuItemCheck />
+ *       Orange
+ *     </MenuItemCheckbox>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+declare const MenuItemCheck: (props: MenuItemCheckProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface MenuItemCheckOptions<T extends ElementType = TagName> extends Omit<CheckboxCheckOptions<T>, "store"> {
+  /**
+   * Object returned by the
+   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook.
+   */
+  store?: MenuStore;
+}
+type MenuItemCheckProps<T extends ElementType = TagName> = Props<T, MenuItemCheckOptions<T>>;
+//#endregion
+export { MenuItemCheck, MenuItemCheckOptions, MenuItemCheckProps, useMenuItemCheck };
+//# sourceMappingURL=menu-item-check.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-check.d.ts","names":["Props","ElementType","CheckboxCheckOptions","MenuStore","TagName","useMenuItemCheck","MenuItemCheckOptions","Hook","MenuItemCheck","MenuItemCheckProps","props","ReactElement","JSXElementConstructor","T","Omit","store"],"sources":["../../src/menu/menu-item-check.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AAD4B,cAY5BC,gBAAAA,iCAAiDE,IAAAA,SAAaD,oBAAoB;AAAvG;;;;AAAuG;AA6BvG;;;;;;;;;AAAmJ;AACnJ;;;;;;;;;;;;;AA9BA,cA6BqBE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC7GN,oBAAAA,WAA+BL,WAAAA,GAAcG,OAAAA,UAAiBU,IAAAA,CAAKZ,oBAAAA,CAAqBW,CAAAA;EAArBX;;;;EAKhFa,KAAAA,GAAQZ,SAAAA;AAAAA;AAAAA,KAEAM,kBAAAA,WAA6BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,oBAAAA,CAAqBO,CAAAA"}

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

@@ -0,0 +1,60 @@
+"use client";
+import { useCheckboxCheck } from "../checkbox/checkbox-check.js";
+import { MenuItemCheckedContext } from "./menu-context.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import { useContext } from "react";
+//#region src/menu/menu-item-check.tsx
+const TagName = "span";
+/**
+* Returns props to create a `MenuItemCheck` component.
+* @see https://ariakit.com/components/menu
+* @example
+* ```jsx
+* const props = useMenuItemCheck({ checked: true });
+* <Role {...props} />
+* ```
+*/
+const useMenuItemCheck = createHook(function useMenuItemCheck({ store, checked, ...props }) {
+	const context = useContext(MenuItemCheckedContext);
+	checked = checked ?? context;
+	props = useCheckboxCheck({
+		...props,
+		checked
+	});
+	return props;
+});
+/**
+* Renders a checkmark icon when the
+* [`checked`](https://ariakit.com/reference/menu-item-check#checked) prop is
+* `true`. The icon can be overridden by providing a different one as children.
+*
+* When rendered inside
+* [`MenuItemCheckbox`](https://ariakit.com/reference/menu-item-checkbox) or
+* [`MenuItemRadio`](https://ariakit.com/reference/menu-item-radio) components,
+* the [`checked`](https://ariakit.com/reference/menu-item-check#checked) prop
+* is automatically derived from the context.
+* @see https://ariakit.com/components/menu
+* @example
+* ```jsx {5,9}
+* <MenuProvider defaultValues={{ apple: true, orange: false }}>
+*   <MenuButton>Fruits</MenuButton>
+*   <Menu>
+*     <MenuItemCheckbox name="apple">
+*       <MenuItemCheck />
+*       Apple
+*     </MenuItemCheckbox>
+*     <MenuItemCheckbox name="orange">
+*       <MenuItemCheck />
+*       Orange
+*     </MenuItemCheckbox>
+*   </Menu>
+* </MenuProvider>
+* ```
+*/
+const MenuItemCheck = forwardRef(function MenuItemCheck(props) {
+	return createElement(TagName, useMenuItemCheck(props));
+});
+//#endregion
+export { MenuItemCheck, useMenuItemCheck };
+
+//# sourceMappingURL=menu-item-check.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-check.js","names":[],"sources":["../../src/menu/menu-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 { MenuItemCheckedContext } from \"./menu-context.tsx\";\nimport type { MenuStore } from \"./menu-store.ts\";\n\nconst TagName = \"span\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `MenuItemCheck` component.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx\n * const props = useMenuItemCheck({ checked: true });\n * <Role {...props} />\n * ```\n */\nexport const useMenuItemCheck = createHook<TagName, MenuItemCheckOptions>(\n  function useMenuItemCheck({ store, checked, ...props }) {\n    const context = useContext(MenuItemCheckedContext);\n    checked = checked ?? context;\n    props = useCheckboxCheck({ ...props, checked });\n    return props;\n  },\n);\n\n/**\n * Renders a checkmark icon when the\n * [`checked`](https://ariakit.com/reference/menu-item-check#checked) prop is\n * `true`. The icon can be overridden by providing a different one as children.\n *\n * When rendered inside\n * [`MenuItemCheckbox`](https://ariakit.com/reference/menu-item-checkbox) or\n * [`MenuItemRadio`](https://ariakit.com/reference/menu-item-radio) components,\n * the [`checked`](https://ariakit.com/reference/menu-item-check#checked) prop\n * is automatically derived from the context.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx {5,9}\n * <MenuProvider defaultValues={{ apple: true, orange: false }}>\n *   <MenuButton>Fruits</MenuButton>\n *   <Menu>\n *     <MenuItemCheckbox name=\"apple\">\n *       <MenuItemCheck />\n *       Apple\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox name=\"orange\">\n *       <MenuItemCheck />\n *       Orange\n *     </MenuItemCheckbox>\n *   </Menu>\n * </MenuProvider>\n * ```\n */\nexport const MenuItemCheck = forwardRef(function MenuItemCheck(\n  props: MenuItemCheckProps,\n) {\n  const htmlProps = useMenuItemCheck(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface MenuItemCheckOptions<\n  T extends ElementType = TagName,\n> extends Omit<CheckboxCheckOptions<T>, \"store\"> {\n  /**\n   * Object returned by the\n   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook.\n   */\n  store?: MenuStore;\n}\n\nexport type MenuItemCheckProps<T extends ElementType = TagName> = Props<\n  T,\n  MenuItemCheckOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;MAuBI,mBAAgB,WAAW,SAAA,iBAAsB,EAAA,OAAA,SAAA,GAAA,SAAA;CACjD,MAAA,UAAU,WAAW,sBAAA;CACrB,UAAQ,WAAA;SAAsB,iBAAA;EAAO,GAAA;EAAS;CAC9C,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkCE,gBAAqB,WADH,SAAA,cACqB,OAAA;CACxC,OAAA,cAAA,SAAA,iBAAA,KAAA,CAAA"}

package/dist/menu/menu-item-checkbox.d.ts

@@ -0,0 +1,104 @@
+import { CheckboxOptions } from "../checkbox/checkbox.js";
+import { t as MenuStore } from "../menu-store-0CKKmNek.js";
+import { MenuItemOptions } from "./menu-item.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/menu/menu-item-checkbox.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `MenuItemCheckbox` component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore({ defaultValues: { apple: false } });
+ * const props = useMenuItemCheckbox({ store, name: "apple" });
+ * <MenuButton store={store}>Fruits</MenuButton>
+ * <Menu store={store}>
+ *   <Role {...props}>Apple</Role>
+ * </Menu>
+ * ```
+ */
+declare const useMenuItemCheckbox: import("@ariakit/react-utils").Hook<"div", MenuItemCheckboxOptions<"div">>;
+/**
+ * Renders a [`menuitemcheckbox`](https://w3c.github.io/aria/#menuitemcheckbox)
+ * element within a [`Menu`](https://ariakit.com/reference/menu) component. The
+ * [`name`](https://ariakit.com/reference/menu-item-checkbox#name) prop must be
+ * provided to identify the field in the
+ * [`values`](https://ariakit.com/reference/menu-provider#values) state.
+ *
+ * A [`MenuItemCheck`](https://ariakit.com/reference/menu-item-check) can be
+ * used to render a checkmark inside this component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * The [`name`](https://ariakit.com/reference/menu-item-checkbox#name) prop can
+ * refer to a single value in the state:
+ * ```jsx {4-7}
+ * <MenuProvider defaultValues={{ warnBeforeQuitting: true }}>
+ *   <MenuButton>Chrome</MenuButton>
+ *   <Menu>
+ *     <MenuItemCheckbox name="warnBeforeQuitting">
+ *       <MenuItemCheck />
+ *       Warn Before Quitting
+ *     </MenuItemCheckbox>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ * @example
+ * Or it can refer to an array of values, in which case the
+ * [`value`](https://ariakit.com/reference/menu-item-checkbox#value) prop must
+ * be provided:
+ * ```jsx {4-9}
+ * <MenuProvider defaultValues={{ watching: ["issues"] }}>
+ *   <MenuButton>Watch</MenuButton>
+ *   <Menu>
+ *     <MenuItemCheckbox name="watching" value="issues">
+ *       Issues
+ *     </MenuItemCheckbox>
+ *     <MenuItemCheckbox name="watching" value="pull-requests">
+ *       Pull Requests
+ *     </MenuItemCheckbox>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+declare const MenuItemCheckbox: (props: MenuItemCheckboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface MenuItemCheckboxOptions<T extends ElementType = TagName> extends MenuItemOptions<T>, Omit<CheckboxOptions<T>, "store"> {
+  /**
+   * Object returned by the
+   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not
+   * provided, the closest [`Menu`](https://ariakit.com/reference/menu) or
+   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) components'
+   * context will be used.
+   */
+  store?: MenuStore;
+  /**
+   * The name of the field in the
+   * [`values`](https://ariakit.com/reference/menu-provider#values) state.
+   *
+   * Live examples:
+   * - [MenuItemCheckbox](https://ariakit.com/examples/menu-item-checkbox)
+   */
+  name: string;
+  /**
+   * The controlled checked state of the element. It will set the menu
+   * [`values`](https://ariakit.com/reference/menu-provider#values) state if
+   * provided.
+   */
+  checked?: boolean;
+  /**
+   * The default checked state of the element. It will set the default value in
+   * the menu [`values`](https://ariakit.com/reference/menu-provider#values)
+   * state if provided.
+   */
+  defaultChecked?: boolean;
+  /**
+   * @default false
+   */
+  hideOnClick?: MenuItemOptions<T>["hideOnClick"];
+}
+type MenuItemCheckboxProps<T extends ElementType = TagName> = Props<T, MenuItemCheckboxOptions<T>>;
+//#endregion
+export { MenuItemCheckbox, MenuItemCheckboxOptions, MenuItemCheckboxProps, useMenuItemCheckbox };
+//# sourceMappingURL=menu-item-checkbox.d.ts.map

package/dist/menu/menu-item-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-checkbox.d.ts","names":["Props","ElementType","CheckboxOptions","MenuItemOptions","MenuStore","TagName","useMenuItemCheckbox","MenuItemCheckboxOptions","Hook","MenuItemCheckbox","MenuItemCheckboxProps","props","ReactElement","JSXElementConstructor","T","Omit","store","name","checked","defaultChecked","hideOnClick"],"sources":["../../src/menu/menu-item-checkbox.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAc7B;;;AAhBiD,cAgB5BC,mBAAAA,iCAAoDE,IAAAA,QAAYD,uBAAuB;AAAA;AA2C5G;;;;;;;;;AAAyJ;AACzJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5C4G,cA2CvFE,gBAAAA,GAAmBE,KAAAA,EAAOD,qBAAqB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnHN,uBAAAA,WAAkCN,WAAAA,GAAcI,OAAAA,UAAiBF,eAAAA,CAAgBW,CAAAA,GAAIC,IAAAA,CAAKb,eAAAA,CAAgBY,CAAAA;EAkC/GJ;;;;;;;EA1BRM,KAAAA,GAAQZ,SAAAA;EA0ByDJ;;;;;;;EAlBjEiB,IAAAA;EAkB0EV;;;AAAyB;;EAZnGW,OAAAA;;;;;;EAMAC,cAAAA;;;;EAIAC,WAAAA,GAAcjB,eAAAA,CAAgBW,CAAAA;AAAAA;AAAAA,KAEtBJ,qBAAAA,WAAgCT,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,uBAAAA,CAAwBO,CAAAA"}