@drivenets/design-system 0.1.0 → 0.3.0

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

@@ -0,0 +1,68 @@
+import { CSSProperties, KeyboardEvent, MouseEvent, ReactNode, Ref } from "react";
+
+//#region src/components/ds-tag/ds-tag.types.d.ts
+declare const tagSizes: readonly ["medium", "small"];
+type TagSize = (typeof tagSizes)[number];
+declare const tagVariants: readonly ["default", "include", "exclude"];
+type TagVariant = (typeof tagVariants)[number];
+interface DsTagProps {
+  /**
+   * Ref to the tag element
+   */
+  ref?: Ref<HTMLElement>;
+  /**
+   * The label text to display in the tag
+   */
+  label: ReactNode;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Locale object (you can pass custom strings for localization)
+   */
+  locale?: {
+    deleteAriaLabel?: string;
+  };
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: CSSProperties;
+  /**
+   * Optional click handler, if not present Tag will not be in "clickable" state
+   */
+  onClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+  /**
+   * Callback function when the delete icon is clicked
+   */
+  onDelete?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+  /**
+   * Size of the tag
+   * @default 'medium'
+   */
+  size?: TagSize;
+  /**
+   * Whether the tag is in a selected/pressed state
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * Variant of the tag
+   * @default 'default'
+   */
+  variant?: TagVariant;
+  /**
+   * Whether the tag is disabled
+   * @default false
+   */
+  disabled?: boolean;
+  slots?: {
+    /**
+     * Icon to display at the start of the input
+     */
+    icon?: ReactNode;
+  };
+}
+//#endregion
+export { DsTagProps, TagSize, TagVariant };
+//# sourceMappingURL=ds-tag.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tag.types.d.cts","names":[],"sources":["../../../src/components/ds-tag/ds-tag.types.tsx"],"sourcesContent":[],"mappings":";;;cAEa;KACD,OAAA,WAAkB;AADjB,cAGA,WAHuC,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,SAAA,CAAA;AACxC,KAGA,UAAA,GAHO,CAAA,OAGc,WAHK,CAAA,CAAA,MAAA,CAAA;AAEzB,UAGI,UAAA,CAHoD;EACzD;AAEZ;;EAIO,GAAA,CAAA,EAAA,GAAA,CAAI,WAAJ,CAAA;EAIC;;;EAkBW,KAAA,EAlBX,SAkBW;EAAwC;;;EAIvC,SAAA,CAAA,EAAA,MAAA;EAAwC;;;EAejD,MAAA,CAAA,EAAA;IAWF,eAAA,CAAA,EAAA,MAAA;EAAS,CAAA;;;;UAlCT;;;;oBAIU,WAAW,eAAe,cAAc;;;;qBAIvC,WAAW,eAAe,cAAc;;;;;SAKpD;;;;;;;;;;YAUG;;;;;;;;;;WAWF"}

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

