@drivenets/design-system 0.2.0 → 0.4.0

package/dist/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.js

@@ -0,0 +1,36 @@
+import ds_tabs_content_module_default from "./ds-tabs-content.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
+
+//#region src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.tsx
+const DsTabsContent = (t0) => {
+	const $ = c(7);
+	const { value, className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_tabs_content_module_default.tabContent, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1 || $[5] !== value) {
+		t2 = /* @__PURE__ */ jsx(Tabs.Content, {
+			value,
+			className: t1,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = value;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+};
+
+//#endregion
+export { DsTabsContent };
+//# sourceMappingURL=ds-tabs-content.js.map

package/dist/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs-content.js","names":["Tabs","classNames","DsTabsContentProps","styles","DsTabsContent","t0","$","_c","value","className","style","children","t1","tabContent","t2"],"sources":["../../../../../src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.tsx"],"sourcesContent":["import { Tabs } from '@ark-ui/react/tabs';\nimport classNames from 'classnames';\nimport type { DsTabsContentProps } from '../../ds-tabs.types';\nimport styles from './ds-tabs-content.module.scss';\n\nexport const DsTabsContent = ({ value, className, style, children }: DsTabsContentProps) => {\n\treturn (\n\t\t<Tabs.Content value={value} className={classNames(styles.tabContent, className)} style={style}>\n\t\t\t{children}\n\t\t</Tabs.Content>\n\t);\n};\n"],"mappings":";;;;;;;AAKA,MAAaI,iBAAgBC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAC,MAAA,EAAAC,OAAAC,WAAAC,OAAAC,aAAAN;CAAyD,IAAAO;AAAA,KAAAN,EAAA,OAAAG,WAAA;AAE9CG,OAAAX,WAAWE,+BAAMU,YAAaJ,UAAU;AAAAH,IAAA,KAAAG;AAAAH,IAAA,KAAAM;OAAAA,MAAAN,EAAA;CAAA,IAAAQ;AAAA,KAAAR,EAAA,OAAAK,YAAAL,EAAA,OAAAI,SAAAJ,EAAA,OAAAM,MAAAN,EAAA,OAAAE,OAAA;AAA/EM,OAAA,oBAAA,KAAA;GAAqBN;GAAkB,WAAAI;GAAiDF;GACtFC;IACa;AAAAL,IAAA,KAAAK;AAAAL,IAAA,KAAAI;AAAAJ,IAAA,KAAAM;AAAAN,IAAA,KAAAE;AAAAF,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;AAAA,QAFfQ"}

package/dist/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.cjs

@@ -0,0 +1,9 @@
+
+//#region src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.scss
+var ds_tabs_content_module_default = {
+	"tabContent": "_tabContent_qtp6q_1",
+	"fadeIn": "_fadeIn_qtp6q_1"
+};
+
+//#endregion
+exports.default = ds_tabs_content_module_default;

package/dist/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.js

@@ -0,0 +1,9 @@
+//#region src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.scss
+var ds_tabs_content_module_default = {
+	"tabContent": "_tabContent_qtp6q_1",
+	"fadeIn": "_fadeIn_qtp6q_1"
+};
+
+//#endregion
+export { ds_tabs_content_module_default as default };
+//# sourceMappingURL=ds-tabs-content.module.js.map

package/dist/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs-content.module.js","names":[],"sources":["../../../../../src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.scss"],"sourcesContent":["$animation-duration: 0.2s;\n$animation-translate: -4px;\n\n.tabContent {\n\tpadding: var(--spacing-standard) 0;\n\tanimation: fadeIn $animation-duration ease-in;\n\n\t&[data-state='closed'] {\n\t\tdisplay: none;\n\t}\n}\n\n@keyframes fadeIn {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY($animation-translate);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-tabs/components/ds-tabs-content/index.cjs

@@ -0,0 +1 @@
+const require_ds_tabs_content = require('./ds-tabs-content.cjs');

package/dist/components/ds-tabs/components/ds-tabs-content/index.js

@@ -0,0 +1 @@
+import { DsTabsContent } from "./ds-tabs-content.js";

package/dist/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.cjs

@@ -0,0 +1,6 @@
+
+//#region src/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.scss
+var ds_tabs_indicator_module_default = { "indicator": "_indicator_1xns8_1" };
+
+//#endregion
+exports.default = ds_tabs_indicator_module_default;

package/dist/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.js

@@ -0,0 +1,6 @@
+//#region src/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.scss
+var ds_tabs_indicator_module_default = { "indicator": "_indicator_1xns8_1" };
+
+//#endregion
+export { ds_tabs_indicator_module_default as default };
+//# sourceMappingURL=ds-tabs-indicator.module.js.map

package/dist/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs-indicator.module.js","names":[],"sources":["../../../../../src/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.scss"],"sourcesContent":["$indicator-border-radius: 4px;\n$indicator-thickness: 2px;\n$indicator-offset: -4px;\n$transition-duration: 0.2s;\n\n.indicator {\n\tposition: absolute;\n\tbackground: var(--color-background-selected);\n\ttransition:\n\t\tleft $transition-duration ease-in-out,\n\t\ttop $transition-duration ease-in-out,\n\t\twidth $transition-duration ease-in-out,\n\t\theight $transition-duration ease-in-out,\n\t\topacity $transition-duration ease-in-out;\n\tborder-radius: $indicator-border-radius;\n\tpointer-events: none;\n\n\t[data-orientation='horizontal'] & {\n\t\tbottom: $indicator-offset;\n\t\theight: $indicator-thickness;\n\t\tleft: var(--left);\n\t\twidth: var(--width);\n\t}\n\n\t[data-orientation='vertical'] & {\n\t\tleft: 0;\n\t\twidth: $indicator-thickness;\n\t\ttop: var(--top);\n\t\theight: var(--height);\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.cjs

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
+const require_ds_tabs_list_module = require('./ds-tabs-list.module.cjs');
+const require_ds_tabs_indicator_module = require('./ds-tabs-indicator.module.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 __ark_ui_react_tabs = require("@ark-ui/react/tabs");
+
+//#region src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.tsx
+const DsTabsList = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(7);
+	const { className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_tabs_list_module.default.tabList, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_tabs.Tabs.Indicator, { className: require_ds_tabs_indicator_module.default.indicator });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== children || $[4] !== style || $[5] !== t1) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_tabs.Tabs.List, {
+			className: t1,
+			style,
+			children: [children, t2]
+		});
+		$[3] = children;
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
+
+//#endregion
+exports.DsTabsList = DsTabsList;

package/dist/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.js

@@ -0,0 +1,40 @@
+import ds_tabs_list_module_default from "./ds-tabs-list.module.js";
+import ds_tabs_indicator_module_default from "./ds-tabs-indicator.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
+
+//#region src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.tsx
+const DsTabsList = (t0) => {
+	const $ = c(7);
+	const { className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_tabs_list_module_default.tabList, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Tabs.Indicator, { className: ds_tabs_indicator_module_default.indicator });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== children || $[4] !== style || $[5] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(Tabs.List, {
+			className: t1,
+			style,
+			children: [children, t2]
+		});
+		$[3] = children;
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
+
+//#endregion
+export { DsTabsList };
+//# sourceMappingURL=ds-tabs-list.js.map

package/dist/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs-list.js","names":["Tabs","classNames","DsTabsListProps","styles","indicatorStyles","DsTabsList","t0","$","_c","className","style","children","t1","tabList","t2","Symbol","for","indicator","t3"],"sources":["../../../../../src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.tsx"],"sourcesContent":["import { Tabs } from '@ark-ui/react/tabs';\nimport classNames from 'classnames';\nimport type { DsTabsListProps } from '../../ds-tabs.types';\nimport styles from './ds-tabs-list.module.scss';\nimport indicatorStyles from './ds-tabs-indicator.module.scss';\n\nexport const DsTabsList = ({ className, style, children }: DsTabsListProps) => {\n\treturn (\n\t\t<Tabs.List className={classNames(styles.tabList, className)} style={style}>\n\t\t\t{children}\n\t\t\t<Tabs.Indicator className={indicatorStyles.indicator} />\n\t\t</Tabs.List>\n\t);\n};\n"],"mappings":";;;;;;;;AAMA,MAAaK,cAAaC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAC,MAAA,EAAAC,WAAAC,OAAAC,aAAAL;CAA+C,IAAAM;AAAA,KAAAL,EAAA,OAAAE,WAAA;AAElDG,OAAAX,WAAWE,4BAAMU,SAAUJ,UAAU;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAAA,IAAAO;AAAA,KAAAP,EAAA,OAAAQ,OAAAC,IAAA,4BAAA,EAAA;AAE1DF,OAAA,oBAAA,KAAA,aAA2B,WAAAV,iCAAea,YAAc;AAAAV,IAAA,KAAAO;OAAAA,MAAAP,EAAA;CAAA,IAAAW;AAAA,KAAAX,EAAA,OAAAI,YAAAJ,EAAA,OAAAG,SAAAH,EAAA,OAAAK,IAAA;AAFzDM,OAAA,qBAAA,KAAA;GAAsB,WAAAN;GAA8CF;cAClEC,UACDG;IACW;AAAAP,IAAA,KAAAI;AAAAJ,IAAA,KAAAG;AAAAH,IAAA,KAAAK;AAAAL,IAAA,KAAAW;OAAAA,MAAAX,EAAA;AAAA,QAHZW"}

package/dist/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.cjs

@@ -0,0 +1,6 @@
+
+//#region src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.scss
+var ds_tabs_list_module_default = { "tabList": "_tabList_tj37v_1" };
+
+//#endregion
+exports.default = ds_tabs_list_module_default;

package/dist/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.js

@@ -0,0 +1,6 @@
+//#region src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.scss
+var ds_tabs_list_module_default = { "tabList": "_tabList_tj37v_1" };
+
+//#endregion
+export { ds_tabs_list_module_default as default };
+//# sourceMappingURL=ds-tabs-list.module.js.map

package/dist/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs-list.module.js","names":[],"sources":["../../../../../src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.scss"],"sourcesContent":["$border-width: 1px;\n\n.tabList {\n\tdisplay: flex;\n\tposition: relative;\n\n\t[data-orientation='horizontal'] & {\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tborder-bottom: $border-width solid var(--color-border-main);\n\t\tgap: var(--spacing-xs);\n\t}\n\n\t[data-orientation='vertical'] & {\n\t\tflex-direction: column;\n\t\talign-items: stretch;\n\t\tborder-right: $border-width solid var(--color-border-main);\n\t}\n\n\t[data-orientation='vertical'][data-size='medium'] & {\n\t\tgap: var(--spacing-xs);\n\t}\n\n\t[data-orientation='vertical'][data-size='small'] & {\n\t\tgap: var(--spacing-3xs);\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-tabs/components/ds-tabs-list/index.cjs

@@ -0,0 +1 @@
+const require_ds_tabs_list = require('./ds-tabs-list.cjs');

package/dist/components/ds-tabs/components/ds-tabs-list/index.js

@@ -0,0 +1 @@
+import { DsTabsList } from "./ds-tabs-list.js";

package/dist/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.cjs

@@ -0,0 +1,178 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon = require('../../../ds-icon/ds-icon.cjs');
+const require_ds_tooltip = require('../../../ds-tooltip/ds-tooltip.cjs');
+require('../../../ds-tooltip/index.cjs');
+const require_ds_dropdown_menu = require('../../../ds-dropdown-menu/ds-dropdown-menu.cjs');
+require('../../../ds-dropdown-menu/index.cjs');
+const require_ds_tabs_tab_module = require('./ds-tabs-tab.module.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 __ark_ui_react_tabs = require("@ark-ui/react/tabs");
+
+//#region src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.tsx
+const DsTabsTab = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(30);
+	const { value, disabled, icon, label, badge, menuActionItems, onMenuActionSelect, tooltip, className, style, children } = t0;
+	const triggerRef = (0, react.useRef)(null);
+	const menuTriggerRef = (0, react.useRef)(null);
+	const [menuOpen, setMenuOpen] = (0, react.useState)(false);
+	const hasMenuActions = menuActionItems && menuActionItems.length > 0;
+	let t1;
+	if ($[0] !== onMenuActionSelect) {
+		t1 = (actionValue) => {
+			onMenuActionSelect?.(actionValue);
+			setMenuOpen(false);
+		};
+		$[0] = onMenuActionSelect;
+		$[1] = t1;
+	} else t1 = $[1];
+	const handleMenuActionSelect = t1;
+	let t2;
+	if ($[2] !== className) {
+		t2 = (0, classnames.default)(require_ds_tabs_tab_module.default.tabItem, className);
+		$[2] = className;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== badge || $[5] !== children || $[6] !== hasMenuActions || $[7] !== icon || $[8] !== label || $[9] !== menuOpen) {
+		t3 = children ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_ds_tabs_tab_module.default.icon,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon,
+					size: "tiny"
+				})
+			}),
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_ds_tabs_tab_module.default.label,
+				children: label
+			}),
+			badge !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_ds_tabs_tab_module.default.badge,
+				children: badge
+			}),
+			hasMenuActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: menuTriggerRef,
+				className: require_ds_tabs_tab_module.default.menuTrigger,
+				onClick: (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					setMenuOpen(!menuOpen);
+				},
+				onKeyDown: (e_0) => {
+					if (e_0.key === "Enter" || e_0.key === " ") {
+						e_0.stopPropagation();
+						e_0.preventDefault();
+						setMenuOpen(!menuOpen);
+					}
+				},
+				role: "button",
+				tabIndex: 0,
+				"aria-label": "Open menu",
+				"aria-expanded": menuOpen,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: menuOpen ? "arrow_drop_up" : "arrow_drop_down",
+					size: "tiny"
+				})
+			})
+		] });
+		$[4] = badge;
+		$[5] = children;
+		$[6] = hasMenuActions;
+		$[7] = icon;
+		$[8] = label;
+		$[9] = menuOpen;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== disabled || $[12] !== style || $[13] !== t2 || $[14] !== t3 || $[15] !== value) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_tabs.Tabs.Trigger, {
+			ref: triggerRef,
+			value,
+			disabled,
+			className: t2,
+			style,
+			children: t3
+		});
+		$[11] = disabled;
+		$[12] = style;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = value;
+		$[16] = t4;
+	} else t4 = $[16];
+	const tabContent = t4;
+	let t5;
+	if ($[17] !== handleMenuActionSelect || $[18] !== menuActionItems || $[19] !== menuOpen) {
+		t5 = menuActionItems && menuActionItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ds_dropdown_menu.DsDropdownMenu.Root, {
+			open: menuOpen,
+			onOpenChange: setMenuOpen,
+			onSelect: handleMenuActionSelect,
+			positioning: {
+				placement: "bottom-start",
+				gutter: 4,
+				getAnchorRect: () => menuTriggerRef.current?.getBoundingClientRect() ?? null
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_dropdown_menu.DsDropdownMenu.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { display: "none" },
+					"aria-hidden": "true"
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_dropdown_menu.DsDropdownMenu.Content, {
+				className: require_ds_tabs_tab_module.default.menuContent,
+				children: menuActionItems.map(_temp)
+			})]
+		});
+		$[17] = handleMenuActionSelect;
+		$[18] = menuActionItems;
+		$[19] = menuOpen;
+		$[20] = t5;
+	} else t5 = $[20];
+	const menuDropdown = t5;
+	if (tooltip) {
+		let t6$1;
+		if ($[21] !== tabContent || $[22] !== tooltip) {
+			t6$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+				content: tooltip,
+				children: tabContent
+			});
+			$[21] = tabContent;
+			$[22] = tooltip;
+			$[23] = t6$1;
+		} else t6$1 = $[23];
+		let t7;
+		if ($[24] !== menuDropdown || $[25] !== t6$1) {
+			t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t6$1, menuDropdown] });
+			$[24] = menuDropdown;
+			$[25] = t6$1;
+			$[26] = t7;
+		} else t7 = $[26];
+		return t7;
+	}
+	let t6;
+	if ($[27] !== menuDropdown || $[28] !== tabContent) {
+		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [tabContent, menuDropdown] });
+		$[27] = menuDropdown;
+		$[28] = tabContent;
+		$[29] = t6;
+	} else t6 = $[29];
+	return t6;
+};
+function _temp(item) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_dropdown_menu.DsDropdownMenu.Item, {
+		value: item.value,
+		disabled: item.disabled,
+		className: require_ds_tabs_tab_module.default.menuItem,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_ds_tabs_tab_module.default.menuItemLabel,
+			children: item.label
+		})
+	}, item.value);
+}
+
+//#endregion
+exports.DsTabsTab = DsTabsTab;

