@drivenets/design-system 0.1.0 → 0.3.0

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

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

@@ -0,0 +1,71 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_tabs_list = require('./components/ds-tabs-list/ds-tabs-list.cjs');
+require('./components/ds-tabs-list/index.cjs');
+const require_ds_tabs_tab = require('./components/ds-tabs-tab/ds-tabs-tab.cjs');
+require('./components/ds-tabs-tab/index.cjs');
+const require_ds_tabs_content = require('./components/ds-tabs-content/ds-tabs-content.cjs');
+require('./components/ds-tabs-content/index.cjs');
+const require_ds_tabs_module = require('./ds-tabs.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/ds-tabs.tsx
+const DsTabsRoot = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(13);
+	const { value, defaultValue, onValueChange, orientation: t1, size: t2, className, style, children } = t0;
+	const orientation = t1 === void 0 ? "horizontal" : t1;
+	const size = t2 === void 0 ? "medium" : t2;
+	let t3;
+	if ($[0] !== onValueChange) {
+		t3 = (details) => {
+			onValueChange?.(details.value);
+		};
+		$[0] = onValueChange;
+		$[1] = t3;
+	} else t3 = $[1];
+	const handleValueChange = t3;
+	let t4;
+	if ($[2] !== className) {
+		t4 = (0, classnames.default)(require_ds_tabs_module.default.root, className);
+		$[2] = className;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== children || $[5] !== defaultValue || $[6] !== handleValueChange || $[7] !== orientation || $[8] !== size || $[9] !== style || $[10] !== t4 || $[11] !== value) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_tabs.Tabs.Root, {
+			orientation,
+			value,
+			defaultValue,
+			onValueChange: handleValueChange,
+			activationMode: "manual",
+			lazyMount: true,
+			unmountOnExit: true,
+			className: t4,
+			style,
+			"data-size": size,
+			children
+		});
+		$[4] = children;
+		$[5] = defaultValue;
+		$[6] = handleValueChange;
+		$[7] = orientation;
+		$[8] = size;
+		$[9] = style;
+		$[10] = t4;
+		$[11] = value;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+};
+const DsTabs = {
+	Root: DsTabsRoot,
+	List: require_ds_tabs_list.DsTabsList,
+	Tab: require_ds_tabs_tab.DsTabsTab,
+	Content: require_ds_tabs_content.DsTabsContent
+};
+
+//#endregion
+exports.DsTabs = DsTabs;

package/dist/components/ds-tabs/ds-tabs.d.cts

@@ -0,0 +1,43 @@
+import { DsTabsContentProps, DsTabsListProps, DsTabsProps, DsTabsTabProps } from "./ds-tabs.types.cjs";
+import * as react_jsx_runtime51 from "react/jsx-runtime";
+
+//#region src/components/ds-tabs/ds-tabs.d.ts
+declare const DsTabs: {
+  Root: ({
+    value,
+    defaultValue,
+    onValueChange,
+    orientation,
+    size,
+    className,
+    style,
+    children
+  }: DsTabsProps) => react_jsx_runtime51.JSX.Element;
+  List: ({
+    className,
+    style,
+    children
+  }: DsTabsListProps) => react_jsx_runtime51.JSX.Element;
+  Tab: ({
+    value,
+    disabled,
+    icon,
+    label,
+    badge,
+    menuActionItems,
+    onMenuActionSelect,
+    tooltip,
+    className,
+    style,
+    children
+  }: DsTabsTabProps) => react_jsx_runtime51.JSX.Element;
+  Content: ({
+    value,
+    className,
+    style,
+    children
+  }: DsTabsContentProps) => react_jsx_runtime51.JSX.Element;
+};
+//#endregion
+export { DsTabs };
+//# sourceMappingURL=ds-tabs.d.cts.map

package/dist/components/ds-tabs/ds-tabs.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs.d.cts","names":[],"sources":["../../../src/components/ds-tabs/ds-tabs.tsx"],"sourcesContent":[],"mappings":";;;;cAwCa;;;;;;;;;;KAvBV,gBAAW,mBAAA,CAAA,GAAA,CAAA;;;;;;EAuBD,GAAA,EAAA,CAAA;IAAA,KAKZ;IAAA,QAAA;IAAA,IAAA;IAAA,KAAA;IAAA,KAAA;IAAA,eAAA;IAAA,kBAAA;IAAA,OAAA;IAAA,SAAA;IAAA,KAAA;IAAA;EAAA,CAAA,gBAAA,EAAA,kCAAA"}

