@ultraviolet/ui 3.24.3 → 3.25.0

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

@@ -0,0 +1,95 @@
+'use client';
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Layout/Stack/index.js";
+import { Text, init_Text } from "../../../../Typography/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 "../../../../Badges/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/Data Entry/SelectInput/components/SelectBar/Values.tsx
+var DisplayValues;
+function init_Values() {
+	return (init_Values = __esmMin(() => {
+		init_Tag();
+		init_Stack();
+		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/Data Entry/SelectInput/components/SelectBar/selectBar.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectBar.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Data Entry/SelectInput/components/SelectBar/selectBar.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,oBAItB,CAAA;AACF,eAAO,MAAM,WAAW,oBAItB,CAAA;AAEF,eAAO,MAAM,cAAc,mCASzB,CAAA;AAEF,eAAO,MAAM,WAAW,QAKtB,CAAA;AA+BF,eAAO,MAAM,aAAa,QAsCxB,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;gBAoCZ,SAAS;oBACP,WAAW;;;;;;QAMjB,IAAI;YACF,WAAW;;;;;;;;;gBAUT,SAAS;oBACP,WAAW;;;;;;QAMjB,KAAK;YACH,MAAM;YACN,aAAa;;QAEf,MAAM;YACJ,MAAM;YACN,aAAa;;QAEf,KAAK;YACH,MAAM;YACN,OAAO;YACP,aAAa;;;;QAIf,MAAM;;gBAzIN,+BAA+B;oBAC7B,MAAM;;gBAER,kEAAkE;oBAChE,WAAW;oBACX,SAAS,EAEJ,MAAM;;gBAEb,yEAAyE;oBACvE,OAAO;;gBAET,iEAAiE;oBAC/D,WAAW;oBACX,OAAO;;;;QA4HT,OAAO;;;;;;;;;;;;;;;;;;QACP,OAAO;;;;;;;;;;;;;;;;;;;EAGX,CAAA;AAQF,eAAO,MAAM,aAAa,sCAGxB,CAAA;AAEF,eAAO,MAAM,cAAc,QAKzB,CAAA;AAEF,eAAO,MAAM,OAAO,QAAsC,CAAA;AAE1D,eAAO,MAAM,gBAAgB,QAI3B,CAAA"}

package/dist/components/Data Entry/SelectInput/components/SelectBar/selectBar.css.js

@@ -0,0 +1,60 @@
+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/Data Entry/SelectInput/components/SelectBar/selectBar.css.ts
+var maxWidthTag, minWidthTag, selectBar;
+function init_selectBar_css() {
+	return (init_selectBar_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		/* @__PURE__ */ init_styles_css_ts_vanilla$1();
+		/* @__PURE__ */ init_selectBar_css_ts_vanilla();
+		maxWidthTag = "var(--uv_1xo4j4b0)";
+		minWidthTag = "var(--uv_1xo4j4b1)";
+		selectBar = createRuntimeFn({
+			defaultClassName: "uv_1xo4j4b6 uv_1xo4j4b5",
+			variantClassNames: {
+				disabled: { true: "uv_1xo4j4b7" },
+				dropdownVisible: { true: "uv_1xo4j4b8" },
+				readOnly: { true: "uv_1xo4j4b9" },
+				size: {
+					large: "uv_1xo4j4ba",
+					medium: "uv_1xo4j4bb",
+					small: "uv_1xo4j4bc"
+				},
+				state: {
+					danger: "uv_1xo4j4bd",
+					neutral: "uv_1xo4j4be",
+					success: "uv_1xo4j4bf"
+				}
+			},
+			defaultVariants: {
+				disabled: false,
+				dropdownVisible: false,
+				readOnly: false,
+				size: "large",
+				state: "neutral"
+			},
+			compoundVariants: [
+				[{
+					dropdownVisible: true,
+					state: "neutral"
+				}, "uv_1xo4j4bg"],
+				[{
+					dropdownVisible: true,
+					state: "success"
+				}, "uv_1xo4j4bh"],
+				[{
+					dropdownVisible: true,
+					state: "danger"
+				}, "uv_1xo4j4bi"]
+			]
+		});
+	}))();
+}
+
+//#endregion
+init_selectBar_css();
+export { init_selectBar_css, maxWidthTag, minWidthTag };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Entry/SelectInput/components/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEjF,eAAO,MAAM,YAAY,2BACC,OAAO,EAAE,cACrB,MAAM,kCACc,UAAU,EAAE;;;;;;CAuC3C,CAAA;AAEH,eAAO,MAAM,mBAAmB,cACnB,UAAU,CAAC,OAAO,YAAY,CAAC,eAC7B,OAAO,6BACO,MAAM,iBAClB,OAAO,kCACU,UAAU,EAAE,4BAClB,MAAM;;;;;CAgDjC,CAAA;AAED,eAAO,MAAM,8BAA8B,kBAC1B,UAAU,WAChB,QAAQ,gBACH,YAAY,KACzB;IAAE,YAAY,EAAE,aAAa,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAA;CAWtD,CAAA;AAEF,eAAO,MAAM,+BAA+B,kBAC3B,UAAU,gBACX,YAAY,KACzB;IAAE,YAAY,EAAE,aAAa,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAMpD,CAAA"}

package/dist/components/Data Entry/SelectInput/components/helpers.js

@@ -0,0 +1,79 @@
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { SIZES_TAG, init_constants } from "../constants.js";
+
+//#region src/components/Data Entry/SelectInput/components/helpers.ts
+var getTagsWidth, computeOverflowVars, computeSelectedDataMultiselect, computeSelectedDataSingleSelect;
+function init_helpers() {
+	return (init_helpers = __esmMin(() => {
+		init_constants();
+		getTagsWidth = (toMeasureElementsArray, innerWidth, potentiallyNonOverflowedValues) => 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]] : []]
+			};
+		}, {
+			accumulatedWidth: 0,
+			lastVisibleElementWidth: 0,
+			lastVisibleLabel: "",
+			measuredHiddenTags: 0,
+			measuredVisibleTags: []
+		});
+		computeOverflowVars = (tagsWidth, hasOverflow, lastVisibleElementMaxSize, hasHiddenTags, potentiallyNonOverflowedValues, additionnalElementsWidth) => {
+			if (tagsWidth.measuredHiddenTags === 1 && tagsWidth.measuredVisibleTags.length === 0) {
+				const newOverflowPx = tagsWidth.lastVisibleElementWidth + (tagsWidth.measuredHiddenTags > 1 ? additionnalElementsWidth : 0) - innerWidth;
+				return {
+					overflowAmount: 0,
+					nonOverflowedValues: [potentiallyNonOverflowedValues[0]],
+					lastElementMaxWidth: tagsWidth.lastVisibleElementWidth - newOverflowPx,
+					hasOverflow: true
+				};
+			}
+			if (hasOverflow && hasHiddenTags && (lastVisibleElementMaxSize > 65 || tagsWidth.measuredVisibleTags.length === 1 && lastVisibleElementMaxSize > 65) && typeof tagsWidth.lastVisibleLabel === "string") return {
+				overflowAmount: tagsWidth.measuredHiddenTags,
+				nonOverflowedValues: tagsWidth.measuredVisibleTags,
+				lastElementMaxWidth: lastVisibleElementMaxSize,
+				hasOverflow: true
+			};
+			if (hasOverflow && hasHiddenTags) return {
+				overflowAmount: tagsWidth.measuredHiddenTags + 1,
+				nonOverflowedValues: tagsWidth.measuredVisibleTags.slice(0, -1),
+				lastElementMaxWidth: 0,
+				hasOverflow: false
+			};
+			return {
+				overflowAmount: tagsWidth.measuredHiddenTags,
+				nonOverflowedValues: tagsWidth.measuredVisibleTags,
+				lastElementMaxWidth: lastVisibleElementMaxSize,
+				hasOverflow: false
+			};
+		};
+		computeSelectedDataMultiselect = (closestOption, options, selectedData) => ({
+			computedData: {
+				clickedOption: closestOption,
+				group: Array.isArray(options) ? void 0 : Object.keys(options).find((group) => options[group].includes(closestOption)),
+				type: "selectOption"
+			},
+			onChangeData: selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]
+		});
+		computeSelectedDataSingleSelect = (closestOption, selectedData) => {
+			var _selectedData$selecte;
+			return {
+				computedData: {
+					clickedOption: closestOption,
+					type: "selectOption"
+				},
+				onChangeData: (_selectedData$selecte = selectedData.selectedValues[0]) !== null && _selectedData$selecte !== void 0 ? _selectedData$selecte : ""
+			};
+		};
+	}))();
+}
+
+//#endregion
+init_helpers();
+export { computeOverflowVars, computeSelectedDataMultiselect, computeSelectedDataSingleSelect, getTagsWidth, init_helpers };

