@drivenets/design-system 0.0.4 → 0.1.0

package/dist/components/ds-segment-group/ds-segment-group.d.cts

@@ -0,0 +1,26 @@
+import { DsSegmentGroupItemProps, DsSegmentGroupItemTextProps, DsSegmentGroupRootProps } from "./ds-segment-group.types.cjs";
+import React from "react";
+
+//#region src/components/ds-segment-group/ds-segment-group.d.ts
+
+/**
+ * Design system SegmentGroup component
+ *
+ * @example
+ * <DsSegmentGroup.Root value={value} onValueChange={setValue} size="default">
+ *   <DsSegmentGroup.Indicator />
+ *   <DsSegmentGroup.Item value="option1" label="Option 1" />
+ *   <DsSegmentGroup.Item value="option2">
+ *     <DsIcon icon="settings" />
+ *     <DsSegmentGroup.ItemText>Option 2</DsSegmentGroup.ItemText>
+ *   </DsSegmentGroup.Item>
+ * </DsSegmentGroup.Root>
+ */
+declare const DsSegmentGroup: {
+  Root: React.FC<DsSegmentGroupRootProps>;
+  Item: React.FC<DsSegmentGroupItemProps>;
+  ItemText: React.FC<DsSegmentGroupItemTextProps>;
+};
+//#endregion
+export { DsSegmentGroup };
+//# sourceMappingURL=ds-segment-group.d.cts.map

package/dist/components/ds-segment-group/ds-segment-group.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-segment-group.d.cts","names":[],"sources":["../../../src/components/ds-segment-group/ds-segment-group.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAuEA;;;;;;;;;;;cAAa"}

package/dist/components/ds-segment-group/ds-segment-group.d.ts

@@ -0,0 +1,26 @@
+import { DsSegmentGroupItemProps, DsSegmentGroupItemTextProps, DsSegmentGroupRootProps } from "./ds-segment-group.types.js";
+import React from "react";
+
+//#region src/components/ds-segment-group/ds-segment-group.d.ts
+
+/**
+ * Design system SegmentGroup component
+ *
+ * @example
+ * <DsSegmentGroup.Root value={value} onValueChange={setValue} size="default">
+ *   <DsSegmentGroup.Indicator />
+ *   <DsSegmentGroup.Item value="option1" label="Option 1" />
+ *   <DsSegmentGroup.Item value="option2">
+ *     <DsIcon icon="settings" />
+ *     <DsSegmentGroup.ItemText>Option 2</DsSegmentGroup.ItemText>
+ *   </DsSegmentGroup.Item>
+ * </DsSegmentGroup.Root>
+ */
+declare const DsSegmentGroup: {
+  Root: React.FC<DsSegmentGroupRootProps>;
+  Item: React.FC<DsSegmentGroupItemProps>;
+  ItemText: React.FC<DsSegmentGroupItemTextProps>;
+};
+//#endregion
+export { DsSegmentGroup };
+//# sourceMappingURL=ds-segment-group.d.ts.map

package/dist/components/ds-segment-group/ds-segment-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-segment-group.d.ts","names":[],"sources":["../../../src/components/ds-segment-group/ds-segment-group.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAuEA;;;;;;;;;;;cAAa"}

package/dist/components/ds-segment-group/ds-segment-group.js

