@drivenets/design-system 0.0.2 → 0.0.3

package/dist/components/ds-drawer/ds-drawer.module.cjs

@@ -0,0 +1,38 @@
+
+//#region src/components/ds-drawer/ds-drawer.module.scss
+var ds_drawer_module_default = {
+	"backdrop": "_backdrop_ehlks_1",
+	"fade-in-backdrop": "_fade-in-backdrop_ehlks_1",
+	"fade-out-backdrop": "_fade-out-backdrop_ehlks_1",
+	"positioner": "_positioner_ehlks_1",
+	"drawer": "_drawer_ehlks_1",
+	"position-end": "_position-end_ehlks_1",
+	"slide-in-drawer-end": "_slide-in-drawer-end_ehlks_1",
+	"slide-out-drawer-end": "_slide-out-drawer-end_ehlks_1",
+	"position-start": "_position-start_ehlks_1",
+	"slide-in-drawer-start": "_slide-in-drawer-start_ehlks_1",
+	"slide-out-drawer-start": "_slide-out-drawer-start_ehlks_1",
+	"cols-1": "_cols-1_ehlks_1",
+	"cols-2": "_cols-2_ehlks_1",
+	"cols-3": "_cols-3_ehlks_1",
+	"cols-4": "_cols-4_ehlks_1",
+	"cols-5": "_cols-5_ehlks_1",
+	"cols-6": "_cols-6_ehlks_1",
+	"cols-7": "_cols-7_ehlks_1",
+	"cols-8": "_cols-8_ehlks_1",
+	"cols-9": "_cols-9_ehlks_1",
+	"cols-10": "_cols-10_ehlks_1",
+	"cols-11": "_cols-11_ehlks_1",
+	"cols-12": "_cols-12_ehlks_1",
+	"content": "_content_ehlks_1",
+	"header": "_header_ehlks_1",
+	"title": "_title_ehlks_1",
+	"closeTrigger": "_closeTrigger_ehlks_1",
+	"toolbar": "_toolbar_ehlks_1",
+	"body": "_body_ehlks_1",
+	"footer": "_footer_ehlks_1",
+	"actions": "_actions_ehlks_1"
+};
+
+//#endregion
+exports.default = ds_drawer_module_default;

package/dist/components/ds-drawer/ds-drawer.module.js

@@ -0,0 +1,38 @@
+//#region src/components/ds-drawer/ds-drawer.module.scss
+var ds_drawer_module_default = {
+	"backdrop": "_backdrop_ehlks_1",
+	"fade-in-backdrop": "_fade-in-backdrop_ehlks_1",
+	"fade-out-backdrop": "_fade-out-backdrop_ehlks_1",
+	"positioner": "_positioner_ehlks_1",
+	"drawer": "_drawer_ehlks_1",
+	"position-end": "_position-end_ehlks_1",
+	"slide-in-drawer-end": "_slide-in-drawer-end_ehlks_1",
+	"slide-out-drawer-end": "_slide-out-drawer-end_ehlks_1",
+	"position-start": "_position-start_ehlks_1",
+	"slide-in-drawer-start": "_slide-in-drawer-start_ehlks_1",
+	"slide-out-drawer-start": "_slide-out-drawer-start_ehlks_1",
+	"cols-1": "_cols-1_ehlks_1",
+	"cols-2": "_cols-2_ehlks_1",
+	"cols-3": "_cols-3_ehlks_1",
+	"cols-4": "_cols-4_ehlks_1",
+	"cols-5": "_cols-5_ehlks_1",
+	"cols-6": "_cols-6_ehlks_1",
+	"cols-7": "_cols-7_ehlks_1",
+	"cols-8": "_cols-8_ehlks_1",
+	"cols-9": "_cols-9_ehlks_1",
+	"cols-10": "_cols-10_ehlks_1",
+	"cols-11": "_cols-11_ehlks_1",
+	"cols-12": "_cols-12_ehlks_1",
+	"content": "_content_ehlks_1",
+	"header": "_header_ehlks_1",
+	"title": "_title_ehlks_1",
+	"closeTrigger": "_closeTrigger_ehlks_1",
+	"toolbar": "_toolbar_ehlks_1",
+	"body": "_body_ehlks_1",
+	"footer": "_footer_ehlks_1",
+	"actions": "_actions_ehlks_1"
+};
+
+//#endregion
+export { ds_drawer_module_default as default };
+//# sourceMappingURL=ds-drawer.module.js.map

