@nattstack/ui 0.0.45 → 0.0.47

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ComponentProps, ElementType, JSX, ReactNode } from "react";
-import { Drawer, OTPFieldPreview, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
+import { Drawer, Menu as Menu$1, OTPFieldPreview, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
 
 //#region src/components/button/button.d.ts
 interface ButtonIconProps extends ButtonInternalProps {
@@ -126,6 +126,135 @@ declare const LABEL_CLASS_NAME: {
   readonly BASE: string;
 };
 //#endregion
+//#region src/components/menu/menu.d.ts
+interface MenuProps extends Omit<Menu$1.Root.Props, "disabled" | "onOpenChange" | "open"> {
+  isDisabled?: Menu$1.Root.Props["disabled"];
+  isOpen?: Menu$1.Root.Props["open"];
+  onIsOpenChange?: Menu$1.Root.Props["onOpenChange"];
+}
+declare function Menu(props: MenuProps): JSX.Element;
+declare const createMenuHandle: typeof Menu$1.createHandle;
+//#endregion
+//#region src/components/menu/menu-checkbox-item.d.ts
+interface MenuCheckboxItemProps extends Omit<Menu$1.CheckboxItem.Props, "checked" | "className" | "defaultChecked" | "disabled"> {
+  className?: string;
+  iconEnd?: ReactNode;
+  indicator?: ReactNode;
+  isChecked?: Menu$1.CheckboxItem.Props["checked"];
+  isDefaultChecked?: Menu$1.CheckboxItem.Props["defaultChecked"];
+  isDisabled?: Menu$1.CheckboxItem.Props["disabled"];
+}
+declare function MenuCheckboxItem(props: MenuCheckboxItemProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-class-names.d.ts
+declare const MENU_CLASS_NAME: {
+  readonly ARROW: string;
+  readonly ARROW_ICON: string;
+  readonly CHECKBOX_ITEM: string;
+  readonly CONTENT: string;
+  readonly CONTENT_POSITIONER: string;
+  readonly GROUP: string;
+  readonly GROUP_LABEL: string;
+  readonly ITEM: string;
+  readonly ITEM_ICON: string;
+  readonly ITEM_INDICATOR: string;
+  readonly ITEM_LABEL: string;
+  readonly LINK_ITEM: string;
+  readonly RADIO_GROUP: string;
+  readonly RADIO_ITEM: string;
+  readonly SEPARATOR: string;
+  readonly SUBMENU_TRIGGER: string;
+  readonly TRIGGER: string;
+  readonly VIEWPORT: string;
+};
+//#endregion
+//#region src/components/menu/menu-content.d.ts
+interface MenuContentProps extends Omit<Menu$1.Popup.Props, "className">, Pick<Menu$1.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> {
+  className?: string;
+  container?: Menu$1.Portal.Props["container"];
+  keepMounted?: Menu$1.Portal.Props["keepMounted"];
+  showArrow?: boolean;
+}
+declare function MenuContent(props: MenuContentProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-group.d.ts
+interface MenuGroupProps extends Omit<Menu$1.Group.Props, "className"> {
+  className?: string;
+}
+declare function MenuGroup(props: MenuGroupProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-group-label.d.ts
+interface MenuGroupLabelProps extends Omit<Menu$1.GroupLabel.Props, "className"> {
+  className?: string;
+}
+declare function MenuGroupLabel(props: MenuGroupLabelProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-item.d.ts
+interface MenuItemProps extends Omit<Menu$1.Item.Props, "className" | "disabled"> {
+  className?: string;
+  iconEnd?: ReactNode;
+  iconStart?: ReactNode;
+  isDisabled?: Menu$1.Item.Props["disabled"];
+}
+declare function MenuItem(props: MenuItemProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-link-item.d.ts
+interface MenuLinkItemProps extends Omit<Menu$1.LinkItem.Props, "className"> {
+  className?: string;
+  iconEnd?: ReactNode;
+  iconStart?: ReactNode;
+}
+declare function MenuLinkItem(props: MenuLinkItemProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-radio-group.d.ts
+interface MenuRadioGroupProps extends Omit<Menu$1.RadioGroup.Props, "className" | "disabled"> {
+  className?: string;
+  isDisabled?: Menu$1.RadioGroup.Props["disabled"];
+}
+declare function MenuRadioGroup(props: MenuRadioGroupProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-radio-item.d.ts
+interface MenuRadioItemProps extends Omit<Menu$1.RadioItem.Props, "className" | "disabled"> {
+  className?: string;
+  iconEnd?: ReactNode;
+  indicator?: ReactNode;
+  isDisabled?: Menu$1.RadioItem.Props["disabled"];
+}
+declare function MenuRadioItem(props: MenuRadioItemProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-separator.d.ts
+interface MenuSeparatorProps extends Omit<Menu$1.Separator.Props, "className"> {
+  className?: string;
+}
+declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-submenu.d.ts
+interface MenuSubmenuProps extends Omit<Menu$1.SubmenuRoot.Props, "disabled" | "onOpenChange" | "open"> {
+  isDisabled?: Menu$1.SubmenuRoot.Props["disabled"];
+  isOpen?: Menu$1.SubmenuRoot.Props["open"];
+  onIsOpenChange?: Menu$1.SubmenuRoot.Props["onOpenChange"];
+}
+declare function MenuSubmenu(props: MenuSubmenuProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-submenu-trigger.d.ts
+interface MenuSubmenuTriggerProps extends Omit<Menu$1.SubmenuTrigger.Props, "className" | "disabled"> {
+  className?: string;
+  iconEnd?: ReactNode;
+  iconStart?: ReactNode;
+  isDisabled?: Menu$1.SubmenuTrigger.Props["disabled"];
+}
+declare function MenuSubmenuTrigger(props: MenuSubmenuTriggerProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-trigger.d.ts
+interface MenuTriggerProps extends Menu$1.Trigger.Props {}
+declare function MenuTrigger(props: MenuTriggerProps): JSX.Element;
+//#endregion
+//#region src/components/menu/menu-viewport.d.ts
+interface MenuViewportProps extends Omit<Menu$1.Viewport.Props, "className"> {
+  className?: string;
+}
+declare function MenuViewport(props: MenuViewportProps): JSX.Element;
+//#endregion
 //#region src/components/otp-field/otp-field.d.ts
 interface OTPFieldProps extends Omit<OTPFieldPreview.Root.Props, "disabled"> {
   isDisabled?: OTPFieldPreview.Root.Props["disabled"];
@@ -293,4 +422,4 @@ declare function TooltipProvider(props: TooltipProviderProps): JSX.Element;
 interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {}
 declare function TooltipTrigger(props: TooltipTriggerProps): JSX.Element;
 //#endregion
-export { BUTTON_CLASS_NAME, Button, ButtonIconProps, ButtonLink, ButtonLinkProps, ButtonProps, COLUMN_CLASS_NAME, Column, ColumnProps, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, INPUT_CLASS_NAME, Input, InputProps, LABEL_CLASS_NAME, Label, LabelProps, OTPField, OTPFieldInput, OTP_FIELD_CLASS_NAME, OTP_FIELD_INPUT_CLASS_NAME, ROW_CLASS_NAME, Row, RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, SpacerProps, Switch, SwitchProps, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps };
+export { BUTTON_CLASS_NAME, Button, ButtonIconProps, ButtonLink, ButtonLinkProps, ButtonProps, COLUMN_CLASS_NAME, Column, ColumnProps, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, INPUT_CLASS_NAME, Input, InputProps, LABEL_CLASS_NAME, Label, LabelProps, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLinkItem, MenuLinkItemProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSubmenu, MenuSubmenuProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, MenuViewport, MenuViewportProps, OTPField, OTPFieldInput, OTP_FIELD_CLASS_NAME, OTP_FIELD_INPUT_CLASS_NAME, ROW_CLASS_NAME, Row, RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, SpacerProps, Switch, SwitchProps, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps, createMenuHandle };

package/dist/components/index.js

@@ -1,7 +1,7 @@
 import './style.css';
 import { createElement } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Drawer, OTPFieldPreview, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Drawer, Menu as Menu$1, OTPFieldPreview, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
 //#region src/utils/normalize-whitespace.ts
 /**
 * Collapses consecutive whitespace characters into single spaces and trims
@@ -316,6 +316,346 @@ function Label(props) {
 }
 const LABEL_CLASS_NAME = { BASE: label_module_default.label };
 //#endregion
+//#region src/components/menu/menu.tsx
+function Menu(props) {
+	const { isDisabled = false, isOpen = void 0, onIsOpenChange = void 0, ...rest } = props;
+	return /* @__PURE__ */ jsx(Menu$1.Root, {
+		"data-slot": "menu",
+		disabled: isDisabled,
+		onOpenChange: onIsOpenChange,
+		open: isOpen,
+		...rest
+	});
+}
+const createMenuHandle = Menu$1.createHandle;
+//#endregion
+//#region src/components/menu/menu.module.css
+var menu_module_default = {
+	"menu_checkbox_item": "menu-module_menu_checkbox_item_PqTckW",
+	"menu_content": "menu-module_menu_content_PqTckW",
+	"menu_content_arrow": "menu-module_menu_content_arrow_PqTckW",
+	"menu_content_arrow__icon": "menu-module_menu_content_arrow__icon_PqTckW",
+	"menu_content_positioner": "menu-module_menu_content_positioner_PqTckW",
+	"menu_group": "menu-module_menu_group_PqTckW",
+	"menu_group_label": "menu-module_menu_group_label_PqTckW",
+	"menu_item": "menu-module_menu_item_PqTckW",
+	"menu_item__icon": "menu-module_menu_item__icon_PqTckW",
+	"menu_item__indicator": "menu-module_menu_item__indicator_PqTckW",
+	"menu_item__label": "menu-module_menu_item__label_PqTckW",
+	"menu_link_item": "menu-module_menu_link_item_PqTckW",
+	"menu_radio_group": "menu-module_menu_radio_group_PqTckW",
+	"menu_radio_item": "menu-module_menu_radio_item_PqTckW",
+	"menu_separator": "menu-module_menu_separator_PqTckW",
+	"menu_submenu_trigger": "menu-module_menu_submenu_trigger_PqTckW",
+	"menu_trigger": "menu-module_menu_trigger_PqTckW",
+	"menu_viewport": "menu-module_menu_viewport_PqTckW"
+};
+//#endregion
+//#region src/components/menu/menu-class-names.ts
+const MENU_CLASS_NAME = {
+	ARROW: menu_module_default.menu_content_arrow,
+	ARROW_ICON: menu_module_default.menu_content_arrow__icon,
+	CHECKBOX_ITEM: menu_module_default.menu_checkbox_item,
+	CONTENT: menu_module_default.menu_content,
+	CONTENT_POSITIONER: menu_module_default.menu_content_positioner,
+	GROUP: menu_module_default.menu_group,
+	GROUP_LABEL: menu_module_default.menu_group_label,
+	ITEM: menu_module_default.menu_item,
+	ITEM_ICON: menu_module_default.menu_item__icon,
+	ITEM_INDICATOR: menu_module_default.menu_item__indicator,
+	ITEM_LABEL: menu_module_default.menu_item__label,
+	LINK_ITEM: menu_module_default.menu_link_item,
+	RADIO_GROUP: menu_module_default.menu_radio_group,
+	RADIO_ITEM: menu_module_default.menu_radio_item,
+	SEPARATOR: menu_module_default.menu_separator,
+	SUBMENU_TRIGGER: menu_module_default.menu_submenu_trigger,
+	TRIGGER: menu_module_default.menu_trigger,
+	VIEWPORT: menu_module_default.menu_viewport
+};
+//#endregion
+//#region src/components/menu/menu-utils.ts
+function getMenuClassName(baseClassName, customClassName) {
+	return normalizeWhitespace(`
+    ${baseClassName}
+    ${customClassName}
+  `);
+}
+//#endregion
+//#region src/components/menu/menu-checkbox-item.tsx
+function MenuCheckboxItem(props) {
+	const { children, className: customClassName = "", iconEnd = void 0, indicator = void 0, isChecked = void 0, isDefaultChecked = false, isDisabled = false, ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.CHECKBOX_ITEM, customClassName);
+	const currentIndicator = indicator ?? /* @__PURE__ */ jsx("svg", {
+		fill: "none",
+		height: "16",
+		viewBox: "0 0 16 16",
+		width: "16",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M3.5 8.5L6.5 11.5L12.5 4.5",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		})
+	});
+	return /* @__PURE__ */ jsxs(Menu$1.CheckboxItem, {
+		checked: isChecked,
+		className: combinedClassName,
+		"data-slot": "menu-checkbox-item",
+		defaultChecked: isDefaultChecked,
+		disabled: isDisabled,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
+				className: MENU_CLASS_NAME.ITEM_INDICATOR,
+				children: currentIndicator
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: MENU_CLASS_NAME.ITEM_LABEL,
+				children
+			}),
+			iconEnd && /* @__PURE__ */ jsx("span", {
+				className: MENU_CLASS_NAME.ITEM_ICON,
+				children: iconEnd
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/menu/menu-content.tsx
+function MenuContent(props) {
+	const { align = "start", alignOffset = void 0, anchor = void 0, arrowPadding = void 0, children, className: customClassName = "", collisionAvoidance = void 0, collisionBoundary = void 0, collisionPadding = void 0, container = void 0, disableAnchorTracking = void 0, keepMounted = void 0, positionMethod = void 0, showArrow = false, side = "bottom", sideOffset = 8, sticky = void 0, ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.CONTENT, customClassName);
+	return /* @__PURE__ */ jsx(Menu$1.Portal, {
+		container,
+		keepMounted,
+		children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			className: MENU_CLASS_NAME.CONTENT_POSITIONER,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			children: /* @__PURE__ */ jsxs(Menu$1.Popup, {
+				className: combinedClassName,
+				"data-slot": "menu-content",
+				...rest,
+				children: [showArrow && /* @__PURE__ */ jsx(Menu$1.Arrow, {
+					className: MENU_CLASS_NAME.ARROW,
+					children: /* @__PURE__ */ jsx("svg", {
+						className: MENU_CLASS_NAME.ARROW_ICON,
+						fill: "none",
+						height: "6",
+						viewBox: "0 0 12 6",
+						width: "12",
+						children: /* @__PURE__ */ jsx("path", { d: "M0 6L5.15 0.85C5.62 0.38 6.38 0.38 6.85 0.85L12 6H0Z" })
+					})
+				}), children]
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/menu/menu-group.tsx
+function MenuGroup(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.GROUP, customClassName);
+	return /* @__PURE__ */ jsx(Menu$1.Group, {
+		className: combinedClassName,
+		"data-slot": "menu-group",
+		...rest
+	});
+}
+//#endregion
+//#region src/components/menu/menu-group-label.tsx
+function MenuGroupLabel(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.GROUP_LABEL, customClassName);
+	return /* @__PURE__ */ jsx(Menu$1.GroupLabel, {
+		className: combinedClassName,
+		"data-slot": "menu-group-label",
+		...rest
+	});
+}
+//#endregion
+//#region src/components/menu/menu-item-content.tsx
+function MenuItemContent(props) {
+	const { children, iconEnd = void 0, iconStart = void 0 } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		iconStart && /* @__PURE__ */ jsx("span", {
+			className: MENU_CLASS_NAME.ITEM_ICON,
+			children: iconStart
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: MENU_CLASS_NAME.ITEM_LABEL,
+			children
+		}),
+		iconEnd && /* @__PURE__ */ jsx("span", {
+			className: MENU_CLASS_NAME.ITEM_ICON,
+			children: iconEnd
+		})
+	] });
+}
+//#endregion
+//#region src/components/menu/menu-item.tsx
+function MenuItem(props) {
+	const { children, className: customClassName = "", iconEnd = void 0, iconStart = void 0, isDisabled = false, ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.ITEM, customClassName);
+	return /* @__PURE__ */ jsx(Menu$1.Item, {
+		className: combinedClassName,
+		"data-slot": "menu-item",
+		disabled: isDisabled,
+		...rest,
+		children: /* @__PURE__ */ jsx(MenuItemContent, {
+			iconEnd,
+			iconStart,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/components/menu/menu-link-item.tsx
+function MenuLinkItem(props) {
+	const { children, className: customClassName = "", iconEnd = void 0, iconStart = void 0, ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.LINK_ITEM, customClassName);
+	return /* @__PURE__ */ jsx(Menu$1.LinkItem, {
+		className: combinedClassName,
+		"data-slot": "menu-link-item",
+		...rest,
+		children: /* @__PURE__ */ jsx(MenuItemContent, {
+			iconEnd,
+			iconStart,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/components/menu/menu-radio-group.tsx
+function MenuRadioGroup(props) {
+	const { className: customClassName = "", isDisabled = false, ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.RADIO_GROUP, customClassName);
+	return /* @__PURE__ */ jsx(Menu$1.RadioGroup, {
+		className: combinedClassName,
+		"data-slot": "menu-radio-group",
+		disabled: isDisabled,
+		...rest
+	});
+}
+//#endregion
+//#region src/components/menu/menu-radio-item.tsx
+function MenuRadioItem(props) {
+	const { children, className: customClassName = "", iconEnd = void 0, indicator = void 0, isDisabled = false, ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.RADIO_ITEM, customClassName);
+	const currentIndicator = indicator ?? /* @__PURE__ */ jsx("svg", {
+		fill: "none",
+		height: "16",
+		viewBox: "0 0 16 16",
+		width: "16",
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			fill: "currentColor",
+			r: "3"
+		})
+	});
+	return /* @__PURE__ */ jsxs(Menu$1.RadioItem, {
+		className: combinedClassName,
+		"data-slot": "menu-radio-item",
+		disabled: isDisabled,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, {
+				className: MENU_CLASS_NAME.ITEM_INDICATOR,
+				children: currentIndicator
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: MENU_CLASS_NAME.ITEM_LABEL,
+				children
+			}),
+			iconEnd && /* @__PURE__ */ jsx("span", {
+				className: MENU_CLASS_NAME.ITEM_ICON,
+				children: iconEnd
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/menu/menu-separator.tsx
+function MenuSeparator(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.SEPARATOR, customClassName);
+	return /* @__PURE__ */ jsx(Menu$1.Separator, {
+		className: combinedClassName,
+		"data-slot": "menu-separator",
+		...rest
+	});
+}
+//#endregion
+//#region src/components/menu/menu-submenu.tsx
+function MenuSubmenu(props) {
+	const { isDisabled = false, isOpen = void 0, onIsOpenChange = void 0, ...rest } = props;
+	return /* @__PURE__ */ jsx(Menu$1.SubmenuRoot, {
+		"data-slot": "menu-submenu",
+		disabled: isDisabled,
+		onOpenChange: onIsOpenChange,
+		open: isOpen,
+		...rest
+	});
+}
+//#endregion
+//#region src/components/menu/menu-submenu-trigger.tsx
+function MenuSubmenuTrigger(props) {
+	const { children, className: customClassName = "", iconEnd = void 0, iconStart = void 0, isDisabled = false, ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.SUBMENU_TRIGGER, customClassName);
+	const currentIconEnd = iconEnd ?? /* @__PURE__ */ jsx("svg", {
+		fill: "none",
+		height: "16",
+		viewBox: "0 0 16 16",
+		width: "16",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M6 3.5L10.5 8L6 12.5",
+			stroke: "currentColor",
+			strokeWidth: "1.75"
+		})
+	});
+	return /* @__PURE__ */ jsx(Menu$1.SubmenuTrigger, {
+		className: combinedClassName,
+		"data-slot": "menu-submenu-trigger",
+		disabled: isDisabled,
+		...rest,
+		children: /* @__PURE__ */ jsx(MenuItemContent, {
+			iconEnd: currentIconEnd,
+			iconStart,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/components/menu/menu-trigger.tsx
+function MenuTrigger(props) {
+	const { ...rest } = props;
+	return /* @__PURE__ */ jsx(Menu$1.Trigger, {
+		"data-slot": "menu-trigger",
+		...rest
+	});
+}
+//#endregion
+//#region src/components/menu/menu-viewport.tsx
+function MenuViewport(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.VIEWPORT, customClassName);
+	return /* @__PURE__ */ jsx(Menu$1.Viewport, {
+		className: combinedClassName,
+		"data-slot": "menu-viewport",
+		...rest
+	});
+}
+//#endregion
 //#region src/components/otp-field/otp-field.module.css
 var otp_field_module_default = {
 	"otp_field": "otp-field-module_otp_field_l-Sakq",
@@ -746,4 +1086,4 @@ function TooltipTrigger(props) {
 	});
 }
 //#endregion
-export { BUTTON_CLASS_NAME, Button, ButtonLink, COLUMN_CLASS_NAME, Column, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, INPUT_CLASS_NAME, Input, LABEL_CLASS_NAME, Label, OTPField, OTPFieldInput, OTP_FIELD_CLASS_NAME, OTP_FIELD_INPUT_CLASS_NAME, ROW_CLASS_NAME, Row, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, Switch, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { BUTTON_CLASS_NAME, Button, ButtonLink, COLUMN_CLASS_NAME, Column, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, INPUT_CLASS_NAME, Input, LABEL_CLASS_NAME, Label, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MenuViewport, OTPField, OTPFieldInput, OTP_FIELD_CLASS_NAME, OTP_FIELD_INPUT_CLASS_NAME, ROW_CLASS_NAME, Row, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, Switch, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, createMenuHandle };

package/dist/components/style.css

@@ -434,6 +434,213 @@
   width: fit-content;
   font-size: 14px;
 }
+.menu-module_menu_trigger_PqTckW {
+  background-color: var(--color-gray-2);
+  box-shadow: 0 0 0 1px var(--color-gray-4) inset;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  font-family: var(--font-body);
+  outline-color: var(--color-primary-9);
+  outline-offset: 2px;
+  user-select: none;
+  background-image: linear-gradient(oklab(0% none none / 0) 50%, oklab(0% none none / .0196078) 50%);
+  border-style: none;
+  border-radius: 10px;
+  outline-width: 0;
+  outline-style: solid;
+  flex-shrink: 0;
+  justify-content: safe center;
+  align-items: safe center;
+  column-gap: 8px;
+  width: max-content;
+  height: 40px;
+  padding: 0 14px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  transition-property: background-color, opacity, translate;
+  transition-duration: .15s;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.menu-module_menu_trigger_PqTckW:hover:not(:disabled), .menu-module_menu_trigger_PqTckW[data-popup-open] {
+  background-color: var(--color-gray-3);
+}
+
+.menu-module_menu_trigger_PqTckW:active:not(:disabled), .menu-module_menu_trigger_PqTckW[data-pressed] {
+  translate: 0 1px;
+}
+
+.menu-module_menu_trigger_PqTckW:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.menu-module_menu_trigger_PqTckW:focus-visible {
+  outline-width: 2px;
+}
+
+.menu-module_menu_trigger_PqTckW > svg {
+  --size-icon: 20px;
+  height: var(--size-icon);
+  width: var(--size-icon);
+}
+
+.dark .menu-module_menu_trigger_PqTckW {
+  background-image: linear-gradient(oklab(100% 0 5.96046e-8 / .00990099) 50%, oklab(0% 0 0 / 0) 50%);
+}
+
+.menu-module_menu_content_positioner_PqTckW {
+  isolation: isolate;
+  z-index: 50;
+}
+
+.menu-module_menu_content_PqTckW {
+  background-color: var(--color-bg-primary);
+  box-shadow: 0 0 0 1px var(--color-border) inset,
+    0 16px 32px oklab(0% none none / .16);
+  color: var(--color-text-primary);
+  font-family: var(--font-body);
+  max-height: min(var(--available-height), 480px);
+  max-width: min(var(--available-width), 320px);
+  outline-color: var(--color-primary-9);
+  outline-offset: -2px;
+  min-width: 180px;
+  transform-origin: var(--transform-origin);
+  will-change: opacity, transform;
+  border-radius: 12px;
+  outline-width: 0;
+  outline-style: solid;
+  flex-direction: column;
+  padding: 4px;
+  transition-property: opacity, transform;
+  transition-duration: .15s;
+  display: flex;
+  overflow: auto;
+}
+
+.menu-module_menu_content_PqTckW:focus-visible {
+  outline-width: 2px;
+}
+
+.menu-module_menu_content_PqTckW[data-ending-style], .menu-module_menu_content_PqTckW[data-starting-style] {
+  opacity: 0;
+  transform: scale(.975);
+}
+
+.menu-module_menu_content_PqTckW[data-side="top"][data-ending-style], .menu-module_menu_content_PqTckW[data-side="top"][data-starting-style] {
+  transform: scale(.975) translateY(4px);
+}
+
+.menu-module_menu_content_PqTckW[data-side="bottom"][data-ending-style], .menu-module_menu_content_PqTckW[data-side="bottom"][data-starting-style] {
+  transform: scale(.975) translateY(-4px);
+}
+
+.menu-module_menu_content_PqTckW[data-side="left"][data-ending-style], .menu-module_menu_content_PqTckW[data-side="left"][data-starting-style], .menu-module_menu_content_PqTckW[data-side="inline-start"][data-ending-style], .menu-module_menu_content_PqTckW[data-side="inline-start"][data-starting-style] {
+  transform: scale(.975) translateX(4px);
+}
+
+.menu-module_menu_content_PqTckW[data-side="right"][data-ending-style], .menu-module_menu_content_PqTckW[data-side="right"][data-starting-style], .menu-module_menu_content_PqTckW[data-side="inline-end"][data-ending-style], .menu-module_menu_content_PqTckW[data-side="inline-end"][data-starting-style] {
+  transform: scale(.975) translateX(-4px);
+}
+
+.menu-module_menu_content_arrow_PqTckW {
+  color: var(--color-bg-primary);
+  display: flex;
+}
+
+.menu-module_menu_content_arrow__icon_PqTckW {
+  fill: currentColor;
+  filter: drop-shadow(0 -1px 0 var(--color-border));
+  display: block;
+}
+
+.menu-module_menu_content_arrow_PqTckW[data-side="top"] {
+  rotate: 180deg;
+}
+
+.menu-module_menu_content_arrow_PqTckW[data-side="left"], .menu-module_menu_content_arrow_PqTckW[data-side="inline-start"] {
+  rotate: 90deg;
+}
+
+.menu-module_menu_content_arrow_PqTckW[data-side="right"], .menu-module_menu_content_arrow_PqTckW[data-side="inline-end"] {
+  rotate: -90deg;
+}
+
+.menu-module_menu_checkbox_item_PqTckW, .menu-module_menu_item_PqTckW, .menu-module_menu_link_item_PqTckW, .menu-module_menu_radio_item_PqTckW, .menu-module_menu_submenu_trigger_PqTckW {
+  color: var(--color-text-primary);
+  cursor: pointer;
+  user-select: none;
+  border-radius: 8px;
+  outline: none;
+  align-items: safe center;
+  column-gap: 8px;
+  min-height: 32px;
+  padding: 0 8px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  text-decoration: none;
+  display: flex;
+  position: relative;
+}
+
+.menu-module_menu_checkbox_item_PqTckW[data-highlighted], .menu-module_menu_item_PqTckW[data-highlighted], .menu-module_menu_link_item_PqTckW[data-highlighted], .menu-module_menu_radio_item_PqTckW[data-highlighted], .menu-module_menu_submenu_trigger_PqTckW[data-highlighted], .menu-module_menu_submenu_trigger_PqTckW[data-popup-open] {
+  background-color: var(--color-gray-3);
+}
+
+.menu-module_menu_checkbox_item_PqTckW[data-disabled], .menu-module_menu_item_PqTckW[data-disabled], .menu-module_menu_radio_item_PqTckW[data-disabled], .menu-module_menu_submenu_trigger_PqTckW[data-disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.menu-module_menu_item__icon_PqTckW, .menu-module_menu_item__indicator_PqTckW {
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+  justify-content: safe center;
+  align-items: safe center;
+  width: 16px;
+  height: 16px;
+  display: flex;
+}
+
+.menu-module_menu_item__indicator_PqTckW {
+  color: var(--color-primary-9);
+}
+
+.menu-module_menu_item__icon_PqTckW > svg, .menu-module_menu_item__indicator_PqTckW > svg {
+  width: 16px;
+  height: 16px;
+}
+
+.menu-module_menu_item__label_PqTckW {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.menu-module_menu_group_PqTckW, .menu-module_menu_radio_group_PqTckW, .menu-module_menu_viewport_PqTckW {
+  flex-direction: column;
+  display: flex;
+}
+
+.menu-module_menu_group_label_PqTckW {
+  color: var(--color-text-secondary);
+  padding: 6px 8px 4px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.menu-module_menu_separator_PqTckW {
+  background-color: var(--color-border);
+  flex-shrink: 0;
+  height: 1px;
+  margin: 4px;
+}
 .otp-field-module_otp_field_l-Sakq {
   flex-wrap: wrap;
   justify-content: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattstack/ui",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
   "keywords": [
     "base-ui",