package/dist/components/ds-tabs/ds-tabs.d.ts

@@ -0,0 +1,43 @@
+import { DsTabsContentProps, DsTabsListProps, DsTabsProps, DsTabsTabProps } from "./ds-tabs.types.js";
+import * as react_jsx_runtime45 from "react/jsx-runtime";
+
+//#region src/components/ds-tabs/ds-tabs.d.ts
+declare const DsTabs: {
+  Root: ({
+    value,
+    defaultValue,
+    onValueChange,
+    orientation,
+    size,
+    className,
+    style,
+    children
+  }: DsTabsProps) => react_jsx_runtime45.JSX.Element;
+  List: ({
+    className,
+    style,
+    children
+  }: DsTabsListProps) => react_jsx_runtime45.JSX.Element;
+  Tab: ({
+    value,
+    disabled,
+    icon,
+    label,
+    badge,
+    menuActionItems,
+    onMenuActionSelect,
+    tooltip,
+    className,
+    style,
+    children
+  }: DsTabsTabProps) => react_jsx_runtime45.JSX.Element;
+  Content: ({
+    value,
+    className,
+    style,
+    children
+  }: DsTabsContentProps) => react_jsx_runtime45.JSX.Element;
+};
+//#endregion
+export { DsTabs };
+//# sourceMappingURL=ds-tabs.d.ts.map

package/dist/components/ds-tabs/ds-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs.d.ts","names":[],"sources":["../../../src/components/ds-tabs/ds-tabs.tsx"],"sourcesContent":[],"mappings":";;;;cAwCa;;;;;;;;;;KAvBV,gBAAW,mBAAA,CAAA,GAAA,CAAA;;;;;;EAuBD,GAAA,EAAA,CAAA;IAAA,KAKZ;IAAA,QAAA;IAAA,IAAA;IAAA,KAAA;IAAA,KAAA;IAAA,eAAA;IAAA,kBAAA;IAAA,OAAA;IAAA,SAAA;IAAA,KAAA;IAAA;EAAA,CAAA,gBAAA,EAAA,kCAAA"}

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

