@drivenets/design-system 0.0.2 → 0.0.4

package/dist/components/ds-typography/ds-typography.config.d.cts

@@ -0,0 +1,29 @@
+//#region src/components/ds-typography/ds-typography.config.d.ts
+declare const semanticElementMap: {
+  readonly 'body-md-reg': "p";
+  readonly 'body-md-md': "p";
+  readonly 'body-md-semi-bold': "p";
+  readonly 'body-md-bold': "p";
+  readonly 'body-md-link': "a";
+  readonly 'body-sm-reg': "span";
+  readonly 'body-sm-md': "span";
+  readonly 'body-sm-semi-bold': "span";
+  readonly 'body-sm-bold': "span";
+  readonly 'body-sm-link': "a";
+  readonly 'body-xs-reg': "span";
+  readonly 'body-xs-md': "span";
+  readonly 'body-xs-semi-bold': "span";
+  readonly 'body-xs-bold': "span";
+  readonly 'body-xs-link': "a";
+  readonly 'code-sm-reg': "code";
+  readonly 'code-sm-semi-bold': "code";
+  readonly 'code-xs-reg': "code";
+  readonly 'code-xs-semi-bold': "code";
+  readonly heading1: "h1";
+  readonly heading2: "h2";
+  readonly heading3: "h3";
+  readonly heading4: "h4";
+};
+//#endregion
+export { semanticElementMap };
+//# sourceMappingURL=ds-typography.config.d.cts.map

package/dist/components/ds-typography/ds-typography.config.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-typography.config.d.cts","names":[],"sources":["../../../src/components/ds-typography/ds-typography.config.ts"],"sourcesContent":[],"mappings":";cAAa;EAAA,SAAA,aA+BH,EAAA,GAAA"}

package/dist/components/ds-typography/ds-typography.config.d.ts

@@ -0,0 +1,29 @@
+//#region src/components/ds-typography/ds-typography.config.d.ts
+declare const semanticElementMap: {
+  readonly 'body-md-reg': "p";
+  readonly 'body-md-md': "p";
+  readonly 'body-md-semi-bold': "p";
+  readonly 'body-md-bold': "p";
+  readonly 'body-md-link': "a";
+  readonly 'body-sm-reg': "span";
+  readonly 'body-sm-md': "span";
+  readonly 'body-sm-semi-bold': "span";
+  readonly 'body-sm-bold': "span";
+  readonly 'body-sm-link': "a";
+  readonly 'body-xs-reg': "span";
+  readonly 'body-xs-md': "span";
+  readonly 'body-xs-semi-bold': "span";
+  readonly 'body-xs-bold': "span";
+  readonly 'body-xs-link': "a";
+  readonly 'code-sm-reg': "code";
+  readonly 'code-sm-semi-bold': "code";
+  readonly 'code-xs-reg': "code";
+  readonly 'code-xs-semi-bold': "code";
+  readonly heading1: "h1";
+  readonly heading2: "h2";
+  readonly heading3: "h3";
+  readonly heading4: "h4";
+};
+//#endregion
+export { semanticElementMap };
+//# sourceMappingURL=ds-typography.config.d.ts.map

package/dist/components/ds-typography/ds-typography.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-typography.config.d.ts","names":[],"sources":["../../../src/components/ds-typography/ds-typography.config.ts"],"sourcesContent":[],"mappings":";cAAa;EAAA,SAAA,aA+BH,EAAA,GAAA"}

package/dist/components/ds-typography/ds-typography.config.js

@@ -0,0 +1,30 @@
+//#region src/components/ds-typography/ds-typography.config.ts
+const semanticElementMap = {
+	"body-md-reg": "p",
+	"body-md-md": "p",
+	"body-md-semi-bold": "p",
+	"body-md-bold": "p",
+	"body-md-link": "a",
+	"body-sm-reg": "span",
+	"body-sm-md": "span",
+	"body-sm-semi-bold": "span",
+	"body-sm-bold": "span",
+	"body-sm-link": "a",
+	"body-xs-reg": "span",
+	"body-xs-md": "span",
+	"body-xs-semi-bold": "span",
+	"body-xs-bold": "span",
+	"body-xs-link": "a",
+	"code-sm-reg": "code",
+	"code-sm-semi-bold": "code",
+	"code-xs-reg": "code",
+	"code-xs-semi-bold": "code",
+	heading1: "h1",
+	heading2: "h2",
+	heading3: "h3",
+	heading4: "h4"
+};
+
+//#endregion
+export { semanticElementMap };
+//# sourceMappingURL=ds-typography.config.js.map