package/dist/components/Data Entry/SelectInput/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Entry/SelectInput/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/components/Data Entry/SelectInput/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/Data Entry/SelectInput/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,MAAM,CAAA;AAGtC,eAAO,MAAM,eAAe,6EAAyE,CAAA;AAErG,eAAO,MAAM,SAAS;IACpB,GAAG;IACH,QAAQ;IACR,OAAO;CACR,CAAA;AAED,eAAO,MAAM,iBAAiB;aAC5B,KAAK,EAAE,KAAK;aACZ,MAAM,EAAE,KAAK;aACb,KAAK,EAAE,KAAK;CACJ,CAAA"}

package/dist/components/Data Entry/SelectInput/constants.js

@@ -0,0 +1,23 @@
+import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Data Entry/SelectInput/constants.ts
+var OPTION_SELECTOR, SIZES_TAG, INPUT_SIZE_HEIGHT;
+function init_constants() {
+	return (init_constants = __esmMin(() => {
+		OPTION_SELECTOR = "#items > div[role=\"option\"]:not([aria-disabled=\"true\"]), #add-option";
+		SIZES_TAG = {
+			gap: 8,
+			paddings: 16,
+			plusTag: 48
+		};
+		INPUT_SIZE_HEIGHT = {
+			large: "600",
+			medium: "500",
+			small: "400"
+		};
+	}))();
+}
+
+//#endregion
+init_constants();
+export { INPUT_SIZE_HEIGHT, OPTION_SELECTOR, SIZES_TAG, init_constants };

