@g4rcez/components 0.2.6 → 0.3.0

package/dist/preset/preset.tailwind.d.ts

@@ -2,6 +2,6 @@ import { Config } from "tailwindcss";
 import { createDesignTokens, parsers } from "./src/styles/design-tokens";
 import { defaultLightTheme as theme } from "./src/styles/theme";
 declare const config: Partial<Config>;
-export { createDesignTokens, parsers, theme };
+export { createDesignTokens, parsers, theme, config };
 export default config;
 //# sourceMappingURL=preset.tailwind.d.ts.map

package/dist/preset/preset.tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.tailwind.d.ts","sourceRoot":"","sources":["../../preset.tailwind.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhE,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA2C3B,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAE9C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"preset.tailwind.d.ts","sourceRoot":"","sources":["../../preset.tailwind.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhE,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA2C3B,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAEtD,eAAe,MAAM,CAAC"}

package/dist/preset/preset.tailwind.js

@@ -60,5 +60,5 @@ var config = {
         }),
     ],
 };
-export { createDesignTokens, parsers, theme };
+export { createDesignTokens, parsers, theme, config };
 export default config;

package/dist/preset/src/styles/dark.js

@@ -10,7 +10,7 @@ export var DARK_THEME = {
     colors: {
         foreground: "hsla(210, 50%, 98%)",
         background: "hsla(0, 0%, 9%)",
-        muted: "hsla(0, 0%, 12%)",
+        muted: "hsla(210, 10%, 40%)",
         disabled: "hsla(240, 4%, 33%)",
         emphasis: {
             foreground: "hsla(251, 91%, 95%)",

package/dist/preset/src/styles/light.js

@@ -26,7 +26,7 @@ export var LIGHT_THEME = {
         },
         secondary: {
             background: "hsla(210, 25%, 35%)",
-            DEFAULT: "hsla(210, 25%, 35%)",
+            DEFAULT: "hsla(210, 25%, 45%)",
             subtle: "hsla(207, 29%, 39%)",
             hover: "hsla(210, 21%, 67%)",
             foreground: "hsla(210, 40%, 98%)",

package/dist/preset.tailwind.d.ts

@@ -2,6 +2,6 @@ import { Config } from "tailwindcss";
 import { createDesignTokens, parsers } from "./src/styles/design-tokens";
 import { defaultLightTheme as theme } from "./src/styles/theme";
 declare const config: Partial<Config>;
-export { createDesignTokens, parsers, theme };
+export { createDesignTokens, parsers, theme, config };
 export default config;
 //# sourceMappingURL=preset.tailwind.d.ts.map

package/dist/preset.tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.tailwind.d.ts","sourceRoot":"","sources":["../preset.tailwind.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhE,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA2C3B,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAE9C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"preset.tailwind.d.ts","sourceRoot":"","sources":["../preset.tailwind.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhE,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA2C3B,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAEtD,eAAe,MAAM,CAAC"}

package/dist/preset.tailwind.js

@@ -48,5 +48,5 @@ const config = {
         }),
     ],
 };
-export { createDesignTokens, parsers, theme };
+export { createDesignTokens, parsers, theme, config };
 export default config;

package/dist/src/components/core/polymorph.d.ts

@@ -3,7 +3,7 @@ import { Merge, Override } from "../../types";
 type TransformProps<E extends React.ElementType = React.ElementType> = Merge<{
     as?: E;
 } & React.ComponentPropsWithRef<E>>;
-export type PolymorphicProps<P extends object, E extends React.ElementType> = Override<TransformProps<E>, P>;
+export type PolymorphicProps<P extends object, E extends React.ElementType> = Merge<Override<TransformProps<E>, P>>;
 export declare const Polymorph: <E extends React.ElementType = React.ElementType>(props: TransformProps<E>) => React.ReactNode;
 export {};
 //# sourceMappingURL=polymorph.d.ts.map

package/dist/src/components/core/polymorph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE9C,KAAK,cAAc,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC;IACzE,EAAE,CAAC,EAAE,CAAC,CAAA;CACT,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpC,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAI7G,eAAO,MAAM,SAAS,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAKrG,CAAC"}
+{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE9C,KAAK,cAAc,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,KAAK,CACxE;IACI,EAAE,CAAC,EAAE,CAAC,CAAC;CACV,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CACrC,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAIpH,eAAO,MAAM,SAAS,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAKrG,CAAC"}

package/dist/src/components/core/tag.d.ts

@@ -6,23 +6,23 @@ declare const indicatorVariant: (props?: ({
     theme?: "info" | "warn" | "muted" | "danger" | "primary" | "success" | "secondary" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const variants: {
-    readonly size: {
-        readonly icon: "p-1";
-        readonly big: "h-12 px-6 py-4";
-        readonly default: "h-8 px-4 py-2";
-        readonly small: "h-6 p-2 px-3 text-sm";
+    size: {
+        icon: string;
+        big: string;
+        default: string;
+        small: string;
     };
-    readonly theme: {
-        readonly primary: "bg-tag-primary-bg text-tag-primary-text";
-        readonly danger: "bg-tag-danger-bg text-tag-danger-text";
-        readonly info: "bg-tag-info-bg text-tag-info-text";
-        readonly success: "bg-tag-success-bg text-tag-success-text";
-        readonly secondary: "bg-tag-secondary-bg text-tag-secondary-text";
-        readonly warn: "bg-tag-warn-bg text-tag-warn-text";
-        readonly muted: "bg-tag-muted-bg text-tag-muted-text";
-        readonly neutral: "bg-transparent border border-card-border";
-        readonly disabled: "bg-disabled duration-700 opacity-70";
-        readonly loading: "animate-pulse bg-disabled duration-700 opacity-70";
+    theme: {
+        primary: string;
+        danger: string;
+        info: string;
+        success: string;
+        secondary: string;
+        warn: string;
+        muted: string;
+        neutral: string;
+        disabled: string;
+        loading: string;
     };
 };
 export type TagProps<T extends React.ElementType = "span"> = PolymorphicProps<CvaVariants<typeof variants> & Partial<{

package/dist/src/components/core/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/core/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,gBAAgB;;mFAYpB,CAAC;AAEH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;CAmBJ,CAAC;AAOX,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,WAAW,CAAC,OAAO,QAAQ,CAAC,GACxB,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC7D,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAkB9E,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/core/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,gBAAgB;;mFAYpB,CAAC;AAEH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;CAmBb,CAAC;AAOF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,WAAW,CAAC,OAAO,QAAQ,CAAC,GACxB,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC7D,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAkB9E,CAAC"}

package/dist/src/components/display/shortcut.d.ts

@@ -0,0 +1,4 @@
+export declare const Shortcut: (props: {
+    value: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=shortcut.d.ts.map

package/dist/src/components/display/shortcut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut.d.ts","sourceRoot":"","sources":["../../../../src/components/display/shortcut.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,4CAehD,CAAC"}

package/dist/src/components/display/shortcut.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CommandIcon } from "lucide-react";
+import { Fragment } from "react";
+import { isMac } from "../../lib/combi-keys";
+const remap = (x) => {
+    if (x === "Mod") {
+        return isMac() ? _jsx(CommandIcon, { "aria-label": "Command", size: 14 }) : "Ctrl";
+    }
+    return x;
+};
+export const Shortcut = (props) => {
+    const p = props.value.trim().split("+");
+    return (_jsx("span", { className: "flex items-center gap-1", children: p.map((x, i) => {
+            const isLast = p.length - 1 === i;
+            return (_jsxs(Fragment, { children: [_jsx("kbd", { "aria-label": x, children: remap(x) }), isLast ? null : _jsx("span", { children: "+" })] }, `${props.value}-${x}-key-${i}`));
+        }) }));
+};

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { Label } from "../../types";
+type ViewProps = {
+    text: string;
+};
+type CommandItem<T extends string, P extends object> = {
+    type: T;
+    hint?: string;
+    enabled?: (props: ViewProps) => boolean;
+} & P;
+type View = Label | React.FC<ViewProps>;
+type CommandShortcutItem = CommandItem<"shortcut", {
+    title: View;
+    shortcut?: string;
+    action: (args: {
+        text: string;
+        setOpen: (state: boolean) => void;
+        event: KeyboardEvent | React.MouseEvent | React.KeyboardEvent;
+    }) => void;
+}>;
+type CommandGroupItem = CommandItem<"group", {
+    title: View;
+    items: CommandItemTypes[];
+}>;
+export type CommandItemTypes = CommandGroupItem | CommandShortcutItem;
+export type CommandPaletteProps = {
+    open: boolean;
+    bind?: string;
+    emptyMessage?: Label;
+    footer?: React.ReactElement;
+    commands: CommandItemTypes[];
+    onChange: (next: boolean) => void;
+};
+export declare const CommandPalette: (props: CommandPaletteProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=command-palette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/command-palette.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAMxF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI;IACnD,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;CAC3C,GAAG,CAAC,CAAC;AAEN,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAExC,KAAK,mBAAmB,GAAG,WAAW,CAClC,UAAU,EACV;IACI,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9I,CACJ,CAAC;AAEF,KAAK,gBAAgB,GAAG,WAAW,CAC/B,OAAO,EACP;IACI,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC7B,CACJ,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AAkDtE,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CA0KxD,CAAC"}

package/dist/src/components/floating/command-palette.js

@@ -0,0 +1,139 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { autoUpdate, useFloating, useInteractions, useListNavigation, useRole } from "@floating-ui/react";
+import { AnimatePresence, motion } from "motion/react";
+import { forwardRef, Fragment, useEffect, useId, useRef, useState } from "react";
+import { useStableRef } from "../../hooks/use-stable-ref";
+import { useTranslations } from "../../hooks/use-translations";
+import { CombiKeys } from "../../lib/combi-keys";
+import { css, isReactFC } from "../../lib/dom";
+import { fzf } from "../../lib/fzf";
+import { Shortcut } from "../display/shortcut";
+import { Modal } from "./modal";
+const Group = (props) => (_jsx("span", { className: "flex h-full items-center text-left text-sm font-medium text-secondary", children: isReactFC(props.item.title) ? _jsx(props.item.title, { text: props.text }) : props.item.title }));
+const Item = forwardRef((props, ref) => {
+    const id = useId();
+    const active = props.active;
+    const classNameBase = "h-10";
+    const item = props.item;
+    if (item.type === "group") {
+        return (_jsx(motion.div, { id: id, className: "h-10 px-2 pb-1 pt-2", children: _jsx(Group, { text: props.text, item: item }) }));
+    }
+    if (item.type === "shortcut") {
+        return (_jsxs(motion.button, { id: id, ref: ref, role: "option", "aria-selected": active, "data-component": "command-palette-item", onClick: (event) => item.action({ event, setOpen: props.onChange, text: props.text }), className: css(classNameBase, "flex items-center justify-between rounded-lg p-2 hover:bg-primary hover:text-primary-foreground", active ? "bg-primary text-primary-foreground" : ""), children: [_jsx("span", { children: isReactFC(item.title) ? _jsx(item.title, { text: props.text }) : item.title }), item.shortcut ? _jsx(Shortcut, { value: item.shortcut }) : null] }));
+    }
+    return _jsx(Fragment, {});
+});
+export const CommandPalette = (props) => {
+    const translations = useTranslations();
+    const [value, setValue] = useState("");
+    const valueRef = useStableRef(value);
+    const bindKey = props.bind ?? "Mod + k";
+    const [combi] = useState(new CombiKeys());
+    const id = useId();
+    const ref = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const floating = useFloating({
+        open: props.open,
+        onOpenChange: props.onChange,
+        whileElementsMounted: autoUpdate,
+    });
+    const listRef = useRef([]);
+    const listNav = useListNavigation(floating.context, {
+        listRef,
+        loop: true,
+        activeIndex,
+        virtual: true,
+        allowEscape: true,
+        onNavigate: setActiveIndex,
+        scrollItemIntoView: true,
+    });
+    const role = useRole(floating.context, { role: "listbox" });
+    const { getItemProps } = useInteractions([role, listNav]);
+    const commands = props.commands.flatMap((x) => x.type !== "group"
+        ? x.enabled
+            ? x.enabled({ text: value })
+                ? [x]
+                : []
+            : [x]
+        : [x, ...x.items].filter((x) => (x.enabled === undefined ? true : x.enabled({ text: value }))));
+    const fuzzy = commands.length === 0
+        ? commands
+        : fzf(commands, "title", [
+            { key: "title", value },
+            { key: "shortcut", value },
+            { key: "hint", value },
+            ...commands.reduce((acc, el) => {
+                if (!el.hint)
+                    return acc;
+                return [...acc, { key: "hint", value: el.hint }];
+            }, []),
+        ]);
+    const displayItems = value === ""
+        ? commands
+        : [
+            {
+                type: "group",
+                title: "Results",
+                items: [],
+            },
+            ...fuzzy.filter((x) => x.type !== "group"),
+        ];
+    useEffect(() => {
+        combi.add(bindKey, () => props.onChange?.(true));
+        commands.forEach((cmd) => {
+            if (cmd.type === "group")
+                return;
+            if (cmd.type === "shortcut" && cmd.shortcut !== undefined)
+                combi.add(cmd.shortcut, (event) => cmd.action({
+                    event,
+                    text: valueRef.current,
+                    setOpen: props.onChange,
+                }));
+        });
+        return combi.register();
+    }, [combi, bindKey]);
+    return (_jsx(Fragment, { children: _jsxs(Modal, { ref: ref, closable: false, open: props.open, overlayClickClose: true, interactions: [listNav], onChange: props.onChange, ariaTitle: "Command palette", bodyClassName: "px-0 py-0 pt-2", className: "container relative py-0 md:max-w-screen-sm lg:max-w-screen-md", children: [_jsx("header", { className: "h-12 isolate z-floating bg-floating-background w-full sticky top-0 border-b border-floating-border px-4", children: _jsx("input", { autoFocus: true, value: value, "data-combikeysbypass": "true", placeholder: "Search for...", onChange: (e) => setValue(e.target.value), className: "h-12 w-full bg-transparent pb-2 outline-none", onKeyDown: (e) => {
+                            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                                if (activeIndex !== null)
+                                    listRef.current[activeIndex]?.scrollIntoView({
+                                        block: "start",
+                                        inline: "start",
+                                    });
+                            }
+                            if (e.key === "Enter") {
+                                if (activeIndex !== null && displayItems[activeIndex]) {
+                                    e.preventDefault();
+                                    const x = displayItems[activeIndex];
+                                    const text = e.currentTarget.value;
+                                    if (x.type === "shortcut")
+                                        return x.action({
+                                            event: e,
+                                            setOpen: props.onChange,
+                                            text,
+                                        });
+                                }
+                                if (displayItems.length === 1) {
+                                    e.preventDefault();
+                                    const x = displayItems[0];
+                                    const text = e.currentTarget.value;
+                                    if (x.type === "shortcut")
+                                        return x.action({
+                                            event: e,
+                                            setOpen: props.onChange,
+                                            text,
+                                        });
+                                }
+                            }
+                        } }) }), _jsx(motion.ul, { initial: { transform: "scaleY(0)", opacity: 0.3 }, animate: { transform: "scaleY(1)", opacity: 1 }, className: "my-2 flex h-fit max-h-96 origin-[top_center] flex-col gap-1 px-2", children: _jsxs(AnimatePresence, { children: [displayItems.map((item, index) => (_createElement(Item, { ...getItemProps({
+                                    ref(node) {
+                                        listRef.current[index] = node;
+                                    },
+                                    onClick(e) {
+                                        e.preventDefault();
+                                        props.onChange(false);
+                                        floating.refs.domReference.current?.focus();
+                                    },
+                                }), item: item, text: value, onChange: props.onChange, active: activeIndex === index, key: `${id}-${item.type}-${index}` }))), displayItems.length === 1 ? (_jsx(motion.div, { className: css("flex items-center justify-between rounded-lg p-2 text-secondary"), children: translations.commandPaletteEmpty ?? props.emptyMessage })) : null] }) }), props.footer ? _jsx("footer", { className: "flex h-8 items-center rounded-b-lg bg-background p-2", children: props.footer }) : null] }) }));
+};

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

@@ -1,5 +1,6 @@
+import { type ElementProps } from "@floating-ui/react";
 import { HTMLMotionProps } from "motion/react";
-import React, { PropsWithChildren } from "react";
+import React from "react";
 import { Label, Override } from "../../types";
 type DialogType = "dialog" | "drawer" | "sheet";
 type DrawerPosition = "left" | "right";
@@ -11,20 +12,76 @@ export type ModalProps = Override<HTMLMotionProps<"div">, ({
     title?: Label;
 }) & {
     open: boolean;
+    onChange: (nextState: boolean) => void;
+} & Partial<{
+    interactions?: ElementProps[];
+    role?: "dialog" | "listbox";
+    footer?: Label;
+    asChild?: boolean;
+    layoutId?: string;
+    resizer?: boolean;
+    type?: DialogType;
+    className?: string;
+    bodyClassName?: string;
+    closable?: boolean;
+    forceType?: boolean;
+    overlayClassName?: string;
+    position?: DrawerPosition;
+    overlayClickClose?: boolean;
+    trigger?: Label | React.FC<any>;
+}>>;
+type ModalRef = {
+    context: any;
+    floating: HTMLElement | null;
+};
+export declare const Modal: React.ForwardRefExoticComponent<(Omit<Omit<HTMLMotionProps<"div">, "footer" | "title" | "type" | "className" | "role" | "onChange" | "layoutId" | "open" | "position" | "resizer" | "asChild" | "closable" | "interactions" | "bodyClassName" | "forceType" | "overlayClassName" | "overlayClickClose" | "trigger" | "ariaTitle"> & {
+    title: Label;
+    ariaTitle?: string;
+} & {
+    open: boolean;
+    onChange: (nextState: boolean) => void;
+} & Partial<{
+    interactions?: ElementProps[];
+    role?: "dialog" | "listbox";
     footer?: Label;
     asChild?: boolean;
     layoutId?: string;
     resizer?: boolean;
     type?: DialogType;
     className?: string;
+    bodyClassName?: string;
     closable?: boolean;
     forceType?: boolean;
     overlayClassName?: string;
     position?: DrawerPosition;
     overlayClickClose?: boolean;
     trigger?: Label | React.FC<any>;
+}> & {
+    children?: React.ReactNode | undefined;
+}, "ref"> | Omit<Omit<HTMLMotionProps<"div">, "footer" | "title" | "type" | "className" | "role" | "onChange" | "layoutId" | "open" | "position" | "resizer" | "asChild" | "closable" | "interactions" | "bodyClassName" | "forceType" | "overlayClassName" | "overlayClickClose" | "trigger" | "ariaTitle"> & {
+    ariaTitle: string;
+    title?: Label;
+} & {
+    open: boolean;
     onChange: (nextState: boolean) => void;
-}>;
-export declare const Modal: ({ open, title, footer, asChild, trigger, children, layoutId, onChange, className, resizer, closable, forceType, overlayClassName, type: _type, position: propsPosition, overlayClickClose, ariaTitle, ...props }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+} & Partial<{
+    interactions?: ElementProps[];
+    role?: "dialog" | "listbox";
+    footer?: Label;
+    asChild?: boolean;
+    layoutId?: string;
+    resizer?: boolean;
+    type?: DialogType;
+    className?: string;
+    bodyClassName?: string;
+    closable?: boolean;
+    forceType?: boolean;
+    overlayClassName?: string;
+    position?: DrawerPosition;
+    overlayClickClose?: boolean;
+    trigger?: Label | React.FC<any>;
+}> & {
+    children?: React.ReactNode | undefined;
+}, "ref">) & React.RefAttributes<ModalRef>>;
 export {};
 //# sourceMappingURL=modal.d.ts.map

package/dist/src/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,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AACnI,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAIlE,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AA2DnD,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhD,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,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;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACJ,CAAC;AA2EF,eAAO,MAAM,KAAK,GAAI,kNAmBnB,iBAAiB,CAAC,UAAU,CAAC,4CA8G/B,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,KAAK,YAAY,EASpB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AACnI,OAAO,KAA4F,MAAM,OAAO,CAAC;AAIjH,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AA2DnD,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhD,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,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;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,GAAG,OAAO,CAAC;IACJ,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACnC,CAAC,CACT,CAAC;AA2EF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAnGJ,KAAK;gBAAc,MAAM;;UACzB,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;mBAEnB,YAAY,EAAE;WACtB,QAAQ,GAAG,SAAS;aAClB,KAAK;cACJ,OAAO;eACN,MAAM;cACP,OAAO;WACV,UAAU;gBACL,MAAM;oBACF,MAAM;eACX,OAAO;gBACN,OAAO;uBACA,MAAM;eACd,cAAc;wBACL,OAAO;cACjB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eAlBc,MAAM;YAAU,KAAK;;UAChE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;mBAEnB,YAAY,EAAE;WACtB,QAAQ,GAAG,SAAS;aAClB,KAAK;cACJ,OAAO;eACN,MAAM;cACP,OAAO;WACV,UAAU;gBACL,MAAM;oBACF,MAAM;eACX,OAAO;gBACN,OAAO;uBACA,MAAM;eACd,cAAc;wBACL,OAAO;cACjB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CAoO1C,CAAC"}

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

@@ -5,7 +5,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
 import { AnimatePresence, motion, useMotionValue } from "motion/react";
-import { Fragment, useId } from "react";
+import { forwardRef, Fragment, useId, useImperativeHandle } from "react";
 import { useMediaQuery } from "../../hooks/use-media-query";
 import { useRemoveScroll } from "../../hooks/use-remove-scroll";
 import { css, mergeRefs } from "../../lib/dom";
@@ -85,7 +85,8 @@ const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
         return propsType === "drawer" ? (propsPosition ?? positions.drawer) : positions[type];
     return forceType ? positions[type] : positions.sheet;
 };
-export const Modal = ({ open, title, footer, asChild, trigger, children, layoutId, onChange, className, resizer = true, closable = true, forceType = false, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, ariaTitle, ...props }) => {
+const noop = [];
+export const Modal = forwardRef(({ interactions: outInteractions = noop, open, title, footer, asChild, trigger, children, layoutId, role: roleName = "dialog", onChange, className, bodyClassName, resizer = true, closable = true, forceType = false, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, ariaTitle, ...props }, externalRef) => {
     const removeScrollRef = useRemoveScroll(open, "overflow-hidden");
     const headingId = useId();
     const descriptionId = useId();
@@ -95,18 +96,25 @@ export const Modal = ({ open, title, footer, asChild, trigger, children, layoutI
     const func = isDesktop ? animations[_type] : forceType ? animations[_type] : animations.sheet;
     const animation = typeof func === "function" ? func(position) : func;
     const type = isDesktop ? _type : forceType ? _type : "sheet";
-    const { refs, context } = useFloating({ open: open, onOpenChange: onChange });
-    const click = useClick(context);
-    const role = useRole(context, { role: "dialog" });
-    const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: overlayClickClose });
-    const { getReferenceProps, getFloatingProps } = useInteractions([click, role, dismiss]);
+    const floating = useFloating({ open: open, onOpenChange: onChange, transform: true, strategy: "absolute" });
+    const click = useClick(floating.context);
+    const role = useRole(floating.context, { role: roleName });
+    const dismiss = useDismiss(floating.context, {
+        escapeKey: true,
+        referencePress: true,
+        outsidePress: overlayClickClose,
+    });
+    const interactions = useInteractions([click, role, dismiss].concat(outInteractions));
     const Trigger = trigger;
     const floatingSize = useMotionValue(undefined);
     const onClose = () => onChange(false);
-    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: refs.setReference, ...getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: open ? (_jsx(FloatingOverlay, { lockScroll: false, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { ...props, exit: "exit", animate: "enter", "aria-modal": open, initial: "initial", layoutId: layoutId, variants: animation, "data-component": "modal", ref: mergeRefs(refs.setFloating, removeScrollRef), className: css(variants({ position, type }), className), style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, ...(title
+    useImperativeHandle(externalRef, () => {
+        return { context: floating.context, floating: removeScrollRef.current };
+    }, [floating]);
+    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: floating.refs.setReference, ...interactions.getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: floating.refs.setReference, ...interactions.getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: open ? (_jsx(FloatingOverlay, { lockScroll: false, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: floating.context, children: _jsxs(motion.div, { ...props, exit: "exit", animate: "enter", "aria-modal": open, initial: "initial", layoutId: layoutId, variants: animation, "data-component": "modal", ref: mergeRefs(floating.refs.setFloating, removeScrollRef), className: css(variants({ position, type }), className, "overscroll-contain"), style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, ...(title
                                     ? {
                                         "aria-labelledby": headingId,
                                         "aria-describedby": descriptionId,
                                     }
-                                    : { "aria-label": ariaTitle }), ...getFloatingProps(), children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { id: headingId, className: "border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: title })) : null })) : null, _jsx("section", { className: "flex-1 overflow-y-auto px-8 py-1", children: children }), footer ? _jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: 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: onChange, parent: refs.floating, position: position, sheet: type === "sheet", value: floatingSize })) : null] }) }) })) : null }) })] }));
-};
+                                    : { "aria-label": ariaTitle }), ...interactions.getFloatingProps(), children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { id: headingId, className: "border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: title })) : null })) : null, _jsx("section", { className: css("flex-1 overflow-y-auto px-8 py-1", bodyClassName), children: children }), footer ? _jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: 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: onChange, parent: floating.refs.floating, position: position, sheet: type === "sheet", value: floatingSize })) : null] }) }) })) : null }) })] }));
+});

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":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAQzG,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;AAmCF,eAAO,MAAM,YAAY,yGA4VxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAQzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,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;AAiCF,eAAO,MAAM,YAAY,yGAkWxB,CAAC"}

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

@@ -1,7 +1,6 @@
 "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 Fuzzy from "fuzzy-search";
 import { ChevronDown } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
@@ -13,6 +12,7 @@ import { useTranslations } from "../../hooks/use-translations";
 import { css, dispatchInput, getRemainingSize, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { safeRegex } from "../../lib/fns";
 import { InputField } from "./input-field";
+import { fzf } from "../../lib/fzf";
 const Frag = (props) => _jsx(Fragment, { children: props.children });
 const transitionStyles = {
     duration: 300,
@@ -20,7 +20,6 @@ const transitionStyles = {
     open: { transform: "scaleY(1)", opacity: 1 },
     close: { transform: "scaleY(0)", opacity: 0 },
 };
-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 overscroll-contain rounded-lg border-b border-tooltip-border last:border-transparent", children: _jsx(AnimatePresence, { children: props.children }) }));
@@ -43,6 +42,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const [label, setLabel] = useState(() => options.find((x) => x.value === defaults)?.label ?? defaults);
     const [index, setIndex] = useState(null);
     const listRef = useRef(emptyRef);
+    const removeScrollRef = useRemoveScroll(open, "block-only");
     const innerOptions = dynamicOption && shadow !== ""
         ? [
             {
@@ -53,8 +53,12 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
             ...options,
         ]
         : options;
-    const list = new Fuzzy(innerOptions, ["value", "label"], fuzzyOptions).search(shadow);
-    const removeScrollRef = useRemoveScroll(open, "block-only");
+    const list = shadow
+        ? fzf(innerOptions, "value", [
+            { key: "value", value: shadow },
+            { key: "label", value: shadow },
+        ])
+        : innerOptions;
     const setClosed = () => {
         setOpen(false);
         setH(0);
@@ -66,8 +70,8 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const { x, y, strategy, refs, context } = useFloating({
         open,
         transform: true,
-        placement: "bottom-start",
         onOpenChange: setOpen,
+        placement: "bottom-start",
         whileElementsMounted: autoUpdate,
         middleware: [
             offset(4),

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAQlH,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,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,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,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA4DF,eAAO,MAAM,WAAW,wGAsZvB,CAAC"}
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AASlH,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,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,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,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA4DF,eAAO,MAAM,WAAW,wGA4ZvB,CAAC"}

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

@@ -1,7 +1,6 @@
 "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 Fuzzy from "fuzzy-search";
 import { ChevronDown, XIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import React, { forwardRef, Fragment, useEffect, useMemo, useRef, useState } from "react";
@@ -12,6 +11,7 @@ import { useTranslations } from "../../hooks/use-translations";
 import { Dict } from "../../lib/dict";
 import { css, getRemainingSize, initializeInputDataset } from "../../lib/dom";
 import { noop } from "../../lib/fns";
+import { fzf } from "../../lib/fzf";
 import { Tag } from "../core/tag";
 import { Checkbox } from "./checkbox";
 import { InputField } from "./input-field";
@@ -85,7 +85,12 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
             ...options,
         ]
         : options;
-    const list = new Fuzzy(innerOptions, ["value", "label"], fuzzyOptions).search(shadow);
+    const list = shadow.length === 0
+        ? innerOptions
+        : fzf(innerOptions, "value", [
+            { key: "value", value: shadow },
+            { key: "label", value: shadow },
+        ]);
     const removeScrollRef = useRemoveScroll(open, "block-only");
     const displayList = list.filter((x) => x.hidden !== true);
     const isEmpty = displayList.length === 0;

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

@@ -10,6 +10,7 @@ export * from "./display/notifications";
 export * from "./display/stats";
 export * from "./display/tabs";
 export * from "./display/timeline";
+export * from "./floating/command-palette";
 export * from "./floating/dropdown";
 export * from "./floating/expand";
 export * from "./floating/menu";

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,oBAAoB,CAAC;AACnC,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,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,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;AAC7H,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,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,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,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,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,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;AAC7H,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}