@box/blueprint-web 5.31.3

package/lib-esm/primitives/chips/filter-chip/filter-chip-button.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import { Chip } from '../chip.js';
+import styles from '../chip.module.js';
+
+/**
+ * Chip component to be used inside FilterChip.Group.
+ * This chip button should be used to link to another context, e.g. opening a side panel.
+ */
+const FilterChipButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    onClick,
+    ...rest
+  } = props;
+  const handleOnClick = useCallback(event => {
+    event.preventDefault();
+    onClick?.(event);
+  }, [onClick]);
+  return jsx(Chip, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.chipButton, className),
+    onClick: handleOnClick
+  });
+});
+FilterChipButton.displayName = 'FilterChip.ChipButton';
+
+export { FilterChipButton };

package/lib-esm/primitives/chips/filter-chip/filter-chip-group-context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface GroupValueChangeAction {
+    value: string;
+    action: 'add' | 'delete';
+}
+export interface FilterChipGroupContextValue {
+    type: 'multiple' | 'single' | null;
+    comboChipsValue: Set<string> | null;
+    dispatchComboChipsValueChange: ((action: GroupValueChangeAction) => void) | null;
+}
+export declare const FilterChipGroupContext: import("react").Context<FilterChipGroupContextValue>;

package/lib-esm/primitives/chips/filter-chip/filter-chip-group-context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+const FilterChipGroupContext = /*#__PURE__*/createContext({
+  type: null,
+  comboChipsValue: null,
+  dispatchComboChipsValueChange: null
+});
+
+export { FilterChipGroupContext };

package/lib-esm/primitives/chips/filter-chip/filter-chip.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type ChipProps, type ChipsGroupProps } from '../types';
+export type FilterChipProps = ChipProps;
+/**
+ * Chip component to be used inside FilterChip.Group.
+ * Based on [Radix ToggleGroup.Item](https://www.radix-ui.com/docs/primitives/components/toggle-group#item)
+ */
+export declare const FilterChipChip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type FilterChipGroupProps = Omit<ChipsGroupProps, 'type'> & {
+    type: 'single' | 'multiple';
+};
+/**
+ * Container for FilterChips, this component handles keyboard navigation and chips selection state.
+ * Based on [Radix ToggleGroup](https://www.radix-ui.com/docs/primitives/components/toggle-group)
+ */
+export declare const FilterChipGroup: import("react").ForwardRefExoticComponent<Omit<Omit<ChipsGroupProps, "type"> & {
+    type: 'single' | 'multiple';
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/chips/filter-chip/filter-chip.js

@@ -0,0 +1,85 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useContext, useState, useCallback, useReducer, useMemo } from 'react';
+import { switchCase } from '../../../utils/switchCase.js';
+import { Chip } from '../chip.js';
+import styles from '../chip.module.js';
+import { ChipsGroup } from '../chips-group.js';
+import { FilterChipGroupContext } from './filter-chip-group-context.js';
+
+/**
+ * Chip component to be used inside FilterChip.Group.
+ * Based on [Radix ToggleGroup.Item](https://www.radix-ui.com/docs/primitives/components/toggle-group#item)
+ */
+const FilterChipChip = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    ...rest
+  } = props;
+  const {
+    type
+  } = useContext(FilterChipGroupContext);
+  const chipClassName = type === 'multiple' ? styles.multiSelectChip : styles.singleSelectChip;
+  return jsx(Chip, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(className, chipClassName)
+  });
+});
+FilterChipChip.displayName = 'FilterChip.Chip';
+/**
+ * Container for FilterChips, this component handles keyboard navigation and chips selection state.
+ * Based on [Radix ToggleGroup](https://www.radix-ui.com/docs/primitives/components/toggle-group)
+ */
+const FilterChipGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    name,
+    children,
+    className,
+    ...rest
+  } = props;
+  const groupPropsRest = props.type === 'single' ? rest : rest;
+  const {
+    onValueChange
+  } = groupPropsRest;
+  const [chipGroupValue, setChipGroupValue] = useState([]);
+  const comboChipsValueReducer = useCallback((groupValueState, groupChangeAction) => {
+    const newGroupValue = new Set(groupValueState);
+    switchCase({
+      add: () => newGroupValue.add(groupChangeAction.value),
+      delete: () => newGroupValue.delete(groupChangeAction.value)
+    })(groupChangeAction.action)?.();
+    onValueChange?.([...chipGroupValue, ...Array.from(newGroupValue)]);
+    return newGroupValue;
+  }, [chipGroupValue, onValueChange]);
+  const [comboChipsValue, dispatchComboChipsValueChange] = useReducer(comboChipsValueReducer, new Set());
+  const handleGroupValueChange = useCallback(newValue => {
+    if (props.type === 'single') {
+      setChipGroupValue(newValue);
+      onValueChange?.(newValue);
+    } else {
+      const groupValueWithoutOptionValues = newValue.filter(value => !comboChipsValue.has(value));
+      setChipGroupValue(groupValueWithoutOptionValues);
+      onValueChange?.([...groupValueWithoutOptionValues, ...comboChipsValue]);
+    }
+  }, [comboChipsValue, onValueChange, props.type]);
+  const providerValue = useMemo(() => ({
+    comboChipsValue,
+    dispatchComboChipsValueChange,
+    type: props.type
+  }), [comboChipsValue, dispatchComboChipsValueChange, props.type]);
+  return jsx(FilterChipGroupContext.Provider, {
+    value: providerValue,
+    children: jsx(ChipsGroup, {
+      ...groupPropsRest,
+      ref: forwardedRef,
+      className: className,
+      name: name,
+      onValueChange: handleGroupValueChange,
+      children: children
+    })
+  });
+});
+FilterChipGroup.displayName = 'FilterChip.Group';
+
+export { FilterChipChip, FilterChipGroup };

