@g4rcez/components 0.0.70 → 0.0.71

package/dist/src/components/form/{virtual-autocomplete.js → multi-combobox.js}

@@ -1,15 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
-import { flushSync } from "react-dom";
 import Fuzzy from "fuzzy-search";
 import { ChevronDown } from "lucide-react";
-import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion } from "motion/react";
+import React, { forwardRef, Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslations } from "../../hooks/use-components-provider";
+import { Dict } from "../../lib/dict";
 import { css, dispatchInput, initializeInputDataset } from "../../lib/dom";
-import { safeRegex } from "../../lib/fns";
+import { Tag } from "../core/tag";
+import { Checkbox } from "./checkbox";
 import { InputField } from "./input-field";
 const Frag = (props) => _jsx(Fragment, { children: props.children });
 const transitionStyles = {
@@ -21,22 +23,54 @@ const transitionStyles = {
 const fuzzyOptions = { caseSensitive: false, sort: false };
 const emptyRef = [];
 const List = forwardRef(function VirtualList(props, ref) {
-    return (_jsx(motion.ul, { ...props, ref: ref, className: "w-full border-b border-tooltip-border last:border-transparent rounded-lg", children: _jsx(AnimatePresence, { children: props.children }) }));
+    return (_jsx(motion.ul, { ...props, ref: ref, className: "w-full rounded-b-lg border-b border-tooltip-border last:border-transparent", children: _jsx(AnimatePresence, { children: props.children }) }));
 });
-const Item = forwardRef(function VirtualItem(props, ref) {
-    return (_jsx(motion.li, { ...props, ref: ref, className: "first:rounded-t-lg last:rounded-t-lg", children: props.children }));
+const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
+    return _jsx(motion.li, { ...props, ref: ref, className: "last:rounded-t-lg" });
 });
 const components = { List, Item };
-export const VirtualAutocomplete = forwardRef(({ options, dynamicOption = false, feedback = null, labelClassName, emptyMessage, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error, required = false, ...props }, externalRef) => {
+const OverflowControl = (props) => {
+    const translate = useTranslations();
+    const ref = useRef(null);
+    const countable = React.Children.count(props.children);
+    const [normalView, setNormalView] = useState(false);
+    useEffect(() => {
+        if (ref.current === null)
+            return;
+        const parent = ref.current.parentElement.getBoundingClientRect();
+        const items = Array.from(ref.current.querySelectorAll("[data-component='tag']"));
+        const child = items.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0);
+        const hasOnlyCounter = ref.current.querySelectorAll("[data-multicounter]").length;
+        if (hasOnlyCounter && countable <= 3)
+            return setNormalView(false);
+        if (child > parent.width)
+            return setNormalView(true);
+    }, [countable]);
+    return (_jsx("span", { ref: ref, className: "flex flex-nowrap gap-x-2", children: !normalView ? (props.children) : (_jsxs(Tag, { size: "small", "data-multicounter": "true", children: [countable, " ", translate.multiComboboxSelectedLabel] })) }));
+};
+const noop = () => { };
+export const MultiCombobox = forwardRef(({ left, error, right, options, container, rightLabel, interactive, emptyMessage, optionalText, selectedLabel, labelClassName, feedback = null, hideLeft = false, required = false, dynamicOption = false, ...props }, externalRef) => {
+    const map = useMemo(() => new Dict(options.map((x) => [x.value, x])), [options]);
     const fieldset = useRef(null);
     const virtuoso = useRef(null);
-    const defaults = props.value ?? props.defaultValue ?? "";
+    const defaults = props.value ?? props.defaultValue ?? emptyRef;
     const translation = useTranslations();
     const [h, setH] = useState(0);
     const [open, setOpen] = useState(false);
     const [shadow, setShadow] = useState("");
-    const [value, setValue] = useState(defaults);
-    const [label, setLabel] = useState(() => options.find((x) => x.value === defaults)?.label ?? defaults);
+    const [value, setValue] = useState(() => {
+        const d = new Dict();
+        defaults.forEach((x) => {
+            const result = map.get(x);
+            return result ? d.set(x, result) : undefined;
+        });
+        return d;
+    });
+    const deriveValue = useMemo(() => Array.from(value.keys()), [value]);
+    const [label, setLabel] = useState(() => {
+        const d = new Set(defaults);
+        return options.reduce((acc, x) => (d.has(x.value) ? [...acc, x.label ?? x.value] : acc), []) ?? defaults;
+    });
     const [index, setIndex] = useState(null);
     const listRef = useRef(emptyRef);
     const innerOptions = dynamicOption && shadow !== ""
@@ -50,19 +84,15 @@ export const VirtualAutocomplete = forwardRef(({ options, dynamicOption = false,
         ]
         : options;
     const list = new Fuzzy(innerOptions, ["value", "label"], fuzzyOptions).search(shadow);
-    const pattern = dynamicOption
-        ? undefined
-        : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
     useEffect(() => {
         if (!open)
             setH(0);
     }, [open]);
     useEffect(() => {
         if (props.value) {
-            const item = options.find((x) => x.value === props.value);
-            setValue(item?.label ?? props.value);
+            setValue(new Dict(props.value.map((x) => [x, map.get(x)])));
         }
-    }, [props.value]);
+    }, [props.value, map]);
     const { x, y, strategy, refs, context } = useFloating({
         open,
         transform: true,
@@ -76,14 +106,13 @@ export const VirtualAutocomplete = forwardRef(({ options, dynamicOption = false,
                 elementContext: "reference",
                 apply(a) {
                     const w = fieldset.current?.getBoundingClientRect().width;
-                    const ul = a.elements.floating.querySelector("ul");
-                    const fullSize = ul?.getBoundingClientRect().height || 0;
-                    const maxH = Math.min(fullSize < 40 ? 300 : fullSize, 300);
+                    const maxH = 360;
                     flushSync(() => setTimeout(() => setH(maxH), 200));
                     Object.assign(a.elements.floating.style, {
                         width: `${w}px`,
                         maxWidth: `${w}px`,
                         maxHeight: `${maxH}px`,
+                        height: `${maxH}px`,
                     });
                 },
             }),
@@ -114,18 +143,19 @@ export const VirtualAutocomplete = forwardRef(({ options, dynamicOption = false,
         return initializeInputDataset(input);
     }, []);
     const onSelect = (opt, i) => {
-        setValue(opt.value);
+        const clone = value.clone();
+        value.has(opt.value) ? clone.delete(opt.value) : clone.set(opt.value, opt);
+        setValue(clone);
         const input = refs.reference.current;
         if (!input)
             return;
         input?.setAttribute("data-value", opt.value);
-        input.value = opt.value;
+        input.value = Array.from(clone.values());
         const event = new Event("change", { bubbles: false, cancelable: true });
         input.dispatchEvent(event);
         if (props.onChange)
             props.onChange(event);
-        setLabel(opt.label ?? "");
-        setOpen(false);
+        setLabel((prev) => prev.concat(opt.label ?? ""));
         setShadow("");
         setIndex(i);
     };
@@ -135,7 +165,7 @@ export const VirtualAutocomplete = forwardRef(({ options, dynamicOption = false,
         if (!open && value === "")
             return setOpen(true);
         event.target.name = props.name || "";
-        return value ? setOpen(true) : props.onChange?.(event);
+        return value ? setOpen(true) : undefined;
     };
     const onCaretDownClick = () => {
         setOpen(true);
@@ -149,52 +179,18 @@ export const VirtualAutocomplete = forwardRef(({ options, dynamicOption = false,
     const onClose = () => {
         refs.reference.current?.setAttribute("data-value", "");
         setShadow("");
-        setValue("");
-        setLabel("");
         dispatchInput(refs.reference.current, "");
         setOpen(false);
     };
     const id = props.id || props.name;
-    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", className: "transition-colors link:text-primary", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "transition-colors link:text-danger", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("input", { "data-shadow": "true", ...getReferenceProps({
+    const tags = value.map((x) => (_jsx(Tag, { size: "small", children: x.label ?? x.value }, `multicombobox-${x.value}-x`)));
+    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", className: "transition-colors link:text-primary", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "transition-colors link:text-danger", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("button", { ...getReferenceProps({
                     ...props,
-                    onChange,
                     onFocus,
-                    pattern,
-                    ref: refs.setReference,
-                    name: `${id}-shadow`,
                     id: `${id}-shadow`,
-                    onClick: (e) => e.currentTarget.focus(),
-                    onKeyDown(event) {
-                        if (event.key === "ArrowDown") {
-                            let next = index + 1;
-                            if (next > list.length - 1)
-                                next = 0;
-                            virtuoso.current?.scrollIntoView({ index: next });
-                            return setIndex(next);
-                        }
-                        if (event.key === "ArrowUp") {
-                            let next = index - 1;
-                            if (next < 0)
-                                next = list.length - 1;
-                            virtuoso.current?.scrollIntoView({ index: next });
-                            return setIndex(next);
-                        }
-                        if (event.key === "Escape") {
-                            event.currentTarget.blur();
-                            return setOpen(false);
-                        }
-                        if (event.key === "Enter") {
-                            if (index !== null && list[index]) {
-                                event.preventDefault();
-                                return onSelect(list[index], index);
-                            }
-                            if (list.length === 1) {
-                                event.preventDefault();
-                                return onSelect(list[0], 0);
-                            }
-                        }
-                    },
-                }), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs("div", { ...getFloatingProps({
+                    name: `${id}-shadow`,
+                    ref: refs.setReference,
+                }), type: "button", "data-name": id, "data-target": id, "data-shadow": "true", "data-error": !!error, "aria-autocomplete": "list", "data-value": deriveValue.join(","), value: open ? shadow : label || value, className: css("input placeholder-input-mask group h-input-height w-full", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", "flex flex-row items-center gap-2 whitespace-nowrap text-left", "truncate overflow-ellipsis", props.className), children: _jsx(OverflowControl, { label: selectedLabel, children: tags }) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || deriveValue || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs("div", { ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...transitions.styles,
@@ -202,9 +198,38 @@ export const VirtualAutocomplete = forwardRef(({ options, dynamicOption = false,
                                 left: (x ?? 0) + (!!value ? 26 : 18),
                                 top: y ?? 0,
                             },
-                        }), "data-floating": "true", className: "z-floating m-0 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating", children: [list.length === 0 ? (_jsx("li", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { data: list, ref: virtuoso, hidden: list.length === 0, components: components, className: "bg-floating-background p-0 text-foreground rounded-lg border-floating-border", style: { height: h }, itemContent: (i, option) => {
+                        }), "data-floating": "true", className: "z-floating m-0 w-full origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating", children: [_jsx("input", { autoFocus: true, value: shadow, onChange: onChange, title: props.title, placeholder: translation.multiComboboxInnerPlaceholder, onKeyDown: (event) => {
+                                    if (event.key === "ArrowDown") {
+                                        let next = index + 1;
+                                        if (next > list.length - 1)
+                                            next = 0;
+                                        virtuoso.current?.scrollIntoView({ index: next });
+                                        return setIndex(next);
+                                    }
+                                    if (event.key === "ArrowUp") {
+                                        let next = index - 1;
+                                        if (next < 0)
+                                            next = list.length - 1;
+                                        virtuoso.current?.scrollIntoView({ index: next });
+                                        return setIndex(next);
+                                    }
+                                    if (event.key === "Escape") {
+                                        event.currentTarget.blur();
+                                        return setOpen(false);
+                                    }
+                                    if (event.key === "Enter") {
+                                        if (index !== null && list[index]) {
+                                            event.preventDefault();
+                                            return onSelect(list[index], index);
+                                        }
+                                        if (list.length === 1) {
+                                            event.preventDefault();
+                                            return onSelect(list[0], 0);
+                                        }
+                                    }
+                                }, className: "input placeholder-input-mask group mb-1 h-10 w-full flex-1 border-b border-input-border bg-transparent px-input-x py-input-y outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary" }), list.length === 0 ? (_jsx("li", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { data: list, ref: virtuoso, hidden: list.length === 0, style: { height: value.size === 0 ? h - 49 : h - 86 }, components: components, className: "border-floating-border bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
                                     const Label = option.Render ?? Frag;
-                                    const active = value === option.value || value === option.label;
+                                    const active = value.has(option.value) || value.has(option.label ?? "");
                                     const selected = index === i;
                                     const children = option.label ?? option.value;
                                     return (_jsx("button", { "data-value": option.value, ...getItemProps({
@@ -216,7 +241,6 @@ export const VirtualAutocomplete = forwardRef(({ options, dynamicOption = false,
                                             "aria-selected": active,
                                             "aria-busy": option.disabled,
                                             onClick: () => onSelect(option, i),
-                                            className: `cursor-pointer p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-primary text-primary-foreground" : ""}`
-                                        }), children: _jsx(Label, { ...props, label: option.label, value: option.value, children: children }) }));
-                                } })] }) })) : null })] }));
+                                        }), className: `focus:bg-floating-hover hover:bg-floating-hover w-full cursor-pointer p-2 text-left ${active || selected ? "bg-floating-hover text-floating-foreground" : ""}`, children: _jsx(Checkbox, { onChange: noop, checked: active, "aria-checked": active, onClick: (e) => void (e.stopPropagation(), e.preventDefault()), children: _jsx(Label, { ...props, label: option.label, value: option.value, children: children }) }) }));
+                                } }), value.size === 0 ? null : (_jsx("div", { className: "sticky bottom-0 flex w-full flex-nowrap items-center gap-2 overflow-x-auto rounded-b-lg bg-floating-background p-2", children: tags }))] }) })) : null })] }));
 });

