@drivenets/design-system 0.0.2 → 0.0.4

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

@@ -0,0 +1,106 @@
+import ds_icon_default from "../ds-icon/ds-icon.js";
+import "../ds-icon/index.js";
+import ds_typography_default from "../ds-typography/ds-typography.js";
+import "../ds-typography/index.js";
+import ds_button_default from "../ds-button/ds-button.js";
+import "../ds-button/index.js";
+import ds_checkbox_default from "../ds-checkbox/ds-checkbox.js";
+import "../ds-checkbox/index.js";
+import ds_chip_default from "../ds-chip/ds-chip.js";
+import ds_chip_group_module_default from "./ds-chip-group.module.js";
+import { useChipRowCalculation } from "./hooks/use-chip-row-calculation.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { Root } from "@radix-ui/react-visually-hidden";
+
+//#region src/components/ds-chip-group/ds-chip-group.tsx
+/**
+* Design system chip group component displays a collection of chips with overflow handling
+* Used for displaying filters, selected items, tags, etc.
+*/
+const DsChipGroup = ({ items, label = "Filtered by:", onClearAll, onItemDelete, onItemSelect, className, style }) => {
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const showAllChipsRef = useRef(null);
+	const chipsWrapperRef = useRef(null);
+	const visibleCount = useChipRowCalculation({
+		chipsWrapperRef,
+		totalFilters: items.length
+	});
+	if (items.length === 0) return null;
+	const hiddenCount = items.length - visibleCount;
+	const showExpandButton = hiddenCount > 0;
+	const handleOpenDialog = () => {
+		setDialogOpen(true);
+	};
+	let dialogStyle = {};
+	if (showExpandButton && showAllChipsRef.current) {
+		const rect = showAllChipsRef.current.getBoundingClientRect();
+		dialogStyle = {
+			position: "fixed",
+			top: rect.bottom + 4,
+			left: rect.left
+		};
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(ds_chip_group_module_default.container, className),
+		style,
+		children: [
+			label && /* @__PURE__ */ jsx(ds_typography_default, {
+				variant: "body-sm-reg",
+				className: ds_chip_group_module_default.label,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: chipsWrapperRef,
+				className: ds_chip_group_module_default.chipsWrapper,
+				children: [items.map((item, index) => /* @__PURE__ */ jsx(ds_chip_default, {
+					label: item.label,
+					selected: item.selected,
+					onClick: () => onItemSelect?.(item),
+					onDelete: () => onItemDelete?.(item),
+					className: classNames({ [ds_chip_group_module_default.hidden]: index >= visibleCount })
+				}, item.id)), showExpandButton && /* @__PURE__ */ jsx(ds_chip_default, {
+					ref: showAllChipsRef,
+					label: `+${String(hiddenCount)} ${hiddenCount === 1 ? "item" : "items"} show all`,
+					onClick: handleOpenDialog,
+					className: ds_chip_group_module_default.expandChip
+				})]
+			}),
+			onClearAll && /* @__PURE__ */ jsxs(ds_button_default, {
+				design: "v1.2",
+				buttonType: "tertiary",
+				variant: "ghost",
+				size: "small",
+				onClick: onClearAll,
+				children: [/* @__PURE__ */ jsx(ds_icon_default, { icon: "close" }), "Clear all"]
+			}),
+			/* @__PURE__ */ jsxs(RadixDialog.Root, {
+				open: dialogOpen,
+				onOpenChange: setDialogOpen,
+				children: [/* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsx(RadixDialog.Title, {}) }), /* @__PURE__ */ jsx(RadixDialog.Portal, { children: /* @__PURE__ */ jsx(RadixDialog.Content, {
+					style: dialogStyle,
+					className: ds_chip_group_module_default.dialog,
+					children: /* @__PURE__ */ jsx("div", {
+						className: ds_chip_group_module_default.dialogContent,
+						children: items.filter((item_0, index_0) => index_0 >= visibleCount).map((item_1) => /* @__PURE__ */ jsx("div", {
+							className: ds_chip_group_module_default.itemCheckbox,
+							children: /* @__PURE__ */ jsx(ds_checkbox_default, {
+								id: `chip-${item_1.id}`,
+								checked: item_1.selected,
+								onCheckedChange: () => onItemSelect?.(item_1),
+								label: item_1.label
+							})
+						}, item_1.id))
+					})
+				}) })]
+			})
+		]
+	});
+};
+var ds_chip_group_default = DsChipGroup;
+
+//#endregion
+export { ds_chip_group_default as default };
+//# sourceMappingURL=ds-chip-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip-group.js","names":["React","useRef","useState","RadixDialog","Root","VisuallyHidden","classNames","styles","DsChipGroupProps","useChipRowCalculation","DsTypography","DsChip","DsCheckbox","DsButton","DsIcon","DsChipGroup","FC","items","label","onClearAll","onItemDelete","onItemSelect","className","style","dialogOpen","setDialogOpen","showAllChipsRef","HTMLDivElement","chipsWrapperRef","visibleCount","totalFilters","length","hiddenCount","showExpandButton","handleOpenDialog","dialogStyle","CSSProperties","current","rect","getBoundingClientRect","position","top","bottom","left","container","chipsWrapper","map","item","index","id","selected","hidden","String","expandChip","dialog","dialogContent","filter","itemCheckbox"],"sources":["../../../src/components/ds-chip-group/ds-chip-group.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { Root as VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport classNames from 'classnames';\nimport styles from './ds-chip-group.module.scss';\nimport type { DsChipGroupProps } from './ds-chip-group.types';\nimport { useChipRowCalculation } from './hooks/use-chip-row-calculation';\nimport { DsTypography } from '../ds-typography';\nimport DsChip from '../ds-chip/ds-chip';\nimport { DsCheckbox } from '../ds-checkbox';\nimport { DsButton } from '../ds-button';\nimport { DsIcon } from '../ds-icon';\n\n/**\n * Design system chip group component displays a collection of chips with overflow handling\n * Used for displaying filters, selected items, tags, etc.\n */\nconst DsChipGroup: React.FC<DsChipGroupProps> = ({\n\titems,\n\tlabel = 'Filtered by:',\n\tonClearAll,\n\tonItemDelete,\n\tonItemSelect,\n\tclassName,\n\tstyle,\n}) => {\n\tconst [dialogOpen, setDialogOpen] = useState(false);\n\tconst showAllChipsRef = useRef<HTMLDivElement>(null);\n\tconst chipsWrapperRef = useRef<HTMLDivElement>(null);\n\tconst visibleCount = useChipRowCalculation({\n\t\tchipsWrapperRef,\n\t\ttotalFilters: items.length,\n\t});\n\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst hiddenCount = items.length - visibleCount;\n\tconst showExpandButton = hiddenCount > 0;\n\n\tconst handleOpenDialog = () => {\n\t\tsetDialogOpen(true);\n\t};\n\n\tlet dialogStyle: React.CSSProperties = {};\n\tif (showExpandButton && showAllChipsRef.current) {\n\t\tconst rect = showAllChipsRef.current.getBoundingClientRect();\n\t\tdialogStyle = {\n\t\t\tposition: 'fixed',\n\t\t\ttop: rect.bottom + 4,\n\t\t\tleft: rect.left,\n\t\t};\n\t}\n\n\treturn (\n\t\t<div className={classNames(styles.container, className)} style={style}>\n\t\t\t{label && (\n\t\t\t\t<DsTypography variant=\"body-sm-reg\" className={styles.label}>\n\t\t\t\t\t{label}\n\t\t\t\t</DsTypography>\n\t\t\t)}\n\n\t\t\t<div ref={chipsWrapperRef} className={styles.chipsWrapper}>\n\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t<DsChip\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tlabel={item.label}\n\t\t\t\t\t\tselected={item.selected}\n\t\t\t\t\t\tonClick={() => onItemSelect?.(item)}\n\t\t\t\t\t\tonDelete={() => onItemDelete?.(item)}\n\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t[styles.hidden]: index >= visibleCount,\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t\t{showExpandButton && (\n\t\t\t\t\t<DsChip\n\t\t\t\t\t\tref={showAllChipsRef}\n\t\t\t\t\t\tlabel={`+${String(hiddenCount)} ${hiddenCount === 1 ? 'item' : 'items'} show all`}\n\t\t\t\t\t\tonClick={handleOpenDialog}\n\t\t\t\t\t\tclassName={styles.expandChip}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{onClearAll && (\n\t\t\t\t<DsButton design=\"v1.2\" buttonType=\"tertiary\" variant=\"ghost\" size=\"small\" onClick={onClearAll}>\n\t\t\t\t\t<DsIcon icon=\"close\" />\n\t\t\t\t\tClear all\n\t\t\t\t</DsButton>\n\t\t\t)}\n\n\t\t\t<RadixDialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<RadixDialog.Title />\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<RadixDialog.Portal>\n\t\t\t\t\t<RadixDialog.Content style={dialogStyle} className={styles.dialog}>\n\t\t\t\t\t\t<div className={styles.dialogContent}>\n\t\t\t\t\t\t\t{items\n\t\t\t\t\t\t\t\t.filter((item, index) => index >= visibleCount)\n\t\t\t\t\t\t\t\t.map((item) => (\n\t\t\t\t\t\t\t\t\t<div key={item.id} className={styles.itemCheckbox}>\n\t\t\t\t\t\t\t\t\t\t<DsCheckbox\n\t\t\t\t\t\t\t\t\t\t\tid={`chip-${item.id}`}\n\t\t\t\t\t\t\t\t\t\t\tchecked={item.selected}\n\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={() => onItemSelect?.(item)}\n\t\t\t\t\t\t\t\t\t\t\tlabel={item.label}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</RadixDialog.Content>\n\t\t\t\t</RadixDialog.Portal>\n\t\t\t</RadixDialog.Root>\n\t\t</div>\n\t);\n};\n\nexport default DsChipGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMe,eAA2C,EAChDE,OACAC,QAAQ,gBACRC,YACAC,cACAC,cACAC,WACAC,YACK;CACL,MAAM,CAACC,YAAYC,iBAAiBvB,SAAS,MAAM;CACnD,MAAMwB,kBAAkBzB,OAAuB,KAAK;CACpD,MAAM2B,kBAAkB3B,OAAuB,KAAK;CACpD,MAAM4B,eAAepB,sBAAsB;EAC1CmB;EACAE,cAAcb,MAAMc;EACpB,CAAC;AAEF,KAAId,MAAMc,WAAW,EACpB,QAAO;CAGR,MAAMC,cAAcf,MAAMc,SAASF;CACnC,MAAMI,mBAAmBD,cAAc;CAEvC,MAAME,yBAAyB;AAC9BT,gBAAc,KAAK;;CAGpB,IAAIU,cAAmC,EAAE;AACzC,KAAIF,oBAAoBP,gBAAgBW,SAAS;EAChD,MAAMC,OAAOZ,gBAAgBW,QAAQE,uBAAuB;AAC5DJ,gBAAc;GACbK,UAAU;GACVC,KAAKH,KAAKI,SAAS;GACnBC,MAAML,KAAKK;GACX;;AAGF,QACC,qBAAC;EAAI,WAAWrC,WAAWC,6BAAOqC,WAAWtB,UAAU;EAASC;;GAC9DL,SACA,oBAAC;IAAa,SAAQ;IAAc,WAAWX,6BAAOW;cACpDA;KAEF;GAED,qBAAC;IAAI,KAAKU;IAAiB,WAAWrB,6BAAOsC;eAC3C5B,MAAM6B,KAAKC,MAAMC,UACjB,oBAAC;KAEA,OAAOD,KAAK7B;KACZ,UAAU6B,KAAKG;KACf,eAAe7B,eAAe0B,KAAK;KACnC,gBAAgB3B,eAAe2B,KAAK;KACpC,WAAWzC,WAAW,GACpBC,6BAAO4C,SAASH,SAASnB,cAC1B,CAAC;OAPGkB,KAAKE,GASX,CAAC,EACDhB,oBACA,oBAAC;KACA,KAAKP;KACL,OAAO,IAAI0B,OAAOpB,YAAY,CAAA,GAAIA,gBAAgB,IAAI,SAAS,QAAO;KACtE,SAASE;KACT,WAAW3B,6BAAO8C;MAEnB;KACG;GAEJlC,cACA,qBAAC;IAAS,QAAO;IAAO,YAAW;IAAW,SAAQ;IAAQ,MAAK;IAAQ,SAASA;eACnF,oBAAC,mBAAO,MAAK,UAAO;KAGrB;GAED,qBAAC,YAAY;IAAK,MAAMK;IAAY,cAAcC;eACjD,oBAAC,kBACA,oBAAC,YAAY,UAAK,GACH,EAChB,oBAAC,YAAY,oBACZ,oBAAC,YAAY;KAAQ,OAAOU;KAAa,WAAW5B,6BAAO+C;eAC1D,oBAAC;MAAI,WAAW/C,6BAAOgD;gBACrBtC,MACCuC,QAAQT,QAAMC,YAAUA,WAASnB,aAAa,CAC9CiB,KAAKC,WACL,oBAAC;OAAkB,WAAWxC,6BAAOkD;iBACpC,oBAAC;QACA,IAAI,QAAQV,OAAKE;QACjB,SAASF,OAAKG;QACd,uBAAuB7B,eAAe0B,OAAK;QAC3C,OAAOA,OAAK7B;SAAM;SALV6B,OAAKE,GAQf,CAAC;OACC;MACe,GACF;KACH;;GACb;;AAIR,4BAAelC"}

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

