@moduix/solid-tailwind 1.0.0

package/dist/components/command-palette/CommandPalette.js

@@ -0,0 +1,575 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Combobox } from "@ark-ui/solid/combobox";
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
+import { ark } from "@ark-ui/solid/factory";
+import { isHotKey } from "@zag-js/hotkeys";
+import { children, createEffect, onCleanup, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, CloseIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { Kbd } from "../kbd/index.js";
+import { ScrollArea } from "../scroll-area/index.js";
+const DEFAULT_CLEAR_TRIGGER_LABEL = 'Clear search';
+const DEFAULT_SEARCH_INPUT_LABEL = 'Search commands';
+function CommandPaletteRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'shortcut',
+        'lazyMount',
+        'onExitComplete',
+        'portalled',
+        'present',
+        'portalRef',
+        'skipAnimationOnMount',
+        'unmountOnExit'
+    ]);
+    const dialog = useDialog(others);
+    createEffect(()=>{
+        const shortcut = local.shortcut;
+        if (!shortcut) return;
+        const handleKeyDown = (event)=>{
+            const currentDialog = dialog();
+            if (event.defaultPrevented || event.repeat || event.isComposing || !isHotKey(shortcut, event, {
+                enableOnContentEditable: currentDialog.open,
+                enableOnFormTags: currentDialog.open
+            })) return;
+            event.preventDefault();
+            currentDialog.setOpen(!currentDialog.open);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        onCleanup(()=>document.removeEventListener('keydown', handleKeyDown));
+    });
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Dialog.RootProvider, {
+                value: dialog,
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get onExitComplete () {
+                    return local.onExitComplete;
+                },
+                get present () {
+                    return local.present;
+                },
+                get skipAnimationOnMount () {
+                    return local.skipAnimationOnMount;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                },
+                get children () {
+                    return local.children;
+                }
+            });
+        }
+    });
+}
+function CommandPaletteRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Dialog.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function CommandPaletteTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Dialog.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "command-palette-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others));
+}
+function CommandPaletteBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Dialog.Backdrop, mergeProps({
+                "data-slot": "command-palette-backdrop",
+                get ["class"] () {
+                    return cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] bg-overlay backdrop-blur-[4px] data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:animate-none', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function CommandPalettePositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Dialog.Positioner, mergeProps({
+                "data-slot": "command-palette-positioner",
+                get ["class"] () {
+                    return cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid items-start justify-items-center overflow-hidden overscroll-contain px-4 pt-[10dvh] pb-4', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function CommandPaletteContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Content, mergeProps({
+        "data-slot": "command-palette-content",
+        get ["class"] () {
+            return cn('flex max-h-[min(34rem,calc(100dvh-5rem))] w-[min(37.5rem,calc(100vw-2rem))] origin-top flex-col overflow-hidden rounded-lg border border-border/84 bg-popover bg-linear-to-b from-white/4 to-transparent text-popover-foreground shadow-lg outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class);
+        }
+    }, others));
+}
+function CommandPalettePanel(props) {
+    const [local, others] = splitProps(props, [
+        'children'
+    ]);
+    return [
+        createComponent(CommandPaletteBackdrop, {}),
+        createComponent(CommandPalettePositioner, {
+            get children () {
+                return createComponent(CommandPaletteContent, mergeProps(others, {
+                    get children () {
+                        return createComponent(CommandPaletteBody, {
+                            get children () {
+                                return local.children;
+                            }
+                        });
+                    }
+                }));
+            }
+        })
+    ];
+}
+function CommandPaletteTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Title, mergeProps({
+        "data-slot": "command-palette-title",
+        get ["class"] () {
+            return cn('text-md leading-6 font-semibold text-popover-foreground', local.class);
+        }
+    }, others));
+}
+function CommandPaletteDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Description, mergeProps({
+        "data-slot": "command-palette-description",
+        get ["class"] () {
+            return cn('text-sm leading-5 text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function CommandPaletteHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "command-palette-header",
+        get ["class"] () {
+            return cn('grid gap-1 px-4 pt-4', local.class);
+        }
+    }, others));
+}
+function CommandPaletteBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "command-palette-body",
+        get ["class"] () {
+            return cn('flex min-h-0 flex-1 flex-col', local.class);
+        }
+    }, others));
+}
+const CommandPalette_CommandPaletteCombobox = function(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'open',
+        'inputBehavior',
+        'selectionBehavior',
+        'closeOnSelect',
+        'disableLayer',
+        'onSelect'
+    ]);
+    const dialog = useDialogContext();
+    const handleSelect = (details)=>{
+        local.onSelect?.(details);
+        if (local.closeOnSelect ?? true) dialog().setOpen(false);
+    };
+    return createComponent(Combobox.Root, mergeProps({
+        "data-slot": "command-palette-combobox",
+        get ["class"] () {
+            return cn('flex min-h-0 flex-1 flex-col overflow-hidden', local.class);
+        },
+        get open () {
+            return local.open ?? true;
+        },
+        get inputBehavior () {
+            return local.inputBehavior ?? 'autohighlight';
+        },
+        get selectionBehavior () {
+            return local.selectionBehavior ?? 'preserve';
+        },
+        get closeOnSelect () {
+            return local.closeOnSelect ?? true;
+        },
+        get disableLayer () {
+            return local.disableLayer ?? true;
+        },
+        onSelect: handleSelect
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+};
+function CommandPaletteControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Control, mergeProps({
+        "data-slot": "command-palette-control",
+        get ["class"] () {
+            return cn('relative mx-3 mt-3 flex min-h-control-md flex-none items-center gap-2 rounded-md border border-border bg-background px-3 py-1 text-foreground transition-[background-color,border-color] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive', local.class);
+        }
+    }, others));
+}
+function CommandPaletteInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Input, mergeProps({
+        "data-slot": "command-palette-input",
+        get ["class"] () {
+            return cn('h-auto w-full min-w-0 flex-1 bg-transparent text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground data-invalid:text-destructive', local.class);
+        }
+    }, others));
+}
+function CommandPaletteSearch(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby'
+    ]);
+    return createComponent(CommandPaletteControl, {
+        get children () {
+            return [
+                createComponent(CommandPaletteInput, mergeProps({
+                    get ["aria-label"] () {
+                        return local['aria-label'] ?? (null == local['aria-labelledby'] ? DEFAULT_SEARCH_INPUT_LABEL : void 0);
+                    },
+                    get ["aria-labelledby"] () {
+                        return local['aria-labelledby'];
+                    }
+                }, others)),
+                createComponent(CommandPaletteClearTrigger, {})
+            ];
+        }
+    });
+}
+function CommandPaletteClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'children',
+        'onClick',
+        'onPointerDown',
+        'aria-label',
+        'aria-labelledby'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Combobox.Context, {
+        children: (combobox)=>createComponent(Combobox.ClearTrigger, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "command-palette-clear-trigger",
+                get hidden () {
+                    return 0 === combobox().inputValue.length;
+                },
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? (local.asChild || null != local.children || null != local['aria-labelledby'] ? void 0 : DEFAULT_CLEAR_TRIGGER_LABEL);
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return cn('inline-flex size-6 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-md bg-transparent text-muted-foreground transition-[background-color,color,opacity,translate,scale] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-3 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-popover-foreground', local.class);
+                },
+                onClick: (event)=>{
+                    local.onClick?.(event);
+                    if (!event.defaultPrevented) combobox().setInputValue('');
+                },
+                onPointerDown: (event)=>{
+                    local.onPointerDown?.(event);
+                    if (0 === event.button) {
+                        event.preventDefault();
+                        combobox().setInputValue('');
+                    }
+                }
+            }, others, {
+                get children () {
+                    return resolvedChildren() ?? createComponent(CloseIcon, {});
+                }
+            }))
+    });
+}
+function CommandPaletteList(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children'
+    ]);
+    return createComponent(Combobox.Content, mergeProps({
+        "data-slot": "command-palette-list",
+        get ["class"] () {
+            return cn('group/list flex min-h-0 flex-1 overflow-hidden outline-0', local.class);
+        }
+    }, others, {
+        get children () {
+            return createComponent(ScrollArea, {
+                "data-slot": "command-palette-scroll-area",
+                class: "h-auto min-h-0 flex-1",
+                get children () {
+                    return createComponent(ScrollArea.Viewport, {
+                        "data-slot": "command-palette-scroll-viewport",
+                        class: "scroll-py-2",
+                        get children () {
+                            return createComponent(ScrollArea.Content, {
+                                "data-slot": "command-palette-scroll-content",
+                                class: "min-h-full px-3 py-3 group-data-[empty]/list:p-0",
+                                get children () {
+                                    return local.children;
+                                }
+                            });
+                        }
+                    });
+                }
+            });
+        }
+    }));
+}
+function CommandPaletteEmpty(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Empty, mergeProps({
+        "data-slot": "command-palette-empty",
+        get ["class"] () {
+            return cn('[&:not(:empty)]:px-4 [&:not(:empty)]:py-3 [&:not(:empty)]:text-sm [&:not(:empty)]:leading-5 [&:not(:empty)]:text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.ItemGroup, mergeProps({
+        "data-slot": "command-palette-item-group",
+        get ["class"] () {
+            return cn('grid gap-1 [&:not(:last-child)]:pb-2', local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.ItemGroupLabel, mergeProps({
+        "data-slot": "command-palette-item-group-label",
+        get ["class"] () {
+            return cn('sticky top-0 z-1 block bg-popover px-3 py-1 text-xs leading-4 font-normal text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function CommandPaletteItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Item, mergeProps({
+        "data-slot": "command-palette-item",
+        get ["class"] () {
+            return cn('relative z-0 grid min-h-control-sm cursor-default grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-3 rounded-md px-3 py-1 text-sm leading-5 text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground', local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.ItemText, mergeProps({
+        "data-slot": "command-palette-item-text",
+        get ["class"] () {
+            return cn('grid min-w-0 gap-1', local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Combobox.ItemIndicator, mergeProps({
+        "data-slot": "command-palette-item-indicator",
+        get ["class"] () {
+            return cn('inline-flex size-8 items-center justify-center justify-self-end rounded-md border border-transparent bg-transparent text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function CommandPaletteItemIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "command-palette-item-icon",
+        get ["class"] () {
+            return cn('inline-flex size-8 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "command-palette-item-label",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap', local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "command-palette-item-description",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden text-xs leading-4 text-ellipsis whitespace-nowrap text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemMeta(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "command-palette-item-meta",
+        get ["class"] () {
+            return cn('justify-self-end text-xs leading-4 whitespace-nowrap text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function CommandPaletteSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        role: "separator",
+        "data-slot": "command-palette-separator",
+        get ["class"] () {
+            return cn('mx-2 my-2 h-px bg-border', local.class);
+        }
+    }, others));
+}
+function CommandPaletteFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "command-palette-footer",
+        get ["class"] () {
+            return cn('flex flex-none items-center justify-between gap-3 border-t border-border px-4 py-2 text-xs leading-4 text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function CommandPaletteKbd(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Kbd.Root, mergeProps({
+        "data-slot": "command-palette-kbd",
+        get ["class"] () {
+            return cn('min-h-5 min-w-5 rounded-sm px-1 text-xs leading-4 text-muted-foreground', local.class);
+        }
+    }, others));
+}
+const CommandPalette = Object.assign(CommandPaletteRoot, {
+    Root: CommandPaletteRoot,
+    RootProvider: CommandPaletteRootProvider,
+    Trigger: CommandPaletteTrigger,
+    Backdrop: CommandPaletteBackdrop,
+    Positioner: CommandPalettePositioner,
+    Content: CommandPaletteContent,
+    Panel: CommandPalettePanel,
+    Title: CommandPaletteTitle,
+    Description: CommandPaletteDescription,
+    Header: CommandPaletteHeader,
+    Body: CommandPaletteBody,
+    Combobox: CommandPalette_CommandPaletteCombobox,
+    Control: CommandPaletteControl,
+    Input: CommandPaletteInput,
+    Search: CommandPaletteSearch,
+    ClearTrigger: CommandPaletteClearTrigger,
+    List: CommandPaletteList,
+    Empty: CommandPaletteEmpty,
+    ItemGroup: CommandPaletteItemGroup,
+    ItemGroupLabel: CommandPaletteItemGroupLabel,
+    Item: CommandPaletteItem,
+    ItemText: CommandPaletteItemText,
+    ItemIndicator: CommandPaletteItemIndicator,
+    ItemIcon: CommandPaletteItemIcon,
+    ItemLabel: CommandPaletteItemLabel,
+    ItemDescription: CommandPaletteItemDescription,
+    ItemMeta: CommandPaletteItemMeta,
+    Separator: CommandPaletteSeparator,
+    Footer: CommandPaletteFooter,
+    Kbd: CommandPaletteKbd
+});
+export { CommandPalette };