@@ -0,0 +1,68 @@
+import { CSSProperties, KeyboardEvent, MouseEvent, ReactNode, Ref } from "react";
+
+//#region src/components/ds-tag/ds-tag.types.d.ts
+declare const tagSizes: readonly ["medium", "small"];
+type TagSize = (typeof tagSizes)[number];
+declare const tagVariants: readonly ["default", "include", "exclude"];
+type TagVariant = (typeof tagVariants)[number];
+interface DsTagProps {
+  /**
+   * Ref to the tag element
+   */
+  ref?: Ref<HTMLElement>;
+  /**
+   * The label text to display in the tag
+   */
+  label: ReactNode;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Locale object (you can pass custom strings for localization)
+   */
+  locale?: {
+    deleteAriaLabel?: string;
+  };
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: CSSProperties;
+  /**
+   * Optional click handler, if not present Tag will not be in "clickable" state
+   */
+  onClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+  /**
+   * Callback function when the delete icon is clicked
+   */
+  onDelete?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+  /**
+   * Size of the tag
+   * @default 'medium'
+   */
+  size?: TagSize;
+  /**
+   * Whether the tag is in a selected/pressed state
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * Variant of the tag
+   * @default 'default'
+   */
+  variant?: TagVariant;
+  /**
+   * Whether the tag is disabled
+   * @default false
+   */
+  disabled?: boolean;
+  slots?: {
+    /**
+     * Icon to display at the start of the input
+     */
+    icon?: ReactNode;
+  };
+}
+//#endregion
+export { DsTagProps, TagSize, TagVariant };
+//# sourceMappingURL=ds-tag.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tag.types.d.ts","names":[],"sources":["../../../src/components/ds-tag/ds-tag.types.tsx"],"sourcesContent":[],"mappings":";;;cAEa;KACD,OAAA,WAAkB;AADjB,cAGA,WAHuC,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,SAAA,CAAA;AACxC,KAGA,UAAA,GAHO,CAAA,OAGc,WAHK,CAAA,CAAA,MAAA,CAAA;AAEzB,UAGI,UAAA,CAHoD;EACzD;AAEZ;;EAIO,GAAA,CAAA,EAAA,GAAA,CAAI,WAAJ,CAAA;EAIC;;;EAkBW,KAAA,EAlBX,SAkBW;EAAwC;;;EAIvC,SAAA,CAAA,EAAA,MAAA;EAAwC;;;EAejD,MAAA,CAAA,EAAA;IAWF,eAAA,CAAA,EAAA,MAAA;EAAS,CAAA;;;;UAlCT;;;;oBAIU,WAAW,eAAe,cAAc;;;;qBAIvC,WAAW,eAAe,cAAc;;;;;SAKpD;;;;;;;;;;YAUG;;;;;;;;;;WAWF"}

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

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

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

@@ -0,0 +1,2 @@
+import { DsTagProps, TagSize, TagVariant } from "./ds-tag.types.js";
+import { DsTag } from "./ds-tag.js";

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

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

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