package/dist/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.js

@@ -0,0 +1,177 @@
+import ds_icon_default from "../../../ds-icon/ds-icon.js";
+import ds_tooltip_default from "../../../ds-tooltip/ds-tooltip.js";
+import "../../../ds-tooltip/index.js";
+import { DsDropdownMenu } from "../../../ds-dropdown-menu/ds-dropdown-menu.js";
+import "../../../ds-dropdown-menu/index.js";
+import ds_tabs_tab_module_default from "./ds-tabs-tab.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Tabs } from "@ark-ui/react/tabs";
+
+//#region src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.tsx
+const DsTabsTab = (t0) => {
+	const $ = c(30);
+	const { value, disabled, icon, label, badge, menuActionItems, onMenuActionSelect, tooltip, className, style, children } = t0;
+	const triggerRef = useRef(null);
+	const menuTriggerRef = useRef(null);
+	const [menuOpen, setMenuOpen] = useState(false);
+	const hasMenuActions = menuActionItems && menuActionItems.length > 0;
+	let t1;
+	if ($[0] !== onMenuActionSelect) {
+		t1 = (actionValue) => {
+			onMenuActionSelect?.(actionValue);
+			setMenuOpen(false);
+		};
+		$[0] = onMenuActionSelect;
+		$[1] = t1;
+	} else t1 = $[1];
+	const handleMenuActionSelect = t1;
+	let t2;
+	if ($[2] !== className) {
+		t2 = classNames(ds_tabs_tab_module_default.tabItem, className);
+		$[2] = className;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== badge || $[5] !== children || $[6] !== hasMenuActions || $[7] !== icon || $[8] !== label || $[9] !== menuOpen) {
+		t3 = children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: ds_tabs_tab_module_default.icon,
+				children: /* @__PURE__ */ jsx(ds_icon_default, {
+					icon,
+					size: "tiny"
+				})
+			}),
+			label && /* @__PURE__ */ jsx("span", {
+				className: ds_tabs_tab_module_default.label,
+				children: label
+			}),
+			badge !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: ds_tabs_tab_module_default.badge,
+				children: badge
+			}),
+			hasMenuActions && /* @__PURE__ */ jsx("div", {
+				ref: menuTriggerRef,
+				className: ds_tabs_tab_module_default.menuTrigger,
+				onClick: (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					setMenuOpen(!menuOpen);
+				},
+				onKeyDown: (e_0) => {
+					if (e_0.key === "Enter" || e_0.key === " ") {
+						e_0.stopPropagation();
+						e_0.preventDefault();
+						setMenuOpen(!menuOpen);
+					}
+				},
+				role: "button",
+				tabIndex: 0,
+				"aria-label": "Open menu",
+				"aria-expanded": menuOpen,
+				children: /* @__PURE__ */ jsx(ds_icon_default, {
+					icon: menuOpen ? "arrow_drop_up" : "arrow_drop_down",
+					size: "tiny"
+				})
+			})
+		] });
+		$[4] = badge;
+		$[5] = children;
+		$[6] = hasMenuActions;
+		$[7] = icon;
+		$[8] = label;
+		$[9] = menuOpen;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== disabled || $[12] !== style || $[13] !== t2 || $[14] !== t3 || $[15] !== value) {
+		t4 = /* @__PURE__ */ jsx(Tabs.Trigger, {
+			ref: triggerRef,
+			value,
+			disabled,
+			className: t2,
+			style,
+			children: t3
+		});
+		$[11] = disabled;
+		$[12] = style;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = value;
+		$[16] = t4;
+	} else t4 = $[16];
+	const tabContent = t4;
+	let t5;
+	if ($[17] !== handleMenuActionSelect || $[18] !== menuActionItems || $[19] !== menuOpen) {
+		t5 = menuActionItems && menuActionItems.length > 0 && /* @__PURE__ */ jsxs(DsDropdownMenu.Root, {
+			open: menuOpen,
+			onOpenChange: setMenuOpen,
+			onSelect: handleMenuActionSelect,
+			positioning: {
+				placement: "bottom-start",
+				gutter: 4,
+				getAnchorRect: () => menuTriggerRef.current?.getBoundingClientRect() ?? null
+			},
+			children: [/* @__PURE__ */ jsx(DsDropdownMenu.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("div", {
+					style: { display: "none" },
+					"aria-hidden": "true"
+				})
+			}), /* @__PURE__ */ jsx(DsDropdownMenu.Content, {
+				className: ds_tabs_tab_module_default.menuContent,
+				children: menuActionItems.map(_temp)
+			})]
+		});
+		$[17] = handleMenuActionSelect;
+		$[18] = menuActionItems;
+		$[19] = menuOpen;
+		$[20] = t5;
+	} else t5 = $[20];
+	const menuDropdown = t5;
+	if (tooltip) {
+		let t6$1;
+		if ($[21] !== tabContent || $[22] !== tooltip) {
+			t6$1 = /* @__PURE__ */ jsx(ds_tooltip_default, {
+				content: tooltip,
+				children: tabContent
+			});
+			$[21] = tabContent;
+			$[22] = tooltip;
+			$[23] = t6$1;
+		} else t6$1 = $[23];
+		let t7;
+		if ($[24] !== menuDropdown || $[25] !== t6$1) {
+			t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t6$1, menuDropdown] });
+			$[24] = menuDropdown;
+			$[25] = t6$1;
+			$[26] = t7;
+		} else t7 = $[26];
+		return t7;
+	}
+	let t6;
+	if ($[27] !== menuDropdown || $[28] !== tabContent) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [tabContent, menuDropdown] });
+		$[27] = menuDropdown;
+		$[28] = tabContent;
+		$[29] = t6;
+	} else t6 = $[29];
+	return t6;
+};
+function _temp(item) {
+	return /* @__PURE__ */ jsx(DsDropdownMenu.Item, {
+		value: item.value,
+		disabled: item.disabled,
+		className: ds_tabs_tab_module_default.menuItem,
+		children: /* @__PURE__ */ jsx("span", {
+			className: ds_tabs_tab_module_default.menuItemLabel,
+			children: item.label
+		})
+	}, item.value);
+}
+
+//#endregion
+export { DsTabsTab };
+//# sourceMappingURL=ds-tabs-tab.js.map

