@drivenets/design-system 0.0.2 → 0.0.4

package/dist/components/ds-dropdown-menu/ds-dropdown-menu.d.ts

@@ -0,0 +1,58 @@
+import { DsDropdownMenuActionsProps, DsDropdownMenuContentProps, DsDropdownMenuHeaderProps, DsDropdownMenuItemGroupContentProps, DsDropdownMenuItemGroupProps, DsDropdownMenuItemIndicatorProps, DsDropdownMenuItemProps, DsDropdownMenuLegacyProps, DsDropdownMenuRootProps } from "./ds-dropdown-menu.types.js";
+import React from "react";
+import { Menu } from "@ark-ui/react/menu";
+
+//#region src/components/ds-dropdown-menu/ds-dropdown-menu.d.ts
+
+/**
+ * DEPRECATED: Legacy DsDropdownMenu component with options array
+ * Use compound component pattern instead
+ * @deprecated
+ */
+declare const DsDropdownMenuLegacy: React.FC<DsDropdownMenuLegacyProps>;
+/**
+ * Design system  DsDropdownMenu component
+ *
+ * @example
+ * <DsDropdownMenu.Root>
+ *   <DsDropdownMenu.Trigger>
+ *     <button>Open</button>
+ *   </DsDropdownMenu.Trigger>
+ *   <DsDropdownMenu.Content>
+ *     <DsDropdownMenu.Header>
+ *       <DsTextInput placeholder="Search..." />
+ *     </DsDropdownMenu.Header>
+ *     <DsDropdownMenu.Item value="item1">
+ *       Item 1
+ *       <DsDropdownMenu.ItemIndicator />
+ *     </DsDropdownMenu.Item>
+ *     <DsDropdownMenu.ItemGroup>
+ *       <DsDropdownMenu.ItemGroupLabel>Group Name</DsDropdownMenu.ItemGroupLabel>
+ *       <DsDropdownMenu.ItemGroupContent>
+ *         <DsDropdownMenu.Item value="item2">Item 2</DsDropdownMenu.Item>
+ *       </DsDropdownMenu.ItemGroupContent>
+ *     </DsDropdownMenu.ItemGroup>
+ *     <DsDropdownMenu.Separator />
+ *     <DsDropdownMenu.Actions>
+ *       <DsButton>Cancel</DsButton>
+ *       <DsButton>Apply</DsButton>
+ *     </DsDropdownMenu.Actions>
+ *   </DsDropdownMenu.Content>
+ * </DsDropdownMenu.Root>
+ */
+declare const DsDropdownMenu: {
+  Root: React.FC<DsDropdownMenuRootProps>;
+  Trigger: React.FC<Menu.TriggerProps>;
+  Content: React.FC<DsDropdownMenuContentProps>;
+  Item: React.FC<DsDropdownMenuItemProps>;
+  ItemIndicator: React.FC<DsDropdownMenuItemIndicatorProps>;
+  Header: React.FC<DsDropdownMenuHeaderProps>;
+  Actions: React.FC<DsDropdownMenuActionsProps>;
+  ItemGroup: React.FC<DsDropdownMenuItemGroupProps>;
+  ItemGroupLabel: React.FC<Menu.ItemGroupLabelProps>;
+  ItemGroupContent: React.FC<DsDropdownMenuItemGroupContentProps>;
+  Separator: React.FC<Menu.SeparatorProps>;
+};
+//#endregion
+export { DsDropdownMenu, DsDropdownMenuLegacy };
+//# sourceMappingURL=ds-dropdown-menu.d.ts.map

package/dist/components/ds-dropdown-menu/ds-dropdown-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-dropdown-menu.d.ts","names":[],"sources":["../../../src/components/ds-dropdown-menu/ds-dropdown-menu.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AA+QA;AAgHA;;cAhHa,sBAAsB,KAAA,CAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgH/B"}

package/dist/components/ds-dropdown-menu/ds-dropdown-menu.js