@@ -0,0 +1,15 @@
+
+//#region src/components/ds-chip-group/ds-chip-group.module.scss
+var ds_chip_group_module_default = {
+	"container": "_container_19chu_1",
+	"chipsWrapper": "_chipsWrapper_19chu_1",
+	"hidden": "_hidden_19chu_1",
+	"label": "_label_19chu_1",
+	"expandChip": "_expandChip_19chu_1",
+	"dialog": "_dialog_19chu_1",
+	"dialogContent": "_dialogContent_19chu_1",
+	"itemCheckbox": "_itemCheckbox_19chu_1"
+};
+
+//#endregion
+exports.default = ds_chip_group_module_default;

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

@@ -0,0 +1,15 @@
+//#region src/components/ds-chip-group/ds-chip-group.module.scss
+var ds_chip_group_module_default = {
+	"container": "_container_19chu_1",
+	"chipsWrapper": "_chipsWrapper_19chu_1",
+	"hidden": "_hidden_19chu_1",
+	"label": "_label_19chu_1",
+	"expandChip": "_expandChip_19chu_1",
+	"dialog": "_dialog_19chu_1",
+	"dialogContent": "_dialogContent_19chu_1",
+	"itemCheckbox": "_itemCheckbox_19chu_1"
+};
+
+//#endregion
+export { ds_chip_group_module_default as default };
+//# sourceMappingURL=ds-chip-group.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip-group.module.js","names":[],"sources":["../../../src/components/ds-chip-group/ds-chip-group.module.scss"],"sourcesContent":[".container {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-standard);\n\tpadding: var(--spacing-xs) var(--spacing-standard);\n\tbackground: var(--color-background-selected-weak);\n\tborder: 1px solid var(--color-outline-weak);\n\tborder-radius: var(--spacing-3xs);\n}\n\n.chipsWrapper {\n\tdisplay: flex;\n\tflex: 1;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--spacing-xs);\n\tmax-height: var(--spacing-3xl);\n\toverflow: hidden;\n\n\t.hidden {\n\t\tvisibility: hidden;\n\t\tposition: absolute;\n\t\tpointer-events: none;\n\t}\n}\n\n.label {\n\tcolor: var(--color-font-secondary);\n\twhite-space: nowrap;\n}\n\n.expandChip {\n\tcursor: pointer;\n}\n\n.dialog {\n\tposition: fixed;\n\tbackground: var(--color-background);\n\tborder: 1px solid var(--color-border-secondary);\n\tborder-radius: var(--spacing-3xs);\n\tbox-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);\n\tpadding: var(--spacing-xs);\n\tmax-height: 80vh;\n\toverflow-y: auto;\n\tz-index: 1001;\n\tmin-width: 300px;\n\tmax-width: 500px;\n}\n\n.dialogContent {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n}\n\n.itemCheckbox {\n\tdisplay: flex;\n\talign-items: center;\n}\n"],"mappings":""}

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

