@drivenets/design-system 0.0.1 → 0.0.3

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

@@ -0,0 +1,59 @@
+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_chip_module_default from "./ds-chip.module.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ds-chip/ds-chip.tsx
+/**
+* Design system Chip component
+*/
+const DsChip = ({ ref, label, className, style = {}, onClick, onDelete, size = "medium", deleteIcon, selected = false }) => {
+	const chipClass = classNames(ds_chip_module_default.chip, {
+		[ds_chip_module_default.clickable]: onClick !== void 0,
+		[ds_chip_module_default.small]: size === "small"
+	}, className);
+	const handleDeleteClick = (event) => {
+		event.stopPropagation();
+		onDelete?.(event);
+	};
+	const handleKeyDown = (event) => {
+		if (onDelete && (event.key === "Backspace" || event.key === "Delete")) {
+			event.preventDefault();
+			onDelete(event);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: chipClass,
+		style,
+		onClick,
+		onKeyDown: handleKeyDown,
+		role: onClick || onDelete ? "button" : void 0,
+		tabIndex: onClick || onDelete ? 0 : void 0,
+		"aria-label": label,
+		"aria-pressed": onClick && selected ? "true" : void 0,
+		children: [/* @__PURE__ */ jsx(ds_typography_default, {
+			variant: size === "small" ? "body-xs-reg" : "body-sm-reg",
+			className: ds_chip_module_default.label,
+			children: label
+		}), onDelete && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: ds_chip_module_default.deleteButton,
+			onClick: handleDeleteClick,
+			"aria-label": "Delete chip",
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsx(ds_icon_default, {
+				icon: deleteIcon || "cancel",
+				size: "tiny"
+			})
+		})]
+	});
+};
+var ds_chip_default = DsChip;
+
+//#endregion
+export { ds_chip_default as default };
+//# sourceMappingURL=ds-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip.js","names":["DsChip: React.FC<DsChipProps>","styles","DsTypography","DsIcon"],"sources":["../../../src/components/ds-chip/ds-chip.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport styles from './ds-chip.module.scss';\nimport type { DsChipProps } from './ds-chip.types';\nimport { DsIcon } from '../ds-icon';\nimport { DsTypography } from '../ds-typography';\n\n/**\n * Design system Chip component\n */\nconst DsChip: React.FC<DsChipProps> = ({\n\tref,\n\tlabel,\n\tclassName,\n\tstyle = {},\n\tonClick,\n\tonDelete,\n\tsize = 'medium',\n\tdeleteIcon,\n\tselected = false,\n}) => {\n\tconst chipClass = classNames(\n\t\tstyles.chip,\n\t\t{\n\t\t\t[styles.clickable]: onClick !== undefined,\n\t\t\t[styles.small]: size === 'small',\n\t\t},\n\t\tclassName,\n\t);\n\n\tconst handleDeleteClick = (event: React.MouseEvent<HTMLElement>) => {\n\t\tevent.stopPropagation();\n\t\tonDelete?.(event);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n\t\tif (onDelete && (event.key === 'Backspace' || event.key === 'Delete')) {\n\t\t\tevent.preventDefault();\n\t\t\tonDelete(event);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tref={ref as React.Ref<HTMLDivElement>}\n\t\t\tclassName={chipClass}\n\t\t\tstyle={style}\n\t\t\tonClick={onClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\trole={onClick || onDelete ? 'button' : undefined}\n\t\t\ttabIndex={onClick || onDelete ? 0 : undefined}\n\t\t\taria-label={label}\n\t\t\taria-pressed={onClick && selected ? 'true' : undefined}\n\t\t>\n\t\t\t<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>\n\t\t\t\t{label}\n\t\t\t</DsTypography>\n\t\t\t{onDelete && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={styles.deleteButton}\n\t\t\t\t\tonClick={handleDeleteClick}\n\t\t\t\t\taria-label=\"Delete chip\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t>\n\t\t\t\t\t<DsIcon icon={deleteIcon || 'cancel'} size=\"tiny\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default DsChip;\n"],"mappings":";;;;;;;;;;;;AAUA,MAAMA,UAAiC,EACtC,KACA,OACA,WACA,QAAQ,EAAE,EACV,SACA,UACA,OAAO,UACP,YACA,WAAW,YACN;CACL,MAAM,YAAY,WACjBC,uBAAO,MACP;GACEA,uBAAO,YAAY,YAAY;GAC/BA,uBAAO,QAAQ,SAAS;EACzB,EACD,UACA;CAED,MAAM,qBAAqB,UAAyC;AACnE,QAAM,iBAAiB;AACvB,aAAW,MAAM;;CAGlB,MAAM,iBAAiB,UAA4C;AAClE,MAAI,aAAa,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AACtE,SAAM,gBAAgB;AACtB,YAAS,MAAM;;;AAIjB,QACC,qBAAC;EACK;EACL,WAAW;EACJ;EACE;EACT,WAAW;EACX,MAAM,WAAW,WAAW,WAAW;EACvC,UAAU,WAAW,WAAW,IAAI;EACpC,cAAY;EACZ,gBAAc,WAAW,WAAW,SAAS;aAE7C,oBAACC;GAAa,SAAS,SAAS,UAAU,gBAAgB;GAAe,WAAWD,uBAAO;aACzF;IACa,EACd,YACA,oBAAC;GACA,MAAK;GACL,WAAWA,uBAAO;GAClB,SAAS;GACT,cAAW;GACX,UAAU;aAEV,oBAACE;IAAO,MAAM,cAAc;IAAU,MAAK;KAAS;IAC5C;GAEL;;AAIR,sBAAe"}

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

