@drivenets/design-system 0.0.5 → 0.2.0

package/dist/components/ds-tag-filter/hooks/use-tag-overflow-calculation.js

@@ -0,0 +1,137 @@
+import { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from "../utils.js";
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useState } from "react";
+
+//#region src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts
+const TAG_HOVER_BUTTON_SPACE = 20;
+/**
+* Custom hook to calculate how many tags can fit in 2 rows.
+*
+* Row 1: Label + Tags + Clear Button
+* Row 2: Remaining Tags + Expand Tag (only if overflow)
+*
+* Measures actual element widths to determine optimal placement.
+*/
+const useTagOverflowCalculation = (t0) => {
+	const $ = c(16);
+	const { containerRef, measurementRef, totalItems, expanded } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			row1TagCount: 0,
+			row2TagCount: 0,
+			hasOverflow: false
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	const [state, setState] = useState(t1);
+	let t2;
+	if ($[1] !== containerRef || $[2] !== measurementRef) {
+		t2 = () => {
+			if (!containerRef.current || !measurementRef.current) return;
+			const container = containerRef.current;
+			const measurementContainer = measurementRef.current;
+			const { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap } = getElementMeasurements(measurementContainer);
+			if (tagWidths.length === 0) {
+				setState({
+					row1TagCount: 0,
+					row2TagCount: 0,
+					hasOverflow: false
+				});
+				return;
+			}
+			const containerWidth = getContainerAvailableWidth(container);
+			const row1Result = fitTagsInRow(tagWidths, containerWidth - labelWidth - clearButtonWidth - TAG_HOVER_BUTTON_SPACE, gap);
+			const remainingTags = tagWidths.slice(row1Result.count);
+			if (remainingTags.length === 0) {
+				setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: 0,
+					hasOverflow: false
+				});
+				return;
+			}
+			const row2WithExpandResult = fitTagsInRow(remainingTags, containerWidth - expandTagWidth - TAG_HOVER_BUTTON_SPACE, gap);
+			if (remainingTags.length > row2WithExpandResult.count) setState({
+				row1TagCount: row1Result.count,
+				row2TagCount: row2WithExpandResult.count,
+				hasOverflow: true
+			});
+			else {
+				const row2FullResult = fitTagsInRow(remainingTags, containerWidth - TAG_HOVER_BUTTON_SPACE, gap);
+				if (row2FullResult.count < remainingTags.length) setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: row2WithExpandResult.count,
+					hasOverflow: true
+				});
+				else setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: row2FullResult.count,
+					hasOverflow: false
+				});
+			}
+		};
+		$[1] = containerRef;
+		$[2] = measurementRef;
+		$[3] = t2;
+	} else t2 = $[3];
+	const calculateLayout = t2;
+	let t3;
+	if ($[4] !== calculateLayout || $[5] !== containerRef) {
+		t3 = () => {
+			const rafId = requestAnimationFrame(() => {
+				calculateLayout();
+			});
+			const resizeObserver = new ResizeObserver(() => {
+				requestAnimationFrame(() => {
+					calculateLayout();
+				});
+			});
+			if (containerRef.current) resizeObserver.observe(containerRef.current);
+			return () => {
+				cancelAnimationFrame(rafId);
+				resizeObserver.disconnect();
+			};
+		};
+		$[4] = calculateLayout;
+		$[5] = containerRef;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== calculateLayout || $[8] !== containerRef || $[9] !== expanded || $[10] !== measurementRef || $[11] !== totalItems) {
+		t4 = [
+			containerRef,
+			measurementRef,
+			totalItems,
+			expanded,
+			calculateLayout
+		];
+		$[7] = calculateLayout;
+		$[8] = containerRef;
+		$[9] = expanded;
+		$[10] = measurementRef;
+		$[11] = totalItems;
+		$[12] = t4;
+	} else t4 = $[12];
+	useLayoutEffect(t3, t4);
+	if (expanded) {
+		const t5 = totalItems - state.row1TagCount;
+		let t6;
+		if ($[13] !== state.row1TagCount || $[14] !== t5) {
+			t6 = {
+				row1TagCount: state.row1TagCount,
+				row2TagCount: t5,
+				hasOverflow: true
+			};
+			$[13] = state.row1TagCount;
+			$[14] = t5;
+			$[15] = t6;
+		} else t6 = $[15];
+		return t6;
+	}
+	return state;
+};
+
+//#endregion
+export { useTagOverflowCalculation };
+//# sourceMappingURL=use-tag-overflow-calculation.js.map