@@ -0,0 +1,55 @@
+import { CSSProperties } from "react";
+
+//#region src/components/ds-chip-group/ds-chip-group.types.d.ts
+interface ChipItem {
+  /**
+   * Unique identifier for the chip
+   */
+  id: string;
+  /**
+   * The label text to display in the chip
+   */
+  label: string;
+  /**
+   * Additional metadata to store with the chip
+   */
+  metadata?: Record<string, unknown>;
+  /**
+   * Whether the chip is selected/checked
+   */
+  selected?: boolean;
+}
+interface DsChipGroupProps {
+  /**
+   * Array of chip items to display
+   */
+  items: ChipItem[];
+  /**
+   * Label text to display before the chips (e.g., "Filtered by:")
+   * @default "Filtered by:"
+   */
+  label?: string;
+  /**
+   * Callback when "Clear all" is clicked
+   */
+  onClearAll?: () => void;
+  /**
+   * Callback when a chip is deleted/unchecked
+   */
+  onItemDelete?: (item: ChipItem) => void;
+  /**
+   * Callback when a chip is selected
+   */
+  onItemSelect?: (item: ChipItem) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: CSSProperties;
+}
+//#endregion
+export { ChipItem, DsChipGroupProps };
+//# sourceMappingURL=ds-chip-group.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip-group.types.d.cts","names":[],"sources":["../../../src/components/ds-chip-group/ds-chip-group.types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,QAAA;;AAAjB;AAmBA;EAIQ,EAAA,EAAA,MAAA;EAae;;;EAYD,KAAA,EAAA,MAAA;;;;aApCV;;;;;;UAOK,gBAAA;;;;SAIT;;;;;;;;;;;;;wBAae;;;;wBAIA;;;;;;;;UAQd"}

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

