boreal-ui 0.0.71 → 0.0.73

package/dist/core/{ColorPicker-CzL1SJCT.cjs → ColorPicker-j6djvLOC.cjs}

@@ -3,7 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
-const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
 const ColorPickerBase = ({
   label = "Choose a color",
   colors,
@@ -15,30 +15,69 @@ const ColorPickerBase = ({
   shadow = borealStyleConfig.getDefaultShadow(),
   shape = "round",
   allowCustom = false,
+  required = false,
+  invalid = false,
+  helperText,
+  errorText,
+  customInputAriaLabel = "Custom color picker",
+  hideLabel = false,
   className = "",
   classMap,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   "data-testid": testId = "color-picker"
 }) => {
   const legendId = `${testId}-legend`;
+  const helperTextId = helperText ? `${testId}-helper-text` : void 0;
+  const errorTextId = errorText ? `${testId}-error-text` : void 0;
+  const describedBy = [ariaDescribedBy, helperTextId, invalid ? errorTextId : void 0].filter(Boolean).join(" ") || void 0;
+  const computedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? legendId : void 0);
   const labelClass = React.useMemo(
-    () => classNames.combineClassNames(classMap.swatch, classMap[size], classMap[shape]),
-    [classMap, size, shape]
+    () => classNames.combineClassNames(
+      classMap.swatch,
+      classMap[size],
+      classMap[shape],
+      disabled && classMap.disabled
+    ),
+    [classMap, size, shape, disabled]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "fieldset",
     {
-      className: classNames.combineClassNames(classMap.color_picker, className),
+      className: classNames.combineClassNames(
+        classMap.color_picker,
+        invalid && classMap.invalid,
+        disabled && classMap.disabled,
+        className
+      ),
       disabled,
       "data-testid": testId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": computedAriaLabelledBy,
+      "aria-describedby": describedBy,
+      "aria-invalid": invalid || void 0,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("legend", { id: legendId, className: classMap.legend, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classMap.color_picker_grid, children: colors.map((color, i) => {
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "legend",
+          {
+            id: legendId,
+            className: classNames.combineClassNames(classMap.legend, hideLabel && "sr_only"),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classMap.color_picker_grid, role: "radiogroup", children: colors.map((color, i) => {
           const id = `${testId}-color-${i}`;
+          const optionLabelId = `${id}-label`;
           const isSelected = selected === color.value;
+          const optionDisabled = disabled || color.disabled;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: labelClass,
+              className: classNames.combineClassNames(
+                labelClass,
+                optionDisabled && classMap.disabled
+              ),
               htmlFor: id,
               title: color.label,
               "data-testid": `${testId}-option-${color.value}`,
@@ -52,10 +91,15 @@ const ColorPickerBase = ({
                     value: color.value,
                     checked: isSelected,
                     onChange: () => onChange(color.value),
-                    className: classMap.radio_input
+                    className: classMap.radio_input,
+                    disabled: optionDisabled,
+                    "aria-describedby": describedBy,
+                    "aria-invalid": invalid || void 0,
+                    "aria-required": required || void 0,
+                    "aria-labelledby": optionLabelId
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr_only", children: color.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { id: optionLabelId, className: "sr_only", children: color.label }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -63,6 +107,7 @@ const ColorPickerBase = ({
                       classMap.preview,
                       classMap[shape],
                       isSelected && classMap.selected,
+                      optionDisabled && classMap.disabled,
                       shadow && classMap[`shadow${capitalize.capitalize(shadow)}`]
                     ),
                     style: { backgroundColor: color.value },
@@ -74,6 +119,25 @@ const ColorPickerBase = ({
             `${color.value}-${i}`
           );
         }) }),
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: helperTextId,
+            className: classMap.helper_text,
+            "data-testid": `${testId}-helper-text`,
+            children: helperText
+          }
+        ),
+        invalid && errorText && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: errorTextId,
+            className: classMap.error_text,
+            "data-testid": `${testId}-error-text`,
+            "aria-live": "polite",
+            children: errorText
+          }
+        ),
         allowCustom && /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -81,8 +145,11 @@ const ColorPickerBase = ({
             className: classMap.custom_input,
             value: selected,
             onChange: (e) => onChange(e.target.value),
-            "aria-label": "Custom color picker",
-            "data-testid": `${testId}-custom-input`
+            "aria-label": customInputAriaLabel,
+            "aria-describedby": describedBy,
+            "aria-invalid": invalid || void 0,
+            "data-testid": `${testId}-custom-input`,
+            disabled
           }
         )
       ]
@@ -116,4 +183,4 @@ const classes = {
 const ColorPicker = (props) => /* @__PURE__ */ jsxRuntime.jsx(ColorPickerBase, { ...props, classMap: classes });
 ColorPicker.displayName = "ColorPicker";
 exports.ColorPicker = ColorPicker;
-//# sourceMappingURL=ColorPicker-CzL1SJCT.cjs.map
+//# sourceMappingURL=ColorPicker-j6djvLOC.cjs.map

package/dist/core/ColorPicker-j6djvLOC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-j6djvLOC.cjs","sources":["../../src/components/ColorPicker/ColorPickerBase.tsx","../../src/components/ColorPicker/core/ColorPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { ColorPickerBaseProps } from \"./ColorPicker.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ColorPickerBase: React.FC<ColorPickerBaseProps> = ({\r\n  label = \"Choose a color\",\r\n  colors,\r\n  selected,\r\n  onChange,\r\n  name = \"color-picker\",\r\n  disabled = false,\r\n  size = getDefaultSize(),\r\n  shadow = getDefaultShadow(),\r\n  shape = \"round\",\r\n  allowCustom = false,\r\n  required = false,\r\n  invalid = false,\r\n  helperText,\r\n  errorText,\r\n  customInputAriaLabel = \"Custom color picker\",\r\n  hideLabel = false,\r\n  className = \"\",\r\n  classMap,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"color-picker\",\r\n}) => {\r\n  const legendId = `${testId}-legend`;\r\n  const helperTextId = helperText ? `${testId}-helper-text` : undefined;\r\n  const errorTextId = errorText ? `${testId}-error-text` : undefined;\r\n\r\n  const describedBy =\r\n    [ariaDescribedBy, helperTextId, invalid ? errorTextId : undefined]\r\n      .filter(Boolean)\r\n      .join(\" \") || undefined;\r\n\r\n  const computedAriaLabelledBy =\r\n    ariaLabelledBy ?? (!ariaLabel ? legendId : undefined);\r\n\r\n  const labelClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.swatch,\r\n        classMap[size],\r\n        classMap[shape],\r\n        disabled && classMap.disabled,\r\n      ),\r\n    [classMap, size, shape, disabled],\r\n  );\r\n\r\n  return (\r\n    <fieldset\r\n      className={combineClassNames(\r\n        classMap.color_picker,\r\n        invalid && classMap.invalid,\r\n        disabled && classMap.disabled,\r\n        className,\r\n      )}\r\n      disabled={disabled}\r\n      data-testid={testId}\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={computedAriaLabelledBy}\r\n      aria-describedby={describedBy}\r\n      aria-invalid={invalid || undefined}\r\n    >\r\n      <legend\r\n        id={legendId}\r\n        className={combineClassNames(classMap.legend, hideLabel && \"sr_only\")}\r\n      >\r\n        {label}\r\n      </legend>\r\n\r\n      <div className={classMap.color_picker_grid} role=\"radiogroup\">\r\n        {colors.map((color, i) => {\r\n          const id = `${testId}-color-${i}`;\r\n          const optionLabelId = `${id}-label`;\r\n          const isSelected = selected === color.value;\r\n          const optionDisabled = disabled || color.disabled;\r\n\r\n          return (\r\n            <label\r\n              key={`${color.value}-${i}`}\r\n              className={combineClassNames(\r\n                labelClass,\r\n                optionDisabled && classMap.disabled,\r\n              )}\r\n              htmlFor={id}\r\n              title={color.label}\r\n              data-testid={`${testId}-option-${color.value}`}\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                name={name}\r\n                id={id}\r\n                value={color.value}\r\n                checked={isSelected}\r\n                onChange={() => onChange(color.value)}\r\n                className={classMap.radio_input}\r\n                disabled={optionDisabled}\r\n                aria-describedby={describedBy}\r\n                aria-invalid={invalid || undefined}\r\n                aria-required={required || undefined}\r\n                aria-labelledby={optionLabelId}\r\n              />\r\n\r\n              <span id={optionLabelId} className={\"sr_only\"}>\r\n                {color.label}\r\n              </span>\r\n\r\n              <span\r\n                className={combineClassNames(\r\n                  classMap.preview,\r\n                  classMap[shape],\r\n                  isSelected && classMap.selected,\r\n                  optionDisabled && classMap.disabled,\r\n                  shadow && classMap[`shadow${capitalize(shadow)}`],\r\n                )}\r\n                style={{ backgroundColor: color.value }}\r\n                aria-hidden=\"true\"\r\n              />\r\n            </label>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      {helperText && (\r\n        <div\r\n          id={helperTextId}\r\n          className={classMap.helper_text}\r\n          data-testid={`${testId}-helper-text`}\r\n        >\r\n          {helperText}\r\n        </div>\r\n      )}\r\n\r\n      {invalid && errorText && (\r\n        <div\r\n          id={errorTextId}\r\n          className={classMap.error_text}\r\n          data-testid={`${testId}-error-text`}\r\n          aria-live=\"polite\"\r\n        >\r\n          {errorText}\r\n        </div>\r\n      )}\r\n\r\n      {allowCustom && (\r\n        <input\r\n          type=\"color\"\r\n          className={classMap.custom_input}\r\n          value={selected}\r\n          onChange={(e) => onChange(e.target.value)}\r\n          aria-label={customInputAriaLabel}\r\n          aria-describedby={describedBy}\r\n          aria-invalid={invalid || undefined}\r\n          data-testid={`${testId}-custom-input`}\r\n          disabled={disabled}\r\n        />\r\n      )}\r\n    </fieldset>\r\n  );\r\n};\r\n\r\nColorPickerBase.displayName = \"ColorPickerBase\";\r\nexport default ColorPickerBase;\r\n","import React from \"react\";\r\nimport ColorPickerBase from \"../ColorPickerBase\";\r\nimport \"./ColorPicker.scss\";\r\nimport { ColorPickerProps } from \"../ColorPicker.types\";\r\n\r\nconst classes = {\r\n  color_picker: \"color_picker\",\r\n  legend: \"color_picker_legend\",\r\n  grid: \"color_picker_grid\",\r\n  swatch: \"color_picker_swatch\",\r\n  preview: \"color_picker_preview\",\r\n  radio_input: \"color_picker_radio_input\",\r\n  custom_input: \"color_picker_custom_input\",\r\n  selected: \"color_picker_selected\",\r\n\r\n  xs: \"color_picker_xs\",\r\n  small: \"color_picker_small\",\r\n  medium: \"color_picker_medium\",\r\n  large: \"color_picker_large\",\r\n  xl: \"color_picker_xl\",\r\n\r\n  shadowNone: \"color_picker_shadow-None\",\r\n  shadowLight: \"color_picker_shadow-Light\",\r\n  shadowMedium: \"color_picker_shadow-Medium\",\r\n  shadowStrong: \"color_picker_shadow-Strong\",\r\n  shadowIntense: \"color_picker_shadow-Intense\",\r\n\r\n  pill: \"color_picker_pill\",\r\n  round: \"color_picker_round\",\r\n  square: \"color_picker_square\",\r\n};\r\n\r\nconst ColorPicker: React.FC<ColorPickerProps> = (props) => (\r\n  <ColorPickerBase {...props} classMap={classes} />\r\n);\r\nColorPicker.displayName = \"ColorPicker\";\r\nexport default ColorPicker;\r\n"],"names":["getDefaultSize","getDefaultShadow","useMemo","combineClassNames","jsxs","jsx","capitalize"],"mappings":"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"}

package/dist/core/ColorPicker.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const ColorPicker = require("./ColorPicker-CzL1SJCT.cjs");
+const ColorPicker = require("./ColorPicker-j6djvLOC.cjs");
 module.exports = ColorPicker.ColorPicker;
 //# sourceMappingURL=ColorPicker.cjs.js.map

package/dist/core/ColorPicker.js

@@ -1,4 +1,4 @@
-import { C } from "./ColorPicker-CpHTSayd.js";
+import { C } from "./ColorPicker-BpJgDnaw.js";
 export {
   C as default
 };

package/dist/core/CommandPalette-BBjIib6T.js

@@ -0,0 +1,447 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState, useRef, useEffect, useCallback } from "react";
+import ReactDOM from "react-dom";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { a as getDefaultRounding, d as getDefaultTheme, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
+import { T as TextInput } from "./TextInput-BaiDGrKw.js";
+const CommandPaletteBase = ({
+  commands,
+  placeholder = "Search...",
+  isOpen,
+  onClose,
+  asyncSearch,
+  debounceMs = 300,
+  theme = getDefaultTheme(),
+  rounding = getDefaultRounding(),
+  shadow = getDefaultShadow(),
+  state = "",
+  classMap,
+  TextInputComponent,
+  inputAriaLabel,
+  inputAriaLabelledBy,
+  inputAriaDescribedBy,
+  inputLabel,
+  inputId,
+  listboxId,
+  paletteId,
+  listAriaLabel = "Command suggestions",
+  emptyMessage = "No matching results",
+  resultsAnnouncement = "results available",
+  modal = true,
+  trapFocus = false,
+  restoreFocusOnClose = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-controls": ariaControls,
+  "aria-expanded": ariaExpanded,
+  "aria-activedescendant": ariaActiveDescendant,
+  "data-testid": testId = "command-palette",
+  className,
+  ...rest
+}) => {
+  const reactId = useId();
+  const resolvedPaletteId = paletteId ?? `${testId}-${reactId}-dialog`;
+  const resolvedInputId = inputId ?? `${testId}-${reactId}-input`;
+  const resolvedListboxId = listboxId ?? `${testId}-${reactId}-listbox`;
+  const resolvedLabelId = `${resolvedInputId}-label`;
+  const resolvedStatusId = `${resolvedPaletteId}-status`;
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [portalElement, setPortalElement] = useState(null);
+  const [asyncResults, setAsyncResults] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const debounceRef = useRef(null);
+  const prevFocusRef = useRef(null);
+  const filtered = asyncSearch ? asyncResults : commands.filter((cmd) => {
+    var _a;
+    const q = query.toLowerCase();
+    if (!q) return true;
+    const labelMatch = cmd.label.toLowerCase().includes(q);
+    const keywordMatch = (_a = cmd.keywords) == null ? void 0 : _a.some(
+      (keyword) => keyword.toLowerCase().includes(q)
+    );
+    return labelMatch || Boolean(keywordMatch);
+  });
+  useEffect(() => {
+    var _a;
+    if (filtered.length === 0) {
+      setActiveIndex(-1);
+    } else if (activeIndex < 0 || activeIndex >= filtered.length || ((_a = filtered[activeIndex]) == null ? void 0 : _a.disabled)) {
+      const firstEnabledIndex = filtered.findIndex((item) => !item.disabled);
+      setActiveIndex(firstEnabledIndex);
+    }
+  }, [filtered, activeIndex]);
+  useEffect(() => {
+    if (!asyncSearch) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    const q = query.trim();
+    if (!q) {
+      setAsyncResults([]);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    debounceRef.current = setTimeout(() => {
+      asyncSearch(q).then((results) => {
+        setAsyncResults(results);
+        setIsLoading(false);
+      }).catch(() => {
+        setAsyncResults([]);
+        setIsLoading(false);
+      });
+    }, debounceMs);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query, asyncSearch, debounceMs]);
+  useEffect(() => {
+    if (!isOpen) return;
+    setMounted(true);
+    prevFocusRef.current = document.activeElement;
+    const portal = document.getElementById("widget-portal") || (() => {
+      const el = document.createElement("div");
+      el.id = "widget-portal";
+      document.body.appendChild(el);
+      return el;
+    })();
+    setPortalElement(portal);
+    document.body.classList.add("noScroll");
+    return () => {
+      var _a, _b;
+      document.body.classList.remove("noScroll");
+      setQuery("");
+      setActiveIndex(-1);
+      setMounted(false);
+      if (restoreFocusOnClose) {
+        (_b = (_a = prevFocusRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      }
+    };
+  }, [isOpen, restoreFocusOnClose]);
+  useEffect(() => {
+    if (isOpen && mounted && portalElement && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen, mounted, portalElement]);
+  const getItemId = useCallback(
+    (cmd, index) => cmd.id ? `${resolvedListboxId}-option-${cmd.id}` : `${resolvedListboxId}-option-${index}`,
+    [resolvedListboxId]
+  );
+  const getNextEnabledIndex = useCallback(
+    (startIndex, direction) => {
+      var _a;
+      if (filtered.length === 0) return -1;
+      let nextIndex = startIndex;
+      for (let i = 0; i < filtered.length; i += 1) {
+        nextIndex = (nextIndex + direction + filtered.length) % filtered.length;
+        if (!((_a = filtered[nextIndex]) == null ? void 0 : _a.disabled)) {
+          return nextIndex;
+        }
+      }
+      return -1;
+    },
+    [filtered]
+  );
+  const activateCommand = useCallback(
+    (cmd) => {
+      if (!cmd || cmd.disabled) return;
+      cmd.action();
+      onClose();
+    },
+    [onClose]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        if (filtered.length === 0) return;
+        e.preventDefault();
+        setActiveIndex((prev) => getNextEnabledIndex(prev < 0 ? -1 : prev, 1));
+      } else if (e.key === "ArrowUp") {
+        if (filtered.length === 0) return;
+        e.preventDefault();
+        setActiveIndex((prev) => getNextEnabledIndex(prev < 0 ? 0 : prev, -1));
+      } else if (e.key === "Enter") {
+        if (activeIndex >= 0) {
+          e.preventDefault();
+          activateCommand(filtered[activeIndex]);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        const firstEnabledIndex = filtered.findIndex((item) => !item.disabled);
+        setActiveIndex(firstEnabledIndex);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        const reversedIndex = [...filtered].reverse().findIndex((item) => !item.disabled);
+        if (reversedIndex >= 0) {
+          setActiveIndex(filtered.length - 1 - reversedIndex);
+        }
+      }
+    },
+    [filtered, activeIndex, getNextEnabledIndex, activateCommand, onClose]
+  );
+  const handleContainerKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (trapFocus && e.key === "Tab") {
+        const container = containerRef.current;
+        if (!container) return;
+        const focusable = container.querySelectorAll(
+          [
+            "a[href]",
+            "button:not([disabled])",
+            "input:not([disabled])",
+            "select:not([disabled])",
+            "textarea:not([disabled])",
+            '[tabindex]:not([tabindex="-1"])'
+          ].join(",")
+        );
+        if (focusable.length === 0) {
+          e.preventDefault();
+          return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+        if (!e.shiftKey && active === last) {
+          e.preventDefault();
+          first.focus();
+        } else if (e.shiftKey && active === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      }
+    },
+    [onClose, trapFocus]
+  );
+  if (!isOpen || !mounted || !portalElement) return null;
+  const activeItem = activeIndex >= 0 && filtered[activeIndex] ? filtered[activeIndex] : void 0;
+  const computedActiveDescendant = ariaActiveDescendant ?? (activeItem ? getItemId(activeItem, activeIndex) : void 0);
+  const computedAriaExpanded = typeof ariaExpanded === "boolean" ? ariaExpanded : isOpen;
+  const dialogRole = modal ? "dialog" : "region";
+  const liveMessage = isLoading ? "Searching commands" : filtered.length === 0 ? emptyMessage : `${filtered.length} ${resultsAnnouncement}`;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classMap.overlay,
+        onClick: onClose,
+        "data-testid": `${testId}-overlay`,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...rest,
+            id: resolvedPaletteId,
+            ref: containerRef,
+            className: combineClassNames(
+              classMap.command_palette,
+              classMap[theme],
+              classMap[state],
+              shadow && classMap[`shadow${capitalize(shadow)}`],
+              rounding && classMap[`round${capitalize(rounding)}`],
+              className
+            ),
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: handleContainerKeyDown,
+            role: dialogRole,
+            "aria-modal": modal ? true : void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "aria-controls": ariaControls,
+            "data-testid": testId,
+            children: [
+              inputLabel && /* @__PURE__ */ jsx(
+                "label",
+                {
+                  id: resolvedLabelId,
+                  htmlFor: resolvedInputId,
+                  className: classMap.label,
+                  "data-testid": `${testId}-input-label`,
+                  children: inputLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TextInputComponent,
+                {
+                  ref: inputRef,
+                  id: resolvedInputId,
+                  type: "text",
+                  value: query,
+                  onChange: (valueOrEvent, event) => {
+                    if (typeof valueOrEvent === "string") {
+                      setQuery(valueOrEvent);
+                      return;
+                    }
+                    setQuery(valueOrEvent.target.value ?? (event == null ? void 0 : event.target.value) ?? "");
+                  },
+                  onKeyDown: handleKeyDown,
+                  placeholder,
+                  theme,
+                  state,
+                  shadow: "none",
+                  rounding,
+                  className: classMap.input,
+                  "data-testid": `${testId}-input`,
+                  role: "combobox",
+                  "aria-label": inputAriaLabel,
+                  "aria-labelledby": inputAriaLabelledBy ?? (!inputAriaLabel && inputLabel ? resolvedLabelId : void 0),
+                  "aria-describedby": inputAriaDescribedBy,
+                  "aria-autocomplete": "list",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": computedAriaExpanded,
+                  "aria-controls": resolvedListboxId,
+                  "aria-activedescendant": computedActiveDescendant
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: resolvedStatusId,
+                  className: classMap.srOnly,
+                  "aria-live": "polite",
+                  "aria-atomic": "true",
+                  "data-testid": `${testId}-live-region`,
+                  children: liveMessage
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  id: resolvedListboxId,
+                  className: classMap.list,
+                  role: "listbox",
+                  "aria-label": !ariaLabelledBy ? listAriaLabel : void 0,
+                  "aria-labelledby": ariaLabelledBy,
+                  "aria-busy": isLoading || void 0,
+                  "data-testid": `${testId}-listbox`,
+                  children: isLoading ? /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      className: combineClassNames(classMap.item, classMap.empty),
+                      role: "option",
+                      "aria-disabled": "true",
+                      "aria-selected": "false",
+                      "data-testid": `${testId}-loading`,
+                      children: "Searching…"
+                    }
+                  ) : filtered.length > 0 ? filtered.map((cmd, index) => {
+                    const isActive = index === activeIndex;
+                    const isDisabled = Boolean(cmd.disabled);
+                    const itemId = getItemId(cmd, index);
+                    const descriptionId = cmd["aria-description"] ? `${itemId}-description` : void 0;
+                    return /* @__PURE__ */ jsxs(
+                      "li",
+                      {
+                        id: itemId,
+                        role: "option",
+                        "aria-label": cmd["aria-label"],
+                        "aria-describedby": descriptionId,
+                        "aria-disabled": isDisabled || void 0,
+                        "aria-selected": isActive,
+                        className: combineClassNames(
+                          classMap.item,
+                          classMap[theme],
+                          isActive && classMap.active,
+                          isDisabled && classMap.disabled
+                        ),
+                        onClick: () => activateCommand(cmd),
+                        onMouseEnter: () => {
+                          if (!isDisabled) setActiveIndex(index);
+                        },
+                        "data-testid": `${testId}-option-${index}`,
+                        children: [
+                          cmd.icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, "aria-hidden": "true", children: cmd.icon }),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: classMap.itemLabel,
+                              "data-testid": `${testId}-option-label-${index}`,
+                              children: cmd.label
+                            }
+                          ),
+                          cmd["aria-description"] && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              id: descriptionId,
+                              className: classMap.srOnly,
+                              "data-testid": `${testId}-option-description-${index}`,
+                              children: cmd["aria-description"]
+                            }
+                          )
+                        ]
+                      },
+                      cmd.id ?? `${cmd.label}-${index}`
+                    );
+                  }) : /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      role: "option",
+                      "aria-selected": "false",
+                      "aria-disabled": "true",
+                      className: combineClassNames(classMap.item, classMap.empty),
+                      "data-testid": `${testId}-empty`,
+                      children: emptyMessage
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    portalElement
+  );
+};
+CommandPaletteBase.displayName = "CommandPaletteBase";
+const classes = {
+  overlay: "command_palette_overlay",
+  command_palette: "command_palette",
+  input: "command_palette_input",
+  list: "command_palette_list",
+  item: "command_palette_item",
+  icon: "command_palette_icon",
+  active: "command_palette_active",
+  empty: "command_palette_empty",
+  primary: "command_palette_primary",
+  secondary: "command_palette_secondary",
+  tertiary: "command_palette_tertiary",
+  quaternary: "command_palette_quaternary",
+  success: "command_palette_success",
+  error: "command_palette_error",
+  warning: "command_palette_warning",
+  clear: "command_palette_clear",
+  shadowNone: "command_palette_shadow-None",
+  shadowLight: "command_palette_shadow-Light",
+  shadowMedium: "command_palette_shadow-Medium",
+  shadowStrong: "command_palette_shadow-Strong",
+  shadowIntense: "command_palette_shadow-Intense",
+  roundNone: "command_palette_round-None",
+  roundSmall: "command_palette_round-Small",
+  roundMedium: "command_palette_round-Medium",
+  roundLarge: "command_palette_round-Large"
+};
+const CommandPalette = (props) => /* @__PURE__ */ jsx(
+  CommandPaletteBase,
+  {
+    ...props,
+    classMap: classes,
+    TextInputComponent: TextInput
+  }
+);
+CommandPalette.displayName = "CommandPalette";
+export {
+  CommandPalette as C
+};
+//# sourceMappingURL=CommandPalette-BBjIib6T.js.map