@robr0/design-system 0.2.0 → 0.3.0

package/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,338 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { Field } from "../Field/Field.js";
+import "./ColorPicker.css";
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+function parseHex(input) {
+  const hex = input.trim().replace(/^#/, "");
+  if (!/^([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex)) return null;
+  let r, g, b;
+  let a = 255;
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    if (hex.length === 8) a = parseInt(hex.slice(6, 8), 16);
+  }
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === r) h = 60 * ((g - b) / d % 6);
+    else if (max === g) h = 60 * ((b - r) / d + 2);
+    else h = 60 * ((r - g) / d + 4);
+  }
+  if (h < 0) h += 360;
+  return {
+    // h stays a float — rounding it here makes the hex → HSV → hex round
+    // trip drift by one on some colours.
+    h: clamp(h, 0, 359.999),
+    s: max === 0 ? 0 : d / max * 100,
+    v: max / 255 * 100,
+    a: a / 255 * 100
+  };
+}
+function hsvToRgb({ h, s, v }) {
+  const sf = s / 100;
+  const vf = v / 100;
+  const c = vf * sf;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = vf - c;
+  const [r, g, b] = h < 60 ? [c, x, 0] : h < 120 ? [x, c, 0] : h < 180 ? [0, c, x] : h < 240 ? [0, x, c] : h < 300 ? [x, 0, c] : [c, 0, x];
+  return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
+}
+const channelHex = (n) => n.toString(16).padStart(2, "0").toUpperCase();
+function formatHex(hsva, withAlpha) {
+  const [r, g, b] = hsvToRgb(hsva);
+  const base = `#${channelHex(r)}${channelHex(g)}${channelHex(b)}`;
+  if (withAlpha && hsva.a < 100) {
+    return base + channelHex(Math.round(hsva.a / 100 * 255));
+  }
+  return base;
+}
+function toCssColor(hsva) {
+  const [r, g, b] = hsvToRgb(hsva);
+  return `rgba(${r}, ${g}, ${b}, ${hsva.a / 100})`;
+}
+const ColorPicker = React.forwardRef(
+  ({
+    label,
+    value,
+    defaultValue = "#118AB2",
+    onValueChange,
+    showText = false,
+    showAlpha = false,
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    name,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-colorpicker";
+    const [isOpen, setIsOpen] = useState(false);
+    const [hsva, setHsva] = useState(
+      () => parseHex(value ?? defaultValue) ?? { h: 0, s: 0, v: 0, a: 100 }
+    );
+    const [hexDraft, setHexDraft] = useState(null);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const satRef = useRef(null);
+    const hsvaRef = useRef(hsva);
+    hsvaRef.current = hsva;
+    const lastEmitted = useRef(null);
+    const setTriggerRef = (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    useEffect(() => {
+      if (value == null || value === lastEmitted.current) return;
+      const parsed = parseHex(value);
+      if (parsed) setHsva(parsed);
+    }, [value]);
+    const commit = useCallback(
+      (next) => {
+        setHsva(next);
+        const hex = formatHex(next, showAlpha);
+        lastEmitted.current = hex;
+        onValueChange?.(hex);
+      },
+      [onValueChange, showAlpha]
+    );
+    useEffect(() => {
+      if (!isOpen) return;
+      const onMouseDown = (e) => {
+        if (rootRef.current && !rootRef.current.contains(e.target)) {
+          setIsOpen(false);
+          setHexDraft(null);
+        }
+      };
+      document.addEventListener("mousedown", onMouseDown);
+      return () => document.removeEventListener("mousedown", onMouseDown);
+    }, [isOpen]);
+    const handleRootKeyDown = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        e.stopPropagation();
+        setIsOpen(false);
+        setHexDraft(null);
+        triggerRef.current?.focus();
+      }
+    };
+    const updateFromPointer = useCallback(
+      (clientX, clientY) => {
+        const el = satRef.current;
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        const s = clamp((clientX - rect.left) / rect.width * 100, 0, 100);
+        const v = clamp((1 - (clientY - rect.top) / rect.height) * 100, 0, 100);
+        commit({ ...hsvaRef.current, s, v });
+      },
+      [commit]
+    );
+    const handleSatPointerDown = (e) => {
+      e.preventDefault();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      e.currentTarget.focus();
+      updateFromPointer(e.clientX, e.clientY);
+    };
+    const handleSatPointerMove = (e) => {
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        updateFromPointer(e.clientX, e.clientY);
+      }
+    };
+    const handleSatKeyDown = (e) => {
+      const step = e.shiftKey ? 10 : 2;
+      const { h, s, v, a } = hsvaRef.current;
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          commit({ h, s: clamp(s - step, 0, 100), v, a });
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          commit({ h, s: clamp(s + step, 0, 100), v, a });
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          commit({ h, s, v: clamp(v + step, 0, 100), a });
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          commit({ h, s, v: clamp(v - step, 0, 100), a });
+          break;
+      }
+    };
+    const displayHex = formatHex(hsva, showAlpha);
+    const handleHexChange = (e) => {
+      const text = e.target.value;
+      setHexDraft(text);
+      const parsed = parseHex(text);
+      if (parsed) {
+        const keepAlpha = text.replace(/^#/, "").length < 8;
+        commit(keepAlpha ? { ...parsed, a: hsvaRef.current.a } : parsed);
+      }
+    };
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const cssColor = toCssColor(hsva);
+    const solidHex = formatHex({ ...hsva, a: 100 }, false);
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      isOpen ? `${baseClass}--open` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        ref: rootRef,
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        onKeyDown: handleRootKeyDown,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ...rest,
+              ref: setTriggerRef,
+              type: "button",
+              id: inputId,
+              className: `${baseClass}__trigger`,
+              disabled,
+              "aria-haspopup": "dialog",
+              "aria-expanded": isOpen,
+              "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+              "aria-invalid": error || void 0,
+              "aria-label": rest["aria-label"] ?? (!label ? `Choose colour, ${displayHex}` : void 0),
+              onClick: () => {
+                if (!disabled) setIsOpen((prev) => !prev);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__trigger-swatch`,
+                    style: { "--ds-cp-color": cssColor },
+                    "aria-hidden": "true"
+                  }
+                ),
+                showText && /* @__PURE__ */ jsx("span", { className: `${baseClass}__trigger-text`, children: displayHex })
+              ]
+            }
+          ),
+          name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: displayHex }),
+          isOpen && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${baseClass}__panel`,
+              role: "dialog",
+              "aria-label": label ? `${label} colour picker` : "Colour picker",
+              style: {
+                "--ds-cp-hue": hsva.h,
+                "--ds-cp-color": cssColor,
+                "--ds-cp-solid": solidHex
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: satRef,
+                    className: `${baseClass}__saturation`,
+                    role: "slider",
+                    tabIndex: 0,
+                    "aria-label": "Saturation and brightness",
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 100,
+                    "aria-valuenow": Math.round(hsva.v),
+                    "aria-valuetext": `Saturation ${Math.round(hsva.s)}%, brightness ${Math.round(hsva.v)}%`,
+                    onPointerDown: handleSatPointerDown,
+                    onPointerMove: handleSatPointerMove,
+                    onKeyDown: handleSatKeyDown,
+                    style: {
+                      "--ds-cp-x": `${hsva.s}%`,
+                      "--ds-cp-y": `${100 - hsva.v}%`
+                    },
+                    children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__handle` })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: `${baseClass}__controls`, children: [
+                  /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sliders`, children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "range",
+                        className: `${baseClass}__hue`,
+                        min: 0,
+                        max: 359,
+                        step: 1,
+                        value: Math.round(hsva.h),
+                        "aria-label": "Hue",
+                        onChange: (e) => commit({ ...hsvaRef.current, h: Number(e.target.value) })
+                      }
+                    ),
+                    showAlpha && /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "range",
+                        className: `${baseClass}__alpha`,
+                        min: 0,
+                        max: 100,
+                        step: 1,
+                        value: Math.round(hsva.a),
+                        "aria-label": "Alpha",
+                        onChange: (e) => commit({ ...hsvaRef.current, a: Number(e.target.value) })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview`, "aria-hidden": "true" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: `${baseClass}__inputs`, children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__hash`, "aria-hidden": "true", children: "#" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: `${baseClass}__hex-field`,
+                      value: (hexDraft ?? displayHex).replace(/^#/, ""),
+                      maxLength: 8,
+                      spellCheck: false,
+                      autoComplete: "off",
+                      "aria-label": "Hex colour value",
+                      onChange: handleHexChange,
+                      onFocus: () => setHexDraft(displayHex.replace(/^#/, "")),
+                      onBlur: () => setHexDraft(null)
+                    }
+                  ),
+                  showAlpha && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__alpha-value`, children: [
+                    Math.round(hsva.a),
+                    "%"
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+export {
+  ColorPicker
+};

package/components/Combobox/Combobox.css

@@ -16,19 +16,6 @@
    LABEL
    ============================================ */
 
-.ds-combobox__label {
-  font-family: var(--font-paragraph-em-family);
-  font-size: var(--font-paragraph-em-size);
-  font-weight: var(--font-paragraph-em-weight);
-  line-height: var(--font-paragraph-em-line-height);
-  letter-spacing: var(--font-paragraph-em-letter-spacing);
-  color: var(--color-text-primary);
-}
-
-.ds-combobox__required {
-  color: var(--color-core-accent-coral);
-}
-
 /* ============================================
    CONTROL
    ============================================ */
@@ -324,16 +311,6 @@
    HELPER TEXT
    ============================================ */
 
-.ds-combobox__helper {
-  font-family: var(--font-paragraph-sm-family);
-  font-size: var(--font-paragraph-sm-size);
-  font-weight: var(--font-paragraph-sm-weight);
-  line-height: var(--font-paragraph-sm-line-height);
-  letter-spacing: var(--font-paragraph-sm-letter-spacing);
-  color: var(--color-text-tertiary);
-  margin: 0;
-}
-
 /* ============================================
    ERROR STATE
    ============================================ */
@@ -342,18 +319,10 @@
   border-color: var(--color-status-error-border);
 }
 
-.ds-combobox--error .ds-combobox__helper {
-  color: var(--color-status-error-border);
-}
-
 /* ============================================
    DISABLED STATE
    ============================================ */
 
-.ds-combobox--disabled .ds-combobox__label {
-  color: var(--color-input-text-disabled);
-}
-
 .ds-combobox--disabled .ds-combobox__control {
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
@@ -378,11 +347,6 @@
   padding: var(--padding-xs) var(--padding-sm-md); /* 6px 12px */
 }
 
-.ds-combobox--compact .ds-combobox__label {
-  font-size: var(--font-paragraph-sm-size);
-  line-height: var(--font-paragraph-sm-line-height);
-}
-
 .ds-combobox--compact .ds-combobox__input,
 .ds-combobox--compact .ds-combobox__option-label {
   font-size: var(--font-paragraph-sm-em-size);

package/components/Combobox/Combobox.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId, useMemo, useCallback, useEffect } from "react";
+import { Field } from "../Field/Field.js";
 import "./Combobox.css";
 import "../../fonts/material-symbols.css";
 const Combobox = React.forwardRef(({
@@ -223,97 +224,104 @@ const Combobox = React.forwardRef(({
     );
   };
   const hasSelection = selectedValues.length > 0;
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: classes, ref: setRootRef, children: [
-    label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      ...rest,
+      className: classes,
+      ref: setRootRef,
       label,
-      required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
-        " ",
-        "*"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__control`, onClick: () => inputRef.current?.focus(), children: [
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__search-icon material-symbols-rounded`, "aria-hidden": "true", children: "search" }),
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field`, children: [
-        multiple && selectedOptions.map((option) => /* @__PURE__ */ jsxs("span", { className: `${baseClass}__chip`, children: [
-          option.label,
-          /* @__PURE__ */ jsx(
+      helperText,
+      error,
+      required,
+      disabled,
+      size,
+      id: inputId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__control`, onClick: () => inputRef.current?.focus(), children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__search-icon material-symbols-rounded`, "aria-hidden": "true", children: "search" }),
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field`, children: [
+            multiple && selectedOptions.map((option) => /* @__PURE__ */ jsxs("span", { className: `${baseClass}__chip`, children: [
+              option.label,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${baseClass}__chip-remove`,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleRemove(option.value);
+                  },
+                  disabled,
+                  "aria-label": `Remove ${option.label}`,
+                  children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+                }
+              )
+            ] }, option.value)),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                id: inputId,
+                name,
+                type: "text",
+                className: `${baseClass}__input`,
+                role: "combobox",
+                autoComplete: "off",
+                "aria-expanded": isOpen,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": activeOptionId,
+                "aria-label": ariaLabel || rest["aria-label"] || (!label ? placeholder : void 0),
+                "aria-describedby": helperText ? `${inputId}-helper` : void 0,
+                "aria-invalid": error || void 0,
+                "aria-required": required || void 0,
+                placeholder: multiple && hasSelection ? "" : placeholder,
+                value: inputValue,
+                disabled,
+                onChange: (e) => handleQueryChange(e.target.value),
+                onFocus: openMenu,
+                onKeyDown: handleKeyDown
+              }
+            )
+          ] }),
+          clearable && hasSelection && !disabled && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: `${baseClass}__chip-remove`,
+              className: `${baseClass}__clear`,
               onClick: (e) => {
                 e.stopPropagation();
-                handleRemove(option.value);
+                handleClear();
               },