@@ -0,0 +1,55 @@
+import { CSSProperties } from "react";
+
+//#region src/components/ds-chip-group/ds-chip-group.types.d.ts
+interface ChipItem {
+  /**
+   * Unique identifier for the chip
+   */
+  id: string;
+  /**
+   * The label text to display in the chip
+   */
+  label: string;
+  /**
+   * Additional metadata to store with the chip
+   */
+  metadata?: Record<string, unknown>;
+  /**
+   * Whether the chip is selected/checked
+   */
+  selected?: boolean;
+}
+interface DsChipGroupProps {
+  /**
+   * Array of chip items to display
+   */
+  items: ChipItem[];
+  /**
+   * Label text to display before the chips (e.g., "Filtered by:")
+   * @default "Filtered by:"
+   */
+  label?: string;
+  /**
+   * Callback when "Clear all" is clicked
+   */
+  onClearAll?: () => void;
+  /**
+   * Callback when a chip is deleted/unchecked
+   */
+  onItemDelete?: (item: ChipItem) => void;
+  /**
+   * Callback when a chip is selected
+   */
+  onItemSelect?: (item: ChipItem) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: CSSProperties;
+}
+//#endregion
+export { ChipItem, DsChipGroupProps };
+//# sourceMappingURL=ds-chip-group.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip-group.types.d.ts","names":[],"sources":["../../../src/components/ds-chip-group/ds-chip-group.types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,QAAA;;AAAjB;AAmBA;EAIQ,EAAA,EAAA,MAAA;EAae;;;EAYD,KAAA,EAAA,MAAA;;;;aApCV;;;;;;UAOK,gBAAA;;;;SAIT;;;;;;;;;;;;;wBAae;;;;wBAIA;;;;;;;;UAQd"}

