@drivenets/design-system 0.0.2 → 0.0.3

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_runtime18 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_runtime18.JSX.Element;
+  List: ({
+    className,
+    children
+  }: DsVerticalTabsListProps) => react_jsx_runtime18.JSX.Element;
+  Tab: ({
+    value,
+    disabled,
+    className,
+    children
+  }: DsVerticalTabsTabProps) => react_jsx_runtime18.JSX.Element;
+  Content: ({
+    value,
+    className,
+    children
+  }: DsVerticalTabsContentProps) => react_jsx_runtime18.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"}

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

@@ -0,0 +1,75 @@
+import ds_vertical_tabs_module_default from "./ds-vertical-tabs.module.js";
+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 = ({ value, onValueChange, className, style, children }) => {
+	const handleValueChange = (details) => {
+		onValueChange?.(details.value);
+	};
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		orientation: "vertical",
+		value,
+		onValueChange: handleValueChange,
+		className,
+		style,
+		children
+	});
+};
+/**
+* Container for tab triggers
+*/
+const DsVerticalTabsList = ({ className, children }) => {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		className: classNames(ds_vertical_tabs_module_default.tabList, className),
+		children
+	});
+};
+/**
+* Individual tab trigger - fully customizable content
+*/
+const DsVerticalTabsTab = ({ value, disabled, className, children }) => {
+	return /* @__PURE__ */ jsx(Tabs.Trigger, {
+		value,
+		disabled,
+		className: classNames(ds_vertical_tabs_module_default.tabItem, className),
+		children
+	});
+};
+/**
+* Tab content panel - displays when corresponding tab is active
+*/
+const DsVerticalTabsContent = ({ value, className, children }) => {
+	return /* @__PURE__ */ jsx(Tabs.Content, {
+		value,
+		className,
+		children
+	});
+};
+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":["styles"],"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,MAAM,kBAAkB,EAAE,OAAO,eAAe,WAAW,OAAO,eAAwC;CACzG,MAAM,qBAAqB,YAAsC;AAChE,kBAAgB,QAAQ,MAAM;;AAG/B,QACC,oBAAC,KAAK;EACL,aAAY;EACL;EACP,eAAe;EACJ;EACJ;EAEN;GACU;;;;;AAOd,MAAM,sBAAsB,EAAE,WAAW,eAAwC;AAChF,QAAO,oBAAC,KAAK;EAAK,WAAW,WAAWA,gCAAO,SAAS,UAAU;EAAG;GAAqB;;;;;AAM3F,MAAM,qBAAqB,EAAE,OAAO,UAAU,WAAW,eAAuC;AAC/F,QACC,oBAAC,KAAK;EAAe;EAAiB;EAAU,WAAW,WAAWA,gCAAO,SAAS,UAAU;EAC9F;GACa;;;;;AAOjB,MAAM,yBAAyB,EAAE,OAAO,WAAW,eAA2C;AAC7F,QACC,oBAAC,KAAK;EAAe;EAAkB;EACrC;GACa;;AAIjB,eAAe,OAAO;AACtB,eAAe,MAAM;AACrB,eAAe,UAAU;AAEzB,+BAAe"}

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