@@ -0,0 +1,325 @@
+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_tag = require('../ds-tag/ds-tag.cjs');
+require('../ds-tag/index.cjs');
+const require_ds_tag_filter_module = require('./ds-tag-filter.module.cjs');
+const require_use_tag_overflow_calculation = require('./hooks/use-tag-overflow-calculation.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 react = require("react");
+let react_dom = require("react-dom");
+
+//#region src/components/ds-tag-filter/ds-tag-filter.tsx
+/**
+* Design system TagFilter component
+*
+* A component for displaying active filters as tags with overflow handling.
+* Shows visible tags in up to 2 rows, with the Expand button to show hidden items.
+*/
+const DsTagFilter = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(81);
+	const { items, locale: t1, className, style, onClearAll, onItemDelete, onItemSelect, onExpand } = t0;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = t1 === void 0 ? {} : t1;
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const locale = t2;
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const containerRef = (0, react.useRef)(null);
+	const measurementRef = (0, react.useRef)(null);
+	let t3;
+	if ($[2] !== expanded || $[3] !== items.length) {
+		t3 = {
+			containerRef,
+			measurementRef,
+			totalItems: items.length,
+			expanded
+		};
+		$[2] = expanded;
+		$[3] = items.length;
+		$[4] = t3;
+	} else t3 = $[4];
+	const { row1TagCount, row2TagCount, hasOverflow } = require_use_tag_overflow_calculation.useTagOverflowCalculation(t3);
+	const { label: t4, clearButton: t5, hiddenCountPlural: t6, hiddenCountSingular: t7, collapseTagLabel: t8 } = locale;
+	const label = t4 === void 0 ? "Filtered by:" : t4;
+	const clearButton = t5 === void 0 ? "Clear all filters" : t5;
+	const hiddenCountPlural = t6 === void 0 ? "filters" : t6;
+	const hiddenCountSingular = t7 === void 0 ? "filter" : t7;
+	const collapseTagLabel = t8 === void 0 ? "Collapse" : t8;
+	let measurementContainer;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t9;
+	if ($[5] !== className || $[6] !== clearButton || $[7] !== collapseTagLabel || $[8] !== expanded || $[9] !== hasOverflow || $[10] !== hiddenCountPlural || $[11] !== hiddenCountSingular || $[12] !== items || $[13] !== label || $[14] !== onClearAll || $[15] !== onExpand || $[16] !== onItemDelete || $[17] !== onItemSelect || $[18] !== row1TagCount || $[19] !== row2TagCount || $[20] !== style) {
+		t14 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const row1Tags = items.slice(0, row1TagCount);
+			const row2Tags = items.slice(row1TagCount, row1TagCount + row2TagCount);
+			let t15$1;
+			if ($[28] !== expanded || $[29] !== items || $[30] !== row1TagCount || $[31] !== row2TagCount) {
+				t15$1 = expanded ? [] : items.slice(row1TagCount + row2TagCount);
+				$[28] = expanded;
+				$[29] = items;
+				$[30] = row1TagCount;
+				$[31] = row2TagCount;
+				$[32] = t15$1;
+			} else t15$1 = $[32];
+			const hiddenTags = t15$1;
+			if (items.length === 0) {
+				t14 = null;
+				break bb0;
+			}
+			const hiddenCount = hiddenTags.length;
+			const hasRow2Content = row2Tags.length > 0 || hasOverflow;
+			let t16$1;
+			if ($[33] !== onItemDelete || $[34] !== onItemSelect) {
+				t16$1 = (item) => {
+					return /* @__PURE__ */ (0, react.createElement)(require_ds_tag.default, {
+						...item.slotProps?.tag || {},
+						key: item.id,
+						label: item.label,
+						selected: item.selected,
+						onClick: onItemSelect ? () => onItemSelect(item) : void 0,
+						onDelete: onItemDelete ? () => onItemDelete(item) : void 0
+					});
+				};
+				$[33] = onItemDelete;
+				$[34] = onItemSelect;
+				$[35] = t16$1;
+			} else t16$1 = $[35];
+			const renderTag = t16$1;
+			let t17$1;
+			if ($[36] !== expanded || $[37] !== onExpand) {
+				t17$1 = () => {
+					const newExpanded = !expanded;
+					setExpanded(newExpanded);
+					onExpand?.(newExpanded);
+				};
+				$[36] = expanded;
+				$[37] = onExpand;
+				$[38] = t17$1;
+			} else t17$1 = $[38];
+			const handleExpandToggle = t17$1;
+			let t18;
+			if ($[39] !== label) {
+				t18 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"data-measure-label": "",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+						variant: "body-sm-reg",
+						className: require_ds_tag_filter_module.default.label,
+						children: label
+					})
+				});
+				$[39] = label;
+				$[40] = t18;
+			} else t18 = $[40];
+			let t19;
+			if ($[41] !== items || $[42] !== onItemDelete || $[43] !== onItemSelect) {
+				let t20$1;
+				if ($[45] !== onItemDelete || $[46] !== onItemSelect) {
+					t20$1 = (item_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tag.default, {
+						"data-measure-tag": "",
+						label: item_0.label,
+						selected: item_0.selected,
+						onClick: onItemSelect ? () => onItemSelect(item_0) : void 0,
+						onDelete: onItemDelete ? () => onItemDelete(item_0) : void 0
+					}, item_0.id);
+					$[45] = onItemDelete;
+					$[46] = onItemSelect;
+					$[47] = t20$1;
+				} else t20$1 = $[47];
+				t19 = items.map(t20$1);
+				$[41] = items;
+				$[42] = onItemDelete;
+				$[43] = onItemSelect;
+				$[44] = t19;
+			} else t19 = $[44];
+			let t20;
+			if ($[48] !== clearButton || $[49] !== onClearAll) {
+				t20 = onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ds_button.default, {
+					"data-measure-clear": "",
+					design: "v1.2",
+					buttonType: "tertiary",
+					variant: "ghost",
+					className: require_ds_tag_filter_module.default.clearButton,
+					contentClassName: require_ds_tag_filter_module.default.clearContent,
+					size: "small",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, { icon: "close" }), clearButton]
+				});
+				$[48] = clearButton;
+				$[49] = onClearAll;
+				$[50] = t20;
+			} else t20 = $[50];
+			let t21;
+			if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+				t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tag.default, {
+					"data-measure-expand": "",
+					label: "+99 filters",
+					className: require_ds_tag_filter_module.default.expandTag
+				});
+				$[51] = t21;
+			} else t21 = $[51];
+			let t22;
+			if ($[52] !== t18 || $[53] !== t19 || $[54] !== t20) {
+				t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: measurementRef,
+					className: require_ds_tag_filter_module.default.measurementContainer,
+					"aria-hidden": "true",
+					children: [
+						t18,
+						t19,
+						t20,
+						t21
+					]
+				});
+				$[52] = t18;
+				$[53] = t19;
+				$[54] = t20;
+				$[55] = t22;
+			} else t22 = $[55];
+			measurementContainer = t22;
+			t9 = containerRef;
+			const t23 = expanded && require_ds_tag_filter_module.default.expanded;
+			if ($[56] !== className || $[57] !== t23) {
+				t10 = (0, classnames.default)(require_ds_tag_filter_module.default.container, t23, className);
+				$[56] = className;
+				$[57] = t23;
+				$[58] = t10;
+			} else t10 = $[58];
+			t11 = style;
+			let t24;
+			if ($[59] !== label) {
+				t24 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+					variant: "body-sm-reg",
+					className: require_ds_tag_filter_module.default.label,
+					children: label
+				});
+				$[59] = label;
+				$[60] = t24;
+			} else t24 = $[60];
+			let t25;
+			if ($[61] !== renderTag) {
+				t25 = (item_1) => renderTag(item_1);
+				$[61] = renderTag;
+				$[62] = t25;
+			} else t25 = $[62];
+			const t26 = row1Tags.map(t25);
+			let t27;
+			if ($[63] !== clearButton || $[64] !== onClearAll) {
+				t27 = onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ds_button.default, {
+					design: "v1.2",
+					buttonType: "tertiary",
+					variant: "ghost",
+					className: require_ds_tag_filter_module.default.clearButton,
+					contentClassName: require_ds_tag_filter_module.default.clearContent,
+					size: "small",
+					onClick: onClearAll,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, { icon: "close" }), clearButton]
+				});
+				$[63] = clearButton;
+				$[64] = onClearAll;
+				$[65] = t27;
+			} else t27 = $[65];
+			if ($[66] !== t24 || $[67] !== t26 || $[68] !== t27) {
+				t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_ds_tag_filter_module.default.row1,
+					children: [
+						t24,
+						t26,
+						t27
+					]
+				});
+				$[66] = t24;
+				$[67] = t26;
+				$[68] = t27;
+				$[69] = t12;
+			} else t12 = $[69];
+			t13 = hasRow2Content && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_ds_tag_filter_module.default.row2,
+				children: [row2Tags.map((item_2) => renderTag(item_2)), hasOverflow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tag.default, {
+					label: expanded ? collapseTagLabel : `+${String(hiddenCount)} ${hiddenCount === 1 ? hiddenCountSingular : hiddenCountPlural}`,
+					selected: expanded,
+					className: require_ds_tag_filter_module.default.expandTag,
+					onClick: handleExpandToggle
+				})]
+			});
+		}
+		$[5] = className;
+		$[6] = clearButton;
+		$[7] = collapseTagLabel;
+		$[8] = expanded;
+		$[9] = hasOverflow;
+		$[10] = hiddenCountPlural;
+		$[11] = hiddenCountSingular;
+		$[12] = items;
+		$[13] = label;
+		$[14] = onClearAll;
+		$[15] = onExpand;
+		$[16] = onItemDelete;
+		$[17] = onItemSelect;
+		$[18] = row1TagCount;
+		$[19] = row2TagCount;
+		$[20] = style;
+		$[21] = measurementContainer;
+		$[22] = t10;
+		$[23] = t11;
+		$[24] = t12;
+		$[25] = t13;
+		$[26] = t14;
+		$[27] = t9;
+	} else {
+		measurementContainer = $[21];
+		t10 = $[22];
+		t11 = $[23];
+		t12 = $[24];
+		t13 = $[25];
+		t14 = $[26];
+		t9 = $[27];
+	}
+	if (t14 !== Symbol.for("react.early_return_sentinel")) return t14;
+	let t15;
+	if ($[70] !== t10 || $[71] !== t11 || $[72] !== t12 || $[73] !== t13 || $[74] !== t9) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: t9,
+			className: t10,
+			style: t11,
+			children: [t12, t13]
+		});
+		$[70] = t10;
+		$[71] = t11;
+		$[72] = t12;
+		$[73] = t13;
+		$[74] = t9;
+		$[75] = t15;
+	} else t15 = $[75];
+	let t16;
+	if ($[76] !== measurementContainer) {
+		t16 = (0, react_dom.createPortal)(measurementContainer, document.body);
+		$[76] = measurementContainer;
+		$[77] = t16;
+	} else t16 = $[77];
+	let t17;
+	if ($[78] !== t15 || $[79] !== t16) {
+		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t15, t16] });
+		$[78] = t15;
+		$[79] = t16;
+		$[80] = t17;
+	} else t17 = $[80];
+	return t17;
+};
+var ds_tag_filter_default = DsTagFilter;
+
+//#endregion
+exports.default = ds_tag_filter_default;