package/dist/components/ds-chip-group/hooks/use-chip-row-calculation.cjs

@@ -0,0 +1,51 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/ds-chip-group/hooks/use-chip-row-calculation.ts
+/**
+* Custom hook to calculate how many chips can fit in 2 rows
+* Uses a simple approach: render all, measure positions, hide overflow
+*/
+const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }) => {
+	const [visibleCount, setVisibleCount] = (0, react.useState)(totalFilters);
+	(0, react.useLayoutEffect)(() => {
+		const calculateVisibleChips = () => {
+			if (!chipsWrapperRef.current) return;
+			const wrapper = chipsWrapperRef.current;
+			const children = Array.from(wrapper.children);
+			if (children.length === 0) return;
+			const cs = getComputedStyle(wrapper);
+			const gap = parseFloat(cs.columnGap || cs.gap || "0") || 8;
+			let index;
+			let line = 0;
+			let total = 0;
+			for (index = 0; index < children.length; index++) {
+				const current = children[index];
+				const next = (current.offsetWidth === wrapper.clientWidth ? 0 : gap) + current.offsetWidth;
+				if (total + next >= wrapper.clientWidth) {
+					line++;
+					if (line >= 2) break;
+					total = next;
+				} else total += next;
+			}
+			setVisibleCount(Math.max(1, line < 2 ? index : index - 1));
+		};
+		const rafId = requestAnimationFrame(() => {
+			calculateVisibleChips();
+		});
+		const resizeObserver = new ResizeObserver(() => {
+			requestAnimationFrame(() => {
+				calculateVisibleChips();
+			});
+		});
+		if (chipsWrapperRef.current) resizeObserver.observe(chipsWrapperRef.current);
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+	}, [chipsWrapperRef, totalFilters]);
+	return visibleCount;
+};
+
+//#endregion
+exports.useChipRowCalculation = useChipRowCalculation;

