@drivenets/design-system 0.0.2 → 0.0.4

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

@@ -0,0 +1,629 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon = require('../ds-icon/ds-icon.cjs');
+require('../ds-icon/index.cjs');
+const require_ds_typography = require('../ds-typography/ds-typography.cjs');
+const require_ds_dropdown_menu_module = require('./ds-dropdown-menu.module.cjs');
+const require_ds_text_input = require('../ds-text-input/ds-text-input.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+__radix_ui_react_dropdown_menu = require_rolldown_runtime.__toESM(__radix_ui_react_dropdown_menu);
+let __ark_ui_react_menu = require("@ark-ui/react/menu");
+let __ark_ui_react_portal = require("@ark-ui/react/portal");
+
+//#region src/components/ds-dropdown-menu/ds-dropdown-menu.tsx
+const GroupContext = (0, react.createContext)(null);
+const DEFAULT_POSITIONING = {
+	placement: "bottom-start",
+	gutter: 4
+};
+/**
+* Root component - manages dropdown state
+*/
+const Root = (t0) => {
+	const $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.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 = __ark_ui_react_menu.Menu.Trigger;
+/**
+* Content component - wraps the dropdown content
+*/
+const Content = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(9);
+	const { disablePortal: t1, children, className, style } = t0;
+	const Wrapper = (t1 === void 0 ? false : t1) ? react.Fragment : __ark_ui_react_portal.Portal;
+	let t2;
+	if ($[0] !== className) {
+		t2 = (0, classnames.default)(require_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__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.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__ */ (0, react_jsx_runtime.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 $ = (0, react_compiler_runtime.c)(12);
+	const { disabled, selected, value, asChild, onClick, onSelect, children, className, style } = t0;
+	let t1;
+	if ($[0] !== className || $[1] !== selected) {
+		t1 = (0, classnames.default)(require_ds_dropdown_menu_module.default.item, { [require_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__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.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 $ = (0, react_compiler_runtime.c)(8);
+	const { children, className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_dropdown_menu_module.default.indicator, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, { icon: "check" });
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== style || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.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 $ = (0, react_compiler_runtime.c)(6);
+	const { children, className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_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__ */ (0, react_jsx_runtime.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 $ = (0, react_compiler_runtime.c)(6);
+	const { children, className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_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__ */ (0, react_jsx_runtime.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 $ = (0, react_compiler_runtime.c)(16);
+	const { children, collapsed: controlledCollapsed, onCollapsedChange, className, style } = t0;
+	const [internalCollapsed, setInternalCollapsed] = (0, react.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 = (0, classnames.default)(require_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__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.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__ */ (0, react_jsx_runtime.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 $ = (0, react_compiler_runtime.c)(22);
+	const { children, className, style } = t0;
+	const context = (0, react.useContext)(GroupContext);
+	if (!context) {
+		let t1$1;
+		if ($[0] !== className) {
+			t1$1 = (0, classnames.default)(require_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__ */ (0, react_jsx_runtime.jsx)(require_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__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.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 = (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabel, require_ds_dropdown_menu_module.default.groupLabelCollapsible, className);
+		$[8] = className;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== children) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "body-sm-md",
+			children
+		});
+		$[10] = children;
+		$[11] = t2;
+	} else t2 = $[11];
+	const t3 = !collapsed;
+	let t4;
+	if ($[12] !== t3) {
+		t4 = (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabelIcon, { [require_ds_dropdown_menu_module.default.groupLabelIconRotated]: t3 });
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.ItemGroupLabel, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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 $ = (0, react_compiler_runtime.c)(4);
+	const { children, className, style } = t0;
+	if ((0, react.useContext)(GroupContext)?.collapsed) return null;
+	let t1;
+	if ($[0] !== children || $[1] !== className || $[2] !== style) {
+		t1 = /* @__PURE__ */ (0, react_jsx_runtime.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 $ = (0, react_compiler_runtime.c)(5);
+	const { className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_dropdown_menu_module.default.separator, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== style || $[3] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.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 $ = (0, react_compiler_runtime.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] = (0, react.useState)(false);
+	const [searchTerm, setSearchTerm] = (0, react.useState)("");
+	const Wrapper = disablePortal ? react.Fragment : __radix_ui_react_dropdown_menu.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__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dropdown_menu.Trigger, {
+			asChild: true,
+			children
+		});
+		$[4] = children;
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (0, classnames.default)(require_ds_dropdown_menu_module.default.contentLegacy, require_ds_dropdown_menu_module.default.viewportLegacy);
+		$[6] = t8;
+	} else t8 = $[6];
+	let t9;
+	if ($[7] !== disableSearch || $[8] !== searchTerm) {
+		t9 = !disableSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_text_input.default, {
+			placeholder: "Search",
+			value: searchTerm,
+			onValueChange: setSearchTerm,
+			slots: { startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.Item, {
+				disabled: option_0.disabled,
+				className: (0, classnames.default)(require_ds_dropdown_menu_module.default.itemLegacy, { [require_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__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						icon: option_0.icon,
+						className: require_ds_dropdown_menu_module.default.itemIcon
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_ds_dropdown_menu_module.default.label,
+						children: option_0.label
+					}),
+					option_0.value && selected === option_0.value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_ds_dropdown_menu_module.default.indicator,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.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__ */ (0, react_jsx_runtime.jsx)(Wrapper, { children: t11 });
+		$[27] = Wrapper;
+		$[28] = t11;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== open || $[31] !== t12 || $[32] !== t7) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.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
+exports.DsDropdownMenu = DsDropdownMenu;
+exports.DsDropdownMenuLegacy = DsDropdownMenuLegacy;

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

@@ -0,0 +1,58 @@
+import { DsDropdownMenuActionsProps, DsDropdownMenuContentProps, DsDropdownMenuHeaderProps, DsDropdownMenuItemGroupContentProps, DsDropdownMenuItemGroupProps, DsDropdownMenuItemIndicatorProps, DsDropdownMenuItemProps, DsDropdownMenuLegacyProps, DsDropdownMenuRootProps } from "./ds-dropdown-menu.types.cjs";
+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.cts.map

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

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