@moduix/react 1.1.0 → 2.0.0

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .v74_Gq_trigger {
+  ._4OfG0a_trigger {
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
@@ -36,7 +36,7 @@
     }
   }
 
-  .v74_Gq_backdrop {
+  ._4OfG0a_backdrop {
     z-index: var(--z-backdrop);
     background-color: var(--command-palette-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
     min-height: 100dvh;
@@ -45,18 +45,18 @@
     inset: 0;
 
     &[data-state="open"] {
-      animation: v74_Gq_command-palette-backdrop-in
+      animation: _4OfG0a_command-palette-backdrop-in
         var(--command-palette-backdrop-transition, var(--transition-default));
     }
 
     &[data-state="closed"] {
-      animation: v74_Gq_command-palette-backdrop-out
+      animation: _4OfG0a_command-palette-backdrop-out
         var(--command-palette-backdrop-transition, var(--transition-default));
       animation-fill-mode: forwards;
     }
   }
 
-  .v74_Gq_positioner {
+  ._4OfG0a_positioner {
     box-sizing: border-box;
     z-index: var(--z-modal);
     overscroll-behavior: contain;
@@ -68,12 +68,7 @@
     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)));
+  ._4OfG0a_content {
     box-sizing: border-box;
     width: min(var(--command-palette-width, 37.5rem),
       var(--command-palette-max-width, calc(100vw - var(--spacing-8, 2rem))));
@@ -90,30 +85,30 @@
     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));
+      animation: _4OfG0a_command-palette-content-in
+        var(--command-palette-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: v74_Gq_command-palette-content-out
-        var(--command-palette-transition, var(--transition-default));
+      animation: _4OfG0a_command-palette-content-out
+        var(--command-palette-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
       animation-fill-mode: forwards;
     }
   }
 
-  .v74_Gq_header {
+  ._4OfG0a_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 {
+  ._4OfG0a_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));
@@ -121,80 +116,39 @@
     margin: 0;
   }
 
-  .v74_Gq_description {
+  ._4OfG0a_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);
+  ._4OfG0a_clearTrigger {
+    --close-button-size: var(--command-palette-clear-size, var(--size-sm));
+    --close-button-radius: var(--command-palette-clear-radius, var(--radius-md));
+    --close-button-icon-size: var(--command-palette-icon-size, 1rem);
+    --close-button-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: 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-width: var(--command-palette-focus-ring-width, var(--border-width-sm));
     --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;
+    --close-button-focus-ring-offset: var(--command-palette-focus-ring-offset, var(--border-width-sm));
   }
 
-  .v74_Gq_body {
+  ._4OfG0a_body {
     flex-direction: column;
     flex: auto;
     min-height: 0;
     display: flex;
   }
 
-  .v74_Gq_iconSvg {
+  ._4OfG0a_iconSvg {
     width: var(--command-palette-icon-size, 1rem);
     height: var(--command-palette-icon-size, 1rem);
   }
 
-  .v74_Gq_combobox {
+  ._4OfG0a_combobox {
     flex-direction: column;
     flex: auto;
     min-height: 0;
@@ -202,29 +156,41 @@
     overflow: hidden;
   }
 
-  .v74_Gq_control {
+  ._4OfG0a_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));
+    min-height: var(--command-palette-input-height, var(--size-md));
+    margin: var(--command-palette-control-margin-y, var(--spacing-2))
+      var(--command-palette-control-margin-x, var(--spacing-4))
+      var(--command-palette-control-margin-bottom, var(--spacing-2));
+    border: var(--command-palette-input-border-width, var(--border-width-sm)) solid
+      var(--command-palette-input-border-color, var(--color-border));
+    border-radius: var(--command-palette-input-radius, var(--radius-md));
+    padding: var(--command-palette-control-padding-y, var(--spacing-1))
+      var(--command-palette-control-padding-x, var(--spacing-3));
+    background-color: var(--command-palette-input-bg, var(--color-background));
+    color: var(--command-palette-input-color, var(--color-foreground));
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default);
     flex: none;
     display: flex;
     position: relative;
+
+    &:has(._4OfG0a_input:is([data-invalid], [aria-invalid="true"])) {
+      border-color: var(--command-palette-input-border-color-invalid, var(--color-destructive));
+    }
   }
 
-  .v74_Gq_input {
+  ._4OfG0a_input {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--command-palette-input-control-height, var(--size-md));
+    height: var(--command-palette-input-control-height, var(--size-sm));
     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));
