@drivenets/design-system 0.1.0 → 0.2.0

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

@@ -0,0 +1,253 @@
+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_tag_module_default from "./ds-tag.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+
+//#region src/components/ds-tag/ds-tag.tsx
+/**
+* Design system Tag component
+*/
+const DsTag = (t0) => {
+	const $ = c(61);
+	let className;
+	let label;
+	let onClick;
+	let onDelete;
+	let ref;
+	let rest;
+	let slots;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[0] !== t0) {
+		({ref, label, className, style: t1, size: t2, selected: t3, variant: t4, disabled: t5, locale: t6, onClick, onDelete, slots, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = label;
+		$[3] = onClick;
+		$[4] = onDelete;
+		$[5] = ref;
+		$[6] = rest;
+		$[7] = slots;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+	} else {
+		className = $[1];
+		label = $[2];
+		onClick = $[3];
+		onDelete = $[4];
+		ref = $[5];
+		rest = $[6];
+		slots = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+		t4 = $[11];
+		t5 = $[12];
+		t6 = $[13];
+	}
+	let t7;
+	if ($[14] !== t1) {
+		t7 = t1 === void 0 ? {} : t1;
+		$[14] = t1;
+		$[15] = t7;
+	} else t7 = $[15];
+	const style = t7;
+	const size = t2 === void 0 ? "medium" : t2;
+	const selected = t3 === void 0 ? false : t3;
+	const variant = t4 === void 0 ? "default" : t4;
+	const disabled = t5 === void 0 ? false : t5;
+	let t8;
+	if ($[16] !== t6) {
+		t8 = t6 === void 0 ? {} : t6;
+		$[16] = t6;
+		$[17] = t8;
+	} else t8 = $[17];
+	const locale = t8;
+	const t9 = onClick !== void 0 && !disabled;
+	const t10 = selected && !disabled;
+	const t11 = variant === "include";
+	const t12 = variant === "exclude";
+	let t13;
+	if ($[18] !== className || $[19] !== disabled || $[20] !== t10 || $[21] !== t11 || $[22] !== t12 || $[23] !== t9) {
+		t13 = classNames(ds_tag_module_default.tag, {
+			[ds_tag_module_default.clickable]: t9,
+			[ds_tag_module_default.selected]: t10,
+			[ds_tag_module_default.include]: t11,
+			[ds_tag_module_default.exclude]: t12,
+			[ds_tag_module_default.disabled]: disabled
+		}, className);
+		$[18] = className;
+		$[19] = disabled;
+		$[20] = t10;
+		$[21] = t11;
+		$[22] = t12;
+		$[23] = t9;
+		$[24] = t13;
+	} else t13 = $[24];
+	const tagClass = t13;
+	let t14;
+	if ($[25] !== onDelete) {
+		t14 = (event) => {
+			event.stopPropagation();
+			onDelete?.(event);
+		};
+		$[25] = onDelete;
+		$[26] = t14;
+	} else t14 = $[26];
+	const handleDeleteClick = t14;
+	let t15;
+	if ($[27] !== onClick || $[28] !== onDelete) {
+		t15 = (event_0) => {
+			if (onClick && (event_0.key === "Enter" || event_0.key === " ")) {
+				event_0.preventDefault();
+				onClick(event_0);
+				return;
+			}
+			if (onDelete && (event_0.key === "Backspace" || event_0.key === "Delete")) {
+				event_0.preventDefault();
+				onDelete(event_0);
+			}
+		};
+		$[27] = onClick;
+		$[28] = onDelete;
+		$[29] = t15;
+	} else t15 = $[29];
+	const handleKeyDownTag = t15;
+	let t16;
+	if ($[30] !== onDelete) {
+		t16 = (event_1) => {
+			event_1.stopPropagation();
+			if (onDelete && (event_1.key === "Enter" || event_1.key === " ")) {
+				event_1.preventDefault();
+				onDelete(event_1);
+			}
+		};
+		$[30] = onDelete;
+		$[31] = t16;
+	} else t16 = $[31];
+	const handleKeyDownDelete = t16;
+	let t17;
+	if ($[32] !== onClick) {
+		t17 = (event_2) => {
+			if (onClick) {
+				event_2.preventDefault();
+				onClick(event_2);
+			}
+		};
+		$[32] = onClick;
+		$[33] = t17;
+	} else t17 = $[33];
+	const handleClick = t17;
+	let iconVariant = null;
+	if (variant === "include") iconVariant = "check_circle";
+	if (variant === "exclude") iconVariant = "do_not_disturb_on";
+	const t18 = ref;
+	const t19 = disabled ? void 0 : handleClick;
+	const t20 = disabled ? void 0 : handleKeyDownTag;
+	const t21 = onClick || onDelete ? "button" : void 0;
+	const t22 = disabled || !onClick && !onDelete ? void 0 : 0;
+	const t23 = typeof label === "string" ? label : void 0;
+	const t24 = onClick && selected && !disabled ? "true" : void 0;
+	let t25;
+	if ($[34] !== iconVariant || $[35] !== slots?.icon) {
+		t25 = (slots?.icon || iconVariant) && /* @__PURE__ */ jsx("span", {
+			className: classNames(ds_tag_module_default.icon),
+			children: slots?.icon ?? (iconVariant && /* @__PURE__ */ jsx(ds_icon_default, {
+				icon: iconVariant,
+				size: "tiny",
+				className: classNames(ds_tag_module_default.variantIcon)
+			}))
+		});
+		$[34] = iconVariant;
+		$[35] = slots?.icon;
+		$[36] = t25;
+	} else t25 = $[36];
+	const t26 = size === "small" ? "body-xs-reg" : "body-sm-reg";
+	let t27;
+	if ($[37] !== label || $[38] !== t26) {
+		t27 = /* @__PURE__ */ jsx(ds_typography_default, {
+			variant: t26,
+			className: ds_tag_module_default.label,
+			children: label
+		});
+		$[37] = label;
+		$[38] = t26;
+		$[39] = t27;
+	} else t27 = $[39];
+	let t28;
+	if ($[40] !== disabled || $[41] !== handleDeleteClick || $[42] !== handleKeyDownDelete || $[43] !== locale || $[44] !== onDelete) {
+		t28 = onDelete && !disabled && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: ds_tag_module_default.deleteButton,
+			onClick: handleDeleteClick,
+			onKeyDown: handleKeyDownDelete,
+			"aria-label": locale.deleteAriaLabel ?? "Delete tag",
+			tabIndex: 0,
+			children: /* @__PURE__ */ jsx(ds_icon_default, {
+				icon: "close",
+				size: "tiny"
+			})
+		});
+		$[40] = disabled;
+		$[41] = handleDeleteClick;
+		$[42] = handleKeyDownDelete;
+		$[43] = locale;
+		$[44] = onDelete;
+		$[45] = t28;
+	} else t28 = $[45];
+	let t29;
+	if ($[46] !== disabled || $[47] !== rest || $[48] !== style || $[49] !== t18 || $[50] !== t19 || $[51] !== t20 || $[52] !== t21 || $[53] !== t22 || $[54] !== t23 || $[55] !== t24 || $[56] !== t25 || $[57] !== t27 || $[58] !== t28 || $[59] !== tagClass) {
+		t29 = /* @__PURE__ */ jsxs("div", {
+			ref: t18,
+			className: tagClass,
+			style,
+			onClick: t19,
+			onKeyDown: t20,
+			role: t21,
+			tabIndex: t22,
+			"aria-label": t23,
+			"aria-pressed": t24,
+			"aria-disabled": disabled,
+			...rest,
+			children: [
+				t25,
+				t27,
+				t28
+			]
+		});
+		$[46] = disabled;
+		$[47] = rest;
+		$[48] = style;
+		$[49] = t18;
+		$[50] = t19;
+		$[51] = t20;
+		$[52] = t21;
+		$[53] = t22;
+		$[54] = t23;
+		$[55] = t24;
+		$[56] = t25;
+		$[57] = t27;
+		$[58] = t28;
+		$[59] = tagClass;
+		$[60] = t29;
+	} else t29 = $[60];
+	return t29;
+};
+var ds_tag_default = DsTag;
+
+//#endregion
+export { ds_tag_default as default };
+//# sourceMappingURL=ds-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tag.js","names":["KeyboardEvent","MouseEvent","Ref","classNames","styles","DsTagProps","DsIcon","DsTypography","DsTag","t0","$","_c","className","label","onClick","onDelete","ref","rest","slots","t1","t2","t3","t4","t5","t6","style","size","selected","variant","disabled","locale","t7","undefined","t8","t9","t10","t11","t12","t13","tag","clickable","include","exclude","tagClass","t14","event","stopPropagation","handleDeleteClick","t15","event_0","key","preventDefault","HTMLDivElement","handleKeyDownTag","t16","event_1","handleKeyDownDelete","t17","event_2","handleClick","iconVariant","t18","t19","t20","t21","t22","t23","t24","t25","icon","variantIcon","t26","t27","t28","deleteButton","deleteAriaLabel","t29"],"sources":["../../../src/components/ds-tag/ds-tag.tsx"],"sourcesContent":["import { type KeyboardEvent, type MouseEvent, type Ref } from 'react';\nimport classNames from 'classnames';\nimport styles from './ds-tag.module.scss';\nimport type { DsTagProps } from './ds-tag.types';\nimport { DsIcon } from '../ds-icon';\nimport { DsTypography } from '../ds-typography';\n\n/**\n * Design system Tag component\n */\nconst DsTag = ({\n\tref,\n\tlabel,\n\tclassName,\n\tstyle = {},\n\tsize = 'medium',\n\tselected = false,\n\tvariant = 'default',\n\tdisabled = false,\n\tlocale = {},\n\tonClick,\n\tonDelete,\n\tslots,\n\t...rest\n}: DsTagProps) => {\n\tconst tagClass = classNames(\n\t\tstyles.tag,\n\t\t{\n\t\t\t[styles.clickable]: onClick !== undefined && !disabled,\n\t\t\t[styles.selected]: selected && !disabled,\n\t\t\t[styles.include]: variant === 'include',\n\t\t\t[styles.exclude]: variant === 'exclude',\n\t\t\t[styles.disabled]: disabled,\n\t\t},\n\t\tclassName,\n\t);\n\n\tconst handleDeleteClick = (event: MouseEvent<HTMLElement>) => {\n\t\tevent.stopPropagation();\n\t\tonDelete?.(event);\n\t};\n\n\tconst handleKeyDownTag = (event: KeyboardEvent<HTMLElement>) => {\n\t\tif (onClick && (event.key === 'Enter' || event.key === ' ')) {\n\t\t\tevent.preventDefault();\n\t\t\tonClick(event as KeyboardEvent<HTMLDivElement>);\n\n\t\t\treturn;\n\t\t}\n\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\tconst handleKeyDownDelete = (event: KeyboardEvent<HTMLElement>) => {\n\t\tevent.stopPropagation();\n\n\t\tif (onDelete && (event.key === 'Enter' || event.key === ' ')) {\n\t\t\tevent.preventDefault();\n\t\t\tonDelete(event);\n\t\t}\n\t};\n\n\tconst handleClick = (event: MouseEvent<HTMLElement>) => {\n\t\tif (onClick) {\n\t\t\tevent.preventDefault();\n\t\t\tonClick(event as MouseEvent<HTMLDivElement>);\n\t\t}\n\t};\n\n\tlet iconVariant: 'do_not_disturb_on' | 'check_circle' | null = null;\n\n\tif (variant === 'include') {\n\t\ticonVariant = 'check_circle';\n\t}\n\n\tif (variant === 'exclude') {\n\t\ticonVariant = 'do_not_disturb_on';\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={ref as Ref<HTMLDivElement>}\n\t\t\tclassName={tagClass}\n\t\t\tstyle={style}\n\t\t\tonClick={disabled ? undefined : handleClick}\n\t\t\tonKeyDown={disabled ? undefined : handleKeyDownTag}\n\t\t\trole={onClick || onDelete ? 'button' : undefined}\n\t\t\ttabIndex={disabled || (!onClick && !onDelete) ? undefined : 0}\n\t\t\taria-label={typeof label === 'string' ? label : undefined}\n\t\t\taria-pressed={onClick && selected && !disabled ? 'true' : undefined}\n\t\t\taria-disabled={disabled}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{(slots?.icon || iconVariant) && (\n\t\t\t\t<span className={classNames(styles.icon)}>\n\t\t\t\t\t{slots?.icon ??\n\t\t\t\t\t\t(iconVariant && (\n\t\t\t\t\t\t\t<DsIcon icon={iconVariant} size=\"tiny\" className={classNames(styles.variantIcon)} />\n\t\t\t\t\t\t))}\n\t\t\t\t</span>\n\t\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 && !disabled && (\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\tonKeyDown={handleKeyDownDelete}\n\t\t\t\t\taria-label={locale.deleteAriaLabel ?? 'Delete tag'}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t>\n\t\t\t\t\t<DsIcon icon=\"close\" size=\"tiny\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default DsTag;\n"],"mappings":";;;;;;;;;;;;;;AAUA,MAAMQ,SAAQC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAd,EAAA,OAAAD,IAAA;AAAC,GAAA,CAAAO,KAAAH,OAAAD,WAAAa,OAAAN,IAAAO,MAAAN,IAAAO,UAAAN,IAAAO,SAAAN,IAAAO,UAAAN,IAAAO,QAAAN,IAAAV,SAAAC,UAAAG,UAAAD,QAAAR;AAcFC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;AAAAL,IAAA,KAAAM;AAAAN,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;AAAAR,IAAA,KAAAS;AAAAT,IAAA,KAAAU;AAAAV,IAAA,MAAAW;AAAAX,IAAA,MAAAY;AAAAZ,IAAA,MAAAa;AAAAb,IAAA,MAAAc;QAAA;AAAAZ,cAAAF,EAAA;AAAAG,UAAAH,EAAA;AAAAI,YAAAJ,EAAA;AAAAK,aAAAL,EAAA;AAAAM,QAAAN,EAAA;AAAAO,SAAAP,EAAA;AAAAQ,UAAAR,EAAA;AAAAS,OAAAT,EAAA;AAAAU,OAAAV,EAAA;AAAAW,OAAAX,EAAA;AAAAY,OAAAZ,EAAA;AAAAa,OAAAb,EAAA;AAAAc,OAAAd,EAAA;;CAAA,IAAAqB;AAAA,KAAArB,EAAA,QAAAS,IAAA;AAVZY,OAAAZ,OAAAa,SAAA,EAAU,GAAVb;AAAUT,IAAA,MAAAS;AAAAT,IAAA,MAAAqB;OAAAA,MAAArB,EAAA;CAAV,MAAAe,QAAAM;CACA,MAAAL,OAAAN,OAAAY,SAAA,WAAAZ;CACA,MAAAO,WAAAN,OAAAW,SAAA,QAAAX;CACA,MAAAO,UAAAN,OAAAU,SAAA,YAAAV;CACA,MAAAO,WAAAN,OAAAS,SAAA,QAAAT;CAAgB,IAAAU;AAAA,KAAAvB,EAAA,QAAAc,IAAA;AAChBS,OAAAT,OAAAQ,SAAA,EAAW,GAAXR;AAAWd,IAAA,MAAAc;AAAAd,IAAA,MAAAuB;OAAAA,MAAAvB,EAAA;CAAX,MAAAoB,SAAAG;CASsB,MAAAC,KAAApB,YAAYkB,UAAZ,CAA0BH;CAC3B,MAAAM,MAAAR,YAAA,CAAaE;CACd,MAAAO,MAAAR,YAAY;CACZ,MAAAS,MAAAT,YAAY;CAAS,IAAAU;AAAA,KAAA5B,EAAA,QAAAE,aAAAF,EAAA,QAAAmB,YAAAnB,EAAA,QAAAyB,OAAAzB,EAAA,QAAA0B,OAAA1B,EAAA,QAAA2B,OAAA3B,EAAA,QAAAwB,IAAA;AANxBI,QAAAnC,WAChBC,sBAAMmC,KACN;IACEnC,sBAAMoC,YAAaN;IACnB9B,sBAAMuB,WAAYQ;IAClB/B,sBAAMqC,UAAWL;IACjBhC,sBAAMsC,UAAWL;IACjBjC,sBAAMyB,WAAYA;GACnB,EACDjB,UACA;AAAAF,IAAA,MAAAE;AAAAF,IAAA,MAAAmB;AAAAnB,IAAA,MAAAyB;AAAAzB,IAAA,MAAA0B;AAAA1B,IAAA,MAAA2B;AAAA3B,IAAA,MAAAwB;AAAAxB,IAAA,MAAA4B;OAAAA,OAAA5B,EAAA;CAVD,MAAAiC,WAAiBL;CAUf,IAAAM;AAAA,KAAAlC,EAAA,QAAAK,UAAA;AAEwB6B,SAAAC,UAAA;AACzBA,SAAKC,iBAAkB;AACvB/B,cAAW8B,MAAM;;AACjBnC,IAAA,MAAAK;AAAAL,IAAA,MAAAkC;OAAAA,OAAAlC,EAAA;CAHD,MAAAqC,oBAA0BH;CAGxB,IAAAI;AAAA,KAAAtC,EAAA,QAAAI,WAAAJ,EAAA,QAAAK,UAAA;AAEuBiC,SAAAC,YAAA;AACxB,OAAInC,YAAY+B,QAAKK,QAAS,WAAWL,QAAKK,QAAS,MAAI;AAC1DL,YAAKM,gBAAiB;AACtBrC,YAAQ+B,QAAuC;AAAA;;AAKhD,OAAI9B,aAAa8B,QAAKK,QAAS,eAAeL,QAAKK,QAAS,WAAS;AACpEL,YAAKM,gBAAiB;AACtBpC,aAAS8B,QAAM;;;AAEhBnC,IAAA,MAAAI;AAAAJ,IAAA,MAAAK;AAAAL,IAAA,MAAAsC;OAAAA,OAAAtC,EAAA;CAZD,MAAA2C,mBAAyBL;CAYvB,IAAAM;AAAA,KAAA5C,EAAA,QAAAK,UAAA;AAE0BuC,SAAAC,YAAA;AAC3BV,WAAKC,iBAAkB;AAEvB,OAAI/B,aAAa8B,QAAKK,QAAS,WAAWL,QAAKK,QAAS,MAAI;AAC3DL,YAAKM,gBAAiB;AACtBpC,aAAS8B,QAAM;;;AAEhBnC,IAAA,MAAAK;AAAAL,IAAA,MAAA4C;OAAAA,OAAA5C,EAAA;CAPD,MAAA8C,sBAA4BF;CAO1B,IAAAG;AAAA,KAAA/C,EAAA,QAAAI,SAAA;AAEkB2C,SAAAC,YAAA;AACnB,OAAI5C,SAAO;AACV+B,YAAKM,gBAAiB;AACtBrC,YAAQ+B,QAAoC;;;AAE7CnC,IAAA,MAAAI;AAAAJ,IAAA,MAAA+C;OAAAA,OAAA/C,EAAA;CALD,MAAAiD,cAAoBF;CAOpB,IAAAG,cAA+D;AAE/D,KAAIhC,YAAY,UACfgC,eAAcA;AAGf,KAAIhC,YAAY,UACfgC,eAAcA;CAKR,MAAAC,MAAA7C;CAGI,MAAA8C,MAAAjC,WAAAG,SAAA2B;CACE,MAAAI,MAAAlC,WAAAG,SAAAqB;CACL,MAAAW,MAAAlD,WAAAC,WAAA,WAAAiB;CACI,MAAAiC,MAAApC,YAAa,CAACf,WAAD,CAAaC,WAA1BiB,SAAA;CACE,MAAAkC,MAAA,OAAOrD,UAAU,WAAjBA,QAAAmB;CACE,MAAAmC,MAAArD,WAAAa,YAAA,CAAwBE,WAAxB,SAAAG;CAAqD,IAAAoC;AAAA,KAAA1D,EAAA,QAAAkD,eAAAlD,EAAA,QAAAQ,OAAAmD,MAAA;AAIlED,SAAClD,OAAKmD,QAALT,gBACD,oBAAA;GAAiB,WAAAzD,WAAWC,sBAAMiE,KAAK;aACrCnD,OAAKmD,SACJT,eACA,oBAAC;IAAaA,MAAAA;IAAkB,MAAA;IAAkB,WAAAzD,WAAWC,sBAAMkE,YAAY;KAC9E;IAEJ;AAAA5D,IAAA,MAAAkD;AAAAlD,IAAA,MAAAQ,OAAAmD;AAAA3D,IAAA,MAAA0D;OAAAA,OAAA1D,EAAA;CACsB,MAAA6D,MAAA7C,SAAS,UAAT,gBAAA;CAAgD,IAAA8C;AAAA,KAAA9D,EAAA,QAAAG,SAAAH,EAAA,QAAA6D,KAAA;AAAvEC,QAAA,oBAAC;GAAsB,SAAAD;GAA6D,WAAAnE,sBAAMS;aACxFA;IACa;AAAAH,IAAA,MAAAG;AAAAH,IAAA,MAAA6D;AAAA7D,IAAA,MAAA8D;OAAAA,OAAA9D,EAAA;CAAA,IAAA+D;AAAA,KAAA/D,EAAA,QAAAmB,YAAAnB,EAAA,QAAAqC,qBAAArC,EAAA,QAAA8C,uBAAA9C,EAAA,QAAAoB,UAAApB,EAAA,QAAAK,UAAA;AACd0D,QAAA1D,YAAA,CAAac,YACb,oBAAA;GACM,MAAA;GACM,WAAAzB,sBAAMsE;GACR3B,SAAAA;GACES,WAAAA;GACC,cAAA1B,OAAM6C,mBAAN;GACF,UAAA;aAEV,oBAAC;IAAY,MAAA;IAAa,MAAA;KAC3B;IACA;AAAAjE,IAAA,MAAAmB;AAAAnB,IAAA,MAAAqC;AAAArC,IAAA,MAAA8C;AAAA9C,IAAA,MAAAoB;AAAApB,IAAA,MAAAK;AAAAL,IAAA,MAAA+D;OAAAA,OAAA/D,EAAA;CAAA,IAAAkE;AAAA,KAAAlE,EAAA,QAAAmB,YAAAnB,EAAA,QAAAO,QAAAP,EAAA,QAAAe,SAAAf,EAAA,QAAAmD,OAAAnD,EAAA,QAAAoD,OAAApD,EAAA,QAAAqD,OAAArD,EAAA,QAAAsD,OAAAtD,EAAA,QAAAuD,OAAAvD,EAAA,QAAAwD,OAAAxD,EAAA,QAAAyD,OAAAzD,EAAA,QAAA0D,OAAA1D,EAAA,QAAA8D,OAAA9D,EAAA,QAAA+D,OAAA/D,EAAA,QAAAiC,UAAA;AAnCFiC,QAAA,qBAAA;GACM,KAAAf;GACMlB,WAAAA;GACJlB;GACE,SAAAqC;GACE,WAAAC;GACL,MAAAC;GACI,UAAAC;GACE,cAAAC;GACE,gBAAAC;GACCtC,iBAAAA;GAAQ,GACnBZ;;IAEHmD;IAQDI;IAGCC;;IAYI;AAAA/D,IAAA,MAAAmB;AAAAnB,IAAA,MAAAO;AAAAP,IAAA,MAAAe;AAAAf,IAAA,MAAAmD;AAAAnD,IAAA,MAAAoD;AAAApD,IAAA,MAAAqD;AAAArD,IAAA,MAAAsD;AAAAtD,IAAA,MAAAuD;AAAAvD,IAAA,MAAAwD;AAAAxD,IAAA,MAAAyD;AAAAzD,IAAA,MAAA0D;AAAA1D,IAAA,MAAA8D;AAAA9D,IAAA,MAAA+D;AAAA/D,IAAA,MAAAiC;AAAAjC,IAAA,MAAAkE;OAAAA,OAAAlE,EAAA;AAAA,QApCNkE;;AAwCF,qBAAepE"}

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