@@ -0,0 +1,12 @@
+
+//#region src/components/ds-chip/ds-chip.module.scss
+var ds_chip_module_default = {
+	"chip": "_chip_1mzbj_1",
+	"clickable": "_clickable_1mzbj_1",
+	"small": "_small_1mzbj_1",
+	"label": "_label_1mzbj_1",
+	"deleteButton": "_deleteButton_1mzbj_1"
+};
+
+//#endregion
+exports.default = ds_chip_module_default;

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

@@ -0,0 +1,12 @@
+//#region src/components/ds-chip/ds-chip.module.scss
+var ds_chip_module_default = {
+	"chip": "_chip_1mzbj_1",
+	"clickable": "_clickable_1mzbj_1",
+	"small": "_small_1mzbj_1",
+	"label": "_label_1mzbj_1",
+	"deleteButton": "_deleteButton_1mzbj_1"
+};
+
+//#endregion
+export { ds_chip_module_default as default };
+//# sourceMappingURL=ds-chip.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-chip/ds-chip.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n\n.chip {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--spacing-3xs);\n\tpadding: 1px var(--spacing-3xs) 1px var(--spacing-xs);\n\tbackground: var(--color-background);\n\tborder: 1px solid var(--color-border-contrast);\n\tborder-radius: 100vmax;\n\tcolor: var(--color-font-main);\n\tcursor: default;\n\toverflow: hidden;\n\ttransition:\n\t\tbackground-color 0.2s,\n\t\tborder-color 0.2s,\n\t\tcolor 0.2s;\n\n\t&.clickable {\n\t\tcursor: pointer;\n\n\t\t&:hover {\n\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\tborder-color: var(--color-border-action-secondary-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-background-selected);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n\n\t&.small {\n\t\tpadding: 0 var(--spacing-4xs) 0 var(--spacing-3xs);\n\t\tgap: var(--spacing-4xs);\n\t}\n\n\t&[aria-pressed='true'] {\n\t\tbackground: var(--color-background-selected-weak);\n\t\tborder-color: var(--color-border-action-primary);\n\t\tcolor: var(--color-font-action);\n\t}\n}\n\n.label {\n\t@include typography.ellipsis;\n\tpadding: var(--spacing-4xs) var(--spacing-3xs);\n\tflex: 1;\n}\n\n.deleteButton {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tcolor: var(--color-icon-information-main);\n\tcursor: pointer;\n\ttransition:\n\t\tbackground-color 0.2s,\n\t\tcolor 0.2s;\n\tflex-shrink: 0;\n\n\t&:hover {\n\t\tcolor: var(--color-icon-secondary);\n\t}\n\n\t.chip.small & {\n\t\tpadding: 1px var(--spacing-4xs);\n\t}\n}\n"],"mappings":""}

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