+    font-size: var(--command-palette-input-font-size, var(--text-sm));
+    line-height: var(--command-palette-input-line-height, var(--line-height-text-sm));
     background: none;
     border: 0;
     outline: 0;
@@ -240,7 +206,7 @@
     }
   }
 
-  .v74_Gq_empty {
+  ._4OfG0a_empty {
     margin: 0;
     padding: 0;
 
@@ -253,7 +219,7 @@
     }
   }
 
-  .v74_Gq_list {
+  ._4OfG0a_list {
     box-sizing: border-box;
     outline: 0;
     flex: auto;
@@ -262,7 +228,7 @@
     overflow: hidden;
   }
 
-  .v74_Gq_scrollArea {
+  ._4OfG0a_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);
@@ -279,23 +245,23 @@
     flex: auto;
   }
 
-  .v74_Gq_scrollViewport {
+  ._4OfG0a_scrollViewport {
     scroll-padding-block: var(--command-palette-list-scroll-padding-y, var(--spacing-2));
   }
 
-  .v74_Gq_scrollContent {
+  ._4OfG0a_scrollContent {
     min-height: 100%;
 
-    .v74_Gq_list[data-empty] & {
+    ._4OfG0a_list[data-empty] & {
       padding: 0;
     }
   }
 
-  .v74_Gq_scrollbar {
+  ._4OfG0a_scrollbar {
     --scroll-area-scrollbar-bg: transparent;
   }
 
-  .v74_Gq_itemGroup {
+  ._4OfG0a_itemGroup {
     gap: var(--command-palette-group-gap, var(--spacing-1));
     display: grid;
 
@@ -304,7 +270,7 @@
     }
   }
 
-  .v74_Gq_itemGroupLabel {
+  ._4OfG0a_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));
@@ -319,7 +285,7 @@
     top: 0;
   }
 
-  .v74_Gq_item {
+  ._4OfG0a_item {
     box-sizing: border-box;
     z-index: 0;
     align-items: center;
@@ -362,7 +328,7 @@
     }
   }
 
-  .v74_Gq_itemIcon, .v74_Gq_itemIndicator {
+  ._4OfG0a_itemIcon, ._4OfG0a_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
@@ -380,7 +346,7 @@
     }
   }
 
-  .v74_Gq_itemIndicator {
+  ._4OfG0a_itemIndicator {
     background-color: #0000;
     border-color: #0000;
     justify-self: end;
@@ -391,12 +357,12 @@
     }
   }
 
-  .v74_Gq_itemText {
+  ._4OfG0a_itemText {
     gap: var(--command-palette-item-text-gap, var(--spacing-1));
     min-width: 0;
     display: grid;
 
-    & > .v74_Gq_itemLabel, & > .v74_Gq_itemDescription {
+    & > ._4OfG0a_itemLabel, & > ._4OfG0a_itemDescription {
       text-overflow: ellipsis;
       white-space: nowrap;
       min-width: 0;
@@ -404,17 +370,17 @@
     }
   }
 
-  .v74_Gq_itemLabel {
+  ._4OfG0a_itemLabel {
     font-weight: var(--command-palette-item-label-font-weight, var(--weight-medium));
   }
 
-  .v74_Gq_itemDescription {
+  ._4OfG0a_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 {
+  ._4OfG0a_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));
@@ -422,14 +388,14 @@
     justify-self: end;
   }
 
-  .v74_Gq_separator {
+  ._4OfG0a_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 {
+  ._4OfG0a_footer {
     justify-content: space-between;
     align-items: center;
     gap: var(--command-palette-footer-gap, var(--spacing-3));
@@ -444,7 +410,7 @@
     display: flex;
   }
 
-  .v74_Gq_kbd {
+  ._4OfG0a_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));
@@ -458,35 +424,35 @@
     --kbd-radius: var(--command-palette-kbd-radius, var(--radius-sm));
   }
 
-  @keyframes v74_Gq_command-palette-backdrop-in {
+  @keyframes _4OfG0a_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 {
+  @keyframes _4OfG0a_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 {
+  @keyframes _4OfG0a_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));
+      opacity: var(--command-palette-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--command-palette-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--command-palette-content-starting-translate-y, var(--popup-motion-starting-translate-y, -.75rem));
+      scale: var(--command-palette-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
     }
   }
 
-  @keyframes v74_Gq_command-palette-content-out {
+  @keyframes _4OfG0a_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));
+      opacity: var(--command-palette-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--command-palette-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--command-palette-content-ending-translate-y, var(--popup-motion-ending-translate-y, -.75rem));
+      scale: var(--command-palette-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
     }
   }
 }

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