package/dist/components/ds-chip-group/hooks/use-chip-row-calculation.js

@@ -0,0 +1,51 @@
+import { useLayoutEffect, useState } from "react";
+
+//#region src/components/ds-chip-group/hooks/use-chip-row-calculation.ts
+/**
+* Custom hook to calculate how many chips can fit in 2 rows
+* Uses a simple approach: render all, measure positions, hide overflow
+*/
+const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }) => {
+	const [visibleCount, setVisibleCount] = useState(totalFilters);
+	useLayoutEffect(() => {
+		const calculateVisibleChips = () => {
+			if (!chipsWrapperRef.current) return;
+			const wrapper = chipsWrapperRef.current;
+			const children = Array.from(wrapper.children);
+			if (children.length === 0) return;
+			const cs = getComputedStyle(wrapper);
+			const gap = parseFloat(cs.columnGap || cs.gap || "0") || 8;
+			let index;
+			let line = 0;
+			let total = 0;
+			for (index = 0; index < children.length; index++) {
+				const current = children[index];
+				const next = (current.offsetWidth === wrapper.clientWidth ? 0 : gap) + current.offsetWidth;
+				if (total + next >= wrapper.clientWidth) {
+					line++;
+					if (line >= 2) break;
+					total = next;
+				} else total += next;
+			}
+			setVisibleCount(Math.max(1, line < 2 ? index : index - 1));
+		};
+		const rafId = requestAnimationFrame(() => {
+			calculateVisibleChips();
+		});
+		const resizeObserver = new ResizeObserver(() => {
+			requestAnimationFrame(() => {
+				calculateVisibleChips();
+			});
+		});
+		if (chipsWrapperRef.current) resizeObserver.observe(chipsWrapperRef.current);
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+	}, [chipsWrapperRef, totalFilters]);
+	return visibleCount;
+};
+
+//#endregion
+export { useChipRowCalculation };
+//# sourceMappingURL=use-chip-row-calculation.js.map