package/dist/components/ds-tag-filter/hooks/use-tag-overflow-calculation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tag-overflow-calculation.js","names":["RefObject","useCallback","useLayoutEffect","useState","fitTagsInRow","getContainerAvailableWidth","getElementMeasurements","UseTagOverflowCalculationOptions","containerRef","HTMLDivElement","measurementRef","totalItems","expanded","UseTagOverflowCalculationResult","row1TagCount","row2TagCount","hasOverflow","TAG_HOVER_BUTTON_SPACE","useTagOverflowCalculation","t0","$","_c","t1","Symbol","for","state","setState","t2","current","container","measurementContainer","tagWidths","labelWidth","clearButtonWidth","expandTagWidth","gap","length","containerWidth","row1AvailableWidth","row1Result","remainingTags","slice","count","row2AvailableWithExpand","row2WithExpandResult","overflowExists","row2AvailableWithoutExpand","row2FullResult","calculateLayout","t3","rafId","requestAnimationFrame","resizeObserver","ResizeObserver","observe","cancelAnimationFrame","disconnect","t4","t5","t6"],"sources":["../../../../src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts"],"sourcesContent":["import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';\nimport { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from '../utils';\n\ninterface UseTagOverflowCalculationOptions {\n\tcontainerRef: RefObject<HTMLDivElement | null>;\n\tmeasurementRef: RefObject<HTMLDivElement | null>;\n\ttotalItems: number;\n\texpanded: boolean;\n}\n\ninterface UseTagOverflowCalculationResult {\n\trow1TagCount: number;\n\trow2TagCount: number;\n\thasOverflow: boolean;\n}\n\n// Extra space needed per row for animated delete button that appears on hover\nconst TAG_HOVER_BUTTON_SPACE = 20;\n\n/**\n * Custom hook to calculate how many tags can fit in 2 rows.\n *\n * Row 1: Label + Tags + Clear Button\n * Row 2: Remaining Tags + Expand Tag (only if overflow)\n *\n * Measures actual element widths to determine optimal placement.\n */\nexport const useTagOverflowCalculation = ({\n\tcontainerRef,\n\tmeasurementRef,\n\ttotalItems,\n\texpanded,\n}: UseTagOverflowCalculationOptions): UseTagOverflowCalculationResult => {\n\tconst [state, setState] = useState<UseTagOverflowCalculationResult>({\n\t\trow1TagCount: 0,\n\t\trow2TagCount: 0,\n\t\thasOverflow: false,\n\t});\n\n\tconst calculateLayout = useCallback(() => {\n\t\tif (!containerRef.current || !measurementRef.current) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst container = containerRef.current;\n\t\tconst measurementContainer = measurementRef.current;\n\n\t\tconst { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap } =\n\t\t\tgetElementMeasurements(measurementContainer);\n\n\t\tif (tagWidths.length === 0) {\n\t\t\tsetState({ row1TagCount: 0, row2TagCount: 0, hasOverflow: false });\n\t\t\treturn;\n\t\t}\n\n\t\tconst containerWidth = getContainerAvailableWidth(container);\n\n\t\t// Calculate Row 1 available space (Label + Tags + Clear Button)\n\t\tconst row1AvailableWidth = containerWidth - labelWidth - clearButtonWidth - TAG_HOVER_BUTTON_SPACE;\n\n\t\t// Calculate how many tags fit in Row 1\n\t\tconst row1Result = fitTagsInRow(tagWidths, row1AvailableWidth, gap);\n\t\tconst remainingTags = tagWidths.slice(row1Result.count);\n\n\t\tif (remainingTags.length === 0) {\n\t\t\t// All tags fit in Row 1, no overflow\n\t\t\tsetState({ row1TagCount: row1Result.count, row2TagCount: 0, hasOverflow: false });\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate with expand tag reserved (pessimistic)\n\t\tconst row2AvailableWithExpand = containerWidth - expandTagWidth - TAG_HOVER_BUTTON_SPACE;\n\t\tconst row2WithExpandResult = fitTagsInRow(remainingTags, row2AvailableWithExpand, gap);\n\n\t\t// Check if there's overflow (more remaining tags than fit in Row 2 with expand)\n\t\tconst overflowExists = remainingTags.length > row2WithExpandResult.count;\n\n\t\tif (overflowExists) {\n\t\t\t// Use the count with expand tag space reserved\n\t\t\tsetState({\n\t\t\t\trow1TagCount: row1Result.count,\n\t\t\t\trow2TagCount: row2WithExpandResult.count,\n\t\t\t\thasOverflow: true,\n\t\t\t});\n\t\t} else {\n\t\t\t// No overflow - recalculate Row 2 without reserving expand tag space\n\t\t\tconst row2AvailableWithoutExpand = containerWidth - TAG_HOVER_BUTTON_SPACE;\n\t\t\tconst row2FullResult = fitTagsInRow(remainingTags, row2AvailableWithoutExpand, gap);\n\n\t\t\t// Double-check: if even without expand tag we can't fit all, we have overflow\n\t\t\tif (row2FullResult.count < remainingTags.length) {\n\t\t\t\tsetState({\n\t\t\t\t\trow1TagCount: row1Result.count,\n\t\t\t\t\trow2TagCount: row2WithExpandResult.count,\n\t\t\t\t\thasOverflow: true,\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tsetState({ row1TagCount: row1Result.count, row2TagCount: row2FullResult.count, hasOverflow: false });\n\t\t\t}\n\t\t}\n\t}, [containerRef, measurementRef]);\n\n\tuseLayoutEffect(() => {\n\t\t// Use requestAnimationFrame to ensure DOM is fully laid out\n\t\tconst rafId = requestAnimationFrame(() => {\n\t\t\tcalculateLayout();\n\t\t});\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tcalculateLayout();\n\t\t\t});\n\t\t});\n\n\t\tif (containerRef.current) {\n\t\t\tresizeObserver.observe(containerRef.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [containerRef, measurementRef, totalItems, expanded, calculateLayout]);\n\n\t// When expanded, show all tags\n\tif (expanded) {\n\t\treturn {\n\t\t\trow1TagCount: state.row1TagCount,\n\t\t\trow2TagCount: totalItems - state.row1TagCount,\n\t\t\thasOverflow: true, // Keep expand button visible to allow collapse\n\t\t};\n\t}\n\n\treturn state;\n};\n"],"mappings":"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"}

package/dist/components/ds-tag-filter/index.cjs

@@ -0,0 +1 @@
+const require_ds_tag_filter = require('./ds-tag-filter.cjs');

package/dist/components/ds-tag-filter/index.d.ts

@@ -0,0 +1,2 @@
+import { DsTagFilterProps, TagFilterItem } from "./ds-tag-filter.types.js";
+import { DsTagFilter } from "./ds-tag-filter.js";

package/dist/components/ds-tag-filter/index.js

@@ -0,0 +1 @@
+import ds_tag_filter_default from "./ds-tag-filter.js";

package/dist/components/ds-tag-filter/utils.cjs

@@ -0,0 +1,54 @@
+
+//#region src/components/ds-tag-filter/utils.ts
+/**
+* Calculate how many tags fit within the available width.
+* Pure function for easy testing.
+*/
+function fitTagsInRow(tagWidths, availableWidth, gap) {
+	let usedWidth = 0;
+	let count = 0;
+	for (const tagWidth of tagWidths) {
+		const widthWithGap = tagWidth + (count > 0 ? gap : 0);
+		if (usedWidth + widthWithGap <= availableWidth) {
+			usedWidth += widthWithGap;
+			count++;
+		} else break;
+	}
+	return {
+		count,
+		usedWidth
+	};
+}
+/**
+* Calculate the available width inside a container, accounting for padding.
+*/
+function getContainerAvailableWidth(container) {
+	const containerRect = container.getBoundingClientRect();
+	const containerStyle = getComputedStyle(container);
+	const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+	const paddingRight = parseFloat(containerStyle.paddingRight) || 0;
+	return containerRect.width - paddingLeft - paddingRight;
+}
+/**
+* Measure all relevant elements (tags, label, buttons) inside the measurement container.
+*/
+function getElementMeasurements(measurementContainer) {
+	const tags = Array.from(measurementContainer.querySelectorAll("[data-measure-tag]"));
+	const label = measurementContainer.querySelector("[data-measure-label]");
+	const clearButton = measurementContainer.querySelector("[data-measure-clear]");
+	const expandTag = measurementContainer.querySelector("[data-measure-expand]");
+	const computedStyle = getComputedStyle(measurementContainer);
+	const gap = parseFloat(computedStyle.gap) || 8;
+	return {
+		tagWidths: tags.map((tag) => tag.getBoundingClientRect().width),
+		labelWidth: label ? label.getBoundingClientRect().width + gap : 0,
+		clearButtonWidth: clearButton ? clearButton.getBoundingClientRect().width + gap : 0,
+		expandTagWidth: expandTag ? expandTag.getBoundingClientRect().width + gap : 100,
+		gap
+	};
+}
+
+//#endregion
+exports.fitTagsInRow = fitTagsInRow;
+exports.getContainerAvailableWidth = getContainerAvailableWidth;
+exports.getElementMeasurements = getElementMeasurements;

package/dist/components/ds-tag-filter/utils.js

@@ -0,0 +1,52 @@
+//#region src/components/ds-tag-filter/utils.ts
+/**
+* Calculate how many tags fit within the available width.
+* Pure function for easy testing.
+*/
+function fitTagsInRow(tagWidths, availableWidth, gap) {
+	let usedWidth = 0;
+	let count = 0;
+	for (const tagWidth of tagWidths) {
+		const widthWithGap = tagWidth + (count > 0 ? gap : 0);
+		if (usedWidth + widthWithGap <= availableWidth) {
+			usedWidth += widthWithGap;
+			count++;
+		} else break;
+	}
+	return {
+		count,
+		usedWidth
+	};
+}
+/**
+* Calculate the available width inside a container, accounting for padding.
+*/
+function getContainerAvailableWidth(container) {
+	const containerRect = container.getBoundingClientRect();
+	const containerStyle = getComputedStyle(container);
+	const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+	const paddingRight = parseFloat(containerStyle.paddingRight) || 0;
+	return containerRect.width - paddingLeft - paddingRight;
+}
+/**
+* Measure all relevant elements (tags, label, buttons) inside the measurement container.
+*/
+function getElementMeasurements(measurementContainer) {
+	const tags = Array.from(measurementContainer.querySelectorAll("[data-measure-tag]"));
+	const label = measurementContainer.querySelector("[data-measure-label]");
+	const clearButton = measurementContainer.querySelector("[data-measure-clear]");
+	const expandTag = measurementContainer.querySelector("[data-measure-expand]");
+	const computedStyle = getComputedStyle(measurementContainer);
+	const gap = parseFloat(computedStyle.gap) || 8;
+	return {
+		tagWidths: tags.map((tag) => tag.getBoundingClientRect().width),
+		labelWidth: label ? label.getBoundingClientRect().width + gap : 0,
+		clearButtonWidth: clearButton ? clearButton.getBoundingClientRect().width + gap : 0,
+		expandTagWidth: expandTag ? expandTag.getBoundingClientRect().width + gap : 100,
+		gap
+	};
+}
+
+//#endregion
+export { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements };
+//# sourceMappingURL=utils.js.map

package/dist/components/ds-tag-filter/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["FitTagsResult","count","usedWidth","ElementMeasurements","tagWidths","labelWidth","clearButtonWidth","expandTagWidth","gap","fitTagsInRow","availableWidth","tagWidth","widthWithGap","getContainerAvailableWidth","container","HTMLDivElement","containerRect","getBoundingClientRect","containerStyle","getComputedStyle","paddingLeft","parseFloat","paddingRight","width","getElementMeasurements","measurementContainer","tags","Array","from","querySelectorAll","label","querySelector","clearButton","expandTag","computedStyle","map","tag"],"sources":["../../../src/components/ds-tag-filter/utils.ts"],"sourcesContent":["export interface FitTagsResult {\n\tcount: number;\n\tusedWidth: number;\n}\n\nexport interface ElementMeasurements {\n\ttagWidths: number[];\n\tlabelWidth: number;\n\tclearButtonWidth: number;\n\texpandTagWidth: number;\n\tgap: number;\n}\n\n/**\n * Calculate how many tags fit within the available width.\n * Pure function for easy testing.\n */\nexport function fitTagsInRow(tagWidths: number[], availableWidth: number, gap: number): FitTagsResult {\n\tlet usedWidth = 0;\n\tlet count = 0;\n\n\tfor (const tagWidth of tagWidths) {\n\t\tconst widthWithGap = tagWidth + (count > 0 ? gap : 0);\n\t\tif (usedWidth + widthWithGap <= availableWidth) {\n\t\t\tusedWidth += widthWithGap;\n\t\t\tcount++;\n\t\t} else {\n\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn { count, usedWidth };\n}\n\n/**\n * Calculate the available width inside a container, accounting for padding.\n */\nexport function getContainerAvailableWidth(container: HTMLDivElement): number {\n\tconst containerRect = container.getBoundingClientRect();\n\tconst containerStyle = getComputedStyle(container);\n\tconst paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;\n\tconst paddingRight = parseFloat(containerStyle.paddingRight) || 0;\n\treturn containerRect.width - paddingLeft - paddingRight;\n}\n\n/**\n * Measure all relevant elements (tags, label, buttons) inside the measurement container.\n */\nexport function getElementMeasurements(measurementContainer: HTMLDivElement): ElementMeasurements {\n\tconst tags = Array.from(measurementContainer.querySelectorAll('[data-measure-tag]'));\n\tconst label = measurementContainer.querySelector('[data-measure-label]');\n\tconst clearButton = measurementContainer.querySelector('[data-measure-clear]');\n\tconst expandTag = measurementContainer.querySelector('[data-measure-expand]');\n\n\tconst computedStyle = getComputedStyle(measurementContainer);\n\tconst gap = parseFloat(computedStyle.gap) || 8;\n\n\tconst tagWidths = tags.map((tag) => tag.getBoundingClientRect().width);\n\tconst labelWidth = label ? label.getBoundingClientRect().width + gap : 0;\n\tconst clearButtonWidth = clearButton ? clearButton.getBoundingClientRect().width + gap : 0;\n\t// Fallback width for expand tag (~100px for \"+99 filters\" text) if measurement fails\n\tconst expandTagWidth = expandTag ? expandTag.getBoundingClientRect().width + gap : 100;\n\n\treturn { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap };\n}\n"],"mappings":";;;;;AAiBA,SAAgBS,aAAaL,WAAqBM,gBAAwBF,KAA4B;CACrG,IAAIN,YAAY;CAChB,IAAID,QAAQ;AAEZ,MAAK,MAAMU,YAAYP,WAAW;EACjC,MAAMQ,eAAeD,YAAYV,QAAQ,IAAIO,MAAM;AACnD,MAAIN,YAAYU,gBAAgBF,gBAAgB;AAC/CR,gBAAaU;AACbX;QAEA;;AAIF,QAAO;EAAEA;EAAOC;EAAW;;;;;AAM5B,SAAgBW,2BAA2BC,WAAmC;CAC7E,MAAME,gBAAgBF,UAAUG,uBAAuB;CACvD,MAAMC,iBAAiBC,iBAAiBL,UAAU;CAClD,MAAMM,cAAcC,WAAWH,eAAeE,YAAY,IAAI;CAC9D,MAAME,eAAeD,WAAWH,eAAeI,aAAa,IAAI;AAChE,QAAON,cAAcO,QAAQH,cAAcE;;;;;AAM5C,SAAgBE,uBAAuBC,sBAA2D;CACjG,MAAMC,OAAOC,MAAMC,KAAKH,qBAAqBI,iBAAiB,qBAAqB,CAAC;CACpF,MAAMC,QAAQL,qBAAqBM,cAAc,uBAAuB;CACxE,MAAMC,cAAcP,qBAAqBM,cAAc,uBAAuB;CAC9E,MAAME,YAAYR,qBAAqBM,cAAc,wBAAwB;CAE7E,MAAMG,gBAAgBf,iBAAiBM,qBAAqB;CAC5D,MAAMjB,MAAMa,WAAWa,cAAc1B,IAAI,IAAI;AAQ7C,QAAO;EAAEJ,WANSsB,KAAKS,KAAKC,QAAQA,IAAInB,uBAAuB,CAACM,MAAM;EAMlDlB,YALDyB,QAAQA,MAAMb,uBAAuB,CAACM,QAAQf,MAAM;EAKvCF,kBAJP0B,cAAcA,YAAYf,uBAAuB,CAACM,QAAQf,MAAM;EAIvCD,gBAF3B0B,YAAYA,UAAUhB,uBAAuB,CAACM,QAAQf,MAAM;EAEjBA;EAAK"}

