@arobo/react 1.0.1 → 1.1.1

package/dist/components/kbd/index.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { KbdAbbr, KbdContent, KbdRoot } from "./kbd";
+export declare const Kbd: (({ children, className, variant, ...props }: import("./kbd").KbdRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, ...props }: import("./kbd").KbdRootProps) => import("react/jsx-runtime").JSX.Element;
+    Abbr: ({ className, keyValue, ...props }: import("./kbd").KbdAbbrProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...props }: import("./kbd").KbdContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Kbd = {
+    Props: ComponentProps<typeof KbdRoot>;
+    RootProps: ComponentProps<typeof KbdRoot>;
+    AbbrProps: ComponentProps<typeof KbdAbbr>;
+    ContentProps: ComponentProps<typeof KbdContent>;
+};
+export { KbdRoot, KbdAbbr, KbdContent };
+export type { KbdRootProps, KbdAbbrProps, KbdContentProps, KbdRootProps as KbdProps } from "./kbd";
+export { kbdKeysMap, kbdKeysLabelMap } from "./kbd.constants";
+export type { KbdKey } from "./kbd.constants";

package/dist/components/kbd/index.js

@@ -0,0 +1,13 @@
+import { KbdRoot, KbdContent, KbdAbbr } from './kbd.js';
+export { kbdKeysLabelMap, kbdKeysMap } from './kbd.constants.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Kbd = Object.assign(KbdRoot, {
+  Root: KbdRoot,
+  Abbr: KbdAbbr,
+  Content: KbdContent
+});
+
+export { Kbd, KbdAbbr, KbdContent, KbdRoot };

package/dist/components/kbd/kbd.constants.d.ts

@@ -0,0 +1,3 @@
+export type KbdKey = "command" | "shift" | "ctrl" | "option" | "enter" | "delete" | "escape" | "tab" | "capslock" | "up" | "right" | "down" | "left" | "pageup" | "pagedown" | "home" | "end" | "help" | "space" | "fn" | "win" | "alt";
+export declare const kbdKeysMap: Record<KbdKey, string>;
+export declare const kbdKeysLabelMap: Record<KbdKey, string>;

package/dist/components/kbd/kbd.constants.js

