@g4rcez/components 2.1.1 → 2.2.0

package/dist/components/display/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAU,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,sBAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;CAUlB,CAAC;AAOF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,WAAW,CAAC,OAAO,aAAa,CAAC,GACjC,OAAO,CAAC;IACJ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GA6CxE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAU,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,sBAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;CAUlB,CAAC;AAOF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC5E,WAAW,CAAC,OAAO,aAAa,CAAC,GACjC,OAAO,CAAC;IACN,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC,EACF,CAAC,CACF,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAiDxE,CAAC"}

package/dist/components/display/alert.jsx

@@ -15,8 +15,8 @@ const transition = {
     ease: [0.04, 0.62, 0.23, 0.98],
 };
 export const Collapse = (props) => (<motion.div {...props} layout layoutRoot layoutScroll initial={false} variants={variants} exit={variants.false} transition={transition} aria-hidden={!props.open} data-component="collapse" animate={props.open.toString()} className={css("aria-hidden:pointer-events-none", props.className)}>
-        {props.children}
-    </motion.div>);
+    {props.children}
+  </motion.div>);
 const themeVariants = {
     theme: {
         primary: "bg-alert-primary-bg text-alert-primary-text border-alert-primary-border",
@@ -35,22 +35,26 @@ const alertVariants = cva("p-4 w-full block border relative rounded-lg text-sm",
 export const Alert = forwardRef(function Alert({ className, theme, Icon, onClose, open = true, ...props }, ref) {
     const close = () => onClose?.(false);
     return (<AnimatePresence presenceAffectsLayout propagate mode="sync">
-            {open ? <motion.div data-open={!!open} aria-hidden={!open} data-component="alert" className={css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none")}>
-                <Collapse data-open={!!open} open={!!open}>
-                    <Polymorph {...props} ref={ref} role="alert" data-theme={theme} as={props.as ?? "div"} className={css(alertVariants({ theme }), className)}>
-                        <h4 className="flex gap-2 items-center mb-2">
-                            {!Icon && theme === "success" ? <CheckCircleIcon aria-hidden="true" size={20}/> : null}
-                            {!Icon && theme === "info" ? <InfoIcon aria-hidden="true" size={20}/> : null}
-                            {!Icon && theme === "danger" ? <TriangleAlertIcon aria-hidden="true" size={20}/> : null}
-                            {Icon}
-                            <span className="text-lg font-semibold tracking-3 text-balance">{props.title}</span>
-                        </h4>
-                        {props.children}
-                        {onClose !== undefined && open ? (<button type="button" onClick={close} className="absolute top-3 right-3 transition-colors duration-300 ease-in-out text-foreground hover:text-danger">
-                                <XIcon size={20}/>
-                            </button>) : null}
-                    </Polymorph>
-                </Collapse>
-            </motion.div> : null}
-        </AnimatePresence>);
+      {open ? <motion.div data-open={!!open} aria-hidden={!open} data-component="alert" className={css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none")}>
+        <Collapse data-open={!!open} open={!!open}>
+          <Polymorph {...props} ref={ref} role="alert" data-theme={theme} as={props.as ?? "div"} className={css(alertVariants({ theme }), className)}>
+            <div className="grid grid-cols-[auto_1fr] gap-base">
+              {onClose !== undefined && open ? (<button type="button" onClick={close} className="absolute top-3 right-3 transition-colors duration-300 ease-in-out text-foreground hover:text-danger">
+                  <XIcon size={20}/>
+                </button>) : null}
+              <div className={css("flex gap-2 items-center", props.title ? "" : "w-fit")}>
+                {!Icon && theme === "success" ? <CheckCircleIcon aria-hidden="true" size={20}/> : null}
+                {!Icon && theme === "info" ? <InfoIcon aria-hidden="true" size={20}/> : null}
+                {!Icon && theme === "danger" ? <TriangleAlertIcon aria-hidden="true" size={20}/> : null}
+                {Icon}
+              </div>
+              {props.title ? <h4 className="col-start-2 text-lg font-semibold tracking-3 text-balance">{props.title}</h4> : null}
+              <div className="col-start-2 w-full">
+                {props.children}
+              </div>
+            </div>
+          </Polymorph>
+        </Collapse>
+      </motion.div> : null}
+    </AnimatePresence>);
 });

package/dist/components/display/card.jsx

@@ -4,8 +4,8 @@ import { Is } from "sidekicker";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
 import { Skeleton } from "./skeleton";
-export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("flex shadow-shadow-card flex-col gap-4 rounded-card border border-card-border bg-card-background w-full py-4", container)}>
-        {title ? (<header data-component="card-title" className={css("mb-2 w-full border-b border-card-border px-6 pb-4 text-xl font-medium", titleClassName)}>
+export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("flex shadow-shadow-card flex-col gap-4 rounded-card border border-card-border bg-card-background w-full py-3", container)}>
+        {title ? (<header data-component="card-title" className={css("mb-2 w-full border-b border-card-border px-6 pb-2 text-xl font-medium", titleClassName)}>
                 {title}
             </header>) : (header)}
         <div data-component="card-body" className={css("min-w-full px-6", props.className)}>

package/dist/components/display/step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA0D,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAElJ,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAMpC,KAAK,gBAAgB,GAAG;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,mBAAmB,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AA+BlH,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAiCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA0F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBA0BrF,CAAC"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2C,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAEnI,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAMpC,KAAK,gBAAgB,GAAG;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,mBAAmB,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AA+BlH,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAiCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA0F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBA0BrF,CAAC"}

package/dist/components/floating/command-palette.d.ts

@@ -4,12 +4,12 @@ import { Label } from "../../types";
 type ViewProps = {
     text: string;
 };
-type CommandItem<T extends string, P extends object> = {
+type CommandItem<T extends string, P extends object> = P & {
     type: T;
     hint?: string | string[];
     Icon?: React.ReactElement;
     enabled?: ((props: ViewProps) => boolean) | boolean;
-} & P;
+};
 type View = string | ((props: ViewProps) => string);
 type CommandShortcutItem = CommandItem<"shortcut", {
     title: View;

package/dist/components/floating/command-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/floating/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAmE,MAAM,OAAO,CAAC;AAQxF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI;IACrD,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;CACrD,GAAG,CAAC,CAAC;AAEN,KAAK,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC;AAEpD,KAAK,mBAAmB,GAAG,WAAW,CACpC,UAAU,EACV;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QAClC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;KAC/D,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B,CACF,CAAC;AAEF,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AA8CtE,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,OAAO,EAAE,gBAAgB,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAAE,CAAC,CAAC;CACjF,CAAC;AAsBF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAyKxD,CAAC"}
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/floating/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAmE,MAAM,OAAO,CAAC;AAQxF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IACzD,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;CACrD,CAAC;AAEF,KAAK,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC;AAEpD,KAAK,mBAAmB,GAAG,WAAW,CACpC,UAAU,EACV;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QAClC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;KAC/D,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B,CACF,CAAC;AAEF,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AA8CtE,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,OAAO,EAAE,gBAAgB,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAAE,CAAC,CAAC;CACjF,CAAC;AAgCF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAoLxD,CAAC"}

package/dist/components/floating/command-palette.jsx

@@ -53,33 +53,50 @@ const getFuzzyData = (commands, value) => {
     return Dict.unique(filter.concat(withEnabled), (x) => x.title);
 };
 const loadingSkeleton = [0, 0, 0, 0, 0];
+const findFirstClickable = (items) => {
+    for (let index = 0; index < items.length; index++) {
+        const element = items[index];
+        if (element.type === "shortcut")
+            return element;
+        const recursive = findFirstClickable(element.items);
+        if (recursive)
+            return recursive;
+    }
+    return null;
+};
 export const CommandPalette = (props) => {
-    const bindKey = props.bind ?? "Mod + k";
+    const id = useId();
+    const [value, setValue] = useState("");
     const listRef = useRef([]);
     const translations = useTranslations();
-    const [value, setValue] = useState("");
     const valueRef = useStableRef(value);
-    const id = useId();
-    const ref = useRef(null);
     const [activeIndex, setActiveIndex] = useState(null);
+    const bindKey = props.bind ?? "Mod + k";
     const root = useFloating({
         open: props.open,
         strategy: "absolute",
         whileElementsMounted: autoUpdate,
         onOpenChange: props.onChangeVisibility,
     });
+    const commands = props.commands.flatMap((x) => (x.type === "group" ? [x, ...x.items] : [x]));
+    const fuzzy = getFuzzyData(commands, value);
     const listNav = useListNavigation(root.context, {
-        cols: 0,
         listRef,
         loop: true,
         activeIndex,
         virtual: true,
         allowEscape: true,
-        focusItemOnHover: false,
-        focusItemOnOpen: "auto",
+        focusItemOnOpen: true,
+        focusItemOnHover: true,
         openOnArrowKeyDown: true,
         scrollItemIntoView: false,
         selectedIndex: activeIndex,
+        disabledIndices: n => {
+            const item = fuzzy[n];
+            if (item)
+                return item.type === "group";
+            return false;
+        },
         onNavigate: (n) => {
             if (Is.number(n)) {
                 listRef.current[n]?.scrollIntoView({ block: "start", inline: "start" });
@@ -91,9 +108,7 @@ export const CommandPalette = (props) => {
             });
         }
     });
-    const { getItemProps, getReferenceProps } = useInteractions([listNav]);
-    const commands = props.commands.flatMap((x) => (x.type === "group" ? [x, ...x.items] : [x]));
-    const fuzzy = getFuzzyData(commands, value);
+    const { getItemProps, getReferenceProps, getFloatingProps } = useInteractions([listNav]);
     const displayItems = value === ""
         ? commands
         : [
@@ -121,7 +136,7 @@ export const CommandPalette = (props) => {
     }, [bindKey, commands, props, valueRef]);
     const Icon = props.Icon ?? FilterIcon;
     return (<Fragment>
-      <Modal ref={ref} animated={false} closable={false} open={props.open} overlayClickClose ariaTitle="Command palette" bodyClassName="px-0 py-0 pt-0" data-component="command-palette" onChange={props.onChangeVisibility} className="container relative py-0 md:max-w-screen-sm lg:max-w-screen-md overflow-clip">
+      <Modal {...getFloatingProps()} animated={false} closable={false} open={props.open} overlayClickClose ariaTitle="Command palette" bodyClassName="px-0 py-0 pt-0" data-component="command-palette" onChange={props.onChangeVisibility} className="container relative py-0 md:max-w-screen-sm lg:max-w-screen-md overflow-clip">
         <header className="flex sticky top-0 items-center w-full h-12 border-b overflow-clip isolate z-floating border-floating-border bg-floating-background">
           <div className="flex justify-center items-center size-10">
             {props.Icon ? <Icon Default={FilterIcon} text={value} size={16}/> : <FilterIcon size={16}/>}
@@ -129,6 +144,21 @@ export const CommandPalette = (props) => {
           </div>
           <input {...getReferenceProps({
         ref: root.refs.setReference,
+        onKeyDown: (e) => {
+            const item = Is.number(activeIndex) ? displayItems[activeIndex] : null;
+            const key = e.key;
+            if (key === "Enter") {
+                if (item) {
+                    if (item.type === "shortcut")
+                        item.action({ event: e, text: value, setOpen: props.onChangeVisibility, });
+                }
+                else {
+                    const item = findFirstClickable(fuzzy);
+                    if (item?.type === "shortcut")
+                        item.action({ event: e, text: value, setOpen: props.onChangeVisibility, });
+                }
+            }
+        }
     })} autoFocus value={value} data-combikeysbypass="true" placeholder="Search for..." onChange={(e) => setValue(e.target.value)} className="items-center py-2 px-2 pb-2 w-full h-12 text-lg text-left bg-transparent outline-none"/>
         </header>
         {props.loading ? (<ul role="listbox" data-component="command-palette-list" className="flex overflow-y-auto flex-col gap-1 px-2 my-2 w-full max-h-96 origin-[top_center]">
@@ -146,13 +176,8 @@ export const CommandPalette = (props) => {
                 onClick(e) {
                     e.preventDefault();
                     props.onChangeVisibility(false);
-                    root.refs.domReference.current?.focus();
                     if (item.type === "shortcut")
-                        item.action({
-                            event: e,
-                            setOpen: props.onChangeVisibility,
-                            text: value,
-                        });
+                        item.action({ event: e, text: value, setOpen: props.onChangeVisibility, });
                 },
             })} item={item} text={value} active={activeIndex === index} key={`${id}-${item.type}-${index}`}/>))}
               {displayItems.length === 1 ? (<div className={css("flex items-center justify-between rounded-lg p-2 text-secondary")}>
@@ -161,7 +186,7 @@ export const CommandPalette = (props) => {
             </ul>
             {props.Preview && Is.number(activeIndex) ? <props.Preview command={displayItems[activeIndex]} text={value}/> : null}
           </div>)}
-        {props.footer ? <footer className="flex items-center p-2 h-8 rounded-b-lg bg-background">{props.footer}</footer> : null}
+        {props.footer ? <footer className="flex items-center p-2 h-8 rounded-b-lg border-t border-floating-border">{props.footer}</footer> : null}
       </Modal>
     </Fragment>);
 };

package/dist/components/floating/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAA4F,MAAM,cAAc,CAAC;AAE1J,OAAO,KAA+G,MAAM,OAAO,CAAC;AAGpI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC/B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC9E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,OAAO,CAAC;IACV,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAChC,CAAC,CACH,CAAC;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WA1GN,KAAK;gBAAc,MAAM;;UAC3B,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eApBqB,MAAM;YAAU,KAAK;;UAClE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CA0UjC,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAA4F,MAAM,cAAc,CAAC;AAE1J,OAAO,KAA+G,MAAM,OAAO,CAAC;AAGpI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC/B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC9E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,OAAO,CAAC;IACV,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAChC,CAAC,CACH,CAAC;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WA1GN,KAAK;gBAAc,MAAM;;UAC3B,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eApBqB,MAAM;YAAU,KAAK;;UAClE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CA8UjC,CAAC"}

package/dist/components/floating/modal.jsx

@@ -2,7 +2,7 @@
 import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
 import { cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
-import { motion, MotionConfig, useMotionValue, animate } from "motion/react";
+import { AnimatePresence, motion, MotionConfig, useMotionValue, animate } from "motion/react";
 import { Slot } from "../core/slot";
 import React, { forwardRef, Fragment, useEffect, useId, useImperativeHandle, useRef } from "react";
 import { useMediaQuery } from "../../hooks/use-media-query";
@@ -164,11 +164,13 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
         {trigger ? (<Component ref={floating.refs.setReference} {...interactions.getReferenceProps()} layoutId={layoutId} type="button">
             {Trigger}
           </Component>) : null}
-        <FloatingPortal preserveTabOrder root={root}>
-          {open ? (<FloatingOverlay lockScroll className={css("inset-0 flex isolate bg-floating-overlay/70 z-overlay h-[100dvh] !overflow-clip", type === "drawer" ? "" : "items-start justify-center lg:p-10 pt-10", overlayClassName)}>
-              <MotionConfig reducedMotion={animated ? "user" : "always"}>
-                <FloatingFocusManager guards modal closeOnFocusOut={closeOnFocusOut} context={floating.context}>
-                  <motion.div {...props} {...(title
+        <MotionConfig reducedMotion={animated ? "user" : "always"}>
+          <FloatingPortal preserveTabOrder root={root}>
+            <AnimatePresence mode="wait" propagate>
+              {open ? (<FloatingOverlay lockScroll className={css("inset-0 flex isolate bg-floating-overlay/70 z-overlay h-[100dvh] !overflow-clip", type === "drawer" ? "" : "items-start justify-center lg:p-10 pt-10", overlayClassName)}>
+                  <FloatingFocusManager guards modal closeOnFocusOut={closeOnFocusOut} context={floating.context}>
+                    <AnimatePresence propagate>
+                      <motion.div {...props} {...(title
             ? {
                 "aria-labelledby": headingId,
                 "aria-describedby": descriptionId,
@@ -178,13 +180,13 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
             ref: mergeRefs(floating.refs.setFloating, removeScrollRef),
             className: css(variants({ position, type }), className, "isolate overscroll-contain"),
         })} exit="exit" layout={true} animate="enter" initial="initial" layoutId={layoutId} variants={animation} data-component="modal" style={type === "drawer" ? { width: floatingSize } : { height: floatingSize, y: sheetY }}>
-                    {useResizer && resizer ? (<Draggable onChange={onChange} value={floatingSize} sheet={type === "sheet"} position={position} parent={floating.refs.floating}/>) : null}
-                    {title ? (<motion.header {...draggableMotionProps} className="relative w-full isolate">
-                        {title ? (<h2 id={headingId} className="block px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border">
-                            {title}
-                          </h2>) : null}
-                      </motion.header>) : null}
-                    <motion.section ref={innerContent} data-component="modal-body" className={css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName)} onTouchEnd={async () => {
+                        {useResizer && resizer ? (<Draggable onChange={onChange} value={floatingSize} sheet={type === "sheet"} position={position} parent={floating.refs.floating}/>) : null}
+                        {title ? (<motion.header {...draggableMotionProps} className="relative w-full isolate">
+                            {title ? (<h2 id={headingId} className="block px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border">
+                                {title}
+                              </h2>) : null}
+                          </motion.header>) : null}
+                        <motion.section ref={innerContent} data-component="modal-body" className={css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName)} onTouchEnd={async () => {
                 scroll.set(undefined);
                 scrollInitial.set(undefined);
                 if (isDragging.current) {
@@ -224,18 +226,20 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
                 }
                 scroll.set(y);
             }}>
-                      {children}
-                    </motion.section>
-                    {footer ? (<footer className="px-8 pt-4 w-full border-t select-text border-floating-border">{footer}</footer>) : null}
-                    {closable ? (<nav className="absolute top-1 right-4 z-floating">
-                        <button type="button" onClick={onClose} className="p-1 opacity-70 transition-colors hover:opacity-100 hover:text-danger focus:text-danger">
-                          <XIcon />
-                        </button>
-                      </nav>) : null}
-                  </motion.div>
-                </FloatingFocusManager>
-              </MotionConfig>
-            </FloatingOverlay>) : null}
-        </FloatingPortal>
+                          {children}
+                        </motion.section>
+                        {footer ? (<footer className="px-8 pt-4 w-full border-t select-text border-floating-border">{footer}</footer>) : null}
+                        {closable ? (<nav className="absolute top-1 right-4 z-floating">
+                            <button type="button" onClick={onClose} className="p-1 opacity-70 transition-colors hover:opacity-100 hover:text-danger focus:text-danger">
+                              <XIcon />
+                            </button>
+                          </nav>) : null}
+                      </motion.div>
+                    </AnimatePresence>
+                  </FloatingFocusManager>
+                </FloatingOverlay>) : null}
+            </AnimatePresence>
+          </FloatingPortal>
+        </MotionConfig>
       </Fragment>);
 });

package/dist/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;AASzG,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;IACxE,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;CAClC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGAsWxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AASzG,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;IACxE,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;CAClC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGAyWxB,CAAC"}

package/dist/components/form/autocomplete.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
+import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
 import { ChevronDown } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import React, { forwardRef, Fragment, useEffect, useRef, useState } from "react";
@@ -14,14 +14,14 @@ import { fzf } from "../../lib/fzf";
 import { InputField } from "./input-field";
 const Frag = (props) => <Fragment>{props.children}</Fragment>;
 const transitionStyles = {
-    duration: 300,
+    duration: 200,
     initial: { transform: "scaleY(0)", opacity: 0.2 },
     open: { transform: "scaleY(1)", opacity: 1 },
     close: { transform: "scaleY(0)", opacity: 0 },
 };
 const emptyRef = [];
 const List = forwardRef(function VirtualList(props, ref) {
-    return (<motion.ul {...props} ref={ref} className="overscroll-contain w-full rounded-lg">
+    return (<motion.ul {...props} ref={ref} className="overscroll-contain w-full max-h-96 rounded-lg">
       <AnimatePresence>{props.children}</AnimatePresence>
     </motion.ul>);
 });
@@ -66,7 +66,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const pattern = dynamicOption
         ? undefined
         : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
-    const { x, y, strategy, refs, context } = useFloating({
+    const { x, y, strategy, refs, context, placement } = useFloating({
         open,
         transform: true,
         onOpenChange: setOpen,
@@ -74,6 +74,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         whileElementsMounted: autoUpdate,
         middleware: [
             offset(4),
+            autoPlacement({ allowedPlacements: ['top-start', 'bottom-start'], alignment: "start" }),
             size({
                 padding: 10,
                 elementContext: "reference",
@@ -175,7 +176,8 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const id = props.id || props.name;
     const shadowId = `${id}-shadow`;
     const isEmpty = displayList.length === 0;
-    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} loading={loading} name={props.name} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} id={shadowId} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} right={<span className="flex gap-0.5 items-center">
+    const isTopPlacement = placement === "top" || placement === "top-start";
+    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} loading={loading} name={props.name} feedback={open && (isTopPlacement) ? props.title : feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} id={shadowId} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} right={<span className="flex gap-0.5 items-center">
             {right}
             <button type="button" className="p-2 transition-colors md:p-1 link:text-primary" onClick={onCaretDownClick}>
               <ChevronDown size={20}/>
@@ -235,22 +237,20 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
               <motion.div {...getFloatingProps({
             ref: mergeRefs(removeScrollRef, refs.setFloating),
             style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy, height: "auto" },
-        })} initial={false} data-floating="true" animate={{ height: isEmpty ? "auto" : h }} className="overscroll-contain p-0 m-0 max-h-80 list-none rounded-t-lg rounded-b-lg border ease-in-out isolate z-floating origin-[top_center] border-floating-border bg-floating-background text-foreground shadow-floating" onAnimationComplete={() => {
+        })} initial={false} data-floating="true" animate={{ height: isEmpty ? "auto" : h }} className={css("overscroll-contain p-0 m-0 max-h-80 list-none rounded-t-lg rounded-b-lg border ease-in-out isolate z-floating origin-[top_center] border-floating-border bg-floating-background text-foreground shadow-floating", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")} onAnimationComplete={() => {
                 if (!open)
                     return setH(0);
                 const ul = refs.floating.current;
                 const li = ul.querySelectorAll("li").item(0);
                 const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
-                return flushSync(() => setH(sum + 10));
+                return flushSync(() => setH(sum + 2));
             }}>
                 {isEmpty ? (<div role="option" className="w-full border-b border-tooltip-border">
                     <span className="flex justify-between p-2 w-full text-left text-disabled">
                       {emptyMessage || translation.autocompleteEmpty}
                     </span>
                   </div>) : null}
-                <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} 
-        // style={{ height: h - 10 }}
-        defaultItemHeight={MIN_SIZE} components={components} scrollerRef={(e) => void (scroller.current = e)} className="overscroll-contain p-0 max-h-full rounded-lg border-floating bg-floating-background text-foreground" itemContent={(i, option) => {
+                <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} style={{ height: h }} defaultItemHeight={MIN_SIZE} components={components} scrollerRef={(e) => void (scroller.current = e)} className="overscroll-contain p-0 max-h-full rounded-lg border-floating bg-floating-background text-foreground" itemContent={(i, option) => {
                 const Label = option.Render ?? Frag;
                 const active = value === option.value || value === option.label;
                 const selected = index === i;