@@ -1,3 +1,4 @@
+import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { Kbd } from "../kbd/Kbd.js";
 import { ComponentProps } from "react";
@@ -10,6 +11,10 @@ type CommandPaletteRootProps = ComponentProps<typeof Dialog.Root> & {
   shortcutTarget?: Document | HTMLElement | null;
 } & OverlayPortalProps;
 type CommandPaletteRootProviderProps = ComponentProps<typeof Dialog.RootProvider> & OverlayPortalProps;
+type CommandPaletteSearchProps = ComponentProps<typeof Combobox.Input> & {
+  controlProps?: ComponentProps<typeof Combobox.Control>;
+  clearTriggerProps?: ComponentProps<typeof CloseButton.Root>;
+};
 declare function CommandPaletteRoot({
   shortcut,
   shortcutTarget,
@@ -42,16 +47,21 @@ declare const CommandPalette: typeof CommandPaletteRoot & {
   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>>;
+  Panel: 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>>;
+  Search: import("react").ForwardRefExoticComponent<Omit<CommandPaletteSearchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  ClearTrigger: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    'data-disabled'?: string;
+    'data-part'?: string;
+    'data-scope'?: string;
+    'data-slot'?: string;
+  } & 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>>;

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

@@ -1,20 +1,19 @@
-import { CheckIcon, CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import { Kbd } from "../kbd/Kbd.js";
 import { ScrollArea } from "../scroll-area/ScrollArea.js";
 import CommandPalette_module_default from "./CommandPalette.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef, useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@ark-ui/react/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
 //#region src/components/command-palette/CommandPalette.tsx
-const DEFAULT_CLOSE_TRIGGER_LABEL = "Close command palette";
-const DEFAULT_CLOSE_ICON_LABEL = "Close command palette";
 const DEFAULT_CLEAR_TRIGGER_LABEL = "Clear search";
+const DEFAULT_SEARCH_INPUT_LABEL = "Search commands";
 function isShortcutMatch(event, shortcut) {
 	const parts = shortcut.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
 	const [modifier, key] = parts;
@@ -38,9 +37,9 @@ function CommandPaletteRoot({ shortcut = false, shortcutTarget, lazyMount = true
 		if (!shortcut || shortcutTarget === null) return;
 		const target = shortcutTarget ?? document;
 		const handleKeyDown = (event) => {
-			if (event.defaultPrevented || event.isComposing || isEditableTarget(event.target) || !isShortcutMatch(event, shortcut)) return;
+			if (event.defaultPrevented || event.isComposing || !isShortcutMatch(event, shortcut) || !dialog.open && isEditableTarget(event.target)) return;
 			event.preventDefault();
-			dialog.setOpen(true);
+			dialog.setOpen(!dialog.open);
 		};
 		const eventListener = handleKeyDown;
 		target.addEventListener("keydown", eventListener);
@@ -109,6 +108,13 @@ const CommandPaletteContent = forwardRef(function CommandPaletteContent({ classN
 		...props
 	});
 });
+const CommandPalettePanel = forwardRef(function CommandPalettePanel({ children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CommandPaletteBackdrop, {}), /* @__PURE__ */ jsx(CommandPalettePositioner, { children: /* @__PURE__ */ jsx(CommandPaletteContent, {
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(CommandPaletteBody, { children })
+	}) })] });
+});
 const CommandPaletteTitle = forwardRef(function CommandPaletteTitle({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Dialog.Title, {
 		ref,
@@ -125,31 +131,6 @@ const CommandPaletteDescription = forwardRef(function CommandPaletteDescription(
 		...props
 	});
 });
-const CommandPaletteCloseTrigger = forwardRef(function CommandPaletteCloseTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
-		ref,
-		asChild,
-		"data-slot": "command-palette-close-trigger",
-		"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLOSE_TRIGGER_LABEL : void 0),
-		"aria-labelledby": ariaLabelledBy,
-		className: clsx(!asChild && CommandPalette_module_default.closeTrigger, normalizeClassName(className)),
-		...props,
-		children: children ?? (!asChild ? /* @__PURE__ */ jsx(CloseIcon, { className: CommandPalette_module_default.iconSvg }) : void 0)
-	});
-});
-const CommandPaletteCloseIcon = forwardRef(function CommandPaletteCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_ICON_LABEL, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
-		asChild: true,
-		...props,
-		children: /* @__PURE__ */ jsx(CloseButton.Root, {
-			ref,
-			"data-slot": "command-palette-close-icon",
-			"aria-label": ariaLabel,
-			className: clsx(CommandPalette_module_default.closeIcon, normalizeClassName(className)),
-			children
-		})
-	});
-});
 const CommandPaletteHeader = forwardRef(function CommandPaletteHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {
 		ref,
@@ -201,18 +182,48 @@ const CommandPaletteInput = forwardRef(function CommandPaletteInput({ className,
 		...props
 	});
 });
-const CommandPaletteClearTrigger = forwardRef(function CommandPaletteClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Combobox.ClearTrigger, {
-		ref,
-		asChild,
-		"data-slot": "command-palette-clear-trigger",
-		"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0),
-		"aria-labelledby": ariaLabelledBy,
-		className: clsx(!asChild && CommandPalette_module_default.clearTrigger, normalizeClassName(className)),
-		...props,
-		children: children ?? (!asChild ? /* @__PURE__ */ jsx(CloseIcon, { className: CommandPalette_module_default.iconSvg }) : void 0)
+const CommandPaletteSearch = forwardRef(function CommandPaletteSearch({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, clearTriggerProps, controlProps, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(CommandPaletteControl, {
+		...controlProps,
+		children: [/* @__PURE__ */ jsx(CommandPaletteInput, {
+			ref,
+			"aria-label": ariaLabel ?? (ariaLabelledBy == null ? DEFAULT_SEARCH_INPUT_LABEL : void 0),
+			"aria-labelledby": ariaLabelledBy,
+			...props
+		}), /* @__PURE__ */ jsx(CommandPaletteClearTrigger, { ...clearTriggerProps })]
 	});
 });
+const CommandPaletteClearTrigger = forwardRef(function CommandPaletteClearTrigger({ asChild, className, children, disabled, onClick, onPointerDown, tabIndex, "aria-controls": ariaControls, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.Context, { children: (combobox) => {
+		const inputProps = combobox.getInputProps();
+		const isInvalid = inputProps["aria-invalid"] === true || inputProps["aria-invalid"] === "true";
+		return /* @__PURE__ */ jsx(CloseButton.Root, {
+			ref,
+			asChild,
+			...props,
+			disabled: disabled ?? combobox.disabled,
+			"data-scope": "combobox",
+			"data-part": "clear-trigger",
+			"data-slot": "command-palette-clear-trigger",
+			"data-invalid": isInvalid ? "" : void 0,
+			hidden: combobox.inputValue.length === 0,
+			tabIndex: tabIndex ?? -1,
+			"aria-controls": ariaControls ?? inputProps.id,
+			"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0),
+			"aria-labelledby": ariaLabelledBy,
+			className: clsx(CommandPalette_module_default.clearTrigger, normalizeClassName(className)),
+			onPointerDown: (event) => {
+				onPointerDown?.(event);
+				if (event.button === 0) event.preventDefault();
+			},
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) combobox.setInputValue("");
+			},
+			children
+		});
+	} });
+});
 const CommandPaletteList = forwardRef(function CommandPaletteList({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Combobox.Content, {
 		ref,
@@ -354,15 +365,15 @@ const CommandPalette = Object.assign(CommandPaletteRoot, {
 	Backdrop: CommandPaletteBackdrop,
 	Positioner: CommandPalettePositioner,
 	Content: CommandPaletteContent,
+	Panel: CommandPalettePanel,
 	Title: CommandPaletteTitle,
 	Description: CommandPaletteDescription,
-	CloseTrigger: CommandPaletteCloseTrigger,
-	CloseIcon: CommandPaletteCloseIcon,
 	Header: CommandPaletteHeader,
 	Body: CommandPaletteBody,
 	Combobox: CommandPaletteCombobox,
 	Control: CommandPaletteControl,
 	Input: CommandPaletteInput,
+	Search: CommandPaletteSearch,
 	ClearTrigger: CommandPaletteClearTrigger,
 	List: CommandPaletteList,
 	Empty: CommandPaletteEmpty,