package/dist/components/Data Entry/SelectInput/findOptionInOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findOptionInOptions.d.ts","sourceRoot":"","sources":["../../../../src/components/Data Entry/SelectInput/findOptionInOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEnD,eAAO,MAAM,mBAAmB,YAAa,QAAQ,eAAe,MAAM,2BASzE,CAAA"}

package/dist/components/Data Entry/SelectInput/findOptionInOptions.js

@@ -0,0 +1,18 @@
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Data Entry/SelectInput/findOptionInOptions.ts
+var findOptionInOptions;
+function init_findOptionInOptions() {
+	return (init_findOptionInOptions = __esmMin(() => {
+		findOptionInOptions = (options, optionValue) => {
+			let flatOptions = [];
+			if (Array.isArray(options)) flatOptions = options;
+			else flatOptions = Object.keys(options).flatMap((group) => options[group]);
+			return flatOptions.find((option) => option.value === optionValue);
+		};
+	}))();
+}
+
+//#endregion
+init_findOptionInOptions();
+export { findOptionInOptions, init_findOptionInOptions };

package/dist/components/Data Entry/SelectInput/index.d.ts

@@ -0,0 +1,122 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { BaseFormComponentProps } from '../../../types';
+import type { Popup } from '../../Overlay/Popup';
+import type { DataType } from './types';
+type SelectInputProps<IsMulti extends undefined | boolean = false> = BaseFormComponentProps<HTMLDivElement> & {
+    /**
+     * Place holder when no value defined
+     */
+    placeholder?: string;
+    /**
+     * Whether the component in readOnly
+     */
+    readOnly?: boolean;
+    /**
+     * When searchable, placeholder when no value is searched
+     */
+    placeholderSearch?: string;
+    /**
+     * Selectable options
+     */
+    options: DataType;
+    /**
+     * Message to show when no option available
+     */
+    emptyState?: ReactNode;
+    /**
+     * Whether it is possible to clear the search input
+     */
+    clearable?: boolean;
+    /**
+     * Size of the input
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * More information regarding/description ofs the selectInput
+     */
+    labelDescription?: ReactNode;
+    /**
+     * Whether option description is on the right of the option or under it
+     */
+    descriptionDirection?: 'row' | 'column';
+    /**
+     * Where to place the additional info prop
+     */
+    optionalInfoPlacement?: 'left' | 'right';
+    /**
+     * To add custom fixed elements at the bottom of the dropdown
+     */
+    footer?: ((closeDropdown: () => void) => ReactNode) | ReactNode;
+    /**
+     * Display an error message under the select bar
+     */
+    error?: string | boolean;
+    /**
+     * @deprecated This property is automatically enabled when options.length >= 6 or if addOption is enable.
+     * Otherwise, no search bar
+     */
+    searchable?: boolean;
+    /**
+     * When searchable, set a combobox to dynamically add an option
+     */
+    addOption?: {
+        text: string;
+        onClick: (searchText: string) => void;
+    };
+    /**
+     * Display a success message under the select bar
+     */
+    success?: string;
+    /**
+     * Load more button to implement lazy loading
+     */
+    loadMore?: ReactNode;
+    /**
+     * When the options are loading, display a skeleton
+     */
+    isLoading?: boolean;
+    /**
+     * Add a tooltip around the select bar
+     */
+    tooltip?: string;
+    /**
+     * Adds an option to select every selectable options
+     */
+    selectAll?: {
+        label: ReactNode;
+        description?: string;
+    };
+    /**
+     * When options are group, define a option to select every selectable options of a group
+     */
+    selectAllGroup?: boolean;
+    dropdownAlign?: ComponentProps<typeof Popup>['align'];
+    autofocus?: boolean;
+    /**
+     * Whether it is possible to select multiple options
+     */
+    multiselect?: IsMulti;
+    /**
+     * Default value, must be one of the options
+     */
+    value?: IsMulti extends true ? string[] : string;
+    onChange?: IsMulti extends true ? (value: string[]) => void : (value: string) => void;
+    /**
+     * In some cases, when the space is limited, you will need to change the `portalTarget` of the dropdown for a higher parent element.
+     * If you don't know which element to target, you can use `document.body`.
+     */
+    portalTarget?: ComponentProps<typeof Popup>['portalTarget'];
+    /**
+     * Allow to specify a callback called when option dropdown is open
+     * Please wrap that definition in useCallback
+     */
+    onOpen?: () => void;
+    groupError?: Record<string, ReactNode>;
+    groupEmptyState?: Record<string, ReactNode>;
+};
+export declare function SelectInput<IsMulti extends undefined | boolean>({ 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'data-testid': dataTestId, addOption, autofocus, className, clearable, descriptionDirection, disabled, dropdownAlign, emptyState, error, footer, groupEmptyState, groupError, helper, id, isLoading, label, labelDescription, loadMore, multiselect, name, onBlur, onChange, onFocus, onOpen, optionalInfoPlacement, options, placeholder, placeholderSearch, portalTarget, readOnly, required, selectAll, selectAllGroup, size, style, success, tooltip, value, }: SelectInputProps<IsMulti>): import("react").JSX.Element;
+export declare namespace SelectInput {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Data Entry/SelectInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Data Entry/SelectInput/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Data Entry/SelectInput/index.js

@@ -0,0 +1,119 @@
+'use client';
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../Layout/Stack/index.js";
+import { hasHelperText, init_hasHelperText } from "../../../helpers/hasHelperText.js";
+import { Description, init_Description } from "../../Typography/Description/index.js";
+import { Label, init_Label } from "../../Typography/Label/index.js";
+import { SelectInputProvider, init_SelectInputProvider } from "./SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "./styles.css.js";
+import { Dropdown, init_Dropdown } from "./components/Dropdown/Dropdown.js";
+import { SelectBar, init_SelectBar } from "./components/SelectBar/SelectBar.js";
+import { useId, useRef } from "react";
+import { cn } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Data Entry/SelectInput/index.tsx
+var SelectInput;
+function init_SelectInput() {
+	return (init_SelectInput = __esmMin(() => {
+		init_hasHelperText();
+		init_Stack();
+		init_Description();
+		init_Label();
+		init_Dropdown();
+		init_SelectBar();
+		init_SelectInputProvider();
+		init_styles_css();
+		SelectInput = ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-testid": dataTestId, addOption, autofocus, className, clearable = false, descriptionDirection = "column", disabled = false, dropdownAlign, emptyState, error, footer, groupEmptyState, groupError, helper, id, isLoading, label, labelDescription, loadMore, multiselect = false, name, onBlur, onChange, onFocus, onOpen, optionalInfoPlacement = "right", options, placeholder = "Select item", placeholderSearch = "Search in list", portalTarget, readOnly = false, required = false, selectAll, selectAllGroup = false, size = "large", style, success, tooltip, value }) => {
+			const localId = useId();
+			const finalId = id !== null && id !== void 0 ? id : localId;
+			const helperId = useId();
+			const dropdownId = useId();
+			const ref = useRef(null);
+			const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce((acc, current) => acc + current.length, 0);
+			const numberOfDisabledOptions = Array.isArray(options) ? options.filter((option) => option.disabled).length : Object.values(options).reduce((acc, current) => acc + current.filter((option) => option.disabled).length, 0);
+			const finalDataTestId = dataTestId !== null && dataTestId !== void 0 ? dataTestId : `select-input-${name !== null && name !== void 0 ? name : "name"}`;
+			return /* @__PURE__ */ jsx(SelectInputProvider, {
+				multiselect,
+				numberOfDisabledOptions,
+				numberOfOptions,
+				onChange,
+				onOpen,
+				options,
+				refSelect: ref,
+				selectAll,
+				selectAllGroup,
+				size,
+				value,
+				children: /* @__PURE__ */ jsxs("div", {
+					"aria-label": name,
+					className: cn(className, selectInputStyle.container),
+					onBlur,
+					onFocus,
+					style,
+					children: [/* @__PURE__ */ jsx(Dropdown, {
+						addOption,
+						disabled,
+						descriptionDirection,
+						dropdownAlign,
+						emptyState,
+						footer,
+						groupEmptyState,
+						groupError,
+						id: dropdownId,
+						isLoading,
+						loadMore,
+						optionalInfoPlacement,
+						placeholder: placeholderSearch,
+						portalTarget,
+						refSelect: ref,
+						searchable: numberOfOptions >= 6 || !!addOption,
+						size,
+						children: /* @__PURE__ */ jsxs(Stack, {
+							"aria-label": ariaLabel,
+							gap: .5,
+							children: [label || labelDescription ? /* @__PURE__ */ jsx(Label, {
+								htmlFor: finalId,
+								labelDescription,
+								required,
+								size,
+								children: label
+							}) : null, /* @__PURE__ */ jsx(SelectBar, {
+								"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
+								"aria-labelledby": ariaLabelledby,
+								autoFocus: autofocus,
+								clearable,
+								"data-testid": finalDataTestId,
+								disabled,
+								dropdownId,
+								error,
+								id: finalId,
+								innerRef: ref,
+								label,
+								placeholder,
+								readOnly,
+								size,
+								success,
+								tooltip,
+								helperId,
+								helper
+							})]
+						})
+					}), /* @__PURE__ */ jsx(Description, {
+						error,
+						success,
+						helper,
+						disabled,
+						id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId,
+						className: selectInputStyle.helper
+					})]
+				})
+			});
+		};
+		SelectInput.displayName = "SelectInput";
+	}))();
+}
+
+//#endregion
+init_SelectInput();
+export { SelectInput, init_SelectInput };