package/dist/src/components/form/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,oGAuGlB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,oGAwGlB,CAAC"}

package/dist/src/components/form/select.js

@@ -27,5 +27,5 @@ export const Select = forwardRef(({ required = true, options, info, selectContai
         };
     }, []);
     const onClickLabel = () => inputRef.current?.focus();
-    return (_jsx(InputField, { info: info, left: left, error: error, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, componentName: "select", rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, labelClassName: labelClassName, placeholder: props.placeholder, right: _jsx("label", { htmlFor: id, children: _jsxs("button", { onClick: onClickLabel, type: "button", className: "mt-2 transition-colors hover:text-primary", children: [_jsx(ChevronDownIcon, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }) }), children: _jsxs("select", { ...props, id: id, name: id, value: props.value, required: required, ref: mergeRefs(ref, inputRef), "data-selected": !!props.value || false, defaultValue: props.value ? undefined : "", className: css("input select group h-10 w-full flex-1 appearance-none rounded-md", "bg-transparent px-2 py-1 text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className), children: [_jsx("option", { value: "", disabled: true, hidden: true, children: props.placeholder }), options.map((option) => (_createElement("option", { ...option, value: option.value, children: option.label ?? option.value, key: `${id}-select-option-${option.value}` })))] }) }));
+    return (_jsx(InputField, { info: info, left: left, error: error, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, componentName: "select", rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, labelClassName: labelClassName, placeholder: props.placeholder, right: _jsx("label", { htmlFor: id, children: _jsxs("button", { onClick: onClickLabel, type: "button", className: "mt-2 transition-colors hover:text-primary", children: [_jsx(ChevronDownIcon, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }) }), children: _jsxs("select", { ...props, id: id, name: id, value: props.value, required: required, ref: mergeRefs(ref, inputRef), "data-selected": !!props.value || false, defaultValue: props.value ? undefined : "", title: typeof props.title === "string" ? props.title : undefined, className: css("input select group h-10 w-full flex-1 appearance-none rounded-md", "bg-transparent px-2 py-1 text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className), children: [_jsx("option", { value: "", disabled: true, hidden: true, children: props.placeholder }), options.map((option) => (_createElement("option", { ...option, value: option.value, children: option.label ?? option.value, key: `${id}-select-option-${option.value}` })))] }) }));
 });

package/dist/src/components/index.d.ts

@@ -16,7 +16,7 @@ export * from "./floating/modal";
 export * from "./floating/toolbar";
 export * from "./floating/tooltip";
 export * from "./form/autocomplete";
-export * from "./form/virtual-autocomplete";
+export * from "./form/multi-combobox";
 export * from "./form/checkbox";
 export * from "./form/date-picker";
 export * from "./form/file-upload";

package/dist/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/src/components/index.js

@@ -16,7 +16,7 @@ export * from "./floating/modal";
 export * from "./floating/toolbar";
 export * from "./floating/tooltip";
 export * from "./form/autocomplete";
-export * from "./form/virtual-autocomplete";
+export * from "./form/multi-combobox";
 export * from "./form/checkbox";
 export * from "./form/date-picker";
 export * from "./form/file-upload";

package/dist/src/components/table/thead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../../src/components/table/thead.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,GAAG,EAAY,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIjE,KAAK,gBAAgB,CAAC,CAAC,SAAS,EAAE,IAAI;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;CACrB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC,CAAC;AAyIpI,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,EAAE,SAAS,gBAAgB,CAAC,CAAC,CAAC,4CA6BnE,CAAC"}
+{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../../src/components/table/thead.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,GAAG,EAAY,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIjE,KAAK,gBAAgB,CAAC,CAAC,SAAS,EAAE,IAAI;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;CACrB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC,CAAC;AA0IpI,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,EAAE,SAAS,gBAAgB,CAAC,CAAC,CAAC,4CA6BnE,CAAC"}

package/dist/src/components/table/thead.js

@@ -39,7 +39,7 @@ const HeaderChild = (props) => {
     const ariaSort = !ownSorter?.type ? "none" : ownSorter.type === Order.Asc ? "ascending" : "descending";
     const label = getLabel(props.header);
     const width = useMotionValue(undefined);
-    return (_jsxs(Reorder.Item, { ...props.header.thProps, as: "th", ref: dragRef, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, style: { width }, role: "columnheader", "aria-sort": ariaSort, value: props.header, "aria-busy": props.loading, className: `relative hidden min-w-0 border border-b border-transparent border-b-table-border border-r-table-border font-medium first:table-cell last:border-r-transparent md:table-cell ${props.header.thProps?.className ?? ""}`, children: [_jsx("span", { className: "flex h-full items-center justify-between px-2 py-4", children: _jsxs("span", { className: "flex items-center gap-1", children: [props.inlineFilter && defaultAllowFilter ? (_jsx(Dropdown, { arrow: true, trigger: _jsxs("span", { children: [_jsxs("span", { id: `${props.header.id}-filter-dropdown-button`, className: "sr-only", children: [translation.tableFilterDropdownTitleUnique, " ", label] }), _jsx(FilterIcon, { "aria-labelledby": `${props.header.id}-filter-dropdown-button`, size: 14 })] }), title: _jsxs("span", { className: "text-lg font-medium", children: [translation.tableFilterDropdownTitleUnique, " ", _jsx("span", { className: "text-primary", children: label })] }), children: (ownFilters.length === 0) === null ? null : (_jsxs("ul", { className: "font-medium", children: [ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { onDelete: onDelete, filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))), _jsx("li", { children: _jsxs("button", { type: "button", className: "flex items-center gap-1 text-primary", onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations))), children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableFilterNewFilter] }) })] })) })) : null, _jsx("span", { className: "pointer-events-auto text-balance text-base", children: props.header.thead }), props.inlineSorter && defaultAllowSort ? (_jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })) : null] }) }), _jsx(motion.button, { drag: "x", draggable: true, dragListener: true, dragMomentum: true, type: "button", animate: false, dragElastic: 0, dragPropagation: true, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, "data-type": "resizer", dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: "absolute right-0 top-0 block h-full w-1 cursor-col-resize hover:bg-primary active:bg-primary", onDrag: (e, info) => {
+    return (_jsxs(Reorder.Item, { ...props.header.thProps, as: "th", ref: dragRef, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, style: { width }, role: "columnheader", "aria-sort": ariaSort, value: props.header, "aria-busy": props.loading, className: `relative hidden min-w-0 border border-b border-transparent border-b-table-border border-r-table-border font-medium first:table-cell last:border-r-transparent md:table-cell ${props.header.thProps?.className ?? ""}`, children: [_jsx("span", { className: "flex h-full items-center justify-between px-2 py-4", children: _jsxs("span", { className: "flex items-center gap-1", children: [props.inlineFilter && defaultAllowFilter ? (_jsx(Dropdown, { arrow: true, trigger: _jsxs("span", { children: [_jsxs("span", { id: `${props.header.id}-filter-dropdown-button`, className: "sr-only", children: [translation.tableFilterDropdownTitleUnique, " ", label] }), _jsx(FilterIcon, { "aria-labelledby": `${props.header.id}-filter-dropdown-button`, size: 14 })] }), title: _jsxs("span", { className: "text-lg font-medium", children: [translation.tableFilterDropdownTitleUnique, " ", _jsx("span", { className: "text-primary", children: label })] }), children: (ownFilters.length === 0) === null ? null : (_jsxs("ul", { className: "font-medium", children: [ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { onDelete: onDelete, filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))), _jsx("li", { children: _jsxs("button", { type: "button", className: "flex items-center gap-1 text-primary", onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations))), children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableFilterNewFilter] }) })] })) })) : null, _jsx("span", { className: "pointer-events-auto text-balance text-base", children: props.header.thead }), props.inlineSorter && defaultAllowSort ? (_jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })) : null] }) }), _jsx(motion.button, { drag: "x", draggable: true, dragListener: true, dragMomentum: true, type: "button", animate: false, dragElastic: 0, dragPropagation: true, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, "data-type": "resizer", title: props.header.id, dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: "absolute right-0 top-0 block h-full w-1 cursor-col-resize hover:bg-primary active:bg-primary", onDrag: (e, info) => {
                     const div = e.target;
                     const v = width.get() || div.getBoundingClientRect().width;
                     const delta = info.delta.x;

package/dist/src/hooks/use-components-provider.d.ts

@@ -51,9 +51,15 @@ declare const defaultTranslations: {
     calendarFromDate: string;
     calendarToDate: string;
     calendarToday: string;
+    multiComboboxSelectedLabel: string;
+    multiComboboxInnerPlaceholder: string;
 };
 export type Translations = typeof defaultTranslations;
+type Tweaks = {
+    inputIconFeedback: boolean;
+};
 type ContextProps = Partial<{
+    tweaks: Partial<Tweaks>;
     map: Partial<Translations>;
     locale: Locales | undefined;
     parser: typeof parsers.hsla;
@@ -110,7 +116,10 @@ export declare const useTranslations: () => {
     calendarFromDate: string;
     calendarToDate: string;
     calendarToday: string;
+    multiComboboxSelectedLabel: string;
+    multiComboboxInnerPlaceholder: string;
 };
 export declare const useColorParser: () => (v: string) => `hsla(${string})`;
+export declare const useTweaks: () => Tweaks;
 export {};
 //# sourceMappingURL=use-components-provider.d.ts.map

package/dist/src/hooks/use-components-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-components-provider.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-components-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA2B,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAgDe;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;CASxI,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC;AAQtD,KAAK,YAAY,GAAG,OAAO,CAAC;IACxB,GAAG,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;CAC/B,CAAC,CAAC;AAEH,eAAO,MAAM,kBAAkB,UAAW,iBAAiB,CAAC,YAAY,CAAC,4CAMxE,CAAC;AAEF,eAAO,MAAM,SAAS,YAAa,OAAO,KAAG,OAAO,GAAG,SAKtD,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAxCY;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;CA4CxI,CAAC;AAEF,eAAO,MAAM,cAAc,wCAI1B,CAAC"}
+{"version":3,"file":"use-components-provider.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-components-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA2B,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAgDe;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;CAYxI,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC;AAEtD,KAAK,MAAM,GAAG;IACV,iBAAiB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAaF,KAAK,YAAY,GAAG,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,GAAG,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;CAC/B,CAAC,CAAC;AASH,eAAO,MAAM,kBAAkB,UAAW,iBAAiB,CAAC,YAAY,CAAC,4CAWxE,CAAC;AAEF,eAAO,MAAM,SAAS,YAAa,OAAO,KAAG,OAAO,GAAG,SAKtD,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAjEY;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;CAqExI,CAAC;AAEF,eAAO,MAAM,cAAc,wCAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,MAI5B,CAAC"}

package/dist/src/hooks/use-components-provider.js

@@ -46,14 +46,25 @@ const defaultTranslations = {
     calendarFromDate: "From",
     calendarToDate: "To",
     calendarToday: "Today",
+    multiComboboxSelectedLabel: "Selected",
+    multiComboboxInnerPlaceholder: "Search...",
+};
+const defaultTweaks = {
+    inputIconFeedback: true,
 };
 const Context = createContext({
-    colorTokenParser: parsers.hsla,
-    translations: defaultTranslations,
+    tweaks: defaultTweaks,
+    parser: parsers.hsla,
+    map: defaultTranslations,
     locale: undefined,
 });
 export const ComponentsProvider = (props) => {
-    const memoMap = useMemo(() => ({ locale: props.locale, translations: { ...defaultTranslations, ...props.map }, colorTokenParser: props.parser || parsers.hsla, }), [props]);
+    const memoMap = useMemo(() => ({
+        locale: props.locale,
+        tweaks: { ...defaultTweaks, ...props.tweaks },
+        colorTokenParser: props.parser || parsers.hsla,
+        map: { ...defaultTranslations, ...props.map },
+    }), [props]);
     return _jsx(Context.Provider, { value: memoMap, children: props.children });
 };
 export const useLocale = (locale) => {
@@ -68,11 +79,17 @@ export const useTranslations = () => {
     const ctx = useContext(Context);
     if (!ctx)
         return defaultTranslations;
-    return ctx.translations;
+    return ctx.map;
 };
 export const useColorParser = () => {
     const ctx = useContext(Context);
     if (!ctx)
         return parsers.hsla;
-    return ctx.colorTokenParser;
+    return ctx.parser;
+};
+export const useTweaks = () => {
+    const ctx = useContext(Context);
+    if (!ctx)
+        return defaultTweaks;
+    return ctx.tweaks;
 };

package/dist/src/lib/dict.d.ts

@@ -0,0 +1,9 @@
+export declare class Dict<K, V> extends Map<K, V> {
+    private list;
+    constructor(init?: [K, V][] | Dict<K, V>);
+    set(key: K, value: V): this;
+    delete(key: K): boolean;
+    map(callback: (v: V) => any): any[];
+    clone(): Dict<K, V>;
+}
+//# sourceMappingURL=dict.d.ts.map

package/dist/src/lib/dict.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dict.d.ts","sourceRoot":"","sources":["../../../src/lib/dict.ts"],"names":[],"mappings":"AAAA,qBAAa,IAAI,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;IACrC,OAAO,CAAC,IAAI,CAAgB;gBAET,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;IAOxC,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI;IAM3B,MAAM,CAAC,GAAG,EAAE,CAAC;IAMb,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG;IAI3B,KAAK;CAGf"}

package/dist/src/lib/dict.js

@@ -0,0 +1,28 @@
+export class Dict extends Map {
+    list = [];
+    constructor(init) {
+        super(init);
+        this.list = [];
+        if (Array.isArray(init))
+            this.list = init;
+        if (init instanceof Dict)
+            this.list = Array.from(init.entries());
+    }
+    set(key, value) {
+        super.set(key, value);
+        this.list = (this.list ?? []).concat([[key, value]]);
+        return this;
+    }
+    delete(key) {
+        const o = super.delete(key);
+        this.list = Array.from(this.entries()) ?? [];
+        return o;
+    }
+    map(callback) {
+        return this.list.map((x) => callback(x[1]));
+    }
+    clone() {
+        return new Dict(this);
+    }
+}
+const m = new Map();

package/dist/src/styles/dark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../../src/styles/dark.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,UAAU,EAAE,YAwLxB,CAAC"}
+{"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../../src/styles/dark.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,UAAU,EAAE,YA0LxB,CAAC"}

package/dist/src/styles/dark.js

@@ -71,12 +71,14 @@ export const DARK_THEME = {
         floating: {
             foreground: "hsla(210, 40%, 98%)",
             background: "hsla(0, 0%, 14%)",
+            hover: "hsla(221, 10%, 22%)",
             border: "hsla(240, 7%, 27%)",
             overlay: "hsla(0, 0%, 0%)",
         },
         tooltip: {
             foreground: "hsla(210, 40%, 98%)",
             background: "hsla(0, 0%, 8%)",
+            hover: "hsla(221, 10%, 35%)",
             border: "hsla(0, 0%, 19%)",
             overlay: "hsla(0, 0%, 0%)",
         },

package/dist/src/styles/light.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../src/styles/light.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAwLzB,CAAC"}
+{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../src/styles/light.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YA0LzB,CAAC"}

package/dist/src/styles/light.js

@@ -71,12 +71,14 @@ export const LIGHT_THEME = {
         floating: {
             foreground: "hsla(217, 15%, 20%)",
             background: "hsla(0, 0%, 100%)",
+            hover: "hsla(0, 0%, 92%)",
             border: "hsla(210, 25%, 88%)",
             overlay: "hsla(0, 0%, 0%)",
         },
         tooltip: {
             foreground: "hsla(217, 15%, 20%)",
             background: "hsla(210, 25%, 98%)",
+            hover: "hsla(210, 25%, 92%)",
             border: "hsla(200, 1%, 80%)",
             overlay: "hsla(0, 0%, 0%)",
         },

package/dist/src/styles/theme.types.d.ts

@@ -9,6 +9,7 @@ type BasicTokens = {
     foreground: string;
 };
 type ComponentToken = {
+    hover: string;
     border: string;
     overlay: string;
     background: string;

package/dist/src/styles/theme.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../src/styles/theme.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../src/styles/theme.types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@g4rcez/components",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "sideEffects": false,
   "private": false,
   "packageManager": "pnpm@8.15.3",
@@ -42,7 +42,6 @@
     "@floating-ui/react": "0.26.20",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-toast": "1.2.1",
-    "@tanstack/react-virtual": "3.11.2",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "date-fns": "3.6.0",

package/dist/src/components/form/virtual-autocomplete.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-import { Label } from "../../types";
-import { InputFieldProps } from "./input-field";
-import { type OptionProps } from "./select";
-export type VirtualAutocompleteItemProps = OptionProps & {
-    Render?: React.FC<OptionProps>;
-};
-export type VirtualAutocomplete = Omit<InputFieldProps<"input">, "value"> & {
-    value?: string;
-    emptyMessage?: Label;
-    dynamicOption?: boolean;
-    options: VirtualAutocompleteItemProps[];
-};
-export declare const VirtualAutocomplete: React.ForwardRefExoticComponent<Omit<VirtualAutocomplete, "ref"> & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=virtual-autocomplete.d.ts.map

package/dist/src/components/form/virtual-autocomplete.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"virtual-autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/virtual-autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAMzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,4BAA4B,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAI5F,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,4BAA4B,EAAE,CAAC;CAC3C,CAAC;AA+BF,eAAO,MAAM,mBAAmB,2GAuU/B,CAAC"}