-              disabled,
-              "aria-label": `Remove ${option.label}`,
+              "aria-label": "Clear selection",
               children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
             }
-          )
-        ] }, option.value)),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            id: inputId,
-            name,
-            type: "text",
-            className: `${baseClass}__input`,
-            role: "combobox",
-            autoComplete: "off",
-            "aria-expanded": isOpen,
-            "aria-controls": listboxId,
-            "aria-autocomplete": "list",
-            "aria-activedescendant": activeOptionId,
-            "aria-label": ariaLabel || rest["aria-label"] || (!label ? placeholder : void 0),
-            "aria-describedby": helperText ? `${inputId}-helper` : void 0,
-            "aria-invalid": error || void 0,
-            "aria-required": required || void 0,
-            placeholder: multiple && hasSelection ? "" : placeholder,
-            value: inputValue,
-            disabled,
-            onChange: (e) => handleQueryChange(e.target.value),
-            onFocus: openMenu,
-            onKeyDown: handleKeyDown
-          }
-        )
-      ] }),
-      clearable && hasSelection && !disabled && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: `${baseClass}__clear`,
-          onClick: (e) => {
-            e.stopPropagation();
-            handleClear();
-          },
-          "aria-label": "Clear selection",
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
-    ] }),
-    isOpen && /* @__PURE__ */ jsxs("ul", { className: `${baseClass}__menu`, role: "listbox", id: listboxId, ref: listRef, children: [
-      loading && /* @__PURE__ */ jsx("li", { className: `${baseClass}__status`, role: "presentation", children: "Loading…" }),
-      !loading && filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: `${baseClass}__status`, role: "presentation", children: emptyMessage }),
-      !loading && (isGrouped ? (() => {
-        let flatIndex = 0;
-        return filteredGroups.map((group) => /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "none", children: [
-          /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, role: "presentation", children: group.label }),
-          /* @__PURE__ */ jsx(
-            "ul",
-            {
-              className: `${baseClass}__group-list`,
-              role: "group",
-              "aria-label": group.label,
-              children: group.options.map((option) => renderOption(option, flatIndex++))
-            }
-          )
-        ] }, group.label));
-      })() : filteredOptions.map((option, index) => renderOption(option, index)))
-    ] }),
-    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-  ] });
+          ),
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+        ] }),
+        isOpen && /* @__PURE__ */ jsxs("ul", { className: `${baseClass}__menu`, role: "listbox", id: listboxId, ref: listRef, children: [
+          loading && /* @__PURE__ */ jsx("li", { className: `${baseClass}__status`, role: "presentation", children: "Loading…" }),
+          !loading && filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: `${baseClass}__status`, role: "presentation", children: emptyMessage }),
+          !loading && (isGrouped ? (() => {
+            let flatIndex = 0;
+            return filteredGroups.map((group) => /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "none", children: [
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, role: "presentation", children: group.label }),
+              /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  className: `${baseClass}__group-list`,
+                  role: "group",
+                  "aria-label": group.label,
+                  children: group.options.map((option) => renderOption(option, flatIndex++))
+                }
+              )
+            ] }, group.label));
+          })() : filteredOptions.map((option, index) => renderOption(option, index)))
+        ] })
+      ]
+    }
+  );
 });
 Combobox.displayName = "Combobox";
 export {

package/components/CommandPalette/CommandPalette.css

@@ -241,21 +241,7 @@
   flex-shrink: 0;
 }
 
