@drivenets/design-system 0.0.2 → 0.0.4

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

@@ -0,0 +1,136 @@
+import ds_vertical_tabs_module_default from "./ds-vertical-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-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 $ = 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__ */ jsx(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 $ = c(5);
+	const { className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_vertical_tabs_module_default.tabList, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(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 $ = c(7);
+	const { value, disabled, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(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__ */ jsx(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 $ = c(4);
+	const { value, className, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== className || $[2] !== value) {
+		t1 = /* @__PURE__ */ jsx(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
+export { ds_vertical_tabs_default as default };
+//# sourceMappingURL=ds-vertical-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-vertical-tabs.js","names":["classNames","Tabs","DsVerticalTabsContentProps","DsVerticalTabsListProps","DsVerticalTabsRootProps","DsVerticalTabsTabProps","styles","DsVerticalTabs","t0","$","_c","value","onValueChange","className","style","children","t1","details","handleValueChange","t2","DsVerticalTabsList","tabList","DsVerticalTabsTab","disabled","tabItem","DsVerticalTabsContent","List","Tab","Content"],"sources":["../../../src/components/ds-vertical-tabs/ds-vertical-tabs.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { Tabs } from '@ark-ui/react/tabs';\nimport type {\n\tDsVerticalTabsContentProps,\n\tDsVerticalTabsListProps,\n\tDsVerticalTabsRootProps,\n\tDsVerticalTabsTabProps,\n} from './ds-vertical-tabs.types';\nimport styles from './ds-vertical-tabs.module.scss';\n\n/**\n * Design system vertical tabs component - compound component for flexible vertical navigation\n *\n * @example\n * ```tsx\n * <DsVerticalTabs value={selected} onValueChange={handleChange}>\n *   <DsVerticalTabs.List>\n *     <DsVerticalTabs.Tab value=\"status\">\n *       <span>Status</span>\n *       <span className={styles.badge}>5</span>\n *     </DsVerticalTabs.Tab>\n *     <DsVerticalTabs.Tab value=\"date\">Date</DsVerticalTabs.Tab>\n *   </DsVerticalTabs.List>\n *   <DsVerticalTabs.Content value=\"status\">Status filters...</DsVerticalTabs.Content>\n *   <DsVerticalTabs.Content value=\"date\">Date filters...</DsVerticalTabs.Content>\n * </DsVerticalTabs>\n * ```\n */\nconst DsVerticalTabs = ({ value, onValueChange, className, style, children }: DsVerticalTabsRootProps) => {\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=\"vertical\"\n\t\t\tvalue={value}\n\t\t\tonValueChange={handleValueChange}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{children}\n\t\t</Tabs.Root>\n\t);\n};\n\n/**\n * Container for tab triggers\n */\nconst DsVerticalTabsList = ({ className, children }: DsVerticalTabsListProps) => {\n\treturn <Tabs.List className={classNames(styles.tabList, className)}>{children}</Tabs.List>;\n};\n\n/**\n * Individual tab trigger - fully customizable content\n */\nconst DsVerticalTabsTab = ({ value, disabled, className, children }: DsVerticalTabsTabProps) => {\n\treturn (\n\t\t<Tabs.Trigger value={value} disabled={disabled} className={classNames(styles.tabItem, className)}>\n\t\t\t{children}\n\t\t</Tabs.Trigger>\n\t);\n};\n\n/**\n * Tab content panel - displays when corresponding tab is active\n */\nconst DsVerticalTabsContent = ({ value, className, children }: DsVerticalTabsContentProps) => {\n\treturn (\n\t\t<Tabs.Content value={value} className={className}>\n\t\t\t{children}\n\t\t</Tabs.Content>\n\t);\n};\n\nDsVerticalTabs.List = DsVerticalTabsList;\nDsVerticalTabs.Tab = DsVerticalTabsTab;\nDsVerticalTabs.Content = DsVerticalTabsContent;\n\nexport default DsVerticalTabs;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAMO,kBAAiBC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAC,MAAA,EAAAC,OAAAC,eAAAC,WAAAC,OAAAC,aAAAP;CAA6E,IAAAQ;AAAA,KAAAP,EAAA,OAAAG,eAAA;AAC1EI,QAAAC,YAAA;AACzBL,mBAAgBK,QAAON,MAAO;;AAC9BF,IAAA,KAAAG;AAAAH,IAAA,KAAAO;OAAAA,MAAAP,EAAA;CAFD,MAAAS,oBAA0BF;CAExB,IAAAG;AAAA,KAAAV,EAAA,OAAAM,YAAAN,EAAA,OAAAI,aAAAJ,EAAA,OAAAS,qBAAAT,EAAA,OAAAK,SAAAL,EAAA,OAAAE,OAAA;AAGDQ,OAAA,oBAAA,KAAA;GACa,aAAA;GACLR;GACQO,eAAAA;GACJL;GACJC;GAENC;IACU;AAAAN,IAAA,KAAAM;AAAAN,IAAA,KAAAI;AAAAJ,IAAA,KAAAS;AAAAT,IAAA,KAAAK;AAAAL,IAAA,KAAAE;AAAAF,IAAA,KAAAU;OAAAA,MAAAV,EAAA;AAAA,QARZU;;;;;AAeF,MAAMC,sBAAqBZ,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAC,MAAA,EAAAG,WAAAE,aAAAP;CAAgD,IAAAQ;AAAA,KAAAP,EAAA,OAAAI,WAAA;AAC9CG,OAAAhB,WAAWM,gCAAMe,SAAUR,UAAU;AAAAJ,IAAA,KAAAI;AAAAJ,IAAA,KAAAO;OAAAA,MAAAP,EAAA;CAAA,IAAAU;AAAA,KAAAV,EAAA,OAAAM,YAAAN,EAAA,OAAAO,IAAA;AAA3DG,OAAA,oBAAA,KAAA;GAAsB,WAAAH;GAAwCD;IAAqB;AAAAN,IAAA,KAAAM;AAAAN,IAAA,KAAAO;AAAAP,IAAA,KAAAU;OAAAA,MAAAV,EAAA;AAAA,QAAnFU;;;;;AAMR,MAAMG,qBAAoBd,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAC,MAAA,EAAAC,OAAAY,UAAAV,WAAAE,aAAAP;CAAgE,IAAAQ;AAAA,KAAAP,EAAA,OAAAI,WAAA;AAE9BG,OAAAhB,WAAWM,gCAAMkB,SAAUX,UAAU;AAAAJ,IAAA,KAAAI;AAAAJ,IAAA,KAAAO;OAAAA,MAAAP,EAAA;CAAA,IAAAU;AAAA,KAAAV,EAAA,OAAAM,YAAAN,EAAA,OAAAc,YAAAd,EAAA,OAAAO,MAAAP,EAAA,OAAAE,OAAA;AAAhGQ,OAAA,oBAAA,KAAA;GAAqBR;GAAiBY;GAAqB,WAAAP;GACzDD;IACa;AAAAN,IAAA,KAAAM;AAAAN,IAAA,KAAAc;AAAAd,IAAA,KAAAO;AAAAP,IAAA,KAAAE;AAAAF,IAAA,KAAAU;OAAAA,MAAAV,EAAA;AAAA,QAFfU;;;;;AASF,MAAMM,yBAAwBjB,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAC,MAAA,EAAAC,OAAAE,WAAAE,aAAAP;CAA0D,IAAAQ;AAAA,KAAAP,EAAA,OAAAM,YAAAN,EAAA,OAAAI,aAAAJ,EAAA,OAAAE,OAAA;AAEvFK,OAAA,oBAAA,KAAA;GAAqBL;GAAkBE;GACrCE;IACa;AAAAN,IAAA,KAAAM;AAAAN,IAAA,KAAAI;AAAAJ,IAAA,KAAAE;AAAAF,IAAA,KAAAO;OAAAA,MAAAP,EAAA;AAAA,QAFfO;;AAMFT,eAAemB,OAAON;AACtBb,eAAeoB,MAAML;AACrBf,eAAeqB,UAAUH;AAEzB,+BAAelB"}

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

@@ -0,0 +1,10 @@
+
+//#region src/components/ds-vertical-tabs/ds-vertical-tabs.module.scss
+var ds_vertical_tabs_module_default = {
+	"tabList": "_tabList_n5n19_1",
+	"tabItem": "_tabItem_n5n19_1",
+	"selected": "_selected_n5n19_1"
+};
+
+//#endregion
+exports.default = ds_vertical_tabs_module_default;

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

@@ -0,0 +1,10 @@
+//#region src/components/ds-vertical-tabs/ds-vertical-tabs.module.scss
+var ds_vertical_tabs_module_default = {
+	"tabList": "_tabList_n5n19_1",
+	"tabItem": "_tabItem_n5n19_1",
+	"selected": "_selected_n5n19_1"
+};
+
+//#endregion
+export { ds_vertical_tabs_module_default as default };
+//# sourceMappingURL=ds-vertical-tabs.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-vertical-tabs.module.js","names":[],"sources":["../../../src/components/ds-vertical-tabs/ds-vertical-tabs.module.scss"],"sourcesContent":["@use '../../styles/typography';\n\n.tabList {\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\toverflow-y: auto;\n\n\tscrollbar-width: none;\n\t-ms-overflow-style: none;\n\n\t&::-webkit-scrollbar {\n\t\twidth: 0;\n\t\tdisplay: none;\n\t}\n}\n\n.tabItem {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 0 var(--spacing-lg);\n\tmin-height: var(--spacing-3xl);\n\theight: var(--spacing-3xl);\n\tflex-shrink: 0;\n\tborder: none;\n\tborder-bottom: 1px solid var(--color-border);\n\tbackground: var(--color-background-secondary);\n\tcursor: pointer;\n\ttext-align: left;\n\tcolor: var(--color-font-secondary);\n\ttransition:\n\t\tbackground-color 0.2s,\n\t\tcolor 0.2s;\n\tgap: var(--spacing-xs);\n\n\t&:hover:not(:disabled):not(.selected):not([data-disabled]) {\n\t\tbackground: var(--color-background-action-tertiary);\n\t\tcolor: var(--color-font-main);\n\t}\n\n\t&.selected,\n\t&[data-state='active'] {\n\t\tbackground: var(--color-background-action-secondary-hover);\n\t\tcolor: var(--color-font-main);\n\t}\n\n\t&:disabled,\n\t&[data-disabled] {\n\t\tcursor: not-allowed;\n\t\tcolor: var(--color-font-secondary);\n\t\topacity: 0.5;\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid var(--color-background-selected);\n\t\toutline-offset: -2px;\n\t\tz-index: 1;\n\t}\n}\n"],"mappings":""}

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

@@ -0,0 +1,70 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-vertical-tabs/ds-vertical-tabs.types.d.ts
+interface DsVerticalTabsRootProps {
+  /**
+   * Currently selected tab value
+   */
+  value?: string;
+  /**
+   * Callback when selected tab changes
+   */
+  onValueChange?: (value: string | null) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Optional inline styles
+   */
+  style?: CSSProperties;
+  /**
+   * Child components (DsVerticalTabs.List, etc.)
+   */
+  children: ReactNode;
+}
+interface DsVerticalTabsListProps {
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Tab trigger components
+   */
+  children: ReactNode;
+}
+interface DsVerticalTabsTabProps {
+  /**
+   * Value that identifies this tab
+   */
+  value: string;
+  /**
+   * Whether the tab is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Tab content (label, icons, badges, etc.)
+   */
+  children: ReactNode;
+}
+interface DsVerticalTabsContentProps {
+  /**
+   * Value that identifies which tab this content belongs to
+   */
+  value: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Content to display when tab is active
+   */
+  children: ReactNode;
+}
+//#endregion
+export { DsVerticalTabsContentProps, DsVerticalTabsListProps, DsVerticalTabsRootProps, DsVerticalTabsTabProps };
+//# sourceMappingURL=ds-vertical-tabs.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-vertical-tabs.types.d.cts","names":[],"sources":["../../../src/components/ds-vertical-tabs/ds-vertical-tabs.types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,uBAAA;;AAAjB;AAuBA;EAWiB,KAAA,CAAA,EAAA,MAAA;EAmBA;;;;;;;;;;;UArCR;;;;YAIE;;UAGM,uBAAA;;;;;;;;YAQN;;UAGM,sBAAA;;;;;;;;;;;;;;;;YAgBN;;UAGM,0BAAA;;;;;;;;;;;;YAYN"}

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

@@ -0,0 +1,70 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-vertical-tabs/ds-vertical-tabs.types.d.ts
+interface DsVerticalTabsRootProps {
+  /**
+   * Currently selected tab value
+   */
+  value?: string;
+  /**
+   * Callback when selected tab changes
+   */
+  onValueChange?: (value: string | null) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Optional inline styles
+   */
+  style?: CSSProperties;
+  /**
+   * Child components (DsVerticalTabs.List, etc.)
+   */
+  children: ReactNode;
+}
+interface DsVerticalTabsListProps {
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Tab trigger components
+   */
+  children: ReactNode;
+}
+interface DsVerticalTabsTabProps {
+  /**
+   * Value that identifies this tab
+   */
+  value: string;
+  /**
+   * Whether the tab is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Tab content (label, icons, badges, etc.)
+   */
+  children: ReactNode;
+}
+interface DsVerticalTabsContentProps {
+  /**
+   * Value that identifies which tab this content belongs to
+   */
+  value: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Content to display when tab is active
+   */
+  children: ReactNode;
+}
+//#endregion
+export { DsVerticalTabsContentProps, DsVerticalTabsListProps, DsVerticalTabsRootProps, DsVerticalTabsTabProps };
+//# sourceMappingURL=ds-vertical-tabs.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-vertical-tabs.types.d.ts","names":[],"sources":["../../../src/components/ds-vertical-tabs/ds-vertical-tabs.types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,uBAAA;;AAAjB;AAuBA;EAWiB,KAAA,CAAA,EAAA,MAAA;EAmBA;;;;;;;;;;;UArCR;;;;YAIE;;UAGM,uBAAA;;;;;;;;YAQN;;UAGM,sBAAA;;;;;;;;;;;;;;;;YAgBN;;UAGM,0BAAA;;;;;;;;;;;;YAYN"}

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

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

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

@@ -0,0 +1,2 @@
+import { DsVerticalTabsContentProps, DsVerticalTabsListProps, DsVerticalTabsRootProps, DsVerticalTabsTabProps } from "./ds-vertical-tabs.types.js";
+import { DsVerticalTabs } from "./ds-vertical-tabs.js";

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

@@ -0,0 +1 @@
+import ds_vertical_tabs_default from "./ds-vertical-tabs.js";