package/lib-esm/primitives/chips/filter-chip/filter-combo-chip.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type DropdownMenuRootProps } from '../../dropdown-menu';
+import { type DropdownMenuCheckboxItemProps } from '../../dropdown-menu/dropdown-menu-checkbox-item';
+export type FilterComboOptionProps = DropdownMenuCheckboxItemProps & {
+    /** A unique value for the item. */
+    value: string;
+};
+/**
+ * Chip component to be used inside FilterChip.Group.
+ * Based on [Radix ToggleGroup.Item](https://www.radix-ui.com/docs/primitives/components/toggle-group#item)
+ */
+export declare const FilterComboOption: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuCheckboxItemProps & {
+    /** A unique value for the item. */
+    value: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export type FilterComboChipProps = DropdownMenuRootProps & {
+    /** FilterChip.Chip component used as Dropdown menu trigger. Trigger chip value is ignored from selection */
+    chip: React.ReactElement;
+    /** List of FilterChip.ComboOption elements displayed in the dropdown menu */
+    children: React.ReactNode;
+};
+export declare const FilterComboChip: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuProps & {
+    /** FilterChip.Chip component used as Dropdown menu trigger. Trigger chip value is ignored from selection */
+    chip: React.ReactElement;
+    /** List of FilterChip.ComboOption elements displayed in the dropdown menu */
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/chips/filter-chip/filter-combo-chip.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useContext, useCallback, useReducer, cloneElement, createContext } from 'react';
+import { DropdownMenu } from '../../dropdown-menu/index.js';
+import styles from '../chip.module.js';
+import { FilterChipGroupContext } from './filter-chip-group-context.js';
+
+const FilterComboChipContext = /*#__PURE__*/createContext({
+  dispatchSelectionCountChange: null
+});
+/**
+ * Chip component to be used inside FilterChip.Group.
+ * Based on [Radix ToggleGroup.Item](https://www.radix-ui.com/docs/primitives/components/toggle-group#item)
+ */
+const FilterComboOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    value,
+    ...rest
+  } = props;
+  const {
+    dispatchSelectionCountChange
+  } = useContext(FilterComboChipContext);
+  const {
+    comboChipsValue,
+    dispatchComboChipsValueChange
+  } = useContext(FilterChipGroupContext);
+  const onCheckedChange = useCallback(checked => {
+    const action = checked ? 'add' : 'delete';
+    dispatchComboChipsValueChange?.({
+      value,
+      action
+    });
+    dispatchSelectionCountChange?.({
+      action
+    });
+  }, [dispatchComboChipsValueChange, dispatchSelectionCountChange, value]);
+  return jsx(DropdownMenu.CheckboxItem, {
+    ...rest,
+    ref: forwardedRef,
+    checked: comboChipsValue?.has(value),
+    className: className,
+    onCheckedChange: onCheckedChange
+  });
+});
+FilterComboOption.displayName = 'FilterChip.ComboOption';
+const comboChipSelectionCountReducer = (selectionCount, {
+  action
+}) => {
+  if (action === 'add') {
+    return selectionCount + 1;
+  }
+  return selectionCount - 1;
+};
+const FilterComboChip = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    chip,
+    children,
+    ...rest
+  } = props;
+  const [selectionCount, dispatchSelectionCountChange] = useReducer(comboChipSelectionCountReducer, 0);
+  const isSelectionActive = selectionCount > 0;
+  return jsx(FilterComboChipContext.Provider, {
+    value: {
+      dispatchSelectionCountChange
+    },
+    children: jsxs(DropdownMenu.Root, {
+      ...rest,
+      children: [jsx(DropdownMenu.Trigger, {
+        children: /*#__PURE__*/cloneElement(chip, {
+          className: clsx(chip.props.className, styles.multiSelectChip),
+          'data-state': isSelectionActive ? 'on' : 'off',
+          'aria-pressed': isSelectionActive
+        })
+      }), jsx(DropdownMenu.Content, {
+        align: "start",
+        children: children
+      })]
+    })
+  });
+});
+FilterComboChip.displayName = 'FilterChip.ComboChip';
+
+export { FilterComboChip, FilterComboOption };