package/dist/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs-tab.js","names":["useRef","useState","Tabs","classNames","DsIcon","IconType","DsTooltip","DsDropdownMenu","DsTabsTabProps","styles","DsTabsTab","t0","$","_c","value","disabled","icon","label","badge","menuActionItems","onMenuActionSelect","tooltip","className","style","children","triggerRef","menuTriggerRef","menuOpen","setMenuOpen","hasMenuActions","length","t1","actionValue","handleMenuActionSelect","t2","tabItem","t3","undefined","menuTrigger","e","stopPropagation","preventDefault","e_0","key","t4","tabContent","t5","placement","gutter","getAnchorRect","current","getBoundingClientRect","display","menuContent","map","_temp","menuDropdown","t6","t7","item","menuItem","menuItemLabel"],"sources":["../../../../../src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { Tabs } from '@ark-ui/react/tabs';\nimport classNames from 'classnames';\nimport DsIcon from '../../../ds-icon/ds-icon';\nimport type { IconType } from '../../../ds-icon';\nimport { DsTooltip } from '../../../ds-tooltip';\nimport { DsDropdownMenu } from '../../../ds-dropdown-menu';\nimport type { DsTabsTabProps } from '../../ds-tabs.types';\nimport styles from './ds-tabs-tab.module.scss';\n\nexport const DsTabsTab = ({\n\tvalue,\n\tdisabled,\n\ticon,\n\tlabel,\n\tbadge,\n\tmenuActionItems,\n\tonMenuActionSelect,\n\ttooltip,\n\tclassName,\n\tstyle,\n\tchildren,\n}: DsTabsTabProps) => {\n\tconst triggerRef = useRef<HTMLButtonElement>(null);\n\tconst menuTriggerRef = useRef<HTMLDivElement>(null);\n\tconst [menuOpen, setMenuOpen] = useState(false);\n\n\tconst hasMenuActions = menuActionItems && menuActionItems.length > 0;\n\n\tconst handleMenuActionSelect = (actionValue: string) => {\n\t\tonMenuActionSelect?.(actionValue);\n\t\tsetMenuOpen(false);\n\t};\n\n\tconst tabContent = (\n\t\t<Tabs.Trigger\n\t\t\tref={triggerRef}\n\t\t\tvalue={value}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={classNames(styles.tabItem, className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\tchildren\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{icon && (\n\t\t\t\t\t\t<div className={styles.icon}>\n\t\t\t\t\t\t\t<DsIcon icon={icon} size=\"tiny\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{label && <span className={styles.label}>{label}</span>}\n\t\t\t\t\t{badge !== undefined && <div className={styles.badge}>{badge}</div>}\n\t\t\t\t\t{hasMenuActions && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={menuTriggerRef}\n\t\t\t\t\t\t\tclassName={styles.menuTrigger}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetMenuOpen(!menuOpen);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\tsetMenuOpen(!menuOpen);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\taria-label=\"Open menu\"\n\t\t\t\t\t\t\taria-expanded={menuOpen}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DsIcon\n\t\t\t\t\t\t\t\ticon={(menuOpen ? 'arrow_drop_up' : 'arrow_drop_down') satisfies IconType}\n\t\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</Tabs.Trigger>\n\t);\n\n\tconst menuDropdown = menuActionItems && menuActionItems.length > 0 && (\n\t\t<DsDropdownMenu.Root\n\t\t\topen={menuOpen}\n\t\t\tonOpenChange={setMenuOpen}\n\t\t\tonSelect={handleMenuActionSelect}\n\t\t\tpositioning={{\n\t\t\t\tplacement: 'bottom-start',\n\t\t\t\tgutter: 4,\n\t\t\t\tgetAnchorRect: () => menuTriggerRef.current?.getBoundingClientRect() ?? null,\n\t\t\t}}\n\t\t>\n\t\t\t<DsDropdownMenu.Trigger asChild>\n\t\t\t\t<div style={{ display: 'none' }} aria-hidden=\"true\" />\n\t\t\t</DsDropdownMenu.Trigger>\n\t\t\t<DsDropdownMenu.Content className={styles.menuContent}>\n\t\t\t\t{menuActionItems.map((item) => (\n\t\t\t\t\t<DsDropdownMenu.Item\n\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\tclassName={styles.menuItem}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className={styles.menuItemLabel}>{item.label}</span>\n\t\t\t\t\t</DsDropdownMenu.Item>\n\t\t\t\t))}\n\t\t\t</DsDropdownMenu.Content>\n\t\t</DsDropdownMenu.Root>\n\t);\n\n\tif (tooltip) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<DsTooltip content={tooltip}>{tabContent}</DsTooltip>\n\t\t\t\t{menuDropdown}\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{tabContent}\n\t\t\t{menuDropdown}\n\t\t</>\n\t);\n};\n"],"mappings":"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"}

package/dist/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.cjs

@@ -0,0 +1,15 @@
+
+//#region src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss
+var ds_tabs_tab_module_default = {
+	"tabItem": "_tabItem_1r7gq_1",
+	"badge": "_badge_1r7gq_1",
+	"icon": "_icon_1r7gq_1",
+	"label": "_label_1r7gq_1",
+	"menuTrigger": "_menuTrigger_1r7gq_1",
+	"menuContent": "_menuContent_1r7gq_1",
+	"menuItem": "_menuItem_1r7gq_1",
+	"menuItemLabel": "_menuItemLabel_1r7gq_1"
+};
+
+//#endregion
+exports.default = ds_tabs_tab_module_default;

package/dist/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.js

@@ -0,0 +1,15 @@
+//#region src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss
+var ds_tabs_tab_module_default = {
+	"tabItem": "_tabItem_1r7gq_1",
+	"badge": "_badge_1r7gq_1",
+	"icon": "_icon_1r7gq_1",
+	"label": "_label_1r7gq_1",
+	"menuTrigger": "_menuTrigger_1r7gq_1",
+	"menuContent": "_menuContent_1r7gq_1",
+	"menuItem": "_menuItem_1r7gq_1",
+	"menuItemLabel": "_menuItemLabel_1r7gq_1"
+};
+
+//#endregion
+export { ds_tabs_tab_module_default as default };
+//# sourceMappingURL=ds-tabs-tab.module.js.map

package/dist/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs-tab.module.js","names":[],"sources":["../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss","../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../../../styles/typography';\n\n$tab-border-width: 1px;\n$badge-height: 20px;\n$menu-content-width: 142px;\n$transition-duration: 0.2s;\n$disabled-opacity: 0.5;\n\n.tabItem {\n\t@include typography.body-sm-reg;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tbackground: var(--color-background);\n\tborder-radius: var(--exo-spacing-2x-small);\n\tcursor: pointer;\n\ttransition:\n\t\tbackground-color $transition-duration,\n\t\tcolor $transition-duration,\n\t\tborder-color $transition-duration;\n\tposition: relative;\n\tcolor: var(--color-font-main);\n\tborder: $tab-border-width solid transparent;\n\twhite-space: nowrap;\n\n\t&:hover:not(:disabled):not([aria-selected='true']) {\n\t\tbackground: var(--color-background-secondary);\n\n\t\t.badge {\n\t\t\tbackground: var(--color-background-tertiary);\n\t\t}\n\t}\n\n\t&:active:not(:disabled):not([aria-selected='true']) {\n\t\tbackground: var(--color-background-tertiary);\n\n\t\t.badge {\n\t\t\tbackground: var(--color-background-secondary);\n\t\t}\n\t}\n\n\t&:focus-visible:not(:disabled):not([aria-selected='true']) {\n\t\tborder-color: var(--color-border-action-hover);\n\t\tbackground: var(--color-background-secondary);\n\t\toutline: none;\n\n\t\t.badge {\n\t\t\tbackground: var(--color-background-tertiary);\n\t\t}\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: $disabled-opacity;\n\t\tcolor: var(--color-font-disabled);\n\t}\n\n\t&[aria-selected='true'] {\n\t\t@include typography.body-sm-md;\n\t\tcolor: var(--color-background-selected);\n\t\tbackground: var(--color-background);\n\n\t\t.icon {\n\t\t\tcolor: var(--color-background-selected);\n\t\t}\n\n\t\t.badge {\n\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\tcolor: var(--color-background-selected);\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground: var(--color-background-selected-weak);\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\tbackground: var(--color-background-selected-weak);\n\t\t}\n\n\t\t&:focus-visible:not(:disabled) {\n\t\t\tborder-color: var(--color-background-selected);\n\t\t\tbackground: var(--color-background-selected-weak);\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t// Horizontal orientation + size variants\n\t[data-orientation='horizontal'] & {\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\tgap: var(--spacing-3xs);\n\t\tflex: 0 0 auto;\n\t\twidth: auto;\n\t}\n\n\t[data-orientation='horizontal'][data-size='medium'] & {\n\t\tpadding: var(--spacing-xs) var(--spacing-sm);\n\t}\n\n\t[data-orientation='horizontal'][data-size='small'] & {\n\t\tpadding: var(--spacing-2xs) var(--spacing-sm);\n\t}\n\n\t// Vertical orientation + size variants\n\t[data-orientation='vertical'] & {\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\tgap: var(--spacing-3xs);\n\t\twidth: 100%;\n\t}\n\n\t[data-orientation='vertical'][data-size='medium'] & {\n\t\tpadding: var(--spacing-sm) var(--spacing-standard);\n\t\tpadding-left: var(--spacing-xs);\n\t\tborder-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small);\n\t}\n\n\t[data-orientation='vertical'][data-size='small'] & {\n\t\tpadding: var(--spacing-xs) var(--spacing-standard);\n\t\tpadding-left: var(--spacing-xs);\n\t\tborder-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small);\n\t}\n}\n\n.icon {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: var(--color-font-secondary);\n\tflex-shrink: 0;\n}\n\n.label {\n\t@include typography.body-sm-reg;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\ttext-align: left;\n\n\t[aria-selected='true'] & {\n\t\t@include typography.body-sm-md;\n\t}\n}\n\n.menuTrigger {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\tcolor: var(--color-font-main) !important;\n\tcursor: pointer;\n\tborder-radius: var(--exo-spacing-2x-small);\n\ttransition:\n\t\tbackground-color $transition-duration,\n\t\tcolor $transition-duration;\n\n\t&:hover {\n\t\tbackground: var(--color-background-action-secondary);\n\t\tcolor: var(--color-font-main);\n\t}\n\n\t&:active {\n\t\tbackground: var(--color-background-tertiary);\n\t}\n\n\t&:focus-visible {\n\t\toutline: var(--spacing-4xs) solid var(--color-border-action-hover);\n\t\toutline-offset: var(--spacing-4xs);\n\t}\n\n\t[aria-selected='true'] & {\n\t\tcolor: var(--color-background-selected);\n\n\t\t&:hover {\n\t\t\tbackground: var(--color-background);\n\t\t}\n\t}\n\n\t[disabled] & {\n\t\topacity: $disabled-opacity;\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\t}\n}\n\n.badge {\n\t@include typography.body-xs-reg;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: $badge-height;\n\tpadding: 0 var(--spacing-2xs);\n\tborder-radius: var(--spacing-lg);\n\tbackground: var(--color-background-secondary);\n\tcolor: var(--color-font-main);\n\tline-height: var(--line-height-xs);\n\tflex-shrink: 0;\n}\n\n.menuContent {\n\tbackground: var(--color-background);\n\tborder: $tab-border-width solid var(--color-border-secondary);\n\tborder-radius: var(--exo-spacing-2x-small);\n\tbox-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);\n\tpadding: var(--spacing-3xs);\n\twidth: $menu-content-width;\n}\n\n.menuItem {\n\t@include typography.body-sm-reg;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: var(--spacing-3xs);\n\tborder-radius: var(--exo-spacing-2x-small);\n\tcursor: pointer;\n\tcolor: var(--color-font-main);\n\tbackground: var(--color-background);\n\ttransition: background-color $transition-duration;\n\tuser-select: none;\n\twhite-space: nowrap;\n\n\t&:hover {\n\t\tbackground: var(--color-background-secondary);\n\t}\n\n\t&:active {\n\t\tbackground: var(--color-background-tertiary);\n\t}\n\n\t&[data-disabled] {\n\t\topacity: $disabled-opacity;\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\t}\n}\n\n.menuItemLabel {\n\tflex: 1;\n\tmin-width: 0;\n\tline-height: var(--line-height-sm);\n}\n"],"mappings":""}

package/dist/components/ds-tabs/components/ds-tabs-tab/index.cjs

@@ -0,0 +1 @@
+const require_ds_tabs_tab = require('./ds-tabs-tab.cjs');

package/dist/components/ds-tabs/components/ds-tabs-tab/index.js

@@ -0,0 +1 @@
+import { DsTabsTab } from "./ds-tabs-tab.js";