@g4rcez/components 0.0.70 → 0.0.71

package/dist/preset/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/preset/src/styles/dark.js

@@ -71,12 +71,14 @@ export var 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/preset/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/preset/src/styles/light.js

@@ -71,12 +71,14 @@ export var 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/preset/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/preset/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/dist/src/components/display/calendar.js

@@ -209,5 +209,5 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
         onChangeYear?.(new Date(value));
         defer(value);
     };
-    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { "data-component": "calendar", ref: root, className: css("relative overflow-hidden", styles?.calendar), children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", custom: state.direction, onExitComplete: dispatch.onExitComplete, children: _jsxs(motion.div, { initial: "enter", animate: "middle", exit: "exit", children: [_jsxs("header", { className: "relative flex justify-between", children: [_jsx(motion.button, { type: "button", layout: true, "data-focustrap": "prev", variants: removeImmediately, onClick: dispatch.previousMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { layout: true, variants: variants, custom: state.direction, className: "absolute inset-0 isolate z-normal flex items-center justify-center font-semibold", children: _jsxs("span", { className: "flex w-fit items-center justify-center gap-0.5 py-1", children: [_jsx("select", { value: monthString, onChange: dispatch.onChangeMonth, style: { width: `${monthString.length}ch` }, className: "cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary", children: state.months }), _jsx(TheMaskInput, { mask: "int", maxLength: 4, placeholder: "YYYY", value: state.year, onChange: internalOnChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 cursor-pointer appearance-none bg-transparent hover:text-primary" })] }) }), _jsx(motion.button, { layout: true, type: "button", "data-focustrap": "next", variants: removeImmediately, onClick: dispatch.nextMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary", children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "absolute inset-0", style: { backgroundImage: "linear-gradient(to right, hsla(var(--card-background)) 15%, transparent 30%, transparent 70%, hsla(var(--card-background)) 85%)" } })] }), _jsxs(motion.table, { className: "mt-2 table min-w-full table-auto border-0", children: [_jsx("thead", { children: _jsx("tr", { children: state.week.map((dayOfWeek) => (_jsx("th", { className: css("py-2 text-sm font-medium capitalize", styles?.weekDay), children: dayOfWeek.toLocaleDateString(currentLocale, { weekday: "short" }) }, dayOfWeek.toString()))) }) }), _jsx(CalendarBody, { zip: zip, range: range, styles: styles, date: date || null, dispatch: dispatch, markRange: markRange, markToday: markToday, rangeMode: rangeMode, stateDate: state.date, labelRange: labelRange, stateRange: state.range, RenderOnDay: RenderOnDay, direction: state.direction, disabledDate: disabledDate, onKeyDown: dispatch.onKeyDown })] })] }, monthString) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "transition-transform duration-300 hover:scale-105", type: "button", onClick: dispatch.setToday, children: translations.calendarToday }) })] }) }));
+    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { "data-component": "calendar", ref: root, className: css("relative overflow-hidden", styles?.calendar), children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", custom: state.direction, onExitComplete: dispatch.onExitComplete, children: _jsxs(motion.div, { initial: "enter", animate: "middle", exit: "exit", children: [_jsxs("header", { className: "relative flex justify-between", children: [_jsx(motion.button, { type: "button", layout: true, "data-focustrap": "prev", variants: removeImmediately, onClick: dispatch.previousMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { layout: true, variants: variants, custom: state.direction, className: "absolute inset-0 isolate z-normal flex items-center justify-center font-semibold", children: _jsxs("span", { className: "flex w-fit items-center justify-center gap-0.5 py-1", children: [_jsx("select", { value: monthString, onChange: dispatch.onChangeMonth, style: { width: `${monthString.length + 1}ch` }, className: "cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary", children: state.months }), _jsx(TheMaskInput, { mask: "int", maxLength: 4, placeholder: "YYYY", value: state.year, onChange: internalOnChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 cursor-pointer appearance-none bg-transparent hover:text-primary" })] }) }), _jsx(motion.button, { layout: true, type: "button", "data-focustrap": "next", variants: removeImmediately, onClick: dispatch.nextMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary", children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "absolute inset-0", style: { backgroundImage: "linear-gradient(to right, hsla(var(--card-background)) 15%, transparent 30%, transparent 70%, hsla(var(--card-background)) 85%)" } })] }), _jsxs(motion.table, { className: "mt-2 table min-w-full table-auto border-0", children: [_jsx("thead", { children: _jsx("tr", { children: state.week.map((dayOfWeek) => (_jsx("th", { className: css("py-2 text-sm font-medium capitalize", styles?.weekDay), children: dayOfWeek.toLocaleDateString(currentLocale, { weekday: "short" }) }, dayOfWeek.toString()))) }) }), _jsx(CalendarBody, { zip: zip, range: range, styles: styles, date: date || null, dispatch: dispatch, markRange: markRange, markToday: markToday, rangeMode: rangeMode, stateDate: state.date, labelRange: labelRange, stateRange: state.range, RenderOnDay: RenderOnDay, direction: state.direction, disabledDate: disabledDate, onKeyDown: dispatch.onKeyDown })] })] }, monthString) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "transition-transform duration-300 hover:scale-105", type: "button", onClick: dispatch.setToday, children: translations.calendarToday }) })] }) }));
 };

package/dist/src/components/floating/modal.js

@@ -97,5 +97,5 @@ export const Modal = ({ type: _type = "dialog", resizer = true, overlayClickClos
     const onClose = () => props.onChange(false);
     return (_jsxs(Fragment, { children: [props.trigger ? (_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, { ref: refs.setReference, ...getReferenceProps({
                         layoutId: props.layoutId,
-                    }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: props.layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: props.open ? (_jsx(RemoveScroll, { forwardProps: true, removeScrollBar: true, allowPinchZoom: true, noIsolation: true, children: _jsx(FloatingOverlay, { lockScroll: true, className: `inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { exit: "exit", animate: "enter", initial: "initial", variants: animation, ref: refs.setFloating, "aria-modal": props.open, layoutId: props.layoutId, "aria-labelledby": headingId, "aria-describedby": descriptionId, className: variants({ position, type }), style: type === "drawer" ? { width: value } : { height: value }, ...getFloatingProps(), children: [props.title ? (_jsx("header", { className: "relative w-full", children: props.title ? (_jsx("h2", { className: "border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: props.title })) : null })) : null, _jsx("section", { className: "flex-1 overflow-y-auto px-8 py-1", children: props.children }), props.footer ? (_jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: props.footer })) : null, closable ? (_jsx("nav", { className: "absolute right-4 top-1 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { onChange: props.onChange, parent: refs.floating, position: position, sheet: type === "sheet", value: value })) : null] }) }) }) })) : null }) })] }));
+                    }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: props.layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: props.open ? (_jsx(RemoveScroll, { enabled: true, forwardProps: true, removeScrollBar: true, inert: true, noIsolation: true, children: _jsx(FloatingOverlay, { lockScroll: true, className: `inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { exit: "exit", animate: "enter", initial: "initial", variants: animation, ref: refs.setFloating, "aria-modal": props.open, layoutId: props.layoutId, "aria-labelledby": headingId, "aria-describedby": descriptionId, className: variants({ position, type }), style: type === "drawer" ? { width: value } : { height: value }, ...getFloatingProps(), children: [props.title ? (_jsx("header", { className: "relative w-full", children: props.title ? (_jsx("h2", { className: "border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: props.title })) : null })) : null, _jsx("section", { className: "flex-1 overflow-y-auto px-8 py-1", children: props.children }), props.footer ? (_jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: props.footer })) : null, closable ? (_jsx("nav", { className: "absolute right-4 top-1 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { onChange: props.onChange, parent: refs.floating, position: position, sheet: type === "sheet", value: value })) : null] }) }) }) })) : null }) })] }));
 };

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

@@ -5,14 +5,8 @@ import { type OptionProps } from "./select";
 export type AutocompleteItemProps = OptionProps & {
     Render?: React.FC<OptionProps>;
 };
-export type AutocompleteOptionProps = Omit<React.HTMLProps<HTMLLIElement>, "children"> & {
-    active: boolean;
-    selected: boolean;
-    emptyMessage?: Label;
-    option: AutocompleteItemProps;
-};
-export declare const Option: React.ForwardRefExoticComponent<Omit<AutocompleteOptionProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export type AutocompleteProps = Omit<InputFieldProps<"input">, "value"> & {
+    title?: string;
     value?: string;
     emptyMessage?: Label;
     dynamicOption?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAKzG,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,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,EAAE,qBAAqB,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,MAAM,4GAiCjB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAaF,eAAO,MAAM,YAAY,yGAkSxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/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,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AA+BF,eAAO,MAAM,YAAY,yGAoVxB,CAAC"}

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

@@ -2,22 +2,16 @@
 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 Fuzzy from "fuzzy-search";
-import { CheckIcon, ChevronDown } from "lucide-react";
-import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
+import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { Virtuoso } from "react-virtuoso";
 import { useTranslations } from "../../hooks/use-components-provider";
 import { css, dispatchInput, initializeInputDataset } from "../../lib/dom";
 import { safeRegex } from "../../lib/fns";
 import { InputField } from "./input-field";
 const Frag = (props) => _jsx(Fragment, { children: props.children });
-export const Option = forwardRef(({ selected, active, onClick, option, ...props }, ref) => {
-    const Label = option.Render ?? Frag;
-    const children = option.label ?? option.value;
-    if (option.hidden) {
-        return null;
-    }
-    return (_jsx(motion.li, { ...props, ref: ref, role: "option", "aria-selected": active, className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsxs("button", { type: "button", "aria-busy": option.disabled, "aria-checked": active, "aria-current": active, "aria-selected": active, onClick: onClick, "data-value": option.value, className: `flex w-full cursor-pointer justify-between 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 }), active ? (_jsx("span", { children: _jsx(CheckIcon, { "aria-hidden": true, className: "text-current", absoluteStrokeWidth: true, strokeWidth: 2, size: 22 }) })) : null] }) }));
-});
 const transitionStyles = {
     duration: 300,
     initial: { transform: "scaleY(0)", opacity: 0.2 },
@@ -26,10 +20,20 @@ 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 rounded-lg border-b border-tooltip-border last:border-transparent", children: _jsx(AnimatePresence, { children: props.children }) }));
+});
+const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
+    return _jsx(motion.li, { ...props, ref: ref, className: "first:rounded-t-lg last:rounded-t-lg" });
+});
+const components = { List, Item };
+const DEFAULT_SIZE = 300;
 export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedback = null, labelClassName, emptyMessage, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error, required = false, ...props }, externalRef) => {
     const fieldset = useRef(null);
+    const virtuoso = useRef(null);
     const defaults = props.value ?? props.defaultValue ?? "";
     const translation = useTranslations();
+    const [h, setH] = useState(0);
     const [open, setOpen] = useState(false);
     const [shadow, setShadow] = useState("");
     const [value, setValue] = useState(defaults);
@@ -50,12 +54,31 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
     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);
         }
     }, [props.value]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const ul = refs.floating;
+        if (ul.current === null)
+            return;
+        let size = 0;
+        const items = Array.from(ul.current.querySelectorAll("li")).slice(0, Math.min(list.length, 10));
+        items.forEach((x) => {
+            const rect = x.getBoundingClientRect();
+            size += rect.height;
+        });
+        const s = Math.min(size, DEFAULT_SIZE);
+        setH(s);
+    }, [shadow, open]);
     const { x, y, strategy, refs, context } = useFloating({
         open,
         transform: true,
@@ -65,14 +88,18 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
         middleware: [
             offset(4),
             size({
-                elementContext: "reference",
                 padding: 10,
+                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 ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE);
+                    flushSync(() => setTimeout(() => setH(maxH), 200));
                     Object.assign(a.elements.floating.style, {
                         width: `${w}px`,
                         maxWidth: `${w}px`,
-                        maxHeight: `${Math.min(250, a.availableHeight)}px`,
+                        maxHeight: `${maxH}px`,
                     });
                 },
             }),
@@ -126,24 +153,24 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
         event.target.name = props.name || "";
         return value ? setOpen(true) : props.onChange?.(event);
     };
+    const onCaretDownClick = () => {
+        setOpen(true);
+        setShadow("");
+        refs.reference.current?.focus();
+    };
     const onFocus = () => {
         setOpen(true);
         setShadow("");
     };
     const onClose = () => {
+        refs.reference.current?.setAttribute("data-value", "");
         setShadow("");
         setValue("");
-        refs.reference.current?.setAttribute("data-value", "");
         setLabel("");
         dispatchInput(refs.reference.current, "");
         setOpen(false);
     };
     const id = props.id || props.name;
-    const onCaretDownClick = () => {
-        setOpen(true);
-        setShadow("");
-        refs.reference.current?.focus();
-    };
     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({
                     ...props,
                     onChange,
@@ -154,6 +181,20 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
                     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);
@@ -169,20 +210,29 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
                             }
                         }
                     },
-                }), "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: _jsx("ul", { ...getFloatingProps({
+                }), "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("ul", { ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
+                                ...transitions.styles,
                                 position: strategy,
-                                left: (x ?? 0) + (!!value ? 26 : 16),
+                                left: (x ?? 0) + (!!value ? 26 : 18),
                                 top: y ?? 0,
-                                ...transitions.styles,
                             },
-                        }), "data-floating": "true", className: "z-floating m-0 origin-[top_center] list-none overflow-auto overflow-y-auto overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating", children: _jsxs(AnimatePresence, { children: [list.map((option, i) => {
+                        }), "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: "rounded-lg border-floating-border bg-floating-background p-0 text-foreground", style: { height: h }, itemContent: (i, option) => {
+                                    const Label = option.Render ?? Frag;
                                     const active = value === option.value || value === option.label;
-                                    return (_jsx(Option, { ...getItemProps({
-                                            onClick: () => onSelect(option, i),
+                                    const selected = index === i;
+                                    const children = option.label ?? option.value;
+                                    return (_jsx("button", { "data-value": option.value, ...getItemProps({
                                             ref: (node) => void (listRef.current[i] = node),
-                                            selected: index === i,
-                                        }), option: option, active: active, selected: index === i }, `${option.value}-option`));
-                                }), 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] }) }) })) : null })] }));
+                                            role: "option",
+                                            type: "button",
+                                            "aria-checked": active,
+                                            "aria-current": active,
+                                            "aria-selected": active,
+                                            "aria-busy": option.disabled,
+                                            onClick: () => onSelect(option, i),
+                                            className: `cursor-pointer w-full p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
+                                        }), children: _jsx(Label, { ...props, label: option.label, value: option.value, children: children }) }));
+                                } })] }) })) : null })] }));
 });