package/dist/components/ds-text-input/ds-text-input.js

@@ -2,7 +2,7 @@ import ds_text_input_module_default from "./ds-text-input.module.js";
 import { c } from "react/compiler-runtime";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { Fragment as Fragment$1 } from "react";
 
 //#region src/components/ds-text-input/ds-text-input.tsx
 const DsTextInput = (t0) => {
@@ -18,7 +18,7 @@ const DsTextInput = (t0) => {
 	} else t5 = $[1];
 	const style = t5;
 	const disabled = t4 === void 0 ? false : t4;
-	const InputWrapper = slots?.inputWrapper ?? Fragment;
+	const InputWrapper = slots?.inputWrapper ?? Fragment$1;
 	const t6 = size === "small";
 	const t7 = size === "default";
 	let t8;

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

@@ -0,0 +1,192 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon = require('../ds-icon/ds-icon.cjs');
+require('../ds-icon/index.cjs');
+const require_ds_typography = require('../ds-typography/ds-typography.cjs');
+require('../ds-typography/index.cjs');
+const require_ds_toggle_module = require('./ds-toggle.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_switch = require("@ark-ui/react/switch");
+
+//#region src/components/ds-toggle/ds-toggle.tsx
+/**
+* Design system Toggle component
+*/
+const DsToggle = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(48);
+	let checked;
+	let children;
+	let className;
+	let label;
+	let labelInfo;
+	let name;
+	let onChange;
+	let onValueChange;
+	let ref;
+	let rest;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({ref, label, name, labelInfo, className, style: t1, onChange, onValueChange, size: t2, children, checked, ...rest} = t0);
+		$[0] = t0;
+		$[1] = checked;
+		$[2] = children;
+		$[3] = className;
+		$[4] = label;
+		$[5] = labelInfo;
+		$[6] = name;
+		$[7] = onChange;
+		$[8] = onValueChange;
+		$[9] = ref;
+		$[10] = rest;
+		$[11] = t1;
+		$[12] = t2;
+	} else {
+		checked = $[1];
+		children = $[2];
+		className = $[3];
+		label = $[4];
+		labelInfo = $[5];
+		name = $[6];
+		onChange = $[7];
+		onValueChange = $[8];
+		ref = $[9];
+		rest = $[10];
+		t1 = $[11];
+		t2 = $[12];
+	}
+	let t3;
+	if ($[13] !== t1) {
+		t3 = t1 === void 0 ? {} : t1;
+		$[13] = t1;
+		$[14] = t3;
+	} else t3 = $[14];
+	const style = t3;
+	const isSmall = (t2 === void 0 ? "default" : t2) === "small";
+	const iconSize = isSmall ? "tiny" : "small";
+	let t4;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (0, classnames.default)(require_ds_toggle_module.default.icon, require_ds_toggle_module.default.iconCheck);
+		$[15] = t4;
+	} else t4 = $[15];
+	const checkIconClass = t4;
+	let t5;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = (0, classnames.default)(require_ds_toggle_module.default.icon, require_ds_toggle_module.default.iconClose);
+		$[16] = t5;
+	} else t5 = $[16];
+	const closeIconClass = t5;
+	let t6;
+	if ($[17] !== className || $[18] !== isSmall) {
+		t6 = (0, classnames.default)(require_ds_toggle_module.default.root, { [require_ds_toggle_module.default.small]: isSmall }, className);
+		$[17] = className;
+		$[18] = isSmall;
+		$[19] = t6;
+	} else t6 = $[19];
+	const rootClass = t6;
+	let t7;
+	if ($[20] !== onValueChange) {
+		t7 = (e) => {
+			onValueChange?.(e.checked);
+		};
+		$[20] = onValueChange;
+		$[21] = t7;
+	} else t7 = $[21];
+	const handleCheckedChange = t7;
+	const t8 = ref;
+	let t9;
+	if ($[22] !== iconSize) {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+			icon: "check",
+			size: iconSize,
+			className: checkIconClass
+		});
+		$[22] = iconSize;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_switch.Switch.Thumb, {});
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== iconSize) {
+		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+			icon: "close",
+			size: iconSize,
+			className: closeIconClass
+		});
+		$[25] = iconSize;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== t11 || $[28] !== t9) {
+		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_switch.Switch.Control, { children: [
+			t9,
+			t10,
+			t11
+		] });
+		$[27] = t11;
+		$[28] = t9;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== children || $[31] !== isSmall || $[32] !== label || $[33] !== labelInfo) {
+		t13 = label ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_switch.Switch.Label, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: isSmall ? "body-xs-md" : "body-sm-md",
+			children: label
+		}), !!labelInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "body-xs-reg",
+			className: require_ds_toggle_module.default.labelInfo,
+			children: labelInfo
+		})] }) : children;
+		$[30] = children;
+		$[31] = isSmall;
+		$[32] = label;
+		$[33] = labelInfo;
+		$[34] = t13;
+	} else t13 = $[34];
+	let t14;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_switch.Switch.HiddenInput, {});
+		$[35] = t14;
+	} else t14 = $[35];
+	let t15;
+	if ($[36] !== checked || $[37] !== handleCheckedChange || $[38] !== label || $[39] !== name || $[40] !== onChange || $[41] !== rest || $[42] !== rootClass || $[43] !== style || $[44] !== t12 || $[45] !== t13 || $[46] !== t8) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_switch.Switch.Root, {
+			ref: t8,
+			style,
+			className: rootClass,
+			label,
+			checked,
+			name,
+			onCheckedChange: handleCheckedChange,
+			onClick: onChange,
+			...rest,
+			children: [
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[36] = checked;
+		$[37] = handleCheckedChange;
+		$[38] = label;
+		$[39] = name;
+		$[40] = onChange;
+		$[41] = rest;
+		$[42] = rootClass;
+		$[43] = style;
+		$[44] = t12;
+		$[45] = t13;
+		$[46] = t8;
+		$[47] = t15;
+	} else t15 = $[47];
+	return t15;
+};
+var ds_toggle_default = DsToggle;
+
+//#endregion
+exports.default = ds_toggle_default;

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