package/dist/components/ds-tag-filter/ds-tag-filter.d.cts

@@ -0,0 +1,24 @@
+import { DsTagFilterProps } from "./ds-tag-filter.types.cjs";
+import * as react_jsx_runtime55 from "react/jsx-runtime";
+
+//#region src/components/ds-tag-filter/ds-tag-filter.d.ts
+
+/**
+ * Design system TagFilter component
+ *
+ * A component for displaying active filters as tags with overflow handling.
+ * Shows visible tags in up to 2 rows, with the Expand button to show hidden items.
+ */
+declare const DsTagFilter: ({
+  items,
+  locale,
+  className,
+  style,
+  onClearAll,
+  onItemDelete,
+  onItemSelect,
+  onExpand
+}: DsTagFilterProps) => react_jsx_runtime55.JSX.Element | null;
+//#endregion
+export { DsTagFilter };
+//# sourceMappingURL=ds-tag-filter.d.cts.map

package/dist/components/ds-tag-filter/ds-tag-filter.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tag-filter.d.cts","names":[],"sources":["../../../src/components/ds-tag-filter/ds-tag-filter.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAI6E;;;cAavE,WAAe,EAAA,CAAA;EAAA,KAAA;EAAA,MAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,YAAA;EAAA,YAAA;EAAA;AAAA,CAAA,EASlB,gBATkB,EAAA,GASF,mBAAA,CAAA,GAAA,CAAA,OAAA,GATE,IAAA"}

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

