moduix 0.11.0 → 0.11.1

package/dist/components/CommandPalette/CommandPalette.cjs

@@ -0,0 +1,304 @@
+const require_Icons = require("../../icons/ui/Icons.cjs");
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_CommandPalette_module = require("./CommandPalette.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+let react = require("react");
+let _base_ui_react_autocomplete = require("@base-ui/react/autocomplete");
+let _base_ui_react_dialog = require("@base-ui/react/dialog");
+//#region src/components/CommandPalette/CommandPalette.tsx
+const createCommandPaletteHandle = _base_ui_react_dialog.Dialog.createHandle;
+const CommandPaletteContext = (0, react.createContext)(null);
+function useCommandPaletteContext(componentName) {
+	const context = (0, react.useContext)(CommandPaletteContext);
+	if (!context) throw new Error(`${componentName} must be used within CommandPalette.`);
+	return context;
+}
+function isMacLikePlatform() {
+	if (typeof navigator === "undefined") return false;
+	const platform = navigator.userAgentData?.platform ?? navigator.platform;
+	return /mac|iphone|ipad|ipod/i.test(platform);
+}
+function isShortcutMatch(event, shortcut) {
+	const parts = shortcut.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
+	const key = parts.at(-1);
+	const primaryModifier = parts.includes("mod") ? isMacLikePlatform() ? "meta" : "ctrl" : null;
+	const needsCtrl = parts.includes("ctrl") || parts.includes("control") || primaryModifier === "ctrl";
+	const needsMeta = parts.includes("meta") || parts.includes("cmd") || parts.includes("command") || primaryModifier === "meta";
+	const needsAlt = parts.includes("alt") || parts.includes("option");
+	const needsShift = parts.includes("shift");
+	const eventKey = event.key.toLowerCase();
+	const eventCode = event.code.startsWith("Key") || event.code.startsWith("Digit") ? event.code.slice(event.code.startsWith("Key") ? 3 : 5).toLowerCase() : event.code.toLowerCase();
+	if (!key || eventKey !== key && eventCode !== key) return false;
+	return event.ctrlKey === needsCtrl && event.metaKey === needsMeta && event.altKey === needsAlt && event.shiftKey === needsShift;
+}
+function isEditableTarget(target) {
+	if (!(target instanceof Element)) return false;
+	return target.closest("input, textarea, select, [contenteditable], [contenteditable=\"true\"]") !== null;
+}
+function isGroupedItems(items) {
+	return Boolean(items?.[0] && typeof items[0] === "object" && items[0] !== null && "items" in items[0]);
+}
+function CommandPalette({ modal = true, shortcut = "mod+k", shortcutTarget, handle, children, ...props }) {
+	const fallbackHandle = (0, react.useMemo)(() => createCommandPaletteHandle(), []);
+	const resolvedHandle = handle ?? fallbackHandle;
+	(0, react.useEffect)(() => {
+		if (shortcut === false || shortcutTarget === null) return;
+		const target = shortcutTarget ?? document;
+		const handleKeyDown = (event) => {
+			if (event.defaultPrevented || event.isComposing || isEditableTarget(event.target) || !isShortcutMatch(event, shortcut)) return;
+			event.preventDefault();
+			resolvedHandle.open(null);
+		};
+		const eventListener = handleKeyDown;
+		target.addEventListener("keydown", eventListener);
+		return () => target.removeEventListener("keydown", eventListener);
+	}, [
+		resolvedHandle,
+		shortcut,
+		shortcutTarget
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandPaletteContext.Provider, {
+		value: {
+			handle: resolvedHandle,
+			modal
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Root, {
+			modal,
+			handle: resolvedHandle,
+			...props,
+			children
+		})
+	});
+}
+function CommandPaletteTrigger({ className, render, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Trigger, {
+		"data-slot": "command-palette-trigger",
+		className: render ? className : require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.trigger),
+		render,
+		...props
+	});
+}
+function CommandPalettePortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Portal, { ...props });
+}
+function CommandPaletteBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+		"data-slot": "command-palette-backdrop",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.backdrop),
+		...props
+	});
+}
+function CommandPaletteViewport({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
+		"data-slot": "command-palette-viewport",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.viewport),
+		...props
+	});
+}
+function CommandPalettePopup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
+		"data-slot": "command-palette-popup",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.popup),
+		...props
+	});
+}
+function CommandPaletteClose({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
+		"data-slot": "command-palette-close",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.close),
+		...props
+	});
+}
+function CommandPaletteContent({ className, children, items, itemToStringValue, value, defaultValue, onValueChange, filter, filteredItems, limit, ...props }) {
+	const { modal } = useCommandPaletteContext("CommandPaletteContent");
+	const autocompleteProps = {
+		autoHighlight: "always",
+		defaultValue,
+		filter,
+		filteredItems,
+		inline: true,
+		itemToStringValue,
+		keepHighlight: true,
+		limit,
+		onValueChange,
+		open: true,
+		value
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CommandPalettePortal, { children: [modal === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandPaletteBackdrop, {}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandPaletteViewport, {
+		className: modal === true ? void 0 : require_CommandPalette_module.default.viewportNonModal,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandPalettePopup, {
+			className,
+			...props,
+			children: isGroupedItems(items) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Root, {
+				...autocompleteProps,
+				items,
+				children
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Root, {
+				...autocompleteProps,
+				items,
+				children
+			})
+		})
+	})] });
+}
+function CommandPaletteInputWrap({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "command-palette-input-wrap",
+		className: (0, clsx.clsx)(require_CommandPalette_module.default.inputWrap, className),
+		...props
+	});
+}
+function CommandPaletteInput({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Input, {
+		"data-slot": "command-palette-input",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.input),
+		...props
+	});
+}
+function CommandPaletteClear({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Clear, {
+		"data-slot": "command-palette-clear",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.clear),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.CloseIcon, { className: require_CommandPalette_module.default.iconSvg })
+	});
+}
+function CommandPaletteStatus({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Status, {
+		"data-slot": "command-palette-status",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.status),
+		...props
+	});
+}
+function CommandPaletteEmpty({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Empty, {
+		"data-slot": "command-palette-empty",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.empty),
+		...props
+	});
+}
+function CommandPaletteList({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.List, {
+		"data-slot": "command-palette-list",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.list),
+		...props
+	});
+}
+function CommandPaletteGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Group, {
+		"data-slot": "command-palette-group",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.group),
+		...props
+	});
+}
+function CommandPaletteGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.GroupLabel, {
+		"data-slot": "command-palette-group-label",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.groupLabel),
+		...props
+	});
+}
+function CommandPaletteCollection(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Collection, {
+		"data-slot": "command-palette-collection",
+		...props
+	});
+}
+function CommandPaletteItem({ className, closeOnSelect = true, onClick, ...props }) {
+	const { handle } = useCommandPaletteContext("CommandPaletteItem");
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented && closeOnSelect) handle.close();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Item, {
+		"data-slot": "command-palette-item",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.item),
+		onClick: handleClick,
+		...props
+	});
+}
+function CommandPaletteItemIcon({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "command-palette-item-icon",
+		className: (0, clsx.clsx)(require_CommandPalette_module.default.itemIcon, className),
+		...props
+	});
+}
+function CommandPaletteItemText({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "command-palette-item-text",
+		className: (0, clsx.clsx)(require_CommandPalette_module.default.itemText, className),
+		...props
+	});
+}
+function CommandPaletteItemLabel({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "command-palette-item-label",
+		className: (0, clsx.clsx)(require_CommandPalette_module.default.itemLabel, className),
+		...props
+	});
+}
+function CommandPaletteItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "command-palette-item-description",
+		className: (0, clsx.clsx)(require_CommandPalette_module.default.itemDescription, className),
+		...props
+	});
+}
+function CommandPaletteItemMeta({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "command-palette-item-meta",
+		className: (0, clsx.clsx)(require_CommandPalette_module.default.itemMeta, className),
+		...props
+	});
+}
+function CommandPaletteSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Separator, {
+		"data-slot": "command-palette-separator",
+		className: require_mergeClassName.mergeClassName(className, require_CommandPalette_module.default.separator),
+		...props
+	});
+}
+function CommandPaletteFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "command-palette-footer",
+		className: (0, clsx.clsx)(require_CommandPalette_module.default.footer, className),
+		...props
+	});
+}
+function CommandPaletteKbd({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
+		"data-slot": "command-palette-kbd",
+		className: (0, clsx.clsx)(require_CommandPalette_module.default.kbd, className),
+		...props
+	});
+}
+//#endregion
+exports.CommandPalette = CommandPalette;
+exports.CommandPaletteBackdrop = CommandPaletteBackdrop;
+exports.CommandPaletteClear = CommandPaletteClear;
+exports.CommandPaletteClose = CommandPaletteClose;
+exports.CommandPaletteCollection = CommandPaletteCollection;
+exports.CommandPaletteContent = CommandPaletteContent;
+exports.CommandPaletteEmpty = CommandPaletteEmpty;
+exports.CommandPaletteFooter = CommandPaletteFooter;
+exports.CommandPaletteGroup = CommandPaletteGroup;
+exports.CommandPaletteGroupLabel = CommandPaletteGroupLabel;
+exports.CommandPaletteInput = CommandPaletteInput;
+exports.CommandPaletteInputWrap = CommandPaletteInputWrap;
+exports.CommandPaletteItem = CommandPaletteItem;
+exports.CommandPaletteItemDescription = CommandPaletteItemDescription;
+exports.CommandPaletteItemIcon = CommandPaletteItemIcon;
+exports.CommandPaletteItemLabel = CommandPaletteItemLabel;
+exports.CommandPaletteItemMeta = CommandPaletteItemMeta;
+exports.CommandPaletteItemText = CommandPaletteItemText;
+exports.CommandPaletteKbd = CommandPaletteKbd;
+exports.CommandPaletteList = CommandPaletteList;
+exports.CommandPalettePopup = CommandPalettePopup;
+exports.CommandPalettePortal = CommandPalettePortal;
+exports.CommandPaletteSeparator = CommandPaletteSeparator;
+exports.CommandPaletteStatus = CommandPaletteStatus;
+exports.CommandPaletteTrigger = CommandPaletteTrigger;
+exports.CommandPaletteViewport = CommandPaletteViewport;
+exports.createCommandPaletteHandle = createCommandPaletteHandle;

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;
+  }
+}