package/lib-esm/primitives/chips/filter-chip/filter-trigger-chip.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { type ChipProps } from '../types';
+export type FilterTriggerChipProps = ChipProps & {
+    /** Override chip selection state. When using this prop user is responsible for managing the chips group value. */
+    selected?: boolean;
+};
+/**
+ * Chip component to be used inside FilterChip.Group.
+ * This trigger chip should be used as a trigger for popups with custom content, e.g. when the combo chip's dropdown is not sufficient.
+ * The selection state must be controlled by the user via the 'selected' prop.
+ * Based on [Radix ToggleGroup.Item](https://www.radix-ui.com/docs/primitives/components/toggle-group#item)
+ */
+export declare const FilterTriggerChip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & {
+    /** Override chip selection state. When using this prop user is responsible for managing the chips group value. */
+    selected?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/primitives/chips/filter-chip/filter-trigger-chip.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useContext } from 'react';
+import { Chip } from '../chip.js';
+import { FilterChipGroupContext } from './filter-chip-group-context.js';
+import styles from '../chip.module.js';
+
+/**
+ * Chip component to be used inside FilterChip.Group.
+ * This trigger chip should be used as a trigger for popups with custom content, e.g. when the combo chip's dropdown is not sufficient.
+ * The selection state must be controlled by the user via the 'selected' prop.
+ * Based on [Radix ToggleGroup.Item](https://www.radix-ui.com/docs/primitives/components/toggle-group#item)
+ */
+const FilterTriggerChip = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    selected,
+    ...rest
+  } = props;
+  const {
+    type
+  } = useContext(FilterChipGroupContext);
+  const chipClassName = type === 'multiple' ? styles.multiSelectChip : styles.singleSelectChip;
+  const selectionStateAttrs = {
+    'data-state': selected ? 'on' : 'off',
+    'aria-pressed': Boolean(selected)
+  };
+  return jsx(Chip, {
+    ...rest,
+    ...selectionStateAttrs,
+    ref: forwardedRef,
+    className: clsx(className, chipClassName)
+  });
+});
+FilterTriggerChip.displayName = 'FilterChip.TriggerChip';
+
+export { FilterTriggerChip };