@@ -0,0 +1,49 @@
+import { IconType } from "../ds-icon/ds-icon.types.cjs";
+import { CSSProperties, KeyboardEvent, MouseEvent, Ref } from "react";
+
+//#region src/components/ds-chip/ds-chip.types.d.ts
+declare const chipSizes: readonly ["medium", "small"];
+type ChipSize = (typeof chipSizes)[number];
+interface DsChipProps {
+  /**
+   * Ref to the chip element
+   */
+  ref?: Ref<HTMLElement>;
+  /**
+   * The label text to display in the chip
+   */
+  label: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: CSSProperties;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  /**
+   * Callback function when delete icon is clicked
+   */
+  onDelete?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+  /**
+   * Size of the chip
+   * @default 'medium'
+   */
+  size?: ChipSize;
+  /**
+   * Custom delete icon element
+   */
+  deleteIcon?: IconType;
+  /**
+   * Whether the chip is in a selected/pressed state
+   * @default false
+   */
+  selected?: boolean;
+}
+//#endregion
+export { ChipSize, DsChipProps };
+//# sourceMappingURL=ds-chip.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip.types.d.cts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.types.tsx"],"sourcesContent":[],"mappings":";;;;cAGa;KACD,QAAA,WAAmB;AADlB,UAGI,WAAA,CAHoC;EACzC;AAEZ;;EAIO,GAAA,CAAA,EAAA,GAAA,CAAI,WAAJ,CAAA;EAYE;;;EAQsB,KAAA,EAAA,MAAA;EAAX;;;EAKZ,SAAA,CAAA,EAAA,MAAA;EAIM;;;UAjBL;;;;oBAIU,WAAW;;;;qBAIV,WAAW,eAAe,cAAc;;;;;SAKpD;;;;eAIM"}

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

@@ -0,0 +1,50 @@
+import { IconType } from "../ds-icon/ds-icon.types.js";
+import "../ds-icon/index.js";
+import { CSSProperties, KeyboardEvent, MouseEvent, Ref } from "react";
+
+//#region src/components/ds-chip/ds-chip.types.d.ts
+declare const chipSizes: readonly ["medium", "small"];
+type ChipSize = (typeof chipSizes)[number];
+interface DsChipProps {
+  /**
+   * Ref to the chip element
+   */
+  ref?: Ref<HTMLElement>;
+  /**
+   * The label text to display in the chip
+   */
+  label: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: CSSProperties;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  /**
+   * Callback function when delete icon is clicked
+   */
+  onDelete?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+  /**
+   * Size of the chip
+   * @default 'medium'
+   */
+  size?: ChipSize;
+  /**
+   * Custom delete icon element
+   */
+  deleteIcon?: IconType;
+  /**
+   * Whether the chip is in a selected/pressed state
+   * @default false
+   */
+  selected?: boolean;
+}
+//#endregion
+export { ChipSize, DsChipProps };
+//# sourceMappingURL=ds-chip.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip.types.d.ts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.types.tsx"],"sourcesContent":[],"mappings":";;;;;cAGa;KACD,QAAA,WAAmB;UAEd,WAAA;EAHJ;AACb;AAEA;EAIW,GAAA,CAAA,EAAJ,GAAI,CAAA,WAAA,CAAA;EAAJ;;;EAgBY,KAAA,EAAA,MAAA;EAIY;;;EAAe,SAAA,CAAA,EAAA,MAAA;EAKtC;;;UAbC;;;;oBAIU,WAAW;;;;qBAIV,WAAW,eAAe,cAAc;;;;;SAKpD;;;;eAIM"}

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

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

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

@@ -0,0 +1,2 @@
+import { ChipSize, DsChipProps } from "./ds-chip.types.js";
+import { DsChip } from "./ds-chip.js";

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

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

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