@@ -0,0 +1,214 @@
+import ds_typography_default from "../ds-typography/ds-typography.js";
+import ds_segment_group_module_default from "./ds-segment-group.module.js";
+import "./ds-segment-group.types.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SegmentGroup } from "@ark-ui/react/segment-group";
+
+//#region src/components/ds-segment-group/ds-segment-group.tsx
+/**
+* Root component - provides segment group context
+*/
+const Root = (t0) => {
+	const $ = c(17);
+	let children;
+	let className;
+	let onValueChange;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, children, onValueChange, size: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = onValueChange;
+		$[4] = props;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		onValueChange = $[3];
+		props = $[4];
+		t1 = $[5];
+	}
+	const t2 = (t1 === void 0 ? "default" : t1) === "small" && ds_segment_group_module_default.small;
+	let t3;
+	if ($[6] !== className || $[7] !== t2) {
+		t3 = classNames(ds_segment_group_module_default.segmentGroupRoot, t2, className);
+		$[6] = className;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== onValueChange) {
+		t4 = (details) => onValueChange?.(details.value);
+		$[9] = onValueChange;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(SegmentGroup.Indicator, { className: ds_segment_group_module_default.segmentIndicator });
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== children || $[13] !== props || $[14] !== t3 || $[15] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(SegmentGroup.Root, {
+			className: t3,
+			onValueChange: t4,
+			...props,
+			children: [t5, children]
+		});
+		$[12] = children;
+		$[13] = props;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t6;
+	} else t6 = $[16];
+	return t6;
+};
+/**
+* Item component - renders a single segment button
+*/
+const Item = (t0) => {
+	const $ = c(20);
+	let children;
+	let className;
+	let label;
+	let props;
+	let style;
+	let value;
+	if ($[0] !== t0) {
+		({value, label, className, style, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = label;
+		$[4] = props;
+		$[5] = style;
+		$[6] = value;
+	} else {
+		children = $[1];
+		className = $[2];
+		label = $[3];
+		props = $[4];
+		style = $[5];
+		value = $[6];
+	}
+	let t1;
+	if ($[7] !== className) {
+		t1 = classNames(ds_segment_group_module_default.segmentItem, className);
+		$[7] = className;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== children || $[10] !== label) {
+		t2 = label ? /* @__PURE__ */ jsx(ItemText, { children: label }) : children;
+		$[9] = children;
+		$[10] = label;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	let t4;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(SegmentGroup.ItemControl, {});
+		t4 = /* @__PURE__ */ jsx(SegmentGroup.ItemHiddenInput, {});
+		$[12] = t3;
+		$[13] = t4;
+	} else {
+		t3 = $[12];
+		t4 = $[13];
+	}
+	let t5;
+	if ($[14] !== props || $[15] !== style || $[16] !== t1 || $[17] !== t2 || $[18] !== value) {
+		t5 = /* @__PURE__ */ jsxs(SegmentGroup.Item, {
+			value,
+			className: t1,
+			style,
+			...props,
+			children: [
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[14] = props;
+		$[15] = style;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = value;
+		$[19] = t5;
+	} else t5 = $[19];
+	return t5;
+};
+/**
+* ItemText component - renders text content within an item
+*/
+const ItemText = (t0) => {
+	const $ = c(12);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = classNames(ds_segment_group_module_default.segmentItemText, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== children) {
+		t2 = /* @__PURE__ */ jsx(ds_typography_default, {
+			variant: "body-sm-reg",
+			children
+		});
+		$[6] = children;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== props || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(SegmentGroup.ItemText, {
+			className: t1,
+			...props,
+			asChild: true,
+			children: t2
+		});
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+};
+/**
+* Design system SegmentGroup component
+*
+* @example
+* <DsSegmentGroup.Root value={value} onValueChange={setValue} size="default">
+*   <DsSegmentGroup.Indicator />
+*   <DsSegmentGroup.Item value="option1" label="Option 1" />
+*   <DsSegmentGroup.Item value="option2">
+*     <DsIcon icon="settings" />
+*     <DsSegmentGroup.ItemText>Option 2</DsSegmentGroup.ItemText>
+*   </DsSegmentGroup.Item>
+* </DsSegmentGroup.Root>
+*/
+const DsSegmentGroup = {
+	Root,
+	Item,
+	ItemText
+};
+
+//#endregion
+export { DsSegmentGroup };
+//# sourceMappingURL=ds-segment-group.js.map

package/dist/components/ds-segment-group/ds-segment-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-segment-group.js","names":["React","SegmentGroup","classNames","styles","DsTypography","DsSegmentGroupItemProps","DsSegmentGroupItemTextProps","DsSegmentGroupRootProps","Root","FC","t0","$","_c","children","className","onValueChange","props","t1","size","undefined","t2","small","t3","segmentGroupRoot","t4","details","value","t5","Symbol","for","segmentIndicator","t6","Item","label","style","segmentItem","ItemText","segmentItemText","DsSegmentGroup"],"sources":["../../../src/components/ds-segment-group/ds-segment-group.tsx"],"sourcesContent":["import type React from 'react';\nimport { SegmentGroup } from '@ark-ui/react/segment-group';\nimport classNames from 'classnames';\nimport styles from './ds-segment-group.module.scss';\nimport DsTypography from '../ds-typography/ds-typography';\nimport {\n\ttype DsSegmentGroupItemProps,\n\ttype DsSegmentGroupItemTextProps,\n\ttype DsSegmentGroupRootProps,\n} from './ds-segment-group.types';\n\n/**\n * Root component - provides segment group context\n */\nconst Root: React.FC<DsSegmentGroupRootProps> = ({\n\tclassName,\n\tchildren,\n\tonValueChange,\n\tsize = 'default',\n\t...props\n}) => (\n\t<SegmentGroup.Root\n\t\tclassName={classNames(styles.segmentGroupRoot, size === 'small' && styles.small, className)}\n\t\tonValueChange={(details) => onValueChange?.(details.value)}\n\t\t{...props}\n\t>\n\t\t<SegmentGroup.Indicator className={styles.segmentIndicator} />\n\t\t{children}\n\t</SegmentGroup.Root>\n);\n\n/**\n * Item component - renders a single segment button\n */\nconst Item: React.FC<DsSegmentGroupItemProps> = ({ value, label, className, style, children, ...props }) => {\n\treturn (\n\t\t<SegmentGroup.Item\n\t\t\tvalue={value}\n\t\t\tclassName={classNames(styles.segmentItem, className)}\n\t\t\tstyle={style}\n\t\t\t{...props}\n\t\t>\n\t\t\t{label ? <ItemText>{label}</ItemText> : children}\n\t\t\t<SegmentGroup.ItemControl />\n\t\t\t<SegmentGroup.ItemHiddenInput />\n\t\t</SegmentGroup.Item>\n\t);\n};\n\n/**\n * ItemText component - renders text content within an item\n */\nconst ItemText: React.FC<DsSegmentGroupItemTextProps> = ({ className, children, ...props }) => (\n\t<SegmentGroup.ItemText className={classNames(styles.segmentItemText, className)} {...props} asChild>\n\t\t<DsTypography variant=\"body-sm-reg\">{children}</DsTypography>\n\t</SegmentGroup.ItemText>\n);\n\n/**\n * Design system SegmentGroup component\n *\n * @example\n * <DsSegmentGroup.Root value={value} onValueChange={setValue} size=\"default\">\n *   <DsSegmentGroup.Indicator />\n *   <DsSegmentGroup.Item value=\"option1\" label=\"Option 1\" />\n *   <DsSegmentGroup.Item value=\"option2\">\n *     <DsIcon icon=\"settings\" />\n *     <DsSegmentGroup.ItemText>Option 2</DsSegmentGroup.ItemText>\n *   </DsSegmentGroup.Item>\n * </DsSegmentGroup.Root>\n */\nexport const DsSegmentGroup = {\n\tRoot,\n\tItem,\n\tItemText,\n};\n"],"mappings":"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"}

package/dist/components/ds-segment-group/ds-segment-group.module.cjs

@@ -0,0 +1,12 @@
+
+//#region src/components/ds-segment-group/ds-segment-group.module.scss
+var ds_segment_group_module_default = {
+	"segmentGroupRoot": "_segmentGroupRoot_1sd0t_1",
+	"small": "_small_1sd0t_1",
+	"segmentItem": "_segmentItem_1sd0t_1",
+	"segmentItemText": "_segmentItemText_1sd0t_1",
+	"segmentIndicator": "_segmentIndicator_1sd0t_1"
+};
+
+//#endregion
+exports.default = ds_segment_group_module_default;

package/dist/components/ds-segment-group/ds-segment-group.module.js

@@ -0,0 +1,12 @@
+//#region src/components/ds-segment-group/ds-segment-group.module.scss
+var ds_segment_group_module_default = {
+	"segmentGroupRoot": "_segmentGroupRoot_1sd0t_1",
+	"small": "_small_1sd0t_1",
+	"segmentItem": "_segmentItem_1sd0t_1",
+	"segmentItemText": "_segmentItemText_1sd0t_1",
+	"segmentIndicator": "_segmentIndicator_1sd0t_1"
+};
+
+//#endregion
+export { ds_segment_group_module_default as default };
+//# sourceMappingURL=ds-segment-group.module.js.map

package/dist/components/ds-segment-group/ds-segment-group.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-segment-group.module.js","names":[],"sources":["../../../src/components/ds-segment-group/ds-segment-group.module.scss"],"sourcesContent":[".segmentGroupRoot {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tposition: relative;\n\tbackground: var(--color-background-secondary);\n\tborder: 1px solid var(--color-border-contrast);\n\tborder-radius: 4px;\n\tgap: var(--spacing-2xs);\n\theight: 36px;\n\tpadding: var(--spacing-3xs);\n\n\t&.small {\n\t\theight: 28px;\n\t\tpadding: var(--spacing-4xs);\n\n\t\t.segmentItem {\n\t\t\tpadding: var(--spacing-4xs) var(--spacing-xs);\n\t\t}\n\t}\n}\n\n.segmentItem {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: var(--spacing-3xs) var(--spacing-sm);\n\tgap: var(--spacing-2xs);\n\tflex: 1;\n\tz-index: 1;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&[data-state='checked'] {\n\t\t.segmentItemText {\n\t\t\tcolor: var(--color-font-main);\n\t\t\tfont-weight: var(--font-weight-medium);\n\t\t}\n\t}\n\n\t&[data-state='unchecked'] {\n\t\tbackground: transparent;\n\n\t\t.segmentItemText {\n\t\t\tcolor: var(--color-background-action);\n\t\t}\n\n\t\t&:hover:not([data-disabled]) {\n\t\t\tbackground: var(--color-background-action-secondary);\n\t\t}\n\n\t\t&:active:not([data-disabled]) {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-border-contrast);\n\t\t}\n\t}\n\n\t&[data-disabled] {\n\t\tcursor: not-allowed;\n\t\tbackground: var(--color-background-secondary);\n\n\t\t.segmentItemText {\n\t\t\tcolor: var(--color-font-disabled);\n\t\t}\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid var(--color-border-action-secondary);\n\t\toutline-offset: 2px;\n\t}\n}\n\n[data-scope='segment-group'][data-part='item-control'] {\n\tposition: absolute;\n\tinset: 0;\n\tpointer-events: none;\n}\n\n.segmentItemText {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twhite-space: nowrap;\n\ttransition: color 150ms ease-in-out;\n}\n\n.segmentIndicator {\n\tposition: absolute;\n\tbackground: var(--color-background);\n\tborder: 1px solid var(--color-border-contrast);\n\tborder-radius: 4px;\n\tbox-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);\n\tz-index: 0;\n\tpointer-events: none;\n\twidth: var(--width);\n\theight: var(--height);\n\tleft: var(--left);\n\ttop: var(--top);\n}\n"],"mappings":""}

package/dist/components/ds-segment-group/ds-segment-group.types.cjs

@@ -0,0 +1,2 @@
+let react = require("react");
+let __ark_ui_react_segment_group = require("@ark-ui/react/segment-group");

package/dist/components/ds-segment-group/ds-segment-group.types.d.cts

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+import { SegmentGroupItemProps, SegmentGroupItemTextProps, SegmentGroupRootProps } from "@ark-ui/react/segment-group";
+
+//#region src/components/ds-segment-group/ds-segment-group.types.d.ts
+
+/**
+ * Size variants for the segment group
+ */
+type DsSegmentGroupSize = 'small' | 'default';
+/**
+ * Props for the DsSegmentGroup Root component
+ */
+interface DsSegmentGroupRootProps extends Pick<SegmentGroupRootProps, 'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'children'> {
+  /**
+   * Size variant of the segment group
+   * @default 'default'
+   */
+  size?: DsSegmentGroupSize;
+  /**
+   * Event handler called when the selected value changes
+   */
+  onValueChange?: (value: string | null) => void;
+}
+/**
+ * Props for the DsSegmentGroup Item component
+ */
+type DsSegmentGroupItemProps = Pick<SegmentGroupItemProps, 'id' | 'value' | 'disabled' | 'className' | 'style'> & ({
+  /**
+   * The segment group item content
+   */
+  children: ReactNode;
+  /**
+   * Optional label text for the segment item
+   */
+  label?: never;
+} | {
+  /**
+   * The segment group item content
+   */
+  children?: never;
+  /**
+   * Optional label text for the segment item
+   */
+  label: string;
+});
+/**
+ * Props for the DsSegmentGroup ItemText component
+ */
+type DsSegmentGroupItemTextProps = Pick<SegmentGroupItemTextProps, 'className' | 'style' | 'children'>;
+//#endregion
+export { DsSegmentGroupItemProps, DsSegmentGroupItemTextProps, DsSegmentGroupRootProps, DsSegmentGroupSize };
+//# sourceMappingURL=ds-segment-group.types.d.cts.map

package/dist/components/ds-segment-group/ds-segment-group.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-segment-group.types.d.cts","names":[],"sources":["../../../src/components/ds-segment-group/ds-segment-group.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAUA;AAKiB,KALL,kBAAA,GAK6B,OAAA,GAAA,SAAA;;;;AAAY,UAApC,uBAAA,SAAgC,IAAI,CACpD,qBADoD,EAAA,OAAA,GAAA,cAAA,GAAA,UAAA,GAAA,MAAA,GAAA,WAAA,GAAA,OAAA,GAAA,UAAA,CAAA,CAAA;EAkBzC;;;;EASW,IAAA,CAAA,EAnBf,kBAmBe;EAqBX;;;;;;;;KA9BA,uBAAA,GAA0B,KACrC;;;;YAQa;;;;;;;;;;;;;;;;;;KAqBF,2BAAA,GAA8B,KAAK"}

package/dist/components/ds-segment-group/ds-segment-group.types.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+import { SegmentGroupItemProps, SegmentGroupItemTextProps, SegmentGroupRootProps } from "@ark-ui/react/segment-group";
+
+//#region src/components/ds-segment-group/ds-segment-group.types.d.ts
+
+/**
+ * Size variants for the segment group
+ */
+type DsSegmentGroupSize = 'small' | 'default';
+/**
+ * Props for the DsSegmentGroup Root component
+ */
+interface DsSegmentGroupRootProps extends Pick<SegmentGroupRootProps, 'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'children'> {
+  /**
+   * Size variant of the segment group
+   * @default 'default'
+   */
+  size?: DsSegmentGroupSize;
+  /**
+   * Event handler called when the selected value changes
+   */
+  onValueChange?: (value: string | null) => void;
+}
+/**
+ * Props for the DsSegmentGroup Item component
+ */
+type DsSegmentGroupItemProps = Pick<SegmentGroupItemProps, 'id' | 'value' | 'disabled' | 'className' | 'style'> & ({
+  /**
+   * The segment group item content
+   */
+  children: ReactNode;
+  /**
+   * Optional label text for the segment item
+   */
+  label?: never;
+} | {
+  /**
+   * The segment group item content
+   */
+  children?: never;
+  /**
+   * Optional label text for the segment item
+   */
+  label: string;
+});
+/**
+ * Props for the DsSegmentGroup ItemText component
+ */
+type DsSegmentGroupItemTextProps = Pick<SegmentGroupItemTextProps, 'className' | 'style' | 'children'>;
+//#endregion
+export { DsSegmentGroupItemProps, DsSegmentGroupItemTextProps, DsSegmentGroupRootProps, DsSegmentGroupSize };
+//# sourceMappingURL=ds-segment-group.types.d.ts.map

package/dist/components/ds-segment-group/ds-segment-group.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-segment-group.types.d.ts","names":[],"sources":["../../../src/components/ds-segment-group/ds-segment-group.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAUA;AAKiB,KALL,kBAAA,GAK6B,OAAA,GAAA,SAAA;;;;AAAY,UAApC,uBAAA,SAAgC,IAAI,CACpD,qBADoD,EAAA,OAAA,GAAA,cAAA,GAAA,UAAA,GAAA,MAAA,GAAA,WAAA,GAAA,OAAA,GAAA,UAAA,CAAA,CAAA;EAkBzC;;;;EASW,IAAA,CAAA,EAnBf,kBAmBe;EAqBX;;;;;;;;KA9BA,uBAAA,GAA0B,KACrC;;;;YAQa;;;;;;;;;;;;;;;;;;KAqBF,2BAAA,GAA8B,KAAK"}

package/dist/components/ds-segment-group/ds-segment-group.types.js

@@ -0,0 +1,2 @@
+import "react";
+import "@ark-ui/react/segment-group";

package/dist/components/ds-segment-group/index.cjs

@@ -0,0 +1,2 @@
+require('./ds-segment-group.types.cjs');
+const require_ds_segment_group = require('./ds-segment-group.cjs');

package/dist/components/ds-segment-group/index.d.ts

@@ -0,0 +1,2 @@
+import { DsSegmentGroupItemProps, DsSegmentGroupItemTextProps, DsSegmentGroupRootProps, DsSegmentGroupSize } from "./ds-segment-group.types.js";
+import { DsSegmentGroup } from "./ds-segment-group.js";

package/dist/components/ds-segment-group/index.js

@@ -0,0 +1,2 @@
+import "./ds-segment-group.types.js";
+import { DsSegmentGroup } from "./ds-segment-group.js";

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

@@ -1,5 +1,5 @@
 import { DsSelectProps } from "./ds-select.types.cjs";
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/ds-select/ds-select.d.ts
 declare const DsSelect: ({
@@ -15,7 +15,7 @@ declare const DsSelect: ({
   placeholder,
   disabled,
   ...multiselectProps
-}: DsSelectProps) => react_jsx_runtime34.JSX.Element;
+}: DsSelectProps) => react_jsx_runtime30.JSX.Element;
 //#endregion
 export { DsSelect };
 //# sourceMappingURL=ds-select.d.cts.map

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

@@ -1,5 +1,5 @@
 import { DsSelectProps } from "./ds-select.types.js";
-import * as react_jsx_runtime39 from "react/jsx-runtime";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
 
 //#region src/components/ds-select/ds-select.d.ts
 declare const DsSelect: ({
@@ -15,7 +15,7 @@ declare const DsSelect: ({
   placeholder,
   disabled,
   ...multiselectProps
-}: DsSelectProps) => react_jsx_runtime39.JSX.Element;
+}: DsSelectProps) => react_jsx_runtime36.JSX.Element;
 //#endregion
 export { DsSelect };
 //# sourceMappingURL=ds-select.d.ts.map

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

@@ -1,5 +1,5 @@
 import { DsSmartTabProps, DsSmartTabsProps } from "./ds-smart-tabs.types.cjs";
-import * as react_jsx_runtime35 from "react/jsx-runtime";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/ds-smart-tabs/ds-smart-tabs.d.ts
@@ -14,7 +14,7 @@ declare const DsSmartTabs: {
     style,
     children,
     ...props
-  }: DsSmartTabsProps): react_jsx_runtime35.JSX.Element;
+  }: DsSmartTabsProps): react_jsx_runtime31.JSX.Element;
   Tab: React.FC<DsSmartTabProps>;
 };
 //#endregion

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

