@g4rcez/components 0.2.6 → 0.3.1

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/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/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

@@ -1,34 +1,33 @@
-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: {
-    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: {
+        custom: string;
+        info: string;
+        warn: string;
+        muted: 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;;;;;;;;;;;;;;;;;;;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":"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.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,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CommandIcon, OptionIcon } from "lucide-react";
+import { Fragment } from "react";
+import { isMac } from "../../lib/combi-keys";
+const remap = (x) => {
+    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) => {
+    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,48 @@
+import { LucideProps } from "lucide-react";
+import React from "react";
+import { Label } from "../../types";
+type ViewProps = {
+    text: string;
+};
+type CommandItem<T extends string, P extends object> = {
+    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;
+    shortcut?: string;
+    action: (args: {
+        text: string;
+        setOpen: (state: boolean) => void;
+        event: KeyboardEvent | React.MouseEvent | React.KeyboardEvent;
+    }) => void | Promise<void>;
+}>;
+type CommandGroupItem = CommandItem<"group", {
+    title: View;
+    items: CommandItemTypes[];
+}>;
+export type CommandItemTypes = CommandGroupItem | CommandShortcutItem;
+export type CommandPaletteProps = {
+    bind?: string;
+    open: boolean;
+    loading?: boolean;
+    emptyMessage?: Label;
+    footer?: React.ReactElement;
+    commands: CommandItemTypes[];
+    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 {};
+//# 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":"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

@@ -0,0 +1,157 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 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 _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 id = useId();
+    const ref = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const floating = useFloating({
+        open: props.open,
+        strategy: "absolute",
+        onOpenChange: props.onChangeVisibility,
+        whileElementsMounted: autoUpdate,
+    });
+    const listNav = useListNavigation(floating.context, {
+        listRef,
+        loop: true,
+        activeIndex,
+        virtual: true,
+        allowEscape: true,
+        scrollItemIntoView: true,
+        onNavigate: (n) => setActiveIndex((prev) => {
+            if (Is.number(n))
+                return n;
+            return props.open ? (prev ?? 0) : null;
+        }),
+    });
+    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
+        : [
+            {
+                type: "group",
+                title: "Results",
+                items: [],
+            },
+            ...fuzzy.filter((x) => x.type !== "group"),
+        ];
+    useEffect(() => {
+        const combi = new CombiKeys();
+        combi.add(bindKey, () => props.onChangeVisibility?.(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.onChangeVisibility,
+                }));
+        });
+        return combi.register();
+    }, [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",
+                                        });
+                                }
+                                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.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");