package/dist/components/ds-drawer/ds-drawer.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-drawer.module.js","names":[],"sources":["../../../src/components/ds-drawer/ds-drawer.module.scss"],"sourcesContent":["@use '../../styles/grid-variables' as grid-vars;\n\n.backdrop {\n\tposition: absolute;\n\tinset: 0;\n\tbackground: var(--Background-background-overlay, rgba(0, 26, 71, 0.2));\n\tz-index: 1000;\n\n\t&[data-state='open'] {\n\t\tanimation: 0.3s fade-in-backdrop ease-in-out both;\n\t}\n\n\t&[data-state='closed'] {\n\t\tanimation: 0.2s fade-out-backdrop ease-in-out both;\n\t}\n}\n\n@keyframes fade-in-backdrop {\n\t0% {\n\t\topacity: 0;\n\t}\n\n\t100% {\n\t\topacity: 1;\n\t}\n}\n\n@keyframes fade-out-backdrop {\n\t0% {\n\t\topacity: 1;\n\t}\n\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n.positioner {\n\tposition: absolute;\n\tinset: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n}\n\n.drawer {\n\tposition: absolute;\n\tdisplay: block;\n\ttop: 0;\n\tbottom: 0;\n\tbackground: var(--color-background);\n\tbox-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.22);\n\tz-index: 1200;\n\tpointer-events: auto;\n\toverflow: hidden;\n\ttransition:\n\t\ttransform 0.2s ease,\n\t\twidth 0.2s ease;\n\n\t&.position-end {\n\t\tright: 0;\n\t\ttransform-origin: 100% 50%;\n\t\ttransform: translateX(100%);\n\n\t\t&[data-state='open'] {\n\t\t\tanimation: 0.5s slide-in-drawer-end ease-out both;\n\t\t}\n\n\t\t&[data-state='closed'] {\n\t\t\tanimation: 0.25s slide-out-drawer-end both;\n\t\t}\n\t}\n\n\t&.position-start {\n\t\tleft: 0;\n\t\ttransform: translateX(-100%);\n\t\ttransform-origin: 0 50%;\n\n\t\t&[data-state='open'] {\n\t\t\tanimation: 0.5s slide-in-drawer-start ease-out both;\n\t\t}\n\n\t\t&[data-state='closed'] {\n\t\t\tanimation: 0.25s slide-out-drawer-start both;\n\t\t}\n\t}\n\n\t@for $i from 1 through grid-vars.$columns {\n\t\t&.cols-#{$i} {\n\t\t\twidth: var(--col-span-#{$i});\n\t\t}\n\t}\n}\n\n@keyframes slide-in-drawer-end {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateX(100%);\n\t}\n\n\t50% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n}\n\n@keyframes slide-out-drawer-end {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(0);\n\t}\n\n\t100% {\n\t\topacity: 0;\n\t\ttransform: translateX(100%);\n\t}\n}\n\n@keyframes slide-in-drawer-start {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateX(-100%);\n\t}\n\n\t50% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n}\n\n@keyframes slide-out-drawer-start {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(0);\n\t}\n\n\t100% {\n\t\topacity: 0;\n\t\ttransform: translateX(-100%);\n\t}\n}\n\n.content {\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\toverflow: hidden;\n}\n\n.header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tflex-wrap: wrap;\n\tborder-bottom: 1px solid var(--color-border);\n\tpadding: var(--spacing-sm) var(--spacing-standard);\n\tgap: var(--spacing-3xs);\n}\n\n.title {\n\tmargin: 0;\n\tcolor: var(--color-font-main);\n}\n\n.closeTrigger {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: var(--color-icon-secondary);\n}\n\n.toolbar {\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid var(--color-border);\n\tpadding: var(--spacing-sm) var(--spacing-standard);\n\tgap: var(--spacing-3xs);\n}\n\n.body {\n\tflex: 1;\n\toverflow: auto;\n}\n\n.footer {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: var(--spacing-standard);\n\tborder-top: 1px solid var(--color-border);\n}\n\n.actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-xs);\n\tmargin-left: auto;\n}\n"],"mappings":""}

package/dist/components/ds-drawer/ds-drawer.types.d.cts

@@ -0,0 +1,58 @@
+import { CSSProperties, ReactNode } from "react";
+import { UseDialogProps } from "@ark-ui/react/dialog";
+
+//#region src/components/ds-drawer/ds-drawer.types.d.ts
+
+/**
+ * Available positions for the drawer
+ */
+type DsDrawerPosition = 'start' | 'end';
+/**
+ * Available column sizes for drawer width
+ */
+type DsDrawerColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+interface DsDrawerProps extends Pick<UseDialogProps, 'closeOnEscape' | 'closeOnInteractOutside'> {
+  /**
+   * Whether the drawer is open
+   */
+  open: boolean;
+  /**
+   * Callback when the drawer open state changes
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Number of grid columns the drawer should span (1-12)
+   * @default 4
+   */
+  columns?: DsDrawerColumns;
+  /**
+   * Position of the drawer
+   * @default 'end'
+   */
+  position?: DsDrawerPosition;
+  /**
+   * Whether to show backdrop overlay
+   * @default false
+   */
+  backdrop?: boolean;
+  /**
+   * Whether to append the drawer to the body instead of rendering in place
+   * @default false
+   */
+  portal?: boolean;
+  /**
+   * Additional CSS styles
+   */
+  style?: CSSProperties;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Children components
+   */
+  children: ReactNode;
+}
+//#endregion
+export { DsDrawerColumns, DsDrawerPosition, DsDrawerProps };
+//# sourceMappingURL=ds-drawer.types.d.cts.map

package/dist/components/ds-drawer/ds-drawer.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-drawer.types.d.cts","names":[],"sources":["../../../src/components/ds-drawer/ds-drawer.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAMA;AAIY,KAJA,gBAAA,GAIe,OAAA,GAAA,KAAA;AAE3B;;;AAkBY,KApBA,eAAA,GAoBA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;AAcH,UAhCQ,aAAA,SAAsB,IAgC9B,CAhCmC,cAgCnC,EAAA,eAAA,GAAA,wBAAA,CAAA,CAAA;EAQE;;;;;;;;;;;;YA3BA;;;;;aAKC;;;;;;;;;;;;;;UAcH;;;;;;;;YAQE"}

package/dist/components/ds-drawer/ds-drawer.types.d.ts

@@ -0,0 +1,58 @@
+import { CSSProperties, ReactNode } from "react";
+import { UseDialogProps } from "@ark-ui/react/dialog";
+
+//#region src/components/ds-drawer/ds-drawer.types.d.ts
+
+/**
+ * Available positions for the drawer
+ */
+type DsDrawerPosition = 'start' | 'end';
+/**
+ * Available column sizes for drawer width
+ */
+type DsDrawerColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+interface DsDrawerProps extends Pick<UseDialogProps, 'closeOnEscape' | 'closeOnInteractOutside'> {
+  /**
+   * Whether the drawer is open
+   */
+  open: boolean;
+  /**
+   * Callback when the drawer open state changes
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Number of grid columns the drawer should span (1-12)
+   * @default 4
+   */
+  columns?: DsDrawerColumns;
+  /**
+   * Position of the drawer
+   * @default 'end'
+   */
+  position?: DsDrawerPosition;
+  /**
+   * Whether to show backdrop overlay
+   * @default false
+   */
+  backdrop?: boolean;
+  /**
+   * Whether to append the drawer to the body instead of rendering in place
+   * @default false
+   */
+  portal?: boolean;
+  /**
+   * Additional CSS styles
+   */
+  style?: CSSProperties;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Children components
+   */
+  children: ReactNode;
+}
+//#endregion
+export { DsDrawerColumns, DsDrawerPosition, DsDrawerProps };
+//# sourceMappingURL=ds-drawer.types.d.ts.map

package/dist/components/ds-drawer/ds-drawer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-drawer.types.d.ts","names":[],"sources":["../../../src/components/ds-drawer/ds-drawer.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAMA;AAIY,KAJA,gBAAA,GAIe,OAAA,GAAA,KAAA;AAE3B;;;AAkBY,KApBA,eAAA,GAoBA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;AAcH,UAhCQ,aAAA,SAAsB,IAgC9B,CAhCmC,cAgCnC,EAAA,eAAA,GAAA,wBAAA,CAAA,CAAA;EAQE;;;;;;;;;;;;YA3BA;;;;;aAKC;;;;;;;;;;;;;;UAcH;;;;;;;;YAQE"}

package/dist/components/ds-drawer/index.cjs

@@ -0,0 +1 @@
+const require_ds_drawer = require('./ds-drawer.cjs');

package/dist/components/ds-drawer/index.d.ts

@@ -0,0 +1,2 @@
+import { DsDrawerColumns, DsDrawerPosition, DsDrawerProps } from "./ds-drawer.types.js";
+import { DsDrawer } from "./ds-drawer.js";

package/dist/components/ds-drawer/index.js

@@ -0,0 +1 @@
+import ds_drawer_default from "./ds-drawer.js";

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

@@ -0,0 +1,283 @@
+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 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 = ({ open, onOpenChange, onSelect, onHighlightChange, positioning: customPositioning, preventCloseOnSelect = false, children }) => {
+	const positioning = {
+		...DEFAULT_POSITIONING,
+		...customPositioning
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Root, {
+		open,
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		onSelect: (details) => onSelect?.(details.value),
+		onHighlightChange: (details) => onHighlightChange?.(details.highlightedValue),
+		positioning,
+		closeOnSelect: !preventCloseOnSelect,
+		children
+	});
+};
+/**
+* Trigger component - wraps the trigger element
+*/
+const Trigger = __ark_ui_react_menu.Menu.Trigger;
+/**
+* Content component - wraps the dropdown content
+*/
+const Content = ({ disablePortal = false, children, className, style }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(disablePortal ? react.Fragment : __ark_ui_react_portal.Portal, { children: /* @__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: (0, classnames.default)(require_ds_dropdown_menu_module.default.content, className),
+		style,
+		children
+	}) }) });
+};
+/**
+* Item component - renders a menu item
+*/
+const Item = ({ disabled, selected, value, asChild, onClick, onSelect, children, className, style }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Item, {
+		disabled,
+		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.item, { [require_ds_dropdown_menu_module.default.selected]: selected }, className),
+		style,
+		value,
+		asChild,
+		onClick,
+		onSelect,
+		children
+	});
+};
+/**
+* ItemIndicator component - renders a selection indicator (check icon by default)
+*/
+const ItemIndicator = ({ children, className, style }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.indicator, className),
+		style,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, { icon: "check" })
+	});
+};
+/**
+* Header component - sticky header container for search, filters, or other controls
+*/
+const Header = ({ children, className, style }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.header, className),
+		style,
+		children
+	});
+};
+/**
+* Actions component - footer container for action buttons
+*/
+const Actions = ({ children, className, style }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.actions, className),
+		style,
+		role: "menu",
+		"aria-label": "Menu actions",
+		children
+	});
+};
+/**
+* ItemGroup component - collapsible group container
+*/
+const ItemGroup = ({ children, collapsed: controlledCollapsed, onCollapsedChange, className, style }) => {
+	const [internalCollapsed, setInternalCollapsed] = (0, react.useState)(false);
+	const isControlled = controlledCollapsed !== void 0;
+	const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+	const toggle = () => {
+		const newCollapsed = !collapsed;
+		if (!isControlled) setInternalCollapsed(newCollapsed);
+		onCollapsedChange?.(newCollapsed);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupContext.Provider, {
+		value: {
+			collapsed,
+			toggle
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.ItemGroup, {
+			className: (0, classnames.default)(require_ds_dropdown_menu_module.default.group, className),
+			style,
+			children
+		})
+	});
+};
+/**
+* ItemGroupLabel component - clickable group header with collapse indicator
+*/
+const ItemGroupLabel = ({ children, className, style }) => {
+	const context = (0, react.useContext)(GroupContext);
+	if (!context) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.ItemGroupLabel, {
+		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabel, className),
+		style,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "body-sm-md",
+			children
+		})
+	});
+	const { collapsed, toggle } = context;
+	return /* @__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: (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabel, require_ds_dropdown_menu_module.default.groupLabelCollapsible, className),
+			style,
+			onClick: toggle,
+			onKeyDown: (e) => e.stopPropagation(),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+				variant: "body-sm-md",
+				children
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+				icon: "keyboard_arrow_down",
+				className: (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabelIcon, { [require_ds_dropdown_menu_module.default.groupLabelIconRotated]: !collapsed })
+			})]
+		})
+	});
+};
+/**
+* ItemGroupContent component - collapsible content container
+*/
+const ItemGroupContent = ({ children, className, style }) => {
+	if ((0, react.useContext)(GroupContext)?.collapsed) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style,
+		children
+	});
+};
+/**
+* Separator component - renders a visual divider
+*/
+const Separator = ({ className, style }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Separator, {
+		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.separator, className),
+		style
+	});
+};
+/**
+* DEPRECATED: Legacy DsDropdownMenu component with options array
+* Use compound component pattern instead
+* @deprecated
+*/
+const DsDropdownMenuLegacy = ({ options, children, contentGap = 0, className, style, align = "center", side = "bottom", disablePortal = false, disableSearch = true, selected, onSelect }) => {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [searchTerm, setSearchTerm] = (0, react.useState)("");
+	const Wrapper = disablePortal ? react.Fragment : __radix_ui_react_dropdown_menu.Portal;
+	const filteredOptions = disableSearch ? options : options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dropdown_menu.Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.Content, {
+			className: (0, classnames.default)(require_ds_dropdown_menu_module.default.contentLegacy, require_ds_dropdown_menu_module.default.viewportLegacy),
+			sideOffset: contentGap,
+			align,
+			side,
+			children: [!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: (e) => e.stopPropagation()
+			}), filteredOptions.map((option, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.Item, {
+				disabled: option.disabled,
+				className: (0, classnames.default)(require_ds_dropdown_menu_module.default.itemLegacy, { [require_ds_dropdown_menu_module.default.selected]: selected === option.value }, className),
+				style,
+				onClick: (e) => {
+					e.stopPropagation();
+					if (!option.disabled) {
+						if (option.value) onSelect?.(option.value);
+						option.onClick?.(e);
+						setOpen(false);
+					}
+				},
+				children: [
+					option.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						icon: option.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.label
+					}),
+					option.value && selected === option.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))]
+		}) })]
+	});
+};
+/**
+* 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
+};
+
+//#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"}

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"}