@@ -1,5 +1,5 @@
 import { DsSmartTabProps, DsSmartTabsProps } from "./ds-smart-tabs.types.js";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/ds-smart-tabs/ds-smart-tabs.d.ts
@@ -14,7 +14,7 @@ declare const DsSmartTabs: {
     style,
     children,
     ...props
-  }: DsSmartTabsProps): react_jsx_runtime17.JSX.Element;
+  }: DsSmartTabsProps): react_jsx_runtime18.JSX.Element;
   Tab: React.FC<DsSmartTabProps>;
 };
 //#endregion

package/dist/components/ds-stepper/components/ds-step-content.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/ds-stepper/components/ds-step-content.d.ts
@@ -13,7 +13,7 @@ declare function DsStepContent({
   label,
   description,
   actions
-}: DsStepContentProps): react_jsx_runtime36.JSX.Element;
+}: DsStepContentProps): react_jsx_runtime39.JSX.Element;
 //#endregion
 export { DsStepContent };
 //# sourceMappingURL=ds-step-content.d.ts.map

package/dist/components/ds-stepper/components/ds-step-next-button.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime37 from "react/jsx-runtime";
+import * as react_jsx_runtime40 from "react/jsx-runtime";
 import { PropsWithChildren } from "react";
 
 //#region src/components/ds-stepper/components/ds-step-next-button.d.ts
 declare function DsNextStepButton({
   children
-}: PropsWithChildren): react_jsx_runtime37.JSX.Element;
+}: PropsWithChildren): react_jsx_runtime40.JSX.Element;
 //#endregion
 export { DsNextStepButton };
 //# sourceMappingURL=ds-step-next-button.d.ts.map