package/dist/components/Data Entry/SelectInput/reducerFunctions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducerFunctions.d.ts","sourceRoot":"","sources":["../../../../src/components/Data Entry/SelectInput/reducerFunctions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEjE,eAAO,MAAM,eAAe,UACnB,YAAY,aACR,MAAM,EAAE,aACR,UAAU,EAAE,mBACN,MAAM,2BACE,MAAM;;;CAWhC,CAAA;AAED,eAAO,MAAM,iBAAiB,UAAW,YAAY,uBAAuB,MAAM,WAAW,QAAQ,iBAyBpG,CAAA;AAED,eAAO,MAAM,kBAAkB,UACtB,YAAY,WACV,QAAQ,eACJ,OAAO,iBACL,UAAU,UACjB,MAAM;;;CA8Bf,CAAA;AAED,eAAO,MAAM,cAAc;IACzB,cAAc;IACd,cAAc;CACd,CAAA;AAEF,eAAO,MAAM,YAAY,UAAW,YAAY,WAAW,QAAQ;IACjE,cAAc;IACd,cAAc;CASd,CAAA;AAEF,eAAO,MAAM,WAAW,mBAAoB,MAAM,EAAE,kBAAkB,MAAM,EAAE;;;CAG5E,CAAA"}

package/dist/components/Data Entry/SelectInput/reducerFunctions.js

