@moduix/react 1.1.0

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

@@ -0,0 +1,492 @@
+@layer ui.components {
+  .v74_Gq_trigger {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--command-palette-trigger-gap, var(--spacing-2));
+    min-height: var(--command-palette-trigger-height, var(--size-lg));
+    padding: var(--command-palette-trigger-padding-y, .5rem)
+      var(--command-palette-trigger-padding-x, .875rem);
+    border: var(--command-palette-trigger-border-width, var(--border-width-sm)) solid
+      var(--command-palette-trigger-border-color, var(--color-border));
+    border-radius: var(--command-palette-trigger-radius, var(--radius-md));
+    background-color: var(--command-palette-trigger-bg, var(--color-background));
+    color: var(--command-palette-trigger-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--command-palette-trigger-font-size, var(--text-md));
+    line-height: var(--command-palette-trigger-line-height, var(--line-height-text-md));
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default);
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--command-palette-trigger-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--command-palette-focus-ring-width, var(--border-width-sm)) solid
+        var(--command-palette-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--command-palette-focus-ring-width, var(--border-width-sm)) * -1);
+    }
+  }
+
+  .v74_Gq_backdrop {
+    z-index: var(--z-backdrop);
+    background-color: var(--command-palette-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--command-palette-backdrop-blur, 4px)));
+    position: fixed;
+    inset: 0;
+
+    &[data-state="open"] {
+      animation: v74_Gq_command-palette-backdrop-in
+        var(--command-palette-backdrop-transition, var(--transition-default));
+    }
+
+    &[data-state="closed"] {
+      animation: v74_Gq_command-palette-backdrop-out
+        var(--command-palette-backdrop-transition, var(--transition-default));
+      animation-fill-mode: forwards;
+    }
+  }
+
+  .v74_Gq_positioner {
+    box-sizing: border-box;
+    z-index: var(--z-modal);
+    overscroll-behavior: contain;
+    padding: var(--command-palette-positioner-padding, 10dvh var(--spacing-4) var(--spacing-4));
+    place-items: start center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .v74_Gq_content {
+    --command-palette-close-icon-size-effective: var(--command-palette-close-icon-size, var(--command-palette-clear-size, var(--size-sm)));
+    --command-palette-close-offset-effective: var(--command-palette-close-offset, var(--spacing-3));
+    --command-palette-header-padding-inline-end-effective: var(--command-palette-header-padding-inline-end, calc(var(--command-palette-header-padding-x, var(--spacing-4)) +
+          var(--command-palette-close-icon-size-effective) +
+          var(--command-palette-close-offset-effective)));
+    box-sizing: border-box;
+    width: min(var(--command-palette-width, 37.5rem),
+      var(--command-palette-max-width, calc(100vw - var(--spacing-8, 2rem))));
+    max-height: min(var(--command-palette-max-height, 34rem), calc(100dvh - 5rem));
+    border: var(--command-palette-border-width, var(--border-width-sm)) solid
+      var(--command-palette-border-color, color-mix(in oklab, var(--color-border) 84%, transparent));
+    border-radius: var(--command-palette-radius, var(--radius-lg));
+    background: linear-gradient(180deg,
+      var(--command-palette-top-bg, color-mix(in oklab, var(--color-popover) 96%, white 4%)),
+      var(--command-palette-bg, var(--color-popover)) 7rem);
+    color: var(--command-palette-color, var(--color-popover-foreground));
+    box-shadow: var(--command-palette-shadow, var(--shadow-lg));
+    transform-origin: top;
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    &[data-state="open"] {
+      animation: v74_Gq_command-palette-content-in
+        var(--command-palette-transition, var(--transition-default));
+    }
+
+    &[data-state="closed"] {
+      animation: v74_Gq_command-palette-content-out
+        var(--command-palette-transition, var(--transition-default));
+      animation-fill-mode: forwards;
+    }
+  }
+
+  .v74_Gq_header {
+    gap: var(--command-palette-header-gap, var(--spacing-1));
+    padding: var(--command-palette-header-padding-y, var(--spacing-4))
+      var(--command-palette-header-padding-x, var(--spacing-4)) 0;
+    padding-inline-end: var(--command-palette-header-padding-inline-end-effective);
+    display: grid;
+  }
+
+  .v74_Gq_title {
+    color: var(--command-palette-title-color, var(--command-palette-color, var(--color-popover-foreground)));
+    font-size: var(--command-palette-title-font-size, var(--text-md));
+    font-weight: var(--command-palette-title-font-weight, var(--weight-semibold));
+    line-height: var(--command-palette-title-line-height, var(--line-height-text-md));
+    margin: 0;
+  }
+
+  .v74_Gq_description {
+    color: var(--command-palette-description-color, var(--color-muted-foreground));
+    font-size: var(--command-palette-description-font-size, var(--text-sm));
+    line-height: var(--command-palette-description-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+
+  .v74_Gq_closeTrigger, .v74_Gq_clearTrigger {
+    box-sizing: border-box;
+    width: var(--command-palette-clear-size, var(--size-sm));
+    height: var(--command-palette-clear-size, var(--size-sm));
+    border-radius: var(--command-palette-clear-radius, var(--radius-md));
+    color: var(--command-palette-muted-color, var(--color-muted-foreground));
+    cursor: pointer;
+    transition: background-color var(--transition-default),
+      color var(--transition-default);
+    background: none;
+    border: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--command-palette-clear-bg-hover, var(--color-accent));
+        color: var(--command-palette-color, var(--color-popover-foreground));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--command-palette-focus-ring-width, var(--border-width-sm)) solid
+        var(--command-palette-focus-ring-color, var(--color-ring));
+      outline-offset: var(--command-palette-focus-ring-offset, var(--border-width-sm));
+    }
+  }
+
+  .v74_Gq_closeTrigger {
+    top: var(--command-palette-close-offset-effective);
+    right: var(--command-palette-close-offset-effective);
+    z-index: 1;
+    position: absolute;
+  }
+
+  .v74_Gq_closeIcon {
+    --close-button-size: var(--command-palette-close-icon-size-effective);
+    --close-button-radius: var(--command-palette-close-icon-radius, var(--command-palette-clear-radius, var(--radius-md)));
+    --close-button-icon-size: var(--command-palette-close-icon-glyph-size, var(--command-palette-icon-size, 1rem));
+    --close-button-bg: var(--command-palette-close-icon-bg, transparent);
+    --close-button-bg-hover: var(--command-palette-clear-bg-hover, var(--color-accent));
+    --close-button-color: var(--command-palette-close-icon-color, var(--command-palette-muted-color, var(--color-muted-foreground)));
+    --close-button-color-hover: var(--command-palette-color, var(--color-popover-foreground));
+    --close-button-focus-ring-color: var(--command-palette-focus-ring-color, var(--color-ring));
+    top: var(--command-palette-close-offset-effective);
+    right: var(--command-palette-close-offset-effective);
+    z-index: 1;
+    position: absolute;
+  }
+
+  .v74_Gq_body {
+    flex-direction: column;
+    flex: auto;
+    min-height: 0;
+    display: flex;
+  }
+
+  .v74_Gq_iconSvg {
+    width: var(--command-palette-icon-size, 1rem);
+    height: var(--command-palette-icon-size, 1rem);
+  }
+
+  .v74_Gq_combobox {
+    flex-direction: column;
+    flex: auto;
+    min-height: 0;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .v74_Gq_control {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--command-palette-input-gap, var(--spacing-2));
+    min-height: var(--command-palette-input-height, 4rem);
+    padding: var(--command-palette-control-padding-y, var(--spacing-3))
+      var(--command-palette-control-padding-x, var(--spacing-4));
+    border-bottom: var(--command-palette-divider-width, var(--border-width-sm)) solid
+      var(--command-palette-divider-color, var(--color-border));
+    flex: none;
+    display: flex;
+    position: relative;
+  }
+
+  .v74_Gq_input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: var(--command-palette-input-control-height, var(--size-md));
+    color: inherit;
+    font: inherit;
+    font-size: var(--command-palette-input-font-size, var(--text-lg));
+    line-height: var(--command-palette-input-line-height, var(--line-height-text-lg));
+    background: none;
+    border: 0;
+    outline: 0;
+    margin: 0;
+    padding: 0;
+
+    &::placeholder {
+      color: var(--command-palette-input-placeholder-color, var(--color-muted-foreground));
+    }
+
+    &[data-invalid] {
+      color: var(--color-destructive);
+    }
+  }
+
+  .v74_Gq_empty {
+    margin: 0;
+    padding: 0;
+
+    &:not(:empty) {
+      padding: var(--command-palette-empty-padding-y, .75rem)
+        var(--command-palette-empty-padding-x, var(--spacing-4));
+      color: var(--command-palette-muted-color, var(--color-muted-foreground));
+      font-size: var(--command-palette-empty-font-size, var(--text-sm));
+      line-height: var(--command-palette-empty-line-height, var(--line-height-text-sm));
+    }
+  }
+
+  .v74_Gq_list {
+    box-sizing: border-box;
+    outline: 0;
+    flex: auto;
+    min-height: 0;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .v74_Gq_scrollArea {
+    --scroll-area-radius: 0;
+    --scroll-area-scrollbar-margin: var(--command-palette-scrollbar-margin, var(--spacing-1));
+    --scroll-area-scrollbar-size: var(--command-palette-scrollbar-size, .375rem);
+    --scroll-area-thumb-bg: var(--command-palette-scrollbar-thumb-bg, var(--color-border));
+    --scroll-area-content-padding: var(--command-palette-list-padding-y, var(--spacing-2))
+      calc(var(--command-palette-list-padding-x, var(--spacing-2)) +
+          var(--scroll-area-scrollbar-size) + var(--scroll-area-scrollbar-margin))
+      var(--command-palette-list-padding-y, var(--spacing-2))
+      var(--command-palette-list-padding-x, var(--spacing-2));
+    --scroll-area-height: auto;
+    width: 100%;
+    min-height: 0;
+    color: inherit;
+    flex: auto;
+  }
+
+  .v74_Gq_scrollViewport {
+    scroll-padding-block: var(--command-palette-list-scroll-padding-y, var(--spacing-2));
+  }
+
+  .v74_Gq_scrollContent {
+    min-height: 100%;
+
+    .v74_Gq_list[data-empty] & {
+      padding: 0;
+    }
+  }
+
+  .v74_Gq_scrollbar {
+    --scroll-area-scrollbar-bg: transparent;
+  }
+
+  .v74_Gq_itemGroup {
+    gap: var(--command-palette-group-gap, var(--spacing-1));
+    display: grid;
+
+    &:not(:last-child) {
+      padding-bottom: var(--command-palette-group-padding-bottom, var(--spacing-2));
+    }
+  }
+
+  .v74_Gq_itemGroupLabel {
+    z-index: 1;
+    padding: var(--command-palette-group-label-padding-y, var(--spacing-1))
+      var(--command-palette-group-label-padding-x, var(--spacing-3));
+    background-color: var(--command-palette-bg, var(--color-popover));
+    color: var(--command-palette-muted-color, var(--color-muted-foreground));
+    font-size: var(--command-palette-group-label-font-size, var(--text-xs));
+    font-weight: var(--command-palette-group-label-font-weight, var(--weight-semibold));
+    line-height: var(--command-palette-group-label-line-height, var(--line-height-text-xs));
+    margin: 0;
+    display: block;
+    position: sticky;
+    top: 0;
+  }
+
+  .v74_Gq_item {
+    box-sizing: border-box;
+    z-index: 0;
+    align-items: center;
+    gap: var(--command-palette-item-gap, var(--spacing-3));
+    min-height: var(--command-palette-item-min-height, 3rem);
+    padding: var(--command-palette-item-padding-y, var(--spacing-2))
+      var(--command-palette-item-padding-x, var(--spacing-3));
+    border-radius: var(--command-palette-item-radius, var(--radius-md));
+    color: var(--command-palette-item-color, var(--command-palette-color, var(--color-foreground)));
+    font: inherit;
+    font-size: var(--command-palette-item-font-size, var(--text-sm));
+    line-height: var(--command-palette-item-line-height, var(--line-height-text-sm));
+    cursor: default;
+    user-select: none;
+    outline: 0;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    display: grid;
+    position: relative;
+
+    &[data-highlighted] {
+      color: var(--command-palette-highlight-color, var(--color-foreground));
+
+      &:before {
+        content: "";
+        z-index: -1;
+        border-radius: inherit;
+        background-color: var(--command-palette-highlight-bg, var(--color-accent));
+        position: absolute;
+        inset: 0;
+      }
+    }
+
+    &[data-state="checked"] {
+      color: var(--command-palette-selected-color, var(--command-palette-highlight-color, inherit));
+    }
+
+    &[data-disabled] {
+      opacity: var(--opacity-disabled);
+      pointer-events: none;
+    }
+  }
+
+  .v74_Gq_itemIcon, .v74_Gq_itemIndicator {
+    width: var(--command-palette-item-icon-box-size, 2rem);
+    height: var(--command-palette-item-icon-box-size, 2rem);
+    border: var(--command-palette-item-icon-border-width, var(--border-width-sm)) solid
+      var(--command-palette-item-icon-border-color, var(--color-border));
+    border-radius: var(--command-palette-item-icon-radius, var(--radius-md));
+    background-color: var(--command-palette-item-icon-bg, var(--color-muted));
+    color: var(--command-palette-item-icon-color, var(--color-muted-foreground));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--command-palette-item-icon-size, 1rem);
+      height: var(--command-palette-item-icon-size, 1rem);
+    }
+  }
+
+  .v74_Gq_itemIndicator {
+    background-color: #0000;
+    border-color: #0000;
+    justify-self: end;
+
+    & > svg {
+      width: var(--command-palette-item-icon-size, 1rem);
+      height: var(--command-palette-item-icon-size, 1rem);
+    }
+  }
+
+  .v74_Gq_itemText {
+    gap: var(--command-palette-item-text-gap, var(--spacing-1));
+    min-width: 0;
+    display: grid;
+
+    & > .v74_Gq_itemLabel, & > .v74_Gq_itemDescription {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+      overflow: hidden;
+    }
+  }
+
+  .v74_Gq_itemLabel {
+    font-weight: var(--command-palette-item-label-font-weight, var(--weight-medium));
+  }
+
+  .v74_Gq_itemDescription {
+    color: var(--command-palette-muted-color, var(--color-muted-foreground));
+    font-size: var(--command-palette-item-description-font-size, var(--text-xs));
+    line-height: var(--command-palette-item-description-line-height, var(--line-height-text-xs));
+  }
+
+  .v74_Gq_itemMeta {
+    color: var(--command-palette-muted-color, var(--color-muted-foreground));
+    font-size: var(--command-palette-item-meta-font-size, var(--text-xs));
+    line-height: var(--command-palette-item-meta-line-height, var(--line-height-text-xs));
+    white-space: nowrap;
+    justify-self: end;
+  }
+
+  .v74_Gq_separator {
+    height: var(--command-palette-divider-width, var(--border-width-sm));
+    margin: var(--command-palette-separator-margin-y, var(--spacing-2))
+      var(--command-palette-separator-margin-x, var(--spacing-2));
+    background-color: var(--command-palette-divider-color, var(--color-border));
+  }
+
+  .v74_Gq_footer {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--command-palette-footer-gap, var(--spacing-3));
+    padding: var(--command-palette-footer-padding-y, var(--spacing-2))
+      var(--command-palette-footer-padding-x, var(--spacing-4));
+    border-top: var(--command-palette-divider-width, var(--border-width-sm)) solid
+      var(--command-palette-divider-color, var(--color-border));
+    color: var(--command-palette-muted-color, var(--color-muted-foreground));
+    font-size: var(--command-palette-footer-font-size, var(--text-xs));
+    line-height: var(--command-palette-footer-line-height, var(--line-height-text-xs));
+    flex: none;
+    display: flex;
+  }
+
+  .v74_Gq_kbd {
+    --kbd-bg: var(--command-palette-kbd-bg, var(--color-muted));
+    --kbd-border-color: var(--command-palette-kbd-border-color, var(--color-border));
+    --kbd-border-width: var(--command-palette-kbd-border-width, var(--border-width-sm));
+    --kbd-color: var(--command-palette-kbd-color, var(--color-muted-foreground));
+    --kbd-font-family: var(--command-palette-kbd-font-family, var(--font-mono));
+    --kbd-font-size: var(--command-palette-kbd-font-size, var(--text-xs));
+    --kbd-height: var(--command-palette-kbd-height, 1.25rem);
+    --kbd-line-height: var(--command-palette-kbd-line-height, 1rem);
+    --kbd-min-width: var(--command-palette-kbd-min-width, 1.25rem);
+    --kbd-padding-x: var(--command-palette-kbd-padding-x, var(--spacing-1));
+    --kbd-radius: var(--command-palette-kbd-radius, var(--radius-sm));
+  }
+
+  @keyframes v74_Gq_command-palette-backdrop-in {
+    from {
+      opacity: var(--command-palette-backdrop-starting-opacity, 0);
+      backdrop-filter: var(--command-palette-backdrop-starting-blur, none);
+    }
+  }
+
+  @keyframes v74_Gq_command-palette-backdrop-out {
+    to {
+      opacity: var(--command-palette-backdrop-ending-opacity, 0);
+      backdrop-filter: var(--command-palette-backdrop-ending-blur, none);
+    }
+  }
+
+  @keyframes v74_Gq_command-palette-content-in {
+    from {
+      opacity: var(--command-palette-content-starting-opacity, 0);
+      translate: var(--command-palette-content-starting-translate-x, 0)
+        var(--command-palette-content-starting-translate-y, -.75rem);
+      scale: var(--command-palette-content-starting-scale, var(--scale-popup));
+    }
+  }
+
+  @keyframes v74_Gq_command-palette-content-out {
+    to {
+      opacity: var(--command-palette-content-ending-opacity, 0);
+      translate: var(--command-palette-content-ending-translate-x, 0)
+        var(--command-palette-content-ending-translate-y, -.75rem);
+      scale: var(--command-palette-content-ending-scale, var(--scale-popup));
+    }
+  }
+}

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

