moduix 0.11.0 → 0.11.2

package/dist/components/CommandPalette/CommandPalette.css

@@ -0,0 +1,375 @@
+@layer ui.components {
+  .CtKZ6G_close {
+    box-sizing: border-box;
+    color: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .CtKZ6G_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);
+    }
+  }
+
+  .CtKZ6G_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)));
+    transition: opacity var(--command-palette-backdrop-transition, var(--transition-default)),
+      backdrop-filter var(--command-palette-backdrop-transition, var(--transition-default));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  .CtKZ6G_viewport {
+    box-sizing: border-box;
+    z-index: var(--z-modal);
+    overscroll-behavior: contain;
+    padding: var(--command-palette-viewport-padding, 10dvh var(--spacing-4) var(--spacing-4));
+    place-items: start center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+    overflow-y: auto;
+  }
+
+  .CtKZ6G_viewportNonModal {
+    pointer-events: none;
+  }
+
+  .CtKZ6G_popup {
+    box-sizing: border-box;
+    width: min(var(--command-palette-width, 37.5rem),
+      var(--command-palette-max-width, calc(100vw - var(--spacing-8, 2rem))),
+      var(--available-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);
+    pointer-events: auto;
+    color: var(--command-palette-color, var(--color-popover-foreground));
+    box-shadow: var(--command-palette-shadow, var(--shadow-lg));
+    transform-origin: top;
+    transition: opacity var(--command-palette-transition, var(--transition-default)),
+      transform var(--command-palette-transition, var(--transition-default)),
+      translate var(--command-palette-transition, var(--transition-default));
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      translate: 0 -.75rem;
+      transform: scale(var(--command-palette-scale, var(--scale-popup)));
+    }
+  }
+
+  .CtKZ6G_inputWrap {
+    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-input-wrap-padding-y, var(--spacing-3))
+      var(--command-palette-input-wrap-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));
+    display: flex;
+    position: relative;
+  }
+
+  .CtKZ6G_input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: var(--command-palette-input-control-height, 2.25rem);
+    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));
+    }
+  }
+
+  .CtKZ6G_clear {
+    box-sizing: border-box;
+    width: var(--command-palette-clear-size, 1.75rem);
+    height: var(--command-palette-clear-size, 1.75rem);
+    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;
+
+    &: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));
+    }
+  }
+
+  .CtKZ6G_iconSvg {
+    width: var(--command-palette-icon-size, 1rem);
+    height: var(--command-palette-icon-size, 1rem);
+  }
+
+  .CtKZ6G_status {
+    margin: 0;
+    padding: 0;
+
+    &:not(:empty) {
+      padding: var(--command-palette-status-padding-y, .25rem)
+        var(--command-palette-status-padding-x, var(--spacing-4));
+      color: var(--command-palette-muted-color, var(--color-muted-foreground));
+      font-size: var(--command-palette-status-font-size, var(--text-xs));
+      line-height: var(--command-palette-status-line-height, var(--line-height-text-xs));
+    }
+  }
+
+  .CtKZ6G_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));
+    }
+  }
+
+  .CtKZ6G_list {
+    box-sizing: border-box;
+    overscroll-behavior: contain;
+    min-height: 0;
+    padding: var(--command-palette-list-padding-y, var(--spacing-2))
+      var(--command-palette-list-padding-x, var(--spacing-2));
+    scroll-padding-block: var(--command-palette-list-scroll-padding-y, var(--spacing-2));
+    outline: 0;
+    flex: auto;
+    overflow-y: auto;
+
+    &[data-empty] {
+      padding: 0;
+    }
+  }
+
+  .CtKZ6G_group {
+    gap: var(--command-palette-group-gap, .125rem);
+    display: grid;
+
+    &:not(:last-child) {
+      padding-bottom: var(--command-palette-group-padding-bottom, var(--spacing-2));
+    }
+  }
+
+  .CtKZ6G_groupLabel {
+    top: calc(var(--command-palette-list-padding-y, var(--spacing-2)) * -1);
+    z-index: 1;
+    padding: var(--command-palette-group-label-padding-y, .375rem)
+      var(--command-palette-group-label-padding-x, .75rem);
+    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;
+  }
+
+  .CtKZ6G_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, .5rem)
+      var(--command-palette-item-padding-x, .75rem);
+    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;
+    display: grid;
+    position: relative;
+
+    &[data-highlighted] {
+      color: var(--command-palette-highlight-color, var(--color-foreground));
+    }
+
+    &[data-highlighted]:before {
+      content: "";
+      z-index: -1;
+      border-radius: inherit;
+      background-color: var(--command-palette-highlight-bg, var(--color-accent));
+      position: absolute;
+      inset: 0;
+    }
+
+    &[data-disabled] {
+      opacity: var(--opacity-disabled);
+      pointer-events: none;
+    }
+  }
+
+  .CtKZ6G_itemIcon {
+    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);
+    }
+  }
+
+  .CtKZ6G_itemText {
+    gap: var(--command-palette-item-text-gap, .125rem);
+    min-width: 0;
+    display: grid;
+  }
+
+  .CtKZ6G_itemLabel, .CtKZ6G_itemDescription {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .CtKZ6G_itemLabel {
+    font-weight: var(--command-palette-item-label-font-weight, var(--weight-medium));
+  }
+
+  .CtKZ6G_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));
+  }
+
+  .CtKZ6G_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;
+  }
+
+  .CtKZ6G_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));
+  }
+
+  .CtKZ6G_footer {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--command-palette-footer-gap, var(--spacing-3));
+    padding: var(--command-palette-footer-padding-y, .625rem)
+      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));
+    display: flex;
+  }
+
+  .CtKZ6G_kbd {
+    box-sizing: border-box;
+    min-width: var(--command-palette-kbd-min-width, 1.25rem);
+    height: var(--command-palette-kbd-height, 1.25rem);
+    border: var(--command-palette-kbd-border-width, var(--border-width-sm)) solid
+      var(--command-palette-kbd-border-color, var(--color-border));
+    border-radius: var(--command-palette-kbd-radius, var(--radius-sm));
+    padding-inline: var(--command-palette-kbd-padding-x, .375rem);
+    background-color: var(--command-palette-kbd-bg, var(--color-muted));
+    color: var(--command-palette-kbd-color, var(--color-muted-foreground));
+    font-family: var(--command-palette-kbd-font-family, var(--font-mono));
+    font-size: var(--command-palette-kbd-font-size, .6875rem);
+    line-height: var(--command-palette-kbd-line-height, 1rem);
+    white-space: nowrap;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -1,45 +1,137 @@
-import { ComponentProps } from 'react';
-import { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete';
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
-declare const createCommandPaletteHandle: typeof DialogPrimitive.createHandle;
-declare function CommandPalette<Payload = unknown>({ modal, shortcut, shortcutTarget, handle, children, ...props }: DialogPrimitive.Root.Props<Payload> & {
-    shortcut?: false | string;
-    shortcutTarget?: Document | HTMLElement | null;
+import { ComponentProps } from "react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/components/CommandPalette/CommandPalette.d.ts
+declare const createCommandPaletteHandle: typeof Dialog.createHandle;
+declare function CommandPalette<Payload = unknown>({
+  modal,
+  shortcut,
+  shortcutTarget,
+  handle,
+  children,
+  ...props
+}: Dialog.Root.Props<Payload> & {
+  shortcut?: false | string;
+  shortcutTarget?: Document | HTMLElement | null;
 }): import("react").JSX.Element;
-declare function CommandPaletteTrigger({ className, render, ...props }: DialogPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function CommandPalettePortal(props: DialogPrimitive.Portal.Props): import("react").JSX.Element;
-declare function CommandPaletteBackdrop({ className, ...props }: DialogPrimitive.Backdrop.Props): import("react").JSX.Element;
-declare function CommandPaletteViewport({ className, ...props }: DialogPrimitive.Viewport.Props): import("react").JSX.Element;
-declare function CommandPalettePopup({ className, ...props }: DialogPrimitive.Popup.Props): import("react").JSX.Element;
-declare function CommandPaletteClose({ className, ...props }: DialogPrimitive.Close.Props): import("react").JSX.Element;
-declare function CommandPaletteContent<ItemValue = unknown>({ className, children, items, itemToStringValue, value, defaultValue, onValueChange, filter, filteredItems, limit, ...props }: DialogPrimitive.Popup.Props & {
-    items?: AutocompletePrimitive.Root.Props<ItemValue>['items'];
-    itemToStringValue?: AutocompletePrimitive.Root.Props<ItemValue>['itemToStringValue'];
-    value?: AutocompletePrimitive.Root.Props<ItemValue>['value'];
-    defaultValue?: AutocompletePrimitive.Root.Props<ItemValue>['defaultValue'];
-    onValueChange?: AutocompletePrimitive.Root.Props<ItemValue>['onValueChange'];
-    filter?: AutocompletePrimitive.Root.Props<ItemValue>['filter'];
-    filteredItems?: AutocompletePrimitive.Root.Props<ItemValue>['filteredItems'];
-    limit?: AutocompletePrimitive.Root.Props<ItemValue>['limit'];
+declare function CommandPaletteTrigger({
+  className,
+  render,
+  ...props
+}: Dialog.Trigger.Props): import("react").JSX.Element;
+declare function CommandPalettePortal(props: Dialog.Portal.Props): import("react").JSX.Element;
+declare function CommandPaletteBackdrop({
+  className,
+  ...props
+}: Dialog.Backdrop.Props): import("react").JSX.Element;
+declare function CommandPaletteViewport({
+  className,
+  ...props
+}: Dialog.Viewport.Props): import("react").JSX.Element;
+declare function CommandPalettePopup({
+  className,
+  ...props
+}: Dialog.Popup.Props): import("react").JSX.Element;
+declare function CommandPaletteClose({
+  className,
+  ...props
+}: Dialog.Close.Props): import("react").JSX.Element;
+declare function CommandPaletteContent<ItemValue = unknown>({
+  className,
+  children,
+  items,
+  itemToStringValue,
+  value,
+  defaultValue,
+  onValueChange,
+  filter,
+  filteredItems,
+  limit,
+  ...props
+}: Dialog.Popup.Props & {
+  items?: Autocomplete.Root.Props<ItemValue>['items'];
+  itemToStringValue?: Autocomplete.Root.Props<ItemValue>['itemToStringValue'];
+  value?: Autocomplete.Root.Props<ItemValue>['value'];
+  defaultValue?: Autocomplete.Root.Props<ItemValue>['defaultValue'];
+  onValueChange?: Autocomplete.Root.Props<ItemValue>['onValueChange'];
+  filter?: Autocomplete.Root.Props<ItemValue>['filter'];
+  filteredItems?: Autocomplete.Root.Props<ItemValue>['filteredItems'];
+  limit?: Autocomplete.Root.Props<ItemValue>['limit'];
 }): import("react").JSX.Element;
-declare function CommandPaletteInputWrap({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function CommandPaletteInput({ className, ...props }: AutocompletePrimitive.Input.Props): import("react").JSX.Element;
-declare function CommandPaletteClear({ className, children, ...props }: AutocompletePrimitive.Clear.Props): import("react").JSX.Element;
-declare function CommandPaletteStatus({ className, ...props }: AutocompletePrimitive.Status.Props): import("react").JSX.Element;
-declare function CommandPaletteEmpty({ className, ...props }: AutocompletePrimitive.Empty.Props): import("react").JSX.Element;
-declare function CommandPaletteList({ className, ...props }: AutocompletePrimitive.List.Props): import("react").JSX.Element;
-declare function CommandPaletteGroup({ className, ...props }: AutocompletePrimitive.Group.Props): import("react").JSX.Element;
-declare function CommandPaletteGroupLabel({ className, ...props }: AutocompletePrimitive.GroupLabel.Props): import("react").JSX.Element;
-declare function CommandPaletteCollection(props: AutocompletePrimitive.Collection.Props): import("react").JSX.Element;
-declare function CommandPaletteItem({ className, closeOnSelect, onClick, ...props }: AutocompletePrimitive.Item.Props & {
-    closeOnSelect?: boolean;
+declare function CommandPaletteInputWrap({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CommandPaletteInput({
+  className,
+  ...props
+}: Autocomplete.Input.Props): import("react").JSX.Element;
+declare function CommandPaletteClear({
+  className,
+  children,
+  ...props
+}: Autocomplete.Clear.Props): import("react").JSX.Element;
+declare function CommandPaletteStatus({
+  className,
+  ...props
+}: Autocomplete.Status.Props): import("react").JSX.Element;
+declare function CommandPaletteEmpty({
+  className,
+  ...props
+}: Autocomplete.Empty.Props): import("react").JSX.Element;
+declare function CommandPaletteList({
+  className,
+  ...props
+}: Autocomplete.List.Props): import("react").JSX.Element;
+declare function CommandPaletteGroup({
+  className,
+  ...props
+}: Autocomplete.Group.Props): import("react").JSX.Element;
+declare function CommandPaletteGroupLabel({
+  className,
+  ...props
+}: Autocomplete.GroupLabel.Props): import("react").JSX.Element;
+declare function CommandPaletteCollection(props: Autocomplete.Collection.Props): import("react").JSX.Element;
+declare function CommandPaletteItem({
+  className,
+  closeOnSelect,
+  onClick,
+  ...props
+}: Autocomplete.Item.Props & {
+  closeOnSelect?: boolean;
 }): import("react").JSX.Element;
-declare function CommandPaletteItemIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function CommandPaletteItemText({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function CommandPaletteItemLabel({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function CommandPaletteItemDescription({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function CommandPaletteItemMeta({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function CommandPaletteSeparator({ className, ...props }: AutocompletePrimitive.Separator.Props): import("react").JSX.Element;
-declare function CommandPaletteFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function CommandPaletteKbd({ className, ...props }: ComponentProps<'kbd'>): import("react").JSX.Element;
-export { CommandPalette, createCommandPaletteHandle, CommandPaletteTrigger, CommandPalettePortal, CommandPaletteBackdrop, CommandPaletteViewport, CommandPalettePopup, CommandPaletteClose, CommandPaletteContent, CommandPaletteInputWrap, CommandPaletteInput, CommandPaletteClear, CommandPaletteStatus, CommandPaletteEmpty, CommandPaletteList, CommandPaletteGroup, CommandPaletteGroupLabel, CommandPaletteCollection, CommandPaletteItem, CommandPaletteItemIcon, CommandPaletteItemText, CommandPaletteItemLabel, CommandPaletteItemDescription, CommandPaletteItemMeta, CommandPaletteSeparator, CommandPaletteFooter, CommandPaletteKbd, };
+declare function CommandPaletteItemIcon({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function CommandPaletteItemText({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function CommandPaletteItemLabel({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function CommandPaletteItemDescription({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function CommandPaletteItemMeta({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function CommandPaletteSeparator({
+  className,
+  ...props
+}: Autocomplete.Separator.Props): import("react").JSX.Element;
+declare function CommandPaletteFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CommandPaletteKbd({
+  className,
+  ...props
+}: ComponentProps<'kbd'>): import("react").JSX.Element;
+//#endregion
+export { CommandPalette, CommandPaletteBackdrop, CommandPaletteClear, CommandPaletteClose, CommandPaletteCollection, CommandPaletteContent, CommandPaletteEmpty, CommandPaletteFooter, CommandPaletteGroup, CommandPaletteGroupLabel, CommandPaletteInput, CommandPaletteInputWrap, CommandPaletteItem, CommandPaletteItemDescription, CommandPaletteItemIcon, CommandPaletteItemLabel, CommandPaletteItemMeta, CommandPaletteItemText, CommandPaletteKbd, CommandPaletteList, CommandPalettePopup, CommandPalettePortal, CommandPaletteSeparator, CommandPaletteStatus, CommandPaletteTrigger, CommandPaletteViewport, createCommandPaletteHandle };