@drivenets/design-system 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @drivenets/design-system
 
+## 0.4.0
+
+### Minor Changes
+
+- 888480d: Fix tab not closing
+- f924d2f: - Add layout and variant (info) props to `DsModal`
+  - Deprecate `DsConfirmation`
+- 8e01acd: Add `DSAutocomplete` component
+
+### Patch Changes
+
+- 87f96dd: Fix dropdown z-index issue
+- 6d5f4f0: Add support for controlled table filters
+
+## 0.3.0
+
+### Minor Changes
+
+- 072854f: Add `DsTabs` component
+- f36f9f4: - Add `DsSkeleton` component
+  - Add `DsLoader` component
+
+### Patch Changes
+
+- 393cf6d: Fix the date input min-width
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -16,7 +16,7 @@ yarn add @drivenets/design-system
 
 Then, import the css styles in your application root (e.g., `main.tsx` or `App.tsx`):
 
-```TSX
+```typescript
 import '@drivenets/design-system/index.min.css';
 ```
 

package/dist/components/ds-alert-banner/ds-alert-banner.d.ts

@@ -1,5 +1,5 @@
 import { DsAlertBannerProps } from "./ds-alert-banner.types.js";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { CSSProperties, ReactNode } from "react";
 
 //#region src/components/ds-alert-banner/ds-alert-banner.d.ts
@@ -19,7 +19,7 @@ declare const DsAlertBanner: {
     className,
     style,
     children
-  }: DsAlertBannerProps): react_jsx_runtime14.JSX.Element | null;
+  }: DsAlertBannerProps): react_jsx_runtime0.JSX.Element | null;
   Title: ({
     style,
     className,
@@ -28,7 +28,7 @@ declare const DsAlertBanner: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime14.JSX.Element;
+  }) => react_jsx_runtime0.JSX.Element;
   Body: ({
     style,
     className,
@@ -37,7 +37,7 @@ declare const DsAlertBanner: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime14.JSX.Element;
+  }) => react_jsx_runtime0.JSX.Element;
   Actions: ({
     style,
     className,
@@ -46,7 +46,7 @@ declare const DsAlertBanner: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime14.JSX.Element;
+  }) => react_jsx_runtime0.JSX.Element;
 };
 //#endregion
 export { DsAlertBanner };

package/dist/components/ds-alert-banner/ds-alert-banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-alert-banner.d.ts","names":[],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAGkE;cAQ5D;;;;;;;;;;;KAUH,qBAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;YAoDZ;;cAEE;QACV,mBAAA,CAAA,GAAA,CAAA;;;;;;YAWQ;IAlEN,SAAA,CAAA,EAAA,MAAA;IAAkB,QAAA,EAoEV,SApEU;QAqEpB,mBAAA,CAAA,GAAA,CAAA;;;;;EAdA;YAyBQ;IA5BA,SAAA,CAAA,EAAA,MAAA;IAEE,QAAA,EA4BA,SA5BA;EACV,CAAA,EAAA,GA4BA,mBAAA,CAAA,GAAA,CAAA,OA5BA"}
+{"version":3,"file":"ds-alert-banner.d.ts","names":[],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAGkE;cAQ5D;;;;;;;;;;;KAUH,qBAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;YAoDZ;;cAEE;QACV,kBAAA,CAAA,GAAA,CAAA;;;;;;YAWQ;IAlEN,SAAA,CAAA,EAAA,MAAA;IAAkB,QAAA,EAoEV,SApEU;QAqEpB,kBAAA,CAAA,GAAA,CAAA;;;;;EAdA;YAyBQ;IA5BA,SAAA,CAAA,EAAA,MAAA;IAEE,QAAA,EA4BA,SA5BA;EACV,CAAA,EAAA,GA4BA,kBAAA,CAAA,GAAA,CAAA,OA5BA"}

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

@@ -0,0 +1,218 @@
+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_autocomplete_module = require('./ds-autocomplete.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_combobox = require("@ark-ui/react/combobox");
+let __ark_ui_react_locale = require("@ark-ui/react/locale");
+let __ark_ui_react_highlight = require("@ark-ui/react/highlight");
+let __ark_ui_react_portal = require("@ark-ui/react/portal");
+
+//#region src/components/ds-autocomplete/ds-autocomplete.tsx
+const DsAutocomplete = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(45);
+	const { id, options, style, className, placeholder: t1, disabled: t2, invalid: t3, onValueChange, onInputValueChange, noMatchesMessage: t4, highlightMatch: t5, showTrigger: t6, startAdornment } = t0;
+	const placeholder = t1 === void 0 ? "Start typing to search..." : t1;
+	const disabled = t2 === void 0 ? false : t2;
+	const invalid = t3 === void 0 ? false : t3;
+	const noMatchesMessage = t4 === void 0 ? "No matches found" : t4;
+	const highlightMatch = t5 === void 0 ? true : t5;
+	const showTrigger = t6 === void 0 ? true : t6;
+	let t7;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { sensitivity: "base" };
+		$[0] = t7;
+	} else t7 = $[0];
+	const filterUtils = (0, __ark_ui_react_locale.useFilter)(t7);
+	let t8;
+	if ($[1] !== options) {
+		t8 = options.map(_temp);
+		$[1] = options;
+		$[2] = t8;
+	} else t8 = $[2];
+	let t9;
+	if ($[3] !== filterUtils) {
+		t9 = (item, query) => filterUtils.contains(item, query);
+		$[3] = filterUtils;
+		$[4] = t9;
+	} else t9 = $[4];
+	let t10;
+	if ($[5] !== t8 || $[6] !== t9) {
+		t10 = {
+			initialItems: t8,
+			filter: t9
+		};
+		$[5] = t8;
+		$[6] = t9;
+		$[7] = t10;
+	} else t10 = $[7];
+	const { collection, filter } = (0, __ark_ui_react_combobox.useListCollection)(t10);
+	let t11;
+	if ($[8] !== filter || $[9] !== onInputValueChange) {
+		t11 = (details) => {
+			filter(details.inputValue);
+			onInputValueChange?.(details.inputValue);
+		};
+		$[8] = filter;
+		$[9] = onInputValueChange;
+		$[10] = t11;
+	} else t11 = $[10];
+	const handleInputValueChange = t11;
+	let t12;
+	if ($[11] !== onValueChange || $[12] !== options) {
+		t12 = (details_0) => {
+			const selectedLabel = details_0.value[0];
+			if (!selectedLabel) return;
+			const selectedOption = options.find((opt_0) => opt_0.label === selectedLabel);
+			if (selectedOption) onValueChange?.(selectedOption.value);
+		};
+		$[11] = onValueChange;
+		$[12] = options;
+		$[13] = t12;
+	} else t12 = $[13];
+	const handleValueChange = t12;
+	let t13;
+	if ($[14] !== className || $[15] !== disabled || $[16] !== invalid) {
+		t13 = (0, classnames.default)(require_ds_autocomplete_module.default.root, {
+			[require_ds_autocomplete_module.default.disabled]: disabled,
+			[require_ds_autocomplete_module.default.invalid]: invalid
+		}, className);
+		$[14] = className;
+		$[15] = disabled;
+		$[16] = invalid;
+		$[17] = t13;
+	} else t13 = $[17];
+	const rootClass = t13;
+	let t14;
+	if ($[18] !== startAdornment) {
+		t14 = startAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_ds_autocomplete_module.default.startAdornment,
+			children: startAdornment
+		});
+		$[18] = startAdornment;
+		$[19] = t14;
+	} else t14 = $[19];
+	let t15;
+	if ($[20] !== placeholder) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_combobox.Combobox.Input, {
+			className: require_ds_autocomplete_module.default.input,
+			placeholder
+		});
+		$[20] = placeholder;
+		$[21] = t15;
+	} else t15 = $[21];
+	let t16;
+	if ($[22] !== disabled || $[23] !== showTrigger) {
+		t16 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_combobox.Combobox.Context, { children: (context) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_ds_autocomplete_module.default.iconContainer,
+			children: [context.inputValue && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_combobox.Combobox.ClearTrigger, {
+				className: require_ds_autocomplete_module.default.clearButton,
+				"aria-label": "Clear",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "close",
+					size: "medium"
+				})
+			}), showTrigger && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_combobox.Combobox.Trigger, {
+				className: require_ds_autocomplete_module.default.trigger,
+				"aria-label": "Toggle dropdown",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "keyboard_arrow_down",
+					size: "medium"
+				})
+			})]
+		}) });
+		$[22] = disabled;
+		$[23] = showTrigger;
+		$[24] = t16;
+	} else t16 = $[24];
+	let t17;
+	if ($[25] !== t14 || $[26] !== t15 || $[27] !== t16) {
+		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_combobox.Combobox.Control, {
+			className: require_ds_autocomplete_module.default.control,
+			children: [
+				t14,
+				t15,
+				t16
+			]
+		});
+		$[25] = t14;
+		$[26] = t15;
+		$[27] = t16;
+		$[28] = t17;
+	} else t17 = $[28];
+	let t18;
+	if ($[29] !== collection.items || $[30] !== highlightMatch || $[31] !== noMatchesMessage || $[32] !== options) {
+		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_combobox.Combobox.Positioner, {
+			className: require_ds_autocomplete_module.default.positioner,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_combobox.Combobox.Content, {
+				className: require_ds_autocomplete_module.default.content,
+				children: collection.items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_ds_autocomplete_module.default.noMatches,
+					children: noMatchesMessage
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_combobox.Combobox.ItemGroup, {
+					className: require_ds_autocomplete_module.default.itemGroup,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_combobox.Combobox.Context, { children: (context_0) => collection.items.map((item_0) => {
+						const option = options.find((opt_1) => opt_1.label === item_0);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_combobox.Combobox.Item, {
+							item: item_0,
+							className: require_ds_autocomplete_module.default.item,
+							children: [option?.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+								className: require_ds_autocomplete_module.default.itemIcon,
+								icon: option.icon,
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_combobox.Combobox.ItemText, {
+								className: require_ds_autocomplete_module.default.itemText,
+								children: highlightMatch ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_highlight.Highlight, {
+									query: context_0.inputValue,
+									text: item_0,
+									ignoreCase: true
+								}) : item_0
+							})]
+						}, item_0);
+					}) })
+				})
+			})
+		}) });
+		$[29] = collection.items;
+		$[30] = highlightMatch;
+		$[31] = noMatchesMessage;
+		$[32] = options;
+		$[33] = t18;
+	} else t18 = $[33];
+	let t19;
+	if ($[34] !== collection || $[35] !== disabled || $[36] !== handleInputValueChange || $[37] !== handleValueChange || $[38] !== id || $[39] !== invalid || $[40] !== rootClass || $[41] !== style || $[42] !== t17 || $[43] !== t18) {
+		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_combobox.Combobox.Root, {
+			id,
+			collection,
+			className: rootClass,
+			style,
+			disabled,
+			invalid,
+			onInputValueChange: handleInputValueChange,
+			onValueChange: handleValueChange,
+			closeOnSelect: true,
+			children: [t17, t18]
+		});
+		$[34] = collection;
+		$[35] = disabled;
+		$[36] = handleInputValueChange;
+		$[37] = handleValueChange;
+		$[38] = id;
+		$[39] = invalid;
+		$[40] = rootClass;
+		$[41] = style;
+		$[42] = t17;
+		$[43] = t18;
+		$[44] = t19;
+	} else t19 = $[44];
+	return t19;
+};
+function _temp(opt) {
+	return opt.label;
+}
+
+//#endregion
+exports.DsAutocomplete = DsAutocomplete;

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

@@ -0,0 +1,22 @@
+import { DsAutocompleteProps } from "./ds-autocomplete.types.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ds-autocomplete/ds-autocomplete.d.ts
+declare const DsAutocomplete: ({
+  id,
+  options,
+  style,
+  className,
+  placeholder,
+  disabled,
+  invalid,
+  onValueChange,
+  onInputValueChange,
+  noMatchesMessage,
+  highlightMatch,
+  showTrigger,
+  startAdornment
+}: DsAutocompleteProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DsAutocomplete };
+//# sourceMappingURL=ds-autocomplete.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-autocomplete.d.cts","names":[],"sources":["../../../src/components/ds-autocomplete/ds-autocomplete.tsx"],"sourcesContent":[],"mappings":";;;;cASa;;;;;;;;;;;;;;GAcV,wBAAmB,kBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,22 @@
+import { DsAutocompleteProps } from "./ds-autocomplete.types.js";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+
+//#region src/components/ds-autocomplete/ds-autocomplete.d.ts
+declare const DsAutocomplete: ({
+  id,
+  options,
+  style,
+  className,
+  placeholder,
+  disabled,
+  invalid,
+  onValueChange,
+  onInputValueChange,
+  noMatchesMessage,
+  highlightMatch,
+  showTrigger,
+  startAdornment
+}: DsAutocompleteProps) => react_jsx_runtime12.JSX.Element;
+//#endregion
+export { DsAutocomplete };
+//# sourceMappingURL=ds-autocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-autocomplete.d.ts","names":[],"sources":["../../../src/components/ds-autocomplete/ds-autocomplete.tsx"],"sourcesContent":[],"mappings":";;;;cASa;;;;;;;;;;;;;;GAcV,wBAAmB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,217 @@
+import ds_icon_default from "../ds-icon/ds-icon.js";
+import "../ds-icon/index.js";
+import ds_autocomplete_module_default from "./ds-autocomplete.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox, useListCollection } from "@ark-ui/react/combobox";
+import { useFilter } from "@ark-ui/react/locale";
+import { Highlight } from "@ark-ui/react/highlight";
+import { Portal } from "@ark-ui/react/portal";
+
+//#region src/components/ds-autocomplete/ds-autocomplete.tsx
+const DsAutocomplete = (t0) => {
+	const $ = c(45);
+	const { id, options, style, className, placeholder: t1, disabled: t2, invalid: t3, onValueChange, onInputValueChange, noMatchesMessage: t4, highlightMatch: t5, showTrigger: t6, startAdornment } = t0;
+	const placeholder = t1 === void 0 ? "Start typing to search..." : t1;
+	const disabled = t2 === void 0 ? false : t2;
+	const invalid = t3 === void 0 ? false : t3;
+	const noMatchesMessage = t4 === void 0 ? "No matches found" : t4;
+	const highlightMatch = t5 === void 0 ? true : t5;
+	const showTrigger = t6 === void 0 ? true : t6;
+	let t7;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { sensitivity: "base" };
+		$[0] = t7;
+	} else t7 = $[0];
+	const filterUtils = useFilter(t7);
+	let t8;
+	if ($[1] !== options) {
+		t8 = options.map(_temp);
+		$[1] = options;
+		$[2] = t8;
+	} else t8 = $[2];
+	let t9;
+	if ($[3] !== filterUtils) {
+		t9 = (item, query) => filterUtils.contains(item, query);
+		$[3] = filterUtils;
+		$[4] = t9;
+	} else t9 = $[4];
+	let t10;
+	if ($[5] !== t8 || $[6] !== t9) {
+		t10 = {
+			initialItems: t8,
+			filter: t9
+		};
+		$[5] = t8;
+		$[6] = t9;
+		$[7] = t10;
+	} else t10 = $[7];
+	const { collection, filter } = useListCollection(t10);
+	let t11;
+	if ($[8] !== filter || $[9] !== onInputValueChange) {
+		t11 = (details) => {
+			filter(details.inputValue);
+			onInputValueChange?.(details.inputValue);
+		};
+		$[8] = filter;
+		$[9] = onInputValueChange;
+		$[10] = t11;
+	} else t11 = $[10];
+	const handleInputValueChange = t11;
+	let t12;
+	if ($[11] !== onValueChange || $[12] !== options) {
+		t12 = (details_0) => {
+			const selectedLabel = details_0.value[0];
+			if (!selectedLabel) return;
+			const selectedOption = options.find((opt_0) => opt_0.label === selectedLabel);
+			if (selectedOption) onValueChange?.(selectedOption.value);
+		};
+		$[11] = onValueChange;
+		$[12] = options;
+		$[13] = t12;
+	} else t12 = $[13];
+	const handleValueChange = t12;
+	let t13;
+	if ($[14] !== className || $[15] !== disabled || $[16] !== invalid) {
+		t13 = classNames(ds_autocomplete_module_default.root, {
+			[ds_autocomplete_module_default.disabled]: disabled,
+			[ds_autocomplete_module_default.invalid]: invalid
+		}, className);
+		$[14] = className;
+		$[15] = disabled;
+		$[16] = invalid;
+		$[17] = t13;
+	} else t13 = $[17];
+	const rootClass = t13;
+	let t14;
+	if ($[18] !== startAdornment) {
+		t14 = startAdornment && /* @__PURE__ */ jsx("span", {
+			className: ds_autocomplete_module_default.startAdornment,
+			children: startAdornment
+		});
+		$[18] = startAdornment;
+		$[19] = t14;
+	} else t14 = $[19];
+	let t15;
+	if ($[20] !== placeholder) {
+		t15 = /* @__PURE__ */ jsx(Combobox.Input, {
+			className: ds_autocomplete_module_default.input,
+			placeholder
+		});
+		$[20] = placeholder;
+		$[21] = t15;
+	} else t15 = $[21];
+	let t16;
+	if ($[22] !== disabled || $[23] !== showTrigger) {
+		t16 = /* @__PURE__ */ jsx(Combobox.Context, { children: (context) => /* @__PURE__ */ jsxs("div", {
+			className: ds_autocomplete_module_default.iconContainer,
+			children: [context.inputValue && !disabled && /* @__PURE__ */ jsx(Combobox.ClearTrigger, {
+				className: ds_autocomplete_module_default.clearButton,
+				"aria-label": "Clear",
+				children: /* @__PURE__ */ jsx(ds_icon_default, {
+					icon: "close",
+					size: "medium"
+				})
+			}), showTrigger && /* @__PURE__ */ jsx(Combobox.Trigger, {
+				className: ds_autocomplete_module_default.trigger,
+				"aria-label": "Toggle dropdown",
+				children: /* @__PURE__ */ jsx(ds_icon_default, {
+					icon: "keyboard_arrow_down",
+					size: "medium"
+				})
+			})]
+		}) });
+		$[22] = disabled;
+		$[23] = showTrigger;
+		$[24] = t16;
+	} else t16 = $[24];
+	let t17;
+	if ($[25] !== t14 || $[26] !== t15 || $[27] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Combobox.Control, {
+			className: ds_autocomplete_module_default.control,
+			children: [
+				t14,
+				t15,
+				t16
+			]
+		});
+		$[25] = t14;
+		$[26] = t15;
+		$[27] = t16;
+		$[28] = t17;
+	} else t17 = $[28];
+	let t18;
+	if ($[29] !== collection.items || $[30] !== highlightMatch || $[31] !== noMatchesMessage || $[32] !== options) {
+		t18 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			className: ds_autocomplete_module_default.positioner,
+			children: /* @__PURE__ */ jsx(Combobox.Content, {
+				className: ds_autocomplete_module_default.content,
+				children: collection.items.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: ds_autocomplete_module_default.noMatches,
+					children: noMatchesMessage
+				}) : /* @__PURE__ */ jsx(Combobox.ItemGroup, {
+					className: ds_autocomplete_module_default.itemGroup,
+					children: /* @__PURE__ */ jsx(Combobox.Context, { children: (context_0) => collection.items.map((item_0) => {
+						const option = options.find((opt_1) => opt_1.label === item_0);
+						return /* @__PURE__ */ jsxs(Combobox.Item, {
+							item: item_0,
+							className: ds_autocomplete_module_default.item,
+							children: [option?.icon && /* @__PURE__ */ jsx(ds_icon_default, {
+								className: ds_autocomplete_module_default.itemIcon,
+								icon: option.icon,
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ jsx(Combobox.ItemText, {
+								className: ds_autocomplete_module_default.itemText,
+								children: highlightMatch ? /* @__PURE__ */ jsx(Highlight, {
+									query: context_0.inputValue,
+									text: item_0,
+									ignoreCase: true
+								}) : item_0
+							})]
+						}, item_0);
+					}) })
+				})
+			})
+		}) });
+		$[29] = collection.items;
+		$[30] = highlightMatch;
+		$[31] = noMatchesMessage;
+		$[32] = options;
+		$[33] = t18;
+	} else t18 = $[33];
+	let t19;
+	if ($[34] !== collection || $[35] !== disabled || $[36] !== handleInputValueChange || $[37] !== handleValueChange || $[38] !== id || $[39] !== invalid || $[40] !== rootClass || $[41] !== style || $[42] !== t17 || $[43] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Combobox.Root, {
+			id,
+			collection,
+			className: rootClass,
+			style,
+			disabled,
+			invalid,
+			onInputValueChange: handleInputValueChange,
+			onValueChange: handleValueChange,
+			closeOnSelect: true,
+			children: [t17, t18]
+		});
+		$[34] = collection;
+		$[35] = disabled;
+		$[36] = handleInputValueChange;
+		$[37] = handleValueChange;
+		$[38] = id;
+		$[39] = invalid;
+		$[40] = rootClass;
+		$[41] = style;
+		$[42] = t17;
+		$[43] = t18;
+		$[44] = t19;
+	} else t19 = $[44];
+	return t19;
+};
+function _temp(opt) {
+	return opt.label;
+}
+
+//#endregion
+export { DsAutocomplete };
+//# sourceMappingURL=ds-autocomplete.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-autocomplete.js","names":["Combobox","useListCollection","useFilter","Highlight","Portal","classNames","styles","DsAutocompleteProps","DsIcon","DsAutocomplete","t0","$","_c","id","options","style","className","placeholder","t1","disabled","t2","invalid","t3","onValueChange","onInputValueChange","noMatchesMessage","t4","highlightMatch","t5","showTrigger","t6","startAdornment","undefined","t7","Symbol","for","sensitivity","filterUtils","t8","map","_temp","t9","item","query","contains","t10","initialItems","filter","collection","t11","details","inputValue","handleInputValueChange","t12","details_0","selectedLabel","value","selectedOption","find","opt_0","opt","label","handleValueChange","t13","root","rootClass","t14","t15","input","t16","context","iconContainer","clearButton","trigger","t17","control","t18","items","positioner","content","length","noMatches","itemGroup","context_0","item_0","option","opt_1","icon","itemIcon","itemText","t19"],"sources":["../../../src/components/ds-autocomplete/ds-autocomplete.tsx"],"sourcesContent":["import { Combobox, useListCollection } from '@ark-ui/react/combobox';\nimport { useFilter } from '@ark-ui/react/locale';\nimport { Highlight } from '@ark-ui/react/highlight';\nimport { Portal } from '@ark-ui/react/portal';\nimport classNames from 'classnames';\nimport styles from './ds-autocomplete.module.scss';\nimport type { DsAutocompleteProps } from './ds-autocomplete.types';\nimport { DsIcon } from '../ds-icon';\n\nexport const DsAutocomplete = ({\n\tid,\n\toptions,\n\tstyle,\n\tclassName,\n\tplaceholder = 'Start typing to search...',\n\tdisabled = false,\n\tinvalid = false,\n\tonValueChange,\n\tonInputValueChange,\n\tnoMatchesMessage = 'No matches found',\n\thighlightMatch = true,\n\tshowTrigger = true,\n\tstartAdornment,\n}: DsAutocompleteProps) => {\n\tconst filterUtils = useFilter({ sensitivity: 'base' });\n\n\tconst { collection, filter } = useListCollection({\n\t\tinitialItems: options.map((opt) => opt.label),\n\t\tfilter: (item, query) => filterUtils.contains(item, query),\n\t});\n\n\tconst handleInputValueChange = (details: Combobox.InputValueChangeDetails) => {\n\t\tfilter(details.inputValue);\n\t\tonInputValueChange?.(details.inputValue);\n\t};\n\n\tconst handleValueChange = (details: Combobox.ValueChangeDetails) => {\n\t\tconst selectedLabel = details.value[0];\n\t\tif (!selectedLabel) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectedOption = options.find((opt) => opt.label === selectedLabel);\n\n\t\tif (selectedOption) {\n\t\t\tonValueChange?.(selectedOption.value);\n\t\t}\n\t};\n\n\tconst rootClass = classNames(\n\t\tstyles.root,\n\t\t{\n\t\t\t[styles.disabled]: disabled,\n\t\t\t[styles.invalid]: invalid,\n\t\t},\n\t\tclassName,\n\t);\n\n\treturn (\n\t\t<Combobox.Root\n\t\t\tid={id}\n\t\t\tcollection={collection}\n\t\t\tclassName={rootClass}\n\t\t\tstyle={style}\n\t\t\tdisabled={disabled}\n\t\t\tinvalid={invalid}\n\t\t\tonInputValueChange={handleInputValueChange}\n\t\t\tonValueChange={handleValueChange}\n\t\t\tcloseOnSelect\n\t\t>\n\t\t\t<Combobox.Control className={styles.control}>\n\t\t\t\t{startAdornment && <span className={styles.startAdornment}>{startAdornment}</span>}\n\n\t\t\t\t<Combobox.Input className={styles.input} placeholder={placeholder} />\n\n\t\t\t\t<Combobox.Context>\n\t\t\t\t\t{(context) => (\n\t\t\t\t\t\t<div className={styles.iconContainer}>\n\t\t\t\t\t\t\t{context.inputValue && !disabled && (\n\t\t\t\t\t\t\t\t<Combobox.ClearTrigger className={styles.clearButton} aria-label=\"Clear\">\n\t\t\t\t\t\t\t\t\t<DsIcon icon=\"close\" size=\"medium\" />\n\t\t\t\t\t\t\t\t</Combobox.ClearTrigger>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{showTrigger && (\n\t\t\t\t\t\t\t\t<Combobox.Trigger className={styles.trigger} aria-label=\"Toggle dropdown\">\n\t\t\t\t\t\t\t\t\t<DsIcon icon=\"keyboard_arrow_down\" size=\"medium\" />\n\t\t\t\t\t\t\t\t</Combobox.Trigger>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</Combobox.Context>\n\t\t\t</Combobox.Control>\n\n\t\t\t<Portal>\n\t\t\t\t<Combobox.Positioner className={styles.positioner}>\n\t\t\t\t\t<Combobox.Content className={styles.content}>\n\t\t\t\t\t\t{collection.items.length === 0 ? (\n\t\t\t\t\t\t\t<div className={styles.noMatches}>{noMatchesMessage}</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Combobox.ItemGroup className={styles.itemGroup}>\n\t\t\t\t\t\t\t\t<Combobox.Context>\n\t\t\t\t\t\t\t\t\t{(context) =>\n\t\t\t\t\t\t\t\t\t\tcollection.items.map((item) => {\n\t\t\t\t\t\t\t\t\t\t\tconst option = options.find((opt) => opt.label === item);\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<Combobox.Item key={item} item={item} className={styles.item}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{option?.icon && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<DsIcon className={styles.itemIcon} icon={option.icon} aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Combobox.ItemText className={styles.itemText}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{highlightMatch ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Highlight query={context.inputValue} text={item} ignoreCase />\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Combobox.ItemText>\n\t\t\t\t\t\t\t\t\t\t\t\t</Combobox.Item>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</Combobox.Context>\n\t\t\t\t\t\t\t</Combobox.ItemGroup>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Combobox.Content>\n\t\t\t\t</Combobox.Positioner>\n\t\t\t</Portal>\n\t\t</Combobox.Root>\n\t);\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,27 @@
+
+//#region src/components/ds-autocomplete/ds-autocomplete.module.scss
+var ds_autocomplete_module_default = {
+	"root": "_root_1ah6z_1",
+	"control": "_control_1ah6z_1",
+	"input": "_input_1ah6z_1",
+	"iconButton": "_iconButton_1ah6z_1",
+	"startAdornment": "_startAdornment_1ah6z_1",
+	"iconContainer": "_iconContainer_1ah6z_1",
+	"clearButton": "_clearButton_1ah6z_1",
+	"trigger": "_trigger_1ah6z_1",
+	"positioner": "_positioner_1ah6z_1",
+	"content": "_content_1ah6z_1",
+	"expand": "_expand_1ah6z_1",
+	"collapse": "_collapse_1ah6z_1",
+	"itemGroup": "_itemGroup_1ah6z_1",
+	"item": "_item_1ah6z_1",
+	"indicator": "_indicator_1ah6z_1",
+	"itemIcon": "_itemIcon_1ah6z_1",
+	"itemText": "_itemText_1ah6z_1",
+	"noMatches": "_noMatches_1ah6z_1",
+	"disabled": "_disabled_1ah6z_1",
+	"invalid": "_invalid_1ah6z_1"
+};
+
+//#endregion
+exports.default = ds_autocomplete_module_default;

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

@@ -0,0 +1,27 @@
+//#region src/components/ds-autocomplete/ds-autocomplete.module.scss
+var ds_autocomplete_module_default = {
+	"root": "_root_1ah6z_1",
+	"control": "_control_1ah6z_1",
+	"input": "_input_1ah6z_1",
+	"iconButton": "_iconButton_1ah6z_1",
+	"startAdornment": "_startAdornment_1ah6z_1",
+	"iconContainer": "_iconContainer_1ah6z_1",
+	"clearButton": "_clearButton_1ah6z_1",
+	"trigger": "_trigger_1ah6z_1",
+	"positioner": "_positioner_1ah6z_1",
+	"content": "_content_1ah6z_1",
+	"expand": "_expand_1ah6z_1",
+	"collapse": "_collapse_1ah6z_1",
+	"itemGroup": "_itemGroup_1ah6z_1",
+	"item": "_item_1ah6z_1",
+	"indicator": "_indicator_1ah6z_1",
+	"itemIcon": "_itemIcon_1ah6z_1",
+	"itemText": "_itemText_1ah6z_1",
+	"noMatches": "_noMatches_1ah6z_1",
+	"disabled": "_disabled_1ah6z_1",
+	"invalid": "_invalid_1ah6z_1"
+};
+
+//#endregion
+export { ds_autocomplete_module_default as default };
+//# sourceMappingURL=ds-autocomplete.module.js.map