@veiag/payload-cmdk 1.0.0

package/dist/components/SearchButton.scss

@@ -0,0 +1,133 @@
+/////////////////////////////
+// SEARCH BUTTON STYLES
+// Fake input button to open command menu
+/////////////////////////////
+
+@layer payload {
+  .search-button {
+    display: block;
+    width: 100%;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-align: left;
+
+    // Nav position - full width with margin
+    &--nav {
+      margin: 0 0 calc(var(--base) * 1);
+    }
+
+    // Actions position - fit content, no margin
+    &--actions {
+      width: fit-content;
+    }
+  }
+
+  .search-button__wrapper {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) * 0.5);
+    height: calc(var(--base) * 1.5);
+    padding: 0 calc(var(--base) * 0.5);
+    background: var(--theme-elevation-0);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-m);
+    transition: all 100ms cubic-bezier(0, 0.2, 0.2, 1);
+
+    &:hover {
+      background: var(--theme-elevation-50);
+      border-color: var(--theme-elevation-400);
+    }
+
+    &:active {
+      background: var(--theme-elevation-100);
+      border-color: var(--theme-elevation-500);
+    }
+  }
+
+  .search-button__icon {
+    width: calc(var(--base) * 0.8);
+    height: calc(var(--base) * 0.8);
+    flex-shrink: 0;
+    opacity: 0.5;
+    color: var(--theme-elevation-500);
+  }
+
+  .search-button__placeholder {
+    font-family: var(--font-body);
+    font-size: 0.923rem; // ~12px
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+  }
+
+  .search-button__shortcuts {
+    display: flex;
+    gap: calc(var(--base) * 0.25);
+    align-items: center;
+    margin-left: auto;
+
+    kbd {
+      padding: calc(var(--base) * 0.1) calc(var(--base) * 0.25);
+      font-family: var(--font-mono);
+      font-size: 0.923rem; // ~12px
+      background: var(--theme-elevation-100);
+      border: 1px solid var(--theme-elevation-200);
+      border-radius: var(--style-radius-s);
+      box-shadow: 0 1px 0 var(--theme-elevation-200);
+      color: var(--theme-elevation-600);
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      // Ensure icons are properly aligned and sized
+      svg {
+        width: 12px;
+        height: 12px;
+        display: block;
+      }
+    }
+  }
+
+  // Dark theme adjustments
+  html[data-theme='dark'] {
+    .search-button__wrapper {
+      background: var(--theme-elevation-50);
+      border-color: var(--theme-elevation-200);
+
+      &:hover {
+        background: var(--theme-elevation-100);
+        border-color: var(--theme-elevation-300);
+      }
+
+      &:active {
+        background: var(--theme-elevation-150);
+        border-color: var(--theme-elevation-400);
+      }
+    }
+
+    .search-button__shortcuts {
+      kbd {
+        background: var(--theme-elevation-150);
+        border-color: var(--theme-elevation-300);
+        box-shadow: 0 1px 0 var(--theme-elevation-300);
+      }
+    }
+  }
+
+  // Responsive adjustments
+  @media (max-width: 768px) {
+    .search-button__wrapper {
+      height: calc(var(--base) * 1.3);
+    }
+
+    .search-button__placeholder {
+      font-size: 0.846rem; // ~11px on mobile
+    }
+
+    .search-button__shortcuts {
+      display: none; // Hide shortcuts on mobile
+    }
+  }
+}

package/dist/components/cmdk/command.scss