package/dist/components/ds-stepper/components/ds-step.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime38 from "react/jsx-runtime";
 import { PropsWithChildren } from "react";
 
 //#region src/components/ds-stepper/components/ds-step.d.ts
@@ -10,7 +10,7 @@ declare function DsStep({
   index,
   children,
   className
-}: DsStepProps): react_jsx_runtime36.JSX.Element | null;
+}: DsStepProps): react_jsx_runtime38.JSX.Element | null;
 //#endregion
 export { DsStep };
 //# sourceMappingURL=ds-step.d.cts.map

package/dist/components/ds-stepper/components/ds-step.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime35 from "react/jsx-runtime";
+import * as react_jsx_runtime37 from "react/jsx-runtime";
 import { PropsWithChildren } from "react";
 
 //#region src/components/ds-stepper/components/ds-step.d.ts
@@ -10,7 +10,7 @@ declare function DsStep({
   index,
   children,
   className
-}: DsStepProps): react_jsx_runtime35.JSX.Element | null;
+}: DsStepProps): react_jsx_runtime37.JSX.Element | null;
 //#endregion
 export { DsStep };
 //# sourceMappingURL=ds-step.d.ts.map

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

@@ -1,5 +1,5 @@
 import { DsStepperProps } from "./ds-stepper.types.cjs";
