@accelint/design-system 0.1.0 → 0.1.1

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

@@ -0,0 +1,71 @@
+import type { MenuClassNames } from './types';
+export declare const menuContainers: {
+    menu: string;
+    list: string;
+    item: string;
+};
+export declare const menuStateVars: {
+    placement: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isExiting: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEntering: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const menuItemStateVars: {
+    selectionMode: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    selectionBehavior: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    hasDescription: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    hasSubmenu: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isOpen: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const menuColorVars: {
+    list: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    header: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    separator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    item: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    label: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    description: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const menuSpaceVars: {
+    menu: {
+        minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    section: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    header: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    separator: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    item: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+export declare const menuClassNames: MenuClassNames;

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

@@ -0,0 +1,24 @@
+import { type ContextValue } from 'react-aria-components';
+import type { MenuItemProps, MenuListProps, MenuMapping, MenuProps } from './types';
+export declare const MenuContext: import("react").Context<ContextValue<MenuProps, HTMLElement>>;
+/**
+ * Menu component that supports display and selection of menu items via a trigger (right-click or click)
+ * Customization of React Aria's Menu and Menu Item components https://react-spectrum.adobe.com/react-aria/Menu.html
+ */
+export declare const Menu: (props: Omit<import("react-aria-components").PopoverProps, "className" | "style"> & {
+    classNames?: import("./types").MenuClassNames;
+    mapping?: Partial<MenuMapping>;
+    size?: import("./types").MenuSizes;
+} & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;
+export declare const MenuListContext: import("react").Context<ContextValue<MenuListProps<unknown>, HTMLDivElement>>;
+export declare const MenuList: <T extends object>(props: Omit<import("react-aria-components").MenuProps<T>, "className" | "style"> & {
+    classNames?: import("./types").MenuClassNames;
+    mapping?: Partial<MenuMapping>;
+    size?: import("./types").MenuSizes;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+export declare const MenuItemContext: import("react").Context<ContextValue<MenuItemProps<unknown>, HTMLDivElement>>;
+export declare const MenuItem: <T extends object>(props: Omit<import("react-aria-components").MenuItemProps<T>, "className" | "style"> & {
+    classNames?: import("./types").MenuClassNames;
+    mapping?: Partial<MenuMapping>;
+    size?: import("./types").MenuSizes;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/dist/components/menu/menu.js

@@ -0,0 +1,155 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { Provider, Popover, Collection, UNSTABLE_CollectionRendererContext, Menu as Menu$1, DEFAULT_SLOT, MenuItem as MenuItem$1, MenuStateContext } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/use-context-props.js';
+import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
+import { inlineVars } from '../../utils/css.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props.js';
+import { useSlot } from '../../hooks/use-slot/use-slot.js';
+import { useTheme } from '../../hooks/use-theme/use-theme.js';
+import { bodies, headings } from '../../styles/typography.vanilla.js';
+import { AriaSectionContext, AriaHeaderContext, AriaSeparatorContext, AriaSection, AriaTextContext, AriaKeyboardContext, AriaText } from '../aria/aria.js';
+import { createCollectionRenderer } from '../collection/collection.js';
+import { IconContext } from '../icon/icon.js';
+import { menuClassNames, menuStateVars, menuItemStateVars } from './menu.vanilla.js';
+
+const defaultMapping = {
+  description: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  },
+  header: {
+    sm: headings.v4,
+    lg: headings.v5
+  },
+  label: {
+    sm: bodies.sm,
+    lg: bodies.sm
+  },
+  shortcut: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  }
+};
+const defaultSize = "lg";
+const MenuContext = createContext(null);
+const Menu = forwardRef(function Menu2(props, ref) {
+  [props, ref] = useContextProps(props, ref, MenuContext);
+  props = useDefaultProps(props, "Menu");
+  const { children: childrenProp, classNames: classNamesProp, mapping: mappingProp, size = defaultSize, ...rest } = props;
+  const theme = useTheme();
+  const classNames = useMemo(() => mergeClassNames(menuClassNames, classNamesProp, theme.Menu, {
+    menu: { container: theme.className }
+    // required to consume global theme within Popover
+  }), [classNamesProp, theme.Menu, theme.className]);
+  const mapping = useMemo(() => ({
+    ...defaultMapping,
+    ...mappingProp
+  }), [mappingProp]);
+  const style = useCallback((renderProps) => ({
+    ...theme.style,
+    // required to consume global styles within Popover
+    ...inlineVars(menuStateVars, {
+      ...renderProps,
+      size
+    })
+  }), [theme.style, size]);
+  const values = useMemo(() => [[MenuListContext, { classNames, mapping, size }]], [classNames, mapping, size]);
+  const children = useCallback((renderProps) => jsx(Provider, { values, children: jsx("div", { className: classNames?.menu?.menu, children: callRenderProps(childrenProp, {
+    ...renderProps,
+    size,
+    defaultChildren: null
+  }) }) }), [childrenProp, classNames?.menu?.menu, size, values]);
+  return jsx(Popover, { ...rest, ref, className: classNames?.menu?.container, style, children });
+});
+const MenuListContext = createContext(null);
+const MenuList = forwardRef(function MenuList2(props, ref) {
+  [props, ref] = useContextProps(props, ref, MenuListContext);
+  props = useDefaultProps(props, "Menu");
+  const { children: childrenProp, classNames: classNamesProp, items, mapping: mappingProp, selectionMode = "single", size = defaultSize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = props;
+  const theme = useTheme();
+  const mapping = useMemo(() => ({
+    ...defaultMapping,
+    ...mappingProp
+  }), [mappingProp]);
+  const classNames = useMemo(() => mergeClassNames(menuClassNames, theme.Menu, classNamesProp, {
+    list: { header: mapping.header[size] }
+  }), [theme.Menu, classNamesProp, mapping.header, size]);
+  const values = useMemo(() => [
+    [MenuItemContext, { classNames, mapping, size }],
+    [AriaSectionContext, { className: classNames?.list?.section }],
+    [AriaHeaderContext, { className: classNames?.list?.header }],
+    [AriaSeparatorContext, { className: classNames?.list?.separator }]
+  ], [classNames, mapping, size]);
+  const children = useMemo(() => {
+    if (!(childrenProp || items)) {
+      return null;
+    }
+    return jsx(AriaSection, { className: classNames?.list?.list, children: typeof childrenProp === "function" ? jsx(Collection, { items, children: childrenProp }) : childrenProp });
+  }, [childrenProp, classNames?.list?.list, items]);
+  const renderer = useMemo(() => createCollectionRenderer(MenuStateContext, values), [values]);
+  return jsx(UNSTABLE_CollectionRendererContext.Provider, { value: renderer, children: jsx(Provider, { values, children: jsx(Menu$1, { ...rest, ref, className: classNames?.list?.container, items, selectionMode, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children }) }) });
+});
+const MenuItemContext = createContext(null);
+const MenuItem = forwardRef(function MenuItem2(props, ref) {
+  [props, ref] = useContextProps(props, ref, MenuItemContext);
+  props = useDefaultProps(props, "MenuItem");
+  const { id, children: childrenProp, classNames: classNamesProp, mapping: mappingProp, size = defaultSize, textValue = typeof childrenProp === "string" ? childrenProp : void 0, ...rest } = props;
+  const theme = useTheme();
+  const mapping = useMemo(() => ({
+    ...defaultMapping,
+    ...mappingProp
+  }), [mappingProp]);
+  const classNames = useMemo(() => mergeClassNames(menuClassNames, classNamesProp, theme.Menu, {
+    item: {
+      description: mapping.description[size],
+      label: mapping.label[size],
+      shortcut: mapping.shortcut[size]
+    }
+  }), [theme.Menu, classNamesProp, mapping, size]);
+  const [descriptionRef, hasDescription] = useSlot();
+  const style = useCallback((renderProps) => inlineVars(menuItemStateVars, { ...renderProps, size, hasDescription }), [hasDescription, size]);
+  const values = useMemo(() => [
+    [
+      AriaTextContext,
+      {
+        slots: {
+          [DEFAULT_SLOT]: {},
+          label: { className: classNames?.item?.label },
+          description: {
+            ref: descriptionRef,
+            className: classNames?.item?.description
+          }
+        }
+      }
+    ],
+    [
+      IconContext,
+      {
+        slots: {
+          [DEFAULT_SLOT]: { classNames: classNames?.item?.icon },
+          more: { classNames: classNames?.item?.more }
+        }
+      }
+    ],
+    [AriaKeyboardContext, { className: classNames?.item?.shortcut }]
+  ], [
+    classNames?.item?.label,
+    descriptionRef,
+    classNames?.item?.description,
+    classNames?.item?.icon,
+    classNames?.item?.more,
+    classNames?.item?.shortcut
+  ]);
+  const children = useCallback((renderProps) => {
+    const content = callRenderProps(childrenProp, {
+      ...renderProps,
+      size,
+      defaultChildren: null
+    });
+    return jsx(Provider, { values, children: jsx("div", { className: classNames?.item?.item, children: typeof content === "string" ? jsx(AriaText, { slot: "label", children: content }) : content }) });
+  }, [childrenProp, classNames?.item?.item, size, values]);
+  return jsx(MenuItem$1, { ...rest, id: id ?? textValue, ref, className: classNames?.item?.container, style, textValue, children });
+});
+
+export { Menu, MenuContext, MenuItem, MenuItemContext, MenuList, MenuListContext };

package/dist/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  type ForwardedRef,\n  type HTMLAttributes,\n} from 'react';\nimport {\n  Collection,\n  DEFAULT_SLOT,\n  MenuStateContext,\n  Popover,\n  Provider,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  UNSTABLE_CollectionRendererContext,\n  type CollectionRenderer,\n  type ContextValue,\n  type PopoverRenderProps,\n  type MenuItemRenderProps as RACMenuItemRenderProps,\n  type SectionProps,\n  type SeparatorProps,\n  type TextProps,\n} from 'react-aria-components';\nimport {\n  useContextProps,\n  useDefaultProps,\n  useSlot,\n  useTheme,\n} from '../../hooks';\nimport { bodies, headings } from '../../styles';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport {\n  AriaHeaderContext,\n  AriaKeyboardContext,\n  AriaSection,\n  AriaSectionContext,\n  AriaSeparatorContext,\n  AriaText,\n  AriaTextContext,\n} from '../aria';\nimport { createCollectionRenderer } from '../collection';\nimport { IconContext, type IconProps } from '../icon';\nimport { menuClassNames, menuItemStateVars, menuStateVars } from './menu.css';\nimport type {\n  MenuItemProps,\n  MenuListProps,\n  MenuMapping,\n  MenuProps,\n} from './types';\n\nconst defaultMapping: MenuMapping = {\n  description: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  header: {\n    sm: headings.v4,\n    lg: headings.v5,\n  },\n  label: {\n    sm: bodies.sm,\n    lg: bodies.sm,\n  },\n  shortcut: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n};\n\nconst defaultSize = 'lg';\n\nexport const MenuContext =\n  createContext<ContextValue<MenuProps, HTMLElement>>(null);\n\n/**\n * Menu component that supports display and selection of menu items via a trigger (right-click or click)\n * Customization of React Aria's Menu and Menu Item components https://react-spectrum.adobe.com/react-aria/Menu.html\n */\nexport const Menu = forwardRef(function Menu(\n  props: MenuProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  [props, ref] = useContextProps(props, ref, MenuContext);\n  props = useDefaultProps(props, 'Menu');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = defaultSize,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(menuClassNames, classNamesProp, theme.Menu, {\n        menu: { container: theme.className }, // required to consume global theme within Popover\n      }),\n    [classNamesProp, theme.Menu, theme.className],\n  );\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const style = useCallback(\n    (renderProps: PopoverRenderProps) => ({\n      ...theme.style, // required to consume global styles within Popover\n      ...inlineVars(menuStateVars, {\n        ...renderProps,\n        size,\n      }),\n    }),\n    [theme.style, size],\n  );\n\n  const values = useMemo<\n    [\n      [\n        typeof MenuListContext,\n        ContextValue<MenuListProps<unknown>, HTMLDivElement>,\n      ],\n    ]\n  >(\n    () => [[MenuListContext, { classNames, mapping, size }]],\n    [classNames, mapping, size],\n  );\n\n  const children = useCallback(\n    (renderProps: PopoverRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.menu?.menu}>\n          {callRenderProps(childrenProp, {\n            ...renderProps,\n            size,\n            defaultChildren: null,\n          })}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, classNames?.menu?.menu, size, values],\n  );\n\n  return (\n    <Popover\n      {...rest}\n      ref={ref}\n      className={classNames?.menu?.container}\n      style={style}\n    >\n      {children}\n    </Popover>\n  );\n});\n\nexport const MenuListContext =\n  createContext<ContextValue<MenuListProps<unknown>, HTMLDivElement>>(null);\n\ntype MenuListContexts = [\n  [\n    typeof MenuItemContext,\n    ContextValue<MenuItemProps<unknown>, HTMLDivElement>,\n  ],\n  [typeof AriaSectionContext, ContextValue<SectionProps<object>, HTMLElement>],\n  [\n    typeof AriaHeaderContext,\n    ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>,\n  ],\n  [typeof AriaSeparatorContext, ContextValue<SeparatorProps, HTMLElement>],\n];\n\nexport const MenuList = forwardRef(function MenuList<T extends object>(\n  props: MenuListProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, MenuListContext);\n  props = useDefaultProps(props, 'Menu');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    items,\n    mapping: mappingProp,\n    selectionMode = 'single',\n    size = defaultSize,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(menuClassNames, theme.Menu, classNamesProp, {\n        list: { header: mapping.header[size] },\n      }),\n    [theme.Menu, classNamesProp, mapping.header, size],\n  );\n\n  const values = useMemo<MenuListContexts>(\n    () => [\n      [MenuItemContext, { classNames, mapping, size }],\n      [AriaSectionContext, { className: classNames?.list?.section }],\n      [AriaHeaderContext, { className: classNames?.list?.header }],\n      [AriaSeparatorContext, { className: classNames?.list?.separator }],\n    ],\n    [classNames, mapping, size],\n  );\n\n  const children = useMemo(() => {\n    if (!(childrenProp || items)) {\n      return null;\n    }\n\n    return (\n      <AriaSection className={classNames?.list?.list}>\n        {typeof childrenProp === 'function' ? (\n          <Collection items={items}>{childrenProp}</Collection>\n        ) : (\n          childrenProp\n        )}\n      </AriaSection>\n    );\n  }, [childrenProp, classNames?.list?.list, items]);\n\n  const renderer = useMemo<CollectionRenderer>(\n    () => createCollectionRenderer(MenuStateContext, values),\n    [values],\n  );\n\n  return (\n    <UNSTABLE_CollectionRendererContext.Provider value={renderer}>\n      <Provider values={values}>\n        <RACMenu<T>\n          {...rest}\n          ref={ref}\n          className={classNames?.list?.container}\n          items={items}\n          selectionMode={selectionMode}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n        >\n          {children}\n        </RACMenu>\n      </Provider>\n    </UNSTABLE_CollectionRendererContext.Provider>\n  );\n});\n\nexport const MenuItemContext =\n  createContext<ContextValue<MenuItemProps<unknown>, HTMLDivElement>>(null);\n\nexport const MenuItem = forwardRef(function MenuItem<T extends object>(\n  props: MenuItemProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, MenuItemContext);\n  props = useDefaultProps(props, 'MenuItem');\n\n  const {\n    id,\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = defaultSize,\n    textValue = typeof childrenProp === 'string' ? childrenProp : undefined,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(menuClassNames, classNamesProp, theme.Menu, {\n        item: {\n          description: mapping.description[size],\n          label: mapping.label[size],\n          shortcut: mapping.shortcut[size],\n        },\n      }),\n    [theme.Menu, classNamesProp, mapping, size],\n  );\n\n  const [descriptionRef, hasDescription] = useSlot();\n\n  const style = useCallback(\n    (renderProps: RACMenuItemRenderProps) =>\n      inlineVars(menuItemStateVars, { ...renderProps, size, hasDescription }),\n    [hasDescription, size],\n  );\n\n  const values = useMemo<\n    [\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [typeof IconContext, ContextValue<IconProps, HTMLDivElement>],\n      [\n        typeof AriaKeyboardContext,\n        ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>,\n      ],\n    ]\n  >(\n    () => [\n      [\n        AriaTextContext,\n        {\n          slots: {\n            [DEFAULT_SLOT]: {},\n            label: { className: classNames?.item?.label },\n            description: {\n              ref: descriptionRef,\n              className: classNames?.item?.description,\n            },\n          },\n        },\n      ],\n      [\n        IconContext,\n        {\n          slots: {\n            [DEFAULT_SLOT]: { classNames: classNames?.item?.icon },\n            more: { classNames: classNames?.item?.more },\n          },\n        },\n      ],\n      [AriaKeyboardContext, { className: classNames?.item?.shortcut }],\n    ],\n    [\n      classNames?.item?.label,\n      descriptionRef,\n      classNames?.item?.description,\n      classNames?.item?.icon,\n      classNames?.item?.more,\n      classNames?.item?.shortcut,\n    ],\n  );\n\n  const children = useCallback(\n    (renderProps: RACMenuItemRenderProps) => {\n      const content = callRenderProps(childrenProp, {\n        ...renderProps,\n        size,\n        defaultChildren: null,\n      });\n\n      return (\n        <Provider values={values}>\n          <div className={classNames?.item?.item}>\n            {typeof content === 'string' ? (\n              <AriaText slot='label'>{content}</AriaText>\n            ) : (\n              content\n            )}\n          </div>\n        </Provider>\n      );\n    },\n    [childrenProp, classNames?.item?.item, size, values],\n  );\n\n  return (\n    <RACMenuItem<T>\n      {...rest}\n      id={id ?? textValue}\n      ref={ref as ForwardedRef<T>}\n      className={classNames?.item?.container}\n      style={style}\n      textValue={textValue}\n    >\n      {children}\n    </RACMenuItem>\n  );\n});\n"],"names":["Menu","MenuList","RACMenu","MenuItem","RACMenuItem"],"mappings":"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"}

package/dist/components/menu/menu.vanilla.js

@@ -0,0 +1,8 @@
+
+var menuClassNames = { menu: { container: "menu_menuClassNames_menu_container__dpszds17", menu: "menu_menuClassNames_menu_menu__dpszds18 surfaces_proud__15mw6jf5 surfaces_flush__15mw6jf4" }, list: { container: "menu_menuClassNames_list_container__dpszds19", list: "menu_menuClassNames_list_list__dpszds1a", section: "menu_menuClassNames_list_section__dpszds1b", header: "menu_menuClassNames_list_header__dpszds1c", separator: "menu_menuClassNames_list_separator__dpszds1d" }, item: { container: "menu_menuClassNames_item_container__dpszds1e", item: "menu_menuClassNames_item_item__dpszds1f", icon: { icon: "menu_menuClassNames_item_icon_icon__dpszds1g" }, label: "menu_menuClassNames_item_label__dpszds1h", description: "menu_menuClassNames_item_description__dpszds1i", more: { icon: "menu_menuClassNames_item_more_icon__dpszds1j" }, shortcut: "menu_menuClassNames_item_shortcut__dpszds1k" } };
+var menuColorVars = { list: { background: "var(--list-background__dpszdsj)", border: "var(--list-border__dpszdsk)", color: "var(--list-color__dpszdsl)" }, header: { background: "var(--header-background__dpszdsm)", border: "var(--header-border__dpszdsn)", color: "var(--header-color__dpszdso)" }, separator: "var(--separator__dpszdsp)", item: { background: "var(--item-background__dpszdsq)", border: "var(--item-border__dpszdsr)", color: "var(--item-color__dpszdss)" }, label: "var(--label__dpszdst)", description: "var(--description__dpszdsu)" };
+var menuItemStateVars = { selectionMode: "var(--selectionMode__dpszds7)", selectionBehavior: "var(--selectionBehavior__dpszds8)", size: "var(--size__dpszds9)", hasDescription: "var(--hasDescription__dpszdsa)", hasSubmenu: "var(--hasSubmenu__dpszdsb)", isOpen: "var(--isOpen__dpszdsc)", isDisabled: "var(--isDisabled__dpszdsd)", isHovered: "var(--isHovered__dpszdse)", isPressed: "var(--isPressed__dpszdsf)", isSelected: "var(--isSelected__dpszdsg)", isFocused: "var(--isFocused__dpszdsh)", isFocusVisible: "var(--isFocusVisible__dpszdsi)" };
+var menuSpaceVars = { menu: { minWidth: "var(--menu-minWidth__dpszdsv)", x: "var(--menu-x__dpszdsw)", y: "var(--menu-y__dpszdsx)" }, section: { x: "var(--section-x__dpszdsy)", y: "var(--section-y__dpszdsz)" }, header: { x: "var(--header-x__dpszds10)", y: "var(--header-y__dpszds11)" }, separator: { x: "var(--separator-x__dpszds12)", y: "var(--separator-y__dpszds13)" }, item: { x: "var(--item-x__dpszds14)", y: "var(--item-y__dpszds15)", gap: "var(--item-gap__dpszds16)" } };
+var menuStateVars = { placement: "var(--placement__dpszds3)", size: "var(--size__dpszds4)", isExiting: "var(--isExiting__dpszds5)", isEntering: "var(--isEntering__dpszds6)" };
+
+export { menuClassNames, menuColorVars, menuItemStateVars, menuSpaceVars, menuStateVars };

package/dist/components/menu/menu.vanilla.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.vanilla.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

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

@@ -0,0 +1,48 @@
+import type { AsType } from '../../types';
+import type { PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuItemRenderProps as RACMenuItemRenderProps, MenuProps as RACMenuProps, PopoverProps as RACPopoverProps } from 'react-aria-components';
+import type { PartialDeep } from 'type-fest';
+import type { IconClassNames } from '../icon/types';
+export type MenuClassNames = PartialDeep<{
+    menu: {
+        container: string;
+        menu: string;
+    };
+    list: {
+        container: string;
+        list: string;
+        section: string;
+        header: string;
+        separator: string;
+    };
+    item: {
+        container: string;
+        item: string;
+        icon: IconClassNames;
+        label: string;
+        description: string;
+        more: IconClassNames;
+        shortcut: string;
+    };
+}>;
+export type MenuSizes = 'sm' | 'lg';
+export type MenuMapping = {
+    description: Partial<Record<MenuSizes, string>>;
+    header: Partial<Record<MenuSizes, string>>;
+    label: Partial<Record<MenuSizes, string>>;
+    shortcut: Partial<Record<MenuSizes, string>>;
+};
+type BaseMenuProps = {
+    classNames?: MenuClassNames;
+    mapping?: Partial<MenuMapping>;
+    size?: MenuSizes;
+};
+export type MenuProps = Omit<RACPopoverProps, 'className' | 'style'> & BaseMenuProps;
+export type MenuListProps<T> = Omit<RACMenuProps<T>, 'className' | 'style'> & BaseMenuProps;
+export type MenuItemProps<T> = Omit<RACMenuItemProps<T>, 'className' | 'style'> & BaseMenuProps;
+export type MenuRenderProps = AsType<PopoverRenderProps> & Required<Pick<BaseMenuProps, 'size'>>;
+export type MenuItemRenderProps = AsType<RACMenuItemRenderProps> & Required<Pick<BaseMenuProps, 'size'>>;
+export type MenuState = Omit<MenuRenderProps, 'trigger'>;
+export type MenuItemState = Omit<MenuItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'> & {
+    hasDescription: boolean;
+};
+export {};

package/dist/components/merge-provider/index.d.ts

@@ -0,0 +1,2 @@
+export { MergeProvider } from './merge-provider';
+export { type MergeProviderProps } from './types';

package/dist/components/merge-provider/merge-provider.d.ts

@@ -0,0 +1,14 @@
+import type { MergeProviderProps } from './types';
+/**
+ * Merges provided contexts with parent contexts, if available and of the same structure
+ * If parent context doesn't exist or differs in structure (slotted vs non-slotted) from
+ * the context being provided, the provided context will override the parent context
+ *
+ * This is typically used in conjunction with React Aria Component's contexts, where a
+ * RAC may provide a slotted context (ex: ButtonContext, with a slot of "remove") where
+ * that slot has a number of attributes and event listeners, but we want to merge in our
+ * own to supplement things for stylistic or additional functionality purposes
+ *
+ * See tests for examples
+ */
+export declare function MergeProvider<A, B, C, D, E, F, G, H, I, J, K>({ values, children, }: MergeProviderProps<A, B, C, D, E, F, G, H, I, J, K>): import("react/jsx-runtime").JSX.Element;

package/dist/components/merge-provider/merge-provider.js

@@ -0,0 +1,40 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { mergeProps } from '../../utils/props.js';
+
+function merge(context, next, children) {
+  return function Consumer(prev) {
+    let merged = next;
+    if (prev != null && next != null && typeof prev === "object" && typeof next === "object") {
+      const prevSlots = "slots" in prev && prev.slots;
+      const nextSlots = "slots" in next && next.slots;
+      if (prevSlots && nextSlots) {
+        merged = {
+          ...prev,
+          ...next,
+          slots: {
+            ...prevSlots,
+            ...nextSlots,
+            ...Reflect.ownKeys(nextSlots).reduce((acc, key) => {
+              const value = nextSlots[key];
+              if (Object.hasOwn(prevSlots, key)) {
+                acc[key] = mergeProps(prevSlots[key], value);
+              }
+              return acc;
+            }, {})
+          }
+        };
+      } else if (!prevSlots && !nextSlots) {
+        merged = mergeProps(prev, next);
+      }
+    }
+    return jsx(context.Provider, { value: merged, children });
+  };
+}
+function MergeProvider({ values, children }) {
+  for (let [context, next] of values) {
+    children = jsx(context.Consumer, { children: merge(context, next, children) });
+  }
+  return jsx(Fragment, { children });
+}
+
+export { MergeProvider };

package/dist/components/merge-provider/merge-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-provider.js","sources":["../../../src/components/merge-provider/merge-provider.tsx"],"sourcesContent":["import type { Context, ReactNode } from 'react';\nimport { mergeProps } from '../../utils';\nimport type { MergeProviderProps } from './types';\n\nfunction merge<T>(context: Context<T>, next: T, children: ReactNode) {\n  return function Consumer(prev: T) {\n    let merged = next;\n\n    if (\n      prev != null &&\n      next != null &&\n      typeof prev === 'object' &&\n      typeof next === 'object'\n    ) {\n      const prevSlots =\n        'slots' in prev && (prev.slots as Record<string | symbol, object>);\n\n      const nextSlots =\n        'slots' in next && (next.slots as Record<string | symbol, object>);\n\n      if (prevSlots && nextSlots) {\n        merged = {\n          ...prev,\n          ...next,\n          slots: {\n            ...prevSlots,\n            ...nextSlots,\n            ...Reflect.ownKeys(nextSlots).reduce<\n              Record<string | symbol, object>\n            >((acc, key) => {\n              const value = nextSlots[key];\n\n              if (Object.hasOwn(prevSlots, key)) {\n                acc[key] = mergeProps(prevSlots[key], value);\n              }\n\n              return acc;\n            }, {}),\n          },\n        } as T;\n      } else if (!prevSlots && !nextSlots) {\n        merged = mergeProps(prev as object, next as object) as T;\n      }\n    }\n\n    return <context.Provider value={merged}>{children}</context.Provider>;\n  };\n}\n\n/**\n * Merges provided contexts with parent contexts, if available and of the same structure\n * If parent context doesn't exist or differs in structure (slotted vs non-slotted) from\n * the context being provided, the provided context will override the parent context\n *\n * This is typically used in conjunction with React Aria Component's contexts, where a\n * RAC may provide a slotted context (ex: ButtonContext, with a slot of \"remove\") where\n * that slot has a number of attributes and event listeners, but we want to merge in our\n * own to supplement things for stylistic or additional functionality purposes\n *\n * See tests for examples\n */\nexport function MergeProvider<A, B, C, D, E, F, G, H, I, J, K>({\n  values,\n  children,\n}: MergeProviderProps<A, B, C, D, E, F, G, H, I, J, K>) {\n  for (let [context, next] of values) {\n    children = (\n      <context.Consumer>\n        {merge(context as Context<typeof next>, next, children)}\n      </context.Consumer>\n    );\n  }\n\n  return <>{children}</>;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIA,SAAS,KAAA,CAAS,OAAqB,EAAA,IAAA,EAAS,QAAqB,EAAA;AACnE,EAAO,OAAA,SAAS,SAAS,IAAS,EAAA;AAChC,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AAEb,IACE,IAAA,IAAA,IAAQ,QACR,IAAQ,IAAA,IAAA,IACR,OAAO,IAAS,KAAA,QAAA,IAChB,OAAO,IAAA,KAAS,QAChB,EAAA;AACA,MAAM,MAAA,SAAA,GACJ,OAAW,IAAA,IAAA,IAAS,IAAK,CAAA,KAAA,CAAA;AAE3B,MAAM,MAAA,SAAA,GACJ,OAAW,IAAA,IAAA,IAAS,IAAK,CAAA,KAAA,CAAA;AAE3B,MAAA,IAAI,aAAa,SAAW,EAAA;AAC1B,QAAS,MAAA,GAAA;AAAA,UACP,GAAG,IAAA;AAAA,UACH,GAAG,IAAA;AAAA,UACH,KAAO,EAAA;AAAA,YACL,GAAG,SAAA;AAAA,YACH,GAAG,SAAA;AAAA,YACH,GAAG,QAAQ,OAAQ,CAAA,SAAS,EAAE,MAE5B,CAAA,CAAC,KAAK,GAAQ,KAAA;AACd,cAAM,MAAA,KAAA,GAAQ,UAAU,GAAG,CAAA,CAAA;AAE3B,cAAA,IAAI,MAAO,CAAA,MAAA,CAAO,SAAW,EAAA,GAAG,CAAG,EAAA;AACjC,gBAAA,GAAA,CAAI,GAAG,CAAI,GAAA,UAAA,CAAW,SAAU,CAAA,GAAG,GAAG,KAAK,CAAA,CAAA;AAAA,eAC7C;AAEA,cAAO,OAAA,GAAA,CAAA;AAAA,aACT,EAAG,EAAE,CAAA;AAAA,WACP;AAAA,SACF,CAAA;AAAA,OACS,MAAA,IAAA,CAAC,SAAa,IAAA,CAAC,SAAW,EAAA;AACnC,QAAS,MAAA,GAAA,UAAA,CAAW,MAAgB,IAAc,CAAA,CAAA;AAAA,OACpD;AAAA,KACF;AAEA,IAAA,2BAAQ,OAAQ,CAAA,QAAA,EAAR,EAAiB,KAAA,EAAO,QAAS,QAAS,EAAA,CAAA,CAAA;AAAA,GACpD,CAAA;AACF,CAAA;AAcO,SAAS,aAA+C,CAAA;AAAA,EAC7D,MAAA;AAAA,EACA,QAAA;AACF,CAAwD,EAAA;AACtD,EAAA,KAAA,IAAS,CAAC,OAAA,EAAS,IAAI,CAAA,IAAK,MAAQ,EAAA;AAClC,IACE,QAAA,mBAAA,GAAA,CAAC,QAAQ,QAAR,EAAA,EACE,gBAAM,OAAiC,EAAA,IAAA,EAAM,QAAQ,CACxD,EAAA,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uCAAU,QAAS,EAAA,CAAA,CAAA;AACrB;;;;"}

package/dist/components/merge-provider/types.d.ts

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+import type { ProviderValues } from '../../types';
+export type MergeProviderProps<A = any, B = any, C = any, D = any, E = any, F = any, G = any, H = any, I = any, J = any, K = any> = PropsWithChildren<{
+    values: ProviderValues<A, B, C, D, E, F, G, H, I, J, K>;
+}>;

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

@@ -0,0 +1,3 @@
+export { Options, OptionsContext, OptionsItem, OptionsItemContext, OptionsList, OptionsListContext, } from './options';
+export { optionsClassNames, optionsColorVars, optionsContainers, optionsItemStateVars, optionsListStateVars, optionsSpaceVars, optionsStateVars, } from './options.css';
+export { type OptionsClassNames, type OptionsItemProps, type OptionsItemState, type OptionsListProps, type OptionsListState, type OptionsMapping, type OptionsProps, type OptionsSizes, type OptionsState, } from './types';

package/dist/components/options/options.css.d.ts

@@ -0,0 +1,75 @@
+import type { OptionsClassNames } from './types';
+export declare const optionsContainers: {
+    options: string;
+    list: string;
+    item: string;
+};
+export declare const optionsStateVars: {
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEntering: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isExiting: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    placement: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const optionsListStateVars: {
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEmpty: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const optionsItemStateVars: {
+    selectionBehavior: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    selectionMode: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    hasDescription: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const optionsColorVars: {
+    list: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    header: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    separator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    item: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    label: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    description: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const optionsSpaceVars: {
+    options: {
+        minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    section: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    header: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    separator: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    item: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+export declare const optionsClassNames: OptionsClassNames;

package/dist/components/options/options.d.ts

@@ -0,0 +1,20 @@
+import { type ContextValue } from 'react-aria-components';
+import type { OptionsItemProps, OptionsListProps, OptionsMapping, OptionsProps } from './types';
+export declare const OptionsContext: import("react").Context<ContextValue<OptionsProps, HTMLElement>>;
+export declare const Options: (props: Omit<import("react-aria-components").PopoverProps, "className" | "style"> & {
+    classNames?: import("./types").OptionsClassNames;
+    mapping?: Partial<OptionsMapping>;
+    size?: import("./types").OptionsSizes;
+} & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;
+export declare const OptionsListContext: import("react").Context<ContextValue<OptionsListProps<object>, HTMLDivElement>>;
+export declare const OptionsList: <T extends object>(props: Omit<import("react-aria-components").ListBoxProps<T>, "className" | "style" | "orientation" | "dragAndDropHooks"> & {
+    classNames?: import("./types").OptionsClassNames;
+    mapping?: Partial<OptionsMapping>;
+    size?: import("./types").OptionsSizes;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+export declare const OptionsItemContext: import("react").Context<ContextValue<OptionsItemProps<object>, HTMLDivElement>>;
+export declare const OptionsItem: <T extends object>(props: Omit<import("react-aria-components").ListBoxItemProps<T>, "className" | "style"> & {
+    classNames?: import("./types").OptionsClassNames;
+    mapping?: Partial<OptionsMapping>;
+    size?: import("./types").OptionsSizes;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;