@@ -0,0 +1,626 @@
+import ds_icon_default from "../ds-icon/ds-icon.js";
+import "../ds-icon/index.js";
+import ds_typography_default from "../ds-typography/ds-typography.js";
+import ds_dropdown_menu_module_default from "./ds-dropdown-menu.module.js";
+import ds_text_input_default from "../ds-text-input/ds-text-input.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, createContext, useContext, useState } from "react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { Menu } from "@ark-ui/react/menu";
+import { Portal } from "@ark-ui/react/portal";
+
+//#region src/components/ds-dropdown-menu/ds-dropdown-menu.tsx
+const GroupContext = createContext(null);
+const DEFAULT_POSITIONING = {
+	placement: "bottom-start",
+	gutter: 4
+};
+/**
+* Root component - manages dropdown state
+*/
+const Root = (t0) => {
+	const $ = c(16);
+	const { open, onOpenChange, onSelect, onHighlightChange, positioning: customPositioning, preventCloseOnSelect: t1, children } = t0;
+	const preventCloseOnSelect = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[0] !== customPositioning) {
+		t2 = {
+			...DEFAULT_POSITIONING,
+			...customPositioning
+		};
+		$[0] = customPositioning;
+		$[1] = t2;
+	} else t2 = $[1];
+	const positioning = t2;
+	let t3;
+	if ($[2] !== onOpenChange) {
+		t3 = (details) => onOpenChange?.(details.open);
+		$[2] = onOpenChange;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== onSelect) {
+		t4 = (details_0) => onSelect?.(details_0.value);
+		$[4] = onSelect;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== onHighlightChange) {
+		t5 = (details_1) => onHighlightChange?.(details_1.highlightedValue);
+		$[6] = onHighlightChange;
+		$[7] = t5;
+	} else t5 = $[7];
+	const t6 = !preventCloseOnSelect;
+	let t7;
+	if ($[8] !== children || $[9] !== open || $[10] !== positioning || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Menu.Root, {
+			open,
+			onOpenChange: t3,
+			onSelect: t4,
+			onHighlightChange: t5,
+			positioning,
+			closeOnSelect: t6,
+			children
+		});
+		$[8] = children;
+		$[9] = open;
+		$[10] = positioning;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+};
+/**
+* Trigger component - wraps the trigger element
+*/
+const Trigger = Menu.Trigger;
+/**
+* Content component - wraps the dropdown content
+*/
+const Content = (t0) => {
+	const $ = c(9);
+	const { disablePortal: t1, children, className, style } = t0;
+	const Wrapper = (t1 === void 0 ? false : t1) ? Fragment : Portal;
+	let t2;
+	if ($[0] !== className) {
+		t2 = classNames(ds_dropdown_menu_module_default.content, className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== children || $[3] !== style || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, {
+			className: t2,
+			style,
+			children
+		}) });
+		$[2] = children;
+		$[3] = style;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== Wrapper || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Wrapper, { children: t3 });
+		$[6] = Wrapper;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+};
+/**
+* Item component - renders a menu item
+*/
+const Item = (t0) => {
+	const $ = c(12);
+	const { disabled, selected, value, asChild, onClick, onSelect, children, className, style } = t0;
+	let t1;
+	if ($[0] !== className || $[1] !== selected) {
+		t1 = classNames(ds_dropdown_menu_module_default.item, { [ds_dropdown_menu_module_default.selected]: selected }, className);
+		$[0] = className;
+		$[1] = selected;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== asChild || $[4] !== children || $[5] !== disabled || $[6] !== onClick || $[7] !== onSelect || $[8] !== style || $[9] !== t1 || $[10] !== value) {
+		t2 = /* @__PURE__ */ jsx(Menu.Item, {
+			disabled,
+			className: t1,
+			style,
+			value,
+			asChild,
+			onClick,
+			onSelect,
+			children
+		});
+		$[3] = asChild;
+		$[4] = children;
+		$[5] = disabled;
+		$[6] = onClick;
+		$[7] = onSelect;
+		$[8] = style;
+		$[9] = t1;
+		$[10] = value;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+};
+/**
+* ItemIndicator component - renders a selection indicator (check icon by default)
+*/
+const ItemIndicator = (t0) => {
+	const $ = c(8);
+	const { children, className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_dropdown_menu_module_default.indicator, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = children ?? /* @__PURE__ */ jsx(ds_icon_default, { icon: "check" });
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== style || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			style,
+			children: t2
+		});
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+};
+/**
+* Header component - sticky header container for search, filters, or other controls
+*/
+const Header = (t0) => {
+	const $ = c(6);
+	const { children, className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_dropdown_menu_module_default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+/**
+* Actions component - footer container for action buttons
+*/
+const Actions = (t0) => {
+	const $ = c(6);
+	const { children, className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_dropdown_menu_module_default.actions, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			style,
+			role: "menu",
+			"aria-label": "Menu actions",
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+/**
+* ItemGroup component - collapsible group container
+*/
+const ItemGroup = (t0) => {
+	const $ = c(16);
+	const { children, collapsed: controlledCollapsed, onCollapsedChange, className, style } = t0;
+	const [internalCollapsed, setInternalCollapsed] = useState(false);
+	const isControlled = controlledCollapsed !== void 0;
+	const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+	let t1;
+	if ($[0] !== collapsed || $[1] !== isControlled || $[2] !== onCollapsedChange) {
+		t1 = () => {
+			const newCollapsed = !collapsed;
+			if (!isControlled) setInternalCollapsed(newCollapsed);
+			onCollapsedChange?.(newCollapsed);
+		};
+		$[0] = collapsed;
+		$[1] = isControlled;
+		$[2] = onCollapsedChange;
+		$[3] = t1;
+	} else t1 = $[3];
+	const toggle = t1;
+	let t2;
+	if ($[4] !== collapsed || $[5] !== toggle) {
+		t2 = {
+			collapsed,
+			toggle
+		};
+		$[4] = collapsed;
+		$[5] = toggle;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== className) {
+		t3 = classNames(ds_dropdown_menu_module_default.group, className);
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== children || $[10] !== style || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Menu.ItemGroup, {
+			className: t3,
+			style,
+			children
+		});
+		$[9] = children;
+		$[10] = style;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t2 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(GroupContext.Provider, {
+			value: t2,
+			children: t4
+		});
+		$[13] = t2;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+};
+/**
+* ItemGroupLabel component - clickable group header with collapse indicator
+*/
+const ItemGroupLabel = (t0) => {
+	const $ = c(22);
+	const { children, className, style } = t0;
+	const context = useContext(GroupContext);
+	if (!context) {
+		let t1$1;
+		if ($[0] !== className) {
+			t1$1 = classNames(ds_dropdown_menu_module_default.groupLabel, className);
+			$[0] = className;
+			$[1] = t1$1;
+		} else t1$1 = $[1];
+		let t2$1;
+		if ($[2] !== children) {
+			t2$1 = /* @__PURE__ */ jsx(ds_typography_default, {
+				variant: "body-sm-md",
+				children
+			});
+			$[2] = children;
+			$[3] = t2$1;
+		} else t2$1 = $[3];
+		let t3$1;
+		if ($[4] !== style || $[5] !== t1$1 || $[6] !== t2$1) {
+			t3$1 = /* @__PURE__ */ jsx(Menu.ItemGroupLabel, {
+				className: t1$1,
+				style,
+				children: t2$1
+			});
+			$[4] = style;
+			$[5] = t1$1;
+			$[6] = t2$1;
+			$[7] = t3$1;
+		} else t3$1 = $[7];
+		return t3$1;
+	}
+	const { collapsed, toggle } = context;
+	let t1;
+	if ($[8] !== className) {
+		t1 = classNames(ds_dropdown_menu_module_default.groupLabel, ds_dropdown_menu_module_default.groupLabelCollapsible, className);
+		$[8] = className;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== children) {
+		t2 = /* @__PURE__ */ jsx(ds_typography_default, {
+			variant: "body-sm-md",
+			children
+		});
+		$[10] = children;
+		$[11] = t2;
+	} else t2 = $[11];
+	const t3 = !collapsed;
+	let t4;
+	if ($[12] !== t3) {
+		t4 = classNames(ds_dropdown_menu_module_default.groupLabelIcon, { [ds_dropdown_menu_module_default.groupLabelIconRotated]: t3 });
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ds_icon_default, {
+			icon: "keyboard_arrow_down",
+			className: t4
+		});
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== style || $[17] !== t1 || $[18] !== t2 || $[19] !== t5 || $[20] !== toggle) {
+		t6 = /* @__PURE__ */ jsx(Menu.ItemGroupLabel, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: t1,
+				style,
+				onClick: toggle,
+				onKeyDown: _temp,
+				children: [t2, t5]
+			})
+		});
+		$[16] = style;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t5;
+		$[20] = toggle;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+};
+/**
+* ItemGroupContent component - collapsible content container
+*/
+const ItemGroupContent = (t0) => {
+	const $ = c(4);
+	const { children, className, style } = t0;
+	if (useContext(GroupContext)?.collapsed) return null;
+	let t1;
+	if ($[0] !== children || $[1] !== className || $[2] !== style) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			className,
+			style,
+			children
+		});
+		$[0] = children;
+		$[1] = className;
+		$[2] = style;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+};
+/**
+* Separator component - renders a visual divider
+*/
+const Separator = (t0) => {
+	const $ = c(5);
+	const { className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_dropdown_menu_module_default.separator, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== style || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Menu.Separator, {
+			className: t1,
+			style
+		});
+		$[2] = style;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+/**
+* DEPRECATED: Legacy DsDropdownMenu component with options array
+* Use compound component pattern instead
+* @deprecated
+*/
+const DsDropdownMenuLegacy = (t0) => {
+	const $ = c(34);
+	const { options, children, contentGap: t1, className, style, align: t2, side: t3, disablePortal: t4, disableSearch: t5, selected, onSelect } = t0;
+	const contentGap = t1 === void 0 ? 0 : t1;
+	const align = t2 === void 0 ? "center" : t2;
+	const side = t3 === void 0 ? "bottom" : t3;
+	const disablePortal = t4 === void 0 ? false : t4;
+	const disableSearch = t5 === void 0 ? true : t5;
+	const [open, setOpen] = useState(false);
+	const [searchTerm, setSearchTerm] = useState("");
+	const Wrapper = disablePortal ? Fragment : DropdownMenu.Portal;
+	let t6;
+	if ($[0] !== disableSearch || $[1] !== options || $[2] !== searchTerm) {
+		t6 = disableSearch ? options : options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+		$[0] = disableSearch;
+		$[1] = options;
+		$[2] = searchTerm;
+		$[3] = t6;
+	} else t6 = $[3];
+	const filteredOptions = t6;
+	let t7;
+	if ($[4] !== children) {
+		t7 = /* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+			asChild: true,
+			children
+		});
+		$[4] = children;
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = classNames(ds_dropdown_menu_module_default.contentLegacy, ds_dropdown_menu_module_default.viewportLegacy);
+		$[6] = t8;
+	} else t8 = $[6];
+	let t9;
+	if ($[7] !== disableSearch || $[8] !== searchTerm) {
+		t9 = !disableSearch && /* @__PURE__ */ jsx(ds_text_input_default, {
+			placeholder: "Search",
+			value: searchTerm,
+			onValueChange: setSearchTerm,
+			slots: { startAdornment: /* @__PURE__ */ jsx(ds_icon_default, {
+				icon: "search",
+				size: "tiny"
+			}) },
+			onKeyDown: _temp2
+		});
+		$[7] = disableSearch;
+		$[8] = searchTerm;
+		$[9] = t9;
+	} else t9 = $[9];
+	let t10;
+	if ($[10] !== className || $[11] !== filteredOptions || $[12] !== onSelect || $[13] !== selected || $[14] !== style) {
+		let t11$1;
+		if ($[16] !== className || $[17] !== onSelect || $[18] !== selected || $[19] !== style) {
+			t11$1 = (option_0, i) => /* @__PURE__ */ jsxs(DropdownMenu.Item, {
+				disabled: option_0.disabled,
+				className: classNames(ds_dropdown_menu_module_default.itemLegacy, { [ds_dropdown_menu_module_default.selected]: selected === option_0.value }, className),
+				style,
+				onClick: (e_0) => {
+					e_0.stopPropagation();
+					if (!option_0.disabled) {
+						if (option_0.value) onSelect?.(option_0.value);
+						option_0.onClick?.(e_0);
+						setOpen(false);
+					}
+				},
+				children: [
+					option_0.icon && /* @__PURE__ */ jsx(ds_icon_default, {
+						icon: option_0.icon,
+						className: ds_dropdown_menu_module_default.itemIcon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: ds_dropdown_menu_module_default.label,
+						children: option_0.label
+					}),
+					option_0.value && selected === option_0.value && /* @__PURE__ */ jsx("span", {
+						className: ds_dropdown_menu_module_default.indicator,
+						children: /* @__PURE__ */ jsx(ds_icon_default, { icon: "check" })
+					})
+				]
+			}, i);
+			$[16] = className;
+			$[17] = onSelect;
+			$[18] = selected;
+			$[19] = style;
+			$[20] = t11$1;
+		} else t11$1 = $[20];
+		t10 = filteredOptions.map(t11$1);
+		$[10] = className;
+		$[11] = filteredOptions;
+		$[12] = onSelect;
+		$[13] = selected;
+		$[14] = style;
+		$[15] = t10;
+	} else t10 = $[15];
+	let t11;
+	if ($[21] !== align || $[22] !== contentGap || $[23] !== side || $[24] !== t10 || $[25] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(DropdownMenu.Content, {
+			className: t8,
+			sideOffset: contentGap,
+			align,
+			side,
+			children: [t9, t10]
+		});
+		$[21] = align;
+		$[22] = contentGap;
+		$[23] = side;
+		$[24] = t10;
+		$[25] = t9;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== Wrapper || $[28] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Wrapper, { children: t11 });
+		$[27] = Wrapper;
+		$[28] = t11;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== open || $[31] !== t12 || $[32] !== t7) {
+		t13 = /* @__PURE__ */ jsxs(DropdownMenu.Root, {
+			open,
+			onOpenChange: setOpen,
+			children: [t7, t12]
+		});
+		$[30] = open;
+		$[31] = t12;
+		$[32] = t7;
+		$[33] = t13;
+	} else t13 = $[33];
+	return t13;
+};
+/**
+* Design system  DsDropdownMenu component
+*
+* @example
+* <DsDropdownMenu.Root>
+*   <DsDropdownMenu.Trigger>
+*     <button>Open</button>
+*   </DsDropdownMenu.Trigger>
+*   <DsDropdownMenu.Content>
+*     <DsDropdownMenu.Header>
+*       <DsTextInput placeholder="Search..." />
+*     </DsDropdownMenu.Header>
+*     <DsDropdownMenu.Item value="item1">
+*       Item 1
+*       <DsDropdownMenu.ItemIndicator />
+*     </DsDropdownMenu.Item>
+*     <DsDropdownMenu.ItemGroup>
+*       <DsDropdownMenu.ItemGroupLabel>Group Name</DsDropdownMenu.ItemGroupLabel>
+*       <DsDropdownMenu.ItemGroupContent>
+*         <DsDropdownMenu.Item value="item2">Item 2</DsDropdownMenu.Item>
+*       </DsDropdownMenu.ItemGroupContent>
+*     </DsDropdownMenu.ItemGroup>
+*     <DsDropdownMenu.Separator />
+*     <DsDropdownMenu.Actions>
+*       <DsButton>Cancel</DsButton>
+*       <DsButton>Apply</DsButton>
+*     </DsDropdownMenu.Actions>
+*   </DsDropdownMenu.Content>
+* </DsDropdownMenu.Root>
+*/
+const DsDropdownMenu = {
+	Root,
+	Trigger,
+	Content,
+	Item,
+	ItemIndicator,
+	Header,
+	Actions,
+	ItemGroup,
+	ItemGroupLabel,
+	ItemGroupContent,
+	Separator
+};
+function _temp(e) {
+	return e.stopPropagation();
+}
+function _temp2(e) {
+	return e.stopPropagation();
+}
+
+//#endregion
+export { DsDropdownMenu, DsDropdownMenuLegacy };
+//# sourceMappingURL=ds-dropdown-menu.js.map