@@ -0,0 +1,70 @@
+import { DsTabsList } from "./components/ds-tabs-list/ds-tabs-list.js";
+import "./components/ds-tabs-list/index.js";
+import { DsTabsTab } from "./components/ds-tabs-tab/ds-tabs-tab.js";
+import "./components/ds-tabs-tab/index.js";
+import { DsTabsContent } from "./components/ds-tabs-content/ds-tabs-content.js";
+import "./components/ds-tabs-content/index.js";
+import ds_tabs_module_default from "./ds-tabs.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/ds-tabs.tsx
+const DsTabsRoot = (t0) => {
+	const $ = c(13);
+	const { value, defaultValue, onValueChange, orientation: t1, size: t2, className, style, children } = t0;
+	const orientation = t1 === void 0 ? "horizontal" : t1;
+	const size = t2 === void 0 ? "medium" : t2;
+	let t3;
+	if ($[0] !== onValueChange) {
+		t3 = (details) => {
+			onValueChange?.(details.value);
+		};
+		$[0] = onValueChange;
+		$[1] = t3;
+	} else t3 = $[1];
+	const handleValueChange = t3;
+	let t4;
+	if ($[2] !== className) {
+		t4 = classNames(ds_tabs_module_default.root, className);
+		$[2] = className;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== children || $[5] !== defaultValue || $[6] !== handleValueChange || $[7] !== orientation || $[8] !== size || $[9] !== style || $[10] !== t4 || $[11] !== value) {
+		t5 = /* @__PURE__ */ jsx(Tabs.Root, {
+			orientation,
+			value,
+			defaultValue,
+			onValueChange: handleValueChange,
+			activationMode: "manual",
+			lazyMount: true,
+			unmountOnExit: true,
+			className: t4,
+			style,
+			"data-size": size,
+			children
+		});
+		$[4] = children;
+		$[5] = defaultValue;
+		$[6] = handleValueChange;
+		$[7] = orientation;
+		$[8] = size;
+		$[9] = style;
+		$[10] = t4;
+		$[11] = value;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+};
+const DsTabs = {
+	Root: DsTabsRoot,
+	List: DsTabsList,
+	Tab: DsTabsTab,
+	Content: DsTabsContent
+};
+
+//#endregion
+export { DsTabs };
+//# sourceMappingURL=ds-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs.js","names":["Tabs","classNames","DsTabsList","DsTabsTab","DsTabsContent","DsTabsProps","styles","DsTabsRoot","t0","$","_c","value","defaultValue","onValueChange","orientation","t1","size","t2","className","style","children","undefined","t3","details","handleValueChange","t4","root","t5","DsTabs","Root","List","Tab","Content"],"sources":["../../../src/components/ds-tabs/ds-tabs.tsx"],"sourcesContent":["import { Tabs } from '@ark-ui/react/tabs';\nimport classNames from 'classnames';\nimport { DsTabsList } from './components/ds-tabs-list';\nimport { DsTabsTab } from './components/ds-tabs-tab';\nimport { DsTabsContent } from './components/ds-tabs-content';\nimport type { DsTabsProps } from './ds-tabs.types';\nimport styles from './ds-tabs.module.scss';\n\nconst DsTabsRoot = ({\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\torientation = 'horizontal',\n\tsize = 'medium',\n\tclassName,\n\tstyle,\n\tchildren,\n}: DsTabsProps) => {\n\tconst handleValueChange = (details: { value: string | null }) => {\n\t\tonValueChange?.(details.value);\n\t};\n\n\treturn (\n\t\t<Tabs.Root\n\t\t\torientation={orientation}\n\t\t\tvalue={value}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tonValueChange={handleValueChange}\n\t\t\tactivationMode=\"manual\"\n\t\t\tlazyMount\n\t\t\tunmountOnExit\n\t\t\tclassName={classNames(styles.root, className)}\n\t\t\tstyle={style}\n\t\t\tdata-size={size}\n\t\t>\n\t\t\t{children}\n\t\t</Tabs.Root>\n\t);\n};\n\nexport const DsTabs = {\n\tRoot: DsTabsRoot,\n\tList: DsTabsList,\n\tTab: DsTabsTab,\n\tContent: DsTabsContent,\n};\n"],"mappings":";;;;;;;;;;;;;AAQA,MAAMO,cAAaC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,OAAAC,cAAAC,eAAAC,aAAAC,IAAAC,MAAAC,IAAAC,WAAAC,OAAAC,aAAAZ;CAInB,MAAAM,cAAAC,OAAAM,SAAA,eAAAN;CACA,MAAAC,OAAAC,OAAAI,SAAA,WAAAJ;CAAe,IAAAK;AAAA,KAAAb,EAAA,OAAAI,eAAA;AAKWS,QAAAC,YAAA;AACzBV,mBAAgBU,QAAOZ,MAAO;;AAC9BF,IAAA,KAAAI;AAAAJ,IAAA,KAAAa;OAAAA,MAAAb,EAAA;CAFD,MAAAe,oBAA0BF;CAExB,IAAAG;AAAA,KAAAhB,EAAA,OAAAS,WAAA;AAWWO,OAAAxB,WAAWK,uBAAMoB,MAAOR,UAAU;AAAAT,IAAA,KAAAS;AAAAT,IAAA,KAAAgB;OAAAA,MAAAhB,EAAA;CAAA,IAAAkB;AAAA,KAAAlB,EAAA,OAAAW,YAAAX,EAAA,OAAAG,gBAAAH,EAAA,OAAAe,qBAAAf,EAAA,OAAAK,eAAAL,EAAA,OAAAO,QAAAP,EAAA,OAAAU,SAAAV,EAAA,QAAAgB,MAAAhB,EAAA,QAAAE,OAAA;AAR9CgB,OAAA,oBAAA,KAAA;GACcb;GACNH;GACOC;GACCY,eAAAA;GACA,gBAAA;GACf,WAAA;GACA,eAAA;GACW,WAAAC;GACJN;GACIH,aAAAA;GAEVI;IACU;AAAAX,IAAA,KAAAW;AAAAX,IAAA,KAAAG;AAAAH,IAAA,KAAAe;AAAAf,IAAA,KAAAK;AAAAL,IAAA,KAAAO;AAAAP,IAAA,KAAAU;AAAAV,IAAA,MAAAgB;AAAAhB,IAAA,MAAAE;AAAAF,IAAA,MAAAkB;OAAAA,MAAAlB,EAAA;AAAA,QAbZkB;;AAiBF,MAAaC,SAAS;CACrBC,MAAMtB;CACNuB,MAAM5B;CACN6B,KAAK5B;CACL6B,SAAS5B;CACT"}

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

@@ -0,0 +1,6 @@
+
+//#region src/components/ds-tabs/ds-tabs.module.scss
+var ds_tabs_module_default = { "root": "_root_13s06_1" };
+
+//#endregion
+exports.default = ds_tabs_module_default;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs.module.js","names":[],"sources":["../../../src/components/ds-tabs/ds-tabs.module.scss"],"sourcesContent":[".root {\n\tdisplay: flex;\n\twidth: 100%;\n\n\t&[data-orientation='vertical'] {\n\t\tflex-direction: row;\n\t\tgap: var(--spacing-lg);\n\t}\n\n\t&[data-orientation='horizontal'] {\n\t\tflex-direction: column;\n\t\tgap: 0;\n\t}\n}\n"],"mappings":""}

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

@@ -0,0 +1,91 @@
+import { IconType } from "../ds-icon/ds-icon.types.cjs";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-tabs/ds-tabs.types.d.ts
+type DsTabsSize = 'medium' | 'small';
+type DsTabsOrientation = 'horizontal' | 'vertical';
+/**
+ * Menu action item configuration
+ */
+interface DsTabsMenuActionItem {
+  /** Unique value for the action */
+  value: string;
+  /** Display label */
+  label: string;
+  /** Whether the action is disabled */
+  disabled?: boolean;
+}
+interface DsTabsProps {
+  /** Current active tab value */
+  value?: string;
+  /** Default tab value for uncontrolled mode */
+  defaultValue?: string;
+  /** Callback when tab changes */
+  onValueChange?: (value: string | null) => void;
+  /** Tab orientation */
+  orientation?: DsTabsOrientation;
+  /** Tab size variant */
+  size?: DsTabsSize;
+  /** Custom className */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+  /** Children components */
+  children: ReactNode;
+}
+interface DsTabsListProps {
+  /** Custom className */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+  /** Children components (DsTabsTab) */
+  children: ReactNode;
+}
+type DsTabsTabBaseProps = {
+  /** Unique value for this tab */
+  value: string;
+  /** Menu action items to display in dropdown */
+  menuActionItems?: DsTabsMenuActionItem[];
+  /** Callback when a menu action is selected */
+  onMenuActionSelect?: (value: string) => void;
+  /** Tooltip text to show on hover */
+  tooltip?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+};
+type DsTabsTabProps = DsTabsTabBaseProps & ({
+  /** Custom children (overrides default rendering) */
+  children: ReactNode;
+  /** Tab label text */
+  label?: never;
+  /** Leading icon name (Material Icons) or SVG component */
+  icon?: never;
+  /** Badge count or text */
+  badge?: never;
+} | {
+  /** Custom children (overrides default rendering) */
+  children?: never;
+  /** Tab label text */
+  label?: string;
+  /** Leading icon name (Material Icons) or SVG component */
+  icon?: IconType;
+  /** Badge count or text */
+  badge?: string | number;
+});
+interface DsTabsContentProps {
+  /** Value matching the tab this content belongs to */
+  value: string;
+  /** Custom className */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+  /** Content to display */
+  children: ReactNode;
+}
+//#endregion
+export { DsTabsContentProps, DsTabsListProps, DsTabsMenuActionItem, DsTabsOrientation, DsTabsProps, DsTabsSize, DsTabsTabProps };
+//# sourceMappingURL=ds-tabs.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs.types.d.cts","names":[],"sources":["../../../src/components/ds-tabs/ds-tabs.types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,UAAA;KACA,iBAAA;AADZ;AACA;AAKA;AASiB,UATA,oBAAA,CASW;EAQb;EAEP,KAAA,EAAA,MAAA;EAIC;EAEE,KAAA,EAAA,MAAA;EAAS;EAGH,QAAA,CAAA,EAAA,OAAe;AAO/B;AAmBW,UA7CK,WAAA,CA6CS;EAAG;EAIf,KAAA,CAAA,EAAA,MAAA;EAcH;EAAQ,YAAA,CAAA,EAAA,MAAA;EAMF;;;gBA7DF;;SAEP;;;;UAIC;;YAEE;;UAGM,eAAA;;;;UAIR;;YAEE;;KAGN,kBAAA;;;;oBAIc;;;;;;;;;;UAUV;;KAGG,cAAA,GAAiB;;YAIf;;;;;;;;;;;;;SAcH;;;;UAMM,kBAAA;;;;;;UAMR;;YAEE"}

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

@@ -0,0 +1,92 @@
+import { IconType } from "../ds-icon/ds-icon.types.js";
+import "../ds-icon/index.js";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-tabs/ds-tabs.types.d.ts
+type DsTabsSize = 'medium' | 'small';
+type DsTabsOrientation = 'horizontal' | 'vertical';
+/**
+ * Menu action item configuration
+ */
+interface DsTabsMenuActionItem {
+  /** Unique value for the action */
+  value: string;
+  /** Display label */
+  label: string;
+  /** Whether the action is disabled */
+  disabled?: boolean;
+}
+interface DsTabsProps {
+  /** Current active tab value */
+  value?: string;
+  /** Default tab value for uncontrolled mode */
+  defaultValue?: string;
+  /** Callback when tab changes */
+  onValueChange?: (value: string | null) => void;
+  /** Tab orientation */
+  orientation?: DsTabsOrientation;
+  /** Tab size variant */
+  size?: DsTabsSize;
+  /** Custom className */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+  /** Children components */
+  children: ReactNode;
+}
+interface DsTabsListProps {
+  /** Custom className */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+  /** Children components (DsTabsTab) */
+  children: ReactNode;
+}
+type DsTabsTabBaseProps = {
+  /** Unique value for this tab */
+  value: string;
+  /** Menu action items to display in dropdown */
+  menuActionItems?: DsTabsMenuActionItem[];
+  /** Callback when a menu action is selected */
+  onMenuActionSelect?: (value: string) => void;
+  /** Tooltip text to show on hover */
+  tooltip?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+};
+type DsTabsTabProps = DsTabsTabBaseProps & ({
+  /** Custom children (overrides default rendering) */
+  children: ReactNode;
+  /** Tab label text */
+  label?: never;
+  /** Leading icon name (Material Icons) or SVG component */
+  icon?: never;
+  /** Badge count or text */
+  badge?: never;
+} | {
+  /** Custom children (overrides default rendering) */
+  children?: never;
+  /** Tab label text */
+  label?: string;
+  /** Leading icon name (Material Icons) or SVG component */
+  icon?: IconType;
+  /** Badge count or text */
+  badge?: string | number;
+});
+interface DsTabsContentProps {
+  /** Value matching the tab this content belongs to */
+  value: string;
+  /** Custom className */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+  /** Content to display */
+  children: ReactNode;
+}
+//#endregion
+export { DsTabsContentProps, DsTabsListProps, DsTabsMenuActionItem, DsTabsOrientation, DsTabsProps, DsTabsSize, DsTabsTabProps };
+//# sourceMappingURL=ds-tabs.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tabs.types.d.ts","names":[],"sources":["../../../src/components/ds-tabs/ds-tabs.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,UAAA;KACA,iBAAA;;AADZ;AACA;AAKiB,UAAA,oBAAA,CAAoB;EASpB;EAQF,KAAA,EAAA,MAAA;EAEP;EAIC,KAAA,EAAA,MAAA;EAEE;EAAS,QAAA,CAAA,EAAA,OAAA;AAGpB;AASK,UA5BY,WAAA,CA4BM;EAiBX;EAAiB,KAAA,CAAA,EAAA,MAAA;EAIf;EAcH,YAAA,CAAA,EAAA,MAAA;EAAQ;EAMF,aAAA,CAAA,EAAA,CAAA,KAAkB,EAAA,MAAA,GAAA,IAM1B,EAAA,GAAA,IAAA;;gBAnEM;;SAEP;;;;UAIC;;YAEE;;UAGM,eAAA;;;;UAIR;;YAEE;;KAGN,kBAAA;;;;oBAIc;;;;;;;;;;UAUV;;KAGG,cAAA,GAAiB;;YAIf;;;;;;;;;;;;;SAcH;;;;UAMM,kBAAA;;;;;;UAMR;;YAEE"}

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

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

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

@@ -0,0 +1,2 @@
+import { DsTabsContentProps, DsTabsListProps, DsTabsMenuActionItem, DsTabsOrientation, DsTabsProps, DsTabsSize, DsTabsTabProps } from "./ds-tabs.types.js";
+import { DsTabs } from "./ds-tabs.js";

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

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