@ultraviolet/ui 3.12.3 → 3.13.0

package/dist/components/SelectInput/components/Dropdown/SelectAll.js

@@ -0,0 +1,84 @@
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../Stack/index.js";
+import { Text, init_Text } from "../../../Text/index.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { Checkbox, init_Checkbox } from "../../../Checkbox/index.js";
+import { cn } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SelectInput/components/Dropdown/SelectAll.tsx
+var SelectAll;
+var init_SelectAll = __esmMin(() => {
+	init_Checkbox();
+	init_Stack();
+	init_Text();
+	init_SelectInputProvider();
+	init_styles_css();
+	SelectAll = ({ textVariant }) => {
+		const { onChange, options, multiselect, selectAll, setSelectedData, selectedData, size } = useSelectInput();
+		const selectAllOptions = () => {
+			if (multiselect) {
+				setSelectedData({ type: "selectAll" });
+				if (selectedData.allSelected && onChange) onChange([]);
+				else {
+					const allValues = [];
+					if (Array.isArray(options)) options.map((option) => allValues.push(option));
+					else Object.keys(options).map((group) => options[group].map((option) => {
+						if (!option.disabled) allValues.push(option);
+						return null;
+					}));
+					onChange === null || onChange === void 0 || onChange(allValues.map((value) => value.value));
+				}
+			}
+		};
+		return selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, {
+			gap: .25,
+			id: "items",
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsx("div", {
+				"aria-disabled": false,
+				"aria-label": "select-all",
+				"aria-selected": selectedData.allSelected,
+				className: cn(selectInputStyle.dropdownItem({
+					selected: selectedData.allSelected,
+					size
+				})),
+				"data-testid": "select-all",
+				onClick: selectAllOptions,
+				onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
+				role: "option",
+				tabIndex: 0,
+				children: /* @__PURE__ */ jsx(Checkbox, {
+					checked: selectedData.allSelected,
+					className: selectInputStyle.dropdownCheckbox,
+					"data-testid": "select-all-checkbox",
+					disabled: false,
+					onChange: selectAllOptions,
+					tabIndex: -1,
+					value: "select-all",
+					children: /* @__PURE__ */ jsxs(Stack, {
+						direction: "column",
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							placement: "left",
+							variant: textVariant,
+							children: selectAll === null || selectAll === void 0 ? void 0 : selectAll.label
+						}), /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							placement: "left",
+							prominence: "weak",
+							sentiment: "neutral",
+							variant: size === "small" ? "captionSmall" : "bodySmall",
+							children: selectAll === null || selectAll === void 0 ? void 0 : selectAll.description
+						})]
+					})
+				})
+			})
+		}) : null;
+	};
+});
+
+//#endregion
+init_SelectAll();
+export { SelectAll, init_SelectAll };

package/dist/components/SelectInput/components/{dropdown.css.d.ts → Dropdown/dropdown.css.d.ts}

@@ -8,7 +8,8 @@ export declare const dropdownGroupSelectable: import("@vanilla-extract/recipes")
         small: {
             paddingLeft: `var(--${string})`;
         };
-        default: {};
+        large: {};
+        medium: {};
     };
 }>;
 export declare const dropdownGroupWrapper: string;