@@ -0,0 +1,108 @@
+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_button = require('../ds-button/ds-button.cjs');
+require('../ds-button/index.cjs');
+const require_ds_checkbox = require('../ds-checkbox/ds-checkbox.cjs');
+require('../ds-checkbox/index.cjs');
+const require_ds_chip = require('../ds-chip/ds-chip.cjs');
+const require_ds_chip_group_module = require('./ds-chip-group.module.cjs');
+const require_use_chip_row_calculation = require('./hooks/use-chip-row-calculation.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __radix_ui_react_dialog = require("@radix-ui/react-dialog");
+__radix_ui_react_dialog = require_rolldown_runtime.__toESM(__radix_ui_react_dialog);
+let __radix_ui_react_visually_hidden = require("@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] = (0, react.useState)(false);
+	const showAllChipsRef = (0, react.useRef)(null);
+	const chipsWrapperRef = (0, react.useRef)(null);
+	const visibleCount = require_use_chip_row_calculation.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(require_ds_chip_group_module.default.container, className),
+		style,
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+				variant: "body-sm-reg",
+				className: require_ds_chip_group_module.default.label,
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: chipsWrapperRef,
+				className: require_ds_chip_group_module.default.chipsWrapper,
+				children: [items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_chip.default, {
+					label: item.label,
+					selected: item.selected,
+					onClick: () => onItemSelect?.(item),
+					onDelete: () => onItemDelete?.(item),
+					className: (0, classnames.default)({ [require_ds_chip_group_module.default.hidden]: index >= visibleCount })
+				}, item.id)), showExpandButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_chip.default, {
+					ref: showAllChipsRef,
+					label: `+${String(hiddenCount)} ${hiddenCount === 1 ? "item" : "items"} show all`,
+					onClick: handleOpenDialog,
+					className: require_ds_chip_group_module.default.expandChip
+				})]
+			}),
+			onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ds_button.default, {
+				design: "v1.2",
+				buttonType: "tertiary",
+				variant: "ghost",
+				size: "small",
+				onClick: onClearAll,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, { icon: "close" }), "Clear all"]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dialog.Root, {
+				open: dialogOpen,
+				onOpenChange: setDialogOpen,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_visually_hidden.Root, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Title, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Content, {
+					style: dialogStyle,
+					className: require_ds_chip_group_module.default.dialog,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: require_ds_chip_group_module.default.dialogContent,
+						children: items.filter((item, index) => index >= visibleCount).map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: require_ds_chip_group_module.default.itemCheckbox,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_checkbox.default, {
+								id: `chip-${item.id}`,
+								checked: item.selected,
+								onCheckedChange: () => onItemSelect?.(item),
+								label: item.label
+							})
+						}, item.id))
+					})
+				}) })]
+			})
+		]
+	});
+};
+var ds_chip_group_default = DsChipGroup;
+
+//#endregion
+exports.default = ds_chip_group_default;

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

@@ -0,0 +1,13 @@
+import { DsChipGroupProps } from "./ds-chip-group.types.cjs";
+import React from "react";
+
+//#region src/components/ds-chip-group/ds-chip-group.d.ts
+
+/**
+ * Design system chip group component displays a collection of chips with overflow handling
+ * Used for displaying filters, selected items, tags, etc.
+ */
+declare const DsChipGroup: React.FC<DsChipGroupProps>;
+//#endregion
+export { DsChipGroup };
+//# sourceMappingURL=ds-chip-group.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip-group.d.cts","names":[],"sources":["../../../src/components/ds-chip-group/ds-chip-group.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAM8D;;cAYxD,aAAa,KAAA,CAAM,GAAG"}

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