@@ -0,0 +1,68 @@
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Data Entry/SelectInput/reducerFunctions.tsx
+var selectAllAction, selectGroupAction, selectOptionAction, clearAllAction, updateAction, resetAction;
+function init_reducerFunctions() {
+	return (init_reducerFunctions = __esmMin(() => {
+		selectAllAction = (state, allGroups, allValues, numberOfOptions, numberOfDisabledOptions) => {
+			if (state.selectedValues.length === numberOfOptions - numberOfDisabledOptions) return {
+				selectedGroups: [],
+				selectedValues: []
+			};
+			return {
+				selectedGroups: allGroups,
+				selectedValues: allValues.map((option) => option.value)
+			};
+		};
+		selectGroupAction = (state, selectedGroupAction, options) => {
+			if (!Array.isArray(options)) {
+				if (state.selectedGroups.includes(selectedGroupAction)) return {
+					selectedGroups: state.selectedGroups.filter((selectedGroup) => selectedGroup !== selectedGroupAction),
+					selectedValues: [...state.selectedValues].filter((selectedValue) => !options[selectedGroupAction].find((option) => option.value === selectedValue))
+				};
+				const newSelectedValues = [...state.selectedValues];
+				options[selectedGroupAction].map((option) => newSelectedValues.find((aValue) => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value));
+				return {
+					selectedGroups: [...state.selectedGroups, selectedGroupAction],
+					selectedValues: newSelectedValues
+				};
+			}
+			return state;
+		};
+		selectOptionAction = (state, options, multiselect, clickedOption, group) => {
+			if (multiselect) {
+				if (state.selectedValues.includes(clickedOption.value)) return {
+					selectedGroups: group && state.selectedGroups.includes(group) ? state.selectedGroups.filter((selectedGroup) => selectedGroup !== group) : [],
+					selectedValues: state.selectedValues.filter((val) => val !== clickedOption.value)
+				};
+				return {
+					selectedGroups: !Array.isArray(options) && group && options[group].every((option) => [...state.selectedValues, clickedOption.value].includes(option.value) || option.disabled) ? [...state.selectedGroups, group] : state.selectedGroups,
+					selectedValues: [...state.selectedValues, clickedOption.value]
+				};
+			}
+			return {
+				selectedGroups: state.selectedGroups,
+				selectedValues: [clickedOption.value]
+			};
+		};
+		clearAllAction = () => ({
+			selectedGroups: [],
+			selectedValues: []
+		});
+		updateAction = (state, options) => ({
+			selectedGroups: state.selectedGroups,
+			selectedValues: state.selectedValues.filter((selectedValue) => {
+				if (!Array.isArray(options)) return Object.keys(options).some((group) => options[group].some((option) => option.value === selectedValue && !option.disabled));
+				return options.some((option) => option.value === selectedValue && !option.disabled);
+			})
+		});
+		resetAction = (selectedGroups, selectedValues) => ({
+			selectedGroups,
+			selectedValues
+		});
+	}))();
+}
+
+//#endregion
+init_reducerFunctions();
+export { clearAllAction, init_reducerFunctions, resetAction, selectAllAction, selectGroupAction, selectOptionAction, updateAction };

package/dist/components/Data Entry/SelectInput/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/Data Entry/SelectInput/styles.css.ts"],"names":[],"mappings":"AAyCA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B5B,CAAA"}