@g4rcez/components 0.3.0 → 0.3.1

package/dist/preset/src/styles/common.d.ts

@@ -7,7 +7,7 @@ export declare const rounded: {
 };
 export declare const spacing: {
     readonly base: "1rem";
-    readonly lg: "1.5rem";
+    readonly lg: "1.125rem";
     readonly sm: "0.75rem";
     readonly "field-height": "1.5rem";
     readonly "field-label": "1.875rem";

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

@@ -6,7 +6,7 @@ export var rounded = {
 };
 export var spacing = {
     base: "1rem",
-    lg: "1.5rem",
+    lg: "1.125rem",
     sm: "0.75rem",
     "field-height": "1.5rem",
     "field-label": "1.875rem",

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

@@ -1,10 +1,6 @@
-import { type VariantProps } from "class-variance-authority";
 import React from "react";
 import { CvaVariants, Label } from "../../types";
 import { PolymorphicProps } from "./polymorph";
-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: {
     size: {
         icon: string;
@@ -13,22 +9,25 @@ declare const variants: {
         small: string;
     };
     theme: {
-        primary: string;
-        danger: string;
+        custom: string;
         info: string;
-        success: string;
-        secondary: string;
         warn: string;
         muted: string;
-        neutral: string;
+        danger: string;
         disabled: string;
+        primary: string;
+        success: string;
+        neutral: string;
+        secondary: string;
         loading: string;
     };
 };
+type Variants = CvaVariants<typeof variants>;
+type Themes = NonNullable<Variants["theme"]>;
 export type TagProps<T extends React.ElementType = "span"> = PolymorphicProps<CvaVariants<typeof variants> & Partial<{
     icon: Label;
     loading: boolean;
-    indicator: VariantProps<typeof indicatorVariant>["theme"];
+    indicator: Themes;
 }>, T>;
 export declare const Tag: <T extends React.ElementType = "span">(props: TagProps<T>) => any;
 export {};

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;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/core/tag.tsx"],"names":[],"mappings":"AACA,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,QAAQ;;;;;;;;;;;;;;;;;;;;CAoBb,CAAC;AAEF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,KAAK,MAAM,GAAG,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;AAsB7C,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,WAAW,CAAC,OAAO,QAAQ,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC,EAC5F,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/core/tag.js

@@ -3,19 +3,6 @@ import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
-const indicatorVariant = cva("size-2.5 aspect-square rounded-full border-0", {
-    variants: {
-        theme: {
-            info: "bg-info",
-            warn: "bg-warn",
-            muted: "bg-muted",
-            primary: "bg-primary",
-            danger: "bg-danger",
-            success: "bg-success",
-            secondary: "bg-secondary",
-        },
-    },
-});
 const variants = {
     size: {
         icon: "p-1",
@@ -24,18 +11,33 @@ const variants = {
         small: "h-6 p-2 px-3 text-sm",
     },
     theme: {
-        primary: "bg-tag-primary-bg text-tag-primary-text",
-        danger: "bg-tag-danger-bg text-tag-danger-text",
+        custom: "",
         info: "bg-tag-info-bg text-tag-info-text",
-        success: "bg-tag-success-bg text-tag-success-text",
-        secondary: "bg-tag-secondary-bg text-tag-secondary-text",
         warn: "bg-tag-warn-bg text-tag-warn-text",
         muted: "bg-tag-muted-bg text-tag-muted-text",
-        neutral: "bg-transparent border border-card-border",
+        danger: "bg-tag-danger-bg text-tag-danger-text",
         disabled: "bg-disabled duration-700 opacity-70",
+        primary: "bg-tag-primary-bg text-tag-primary-text",
+        success: "bg-tag-success-bg text-tag-success-text",
+        neutral: "bg-transparent border border-card-border",
+        secondary: "bg-tag-secondary-bg text-tag-secondary-text",
         loading: "animate-pulse bg-disabled duration-700 opacity-70",
     },
 };
+const indicatorVariant = cva("size-2.5 aspect-square rounded-full border-0", {
+    variants: {
+        theme: {
+            info: "bg-info",
+            warn: "bg-warn",
+            muted: "bg-muted",
+            danger: "bg-danger",
+            neutral: "bg-muted",
+            primary: "bg-primary",
+            success: "bg-success",
+            secondary: "bg-secondary",
+        },
+    },
+});
 const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-2 border-transparent items-center justify-center align-middle whitespace-nowrap", {
     variants,
     defaultVariants: { theme: "primary", size: "default" },

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CommandIcon } from "lucide-react";
+import { CommandIcon, OptionIcon } from "lucide-react";
 import { Fragment } from "react";
 import { isMac } from "../../lib/combi-keys";
 const remap = (x) => {
-    if (x === "Mod") {
+    x = x.trim();
+    if (x === "Alt")
+        return isMac() ? _jsx(OptionIcon, { "aria-label": "Option", size: 14 }) : "Alt";
+    if (x === "Mod")
         return isMac() ? _jsx(CommandIcon, { "aria-label": "Command", size: 14 }) : "Ctrl";
-    }
     return x;
 };
 export const Shortcut = (props) => {

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

@@ -1,3 +1,4 @@
+import { LucideProps } from "lucide-react";
 import React from "react";
 import { Label } from "../../types";
 type ViewProps = {
@@ -5,10 +6,11 @@ type ViewProps = {
 };
 type CommandItem<T extends string, P extends object> = {
     type: T;
-    hint?: string;
-    enabled?: (props: ViewProps) => boolean;
+    hint?: string | string[];
+    Icon?: React.ReactElement;
+    enabled?: ((props: ViewProps) => boolean) | boolean;
 } & P;
-type View = Label | React.FC<ViewProps>;
+type View = string | ((props: ViewProps) => string);
 type CommandShortcutItem = CommandItem<"shortcut", {
     title: View;
     shortcut?: string;
@@ -16,7 +18,7 @@ type CommandShortcutItem = CommandItem<"shortcut", {
         text: string;
         setOpen: (state: boolean) => void;
         event: KeyboardEvent | React.MouseEvent | React.KeyboardEvent;
-    }) => void;
+    }) => void | Promise<void>;
 }>;
 type CommandGroupItem = CommandItem<"group", {
     title: View;
@@ -24,12 +26,22 @@ type CommandGroupItem = CommandItem<"group", {
 }>;
 export type CommandItemTypes = CommandGroupItem | CommandShortcutItem;
 export type CommandPaletteProps = {
-    open: boolean;
     bind?: string;
+    open: boolean;
+    loading?: boolean;
     emptyMessage?: Label;
     footer?: React.ReactElement;
     commands: CommandItemTypes[];
-    onChange: (next: boolean) => void;
+    onChangeText?: (text: string) => void;
+    onChangeVisibility: (next: boolean) => void;
+    Preview?: React.FC<{
+        command: CommandItemTypes;
+        text: string;
+    }>;
+    Icon?: React.FC<LucideProps & {
+        text: string;
+        Default: React.FC<LucideProps>;
+    }>;
 };
 export declare const CommandPalette: (props: CommandPaletteProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/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":"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"}
+{"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;AAEvD,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;IACnD,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;CACvD,GAAG,CAAC,CAAC;AAEN,KAAK,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC;AAEpD,KAAK,mBAAmB,GAAG,WAAW,CAClC,UAAU,EACV;IACI,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE;QACX,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;KACjE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CACJ,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;AAiDtE,MAAM,MAAM,mBAAmB,GAAG;IAC9B,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;CACnF,CAAC;AAsBF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CAoMxD,CAAC"}

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

@@ -1,75 +1,82 @@
 "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 { autoUpdate, useFloating, useInteractions, useListNavigation } from "@floating-ui/react";
+import { FilterIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { forwardRef, Fragment, useEffect, useId, useRef, useState } from "react";
+import { Is } from "sidekicker";
 import { useStableRef } from "../../hooks/use-stable-ref";
 import { useTranslations } from "../../hooks/use-translations";
 import { CombiKeys } from "../../lib/combi-keys";
+import { Dict } from "../../lib/dict";
 import { css, isReactFC } from "../../lib/dom";
 import { fzf } from "../../lib/fzf";
 import { Shortcut } from "../display/shortcut";
+import { SkeletonCell } from "../display/skeleton";
 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") {
+    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, {});
+    if (item.type !== "shortcut")
+        return _jsx(Fragment, {});
+    return (_jsxs(motion.button, { ...props, id: id, ref: ref, role: "option", type: "button", "aria-selected": active, "data-component": "command-palette-item", className: css("flex h-10 items-center justify-between rounded-lg p-2 hover:bg-floating-hover hover:text-floating-foreground", active ? "bg-floating-hover text-primary-foreground" : ""), children: [_jsxs("span", { className: "flex items-center gap-2", children: [item.Icon ? item.Icon : null, _jsx("span", { children: isReactFC(item.title) ? _jsx(item.title, { text: props.text }) : item.title })] }), item.shortcut ? _jsx(Shortcut, { value: item.shortcut }) : null] }));
 });
+const getFuzzyData = (commands, value) => {
+    if (value.length === 0)
+        return commands;
+    const rules = [
+        { key: "title", value },
+        { key: "shortcut", value },
+        { key: "hint", value },
+    ];
+    const normalize = commands.map((x) => ({ ...x, title: Is.function(x.title) ? x.title({ text: value }) : x.title }));
+    const target = normalize.reduce((acc, x) => {
+        const enabled = Is.function(x.enabled) ? x.enabled({ text: value }) : (x.enabled ?? true);
+        if (enabled)
+            acc.push({ ...x, enabled: enabled });
+        return acc;
+    }, []);
+    const filter = fzf(target, "title", rules);
+    const withEnabled = normalize.filter((x) => (Is.function(x.enabled) ? x.enabled({ text: value }) : false));
+    return Dict.unique(filter.concat(withEnabled), (x) => x.title);
+};
+const loadingSkeleton = [0, 0, 0, 0, 0];
 export const CommandPalette = (props) => {
+    const bindKey = props.bind ?? "Mod + k";
+    const listRef = useRef([]);
     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,
+        strategy: "absolute",
+        onOpenChange: props.onChangeVisibility,
         whileElementsMounted: autoUpdate,
     });
-    const listRef = useRef([]);
     const listNav = useListNavigation(floating.context, {
         listRef,
         loop: true,
         activeIndex,
         virtual: true,
         allowEscape: true,
-        onNavigate: setActiveIndex,
         scrollItemIntoView: true,
+        onNavigate: (n) => setActiveIndex((prev) => {
+            if (Is.number(n))
+                return n;
+            return props.open ? (prev ?? 0) : null;
+        }),
     });
-    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 { getItemProps } = useInteractions([listNav]);
+    const commands = props.commands.flatMap((x) => (x.type === "group" ? [x, ...x.items] : [x]));
+    const fuzzy = getFuzzyData(commands, value);
     const displayItems = value === ""
         ? commands
         : [
@@ -81,7 +88,8 @@ export const CommandPalette = (props) => {
             ...fuzzy.filter((x) => x.type !== "group"),
         ];
     useEffect(() => {
-        combi.add(bindKey, () => props.onChange?.(true));
+        const combi = new CombiKeys();
+        combi.add(bindKey, () => props.onChangeVisibility?.(true));
         commands.forEach((cmd) => {
             if (cmd.type === "group")
                 return;
@@ -89,51 +97,61 @@ export const CommandPalette = (props) => {
                 combi.add(cmd.shortcut, (event) => cmd.action({
                     event,
                     text: valueRef.current,
-                    setOpen: props.onChange,
+                    setOpen: props.onChangeVisibility,
                 }));
         });
         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,
+    }, [bindKey]);
+    const Icon = props.Icon ?? FilterIcon;
+    return (_jsx(Fragment, { children: _jsxs(Modal, { ref: ref, closable: false, open: props.open, overlayClickClose: true, interactions: [listNav], onChange: props.onChangeVisibility, ariaTitle: "Command palette", bodyClassName: "px-0 py-0 pt-2", "data-component": "command-palette", className: "container relative py-0 md:max-w-screen-sm lg:max-w-screen-md", children: [_jsxs("header", { className: "sticky top-0 isolate z-floating flex h-12 w-full items-center border-b border-floating-border bg-floating-background px-4", children: [_jsx("div", { className: "flex size-10 items-center justify-center", children: _jsx(Icon, { Default: FilterIcon, text: value, size: 16 }) }), _jsx("input", { autoFocus: true, value: value, "data-combikeysbypass": "true", placeholder: "Search for...", onChange: (e) => setValue(e.target.value), className: "h-12 w-full items-center bg-transparent px-2 py-2 pb-2 text-left text-lg outline-none", onKeyDown: (e) => {
+                                if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                                    if (activeIndex !== null)
+                                        listRef.current[activeIndex]?.scrollIntoView({
+                                            block: "start",
+                                            inline: "start",
                                         });
                                 }
-                            }
-                        } }) }), _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) {
+                                if (e.key === "Enter") {
+                                    if (activeIndex !== null && displayItems[activeIndex]) {
                                         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] }) }));
+                                        const x = displayItems[activeIndex];
+                                        const text = e.currentTarget.value;
+                                        if (x.type === "shortcut")
+                                            return x.action({
+                                                event: e,
+                                                setOpen: props.onChangeVisibility,
+                                                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.onChangeVisibility,
+                                                text,
+                                            });
+                                    }
+                                }
+                            } })] }), _jsx(AnimatePresence, { children: props.loading ? (_jsxs(motion.ul, { role: "listbox", "data-component": "command-palette-list", animate: { transform: "scaleY(1)", opacity: 1 }, initial: { transform: "scaleY(0)", opacity: 0.3 }, className: "my-2 flex max-h-96 w-full origin-[top_center] flex-col gap-1 overflow-y-auto px-2", children: [_jsx(motion.div, { className: "h-10 px-2 pb-1 pt-2", children: translations.commandPaletteLoading }), loadingSkeleton.map((x, i) => {
+                                return (_jsx(motion.li, { className: css("flex h-10 items-center justify-between rounded-lg p-2 hover:bg-primary hover:text-primary-foreground"), children: SkeletonCell }, `${id}-${i}-skeleton-index`));
+                            })] })) : (_jsxs(motion.div, { className: "flex min-w-full flex-row flex-nowrap", "data-component": "command-palette-container", children: [_jsxs(motion.ul, { role: "listbox", "data-component": "command-palette-list", animate: { transform: "scaleY(1)", opacity: 1 }, initial: { transform: "scaleY(0)", opacity: 0.3 }, className: "my-2 flex h-fit max-h-96 w-full origin-[top_center] flex-col gap-1 overflow-y-auto px-2", children: [displayItems.map((item, index) => (_createElement(Item, { ...getItemProps({
+                                            onMouseEnter: () => setActiveIndex(index),
+                                            ref(node) {
+                                                listRef.current[index] = node;
+                                            },
+                                            onClick(e) {
+                                                e.preventDefault();
+                                                props.onChangeVisibility(false);
+                                                floating.refs.domReference.current?.focus();
+                                                if (item.type === "shortcut")
+                                                    item.action({
+                                                        event: e,
+                                                        setOpen: props.onChangeVisibility,
+                                                        text: value,
+                                                    });
+                                            },
+                                        }), item: item, text: value, 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.Preview && Is.number(activeIndex) ? _jsx(props.Preview, { command: displayItems[activeIndex], text: value }) : 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/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAA2E,MAAM,OAAO,CAAC;AA6BhG,MAAM,MAAM,SAAS,GAAG,OAAO,CAC3B;IACI,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAAC;CACxC,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACzE,CAAC;AA4KF,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAE1F,eAAO,MAAM,QAAQ,oKAmCpB,CAAC;AAEF,eAAO,MAAM,IAAI;WA5NF,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;cACP,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WAC1B,MAAM;;WART,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;cACP,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WACN,KAAK,CAAC,YAAY;WAAS,MAAM;qDA6NrE,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAA2E,MAAM,OAAO,CAAC;AA6BhG,MAAM,MAAM,SAAS,GAAG,OAAO,CAC3B;IACI,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAAC;CACxC,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACzE,CAAC;AAmKF,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAE1F,eAAO,MAAM,QAAQ,oKAmCpB,CAAC;AAEF,eAAO,MAAM,IAAI;WAnNF,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;cACP,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WAC1B,MAAM;;WART,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;cACP,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WACN,KAAK,CAAC,YAAY;WAAS,MAAM;qDAoNrE,CAAC"}

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
+import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useRole, useTypeahead, } from "@floating-ui/react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRightIcon } from "lucide-react";
 import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
 import { FLOATING_DELAY, TYPEAHEAD_RESET_DELAY } from "../../constants";
-import { css } from "../../lib/dom";
+import { css, mergeRefs } from "../../lib/dom";
 const menuItemClassName = (highlight = "") => css("w-full min-w-36 outline-none p-2.5 items-center flex justify-between text-left", "hover:bg-primary focus:bg-primary aria-expanded:opacity-80", "focus:text-primary-foreground hover:text-primary-foreground", "first-of-type:rounded-t-lg last-of-type:rounded-b-lg", "disabled:opacity-40 disabled:cursor-not-allowed", highlight);
 const MenuContext = createContext({
     isOpen: false,
@@ -45,16 +45,17 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
         handleClose: safePolygon({ blockPointerEvents: true }),
     });
     const click = useClick(context, {
-        event: "mousedown",
         toggle: !isNested,
+        event: "mousedown",
         ignoreMouse: isNested,
         keyboardHandlers: true,
+        enabled: props.disabled === false,
     });
     const listNavigation = useListNavigation(context, {
         loop: true,
-        listRef: elementsRef,
         activeIndex,
         nested: isNested,
+        listRef: elementsRef,
         onNavigate: setActiveIndex,
     });
     const typeahead = useTypeahead(context, {
@@ -67,14 +68,11 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
     useEffect(() => {
         if (!tree)
             return;
-        function handleTreeClick() {
-            setIsOpen(false);
-        }
-        function onSubMenuOpen(event) {
-            if (event.nodeId !== nodeId && event.parentId === parentId) {
+        const handleTreeClick = () => setIsOpen(false);
+        const onSubMenuOpen = (event) => {
+            if (event.nodeId !== nodeId && event.parentId === parentId)
                 setIsOpen(false);
-            }
-        }
+        };
         tree.events.on("click", handleTreeClick);
         tree.events.on("menuopen", onSubMenuOpen);
         return () => {
@@ -83,9 +81,8 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
         };
     }, [tree, nodeId, parentId]);
     useEffect(() => {
-        if (isOpen && tree) {
+        if (isOpen && tree)
             tree.events.emit("menuopen", { parentId, nodeId });
-        }
     }, [tree, isOpen, nodeId, parentId]);
     const className = isParent ? props.className : css(menuItemClassName(props.className));
     return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, { ...getReferenceProps(parent.getItemProps({
@@ -95,7 +92,7 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
                             setHasFocusInside(false);
                             parent.setHasFocusInside(true);
                         },
-                    })), children: label, ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, className: className })) : (_jsxs("button", { type: "button", className: className, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, ...getReferenceProps(parent.getItemProps({
+                    })), children: label, className: className, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, ref: mergeRefs(refs.setReference, item.ref, forwardedRef), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1 })) : (_jsxs("button", { type: "button", className: className, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, ref: mergeRefs(refs.setReference, item.ref, forwardedRef), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, ...getReferenceProps(parent.getItemProps({
                         ...props,
                         onFocus(event) {
                             props.onFocus?.(event);
@@ -109,7 +106,7 @@ export const MenuItem = React.forwardRef(({ title, Right, disabled, children, ..
     const item = useListItem({ label: disabled ? null : title });
     const tree = useFloatingTree();
     const isActive = item.index === menu.activeIndex;
-    return (_jsxs("button", { ...props, title: title, type: "button", role: "menuitem", disabled: disabled, "data-active": isActive, "data-open": menu.isOpen, tabIndex: isActive ? 0 : -1, ref: useMergeRefs([item.ref, forwardedRef]), className: menuItemClassName(`${props.className ?? ""} ${isActive ? "bg-primary text-primary-foreground" : ""}`), ...menu.getItemProps({
+    return (_jsxs("button", { ...props, title: title, type: "button", role: "menuitem", disabled: disabled, "data-active": isActive, "data-open": menu.isOpen, tabIndex: isActive ? 0 : -1, ref: mergeRefs(item.ref, forwardedRef), className: menuItemClassName(`${props.className ?? ""} ${isActive ? "bg-primary text-primary-foreground" : ""}`), ...menu.getItemProps({
             onClick(event) {
                 props.onClick?.(event);
                 tree?.events.emit("click");

package/dist/src/config/default-translations.d.ts

@@ -1,44 +1,42 @@
 import React from "react";
 export declare const defaultTranslations: {
+    autocompleteEmpty: string;
+    calendarBackMonth: string;
+    calendarFromDate: string;
+    calendarMonthLabel: string;
+    calendarNextMonth: string;
+    calendarToDate: string;
+    calendarToday: string;
+    commandPaletteEmpty: string;
+    commandPaletteLoading: string;
+    datePickerCalendarButtonLabel: string;
     emptyDataMessage: string;
     inputCaretDown: string;
     inputCloseValue: string;
-    datePickerCalendarButtonLabel: string;
     inputOptionalLabel: string;
-    autocompleteEmpty: string;
-    tableGroupLabel: string;
-    tableGroupLabelWithCount: string;
-    tableSortAsc: string;
-    tableSortOrderByLabel: string;
-    tableSortOrderInputPlaceholder: string;
-    tableSortOrderInputTitle: string;
-    tableSortTypeInputPlaceholder: string;
-    tableSortTypeInputTitle: string;
-    tableSortAddButton: string;
-    tableSortDropdownTitle: string;
-    tableSortDesc: string;
+    multiSelectInnerPlaceholder: string;
+    multiSelectSelectedLabel: string;
     tableColumnResizer: string;
+    tableFilterColumnPlaceholder: string;
+    tableFilterColumnTitle: string;
+    tableFilterDropdownTitle: string;
+    tableFilterDropdownTitleUnique: string;
+    tableFilterLabel: string;
+    tableFilterNewFilter: string;
+    tableFilterOperatorPlaceholder: string;
+    tableFilterOperatorTitle: string;
     tableFilterTypeContains: string;
+    tableFilterTypeEndsWith: string;
+    tableFilterTypeGreaterThan: string;
     tableFilterTypeIs: string;
     tableFilterTypeIsNot: string;
-    tableFilterTypeNotContains: string;
     tableFilterTypeLessThan: string;
-    tableFilterTypeGreaterThan: string;
+    tableFilterTypeNotContains: string;
     tableFilterTypeStartsWith: string;
-    tableFilterTypeEndsWith: string;
-    tableFilterNewFilter: string;
-    tableFilterColumnTitle: string;
-    tableFilterColumnPlaceholder: string;
-    tableFilterOperatorTitle: string;
-    tableFilterOperatorPlaceholder: string;
-    tableFilterValueTitle: string;
     tableFilterValuePlaceholder: string;
-    tableFilterLabel: string;
-    tableFilterDropdownTitle: string;
-    tableFilterDropdownTitleUnique: string;
-    tablePaginationPrevious: string;
-    tablePaginationNext: string;
-    tablePaginationSelectLabel: string;
+    tableFilterValueTitle: string;
+    tableGroupLabel: string;
+    tableGroupLabelWithCount: string;
     tablePaginationFooter: (pagination: {
         pages: number;
         totalItems: number;
@@ -46,15 +44,18 @@ export declare const defaultTranslations: {
         current: number;
         select: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
-    calendarFromDate: string;
-    calendarToDate: string;
-    calendarToday: string;
-    calendarBackMonth: string;
-    calendarNextMonth: string;
-    calendarMonthLabel: string;
-    multiSelectSelectedLabel: string;
-    multiSelectInnerPlaceholder: string;
-    commandPaletteEmpty: string;
+    tablePaginationNext: string;
+    tablePaginationPrevious: string;
+    tablePaginationSelectLabel: string;
+    tableSortAddButton: string;
+    tableSortAsc: string;
+    tableSortDesc: string;
+    tableSortDropdownTitle: string;
+    tableSortOrderByLabel: string;
+    tableSortOrderInputPlaceholder: string;
+    tableSortOrderInputTitle: string;
+    tableSortTypeInputPlaceholder: string;
+    tableSortTypeInputTitle: string;
 };
 export type Translations = typeof defaultTranslations;
 //# sourceMappingURL=default-translations.d.ts.map