@@ -0,0 +1,24 @@
+import { DsTagFilterProps } from "./ds-tag-filter.types.js";
+import * as react_jsx_runtime53 from "react/jsx-runtime";
+
+//#region src/components/ds-tag-filter/ds-tag-filter.d.ts
+
+/**
+ * Design system TagFilter component
+ *
+ * A component for displaying active filters as tags with overflow handling.
+ * Shows visible tags in up to 2 rows, with the Expand button to show hidden items.
+ */
+declare const DsTagFilter: ({
+  items,
+  locale,
+  className,
+  style,
+  onClearAll,
+  onItemDelete,
+  onItemSelect,
+  onExpand
+}: DsTagFilterProps) => react_jsx_runtime53.JSX.Element | null;
+//#endregion
+export { DsTagFilter };
+//# sourceMappingURL=ds-tag-filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tag-filter.d.ts","names":[],"sources":["../../../src/components/ds-tag-filter/ds-tag-filter.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAI6E;;;cAavE,WAAe,EAAA,CAAA;EAAA,KAAA;EAAA,MAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,YAAA;EAAA,YAAA;EAAA;AAAA,CAAA,EASlB,gBATkB,EAAA,GASF,mBAAA,CAAA,GAAA,CAAA,OAAA,GATE,IAAA"}