@moduix/solid-tailwind 1.0.0

package/dist/components/combobox/Combobox.js

@@ -0,0 +1,353 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Combobox, useCombobox, useComboboxContext, useComboboxItemContext } from "@ark-ui/solid/combobox";
+import { ark } from "@ark-ui/solid/factory";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+const Combobox_ComboboxRoot = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Combobox.Root, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "combobox-root",
+                get ["class"] () {
+                    return cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class);
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+};
+const Combobox_ComboboxRootProvider = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Combobox.RootProvider, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "combobox-root-provider",
+                get ["class"] () {
+                    return cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class);
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+};
+function ComboboxLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Label, mergeProps({
+        "data-slot": "combobox-label",
+        get ["class"] () {
+            return cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', local.class);
+        }
+    }, others));
+}
+function ComboboxControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Control, mergeProps({
+        "data-slot": "combobox-control",
+        get ["class"] () {
+            return cn('group/combobox-control relative flex w-full min-w-0 items-center rounded-md border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out data-disabled:opacity-50 data-focus:border-ring data-focus:outline-ring data-invalid:border-destructive data-invalid:outline-destructive data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+function ComboboxInput(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Combobox.Input, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "combobox-input",
+        get ["class"] () {
+            return cn(!local.asChild && 'm-0 box-border h-control-md w-full min-w-0 rounded-[inherit] border-0 bg-transparent px-3.5 text-inherit outline-0 [font:inherit] group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:pe-[4.375rem] group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-11 group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-[4.375rem] placeholder:text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function ComboboxClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const triggerClass = cn('absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class);
+    if (local.asChild) return createComponent(Combobox.ClearTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get ["aria-label"] () {
+            return local['aria-label'];
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        "data-slot": "combobox-clear-trigger",
+        class: triggerClass
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+    return createComponent(Combobox.ClearTrigger, mergeProps({
+        asChild: (triggerProps)=>{
+            const resolvedProps = triggerProps();
+            return createComponent(CloseButton.Root, mergeProps(resolvedProps, {
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Clear selection' : void 0);
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }));
+        },
+        "data-slot": "combobox-clear-trigger",
+        class: triggerClass
+    }, others));
+}
+function ComboboxTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Combobox.Trigger, mergeProps({
+        "data-slot": "combobox-trigger",
+        get ["class"] () {
+            return cn('absolute end-2 top-1/2 m-0 box-border inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 [line-height:0] text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronUpDownIcon, {});
+        }
+    }));
+}
+function ComboboxPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Combobox.Positioner, mergeProps({
+                "data-slot": "combobox-positioner",
+                get ["class"] () {
+                    return cn('z-[var(--z-index)] outline-0', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function ComboboxContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Content, mergeProps({
+        "data-slot": "combobox-content",
+        get ["class"] () {
+            return cn('z-[calc(60+var(--layer-index,0))] box-border flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class);
+        }
+    }, others));
+}
+function ComboboxEmpty(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Empty, mergeProps({
+        "data-slot": "combobox-empty",
+        get ["class"] () {
+            return cn('px-4 py-1 text-sm text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function ComboboxStatus(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "combobox-status",
+        get ["class"] () {
+            return cn('px-4 py-1 text-sm text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function ComboboxList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.List, mergeProps({
+        "data-slot": "combobox-list",
+        get ["class"] () {
+            return cn('flex min-h-0 flex-col outline-0 data-empty:hidden', local.class);
+        }
+    }, others));
+}
+function ComboboxItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.ItemGroup, mergeProps({
+        "data-slot": "combobox-item-group",
+        get ["class"] () {
+            return cn('flex flex-col [&+&]:mt-2', local.class);
+        }
+    }, others));
+}
+function ComboboxItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.ItemGroupLabel, mergeProps({
+        "data-slot": "combobox-item-group-label",
+        get ["class"] () {
+            return cn('sticky -top-1 z-1 bg-popover px-2.5 py-1 text-xs font-normal text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function ComboboxItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Item, mergeProps({
+        "data-slot": "combobox-item",
+        get ["class"] () {
+            return cn('relative mx-1 box-border flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm border-0 bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=checked]:text-popover-foreground', local.class);
+        }
+    }, others));
+}
+function ComboboxItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.ItemText, mergeProps({
+        "data-slot": "combobox-item-text",
+        get ["class"] () {
+            return cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
+        }
+    }, others));
+}
+function ComboboxItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Combobox.ItemIndicator, mergeProps({
+        "data-slot": "combobox-item-indicator",
+        get ["class"] () {
+            return cn('inline-flex size-3 shrink-0 items-center justify-center [&>svg]:size-full', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function ComboboxOption(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'indicator'
+    ]);
+    return createComponent(ComboboxItem, mergeProps(others, {
+        get children () {
+            return [
+                createComponent(ComboboxItemText, {
+                    get children () {
+                        return local.children;
+                    }
+                }),
+                memo(()=>memo(()=>false !== local.indicator)() && createComponent(ComboboxItemIndicator, {
+                        get children () {
+                            return local.indicator;
+                        }
+                    }))
+            ];
+        }
+    }));
+}
+const Combobox_Combobox = Object.assign(Combobox_ComboboxRoot, {
+    Root: Combobox_ComboboxRoot,
+    RootProvider: Combobox_ComboboxRootProvider,
+    Label: ComboboxLabel,
+    Control: ComboboxControl,
+    Input: ComboboxInput,
+    ClearTrigger: ComboboxClearTrigger,
+    Trigger: ComboboxTrigger,
+    Positioner: ComboboxPositioner,
+    Content: ComboboxContent,
+    Empty: ComboboxEmpty,
+    Status: ComboboxStatus,
+    List: ComboboxList,
+    ItemGroup: ComboboxItemGroup,
+    ItemGroupLabel: ComboboxItemGroupLabel,
+    Item: ComboboxItem,
+    ItemText: ComboboxItemText,
+    ItemIndicator: ComboboxItemIndicator,
+    Option: ComboboxOption,
+    Context: Combobox.Context,
+    ItemContext: Combobox.ItemContext
+});
+export { Combobox_Combobox as Combobox, useCombobox, useComboboxContext, useComboboxItemContext };

package/dist/components/combobox/Combobox.jsx

@@ -0,0 +1,187 @@
+import { Combobox, useCombobox, useComboboxContext, useComboboxItemContext } from "@ark-ui/solid/combobox";
+import { ark } from "@ark-ui/solid/factory";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/Icons.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const Combobox_ComboboxRoot = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Combobox.Root asChild={local.asChild} data-slot="combobox-root" class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Combobox.Root>
+    </OverlayPortalProvider>;
+};
+const Combobox_ComboboxRootProvider = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Combobox.RootProvider asChild={local.asChild} data-slot="combobox-root-provider" class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Combobox.RootProvider>
+    </OverlayPortalProvider>;
+};
+function ComboboxLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Label data-slot="combobox-label" class={cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', local.class)} {...others}/>;
+}
+function ComboboxControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Control data-slot="combobox-control" class={cn('group/combobox-control relative flex w-full min-w-0 items-center rounded-md border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out data-disabled:opacity-50 data-focus:border-ring data-focus:outline-ring data-invalid:border-destructive data-invalid:outline-destructive data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function ComboboxInput(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Combobox.Input asChild={local.asChild} data-slot="combobox-input" class={cn(!local.asChild && 'm-0 box-border h-control-md w-full min-w-0 rounded-[inherit] border-0 bg-transparent px-3.5 text-inherit outline-0 [font:inherit] group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:pe-[4.375rem] group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-11 group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-[4.375rem] placeholder:text-muted-foreground', local.class)} {...others}/>;
+}
+function ComboboxClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const triggerClass = cn('absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class);
+    if (local.asChild) return <Combobox.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-slot="combobox-clear-trigger" class={triggerClass} {...others}>
+        {local.children}
+      </Combobox.ClearTrigger>;
+    return <Combobox.ClearTrigger asChild={(triggerProps)=>{
+        const resolvedProps = triggerProps();
+        return <CloseButton.Root {...resolvedProps} aria-label={local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Clear selection' : void 0)} aria-labelledby={local['aria-labelledby']}>
+            {resolvedChildren()}
+          </CloseButton.Root>;
+    }} data-slot="combobox-clear-trigger" class={triggerClass} {...others}/>;
+}
+function ComboboxTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Combobox.Trigger data-slot="combobox-trigger" class={cn('absolute end-2 top-1/2 m-0 box-border inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 [line-height:0] text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others}>
+      {resolvedChildren() ?? <ChevronUpDownIcon/>}
+    </Combobox.Trigger>;
+}
+function ComboboxPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Combobox.Positioner data-slot="combobox-positioner" class={cn('z-[var(--z-index)] outline-0', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function ComboboxContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Content data-slot="combobox-content" class={cn('z-[calc(60+var(--layer-index,0))] box-border flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others}/>;
+}
+function ComboboxEmpty(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Empty data-slot="combobox-empty" class={cn('px-4 py-1 text-sm text-muted-foreground', local.class)} {...others}/>;
+}
+function ComboboxStatus(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="combobox-status" class={cn('px-4 py-1 text-sm text-muted-foreground', local.class)} {...others}/>;
+}
+function ComboboxList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.List data-slot="combobox-list" class={cn('flex min-h-0 flex-col outline-0 data-empty:hidden', local.class)} {...others}/>;
+}
+function ComboboxItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.ItemGroup data-slot="combobox-item-group" class={cn('flex flex-col [&+&]:mt-2', local.class)} {...others}/>;
+}
+function ComboboxItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.ItemGroupLabel data-slot="combobox-item-group-label" class={cn('sticky -top-1 z-1 bg-popover px-2.5 py-1 text-xs font-normal text-muted-foreground', local.class)} {...others}/>;
+}
+function ComboboxItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Item data-slot="combobox-item" class={cn('relative mx-1 box-border flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm border-0 bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=checked]:text-popover-foreground', local.class)} {...others}/>;
+}
+function ComboboxItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.ItemText data-slot="combobox-item-text" class={cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+}
+function ComboboxItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Combobox.ItemIndicator data-slot="combobox-item-indicator" class={cn('inline-flex size-3 shrink-0 items-center justify-center [&>svg]:size-full', local.class)} {...others}>
+      {resolvedChildren() ?? <CheckIcon/>}
+    </Combobox.ItemIndicator>;
+}
+function ComboboxOption(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'indicator'
+    ]);
+    return <ComboboxItem {...others}>
+      <ComboboxItemText>{local.children}</ComboboxItemText>
+      {false !== local.indicator && <ComboboxItemIndicator>{local.indicator}</ComboboxItemIndicator>}
+    </ComboboxItem>;
+}
+const Combobox_Combobox = Object.assign(Combobox_ComboboxRoot, {
+    Root: Combobox_ComboboxRoot,
+    RootProvider: Combobox_ComboboxRootProvider,
+    Label: ComboboxLabel,
+    Control: ComboboxControl,
+    Input: ComboboxInput,
+    ClearTrigger: ComboboxClearTrigger,
+    Trigger: ComboboxTrigger,
+    Positioner: ComboboxPositioner,
+    Content: ComboboxContent,
+    Empty: ComboboxEmpty,
+    Status: ComboboxStatus,
+    List: ComboboxList,
+    ItemGroup: ComboboxItemGroup,
+    ItemGroupLabel: ComboboxItemGroupLabel,
+    Item: ComboboxItem,
+    ItemText: ComboboxItemText,
+    ItemIndicator: ComboboxItemIndicator,
+    Option: ComboboxOption,
+    Context: Combobox.Context,
+    ItemContext: Combobox.ItemContext
+});
+export { Combobox_Combobox as Combobox, useCombobox, useComboboxContext, useComboboxItemContext };

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

@@ -0,0 +1 @@
+export * from './Combobox.js';

package/dist/components/combobox/index.js

@@ -0,0 +1 @@
+export * from "./Combobox.js";

package/dist/components/combobox/index.jsx

@@ -0,0 +1 @@
+export * from "./Combobox.jsx";

package/dist/components/command-palette/CommandPalette.d.ts

@@ -0,0 +1,72 @@
+import { Combobox as ComboboxPrimitive, type ComboboxRootComponent } from '@ark-ui/solid/combobox';
+import { Dialog as DialogPrimitive } from '@ark-ui/solid/dialog';
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+import { Kbd } from '../kbd/index.js';
+type CommandPaletteRootProps = ComponentProps<typeof DialogPrimitive.Root> & {
+    shortcut?: false | string;
+} & OverlayPortalProps;
+type CommandPaletteRootProviderProps = ComponentProps<typeof DialogPrimitive.RootProvider> & OverlayPortalProps;
+declare function CommandPaletteRoot(props: CommandPaletteRootProps): import("solid-js").JSX.Element;
+declare function CommandPaletteRootProvider(props: CommandPaletteRootProviderProps): import("solid-js").JSX.Element;
+declare function CommandPaletteTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function CommandPaletteBackdrop(props: ComponentProps<typeof DialogPrimitive.Backdrop>): import("solid-js").JSX.Element;
+declare function CommandPalettePositioner(props: ComponentProps<typeof DialogPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function CommandPaletteContent(props: ComponentProps<typeof DialogPrimitive.Content>): import("solid-js").JSX.Element;
+declare function CommandPalettePanel(props: ComponentProps<typeof DialogPrimitive.Content>): import("solid-js").JSX.Element;
+declare function CommandPaletteTitle(props: ComponentProps<typeof DialogPrimitive.Title>): import("solid-js").JSX.Element;
+declare function CommandPaletteDescription(props: ComponentProps<typeof DialogPrimitive.Description>): import("solid-js").JSX.Element;
+declare function CommandPaletteHeader(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CommandPaletteBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CommandPaletteControl(props: ComponentProps<typeof ComboboxPrimitive.Control>): import("solid-js").JSX.Element;
+declare function CommandPaletteInput(props: ComponentProps<typeof ComboboxPrimitive.Input>): import("solid-js").JSX.Element;
+declare function CommandPaletteSearch(props: ComponentProps<typeof ComboboxPrimitive.Input>): import("solid-js").JSX.Element;
+declare function CommandPaletteClearTrigger(props: ComponentProps<typeof ComboboxPrimitive.ClearTrigger>): import("solid-js").JSX.Element;
+declare function CommandPaletteList(props: ComponentProps<typeof ComboboxPrimitive.Content>): import("solid-js").JSX.Element;
+declare function CommandPaletteEmpty(props: ComponentProps<typeof ComboboxPrimitive.Empty>): import("solid-js").JSX.Element;
+declare function CommandPaletteItemGroup(props: ComponentProps<typeof ComboboxPrimitive.ItemGroup>): import("solid-js").JSX.Element;
+declare function CommandPaletteItemGroupLabel(props: ComponentProps<typeof ComboboxPrimitive.ItemGroupLabel>): import("solid-js").JSX.Element;
+declare function CommandPaletteItem(props: ComponentProps<typeof ComboboxPrimitive.Item>): import("solid-js").JSX.Element;
+declare function CommandPaletteItemText(props: ComponentProps<typeof ComboboxPrimitive.ItemText>): import("solid-js").JSX.Element;
+declare function CommandPaletteItemIndicator(props: ComponentProps<typeof ComboboxPrimitive.ItemIndicator>): import("solid-js").JSX.Element;
+declare function CommandPaletteItemIcon(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare function CommandPaletteItemLabel(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare function CommandPaletteItemDescription(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare function CommandPaletteItemMeta(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare function CommandPaletteSeparator(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CommandPaletteFooter(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CommandPaletteKbd(props: ComponentProps<typeof Kbd.Root>): import("solid-js").JSX.Element;
+declare const CommandPalette: typeof CommandPaletteRoot & {
+    Root: typeof CommandPaletteRoot;
+    RootProvider: typeof CommandPaletteRootProvider;
+    Trigger: typeof CommandPaletteTrigger;
+    Backdrop: typeof CommandPaletteBackdrop;
+    Positioner: typeof CommandPalettePositioner;
+    Content: typeof CommandPaletteContent;
+    Panel: typeof CommandPalettePanel;
+    Title: typeof CommandPaletteTitle;
+    Description: typeof CommandPaletteDescription;
+    Header: typeof CommandPaletteHeader;
+    Body: typeof CommandPaletteBody;
+    Combobox: ComboboxRootComponent;
+    Control: typeof CommandPaletteControl;
+    Input: typeof CommandPaletteInput;
+    Search: typeof CommandPaletteSearch;
+    ClearTrigger: typeof CommandPaletteClearTrigger;
+    List: typeof CommandPaletteList;
+    Empty: typeof CommandPaletteEmpty;
+    ItemGroup: typeof CommandPaletteItemGroup;
+    ItemGroupLabel: typeof CommandPaletteItemGroupLabel;
+    Item: typeof CommandPaletteItem;
+    ItemText: typeof CommandPaletteItemText;
+    ItemIndicator: typeof CommandPaletteItemIndicator;
+    ItemIcon: typeof CommandPaletteItemIcon;
+    ItemLabel: typeof CommandPaletteItemLabel;
+    ItemDescription: typeof CommandPaletteItemDescription;
+    ItemMeta: typeof CommandPaletteItemMeta;
+    Separator: typeof CommandPaletteSeparator;
+    Footer: typeof CommandPaletteFooter;
+    Kbd: typeof CommandPaletteKbd;
+};
+export { CommandPalette };