package/dist/components/ds-typography/ds-typography.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-typography.config.js","names":["semanticElementMap","heading1","heading2","heading3","heading4","const"],"sources":["../../../src/components/ds-typography/ds-typography.config.ts"],"sourcesContent":["export const semanticElementMap = {\n\t// Body variants\n\t'body-md-reg': 'p',\n\t'body-md-md': 'p',\n\t'body-md-semi-bold': 'p',\n\t'body-md-bold': 'p',\n\t'body-md-link': 'a',\n\n\t'body-sm-reg': 'span',\n\t'body-sm-md': 'span',\n\t'body-sm-semi-bold': 'span',\n\t'body-sm-bold': 'span',\n\t'body-sm-link': 'a',\n\n\t'body-xs-reg': 'span',\n\t'body-xs-md': 'span',\n\t'body-xs-semi-bold': 'span',\n\t'body-xs-bold': 'span',\n\t'body-xs-link': 'a',\n\n\t// Code variants\n\t'code-sm-reg': 'code',\n\t'code-sm-semi-bold': 'code',\n\t'code-xs-reg': 'code',\n\t'code-xs-semi-bold': 'code',\n\n\t// Heading variants\n\theading1: 'h1',\n\theading2: 'h2',\n\theading3: 'h3',\n\theading4: 'h4',\n} as const;\n"],"mappings":";AAAA,MAAaA,qBAAqB;CAEjC,eAAe;CACf,cAAc;CACd,qBAAqB;CACrB,gBAAgB;CAChB,gBAAgB;CAEhB,eAAe;CACf,cAAc;CACd,qBAAqB;CACrB,gBAAgB;CAChB,gBAAgB;CAEhB,eAAe;CACf,cAAc;CACd,qBAAqB;CACrB,gBAAgB;CAChB,gBAAgB;CAGhB,eAAe;CACf,qBAAqB;CACrB,eAAe;CACf,qBAAqB;CAGrBC,UAAU;CACVC,UAAU;CACVC,UAAU;CACVC,UAAU;CACV"}

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

@@ -0,0 +1,10 @@
+import { DsTypographyProps } from "./ds-typography.types.cjs";
+import React from "react";
+
+//#region src/components/ds-typography/ds-typography.d.ts
+declare const DsTypography: React.FC<DsTypographyProps & {
+  ref?: React.Ref<HTMLElement>;
+}>;
+//#endregion
+export { DsTypography };
+//# sourceMappingURL=ds-typography.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-typography.d.cts","names":[],"sources":["../../../src/components/ds-typography/ds-typography.tsx"],"sourcesContent":[],"mappings":";;;;cAUM,cAAc,KAAA,CAAM,GAAG;QAA4B,KAAA,CAAM,IAAI;AAPJ,CAAA,CAAA"}

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

@@ -0,0 +1,10 @@
+import { DsTypographyProps } from "./ds-typography.types.js";
+import React from "react";
+
+//#region src/components/ds-typography/ds-typography.d.ts
+declare const DsTypography: React.FC<DsTypographyProps & {
+  ref?: React.Ref<HTMLElement>;
+}>;
+//#endregion
+export { DsTypography };
+//# sourceMappingURL=ds-typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-typography.d.ts","names":[],"sources":["../../../src/components/ds-typography/ds-typography.tsx"],"sourcesContent":[],"mappings":";;;;cAUM,cAAc,KAAA,CAAM,GAAG;QAA4B,KAAA,CAAM,IAAI;AAPJ,CAAA,CAAA"}

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

@@ -0,0 +1,64 @@
+import { semanticElementMap } from "./ds-typography.config.js";
+import ds_typography_module_default from "./ds-typography.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/components/ds-typography/ds-typography.tsx
+const DsTypography = (t0) => {
+	const $ = c(16);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let t1;
+	let variant;
+	if ($[0] !== t0) {
+		({ref, variant, asChild: t1, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+		$[6] = variant;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		t1 = $[5];
+		variant = $[6];
+	}
+	const Component = (t1 === void 0 ? false : t1) ? Slot : semanticElementMap[variant];
+	const t2 = ds_typography_module_default[variant];
+	let t3;
+	if ($[7] !== className || $[8] !== t2) {
+		t3 = classNames(t2, className);
+		$[7] = className;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== Component || $[11] !== children || $[12] !== props || $[13] !== ref || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Component, {
+			ref,
+			className: t3,
+			...props,
+			children
+		});
+		$[10] = Component;
+		$[11] = children;
+		$[12] = props;
+		$[13] = ref;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	return t4;
+};
+var ds_typography_default = DsTypography;
+
+//#endregion
+export { ds_typography_default as default };
+//# sourceMappingURL=ds-typography.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-typography.js","names":["React","Slot","classNames","DsTypographyProps","semanticElementMap","styles","DsTypography","FC","ref","Ref","HTMLElement","t0","$","_c","children","className","props","t1","variant","asChild","undefined","Component","t2","t3","t4"],"sources":["../../../src/components/ds-typography/ds-typography.tsx"],"sourcesContent":["import type React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport classNames from 'classnames';\nimport type { DsTypographyProps } from './ds-typography.types';\nimport { semanticElementMap } from './ds-typography.config';\nimport styles from './ds-typography.module.scss';\n\n/*\n * Design system Typography component that provides consistent text styling\n */\nconst DsTypography: React.FC<DsTypographyProps & { ref?: React.Ref<HTMLElement> }> = ({\n\tref,\n\tvariant,\n\tasChild = false,\n\tclassName,\n\tchildren,\n\t...props\n}) => {\n\tconst Component: React.ElementType = asChild ? Slot : semanticElementMap[variant];\n\treturn (\n\t\t<Component ref={ref} className={classNames(styles[variant], className)} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\nexport default DsTypography;\n"],"mappings":";;;;;;;;AAUA,MAAMM,gBAA+EK,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAR;CAAA,IAAAS;CAAA,IAAAC;AAAA,KAAAN,EAAA,OAAAD,IAAA;AAAC,GAAA,CAAAH,KAAAU,SAAAC,SAAAF,IAAAF,WAAAD,aAAAE,SAAAL;AAOrFC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAJ;AAAAI,IAAA,KAAAK;AAAAL,IAAA,KAAAM;QAAA;AAAAJ,aAAAF,EAAA;AAAAG,cAAAH,EAAA;AAAAI,UAAAJ,EAAA;AAAAJ,QAAAI,EAAA;AAAAK,OAAAL,EAAA;AAAAM,YAAAN,EAAA;;CACA,MAAAS,aALAJ,OAAAG,SAAA,QAAAH,MAKqChB,OAAiBG,mBAAmBc;CAE7B,MAAAI,KAAAjB,6BAAOa;CAAQ,IAAAK;AAAA,KAAAX,EAAA,OAAAG,aAAAH,EAAA,OAAAU,IAAA;AAA1BC,OAAArB,WAAWoB,IAAiBP,UAAU;AAAAH,IAAA,KAAAG;AAAAH,IAAA,KAAAU;AAAAV,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAY;AAAA,KAAAZ,EAAA,QAAAS,aAAAT,EAAA,QAAAE,YAAAF,EAAA,QAAAI,SAAAJ,EAAA,QAAAJ,OAAAI,EAAA,QAAAW,IAAA;AAAtEC,OAAA,oBAAC;GAAehB;GAAgB,WAAAe;GAAsC,GAAMP;GAC1EF;IACU;AAAAF,IAAA,MAAAS;AAAAT,IAAA,MAAAE;AAAAF,IAAA,MAAAI;AAAAJ,IAAA,MAAAJ;AAAAI,IAAA,MAAAW;AAAAX,IAAA,MAAAY;OAAAA,MAAAZ,EAAA;AAAA,QAFZY;;AAMF,4BAAelB"}

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

@@ -0,0 +1,30 @@
+
+//#region src/components/ds-typography/ds-typography.module.scss
+var ds_typography_module_default = {
+	"heading1": "_heading1_h774x_1",
+	"heading2": "_heading2_h774x_1",
+	"heading3": "_heading3_h774x_1",
+	"heading4": "_heading4_h774x_1",
+	"body-md-reg": "_body-md-reg_h774x_1",
+	"body-md-md": "_body-md-md_h774x_1",
+	"body-md-semi-bold": "_body-md-semi-bold_h774x_1",
+	"body-md-bold": "_body-md-bold_h774x_1",
+	"body-md-link": "_body-md-link_h774x_1",
+	"body-sm-reg": "_body-sm-reg_h774x_1",
+	"body-sm-md": "_body-sm-md_h774x_1",
+	"body-sm-semi-bold": "_body-sm-semi-bold_h774x_1",
+	"body-sm-bold": "_body-sm-bold_h774x_1",
+	"body-sm-link": "_body-sm-link_h774x_1",
+	"body-xs-reg": "_body-xs-reg_h774x_1",
+	"body-xs-md": "_body-xs-md_h774x_1",
+	"body-xs-semi-bold": "_body-xs-semi-bold_h774x_1",
+	"body-xs-bold": "_body-xs-bold_h774x_1",
+	"body-xs-link": "_body-xs-link_h774x_1",
+	"code-sm-reg": "_code-sm-reg_h774x_1",
+	"code-sm-semi-bold": "_code-sm-semi-bold_h774x_1",
+	"code-xs-reg": "_code-xs-reg_h774x_1",
+	"code-xs-semi-bold": "_code-xs-semi-bold_h774x_1"
+};
+
+//#endregion
+exports.default = ds_typography_module_default;

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

@@ -0,0 +1,30 @@
+//#region src/components/ds-typography/ds-typography.module.scss
+var ds_typography_module_default = {
+	"heading1": "_heading1_h774x_1",
+	"heading2": "_heading2_h774x_1",
+	"heading3": "_heading3_h774x_1",
+	"heading4": "_heading4_h774x_1",
+	"body-md-reg": "_body-md-reg_h774x_1",
+	"body-md-md": "_body-md-md_h774x_1",
+	"body-md-semi-bold": "_body-md-semi-bold_h774x_1",
+	"body-md-bold": "_body-md-bold_h774x_1",
+	"body-md-link": "_body-md-link_h774x_1",
+	"body-sm-reg": "_body-sm-reg_h774x_1",
+	"body-sm-md": "_body-sm-md_h774x_1",
+	"body-sm-semi-bold": "_body-sm-semi-bold_h774x_1",
+	"body-sm-bold": "_body-sm-bold_h774x_1",
+	"body-sm-link": "_body-sm-link_h774x_1",
+	"body-xs-reg": "_body-xs-reg_h774x_1",
+	"body-xs-md": "_body-xs-md_h774x_1",
+	"body-xs-semi-bold": "_body-xs-semi-bold_h774x_1",
+	"body-xs-bold": "_body-xs-bold_h774x_1",
+	"body-xs-link": "_body-xs-link_h774x_1",
+	"code-sm-reg": "_code-sm-reg_h774x_1",
+	"code-sm-semi-bold": "_code-sm-semi-bold_h774x_1",
+	"code-xs-reg": "_code-xs-reg_h774x_1",
+	"code-xs-semi-bold": "_code-xs-semi-bold_h774x_1"
+};
+
+//#endregion
+export { ds_typography_module_default as default };
+//# sourceMappingURL=ds-typography.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-typography.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-typography/ds-typography.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n\n.heading1 {\n\t@include typography.heading1;\n}\n\n.heading2 {\n\t@include typography.heading2;\n}\n\n.heading3 {\n\t@include typography.heading3;\n}\n\n.heading4 {\n\t@include typography.heading4;\n}\n\n.body-md-reg {\n\t@include typography.body-md-reg;\n}\n\n.body-md-md {\n\t@include typography.body-md-md;\n}\n\n.body-md-semi-bold {\n\t@include typography.body-md-semi-bold;\n}\n\n.body-md-bold {\n\t@include typography.body-md-bold;\n}\n\n.body-md-link {\n\t@include typography.body-md-link;\n}\n\n.body-sm-reg {\n\t@include typography.body-sm-reg;\n}\n\n.body-sm-md {\n\t@include typography.body-sm-md;\n}\n\n.body-sm-semi-bold {\n\t@include typography.body-sm-semi-bold;\n}\n\n.body-sm-bold {\n\t@include typography.body-sm-bold;\n}\n\n.body-sm-link {\n\t@include typography.body-sm-link;\n}\n\n.body-xs-reg {\n\t@include typography.body-xs-reg;\n}\n\n.body-xs-md {\n\t@include typography.body-xs-md;\n}\n\n.body-xs-semi-bold {\n\t@include typography.body-xs-semi-bold;\n}\n\n.body-xs-bold {\n\t@include typography.body-xs-bold;\n}\n\n.body-xs-link {\n\t@include typography.body-xs-link;\n}\n\n.code-sm-reg {\n\t@include typography.code-sm-reg;\n}\n\n.code-sm-semi-bold {\n\t@include typography.code-sm-semi-bold;\n}\n\n.code-xs-reg {\n\t@include typography.code-xs-reg;\n}\n\n.code-xs-semi-bold {\n\t@include typography.code-xs-semi-bold;\n}\n"],"mappings":""}

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

@@ -0,0 +1,30 @@
+import { semanticElementMap } from "./ds-typography.config.cjs";
+import React from "react";
+
+//#region src/components/ds-typography/ds-typography.types.d.ts
+type SemanticVariant = keyof typeof semanticElementMap;
+interface DsTypographyProps {
+  /**
+   * The semantic variant of the component
+   */
+  variant: SemanticVariant;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the typography component
+   */
+  style?: React.CSSProperties;
+  /**
+   * When true, renders as Slot component for composition without extra DOM nodes
+   */
+  asChild?: boolean;
+  /**
+   * The content of the component
+   */
+  children: React.ReactNode;
+}
+//#endregion
+export { DsTypographyProps, SemanticVariant };
+//# sourceMappingURL=ds-typography.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-typography.types.d.cts","names":[],"sources":["../../../src/components/ds-typography/ds-typography.types.tsx"],"sourcesContent":[],"mappings":";;;;KAGY,eAAA,gBAA+B;UAE1B,iBAAA;EAFL;AAEZ;;EAYS,OAAM,EARL,eAQK;EAQJ;;;;;;;UARF,KAAA,CAAM;;;;;;;;YAQJ,KAAA,CAAM"}

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

@@ -0,0 +1,30 @@
+import { semanticElementMap } from "./ds-typography.config.js";
+import React from "react";
+
+//#region src/components/ds-typography/ds-typography.types.d.ts
+type SemanticVariant = keyof typeof semanticElementMap;
+interface DsTypographyProps {
+  /**
+   * The semantic variant of the component
+   */
+  variant: SemanticVariant;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the typography component
+   */
+  style?: React.CSSProperties;
+  /**
+   * When true, renders as Slot component for composition without extra DOM nodes
+   */
+  asChild?: boolean;
+  /**
+   * The content of the component
+   */
+  children: React.ReactNode;
+}
+//#endregion
+export { DsTypographyProps, SemanticVariant };
+//# sourceMappingURL=ds-typography.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-typography.types.d.ts","names":[],"sources":["../../../src/components/ds-typography/ds-typography.types.tsx"],"sourcesContent":[],"mappings":";;;;KAGY,eAAA,gBAA+B;UAE1B,iBAAA;EAFL;AAEZ;;EAYS,OAAM,EARL,eAQK;EAQJ;;;;;;;UARF,KAAA,CAAM;;;;;;;;YAQJ,KAAA,CAAM"}

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

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

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

@@ -0,0 +1,2 @@
+import { DsTypographyProps, SemanticVariant } from "./ds-typography.types.js";
+import { DsTypography } from "./ds-typography.js";

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

@@ -0,0 +1 @@
+import ds_typography_default from "./ds-typography.js";

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

@@ -0,0 +1,137 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_vertical_tabs_module = require('./ds-vertical-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-vertical-tabs/ds-vertical-tabs.tsx
+/**
+* Design system vertical tabs component - compound component for flexible vertical navigation
+*
+* @example
+* ```tsx
+* <DsVerticalTabs value={selected} onValueChange={handleChange}>
+*   <DsVerticalTabs.List>
+*     <DsVerticalTabs.Tab value="status">
+*       <span>Status</span>
+*       <span className={styles.badge}>5</span>
+*     </DsVerticalTabs.Tab>
+*     <DsVerticalTabs.Tab value="date">Date</DsVerticalTabs.Tab>
+*   </DsVerticalTabs.List>
+*   <DsVerticalTabs.Content value="status">Status filters...</DsVerticalTabs.Content>
+*   <DsVerticalTabs.Content value="date">Date filters...</DsVerticalTabs.Content>
+* </DsVerticalTabs>
+* ```
+*/
+const DsVerticalTabs = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(8);
+	const { value, onValueChange, className, style, children } = t0;
+	let t1;
+	if ($[0] !== onValueChange) {
+		t1 = (details) => {
+			onValueChange?.(details.value);
+		};
+		$[0] = onValueChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	const handleValueChange = t1;
+	let t2;
+	if ($[2] !== children || $[3] !== className || $[4] !== handleValueChange || $[5] !== style || $[6] !== value) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_tabs.Tabs.Root, {
+			orientation: "vertical",
+			value,
+			onValueChange: handleValueChange,
+			className,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = className;
+		$[4] = handleValueChange;
+		$[5] = style;
+		$[6] = value;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* Container for tab triggers
+*/
+const DsVerticalTabsList = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(5);
+	const { className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_vertical_tabs_module.default.tabList, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_tabs.Tabs.List, {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+/**
+* Individual tab trigger - fully customizable content
+*/
+const DsVerticalTabsTab = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(7);
+	const { value, disabled, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_vertical_tabs_module.default.tabItem, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== disabled || $[4] !== t1 || $[5] !== value) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_tabs.Tabs.Trigger, {
+			value,
+			disabled,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = disabled;
+		$[4] = t1;
+		$[5] = value;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+};
+/**
+* Tab content panel - displays when corresponding tab is active
+*/
+const DsVerticalTabsContent = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(4);
+	const { value, className, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== className || $[2] !== value) {
+		t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_tabs.Tabs.Content, {
+			value,
+			className,
+			children
+		});
+		$[0] = children;
+		$[1] = className;
+		$[2] = value;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+};
+DsVerticalTabs.List = DsVerticalTabsList;
+DsVerticalTabs.Tab = DsVerticalTabsTab;
+DsVerticalTabs.Content = DsVerticalTabsContent;
+var ds_vertical_tabs_default = DsVerticalTabs;
+
+//#endregion
+exports.default = ds_vertical_tabs_default;

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

@@ -0,0 +1,50 @@
+import { DsVerticalTabsContentProps, DsVerticalTabsListProps, DsVerticalTabsRootProps, DsVerticalTabsTabProps } from "./ds-vertical-tabs.types.cjs";
+import * as react_jsx_runtime41 from "react/jsx-runtime";
+
+//#region src/components/ds-vertical-tabs/ds-vertical-tabs.d.ts
+
+/**
+ * Design system vertical tabs component - compound component for flexible vertical navigation
+ *
+ * @example
+ * ```tsx
+ * <DsVerticalTabs value={selected} onValueChange={handleChange}>
+ *   <DsVerticalTabs.List>
+ *     <DsVerticalTabs.Tab value="status">
+ *       <span>Status</span>
+ *       <span className={styles.badge}>5</span>
+ *     </DsVerticalTabs.Tab>
+ *     <DsVerticalTabs.Tab value="date">Date</DsVerticalTabs.Tab>
+ *   </DsVerticalTabs.List>
+ *   <DsVerticalTabs.Content value="status">Status filters...</DsVerticalTabs.Content>
+ *   <DsVerticalTabs.Content value="date">Date filters...</DsVerticalTabs.Content>
+ * </DsVerticalTabs>
+ * ```
+ */
+declare const DsVerticalTabs: {
+  ({
+    value,
+    onValueChange,
+    className,
+    style,
+    children
+  }: DsVerticalTabsRootProps): react_jsx_runtime41.JSX.Element;
+  List: ({
+    className,
+    children
+  }: DsVerticalTabsListProps) => react_jsx_runtime41.JSX.Element;
+  Tab: ({
+    value,
+    disabled,
+    className,
+    children
+  }: DsVerticalTabsTabProps) => react_jsx_runtime41.JSX.Element;
+  Content: ({
+    value,
+    className,
+    children
+  }: DsVerticalTabsContentProps) => react_jsx_runtime41.JSX.Element;
+};
+//#endregion
+export { DsVerticalTabs };
+//# sourceMappingURL=ds-vertical-tabs.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-vertical-tabs.d.cts","names":[],"sources":["../../../src/components/ds-vertical-tabs/ds-vertical-tabs.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAOkC;;;;;;;;;;;;;;;cAqB5B;EA4B+D,CAAA;IAAA,KAAA;IAAA,aAAA;IAAA,SAAA;IAAA,KAAA;IAAA;EAAA,CAAA,EA5BS,uBA4BT,CAAA,EA5BgC,mBAAA,CAAA,GAAA,CAAA,OA4BhC;EAAsB,IAAA,EAAA,CAAA;IAAA,SAAA;IAAA;EAAA,CAAA,EAPtC,uBAOsC,EAAA,GAPf,mBAAA,CAAA,GAAA,CAAA,OAOe;;;;;;KAAtB,2BAAsB,mBAAA,CAAA,GAAA,CAAA;;;;;KAW5B,+BAA0B,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,50 @@
+import { DsVerticalTabsContentProps, DsVerticalTabsListProps, DsVerticalTabsRootProps, DsVerticalTabsTabProps } from "./ds-vertical-tabs.types.js";
+import * as react_jsx_runtime40 from "react/jsx-runtime";
+
+//#region src/components/ds-vertical-tabs/ds-vertical-tabs.d.ts
+
+/**
+ * Design system vertical tabs component - compound component for flexible vertical navigation
+ *
+ * @example
+ * ```tsx
+ * <DsVerticalTabs value={selected} onValueChange={handleChange}>
+ *   <DsVerticalTabs.List>
+ *     <DsVerticalTabs.Tab value="status">
+ *       <span>Status</span>
+ *       <span className={styles.badge}>5</span>
+ *     </DsVerticalTabs.Tab>
+ *     <DsVerticalTabs.Tab value="date">Date</DsVerticalTabs.Tab>
+ *   </DsVerticalTabs.List>
+ *   <DsVerticalTabs.Content value="status">Status filters...</DsVerticalTabs.Content>
+ *   <DsVerticalTabs.Content value="date">Date filters...</DsVerticalTabs.Content>
+ * </DsVerticalTabs>
+ * ```
+ */
+declare const DsVerticalTabs: {
+  ({
+    value,
+    onValueChange,
+    className,
+    style,
+    children
+  }: DsVerticalTabsRootProps): react_jsx_runtime40.JSX.Element;
+  List: ({
+    className,
+    children
+  }: DsVerticalTabsListProps) => react_jsx_runtime40.JSX.Element;
+  Tab: ({
+    value,
+    disabled,
+    className,
+    children
+  }: DsVerticalTabsTabProps) => react_jsx_runtime40.JSX.Element;
+  Content: ({
+    value,
+    className,
+    children
+  }: DsVerticalTabsContentProps) => react_jsx_runtime40.JSX.Element;
+};
+//#endregion
+export { DsVerticalTabs };
+//# sourceMappingURL=ds-vertical-tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-vertical-tabs.d.ts","names":[],"sources":["../../../src/components/ds-vertical-tabs/ds-vertical-tabs.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAOkC;;;;;;;;;;;;;;;cAqB5B;EA4B+D,CAAA;IAAA,KAAA;IAAA,aAAA;IAAA,SAAA;IAAA,KAAA;IAAA;EAAA,CAAA,EA5BS,uBA4BT,CAAA,EA5BgC,mBAAA,CAAA,GAAA,CAAA,OA4BhC;EAAsB,IAAA,EAAA,CAAA;IAAA,SAAA;IAAA;EAAA,CAAA,EAPtC,uBAOsC,EAAA,GAPf,mBAAA,CAAA,GAAA,CAAA,OAOe;;;;;;KAAtB,2BAAsB,mBAAA,CAAA,GAAA,CAAA;;;;;KAW5B,+BAA0B,mBAAA,CAAA,GAAA,CAAA"}