-import * as react_jsx_runtime38 from "react/jsx-runtime";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
 
 //#region src/components/ds-stepper/ds-stepper.d.ts
 declare function DsStepper({
@@ -9,7 +9,7 @@ declare function DsStepper({
   onStepChange,
   onComplete,
   children
-}: DsStepperProps): react_jsx_runtime38.JSX.Element;
+}: DsStepperProps): react_jsx_runtime36.JSX.Element;
 //#endregion
 export { DsStepper };
 //# sourceMappingURL=ds-stepper.d.cts.map

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

@@ -1,5 +1,5 @@
 import { DsStepperProps } from "./ds-stepper.types.js";
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime38 from "react/jsx-runtime";
 
 //#region src/components/ds-stepper/ds-stepper.d.ts
 declare function DsStepper({
@@ -9,7 +9,7 @@ declare function DsStepper({
   onStepChange,
   onComplete,
   children
-}: DsStepperProps): react_jsx_runtime34.JSX.Element;
+}: DsStepperProps): react_jsx_runtime38.JSX.Element;
 //#endregion
 export { DsStepper };
 //# sourceMappingURL=ds-stepper.d.ts.map

package/dist/components/ds-table/components/ds-table-cell/ds-table-cell.types.d.cts

@@ -1,4 +1,5 @@
 import { IconType } from "../../../ds-icon/ds-icon.types.cjs";