@@ -0,0 +1,13 @@
+import { DsChipGroupProps } from "./ds-chip-group.types.js";
+import React from "react";
+
+//#region src/components/ds-chip-group/ds-chip-group.d.ts
+
+/**
+ * Design system chip group component displays a collection of chips with overflow handling
+ * Used for displaying filters, selected items, tags, etc.
+ */
+declare const DsChipGroup: React.FC<DsChipGroupProps>;
+//#endregion
+export { DsChipGroup };
+//# sourceMappingURL=ds-chip-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip-group.d.ts","names":[],"sources":["../../../src/components/ds-chip-group/ds-chip-group.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAM8D;;cAYxD,aAAa,KAAA,CAAM,GAAG"}

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, index) => index >= visibleCount).map((item) => /* @__PURE__ */ jsx("div", {
+							className: ds_chip_group_module_default.itemCheckbox,
+							children: /* @__PURE__ */ jsx(ds_checkbox_default, {
+								id: `chip-${item.id}`,
+								checked: item.selected,
+								onCheckedChange: () => onItemSelect?.(item),
+								label: item.label
+							})
+						}, item.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":["DsChipGroup: React.FC<DsChipGroupProps>","dialogStyle: React.CSSProperties","styles","DsTypography","DsChip","DsButton","DsIcon","VisuallyHidden","DsCheckbox"],"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,MAAMA,eAA2C,EAChD,OACA,QAAQ,gBACR,YACA,cACA,cACA,WACA,YACK;CACL,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,kBAAkB,OAAuB,KAAK;CACpD,MAAM,kBAAkB,OAAuB,KAAK;CACpD,MAAM,eAAe,sBAAsB;EAC1C;EACA,cAAc,MAAM;EACpB,CAAC;AAEF,KAAI,MAAM,WAAW,EACpB,QAAO;CAGR,MAAM,cAAc,MAAM,SAAS;CACnC,MAAM,mBAAmB,cAAc;CAEvC,MAAM,yBAAyB;AAC9B,gBAAc,KAAK;;CAGpB,IAAIC,cAAmC,EAAE;AACzC,KAAI,oBAAoB,gBAAgB,SAAS;EAChD,MAAM,OAAO,gBAAgB,QAAQ,uBAAuB;AAC5D,gBAAc;GACb,UAAU;GACV,KAAK,KAAK,SAAS;GACnB,MAAM,KAAK;GACX;;AAGF,QACC,qBAAC;EAAI,WAAW,WAAWC,6BAAO,WAAW,UAAU;EAAS;;GAC9D,SACA,oBAACC;IAAa,SAAQ;IAAc,WAAWD,6BAAO;cACpD;KACa;GAGhB,qBAAC;IAAI,KAAK;IAAiB,WAAWA,6BAAO;eAC3C,MAAM,KAAK,MAAM,UACjB,oBAACE;KAEA,OAAO,KAAK;KACZ,UAAU,KAAK;KACf,eAAe,eAAe,KAAK;KACnC,gBAAgB,eAAe,KAAK;KACpC,WAAW,WAAW,GACpBF,6BAAO,SAAS,SAAS,cAC1B,CAAC;OAPG,KAAK,GAQT,CACD,EACD,oBACA,oBAACE;KACA,KAAK;KACL,OAAO,IAAI,OAAO,YAAY,CAAC,GAAG,gBAAgB,IAAI,SAAS,QAAQ;KACvE,SAAS;KACT,WAAWF,6BAAO;MACjB;KAEE;GAEL,cACA,qBAACG;IAAS,QAAO;IAAO,YAAW;IAAW,SAAQ;IAAQ,MAAK;IAAQ,SAAS;eACnF,oBAACC,mBAAO,MAAK,UAAU;KAEb;GAGZ,qBAAC,YAAY;IAAK,MAAM;IAAY,cAAc;eACjD,oBAACC,kBACA,oBAAC,YAAY,UAAQ,GACL,EACjB,oBAAC,YAAY,oBACZ,oBAAC,YAAY;KAAQ,OAAO;KAAa,WAAWL,6BAAO;eAC1D,oBAAC;MAAI,WAAWA,6BAAO;gBACrB,MACC,QAAQ,MAAM,UAAU,SAAS,aAAa,CAC9C,KAAK,SACL,oBAAC;OAAkB,WAAWA,6BAAO;iBACpC,oBAACM;QACA,IAAI,QAAQ,KAAK;QACjB,SAAS,KAAK;QACd,uBAAuB,eAAe,KAAK;QAC3C,OAAO,KAAK;SACX;SANO,KAAK,GAOT,CACL;OACE;MACe,GACF;KACH;;GACd;;AAIR,4BAAe"}

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