package/lib-esm/primitives/chips/filter-chip/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const FilterChip: {
+    Chip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ChipButton: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<Omit<import("../types").ChipsGroupProps, "type"> & {
+        type: "single" | "multiple";
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children"> & {
+        children: string;
+    }, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Icon: import("react").ForwardRefExoticComponent<import("../types").ChipIconProps & import("react").RefAttributes<SVGSVGElement>>;
+    Status: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
+        children: string;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    DropdownIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<SVGSVGElement>>;
+    ComboChip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuProps & {
+        chip: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        children: import("react").ReactNode;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    ComboChipOption: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuCheckboxItemProps & {
+        value: string;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    TriggerChip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & {
+        selected?: boolean | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { type FilterChipGroupProps, type FilterChipProps } from './filter-chip';

package/lib-esm/primitives/chips/filter-chip/index.js

@@ -0,0 +1,23 @@
+import { ChipDropdownIndicator } from '../chip-dropdown-indicator.js';
+import { ChipIcon } from '../chip-icon.js';
+import { ChipLabel } from '../chip-label.js';
+import { ChipStatus } from '../chip-status.js';
+import { FilterChipChip, FilterChipGroup } from './filter-chip.js';
+import { FilterChipButton } from './filter-chip-button.js';
+import { FilterComboChip, FilterComboOption } from './filter-combo-chip.js';
+import { FilterTriggerChip } from './filter-trigger-chip.js';
+
+const FilterChip = {
+  Chip: FilterChipChip,
+  ChipButton: FilterChipButton,
+  Group: FilterChipGroup,
+  Label: ChipLabel,
+  Icon: ChipIcon,
+  Status: ChipStatus,
+  DropdownIndicator: ChipDropdownIndicator,
+  ComboChip: FilterComboChip,
+  ComboChipOption: FilterComboOption,
+  TriggerChip: FilterTriggerChip
+};
+
+export { FilterChip };

package/lib-esm/primitives/chips/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type * as ToggleGroup from '@radix-ui/react-toggle-group';
+export interface ChipsGroupSingleProps extends ToggleGroup.ToggleGroupImplSingleProps {
+    type: 'single';
+}
+export interface ChipsGroupMultipleProps extends ToggleGroup.ToggleGroupImplMultipleProps {
+    type: 'multiple';
+}
+export type ChipsGroupProps = (ChipsGroupSingleProps | ChipsGroupMultipleProps) & (React.RefAttributes<HTMLDivElement> & {
+    /** The name of the group. Submitted with its owning form as part of a name/value pair. */
+    name: string;
+});
+export type ChipProps = ToggleGroup.ToggleGroupItemProps;
+export interface ChipIconProps {
+    className?: string;
+    icon: React.FunctionComponent<React.PropsWithChildren<React.SVGProps<SVGSVGElement>>>;
+}
+export type ChipStatusProps = Omit<React.ComponentProps<'div'>, 'children'> & {
+    children: string;
+};
+export type ChipLabelProps = Omit<React.ComponentProps<'span'>, 'children'> & {
+    children: string;
+};

package/lib-esm/primitives/context-menu/context-menu-item.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+export type ContextMenuItemProps = ContextMenuPrimitive.ContextMenuItemProps;
+/**
+ * Based on Radix-UI context menu [Item](https://www.radix-ui.com/docs/primitives/components/context-menu#item).<br>
+ * Contains sub components: <b>Item.MainContent</b> and <b>Item.SideContent</b>.
+ */
+export declare const ContextMenuItem: import("react").ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuItemProps & import("react").RefAttributes<HTMLDivElement>> & {
+    /**
+     * Container for side content of menu item.
+     */
+    SideContent: ({ children, className, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemSideContentProps) => JSX.Element;
+    /**
+     * Text content of menu item.
+     */
+    MainContent: ({ className, label, description, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemMainContentProps) => JSX.Element;
+};

package/lib-esm/primitives/context-menu/context-menu-item.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
+import clsx from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import { MenuItemSideContent, MenuItemMainContent } from '../../util-components/menu-item-sections/menu-item-sections.js';
+import styles from './context-menu.module.js';
+
+const MenuItemRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const preventDefault = useCallback(event => event.preventDefault(), []);
+  return jsx(ContextMenuPrimitve.Item, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.menuItem, className),
+    onPointerLeave: preventDefault,
+    onPointerMove: preventDefault,
+    children: children
+  });
+});
+MenuItemRoot.displayName = 'ContextMenuItem';
+/**
+ * Based on Radix-UI context menu [Item](https://www.radix-ui.com/docs/primitives/components/context-menu#item).<br>
+ * Contains sub components: <b>Item.MainContent</b> and <b>Item.SideContent</b>.
+ */
+const ContextMenuItem = Object.assign(MenuItemRoot, {
+  /**
+   * Container for side content of menu item.
+   */
+  SideContent: MenuItemSideContent,
+  /**
+   * Text content of menu item.
+   */
+  MainContent: MenuItemMainContent
+});
+
+export { ContextMenuItem };

package/lib-esm/primitives/context-menu/context-menu-items-separator.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Used to visually separate items in the context menu.
+ */
+export declare const ItemsSeparator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;

package/lib-esm/primitives/context-menu/context-menu-items-separator.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { Separator } from '@radix-ui/react-context-menu';
+import { forwardRef } from 'react';
+import styles from './context-menu.module.js';
+
+/**
+ * Used to visually separate items in the context menu.
+ */
+const ItemsSeparator = /*#__PURE__*/forwardRef((_, forwardedRef) => {
+  return jsx(Separator, {
+    ref: forwardedRef,
+    className: styles.menuItemsSeparator
+  });
+});
+
+export { ItemsSeparator };

package/lib-esm/primitives/context-menu/context-menu-menu-content.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
+export interface ContextMenuMenuContentProps extends ContextMenuPrimitve.ContextMenuContentProps {
+    /** Specify a container element to portal the content into.
+     * @default document.body */
+    container?: ContextMenuPrimitve.ContextMenuPortalProps['container'];
+}
+/**
+ * Based on Radix-UI [Content](https://www.radix-ui.com/docs/primitives/components/context-menu#content).
+ */
+export declare const ContextMenuMenuContent: import("react").ForwardRefExoticComponent<ContextMenuMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/context-menu/context-menu-menu-content.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './context-menu.module.js';
+
+/**
+ * Based on Radix-UI [Content](https://www.radix-ui.com/docs/primitives/components/context-menu#content).
+ */
+const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    container,
+    className,
+    ...rest
+  } = props;
+  return jsx(ContextMenuPrimitve.Portal, {
+    container: container,
+    children: jsx(ContextMenuPrimitve.Content, {
+      ...rest,
+      ref: forwardedRef,
+      className: clsx(styles.menuBlock, className),
+      children: children
+    })
+  });
+});
+ContextMenuMenuContent.displayName = 'ContextMenuMenuContent';
+
+export { ContextMenuMenuContent };

