@ultraviolet/ui 3.11.1 → 3.12.0

package/dist/components/SelectInput/components/dropdown.css.js

@@ -1,49 +1,40 @@
-/* empty css                        */
+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
-var dropdownWidth = "var(--uv_5kpm8k0)";
-var dropdown = "uv_5kpm8k1";
-var dropdownContainer = "uv_5kpm8k2";
-var dropdownContainerUnGrouped = "uv_5kpm8k3";
-var dropdownGroup = "uv_5kpm8k4";
-var dropdownGroupSelectable = createRuntimeFn({
-	defaultClassName: "uv_5kpm8k5",
-	variantClassNames: { size: {
-		small: "uv_5kpm8k6",
-		"default": "uv_5kpm8k7"
-	} },
-	defaultVariants: { size: "default" },
-	compoundVariants: []
-});
-var dropdownGroupWrapper = "uv_5kpm8k8";
-var emptyStateGroupStyle = "uv_5kpm8k9";
-var dropdownItem = createRuntimeFn({
-	defaultClassName: "uv_5kpm8kb uv_5kpm8ka uv_5kpm8k9",
-	variantClassNames: {
-		selected: { true: "uv_5kpm8kc" },
-		size: {
-			"default": "uv_5kpm8kd",
-			small: "uv_5kpm8ke"
+var dropdownWidth, dropdownGroupSelectable, dropdownItem;
+var init_dropdown_css = __esmMin(() => {
+	init_dropdown_css_ts_vanilla();
+	dropdownWidth = "var(--uv_5kpm8k0)";
+	dropdownGroupSelectable = createRuntimeFn({
+		defaultClassName: "uv_5kpm8k5",
+		variantClassNames: { size: {
+			small: "uv_5kpm8k6",
+			"default": "uv_5kpm8k7"
+		} },
+		defaultVariants: { size: "default" },
+		compoundVariants: []
+	});
+	dropdownItem = createRuntimeFn({
+		defaultClassName: "uv_5kpm8kb uv_5kpm8ka uv_5kpm8k9",
+		variantClassNames: {
+			selected: { true: "uv_5kpm8kc" },
+			size: {
+				"default": "uv_5kpm8kd",
+				small: "uv_5kpm8ke"
+			},
+			disabled: { true: "uv_5kpm8kf" }
+		},
+		defaultVariants: {
+			disabled: false,
+			selected: false,
+			size: "default"
 		},
-		disabled: { true: "uv_5kpm8kf" }
-	},
-	defaultVariants: {
-		disabled: false,
-		selected: false,
-		size: "default"
-	},
-	compoundVariants: []
+		compoundVariants: []
+	});
 });
-var footer = "uv_5kpm8kg";
-var dropdownCheckbox = "uv_5kpm8kh";
-var dropdownEmptyState = "uv_5kpm8ki";
-var dropdownLoadMore = "uv_5kpm8kj";
-var dropdownInfo = "uv_5kpm8kk";
-var dropdownInfoTextItem = "uv_5kpm8kl";
-var dropdownInfoContainer = "uv_5kpm8km";
-var searchBar = "uv_5kpm8kn";
-var comboboxCreate = "uv_5kpm8ko uv_5kpm8ka uv_5kpm8k9";
 
 //#endregion
-export { comboboxCreate, dropdown, dropdownCheckbox, dropdownContainer, dropdownContainerUnGrouped, dropdownEmptyState, dropdownGroup, dropdownGroupSelectable, dropdownGroupWrapper, dropdownInfo, dropdownInfoContainer, dropdownInfoTextItem, dropdownItem, dropdownLoadMore, dropdownWidth, emptyStateGroupStyle, footer, searchBar };
+init_dropdown_css();
+export { dropdownWidth, init_dropdown_css };

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

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/SelectInput/components/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/selectBar.css.d.ts

@@ -1,7 +1,7 @@
 export declare const maxWidthTag: `var(--${string})`;
 export declare const minWidthTag: `var(--${string})`;
 export declare const selectbarState: Record<"large" | "small", string>;
-export declare const selectinputPlaceholder: string;
+export declare const placeholder: string;
 export declare const selectBarBase: string;
 export declare const selectBar: import("@vanilla-extract/recipes").RuntimeFn<{
     disabled: {

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

@@ -1 +1 @@
-{"version":3,"file":"selectBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/selectBar.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,WAAW,oBAItB,CAAA;AACF,eAAO,MAAM,WAAW,oBAItB,CAAA;AAEF,eAAO,MAAM,cAAc,mCASzB,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAGjC,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"}
+{"version":3,"file":"selectBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/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,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

@@ -1,62 +1,58 @@
-/* empty css                                                    */
-/* empty css                                    */
-/* empty css                         */
+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
-var maxWidthTag = "var(--uv_1ba7knd0)";
-var minWidthTag = "var(--uv_1ba7knd1)";
-var selectbarState = {
-	large: "uv_1ba7knd2",
-	small: "uv_1ba7knd3"
-};
-var selectinputPlaceholder = "uv_1ba7knd4";
-var selectBar = createRuntimeFn({
-	defaultClassName: "uv_1ba7knd6 uv_1ba7knd5",
-	variantClassNames: {
-		disabled: { true: "uv_1ba7knd7" },
-		dropdownVisible: { true: "uv_1ba7knd8" },
-		readOnly: { true: "uv_1ba7knd9" },
-		size: {
-			large: "uv_1ba7knda",
-			medium: "uv_1ba7kndb",
-			small: "uv_1ba7kndc"
+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)";
+	selectBar = createRuntimeFn({
+		defaultClassName: "uv_1ba7knd6 uv_1ba7knd5",
+		variantClassNames: {
+			disabled: { true: "uv_1ba7knd7" },
+			dropdownVisible: { true: "uv_1ba7knd8" },
+			readOnly: { true: "uv_1ba7knd9" },
+			size: {
+				large: "uv_1ba7knda",
+				medium: "uv_1ba7kndb",
+				small: "uv_1ba7kndc"
+			},
+			state: {
+				danger: "uv_1ba7kndd",
+				neutral: "uv_1ba7knde",
+				success: "uv_1ba7kndf"
+			}
 		},
-		state: {
-			danger: "uv_1ba7kndd",
-			neutral: "uv_1ba7knde",
-			success: "uv_1ba7kndf"
-		}
-	},
-	defaultVariants: {
-		disabled: false,
-		dropdownVisible: false,
-		readOnly: false,
-		size: "large",
-		state: "neutral"
-	},
-	compoundVariants: [
-		[{
-			dropdownVisible: true,
+		defaultVariants: {
+			disabled: false,
+			dropdownVisible: false,
+			readOnly: false,
+			size: "large",
 			state: "neutral"
-		}, "uv_1ba7kndg"],
-		[{
-			dropdownVisible: true,
-			state: "success"
-		}, "uv_1ba7kndh"],
-		[{
-			dropdownVisible: true,
-			state: "danger"
-		}, "uv_1ba7kndi"]
-	]
+		},
+		compoundVariants: [
+			[{
+				dropdownVisible: true,
+				state: "neutral"
+			}, "uv_1ba7kndg"],
+			[{
+				dropdownVisible: true,
+				state: "success"
+			}, "uv_1ba7kndh"],
+			[{
+				dropdownVisible: true,
+				state: "danger"
+			}, "uv_1ba7kndi"]
+		]
+	});
 });
-var selectBarTags = {
-	hidden: "uv_1ba7kndk uv_1ba7kndj",
-	visible: "uv_1ba7kndl uv_1ba7kndj"
-};
-var selectedValues = "uv_1ba7kndm";
-var plusTag = "uv_1ba7kndn";
-var multiselectStack = "uv_1ba7kndo";
 
 //#endregion
-export { maxWidthTag, minWidthTag, multiselectStack, plusTag, selectBar, selectBarTags, selectbarState, selectedValues, selectinputPlaceholder };
+init_selectBar_css();
+export { init_selectBar_css, maxWidthTag, minWidthTag };

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

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/SelectInput/components/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/constants.js

@@ -1,15 +1,21 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
 //#region src/components/SelectInput/constants.ts
-const OPTION_SELECTOR = "#items > div[role=\"option\"]:not([aria-disabled=\"true\"]), #add-option";
-const SIZES_TAG = {
-	gap: 8,
-	paddings: 16,
-	plusTag: 48
-};
-const INPUT_SIZE_HEIGHT = {
-	large: "600",
-	medium: "500",
-	small: "400"
-};
+var OPTION_SELECTOR, SIZES_TAG, INPUT_SIZE_HEIGHT;
+var 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
-export { INPUT_SIZE_HEIGHT, OPTION_SELECTOR, SIZES_TAG };
+init_constants();
+export { INPUT_SIZE_HEIGHT, OPTION_SELECTOR, SIZES_TAG, init_constants };

package/dist/components/SelectInput/findOptionInOptions.js

@@ -1,12 +1,16 @@
-import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/SelectInput/findOptionInOptions.ts
-const 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);
-};
+var findOptionInOptions;
+var 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
-export { findOptionInOptions };
+init_findOptionInOptions();
+export { findOptionInOptions, init_findOptionInOptions };

package/dist/components/SelectInput/index.js

@@ -1,111 +1,119 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../Stack/index.js";
-import { Text } from "../Text/index.js";
-import { Label } from "../Label/index.js";
-import { SelectInputProvider } from "./SelectInputProvider.js";
-import { Dropdown } from "./components/Dropdown.js";
-import { SelectBar } from "./components/SelectBar.js";
-import { selectinputContainer, selectinputHelper } from "./styles.css.js";
+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 { Label, init_Label } from "../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.js";
+import { SelectBar, init_SelectBar } from "./components/SelectBar.js";
 import { useId, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SelectInput/index.tsx
-/**
-* SelectInput component is used to select one or many elements from a selection.
-*/
-const SelectInput = ({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size = "large", emptyState, descriptionDirection = "column", success, error, "data-testid": dataTestId, className, tooltip, footer, placeholderSearch = "Search in list", placeholder = "Select item", searchable = true, disabled = false, readOnly = false, clearable = false, multiselect = false, required = false, labelDescription, autofocus, loadMore, optionalInfoPlacement = "right", isLoading, selectAll, selectAllGroup = false, dropdownAlign, portalTarget, onOpen, groupEmptyState, groupError, style, addOption }) => {
-	const localId = useId();
-	const finalId = id !== null && id !== void 0 ? id : localId;
-	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, selectinputContainer),
-			onBlur,
-			onFocus,
-			style,
-			children: [
-				/* @__PURE__ */ jsx(Dropdown, {
-					addOption,
-					descriptionDirection,
-					dropdownAlign,
-					emptyState,
-					footer,
-					groupEmptyState,
-					groupError,
-					id: dropdownId,
-					isLoading,
-					loadMore,
-					optionalInfoPlacement,
-					placeholder: placeholderSearch,
-					portalTarget,
-					refSelect: ref,
-					searchable,
-					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, {
-							autoFocus: autofocus,
-							clearable,
-							"data-testid": finalDataTestId,
-							disabled,
-							dropdownId,
-							error,
-							id: finalId,
-							innerRef: ref,
-							label,
-							placeholder,
-							readOnly,
-							size,
-							success,
-							tooltip
-						})]
-					})
-				}),
-				!(error || success) && helper ? /* @__PURE__ */ jsx(Text, {
-					as: "p",
-					className: selectinputHelper,
-					prominence: "weak",
-					sentiment: "neutral",
-					variant: size === "small" ? "captionSmall" : "caption",
-					children: helper
-				}) : null,
-				error && typeof error === "string" || success ? /* @__PURE__ */ jsx(Text, {
-					as: "p",
-					className: selectinputHelper,
-					prominence: "default",
-					sentiment: error ? "danger" : "success",
-					variant: size === "small" ? "captionSmall" : "caption",
-					children: error || success
-				}) : null
-			]
-		})
-	});
-};
+var SelectInput;
+var init_SelectInput = __esmMin(() => {
+	init_Label();
+	init_Stack();
+	init_Text();
+	init_Dropdown();
+	init_SelectBar();
+	init_SelectInputProvider();
+	init_styles_css();
+	SelectInput = ({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size = "large", emptyState, descriptionDirection = "column", success, error, "data-testid": dataTestId, className, tooltip, footer, placeholderSearch = "Search in list", placeholder = "Select item", searchable = true, disabled = false, readOnly = false, clearable = false, multiselect = false, required = false, labelDescription, autofocus, loadMore, optionalInfoPlacement = "right", isLoading, selectAll, selectAllGroup = false, dropdownAlign, portalTarget, onOpen, groupEmptyState, groupError, style, addOption }) => {
+		const localId = useId();
+		const finalId = id !== null && id !== void 0 ? id : localId;
+		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,
+						descriptionDirection,
+						dropdownAlign,
+						emptyState,
+						footer,
+						groupEmptyState,
+						groupError,
+						id: dropdownId,
+						isLoading,
+						loadMore,
+						optionalInfoPlacement,
+						placeholder: placeholderSearch,
+						portalTarget,
+						refSelect: ref,
+						searchable,
+						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, {
+								autoFocus: autofocus,
+								clearable,
+								"data-testid": finalDataTestId,
+								disabled,
+								dropdownId,
+								error,
+								id: finalId,
+								innerRef: ref,
+								label,
+								placeholder,
+								readOnly,
+								size,
+								success,
+								tooltip
+							})]
+						})
+					}),
+					!(error || success) && helper ? /* @__PURE__ */ jsx(Text, {
+						as: "p",
+						className: selectInputStyle.helper,
+						prominence: "weak",
+						sentiment: "neutral",
+						variant: size === "small" ? "captionSmall" : "caption",
+						children: helper
+					}) : null,
+					error && typeof error === "string" || success ? /* @__PURE__ */ jsx(Text, {
+						as: "p",
+						className: selectInputStyle.helper,
+						prominence: "default",
+						sentiment: error ? "danger" : "success",
+						variant: size === "small" ? "captionSmall" : "caption",
+						children: error || success
+					}) : null
+				]
+			})
+		});
+	};
+});
 
 //#endregion
-export { SelectInput };
+init_SelectInput();
+export { SelectInput, init_SelectInput };