@@ -0,0 +1,71 @@
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { Kbd } from "../kbd/Kbd.js";
+import { ComponentProps } from "react";
+import { Combobox } from "@ark-ui/react/combobox";
+import { Dialog } from "@ark-ui/react/dialog";
+
+//#region src/components/command-palette/CommandPalette.d.ts
+type CommandPaletteRootProps = ComponentProps<typeof Dialog.Root> & {
+  shortcut?: false | string;
+  shortcutTarget?: Document | HTMLElement | null;
+} & OverlayPortalProps;
+type CommandPaletteRootProviderProps = ComponentProps<typeof Dialog.RootProvider> & OverlayPortalProps;
+declare function CommandPaletteRoot({
+  shortcut,
+  shortcutTarget,
+  lazyMount,
+  unmountOnExit,
+  immediate,
+  onExitComplete,
+  portalled,
+  present,
+  portalRef,
+  skipAnimationOnMount,
+  children,
+  ...props
+}: CommandPaletteRootProps): import("react").JSX.Element;
+declare function CommandPaletteRootProvider({
+  lazyMount,
+  portalled,
+  portalRef,
+  unmountOnExit,
+  ...props
+}: CommandPaletteRootProviderProps): import("react").JSX.Element;
+declare function CommandPaletteKbd({
+  className,
+  ...props
+}: ComponentProps<typeof Kbd.Root>): import("react").JSX.Element;
+declare const CommandPalette: typeof CommandPaletteRoot & {
+  Root: typeof CommandPaletteRoot;
+  RootProvider: typeof CommandPaletteRootProvider;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<Dialog.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Backdrop: import("react").ForwardRefExoticComponent<Omit<Dialog.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Positioner: import("react").ForwardRefExoticComponent<Omit<Dialog.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<Dialog.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<Dialog.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Combobox: Combobox.RootComponent;
+  Control: import("react").ForwardRefExoticComponent<Omit<Combobox.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Input: import("react").ForwardRefExoticComponent<Omit<Combobox.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  ClearTrigger: import("react").ForwardRefExoticComponent<Omit<Combobox.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  List: import("react").ForwardRefExoticComponent<Omit<Combobox.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Empty: import("react").ForwardRefExoticComponent<Omit<Combobox.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemGroup: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemText: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  ItemLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  ItemDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  ItemMeta: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Kbd: typeof CommandPaletteKbd;
+};
+//#endregion
+export { CommandPalette };