package/lib-esm/primitives/context-menu/context-menu-menu-root.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type ContextMenuProps as ContextMenuPrimitiveProps } from '@radix-ui/react-context-menu';
+export type ContextMenuMenuRootProps = ContextMenuPrimitiveProps;
+/**
+ * Contains all the parts of a context menu.<br>
+ * Based on Radix-UI context menu [Root](https://www.radix-ui.com/docs/primitives/components/context-menu#root).
+ */
+export declare const ContextMenuMenuRoot: (props: ContextMenuMenuRootProps) => JSX.Element;

package/lib-esm/primitives/context-menu/context-menu-menu-root.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { Root } from '@radix-ui/react-context-menu';
+
+/**
+ * Contains all the parts of a context menu.<br>
+ * Based on Radix-UI context menu [Root](https://www.radix-ui.com/docs/primitives/components/context-menu#root).
+ */
+const ContextMenuMenuRoot = props => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx(Root, {
+    ...rest,
+    children: children
+  });
+};
+
+export { ContextMenuMenuRoot };

package/lib-esm/primitives/context-menu/context-menu-menu-trigger.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type ContextMenuTriggerProps as PrimitiveTriggerProps } from '@radix-ui/react-context-menu';
+export type ContextMenuMenuTriggerProps = PrimitiveTriggerProps;
+/**
+ * The area that opens the context menu. Based on Radix UI context menu [trigger](https://www.radix-ui.com/docs/primitives/components/context-menu#trigger).<br>
+ * Wrap it around the target which should open the context menu.
+ */
+export declare const ContextMenuMenuTrigger: import("react").ForwardRefExoticComponent<PrimitiveTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;