@@ -21,7 +22,8 @@ export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<
         };
     };
     size: {
-        default: {};
+        large: {};
+        medium: {};
         small: {
             padding: `var(--${string})`;
         };

package/dist/components/SelectInput/components/Dropdown/dropdown.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;EAsBlC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAO/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAK3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CvB,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA;AAEF,eAAO,MAAM,cAAc,QAWzB,CAAA"}

package/dist/components/SelectInput/components/{dropdown.css.js → Dropdown/dropdown.css.js}

@@ -1,35 +1,37 @@
-import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
 import { init_dropdown_css_ts_vanilla } from "./dropdown.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
-//#region src/components/SelectInput/components/dropdown.css.ts
+//#region src/components/SelectInput/components/Dropdown/dropdown.css.ts
 var dropdownWidth, dropdownGroupSelectable, dropdownItem;
 var init_dropdown_css = __esmMin(() => {
 	init_dropdown_css_ts_vanilla();
-	dropdownWidth = "var(--uv_5kpm8k0)";
+	dropdownWidth = "var(--uv_igqisu0)";
 	dropdownGroupSelectable = createRuntimeFn({
-		defaultClassName: "uv_5kpm8k5",
+		defaultClassName: "uv_igqisu5",
 		variantClassNames: { size: {
-			small: "uv_5kpm8k6",
-			"default": "uv_5kpm8k7"
+			small: "uv_igqisu6",
+			large: "uv_igqisu7",
+			medium: "uv_igqisu8"
 		} },
-		defaultVariants: { size: "default" },
+		defaultVariants: { size: "large" },
 		compoundVariants: []
 	});
 	dropdownItem = createRuntimeFn({
-		defaultClassName: "uv_5kpm8kb uv_5kpm8ka uv_5kpm8k9",
+		defaultClassName: "uv_igqisuc uv_igqisub uv_igqisua",
 		variantClassNames: {
-			selected: { true: "uv_5kpm8kc" },
+			selected: { true: "uv_igqisud" },
 			size: {
-				"default": "uv_5kpm8kd",
-				small: "uv_5kpm8ke"
+				large: "uv_igqisue",
+				medium: "uv_igqisuf",
+				small: "uv_igqisug"
 			},
-			disabled: { true: "uv_5kpm8kf" }
+			disabled: { true: "uv_igqisuh" }
 		},
 		defaultVariants: {
 			disabled: false,
 			selected: false,
-			size: "default"
+			size: "large"
 		},
 		compoundVariants: []
 	});

package/dist/components/SelectInput/components/Dropdown/dropdown.css.ts.vanilla.js

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/SelectInput/components/Dropdown/dropdown.css.ts.vanilla.css
+var init_dropdown_css_ts_vanilla = __esmMin(() => {});
+
+//#endregion
+init_dropdown_css_ts_vanilla();
+export { init_dropdown_css_ts_vanilla };

package/dist/components/SelectInput/components/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from './Dropdown';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SelectInput/components/Dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/SelectInput/components/Dropdown/index.js

@@ -0,0 +1,11 @@
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
+import { Dropdown, init_Dropdown as init_Dropdown$1 } from "./Dropdown.js";
+
+//#region src/components/SelectInput/components/Dropdown/index.ts
+var init_Dropdown = __esmMin(() => {
+	init_Dropdown$1();
+});
+
+//#endregion
+init_Dropdown();
+export { init_Dropdown };

package/dist/components/SelectInput/components/SelectBar/SelectBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/SelectBar.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,SAAS,oNA4Rd,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/SelectInput/components/{SelectBar.js → SelectBar/SelectBar.js}

@@ -1,102 +1,35 @@
 'use client';
-import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
-import { Stack, init_Stack } from "../../Stack/index.js";
-import { Tooltip, init_Tooltip } from "../../Tooltip/index.js";
-import { Text, init_Text } from "../../Text/index.js";
-import { Button, init_Button } from "../../Button/index.js";
-import { SIZES_TAG, init_constants } from "../constants.js";
-import { init_SelectInputProvider, useSelectInput } from "../SelectInputProvider.js";
-import { init_styles_css, selectInputStyle } from "../styles.css.js";
-import { Tag, init_Tag } from "../../Tag/index.js";
-import { findOptionInOptions, init_findOptionInOptions } from "../findOptionInOptions.js";
-import { init_selectBar_css, maxWidthTag, minWidthTag } from "./selectBar.css.js";
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../Stack/index.js";
+import { Tooltip, init_Tooltip } from "../../../Tooltip/index.js";
+import { Text, init_Text } from "../../../Text/index.js";
+import { Button, init_Button } from "../../../Button/index.js";
+import { SIZES_TAG, init_constants } from "../../constants.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { computeOverflowVars, getTagsWidth, init_helpers } from "../helpers.js";
+import { findOptionInOptions, init_findOptionInOptions } from "../../findOptionInOptions.js";
+import { DisplayValues, init_Values } from "./Values.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
 import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
 import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
-import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 
-//#region src/components/SelectInput/components/SelectBar.tsx
-var DisplayValues, SelectBar;
+//#region src/components/SelectInput/components/SelectBar/SelectBar.tsx
+var SelectBar;
 var init_SelectBar = __esmMin(() => {
 	init_Button();
 	init_Stack();
-	init_Tag();
 	init_Text();
 	init_Tooltip();
 	init_constants();
 	init_findOptionInOptions();
 	init_SelectInputProvider();
 	init_styles_css();
-	init_selectBar_css();
-	DisplayValues = ({ refTag, nonOverflowedValues, potentiallyNonOverflowedValues, disabled, readOnly, overflowed, overflowAmount, measureRef, lastElementMaxWidth, overflow, refPlusTag, displayShadowCopy, textVariant }) => {
-		var _findOptionInOptions;
-		const { multiselect, selectedData, setSelectedData, options, onChange } = useSelectInput();
-		return multiselect ? /* @__PURE__ */ jsxs(Stack, {
-			alignItems: "center",
-			className: selectInputStyle.multiselectStack,
-			direction: "row",
-			gap: "1",
-			ref: refTag,
-			wrap: "nowrap",
-			children: [
-				displayShadowCopy ? /* @__PURE__ */ jsx("div", {
-					ref: measureRef,
-					style: { position: "absolute" },
-					children: potentiallyNonOverflowedValues.map((option) => /* @__PURE__ */ jsx(Tag, {
-						className: cn(option.value, selectInputStyle.selectBarTags.hidden),
-						onClose: () => {},
-						children: option === null || option === void 0 ? void 0 : option.label
-					}, option.value))
-				}) : null,
-				nonOverflowedValues.map((option, index) => /* @__PURE__ */ jsx(Tag, {
-					className: selectInputStyle.selectBarTags.visible,
-					"data-testid": "selected-options-tags",
-					disabled,
-					onClose: readOnly ? void 0 : (event) => {
-						var _selectedData$selecte;
-						event.stopPropagation();
-						setSelectedData({
-							clickedOption: option,
-							type: "selectOption"
-						});
-						const newSelectedValues = (_selectedData$selecte = selectedData.selectedValues) === null || _selectedData$selecte === void 0 ? void 0 : _selectedData$selecte.filter((val) => val !== option.value);
-						onChange === null || onChange === void 0 || onChange(newSelectedValues);
-					},
-					sentiment: "neutral",
-					style: index === nonOverflowedValues.length - 1 && overflow ? assignInlineVars({
-						[minWidthTag]: "auto",
-						[maxWidthTag]: `${lastElementMaxWidth}px`
-					}) : void 0,
-					children: option === null || option === void 0 ? void 0 : option.label
-				}, option === null || option === void 0 ? void 0 : option.value)),
-				overflowed ? /* @__PURE__ */ jsx(Stack, {
-					justifyContent: "center",
-					ref: refPlusTag,
-					children: /* @__PURE__ */ jsxs(Tag, {
-						"aria-label": "Plus tag",
-						className: selectInputStyle.plusTag,
-						"data-testid": "plus-tag",
-						disabled,
-						sentiment: "neutral",
-						children: [/* @__PURE__ */ jsx(PlusIcon, { size: "xsmall" }), overflowAmount]
-					}, "+")
-				}) : null
-			]
-		}) : /* @__PURE__ */ jsx(Text, {
-			as: "span",
-			className: selectInputStyle.selectedValues,
-			disabled,
-			prominence: "default",
-			sentiment: "neutral",
-			variant: textVariant,
-			children: selectedData.selectedValues[0] ? (_findOptionInOptions = findOptionInOptions(options, selectedData.selectedValues[0])) === null || _findOptionInOptions === void 0 ? void 0 : _findOptionInOptions.label : null
-		});
-	};
+	init_helpers();
+	init_Values();
 	SelectBar = ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, "data-testid": dataTestId, label, dropdownId }) => {
 		var _innerRef$current2;
 		const { isDropdownVisible, onChange, setIsDropdownVisible, options, selectedData, setSelectedData, multiselect } = useSelectInput();
@@ -141,51 +74,17 @@ var init_SelectBar = __esmMin(() => {
 			if (measureRef.current && selectedData.selectedValues.length > 0) {
 				var _refPlusTag$current$o;
 				var _refPlusTag$current;
-				const toMeasureElementsArray = [...measureRef.current.children];
 				const innerWidth = getWidth();
-				const { measuredVisibleTags, measuredHiddenTags, accumulatedWidth, lastVisibleElementWidth, lastVisibleLabel } = toMeasureElementsArray.reduce((accumulator, currentValue, index) => {
-					const elementWidth = currentValue.offsetWidth;
-					const newAccumulatedWidth = accumulator.accumulatedWidth + elementWidth + SIZES_TAG.gap;
-					const canBeVisible = newAccumulatedWidth <= innerWidth;
-					return {
-						accumulatedWidth: canBeVisible ? newAccumulatedWidth : accumulator.accumulatedWidth,
-						lastVisibleElementWidth: canBeVisible ? elementWidth : accumulator.lastVisibleElementWidth,
-						lastVisibleLabel: canBeVisible ? potentiallyNonOverflowedValues[index].label : accumulator.lastVisibleLabel,
-						measuredHiddenTags: accumulator.measuredHiddenTags + (canBeVisible ? 0 : 1),
-						measuredVisibleTags: [...accumulator.measuredVisibleTags, canBeVisible && potentiallyNonOverflowedValues[index]].filter(Boolean)
-					};
-				}, {
-					accumulatedWidth: 0,
-					lastVisibleElementWidth: 0,
-					lastVisibleLabel: "",
-					measuredHiddenTags: 0,
-					measuredVisibleTags: []
-				});
+				const tagsWidth = getTagsWidth([...measureRef.current.children], innerWidth, potentiallyNonOverflowedValues);
 				const additionnalElementsWidth = SIZES_TAG.paddings + ((_refPlusTag$current$o = (_refPlusTag$current = refPlusTag.current) === null || _refPlusTag$current === void 0 ? void 0 : _refPlusTag$current.offsetWidth) !== null && _refPlusTag$current$o !== void 0 ? _refPlusTag$current$o : 0);
-				const overflowPx = accumulatedWidth + (measuredHiddenTags ? additionnalElementsWidth : 0) - innerWidth;
+				const overflowPx = tagsWidth.accumulatedWidth + (tagsWidth.measuredHiddenTags ? additionnalElementsWidth : 0) - innerWidth;
 				const hasOverflow = overflowPx > 0;
-				const hasHiddenTags = measuredHiddenTags > 0;
-				const lastVisibleElementMaxSize = lastVisibleElementWidth - overflowPx;
-				if (measuredHiddenTags === 1 && measuredVisibleTags.length === 0) {
-					setOverflowAmount(0);
-					setNonOverFlowedValues([potentiallyNonOverflowedValues[0]]);
-					setLastElementMaxWidth(lastVisibleElementWidth - (lastVisibleElementWidth + (measuredHiddenTags > 1 ? additionnalElementsWidth : 0) - innerWidth));
-					setOverflow(true);
-				} else if (hasOverflow && hasHiddenTags && (lastVisibleElementMaxSize > 65 || measuredVisibleTags.length === 1 && lastVisibleElementMaxSize > 65) && typeof lastVisibleLabel === "string") {
-					setLastElementMaxWidth(lastVisibleElementMaxSize);
-					setOverflow(true);
-					setOverflowAmount(measuredHiddenTags);
-					setNonOverFlowedValues(measuredVisibleTags);
-				} else if (hasOverflow && hasHiddenTags) {
-					setLastElementMaxWidth(0);
-					setOverflow(false);
-					setOverflowAmount(measuredHiddenTags + 1);
-					setNonOverFlowedValues(measuredVisibleTags.slice(0, -1));
-				} else {
-					setOverflow(false);
-					setOverflowAmount(measuredHiddenTags);
-					setNonOverFlowedValues(measuredVisibleTags);
-				}
+				const hasHiddenTags = tagsWidth.measuredHiddenTags > 0;
+				const overflowVars = computeOverflowVars(tagsWidth, hasOverflow, tagsWidth.lastVisibleElementWidth - overflowPx, hasHiddenTags, potentiallyNonOverflowedValues, additionnalElementsWidth);
+				setOverflowAmount(overflowVars.overflowAmount);
+				setNonOverFlowedValues(overflowVars.nonOverflowedValues);
+				setLastElementMaxWidth(overflowVars.lastElementMaxWidth);
+				setOverflow(overflowVars.hasOverflow);
 			}
 			setDisplayShadowCopy(false);
 		}, [

package/dist/components/SelectInput/components/SelectBar/Values.d.ts

@@ -0,0 +1,20 @@
+import type { OptionType } from '../../types';
+import type { RefObject } from 'react';
+type DisplayValuesProps = {
+    refTag: RefObject<HTMLDivElement | null>;
+    nonOverflowedValues: OptionType[];
+    potentiallyNonOverflowedValues: OptionType[];
+    disabled: boolean;
+    readOnly: boolean;
+    overflowed: boolean;
+    overflowAmount: number;
+    measureRef: RefObject<HTMLDivElement | null>;
+    lastElementMaxWidth: number;
+    overflow?: boolean;
+    refPlusTag: RefObject<HTMLDivElement | null>;
+    displayShadowCopy?: boolean;
+    textVariant: 'body' | 'bodySmall' | 'caption';
+};
+export declare const DisplayValues: ({ refTag, nonOverflowedValues, potentiallyNonOverflowedValues, disabled, readOnly, overflowed, overflowAmount, measureRef, lastElementMaxWidth, overflow, refPlusTag, displayShadowCopy, textVariant, }: DisplayValuesProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Values.d.ts.map

package/dist/components/SelectInput/components/SelectBar/Values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Values.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/Values.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACxC,mBAAmB,EAAE,UAAU,EAAE,CAAA;IACjC,8BAA8B,EAAE,UAAU,EAAE,CAAA;IAC5C,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC5C,mBAAmB,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAA;CAC9C,CAAA;AAED,eAAO,MAAM,aAAa,0QAkHzB,CAAA"}

package/dist/components/SelectInput/components/SelectBar/Values.js

@@ -0,0 +1,93 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../Stack/index.js";
+import { Text, init_Text } from "../../../Text/index.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { findOptionInOptions, init_findOptionInOptions } from "../../findOptionInOptions.js";
+import { Tag, init_Tag } from "../../../Tag/index.js";
+import { init_selectBar_css, maxWidthTag, minWidthTag } from "./selectBar.css.js";
+import { cn } from "@ultraviolet/utils";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
+
+//#region src/components/SelectInput/components/SelectBar/Values.tsx
+var DisplayValues;
+var init_Values = __esmMin(() => {
+	init_Stack();
+	init_Tag();
+	init_Text();
+	init_findOptionInOptions();
+	init_SelectInputProvider();
+	init_styles_css();
+	init_selectBar_css();
+	DisplayValues = ({ refTag, nonOverflowedValues, potentiallyNonOverflowedValues, disabled, readOnly, overflowed, overflowAmount, measureRef, lastElementMaxWidth, overflow, refPlusTag, displayShadowCopy, textVariant }) => {
+		var _findOptionInOptions;
+		const { multiselect, selectedData, setSelectedData, options, onChange } = useSelectInput();
+		return multiselect ? /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			className: selectInputStyle.multiselectStack,
+			direction: "row",
+			gap: "1",
+			ref: refTag,
+			wrap: "nowrap",
+			children: [
+				displayShadowCopy ? /* @__PURE__ */ jsx("div", {
+					ref: measureRef,
+					style: { position: "absolute" },
+					children: potentiallyNonOverflowedValues.map((option) => /* @__PURE__ */ jsx(Tag, {
+						className: cn(option.value, selectInputStyle.selectBarTags.hidden),
+						onClose: () => {},
+						children: option === null || option === void 0 ? void 0 : option.label
+					}, option.value))
+				}) : null,
+				nonOverflowedValues.map((option, index) => /* @__PURE__ */ jsx(Tag, {
+					className: selectInputStyle.selectBarTags.visible,
+					"data-testid": "selected-options-tags",
+					disabled,
+					onClose: readOnly ? void 0 : (event) => {
+						var _selectedData$selecte;
+						event.stopPropagation();
+						setSelectedData({
+							clickedOption: option,
+							type: "selectOption"
+						});
+						const newSelectedValues = (_selectedData$selecte = selectedData.selectedValues) === null || _selectedData$selecte === void 0 ? void 0 : _selectedData$selecte.filter((val) => val !== option.value);
+						onChange === null || onChange === void 0 || onChange(newSelectedValues);
+					},
+					sentiment: "neutral",
+					style: index === nonOverflowedValues.length - 1 && overflow ? assignInlineVars({
+						[minWidthTag]: "auto",
+						[maxWidthTag]: `${lastElementMaxWidth}px`
+					}) : void 0,
+					children: option === null || option === void 0 ? void 0 : option.label
+				}, option === null || option === void 0 ? void 0 : option.value)),
+				overflowed ? /* @__PURE__ */ jsx(Stack, {
+					justifyContent: "center",
+					ref: refPlusTag,
+					children: /* @__PURE__ */ jsxs(Tag, {
+						"aria-label": "Plus tag",
+						className: selectInputStyle.plusTag,
+						"data-testid": "plus-tag",
+						disabled,
+						sentiment: "neutral",
+						children: [/* @__PURE__ */ jsx(PlusIcon, { size: "xsmall" }), overflowAmount]
+					}, "+")
+				}) : null
+			]
+		}) : /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: selectInputStyle.selectedValues,
+			disabled,
+			prominence: "default",
+			sentiment: "neutral",
+			variant: textVariant,
+			children: selectedData.selectedValues[0] ? (_findOptionInOptions = findOptionInOptions(options, selectedData.selectedValues[0])) === null || _findOptionInOptions === void 0 ? void 0 : _findOptionInOptions.label : null
+		});
+	};
+});
+
+//#endregion
+init_Values();
+export { DisplayValues, init_Values };

package/dist/components/SelectInput/components/SelectBar/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectBar } from './SelectBar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SelectInput/components/SelectBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/SelectInput/components/SelectBar/index.js

@@ -0,0 +1,11 @@
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
+import { SelectBar, init_SelectBar as init_SelectBar$1 } from "./SelectBar.js";
+
+//#region src/components/SelectInput/components/SelectBar/index.ts
+var init_SelectBar = __esmMin(() => {
+	init_SelectBar$1();
+});
+
+//#endregion
+init_SelectBar();
+export { init_SelectBar };

package/dist/components/SelectInput/components/SelectBar/selectBar.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectBar.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/selectBar.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,oBAItB,CAAA;AACF,eAAO,MAAM,WAAW,oBAItB,CAAA;AAEF,eAAO,MAAM,cAAc,mCASzB,CAAA;AAEF,eAAO,MAAM,WAAW,QAGtB,CAAA;AAgCF,eAAO,MAAM,aAAa,QAsCxB,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6FpB,CAAA;AASF,eAAO,MAAM,aAAa,sCAMxB,CAAA;AAEF,eAAO,MAAM,cAAc,QAKzB,CAAA;AAEF,eAAO,MAAM,OAAO,QAAsC,CAAA;AAE1D,eAAO,MAAM,gBAAgB,QAI3B,CAAA"}

package/dist/components/SelectInput/components/{selectBar.css.js → SelectBar/selectBar.css.js}

@@ -1,32 +1,32 @@
-import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
-import { init_styles_css_ts_vanilla } from "../../SelectableCardOptionGroup/styles.css.ts.vanilla.js";
-import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$1 } from "../../UnitInput/styles.css.ts.vanilla.js";
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "../../../SelectableCardOptionGroup/styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$1 } from "../../../UnitInput/styles.css.ts.vanilla.js";
 import { init_selectBar_css_ts_vanilla } from "./selectBar.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
-//#region src/components/SelectInput/components/selectBar.css.ts
+//#region src/components/SelectInput/components/SelectBar/selectBar.css.ts
 var maxWidthTag, minWidthTag, selectBar;
 var init_selectBar_css = __esmMin(() => {
 	init_styles_css_ts_vanilla();
 	init_styles_css_ts_vanilla$1();
 	init_selectBar_css_ts_vanilla();
-	maxWidthTag = "var(--uv_1ba7knd0)";
-	minWidthTag = "var(--uv_1ba7knd1)";
+	maxWidthTag = "var(--uv_r8qe40)";
+	minWidthTag = "var(--uv_r8qe41)";
 	selectBar = createRuntimeFn({
-		defaultClassName: "uv_1ba7knd6 uv_1ba7knd5",
+		defaultClassName: "uv_r8qe46 uv_r8qe45",
 		variantClassNames: {
-			disabled: { true: "uv_1ba7knd7" },
-			dropdownVisible: { true: "uv_1ba7knd8" },
-			readOnly: { true: "uv_1ba7knd9" },
+			disabled: { true: "uv_r8qe47" },
+			dropdownVisible: { true: "uv_r8qe48" },
+			readOnly: { true: "uv_r8qe49" },
 			size: {
-				large: "uv_1ba7knda",
-				medium: "uv_1ba7kndb",
-				small: "uv_1ba7kndc"
+				large: "uv_r8qe4a",
+				medium: "uv_r8qe4b",
+				small: "uv_r8qe4c"
 			},
 			state: {
-				danger: "uv_1ba7kndd",
-				neutral: "uv_1ba7knde",
-				success: "uv_1ba7kndf"
+				danger: "uv_r8qe4d",
+				neutral: "uv_r8qe4e",
+				success: "uv_r8qe4f"
 			}
 		},
 		defaultVariants: {
@@ -40,15 +40,15 @@ var init_selectBar_css = __esmMin(() => {
 			[{
 				dropdownVisible: true,
 				state: "neutral"
-			}, "uv_1ba7kndg"],
+			}, "uv_r8qe4g"],
 			[{
 				dropdownVisible: true,
 				state: "success"
-			}, "uv_1ba7kndh"],
+			}, "uv_r8qe4h"],
 			[{
 				dropdownVisible: true,
 				state: "danger"
-			}, "uv_1ba7kndi"]
+			}, "uv_r8qe4i"]
 		]
 	});
 });