@@ -0,0 +1,50 @@
+const kbdKeysMap = {
+  command: "⌘",
+  shift: "⇧",
+  ctrl: "⌃",
+  option: "⌥",
+  enter: "↵",
+  delete: "⌫",
+  escape: "⎋",
+  tab: "⇥",
+  capslock: "⇪",
+  up: "↑",
+  right: "→",
+  down: "↓",
+  left: "←",
+  pageup: "⇞",
+  pagedown: "⇟",
+  home: "↖",
+  end: "↘",
+  help: "?",
+  space: "␣",
+  fn: "Fn",
+  win: "⌘",
+  alt: "⌥"
+};
+const kbdKeysLabelMap = {
+  command: "Command",
+  shift: "Shift",
+  ctrl: "Control",
+  option: "Option",
+  enter: "Enter",
+  delete: "Delete",
+  escape: "Escape",
+  tab: "Tab",
+  capslock: "Caps Lock",
+  up: "Up",
+  right: "Right",
+  down: "Down",
+  left: "Left",
+  pageup: "Page Up",
+  pagedown: "Page Down",
+  home: "Home",
+  end: "End",
+  help: "Help",
+  space: "Space",
+  fn: "Fn",
+  win: "Win",
+  alt: "Alt"
+};
+
+export { kbdKeysLabelMap, kbdKeysMap };

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,24 @@
+import type { KbdKey } from "./kbd.constants";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import type { KbdVariants } from "@arobo/styles";
+interface KbdRootProps extends ComponentPropsWithRef<"kbd">, KbdVariants {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const KbdRoot: ({ children, className, variant, ...props }: KbdRootProps) => import("react/jsx-runtime").JSX.Element;
+interface KbdAbbrProps extends ComponentPropsWithRef<"abbr"> {
+    className?: string;
+    /**
+     * The keyboard key to display
+     */
+    keyValue: KbdKey;
+}
+declare const KbdAbbr: ({ className, keyValue, ...props }: KbdAbbrProps) => import("react/jsx-runtime").JSX.Element;
+interface KbdContentProps extends ComponentPropsWithRef<"span"> {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const KbdContent: ({ children, className, ...props }: KbdContentProps) => import("react/jsx-runtime").JSX.Element;
+export { KbdRoot, KbdAbbr, KbdContent };
+export type { KbdRootProps, KbdAbbrProps, KbdContentProps };

package/dist/components/kbd/kbd.js

@@ -0,0 +1,75 @@
+import React__default, { createContext, useContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { kbdKeysMap, kbdKeysLabelMap } from './kbd.constants.js';
+import { jsx } from 'react/jsx-runtime';
+import { kbdVariants } from '../../packages/styles/src/components/kbd/kbd.styles.js';
+
+const KbdContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Kbd Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const KbdRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => kbdVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(KbdContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("kbd", {
+      ...props,
+      className: slots.base({
+        className
+      }),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Kbd Abbr
+ * -----------------------------------------------------------------------------------------------*/
+
+const KbdAbbr = ({
+  className,
+  keyValue,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(KbdContext);
+  return /*#__PURE__*/jsx("abbr", {
+    className: composeSlotClassName(slots?.abbr, className),
+    title: kbdKeysLabelMap[keyValue],
+    ...props,
+    children: kbdKeysMap[keyValue]
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Kbd Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const KbdContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(KbdContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.content, className),
+    ...props,
+    children: children
+  });
+};
+
+export { KbdAbbr, KbdContent, KbdRoot };

package/dist/components/label/index.js

@@ -1,5 +1,5 @@
 import { LabelRoot } from './label.js';
-export { labelVariants } from '../../styles/src/components/label/label.styles.js';
+export { labelVariants } from '../../packages/styles/src/components/label/label.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

package/dist/components/label/label.js

@@ -1,6 +1,6 @@
 import { Label } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
-import { labelVariants } from '../../styles/src/components/label/label.styles.js';
+import { labelVariants } from '../../packages/styles/src/components/label/label.styles.js';
 
 const LabelRoot = ({
   children,

package/dist/components/link/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { LinkIcon, LinkRoot } from "./link";
+export declare const Link: (({ children, className, ...props }: import("./link").LinkRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...props }: import("./link").LinkRootProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ children, className, ...rest }: import("./link").LinkIconProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Link = {
+    Props: ComponentProps<typeof LinkRoot>;
+    RootProps: ComponentProps<typeof LinkRoot>;
+    IconProps: ComponentProps<typeof LinkIcon>;
+};
+export { LinkRoot, LinkIcon };
+export type { LinkRootProps, LinkIconProps, LinkRootProps as LinkProps } from "./link";

package/dist/components/link/index.js

@@ -0,0 +1,11 @@
+import { LinkRoot, LinkIcon } from './link.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Link = Object.assign(LinkRoot, {
+  Root: LinkRoot,
+  Icon: LinkIcon
+});
+
+export { Link, LinkIcon, LinkRoot };

package/dist/components/link/link.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithRef } from "react";
+import { Link as LinkPrimitive } from "react-aria-components";
+import type { LinkVariants } from "@arobo/styles";
+interface LinkRootProps extends ComponentPropsWithRef<typeof LinkPrimitive>, LinkVariants {
+}
+declare const LinkRoot: ({ children, className, ...props }: LinkRootProps) => import("react/jsx-runtime").JSX.Element;
+type LinkIconProps = ComponentPropsWithRef<"span">;
+declare const LinkIcon: ({ children, className, ...rest }: LinkIconProps) => import("react/jsx-runtime").JSX.Element;
+export { LinkRoot, LinkIcon };
+export type { LinkRootProps, LinkIconProps };

package/dist/components/link/link.js

@@ -0,0 +1,58 @@
+import React__default, { createContext, useContext } from 'react';
+import { Link } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { ExternalLinkIcon } from '../icons.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { linkVariants } from '../../packages/styles/src/components/link/link.styles.js';
+
+const LinkContext = /*#__PURE__*/createContext({});
+
+/* ------------------------------------------------------------------------------------------------
+ * Link Root
+ * --------------------------------------------------------------------------------------------- */
+
+const LinkRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => linkVariants(), []);
+  return /*#__PURE__*/jsx(LinkContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(Link, {
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* ------------------------------------------------------------------------------------------------
+ * Link Icon
+ * --------------------------------------------------------------------------------------------- */
+
+const LinkIcon = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(LinkContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.icon, className),
+    "data-default-icon": dataAttr(!children),
+    "data-slot": "link-icon",
+    ...rest,
+    children: children ?? /*#__PURE__*/jsx(ExternalLinkIcon, {
+      "data-slot": "link-default-icon"
+    })
+  });
+};
+
+export { LinkIcon, LinkRoot };

package/dist/components/listbox/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { ListBoxItem } from "../listbox-item";
+import { ListBoxSection } from "../listbox-section";
+import { ListBoxRoot } from "./listbox";
+export declare const ListBox: typeof ListBoxRoot & {
+    Root: typeof ListBoxRoot;
+    Item: (({ children, className, variant, ...props }: import("..").ListBoxItemRootProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: ({ children, className, variant, ...props }: import("..").ListBoxItemRootProps) => import("react/jsx-runtime").JSX.Element;
+        Indicator: ({ children, className, ...props }: import("..").ListBoxItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    ItemIndicator: ({ children, className, ...props }: import("..").ListBoxItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Section: ({ children, className, ...props }: import("..").ListBoxSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ListBox = {
+    Props: ComponentProps<typeof ListBoxRoot>;
+    RootProps: ComponentProps<typeof ListBoxRoot>;
+    ItemProps: ComponentProps<typeof ListBoxItem>;
+    SectionProps: ComponentProps<typeof ListBoxSection>;
+};
+export { ListBoxRoot };
+export type { ListBoxRootProps, ListBoxRootProps as ListBoxProps } from "./listbox";

package/dist/components/listbox/index.js

@@ -0,0 +1,16 @@
+import { ListBoxItem } from '../listbox-item/index.js';
+import { ListBoxSection } from '../listbox-section/index.js';
+import { ListBoxRoot } from './listbox.js';
+import { ListBoxItemIndicator } from '../listbox-item/listbox-item.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ListBox = Object.assign(ListBoxRoot, {
+  Root: ListBoxRoot,
+  Item: ListBoxItem,
+  ItemIndicator: ListBoxItemIndicator,
+  Section: ListBoxSection
+});
+
+export { ListBox, ListBoxRoot };

package/dist/components/listbox/listbox.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithRef } from "react";
+import { ListBox as ListBoxPrimitive } from "react-aria-components";
+import type { ListBoxVariants } from "@arobo/styles";
+interface ListBoxRootProps<T extends object> extends ComponentPropsWithRef<typeof ListBoxPrimitive<T>>, ListBoxVariants {
+    className?: string;
+}
+declare function ListBoxRoot<T extends object>({ className, variant, ...props }: ListBoxRootProps<T>): import("react/jsx-runtime").JSX.Element;
+export { ListBoxRoot };
+export type { ListBoxRootProps };

package/dist/components/listbox/listbox.js

@@ -0,0 +1,22 @@
+import React__default from 'react';
+import { ListBox } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { listboxVariants } from '../../packages/styles/src/components/listbox/listbox.styles.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+function ListBoxRoot({
+  className,
+  variant,
+  ...props
+}) {
+  const styles = React__default.useMemo(() => listboxVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(ListBox, {
+    className: composeTwRenderProps(className, styles),
+    "data-slot": "listbox",
+    ...props
+  });
+}
+
+export { ListBoxRoot };

package/dist/components/listbox/listbox.type.d.ts

@@ -0,0 +1,34 @@
+export type Key = string | number;
+export interface SingleSelection {
+    /** Whether the collection allows empty selection. */
+    disallowEmptySelection?: boolean;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: Key | null;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: Key;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (key: Key | null) => void;
+}
+export type SelectionMode = 'none' | 'single' | 'multiple';
+export type SelectionBehavior = 'toggle' | 'replace';
+export type Selection = 'all' | Set<Key>;
+export interface MultipleSelection {
+    /** The type of selection that is allowed in the collection. */
+    selectionMode?: SelectionMode;
+    /** Whether the collection allows empty selection. */
+    disallowEmptySelection?: boolean;
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: 'all' | Iterable<Key>;
+    /** The initial selected keys in the collection (uncontrolled). */
+    defaultSelectedKeys?: 'all' | Iterable<Key>;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (keys: Selection) => void;
+    /** The currently disabled keys in the collection (controlled). */
+    disabledKeys?: Iterable<Key>;
+}
+export interface SpectrumSelectionProps {
+    /** How selection should be displayed. */
+    selectionStyle?: 'checkbox' | 'highlight';
+}
+export type FocusStrategy = 'first' | 'last';
+export type DisabledBehavior = 'selection' | 'all';

package/dist/components/listbox-item/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { ListBoxItemIndicator, ListBoxItemRoot } from "./listbox-item";
+export declare const ListBoxItem: (({ children, className, variant, ...props }: import("./listbox-item").ListBoxItemRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, ...props }: import("./listbox-item").ListBoxItemRootProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./listbox-item").ListBoxItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ListBoxItem = {
+    Props: ComponentProps<typeof ListBoxItemRoot>;
+    RootProps: ComponentProps<typeof ListBoxItemRoot>;
+    IndicatorProps: ComponentProps<typeof ListBoxItemIndicator>;
+};
+export { ListBoxItemRoot, ListBoxItemIndicator };
+export type { ListBoxItemRootProps, ListBoxItemRootProps as ListBoxItemProps, ListBoxItemIndicatorProps, } from "./listbox-item";

package/dist/components/listbox-item/index.js

@@ -0,0 +1,11 @@
+import { ListBoxItemRoot, ListBoxItemIndicator } from './listbox-item.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ListBoxItem = Object.assign(ListBoxItemRoot, {
+  Root: ListBoxItemRoot,
+  Indicator: ListBoxItemIndicator
+});
+
+export { ListBoxItem, ListBoxItemIndicator, ListBoxItemRoot };

package/dist/components/listbox-item/listbox-item.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ListBoxItemRenderProps } from "react-aria-components";
+import React from "react";
+import { ListBoxItem as ListBoxItemPrimitive } from "react-aria-components";
+import { type ListBoxItemVariants } from "@arobo/styles";
+interface ListBoxItemRootProps extends ComponentPropsWithRef<typeof ListBoxItemPrimitive>, ListBoxItemVariants {
+    className?: string;
+}
+declare const ListBoxItemRoot: ({ children, className, variant, ...props }: ListBoxItemRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ListBoxItemIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: ListBoxItemRenderProps) => React.ReactNode);
+}
+declare const ListBoxItemIndicator: ({ children, className, ...props }: ListBoxItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export { ListBoxItemRoot, ListBoxItemIndicator };
+export type { ListBoxItemRootProps, ListBoxItemIndicatorProps };

package/dist/components/listbox-item/listbox-item.js

@@ -0,0 +1,76 @@
+import React__default, { createContext, useContext } from 'react';
+import { ListBoxItem } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { listboxItemVariants } from '../../packages/styles/src/components/listbox-item/listbox-item.styles.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+
+const ListBoxItemContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ListBox Item Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ListBoxItemRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => listboxItemVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(ListBoxItem, {
+    className: composeTwRenderProps(className, slots.item()),
+    "data-slot": "listbox-item",
+    ...props,
+    children: values => /*#__PURE__*/jsx(ListBoxItemContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ListBox Item Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const ListBoxItemIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(ListBoxItemContext);
+  const isSelected = state?.isSelected;
+  const content = typeof children === "function" ? children(state ?? {}) : children ? children : /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "listbox-item-indicator--checkmark",
+    fill: "none",
+    role: "presentation",
+    stroke: "currentColor",
+    strokeDasharray: 22,
+    strokeDashoffset: isSelected ? 44 : 66,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 17 18",
+    children: /*#__PURE__*/jsx("polyline", {
+      points: "1 9 7 14 15 4"
+    })
+  });
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "listbox-item-indicator",
+    "data-visible": isSelected || undefined,
+    ...props,
+    children: content
+  });
+};
+
+export { ListBoxItemIndicator, ListBoxItemRoot };

package/dist/components/listbox-section/index.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+import { ListBoxSectionRoot } from "./listbox-section";
+export declare const ListBoxSection: ({ children, className, ...props }: import("./listbox-section").ListBoxSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+export type ListBoxSection = {
+    Props: ComponentProps<typeof ListBoxSectionRoot>;
+};
+export { ListBoxSectionRoot };
+export type { ListBoxSectionRootProps, ListBoxSectionRootProps as ListBoxSectionProps, } from "./listbox-section";

package/dist/components/listbox-section/index.js

@@ -0,0 +1,8 @@
+import { ListBoxSectionRoot } from './listbox-section.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ListBoxSection = ListBoxSectionRoot;
+
+export { ListBoxSection, ListBoxSectionRoot };

package/dist/components/listbox-section/listbox-section.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from "react";
+import { ListBoxSection as ListBoxSectionPrimitive } from "react-aria-components";
+interface ListBoxSectionRootProps extends ComponentPropsWithRef<typeof ListBoxSectionPrimitive> {
+    className?: string;
+}
+declare const ListBoxSectionRoot: ({ children, className, ...props }: ListBoxSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+export { ListBoxSectionRoot };
+export type { ListBoxSectionRootProps };

package/dist/components/listbox-section/listbox-section.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { ListBoxSection } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { listboxSectionVariants } from '../../packages/styles/src/components/listbox-section/listbox-section.styles.js';
+
+const ListBoxSectionRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const styles = React__default.useMemo(() => listboxSectionVariants({
+    class: typeof className === "string" ? className : undefined
+  }), [className]);
+  return /*#__PURE__*/jsx(ListBoxSection, {
+    className: styles,
+    ...props,
+    children: children
+  });
+};
+
+export { ListBoxSectionRoot };

package/dist/components/menu/index.d.ts

@@ -0,0 +1,22 @@
+import type { MenuItemRoot } from "../menu-item";
+import type { MenuSectionRoot } from "../menu-section";
+import type { ComponentProps } from "react";
+import { MenuRoot } from "./menu";
+export declare const Menu: typeof MenuRoot & {
+    Root: typeof MenuRoot;
+    Item: (({ children, className, variant, ...props }: import("..").MenuItemRootProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: ({ children, className, variant, ...props }: import("..").MenuItemRootProps) => import("react/jsx-runtime").JSX.Element;
+        Indicator: ({ children, className, type, ...props }: import("..").MenuItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+        SubmenuIndicator: ({ children, className, ...props }: import("..").MenuItemSubmenuIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+    };
+    ItemIndicator: ({ children, className, type, ...props }: import("..").MenuItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Section: ({ children, className, ...props }: import("..").MenuSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Menu<T extends object = object> = {
+    Props: ComponentProps<typeof MenuRoot<T>>;
+    RootProps: ComponentProps<typeof MenuRoot<T>>;
+    ItemProps: ComponentProps<typeof MenuItemRoot>;
+    SectionProps: ComponentProps<typeof MenuSectionRoot>;
+};
+export { MenuRoot };
+export type { MenuRootProps, MenuRootProps as MenuProps } from "./menu";

package/dist/components/menu/index.js

@@ -0,0 +1,16 @@
+import { MenuItem } from '../menu-item/index.js';
+import { MenuSection } from '../menu-section/index.js';
+import { MenuRoot } from './menu.js';
+import { MenuItemIndicator } from '../menu-item/menu-item.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Menu = Object.assign(MenuRoot, {
+  Root: MenuRoot,
+  Item: MenuItem,
+  ItemIndicator: MenuItemIndicator,
+  Section: MenuSection
+});
+
+export { Menu, MenuRoot };

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithRef } from "react";
+import { Menu as MenuPrimitive } from "react-aria-components";
+import type { MenuVariants } from "@arobo/styles";
+interface MenuRootProps<T extends object> extends ComponentPropsWithRef<typeof MenuPrimitive<T>>, MenuVariants {
+    className?: string;
+}
+declare function MenuRoot<T extends object>({ className, ...props }: MenuRootProps<T>): import("react/jsx-runtime").JSX.Element;
+export { MenuRoot };
+export type { MenuRootProps };