@@ -0,0 +1,17 @@
+
+//#region src/components/ds-tag/ds-tag.module.scss
+var ds_tag_module_default = {
+	"tag": "_tag_1tyo9_1",
+	"clickable": "_clickable_1tyo9_1",
+	"selected": "_selected_1tyo9_1",
+	"deleteButton": "_deleteButton_1tyo9_1",
+	"include": "_include_1tyo9_1",
+	"variantIcon": "_variantIcon_1tyo9_1",
+	"exclude": "_exclude_1tyo9_1",
+	"disabled": "_disabled_1tyo9_1",
+	"label": "_label_1tyo9_1",
+	"icon": "_icon_1tyo9_1"
+};
+
+//#endregion
+exports.default = ds_tag_module_default;

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

@@ -0,0 +1,17 @@
+//#region src/components/ds-tag/ds-tag.module.scss
+var ds_tag_module_default = {
+	"tag": "_tag_1tyo9_1",
+	"clickable": "_clickable_1tyo9_1",
+	"selected": "_selected_1tyo9_1",
+	"deleteButton": "_deleteButton_1tyo9_1",
+	"include": "_include_1tyo9_1",
+	"variantIcon": "_variantIcon_1tyo9_1",
+	"exclude": "_exclude_1tyo9_1",
+	"disabled": "_disabled_1tyo9_1",
+	"label": "_label_1tyo9_1",
+	"icon": "_icon_1tyo9_1"
+};
+
+//#endregion
+export { ds_tag_module_default as default };
+//# sourceMappingURL=ds-tag.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tag.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-tag/ds-tag.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n\n.tag {\n\t--transition-duration: 200ms;\n\n\tdisplay: inline-flex;\n\toutline: 2px solid transparent;\n\talign-items: center;\n\tborder-radius: 4px;\n\tcursor: default;\n\toverflow: hidden;\n\tposition: relative;\n\tpadding: var(--spacing-3xs) var(--spacing-xs);\n\tbackground: var(--color-background);\n\tborder: 1px solid var(--color-border-contrast);\n\ttransition-property:\n\t\tbackground, border-color, width, max-width, color, fill, stroke, opacity, transform, outline-color,\n\t\topacity, visibility;\n\ttransition-timing-function: ease-out;\n\ttransition-duration: var(--transition-duration);\n\n\t&.clickable {\n\t\tcursor: pointer;\n\n\t\t&:hover {\n\t\t\tbackground: var(--color-background-secondary);\n\t\t\tborder-color: var(--color-border-action-secondary-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline-color: var(--color-border-action-secondary);\n\t\t}\n\t}\n\n\t&.selected {\n\t\tbackground: var(--color-background-selected-weak) !important;\n\t\tborder-color: var(--color-border-action-primary) !important;\n\n\t\t&:focus-visible {\n\t\t\toutline-color: var(--color-border-action-primary);\n\t\t}\n\n\t\t.deleteButton {\n\t\t\toutline-color: var(--color-border-action-primary);\n\t\t}\n\t}\n\n\t&.include {\n\t\t.variantIcon {\n\t\t\tcolor: var(--color-icon-secondary);\n\t\t}\n\t}\n\n\t&.exclude {\n\t\t.variantIcon {\n\t\t\tcolor: var(--color-icon-danger);\n\t\t}\n\t}\n\n\t&.disabled {\n\t\tcursor: not-allowed;\n\t\tcolor: var(--color-font-disabled);\n\t\tbackground: var(--color-background);\n\t\tborder-color: var(--color-border-contrast);\n\n\t\t.label {\n\t\t\tcolor: var(--color-font-disabled);\n\t\t}\n\n\t\t.variantIcon {\n\t\t\tcolor: var(--color-font-disabled);\n\t\t}\n\t}\n\n\t.deleteButton {\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\t\tmax-width: 0;\n\t\tdisplay: flex;\n\t\toutline-color: var(--color-border-action-secondary);\n\t\tuser-select: none;\n\t\ttransition-property:\n\t\t\tbackground, border-color, width, max-width, color, fill, stroke, opacity, transform, outline-color,\n\t\t\tvisibility, margin-left;\n\t\ttransition-timing-function: ease-out;\n\t\ttransition-duration: var(--transition-duration);\n\t\tcolor: var(--color-icon-secondary);\n\n\t\t&:hover {\n\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t}\n\t}\n\n\t&:hover:not(.disabled) .deleteButton,\n\t&:focus-within:not(.disabled) .deleteButton,\n\t&.selected:not(.disabled) .deleteButton {\n\t\topacity: 1;\n\t\tvisibility: visible;\n\t\tmax-width: 50px;\n\t\tmargin-left: var(--spacing-3xs);\n\t}\n}\n\n.label {\n\t@include typography.ellipsis;\n}\n\n.icon {\n\tflex-shrink: 0;\n\tdisplay: flex;\n\tmargin-right: var(--spacing-3xs);\n}\n"],"mappings":""}

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