-.ds-command-palette__key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  padding: var(--padding-xxxs) var(--padding-xxs);
-  border: var(--border-xs) solid var(--color-bg-container-border);
-  border-radius: var(--radius-xs);
-  background-color: var(--color-bg-container-primary);
-  font-family: var(--font-paragraph-sm-family);
-  font-size: var(--font-paragraph-sm-size);
-  font-weight: var(--font-paragraph-sm-em-weight);
-  line-height: var(--font-paragraph-sm-line-height);
-  color: var(--color-text-tertiary);
-}
+/* Keycaps render through the Kbd component (compact size) */
 
 /* ============================================
    FOOTER HINTS

package/components/CommandPalette/CommandPalette.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useId, useSyncExternalStore, useCallback, useMemo, useEffect } from "react";
 import ReactDOM from "react-dom";
+import { Kbd } from "../Kbd/Kbd.js";
 import "./CommandPalette.css";
 import "../../fonts/material-symbols.css";
 const emptySubscribe = () => () => {
@@ -225,7 +226,7 @@ const CommandPalette = ({
                             /* @__PURE__ */ jsx("span", { className: `${baseClass}__command-label`, children: command.label }),
                             command.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__command-description`, children: command.description })
                           ] }),
-                          command.shortcut && command.shortcut.length > 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: command.shortcut.map((key, i) => /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: key }, i)) })
+                          command.shortcut && command.shortcut.length > 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: command.shortcut.map((key, i) => /* @__PURE__ */ jsx(Kbd, { size: "compact", children: key }, i)) })
                         ]
                       },
                       command.id
@@ -238,16 +239,16 @@ const CommandPalette = ({
           ] }),
           !hideFooter && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
             /* @__PURE__ */ jsxs("span", { className: `${baseClass}__hint`, children: [
-              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "↑" }),
-              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "↓" }),
+              /* @__PURE__ */ jsx(Kbd, { size: "compact", children: "↑" }),
+              /* @__PURE__ */ jsx(Kbd, { size: "compact", children: "↓" }),
               "to navigate"
             ] }),
             /* @__PURE__ */ jsxs("span", { className: `${baseClass}__hint`, children: [
-              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "↵" }),
+              /* @__PURE__ */ jsx(Kbd, { size: "compact", children: "↵" }),
               "to select"
             ] }),
             /* @__PURE__ */ jsxs("span", { className: `${baseClass}__hint`, children: [
-              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "esc" }),
+              /* @__PURE__ */ jsx(Kbd, { size: "compact", children: "esc" }),
               "to close"
             ] })
           ] })