package/dist/components/SelectInput/components/SelectBar/selectBar.css.ts.vanilla.js

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/SelectInput/components/SelectBar/selectBar.css.ts.vanilla.css
+var init_selectBar_css_ts_vanilla = __esmMin(() => {});
+
+//#endregion
+init_selectBar_css_ts_vanilla();
+export { init_selectBar_css_ts_vanilla };

package/dist/components/SelectInput/components/helpers.d.ts

@@ -0,0 +1,30 @@
+import type { DataType, OptionType, ReducerAction, ReducerState } from '../types';
+import type { ReactNode } from 'react';
+export declare const getTagsWidth: (toMeasureElementsArray: Element[], innerWidth: number, potentiallyNonOverflowedValues: OptionType[]) => {
+    accumulatedWidth: number;
+    lastVisibleElementWidth: number;
+    lastVisibleLabel: ReactNode;
+    measuredHiddenTags: number;
+    measuredVisibleTags: OptionType[];
+};
+export declare const computeOverflowVars: (tagsWidth: {
+    accumulatedWidth: number;
+    lastVisibleElementWidth: number;
+    lastVisibleLabel: ReactNode;
+    measuredHiddenTags: number;
+    measuredVisibleTags: OptionType[];
+}, hasOverflow: boolean, lastVisibleElementMaxSize: number, hasHiddenTags: boolean, potentiallyNonOverflowedValues: OptionType[], additionnalElementsWidth: number) => {
+    overflowAmount: number;
+    nonOverflowedValues: OptionType[];
+    lastElementMaxWidth: number;
+    hasOverflow: boolean;
+};
+export declare const computeSelectedDataMultiselect: (closestOption: OptionType, options: DataType, selectedData: ReducerState) => {
+    computedData: ReducerAction;
+    onChangeData: string[];
+};
+export declare const computeSelectedDataSingleSelect: (closestOption: OptionType, selectedData: ReducerState) => {
+    computedData: ReducerAction;
+    onChangeData: string;
+};
+//# sourceMappingURL=helpers.d.ts.map

package/dist/components/SelectInput/components/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,aAAa,EACb,YAAY,EACb,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,eAAO,MAAM,YAAY;;;;;;CAkDtB,CAAA;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;CA4D/B,CAAA;AAED,eAAO,MAAM,8BAA8B;;;CAiBzC,CAAA;AAEF,eAAO,MAAM,+BAA+B;;;CAS1C,CAAA"}