@@ -0,0 +1,24 @@
+import { DsToggleProps } from "./ds-toggle.types.cjs";
+import * as react_jsx_runtime49 from "react/jsx-runtime";
+
+//#region src/components/ds-toggle/ds-toggle.d.ts
+/**
+ * Design system Toggle component
+ */
+declare const DsToggle: ({
+  ref,
+  label,
+  name,
+  labelInfo,
+  className,
+  style,
+  onChange,
+  onValueChange,
+  size,
+  children,
+  checked,
+  ...rest
+}: DsToggleProps) => react_jsx_runtime49.JSX.Element;
+//#endregion
+export { DsToggle };
+//# sourceMappingURL=ds-toggle.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-toggle.d.cts","names":[],"sources":["../../../src/components/ds-toggle/ds-toggle.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAEuD,cASjD,QAgEL,EAAA,CAAA;EAAA,GAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,aAAA;EAAA,IAAA;EAAA,QAAA;EAAA,OAAA;EAAA,GAAA;AAAA,CAAA,EAnDE,aAmDF,EAAA,GAnDe,mBAAA,CAAA,GAAA,CAAA,OAmDf"}

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

@@ -0,0 +1,24 @@
+import { DsToggleProps } from "./ds-toggle.types.js";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
+
+//#region src/components/ds-toggle/ds-toggle.d.ts
+/**
+ * Design system Toggle component
+ */
+declare const DsToggle: ({
+  ref,
+  label,
+  name,
+  labelInfo,
+  className,
+  style,
+  onChange,
+  onValueChange,
+  size,
+  children,
+  checked,
+  ...rest
+}: DsToggleProps) => react_jsx_runtime39.JSX.Element;
+//#endregion
+export { DsToggle };
+//# sourceMappingURL=ds-toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-toggle.d.ts","names":[],"sources":["../../../src/components/ds-toggle/ds-toggle.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAEuD,cASjD,QAgEL,EAAA,CAAA;EAAA,GAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,aAAA;EAAA,IAAA;EAAA,QAAA;EAAA,OAAA;EAAA,GAAA;AAAA,CAAA,EAnDE,aAmDF,EAAA,GAnDe,mBAAA,CAAA,GAAA,CAAA,OAmDf"}