package/dist/components/ds-chip-group/hooks/use-chip-row-calculation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chip-row-calculation.js","names":["RefObject","useLayoutEffect","useState","UseChipRowCalculationProps","chipsWrapperRef","HTMLDivElement","totalFilters","useChipRowCalculation","visibleCount","setVisibleCount","calculateVisibleChips","current","wrapper","children","Array","from","HTMLElement","length","cs","getComputedStyle","gap","parseFloat","columnGap","index","line","total","offset","offsetWidth","clientWidth","next","result","Math","max","rafId","requestAnimationFrame","resizeObserver","ResizeObserver","observe","cancelAnimationFrame","disconnect"],"sources":["../../../../src/components/ds-chip-group/hooks/use-chip-row-calculation.ts"],"sourcesContent":["import { type RefObject, useLayoutEffect, useState } from 'react';\n\ninterface UseChipRowCalculationProps {\n\tchipsWrapperRef: RefObject<HTMLDivElement | null>;\n\ttotalFilters: number;\n}\n\n/**\n * Custom hook to calculate how many chips can fit in 2 rows\n * Uses a simple approach: render all, measure positions, hide overflow\n */\nexport const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }: UseChipRowCalculationProps) => {\n\tconst [visibleCount, setVisibleCount] = useState(totalFilters);\n\n\tuseLayoutEffect(() => {\n\t\tconst calculateVisibleChips = () => {\n\t\t\tif (!chipsWrapperRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst wrapper = chipsWrapperRef.current;\n\t\t\tconst children = Array.from(wrapper.children) as HTMLElement[];\n\n\t\t\tif (children.length === 0) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst cs = getComputedStyle(wrapper);\n\t\t\tconst gap = parseFloat(cs.columnGap || cs.gap || '0') || 8;\n\t\t\tlet index;\n\t\t\tlet line = 0;\n\t\t\tlet total = 0;\n\n\t\t\tfor (index = 0; index < children.length; index++) {\n\t\t\t\tconst current = children[index];\n\t\t\t\tconst offset = current.offsetWidth === wrapper.clientWidth ? 0 : gap;\n\t\t\t\tconst next = offset + current.offsetWidth;\n\n\t\t\t\tif (total + next >= wrapper.clientWidth) {\n\t\t\t\t\tline++;\n\t\t\t\t\tif (line >= 2) {\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\ttotal = next;\n\t\t\t\t} else {\n\t\t\t\t\ttotal += next;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst result = Math.max(1, line < 2 ? index : index - 1);\n\t\t\tsetVisibleCount(result);\n\t\t};\n\n\t\t// Use requestAnimationFrame to ensure DOM is fully laid out\n\t\tconst rafId = requestAnimationFrame(() => {\n\t\t\tcalculateVisibleChips();\n\t\t});\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tcalculateVisibleChips();\n\t\t\t});\n\t\t});\n\n\t\tif (chipsWrapperRef.current) {\n\t\t\tresizeObserver.observe(chipsWrapperRef.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [chipsWrapperRef, totalFilters]);\n\n\treturn visibleCount;\n};\n"],"mappings":";;;;;;;AAWA,MAAaO,yBAAyB,EAAEH,iBAAiBE,mBAA+C;CACvG,MAAM,CAACE,cAAcC,mBAAmBP,SAASI,aAAa;AAE9DL,uBAAsB;EACrB,MAAMS,8BAA8B;AACnC,OAAI,CAACN,gBAAgBO,QACpB;GAGD,MAAMC,UAAUR,gBAAgBO;GAChC,MAAME,WAAWC,MAAMC,KAAKH,QAAQC,SAAS;AAE7C,OAAIA,SAASI,WAAW,EACvB;GAGD,MAAMC,KAAKC,iBAAiBP,QAAQ;GACpC,MAAMQ,MAAMC,WAAWH,GAAGI,aAAaJ,GAAGE,OAAO,IAAI,IAAI;GACzD,IAAIG;GACJ,IAAIC,OAAO;GACX,IAAIC,QAAQ;AAEZ,QAAKF,QAAQ,GAAGA,QAAQV,SAASI,QAAQM,SAAS;IACjD,MAAMZ,UAAUE,SAASU;IAEzB,MAAMM,QADSlB,QAAQgB,gBAAgBf,QAAQgB,cAAc,IAAIR,OAC3CT,QAAQgB;AAE9B,QAAIF,QAAQI,QAAQjB,QAAQgB,aAAa;AACxCJ;AACA,SAAIA,QAAQ,EACX;AAEDC,aAAQI;UAERJ,UAASI;;AAKXpB,mBADesB,KAAKC,IAAI,GAAGR,OAAO,IAAID,QAAQA,QAAQ,EAAE,CACjC;;EAIxB,MAAMU,QAAQC,4BAA4B;AACzCxB,0BAAuB;IACtB;EAEF,MAAMyB,iBAAiB,IAAIC,qBAAqB;AAC/CF,+BAA4B;AAC3BxB,2BAAuB;KACtB;IACD;AAEF,MAAIN,gBAAgBO,QACnBwB,gBAAeE,QAAQjC,gBAAgBO,QAAQ;AAGhD,eAAa;AACZ2B,wBAAqBL,MAAM;AAC3BE,kBAAeI,YAAY;;IAE1B,CAACnC,iBAAiBE,aAAa,CAAC;AAEnC,QAAOE"}

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

@@ -0,0 +1 @@
+const require_ds_chip_group = require('./ds-chip-group.cjs');

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

@@ -0,0 +1,2 @@
+import { ChipItem, DsChipGroupProps } from "./ds-chip-group.types.js";
+import { DsChipGroup } from "./ds-chip-group.js";

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

@@ -0,0 +1 @@
+import ds_chip_group_default from "./ds-chip-group.js";

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

@@ -0,0 +1,235 @@
+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');
+const require_ds_confirmation_module = require('./ds-confirmation.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_portal = require("@ark-ui/react/portal");
+let __ark_ui_react_dialog = require("@ark-ui/react/dialog");
+
+//#region src/components/ds-confirmation/ds-confirmation.tsx
+/**
+* Composable confirmation modal dialog.
+*/
+const DsConfirmation = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(15);
+	const { open, onOpenChange, style, className, children } = t0;
+	let t1;
+	if ($[0] !== onOpenChange) {
+		t1 = (details) => {
+			onOpenChange(details.open);
+		};
+		$[0] = onOpenChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	const handleOpenChange = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Backdrop, { className: require_ds_confirmation_module.default.overlay });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== className) {
+		t3 = (0, classnames.default)(require_ds_confirmation_module.default.modal, className);
+		$[3] = className;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== children || $[6] !== style) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: require_ds_confirmation_module.default.content,
+			children
+		});
+		$[5] = children;
+		$[6] = style;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_portal.Portal, { children: [t2, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Content, {
+			className: t3,
+			children: t4
+		}) })] });
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== handleOpenChange || $[12] !== open || $[13] !== t5) {
+		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Root, {
+			open,
+			onOpenChange: handleOpenChange,
+			modal: true,
+			closeOnEscape: true,
+			closeOnInteractOutside: true,
+			children: t5
+		});
+		$[11] = handleOpenChange;
+		$[12] = open;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+};
+const Header = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_confirmation_module.default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const Title = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(8);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_confirmation_module.default.title, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "heading4",
+			children
+		});
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== style || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Title, {
+			className: t1,
+			style,
+			asChild: true,
+			children: t2
+		});
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+};
+const CloseTrigger = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(4);
+	const { style, className } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+			icon: "close",
+			size: "small"
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== className || $[2] !== style) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.CloseTrigger, {
+			style,
+			className,
+			children: t1
+		});
+		$[1] = className;
+		$[2] = style;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+};
+const Body = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_confirmation_module.default.body, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const Footer = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_confirmation_module.default.footer, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const Actions = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_confirmation_module.default.actions, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+DsConfirmation.Header = Header;
+DsConfirmation.Title = Title;
+DsConfirmation.CloseTrigger = CloseTrigger;
+DsConfirmation.Body = Body;
+DsConfirmation.Footer = Footer;
+DsConfirmation.Actions = Actions;
+
+//#endregion
+exports.DsConfirmation = DsConfirmation;