package/lib-esm/primitives/context-menu/context-menu-menu-trigger.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { Trigger } from '@radix-ui/react-context-menu';
+import { forwardRef } from 'react';
+
+/**
+ * The area that opens the context menu. Based on Radix UI context menu [trigger](https://www.radix-ui.com/docs/primitives/components/context-menu#trigger).<br>
+ * Wrap it around the target which should open the context menu.
+ */
+const ContextMenuMenuTrigger = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx(Trigger, {
+    ...rest,
+    ref: forwardedRef,
+    children: children
+  });
+});
+
+export { ContextMenuMenuTrigger };

package/lib-esm/primitives/context-menu/context-menu-sub-menu-content.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
+export interface ContextMenuSubMenuContentProps extends ContextMenuPrimitve.ContextMenuSubContentProps {
+    /** Specify a container element to portal the sub content into.
+     * @default document.body */
+    container?: ContextMenuPrimitve.ContextMenuPortalProps['container'];
+}
+/**
+ * Container for nested menu.<br>
+ * Based on Radix-UI [SubContent](https://www.radix-ui.com/docs/primitives/components/context-menu#subcontent).
+ */
+export declare const ContextMenuSubMenuContent: import("react").ForwardRefExoticComponent<ContextMenuSubMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/context-menu/context-menu-sub-menu-content.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './context-menu.module.js';
+
+const alignOffsetPx = -12;
+const sideOffsetPx = 12;
+/**
+ * Container for nested menu.<br>
+ * Based on Radix-UI [SubContent](https://www.radix-ui.com/docs/primitives/components/context-menu#subcontent).
+ */
+const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    container,
+    className,
+    ...rest
+  } = props;
+  return jsx(ContextMenuPrimitve.Portal, {
+    container: container,
+    children: jsx(ContextMenuPrimitve.SubContent, {
+      ...rest,
+      ref: forwardedRef,
+      alignOffset: alignOffsetPx,
+      className: clsx(styles.menuBlock, className),
+      sideOffset: sideOffsetPx,
+      children: children
+    })
+  });
+});
+ContextMenuSubMenuContent.displayName = 'ContextMenuSubMenuContent';
+
+export { ContextMenuSubMenuContent };

package/lib-esm/primitives/context-menu/context-menu-sub-menu-root.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { type ContextMenuSubProps as ContextMenuPrimitiveSubMenuProps } from '@radix-ui/react-context-menu';
+export type ContextMenuSubMenuRootProps = ContextMenuPrimitiveSubMenuProps;
+/**
+ * Container for all the parts of a sub menu.
+ * Based on Radix-UI [SubMenu component](https://www.radix-ui.com/docs/primitives/components/context-menu#sub).
+ */
+export declare const ContextMenuSubMenuRoot: {
+    (props: ContextMenuSubMenuRootProps): JSX.Element;
+    displayName: string;
+};