@@ -0,0 +1,334 @@
+/////////////////////////////
+// CMDK COMPONENT STYLES
+// Uses only CSS variables from Payload runtime
+/////////////////////////////
+
+@layer payload {
+  // Main Command Container
+  .command {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: auto; // Adjusts based on content
+    overflow: hidden;
+    border-radius: var(--style-radius-m);
+    background: var(--theme-elevation-0);
+    color: var(--theme-text);
+    border: 1px solid var(--theme-border-color);
+    box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
+  }
+
+  // Command Header (breadcrumb area for submenu)
+  .command__header {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) * 0.25);
+    padding: calc(var(--base) * 0.35) calc(var(--base) * 0.5);
+    border-bottom: 1px solid var(--theme-elevation-150);
+    background: var(--theme-elevation-50);
+  }
+
+  // Command Back Button
+  .command__back-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: calc(var(--base) * 0.15);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--theme-elevation-600);
+    transition: all 100ms cubic-bezier(0, 0.2, 0.2, 1);
+    flex-shrink: 0;
+    border-radius: var(--style-radius-s);
+
+    svg {
+      width: calc(var(--base) * 0.7);
+      height: calc(var(--base) * 0.7);
+    }
+
+    &:hover {
+      color: var(--theme-text);
+      background: var(--theme-elevation-100);
+    }
+
+    &:active {
+      background: var(--theme-elevation-150);
+    }
+  }
+
+  // Command Header Label
+  .command__header-label {
+    font-size: 0.846rem; // ~11px
+    font-weight: 500;
+    color: var(--theme-elevation-700);
+  }
+
+  // Command Input Wrapper
+  .command__input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) * 0.5);
+    height: calc(var(--base) * 2);
+    padding: 0 calc(var(--base) * 0.75);
+    border-bottom: 1px solid var(--theme-elevation-150);
+
+    svg {
+      width: calc(var(--base) * 0.8);
+      height: calc(var(--base) * 0.8);
+      flex-shrink: 0;
+      opacity: 0.5;
+      color: var(--theme-elevation-500);
+    }
+  }
+
+  // Command Input
+  .command__input {
+    display: flex;
+    width: 100%;
+    height: calc(var(--base) * 1.8);
+    padding: calc(var(--base) * 0.5) 0;
+    font-family: var(--font-body);
+    font-size: 1.077rem; // ~14px
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--theme-text);
+
+    &::placeholder {
+      color: var(--theme-elevation-400);
+      font-weight: normal;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  // Command List
+  .command__list {
+    max-height: 300px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-padding: calc(var(--base) * 0.25);
+    padding: calc(var(--base) * 0.25);
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--theme-elevation-50);
+      border-radius: var(--style-radius-s);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--theme-elevation-250);
+      border-radius: var(--style-radius-s);
+
+      &:hover {
+        background: var(--theme-elevation-350);
+      }
+    }
+  }
+
+  // Command Empty State
+  .command__empty {
+    padding: calc(var(--base) * 1.5) 0;
+    text-align: center;
+    font-size: 1rem; // ~13px
+    color: var(--theme-elevation-500);
+  }
+
+  // Command Group
+  .command__group {
+    overflow: hidden;
+    padding: calc(var(--base) * 0.25);
+    color: var(--theme-text);
+
+    // Group Heading
+    [cmdk-group-heading] {
+      padding: calc(var(--base) * 0.4) calc(var(--base) * 0.5);
+      font-size: 0.846rem; // ~11px
+      font-weight: 500;
+      color: var(--theme-elevation-500);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      user-select: none;
+    }
+
+    // &:not(:first-child) {
+    //   margin-top: calc(var(--base) * 0.25);
+    // }
+  }
+
+  // Command Separator
+  .command__separator {
+    height: 1px;
+    margin: calc(var(--base) * 0.25) calc(var(--base) * -0.25);
+    background: var(--theme-elevation-150);
+  }
+
+  // Command Item
+  .command__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) * 0.5);
+    padding: calc(var(--base) * 0.4) calc(var(--base) * 0.5);
+    font-size: 1rem; // ~13px (base Payload size)
+    border-radius: var(--style-radius-s);
+    cursor: default;
+    user-select: none;
+    outline: none;
+    transition: all 100ms cubic-bezier(0, 0.2, 0.2, 1);
+
+    svg {
+      pointer-events: none;
+      flex-shrink: 0;
+      width: calc(var(--base) * 0.8);
+      height: calc(var(--base) * 0.8);
+
+      &:not([class*='text-']) {
+        color: var(--theme-elevation-500);
+      }
+    }
+
+    // Selected/Hover state
+    &[data-selected='true'] {
+      background: var(--theme-success-100);
+      color: var(--theme-success-800);
+
+      svg:not([class*='text-']) {
+        color: var(--theme-success-700);
+      }
+    }
+
+    // Disabled state
+    &[data-disabled='true'] {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    // Hover state (when not using keyboard navigation)
+    &:hover:not([data-disabled='true']) {
+      background: var(--theme-elevation-100);
+    }
+  }
+
+  // Command Shortcut
+  .command__shortcut {
+    margin-left: auto;
+    font-size: 0.846rem; // ~11px
+    font-family: var(--font-mono);
+    letter-spacing: 0.5px;
+    color: var(--theme-elevation-500);
+    opacity: 0.8;
+  }
+
+  // Command Footer
+  .command__footer {
+    border-top: 1px solid var(--theme-elevation-150);
+    padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
+    font-size: 0.846rem; // ~11px
+    color: var(--theme-elevation-600);
+    display: flex;
+    gap: calc(var(--base) * 1);
+    flex-wrap: wrap;
+
+    kbd {
+      padding: calc(var(--base) * 0.1) calc(var(--base) * 0.25);
+      font-family: var(--font-mono);
+      font-size: 0.923rem; // ~12px
+      background: var(--theme-elevation-100);
+      border: 1px solid var(--theme-elevation-200);
+      border-radius: var(--style-radius-s);
+      box-shadow: 0 1px 0 var(--theme-elevation-200);
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px; // Small gap between icon and text when combined
+
+      // Ensure icons are properly aligned and sized
+      svg {
+        width: 12px;
+        height: 12px;
+        display: block;
+      }
+    }
+  }
+
+  // Dark theme adjustments
+  html[data-theme='dark'] {
+    .command {
+      background: var(--theme-elevation-50);
+      border-color: var(--theme-elevation-200);
+    }
+
+    .command__header {
+      background: var(--theme-elevation-100);
+      border-bottom-color: var(--theme-elevation-200);
+    }
+
+    .command__input-wrapper {
+      border-bottom-color: var(--theme-elevation-200);
+    }
+
+    .command__back-button {
+      &:hover {
+        background: var(--theme-elevation-150);
+      }
+
+      &:active {
+        background: var(--theme-elevation-200);
+      }
+    }
+
+    .command__footer {
+      border-top-color: var(--theme-elevation-200);
+
+      kbd {
+        background: var(--theme-elevation-150);
+        border-color: var(--theme-elevation-300);
+        box-shadow: 0 1px 0 var(--theme-elevation-300);
+      }
+    }
+
+    .command__item {
+      &[data-selected='true'] {
+        background: var(--theme-success-200);
+        color: var(--theme-success-900);
+
+        svg:not([class*='text-']) {
+          color: var(--theme-success-800);
+        }
+      }
+
+      &:hover:not([data-disabled='true']) {
+        background: var(--theme-elevation-150);
+      }
+    }
+  }
+
+  // Responsive adjustments
+  @media (max-width: 768px) {
+    .command__list {
+      max-height: 250px;
+    }
+
+    .command__input-wrapper {
+      padding: 0 calc(var(--base) * 0.5);
+    }
+
+    .command__item {
+      padding: calc(var(--base) * 0.35) calc(var(--base) * 0.4);
+      font-size: 0.923rem; // ~12px on mobile
+    }
+
+    .command__group [cmdk-group-heading] {
+      padding: calc(var(--base) * 0.35) calc(var(--base) * 0.4);
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import * as React from 'react';
+import './command.scss';
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/components/cmdk/index.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+import * as React from 'react';
+import './command.scss';
+// Helper to combine class names
+function cn(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+// Main Command Component
+function Command({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive, {
+        className: cn('command', className),
+        ...props
+    });
+}
+// Command Input Component
+function CommandInput({ className, ...props }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "command__input-wrapper",
+        children: [
+            /*#__PURE__*/ _jsx(SearchIcon, {
+                className: "command__input-icon"
+            }),
+            /*#__PURE__*/ _jsx(CommandPrimitive.Input, {
+                className: cn('command__input', className),
+                ...props
+            })
+        ]
+    });
+}
+// Command List Component
+function CommandList({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.List, {
+        className: cn('command__list', className),
+        ...props
+    });
+}
+// Command Empty Component
+function CommandEmpty({ ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, {
+        className: "command__empty",
+        ...props
+    });
+}
+// Command Group Component
+function CommandGroup({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Group, {
+        className: cn('command__group', className),
+        ...props
+    });
+}
+// Command Separator Component
+function CommandSeparator({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Separator, {
+        className: cn('command__separator', className),
+        ...props
+    });
+}
+// Command Item Component
+function CommandItem({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Item, {
+        className: cn('command__item', className),
+        ...props
+    });
+}
+// Command Shortcut Component
+function CommandShortcut({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("span", {
+        className: cn('command__shortcut', className),
+        ...props
+    });
+}
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut,  };
+
+//# sourceMappingURL=index.js.map

package/dist/components/cmdk/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/cmdk/index.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { SearchIcon } from 'lucide-react'\nimport * as React from 'react'\n\nimport './command.scss'\n\n// Helper to combine class names\nfunction cn(...classes: (false | null | string | undefined)[]) {\n  return classes.filter(Boolean).join(' ')\n}\n\n// Main Command Component\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return <CommandPrimitive className={cn('command', className)} {...props} />\n}\n\n// Command Input Component\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"command__input-wrapper\">\n      <SearchIcon className=\"command__input-icon\" />\n      <CommandPrimitive.Input className={cn('command__input', className)} {...props} />\n    </div>\n  )\n}\n\n// Command List Component\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return <CommandPrimitive.List className={cn('command__list', className)} {...props} />\n}\n\n// Command Empty Component\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return <CommandPrimitive.Empty className=\"command__empty\" {...props} />\n}\n\n// Command Group Component\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return <CommandPrimitive.Group className={cn('command__group', className)} {...props} />\n}\n\n// Command Separator Component\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return <CommandPrimitive.Separator className={cn('command__separator', className)} {...props} />\n}\n\n// Command Item Component\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return <CommandPrimitive.Item className={cn('command__item', className)} {...props} />\n}\n\n// Command Shortcut Component\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return <span className={cn('command__shortcut', className)} {...props} />\n}\n\nexport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n}\n"],"names":["Command","CommandPrimitive","SearchIcon","React","cn","classes","filter","Boolean","join","className","props","CommandInput","div","Input","CommandList","List","CommandEmpty","Empty","CommandGroup","Group","CommandSeparator","Separator","CommandItem","Item","CommandShortcut","span"],"mappings":"AAAA;;AAEA,SAASA,WAAWC,gBAAgB,QAAQ,OAAM;AAClD,SAASC,UAAU,QAAQ,eAAc;AACzC,YAAYC,WAAW,QAAO;AAE9B,OAAO,iBAAgB;AAEvB,gCAAgC;AAChC,SAASC,GAAG,GAAGC,OAA8C;IAC3D,OAAOA,QAAQC,MAAM,CAACC,SAASC,IAAI,CAAC;AACtC;AAEA,yBAAyB;AACzB,SAASR,QAAQ,EAAES,SAAS,EAAE,GAAGC,OAAsD;IACrF,qBAAO,KAACT;QAAiBQ,WAAWL,GAAG,WAAWK;QAAa,GAAGC,KAAK;;AACzE;AAEA,0BAA0B;AAC1B,SAASC,aAAa,EACpBF,SAAS,EACT,GAAGC,OACiD;IACpD,qBACE,MAACE;QAAIH,WAAU;;0BACb,KAACP;gBAAWO,WAAU;;0BACtB,KAACR,iBAAiBY,KAAK;gBAACJ,WAAWL,GAAG,kBAAkBK;gBAAa,GAAGC,KAAK;;;;AAGnF;AAEA,yBAAyB;AACzB,SAASI,YAAY,EAAEL,SAAS,EAAE,GAAGC,OAA2D;IAC9F,qBAAO,KAACT,iBAAiBc,IAAI;QAACN,WAAWL,GAAG,iBAAiBK;QAAa,GAAGC,KAAK;;AACpF;AAEA,0BAA0B;AAC1B,SAASM,aAAa,EAAE,GAAGN,OAA4D;IACrF,qBAAO,KAACT,iBAAiBgB,KAAK;QAACR,WAAU;QAAkB,GAAGC,KAAK;;AACrE;AAEA,0BAA0B;AAC1B,SAASQ,aAAa,EACpBT,SAAS,EACT,GAAGC,OACiD;IACpD,qBAAO,KAACT,iBAAiBkB,KAAK;QAACV,WAAWL,GAAG,kBAAkBK;QAAa,GAAGC,KAAK;;AACtF;AAEA,8BAA8B;AAC9B,SAASU,iBAAiB,EACxBX,SAAS,EACT,GAAGC,OACqD;IACxD,qBAAO,KAACT,iBAAiBoB,SAAS;QAACZ,WAAWL,GAAG,sBAAsBK;QAAa,GAAGC,KAAK;;AAC9F;AAEA,yBAAyB;AACzB,SAASY,YAAY,EAAEb,SAAS,EAAE,GAAGC,OAA2D;IAC9F,qBAAO,KAACT,iBAAiBsB,IAAI;QAACd,WAAWL,GAAG,iBAAiBK;QAAa,GAAGC,KAAK;;AACpF;AAEA,6BAA6B;AAC7B,SAASc,gBAAgB,EAAEf,SAAS,EAAE,GAAGC,OAAqC;IAC5E,qBAAO,KAACe;QAAKhB,WAAWL,GAAG,qBAAqBK;QAAa,GAAGC,KAAK;;AACvE;AAEA,SACEV,OAAO,EACPgB,YAAY,EACZE,YAAY,EACZP,YAAY,EACZW,WAAW,EACXR,WAAW,EACXM,gBAAgB,EAChBI,eAAe,KAChB"}

package/dist/components/modal.scss

@@ -0,0 +1,94 @@
+/////////////////////////////
+// COMMAND MODAL STYLES
+// Wrapper class to style command inside Payload Modal
+/////////////////////////////
+
+@layer payload {
+  .command-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    // Center the command
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: calc(var(--base) * 6) calc(var(--base) * 1);
+
+    // Transition animations - only opacity on the modal wrapper
+    will-change: opacity;
+    transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
+    opacity: 0;
+
+    // Dark background with pseudo element
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--theme-overlay);
+      z-index: -1;
+    }
+
+    // Add blur when enabled - apply to wrapper instead of pseudo-element
+    &--blur {
+      backdrop-filter: blur(12px);
+    }
+
+    @media (max-width: 768px) {
+      padding: calc(var(--base) * 2) calc(var(--base) * 0.5);
+      align-items: center;
+    }
+
+    // Command container inside modal
+    .command {
+      width: 100%;
+      max-width: 640px;
+      max-height: 500px;
+
+      // Transform animations on the command itself
+      will-change: transform;
+      transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
+      transform: scale(0.96) translateY(-20px);
+
+      @media (max-width: 768px) {
+        max-width: 100%;
+        max-height: 70vh;
+      }
+    }
+  }
+
+  // Enter/Appear animations (opening) - target parent dialog element
+  .payload__modal-item--appearActive .command-modal,
+  .payload__modal-item--appearDone .command-modal,
+  .payload__modal-item--enterActive .command-modal,
+  .payload__modal-item--enterDone .command-modal {
+    opacity: 1;
+
+    .command {
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  // Exit animation (closing) - target parent dialog element
+  .payload__modal-item--exitActive .command-modal,
+  .payload__modal-item--exitDone .command-modal {
+    opacity: 0;
+
+    .command {
+      transform: scale(0.96) translateY(-20px);
+    }
+  }
+
+  // Dark theme
+  html[data-theme='dark'] {
+    .command-modal {
+      &::before {
+        background: rgba(0, 0, 0, 0.75);
+      }
+    }
+  }
+}

package/dist/endpoints/customEndpointHandler.d.ts

@@ -0,0 +1,2 @@
+import type { PayloadHandler } from 'payload';
+export declare const customEndpointHandler: PayloadHandler;

package/dist/endpoints/customEndpointHandler.js

@@ -0,0 +1,7 @@
+export const customEndpointHandler = ()=>{
+    return Response.json({
+        message: 'Hello from custom endpoint'
+    });
+};
+
+//# sourceMappingURL=customEndpointHandler.js.map

package/dist/endpoints/customEndpointHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/endpoints/customEndpointHandler.ts"],"sourcesContent":["import type { PayloadHandler } from 'payload'\n\nexport const customEndpointHandler: PayloadHandler = () => {\n  return Response.json({ message: 'Hello from custom endpoint' })\n}\n"],"names":["customEndpointHandler","Response","json","message"],"mappings":"AAEA,OAAO,MAAMA,wBAAwC;IACnD,OAAOC,SAASC,IAAI,CAAC;QAAEC,SAAS;IAA6B;AAC/D,EAAC"}

package/dist/exports/client.d.ts

@@ -0,0 +1,2 @@
+export { CommandMenuProvider } from '../components/CommandMenuContext';
+export { default as SearchButton } from '../components/SearchButton';

package/dist/exports/client.js

@@ -0,0 +1,4 @@
+export { CommandMenuProvider } from '../components/CommandMenuContext';
+export { default as SearchButton } from '../components/SearchButton';
+
+//# sourceMappingURL=client.js.map

package/dist/exports/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["export { CommandMenuProvider } from '../components/CommandMenuContext'\nexport { default as SearchButton } from '../components/SearchButton'\n"],"names":["CommandMenuProvider","default","SearchButton"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,mCAAkC;AACtE,SAASC,WAAWC,YAAY,QAAQ,6BAA4B"}

package/dist/exports/rsc.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=rsc.js.map