@moduix/solid 1.0.0

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

@@ -0,0 +1,326 @@
+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 { clsx } from "clsx";
+import { children, createEffect, onCleanup, splitProps } from "solid-js";
+import { CheckIcon, CloseIcon } from "../../internal/icons/ui/Icons.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import CloseButton_module from "../close-button/CloseButton.module.jsx";
+import { Kbd } from "../kbd/index.jsx";
+import { ScrollArea } from "../scroll-area/index.jsx";
+import CommandPalette_module from "./CommandPalette.module.jsx";
+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 <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Dialog.RootProvider value={dialog} lazyMount={local.lazyMount ?? true} onExitComplete={local.onExitComplete} present={local.present} skipAnimationOnMount={local.skipAnimationOnMount} unmountOnExit={local.unmountOnExit ?? true}>
+        {local.children}
+      </Dialog.RootProvider>
+    </OverlayPortalProvider>;
+}
+function CommandPaletteRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Dialog.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Dialog.RootProvider>
+    </OverlayPortalProvider>;
+}
+function CommandPaletteTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Dialog.Trigger asChild={local.asChild} data-slot="command-palette-trigger" class={clsx(!local.asChild && CommandPalette_module.trigger, local.class)} {...others}/>;
+}
+function CommandPaletteBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Backdrop data-slot="command-palette-backdrop" class={clsx(CommandPalette_module.backdrop, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function CommandPalettePositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Positioner data-slot="command-palette-positioner" class={clsx(CommandPalette_module.positioner, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function CommandPaletteContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Content data-slot="command-palette-content" class={clsx(CommandPalette_module.content, local.class)} {...others}/>;
+}
+function CommandPalettePanel(props) {
+    const [local, others] = splitProps(props, [
+        'children'
+    ]);
+    return <>
+      <CommandPaletteBackdrop/>
+      <CommandPalettePositioner>
+        <CommandPaletteContent {...others}>
+          <CommandPaletteBody>{local.children}</CommandPaletteBody>
+        </CommandPaletteContent>
+      </CommandPalettePositioner>
+    </>;
+}
+function CommandPaletteTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Title data-slot="command-palette-title" class={clsx(CommandPalette_module.title, local.class)} {...others}/>;
+}
+function CommandPaletteDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Description data-slot="command-palette-description" class={clsx(CommandPalette_module.description, local.class)} {...others}/>;
+}
+function CommandPaletteHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="command-palette-header" class={clsx(CommandPalette_module.header, local.class)} {...others}/>;
+}
+function CommandPaletteBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="command-palette-body" class={clsx(CommandPalette_module.body, 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 <Combobox.Root data-slot="command-palette-combobox" class={clsx(CommandPalette_module.combobox, local.class)} open={local.open ?? true} inputBehavior={local.inputBehavior ?? 'autohighlight'} selectionBehavior={local.selectionBehavior ?? 'preserve'} closeOnSelect={local.closeOnSelect ?? true} disableLayer={local.disableLayer ?? true} onSelect={handleSelect} {...others}>
+      {local.children}
+    </Combobox.Root>;
+};
+function CommandPaletteControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Control data-slot="command-palette-control" class={clsx(CommandPalette_module.control, local.class)} {...others}/>;
+}
+function CommandPaletteInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Input data-slot="command-palette-input" class={clsx(CommandPalette_module.input, local.class)} {...others}/>;
+}
+function CommandPaletteSearch(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby'
+    ]);
+    return <CommandPaletteControl>
+      <CommandPaletteInput aria-label={local['aria-label'] ?? (null == local['aria-labelledby'] ? DEFAULT_SEARCH_INPUT_LABEL : void 0)} aria-labelledby={local['aria-labelledby']} {...others}/>
+      <CommandPaletteClearTrigger/>
+    </CommandPaletteControl>;
+}
+function CommandPaletteClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'children',
+        'onClick',
+        'onPointerDown',
+        'aria-label',
+        'aria-labelledby'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Combobox.Context>
+      {(combobox)=><Combobox.ClearTrigger asChild={local.asChild} data-slot="command-palette-clear-trigger" hidden={0 === combobox().inputValue.length} aria-label={local['aria-label'] ?? (!local.asChild && null == local.children && null == local['aria-labelledby'] ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0)} aria-labelledby={local['aria-labelledby']} class={clsx(CloseButton_module.root, CommandPalette_module.clearTrigger, 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}>
+          {resolvedChildren() ?? <CloseIcon/>}
+        </Combobox.ClearTrigger>}
+    </Combobox.Context>;
+}
+function CommandPaletteList(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children'
+    ]);
+    return <Combobox.Content data-slot="command-palette-list" class={clsx(CommandPalette_module.list, local.class)} {...others}>
+      <ScrollArea data-slot="command-palette-scroll-area" class={CommandPalette_module.scrollArea}>
+        <ScrollArea.Viewport data-slot="command-palette-scroll-viewport" class={CommandPalette_module.scrollViewport}>
+          <ScrollArea.Content data-slot="command-palette-scroll-content" class={CommandPalette_module.scrollContent}>
+            {local.children}
+          </ScrollArea.Content>
+        </ScrollArea.Viewport>
+      </ScrollArea>
+    </Combobox.Content>;
+}
+function CommandPaletteEmpty(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Empty data-slot="command-palette-empty" class={clsx(CommandPalette_module.empty, local.class)} {...others}/>;
+}
+function CommandPaletteItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.ItemGroup data-slot="command-palette-item-group" class={clsx(CommandPalette_module.itemGroup, local.class)} {...others}/>;
+}
+function CommandPaletteItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.ItemGroupLabel data-slot="command-palette-item-group-label" class={clsx(CommandPalette_module.itemGroupLabel, local.class)} {...others}/>;
+}
+function CommandPaletteItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Item data-slot="command-palette-item" class={clsx(CommandPalette_module.item, local.class)} {...others}/>;
+}
+function CommandPaletteItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.ItemText data-slot="command-palette-item-text" class={clsx(CommandPalette_module.itemText, local.class)} {...others}/>;
+}
+function CommandPaletteItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Combobox.ItemIndicator data-slot="command-palette-item-indicator" class={clsx(CommandPalette_module.itemIndicator, local.class)} {...others}>
+      {resolvedChildren() ?? <CheckIcon/>}
+    </Combobox.ItemIndicator>;
+}
+function CommandPaletteItemIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="command-palette-item-icon" class={clsx(CommandPalette_module.itemIcon, local.class)} {...others}/>;
+}
+function CommandPaletteItemLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="command-palette-item-label" class={clsx(CommandPalette_module.itemLabel, local.class)} {...others}/>;
+}
+function CommandPaletteItemDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="command-palette-item-description" class={clsx(CommandPalette_module.itemDescription, local.class)} {...others}/>;
+}
+function CommandPaletteItemMeta(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="command-palette-item-meta" class={clsx(CommandPalette_module.itemMeta, local.class)} {...others}/>;
+}
+function CommandPaletteSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div role="separator" data-slot="command-palette-separator" class={clsx(CommandPalette_module.separator, local.class)} {...others}/>;
+}
+function CommandPaletteFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="command-palette-footer" class={clsx(CommandPalette_module.footer, local.class)} {...others}/>;
+}
+function CommandPaletteKbd(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Kbd.Root data-slot="command-palette-kbd" class={clsx(CommandPalette_module.kbd, 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 };

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

@@ -0,0 +1,41 @@
+import "./CommandPalette_module.css";
+const CommandPalette_module = {
+    trigger: "trigger-A2LbwA",
+    backdrop: "backdrop-Y8_IJU",
+    "command-palette-backdrop-in": "command-palette-backdrop-in-Ek7l_5",
+    commandPaletteBackdropIn: "command-palette-backdrop-in-Ek7l_5",
+    "command-palette-backdrop-out": "command-palette-backdrop-out-VddYcZ",
+    commandPaletteBackdropOut: "command-palette-backdrop-out-VddYcZ",
+    positioner: "positioner-zclaSi",
+    content: "content-EVNfnh",
+    "command-palette-content-in": "command-palette-content-in-H3MDBP",
+    commandPaletteContentIn: "command-palette-content-in-H3MDBP",
+    "command-palette-content-out": "command-palette-content-out-DB_hNm",
+    commandPaletteContentOut: "command-palette-content-out-DB_hNm",
+    header: "header-DzsYPc",
+    title: "title-_2PBZ4",
+    description: "description-iLzHFD",
+    clearTrigger: "clearTrigger-n6fuk6",
+    body: "body-rUeEOS",
+    combobox: "combobox-d2AD5U",
+    control: "control-CmJJhf",
+    input: "input-drywue",
+    empty: "empty-h08cM3",
+    list: "list-SIDFoj",
+    scrollArea: "scrollArea-ncZoUD",
+    scrollViewport: "scrollViewport-Fh34Bl",
+    scrollContent: "scrollContent-Xew5ld",
+    itemGroup: "itemGroup-glHNMl",
+    itemGroupLabel: "itemGroupLabel-JWv82S",
+    item: "item-UA3NPh",
+    itemIcon: "itemIcon-EO6ViN",
+    itemIndicator: "itemIndicator-nhPwW2",
+    itemText: "itemText-GJOzaT",
+    itemLabel: "itemLabel-moAIzY",
+    itemDescription: "itemDescription-V6o1s7",
+    itemMeta: "itemMeta-iyRBoc",
+    separator: "separator-TPz3wl",
+    footer: "footer-_H5dy8",
+    kbd: "kbd-cxY4sj"
+};
+export default CommandPalette_module;

package/dist/components/command-palette/CommandPalette.module.jsx

@@ -0,0 +1,41 @@
+import "./CommandPalette_module.css";
+const CommandPalette_module = {
+    trigger: "trigger-A2LbwA",
+    backdrop: "backdrop-Y8_IJU",
+    "command-palette-backdrop-in": "command-palette-backdrop-in-Ek7l_5",
+    commandPaletteBackdropIn: "command-palette-backdrop-in-Ek7l_5",
+    "command-palette-backdrop-out": "command-palette-backdrop-out-VddYcZ",
+    commandPaletteBackdropOut: "command-palette-backdrop-out-VddYcZ",
+    positioner: "positioner-zclaSi",
+    content: "content-EVNfnh",
+    "command-palette-content-in": "command-palette-content-in-H3MDBP",
+    commandPaletteContentIn: "command-palette-content-in-H3MDBP",
+    "command-palette-content-out": "command-palette-content-out-DB_hNm",
+    commandPaletteContentOut: "command-palette-content-out-DB_hNm",
+    header: "header-DzsYPc",
+    title: "title-_2PBZ4",
+    description: "description-iLzHFD",
+    clearTrigger: "clearTrigger-n6fuk6",
+    body: "body-rUeEOS",
+    combobox: "combobox-d2AD5U",
+    control: "control-CmJJhf",
+    input: "input-drywue",
+    empty: "empty-h08cM3",
+    list: "list-SIDFoj",
+    scrollArea: "scrollArea-ncZoUD",
+    scrollViewport: "scrollViewport-Fh34Bl",
+    scrollContent: "scrollContent-Xew5ld",
+    itemGroup: "itemGroup-glHNMl",
+    itemGroupLabel: "itemGroupLabel-JWv82S",
+    item: "item-UA3NPh",
+    itemIcon: "itemIcon-EO6ViN",
+    itemIndicator: "itemIndicator-nhPwW2",
+    itemText: "itemText-GJOzaT",
+    itemLabel: "itemLabel-moAIzY",
+    itemDescription: "itemDescription-V6o1s7",
+    itemMeta: "itemMeta-iyRBoc",
+    separator: "separator-TPz3wl",
+    footer: "footer-_H5dy8",
+    kbd: "kbd-cxY4sj"
+};
+export default CommandPalette_module;