+import { Row } from "@tanstack/react-table";
 
 //#region src/components/ds-table/components/ds-table-cell/ds-table-cell.types.d.ts
 

package/dist/components/ds-table/components/ds-table-cell/ds-table-cell.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-table-cell.types.d.cts","names":[],"sources":["../../../../../src/components/ds-table/components/ds-table-cell/ds-table-cell.types.ts"],"sourcesContent":[],"mappings":";;;;;AAMA;;AASwB,UATP,SASO,CAAA,KAAA,CAAA,CAAA;EAUN;;;EAWN,IAAA,EA1BL,QA0BK;EAA2C;;;EAI/C,KAAA,EAAA,MAAA,GAAA,CAAA,CAAA,GAAA,EAzBgB,KAyBhB,EAAA,GAAA,MAAA,CAAA;EAAQ;;;;;;;mBAfE;;;;iBAKF;;;;;KAMJ,4BAA4B,KAAK,UAAU;;;;SAI/C"}
+{"version":3,"file":"ds-table-cell.types.d.cts","names":[],"sources":["../../../../../src/components/ds-table/components/ds-table-cell/ds-table-cell.types.ts"],"sourcesContent":[],"mappings":";;;;;;;AAMA;AAIO,UAJU,SAIV,CAAA,KAAA,CAAA,CAAA;EAKiB;;;EAeH,IAAA,EApBd,QAoBc;EAMT;;;EAA4B,KAAA,EAAA,MAAA,GAAA,CAAA,CAAA,GAAA,EArBhB,KAqBgB,EAAA,GAAA,MAAA,CAAA;EAIhC;;;;;;;mBAfU;;;;iBAKF;;;;;KAMJ,4BAA4B,KAAK,UAAU;;;;SAI/C"}

package/dist/components/ds-table/components/ds-table-cell/ds-table-cell.types.d.ts

@@ -1,6 +1,6 @@
 import { IconType } from "../../../ds-icon/ds-icon.types.js";
 import "../../../ds-icon/index.js";
-import "@tanstack/react-table";
+import { Row } from "@tanstack/react-table";
 
 //#region src/components/ds-table/components/ds-table-cell/ds-table-cell.types.d.ts
 /**