package/dist/src/components/form/free-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,SAAS,EAAE,EAAE,UAAU,EAAY,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,MAAM,IAAI,QAAQ,CAClF,UAAU,GAAG,aAAa,EAC1B,eAAe,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,CACnE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,EAAE,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,MAAM,WAClH,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,eACnC,OAAO,GAAG,UAAU,gBACnB,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,aAC1B,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,sCAqGtC,CAAC"}
+{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,MAAM,IAAI,QAAQ,CAClF,UAAU,GAAG,aAAa,EAC1B,eAAe,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,CACnE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,EAAE,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,MAAM,WAClH,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,eACnC,OAAO,GAAG,UAAU,gBACnB,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,aAC1B,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,sCAqGtC,CAAC"}

package/dist/src/components/form/free-text.js

@@ -4,7 +4,7 @@ import { forwardRef, useEffect, useRef } from "react";
 import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { InputField } from "./input-field";
 export const createFreeText = (Element, elementName, defaultProps, register) => {
-    const FreeText = forwardRef(({ type = "text", feedback = null, info, labelClassName, next, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error, ...props }, ref) => {
+    const FreeText = forwardRef(({ info, left, next, error, right, container, rightLabel, interactive, optionalText, type = "text", labelClassName, feedback = null, hideLeft = false, ...props }, ref) => {
         const Render = Element;
         const id = props.id ?? props.name;
         const inputRef = useRef(null);
@@ -34,7 +34,7 @@ export const createFreeText = (Element, elementName, defaultProps, register) =>
                 input.removeEventListener("keydown", goNextInputImpl);
             };
         }, []);
-        return (_jsx(InputField, { ...defaultProps, componentName: elementName, info: info, container: container, error: error, feedback: feedback, hideLeft: hideLeft, left: left, optionalText: optionalText, right: right, rightLabel: rightLabel, interactive: interactive, form: props.form, id: props.name || props.id, name: props.name, labelClassName: labelClassName, title: props.title, placeholder: props.placeholder, required: props.required, disabled: props.disabled, children: _jsx(Render, { ...defaultProps, ...props, id: id, name: id, type: type, "data-next": next, "aria-busy": props.disabled, "aria-disabled": props.disabled, "aria-readonly": props.readOnly, ref: mergeRefs(ref, inputRef), 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", "resize-y group-focus-within:border-primary group-hover:border-primary", "disabled:cursor-not-allowed disabled:text-disabled", props.className) }) }));
+        return (_jsx(InputField, { ...defaultProps, info: info, left: left, error: error, right: right, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, title: props.title, container: container, rightLabel: rightLabel, disabled: props.disabled, interactive: interactive, required: props.required, componentName: elementName, id: props.name || props.id, optionalText: optionalText, labelClassName: labelClassName, placeholder: props.placeholder, children: _jsx(Render, { ...defaultProps, ...props, id: id, name: id, type: type, "data-next": next, "aria-busy": props.disabled, "aria-disabled": props.disabled, "aria-readonly": props.readOnly, ref: mergeRefs(ref, inputRef), 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", "resize-y group-focus-within:border-primary group-hover:border-primary", "disabled:cursor-not-allowed disabled:text-disabled", props.className) }) }));
     });
     return FreeText;
 };

package/dist/src/components/form/input-field.d.ts

@@ -1,6 +1,6 @@
-import React, { PropsWithChildren } from "react";
-import { Label } from "../../types";
-import { PolymorphicProps } from "../core/polymorph";
+import React, { type PropsWithChildren } from "react";
+import { type Label, Override } from "../../types";
+import { type PolymorphicProps } from "../core/polymorph";
 export type FeedbackProps = React.PropsWithChildren<Partial<{
     info: Label;
     title: Label;
@@ -10,7 +10,7 @@ export type FeedbackProps = React.PropsWithChildren<Partial<{
     reportStatus: boolean;
 }>>;
 export declare const InputFeedback: ({ reportStatus, hideLeft, className, info, children, title }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
-export type InputFieldProps<T extends "input" | "select" | "textarea"> = PolymorphicProps<Partial<{
+export type InputFieldProps<T extends "input" | "select" | "textarea"> = PolymorphicProps<Partial<Override<FeedbackProps, {
     componentName: string;
     info: Label;
     labelClassName: string;
@@ -26,6 +26,6 @@ export type InputFieldProps<T extends "input" | "select" | "textarea"> = Polymor
     id: string;
     name: string;
     placeholder: string;
-}>, T>;
+}>>, T>;
 export declare const InputField: <T extends "input" | "select" | "textarea">(props: PropsWithChildren<InputFieldProps<T>>) => React.ReactElement;
 //# sourceMappingURL=input-field.d.ts.map

package/dist/src/components/form/input-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,iEAA0E,aAAa,4CA6ChH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CAAC;IACJ,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC,EACF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YA0EpH,CAAC"}
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,iEAA0E,aAAa,4CA6ChH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB,CACJ,CACJ,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YA6EpH,CAAC"}

package/dist/src/components/form/input-field.js

@@ -2,13 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle, InfoIcon, XCircle } from "lucide-react";
 import { forwardRef, Fragment } from "react";
-import { useTranslations } from "../../hooks/use-components-provider";
+import { useTranslations, useTweaks } from "../../hooks/use-components-provider";
 import { css } from "../../lib/dom";
 import { Tooltip } from "../floating/tooltip";
 export const InputFeedback = ({ reportStatus, hideLeft = false, className, info, children, title }) => (_jsxs("div", { className: css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className), children: [hideLeft ? null : (_jsxs("span", { className: "flex items-center gap-1 transition-colors group-focus-within:text-primary group-hover:text-primary group-disabled:text-disabled group-error:text-danger", children: [title, reportStatus || info ? (_jsxs("span", { className: "flex items-center justify-center gap-1", children: [info ? (_jsx(Tooltip, { as: "button", type: "button", title: _jsxs("span", { className: "cursor-help", children: [_jsx("span", { className: "sr-only", children: info }), _jsx(InfoIcon, { className: "aspect-square size-3", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] }), children: _jsx("div", { className: "w-full max-w-48 whitespace-break-spaces break-words", children: info }) })) : null, reportStatus ? (_jsxs(Fragment, { children: [_jsx(CheckCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }), _jsx(XCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] })) : null] })) : null] })), children] }));
-export const InputField = forwardRef(({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, componentName, placeholder, hideLeft = false, required, disabled, }, ref) => {
+export const InputField = forwardRef(({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, componentName, placeholder, hideLeft = false, required, disabled, reportStatus, }, ref) => {
+    const tweaks = useTweaks();
+    const reportStatusDefault = reportStatus !== undefined ? reportStatus : tweaks.inputIconFeedback;
     const ID = id ?? name;
     const translation = useTranslations();
     const optionalText = _optionalText ?? translation.inputOptionalLabel;
-    return (_jsxs("fieldset", { ref: ref, form: form, disabled: disabled, "data-error": !!error, "aria-disabled": disabled, "data-component": componentName, "data-interactive": !!interactive, className: css("group grid min-h-0 min-w-0 grid-cols-1 items-baseline", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "inline-flex cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-disabled:cursor-not-allowed group-error:text-danger", children: [_jsx(InputFeedback, { info: info, hideLeft: hideLeft, reportStatus: true, title: title, placeholder: placeholder, children: optionalText || rightLabel ? (_jsxs(Fragment, { children: [!required ? (_jsx("span", { "aria-disabled": disabled, className: "text-opacity-70 aria-disabled:text-disabled", children: optionalText })) : null, rightLabel ? _jsx(Fragment, { children: rightLabel }) : null] })) : null }), _jsxs("div", { className: `group relative flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-hover:border-primary group-disabled:border-disabled group-error:border-danger ${labelClassName}`, children: [left ? _jsx("span", { className: "flex flex-nowrap gap-1 whitespace-nowrap pl-2", children: left }) : null, children, right ? _jsx("span", { className: "flex flex-nowrap gap-2 whitespace-nowrap pr-2", children: right }) : null] })] }), _jsx("p", { className: "mt-input-gap hidden flex-shrink-0 flex-grow-0 whitespace-pre-wrap text-wrap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:inline-block group-error:inline-block group-error:text-danger", children: error }), _jsx("p", { className: "mt-input-gap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden", children: feedback })] }));
+    return (_jsxs("fieldset", { ref: ref, form: form, disabled: disabled, "data-error": !!error, "aria-disabled": disabled, "data-component": componentName, "data-interactive": !!interactive, className: css("group grid min-h-0 min-w-0 grid-cols-1 items-baseline", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "inline-flex cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-disabled:cursor-not-allowed group-error:text-danger", children: [_jsx(InputFeedback, { info: info, hideLeft: hideLeft, reportStatus: reportStatusDefault, title: title, placeholder: placeholder, children: optionalText || rightLabel ? (_jsxs(Fragment, { children: [!required ? (_jsx("span", { "aria-disabled": disabled, className: "text-opacity-70 aria-disabled:text-disabled", children: optionalText })) : null, rightLabel ? _jsx(Fragment, { children: rightLabel }) : null] })) : null }), _jsxs("div", { className: `group relative flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-hover:border-primary group-disabled:border-disabled group-error:border-danger ${labelClassName}`, children: [left ? _jsx("span", { className: "flex flex-nowrap gap-1 whitespace-nowrap pl-2", children: left }) : null, children, right ? _jsx("span", { className: "flex flex-nowrap gap-2 whitespace-nowrap pr-2", children: right }) : null] })] }), _jsx("p", { className: "mt-input-gap hidden flex-shrink-0 flex-grow-0 whitespace-pre-wrap text-wrap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:inline-block group-error:inline-block group-error:text-danger", children: error }), _jsx("p", { className: "mt-input-gap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden", children: feedback })] }));
 });

package/dist/src/components/form/multi-combobox.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { Label, Override } from "../../types";
+import { InputFieldProps } from "./input-field";
+import { type OptionProps } from "./select";
+export type OnChangeMultiCombobox = (e: Override<React.ChangeEvent<HTMLInputElement>, {
+    target: EventTarget & Override<HTMLInputElement, {
+        value: string[];
+    }>;
+}>) => void;
+export type MultiComboboxItemProps = OptionProps & {
+    Render?: React.FC<OptionProps>;
+};
+export type MultiComboboxProps = Override<InputFieldProps<"input">, {
+    title?: string;
+    value?: string[];
+    emptyMessage?: Label;
+    selectedLabel?: string;
+    defaultValue?: string[];
+    dynamicOption?: boolean;
+    onChange?: OnChangeMultiCombobox;
+    options: MultiComboboxItemProps[];
+}>;
+export declare const MultiCombobox: React.ForwardRefExoticComponent<Omit<MultiComboboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=multi-combobox.d.ts.map

package/dist/src/components/form/multi-combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/multi-combobox.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAOlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,CAChC,CAAC,EAAE,QAAQ,CACP,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EACnC;IACI,MAAM,EAAE,WAAW,GACf,QAAQ,CACJ,gBAAgB,EAChB;QACI,KAAK,EAAE,MAAM,EAAE,CAAC;KACnB,CACJ,CAAC;CACT,CACJ,KACA,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CACrC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,OAAO,EAAE,sBAAsB,EAAE,CAAC;CACrC,CACJ,CAAC;AA4DF,eAAO,MAAM,aAAa,0GAuWzB,CAAC"}