eidos-ui 0.1.0

package/dist/chunk-XMRMCWSQ.js

@@ -0,0 +1,454 @@
+import {
+  Input
+} from "./chunk-A35Y5MRJ.js";
+import {
+  Dropdown
+} from "./chunk-SXF3TCYA.js";
+
+// src/components/Combobox/Combobox.component.tsx
+import { useState, useCallback, useRef, useEffect, useMemo, useId } from "react";
+import { Check, ChevronDown, X, Loader2, CircleAlert } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Combobox = ({
+  options = [],
+  value,
+  defaultValue,
+  onChange,
+  onSearch,
+  placeholder = "Search or select\u2026",
+  loading = false,
+  loadingText = "Searching\u2026",
+  emptyText = "No results found",
+  allowFreeText = false,
+  clearable = true,
+  disabled = false,
+  size = "md",
+  label,
+  error,
+  hint,
+  fullWidth = false,
+  className = "",
+  maxHeight = "300px",
+  renderOption
+}) => {
+  const uid = useId();
+  const containerRef = useRef(null);
+  const comboboxTriggerRef = useRef(null);
+  const dropdownSpanRef = useRef(null);
+  const inputRef = useRef(null);
+  const optionRefs = useRef([]);
+  const isOpenRef = useRef(false);
+  const isControlled = value !== void 0;
+  const getInitialInputValue = () => {
+    const seed = isControlled ? value : defaultValue;
+    if (!seed) return "";
+    const match = options.find((o) => o.value === seed);
+    return match ? match.label : allowFreeText ? seed : "";
+  };
+  const getInitialCommittedValue = () => {
+    return isControlled ? value ?? "" : defaultValue ?? "";
+  };
+  const [inputValue, _setInputValue] = useState(getInitialInputValue);
+  const inputValueRef = useRef(inputValue);
+  const setInputValue = useCallback((v) => {
+    inputValueRef.current = v;
+    _setInputValue(v);
+  }, []);
+  const [committedValue, _setCommittedValue] = useState(getInitialCommittedValue);
+  const committedValueRef = useRef(committedValue);
+  const setCommittedValue = useCallback((v) => {
+    committedValueRef.current = v;
+    _setCommittedValue(v);
+  }, []);
+  const [isOpen, setIsOpen] = useState(false);
+  const [menuKey, setMenuKey] = useState(0);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  useEffect(() => {
+    if (!isControlled) return;
+    const v = value ?? "";
+    const match = options.find((o) => o.value === v);
+    const label2 = match ? match.label : allowFreeText ? v : "";
+    setInputValue(label2);
+    setCommittedValue(v);
+  }, [value, isControlled, options, allowFreeText, setInputValue, setCommittedValue]);
+  const filteredOptions = useMemo(() => {
+    const q = inputValue.toLowerCase();
+    if (!q) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, inputValue]);
+  useEffect(() => {
+    setFocusedIndex(-1);
+  }, [filteredOptions]);
+  useEffect(() => {
+    optionRefs.current = optionRefs.current.slice(0, filteredOptions.length);
+  }, [filteredOptions.length]);
+  const optionEntries = useMemo(() => {
+    const entries = [];
+    const hasGroups = filteredOptions.some((o) => o.group);
+    if (!hasGroups) {
+      filteredOptions.forEach((option, index) => {
+        entries.push({ type: "option", option, index, key: option.id });
+      });
+      return entries;
+    }
+    const groupMap = /* @__PURE__ */ new Map();
+    for (const option of filteredOptions) {
+      const g = option.group ?? null;
+      if (!groupMap.has(g)) groupMap.set(g, []);
+      groupMap.get(g).push(option);
+    }
+    let optionIndex = 0;
+    for (const [group, opts] of groupMap.entries()) {
+      if (group !== null) {
+        entries.push({ type: "group", group, key: `group-${group}` });
+      }
+      for (const option of opts) {
+        entries.push({ type: "option", option, index: optionIndex++, key: option.id });
+      }
+    }
+    return entries;
+  }, [filteredOptions]);
+  const openDropdown = useCallback(() => {
+    if (isOpenRef.current || disabled) return;
+    dropdownSpanRef.current?.click();
+    isOpenRef.current = true;
+    setIsOpen(true);
+  }, [disabled]);
+  const closeDropdown = useCallback(
+    (revertInput = false) => {
+      isOpenRef.current = false;
+      setIsOpen(false);
+      setFocusedIndex(-1);
+      setMenuKey((prev) => prev + 1);
+      if (revertInput) {
+        const match = options.find((o) => o.value === committedValueRef.current);
+        setInputValue(match ? match.label : allowFreeText ? committedValueRef.current : "");
+      }
+    },
+    [options, allowFreeText, setInputValue]
+  );
+  useEffect(() => {
+    const handleMouseDown = (e) => {
+      if (!isOpenRef.current) return;
+      if (e.defaultPrevented) return;
+      if (containerRef.current?.contains(e.target)) return;
+      isOpenRef.current = false;
+      setIsOpen(false);
+      setFocusedIndex(-1);
+      setMenuKey((prev) => prev + 1);
+      const current = inputValueRef.current;
+      const committed = committedValueRef.current;
+      if (!allowFreeText) {
+        const match = options.find((o) => o.label.toLowerCase() === current.toLowerCase());
+        if (match) {
+          if (match.value !== committed) {
+            setCommittedValue(match.value);
+            onChange?.(match.value);
+            setInputValue(match.label);
+          }
+        } else {
+          const revertMatch = options.find((o) => o.value === committed);
+          setInputValue(revertMatch ? revertMatch.label : "");
+        }
+      } else {
+        if (current !== committed) {
+          setCommittedValue(current);
+          onChange?.(current);
+        }
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [allowFreeText, options, onChange, setCommittedValue, setInputValue]);
+  const handleFocus = useCallback(() => {
+    openDropdown();
+  }, [openDropdown]);
+  const handleChange = useCallback(
+    (e) => {
+      const query = e.target.value;
+      setInputValue(query);
+      onSearch?.(query);
+      if (!isOpenRef.current) openDropdown();
+    },
+    [setInputValue, onSearch, openDropdown]
+  );
+  const handleBlur = useCallback(() => {
+    const current = inputValueRef.current;
+    const committed = committedValueRef.current;
+    setTimeout(() => {
+      if (containerRef.current?.contains(document.activeElement)) return;
+      isOpenRef.current = false;
+      setIsOpen(false);
+      setFocusedIndex(-1);
+      setMenuKey((prev) => prev + 1);
+      if (!allowFreeText) {
+        const match = options.find((o) => o.label.toLowerCase() === current.toLowerCase());
+        if (match) {
+          if (match.value !== committed) {
+            setCommittedValue(match.value);
+            onChange?.(match.value);
+            setInputValue(match.label);
+          } else {
+            setInputValue(match.label);
+          }
+        } else {
+          const revertMatch = options.find((o) => o.value === committed);
+          setInputValue(revertMatch ? revertMatch.label : "");
+        }
+      } else {
+        if (current !== committed) {
+          setCommittedValue(current);
+          onChange?.(current);
+        }
+      }
+    }, 0);
+  }, [allowFreeText, options, onChange, setCommittedValue, setInputValue]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpenRef.current) {
+            openDropdown();
+            setFocusedIndex(0);
+          } else {
+            setFocusedIndex((prev) => {
+              const next = prev < filteredOptions.length - 1 ? prev + 1 : 0;
+              setTimeout(
+                () => optionRefs.current[next]?.scrollIntoView({
+                  block: "nearest",
+                  behavior: "smooth"
+                }),
+                0
+              );
+              return next;
+            });
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!isOpenRef.current) {
+            openDropdown();
+            setFocusedIndex(filteredOptions.length - 1);
+          } else {
+            setFocusedIndex((prev) => {
+              const next = prev > 0 ? prev - 1 : filteredOptions.length - 1;
+              setTimeout(
+                () => optionRefs.current[next]?.scrollIntoView({
+                  block: "nearest",
+                  behavior: "smooth"
+                }),
+                0
+              );
+              return next;
+            });
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (isOpenRef.current && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+            handleOptionSelect(filteredOptions[focusedIndex]);
+          } else if (allowFreeText && inputValue.trim()) {
+            const trimmed = inputValue.trim();
+            setCommittedValue(trimmed);
+            onChange?.(trimmed);
+            closeDropdown();
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          if (isOpenRef.current) {
+            closeDropdown(
+              true
+              /* revert */
+            );
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      disabled,
+      filteredOptions,
+      focusedIndex,
+      allowFreeText,
+      inputValue,
+      onChange,
+      openDropdown,
+      closeDropdown,
+      setCommittedValue
+    ]
+  );
+  const handleOptionSelect = useCallback(
+    (option) => {
+      if (option.disabled) return;
+      setInputValue(option.label);
+      setCommittedValue(option.value);
+      onChange?.(option.value);
+      closeDropdown();
+      inputRef.current?.focus();
+    },
+    [onChange, closeDropdown, setInputValue, setCommittedValue]
+  );
+  const handleClearClick = useCallback(() => {
+    setInputValue("");
+    setCommittedValue("");
+    onChange?.("");
+    inputRef.current?.focus();
+  }, [onChange, setInputValue, setCommittedValue]);
+  const handleChevronClick = useCallback(() => {
+    if (isOpenRef.current) {
+      closeDropdown();
+    } else {
+      openDropdown();
+    }
+  }, [closeDropdown, openDropdown]);
+  const renderOptionItem = useCallback(
+    (option, index) => {
+      const isSelected = option.value === committedValue;
+      const isFocused = index === focusedIndex;
+      const classes = [
+        "eidos-combobox-option",
+        isSelected && "eidos-combobox-option--selected",
+        isFocused && "eidos-combobox-option--focused",
+        option.disabled && "eidos-combobox-option--disabled"
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (el) => {
+            optionRefs.current[index] = el;
+          },
+          className: classes,
+          onClick: () => handleOptionSelect(option),
+          onMouseEnter: () => !option.disabled && setFocusedIndex(index),
+          role: "option",
+          "aria-selected": isSelected,
+          "aria-disabled": option.disabled,
+          id: `${uid}-option-${index}`,
+          children: renderOption ? renderOption(option) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Check,
+              {
+                className: `eidos-combobox-option-icon${!isSelected ? " eidos-combobox-option-icon--hidden" : ""}`
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "eidos-combobox-option-label", children: option.label }),
+            option.description && /* @__PURE__ */ jsx("span", { className: "eidos-combobox-option-description", children: option.description })
+          ] })
+        },
+        option.id
+      );
+    },
+    [committedValue, focusedIndex, handleOptionSelect, renderOption, uid]
+  );
+  const dropdownContent = useMemo(() => {
+    if (loading) {
+      return /* @__PURE__ */ jsxs("div", { className: "eidos-combobox-loading", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "eidos-combobox-loading-icon" }),
+        /* @__PURE__ */ jsx("span", { children: loadingText })
+      ] });
+    }
+    if (filteredOptions.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: "eidos-combobox-empty", children: emptyText });
+    }
+    return optionEntries.map((entry) => {
+      if (entry.type === "group") {
+        return /* @__PURE__ */ jsx("div", { className: "eidos-combobox-option-group-label", children: entry.group }, entry.key);
+      }
+      return renderOptionItem(entry.option, entry.index);
+    });
+  }, [loading, loadingText, filteredOptions.length, emptyText, optionEntries, renderOptionItem]);
+  const hasClearableValue = clearable && !!inputValue;
+  const posIcon = hasClearableValue ? X : ChevronDown;
+  const posIconClick = hasClearableValue ? handleClearClick : handleChevronClick;
+  const containerClasses = [
+    "eidos-combobox",
+    fullWidth && "eidos-combobox--fullWidth",
+    error && "eidos-combobox--error",
+    disabled && "eidos-combobox--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const maxHeightValue = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClasses,
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      children: [
+        /* @__PURE__ */ jsxs("div", { ref: comboboxTriggerRef, className: "eidos-combobox-trigger", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              value: inputValue,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              size,
+              fullWidth: true,
+              label,
+              clearable: false,
+              isSelect: false,
+              posIcon,
+              posIconButton: true,
+              onPosIconClick: posIconClick,
+              "aria-autocomplete": "list",
+              "aria-controls": `${uid}-listbox`,
+              "aria-activedescendant": focusedIndex >= 0 ? `${uid}-option-${focusedIndex}` : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Dropdown,
+            {
+              trigger: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ref: dropdownSpanRef,
+                  className: "eidos-combobox-dropdown-anchor",
+                  "aria-hidden": "true"
+                }
+              ),
+              content: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: `${uid}-listbox`,
+                  className: "eidos-combobox-options",
+                  role: "listbox",
+                  "aria-label": label ?? "Options",
+                  onMouseDown: (e) => e.preventDefault(),
+                  children: dropdownContent
+                }
+              ),
+              triggerRef: comboboxTriggerRef,
+              maxHeight: maxHeightValue,
+              autoWidth: true,
+              closeOnClickOutside: false,
+              closeOnEscape: false
+            },
+            menuKey
+          )
+        ] }),
+        hint && !error && /* @__PURE__ */ jsx("span", { className: "eidos-combobox-hint", children: hint }),
+        error && /* @__PURE__ */ jsxs("span", { className: "eidos-combobox-error-message", children: [
+          /* @__PURE__ */ jsx(CircleAlert, { className: "eidos-combobox-error-icon" }),
+          error
+        ] })
+      ]
+    }
+  );
+};
+Combobox.displayName = "Combobox";
+
+export {
+  Combobox
+};
+//# sourceMappingURL=chunk-XMRMCWSQ.js.map

package/dist/chunk-XMRMCWSQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Combobox/Combobox.component.tsx"],"sourcesContent":["import React, { useState, useCallback, useRef, useEffect, useMemo, useId } from 'react';\r\nimport { Check, ChevronDown, X, Loader2, CircleAlert } from 'lucide-react';\r\nimport { Input } from '../Input/Input.component';\r\nimport { Dropdown } from '../Dropdown/Dropdown.component';\r\nimport type { ComboboxProps, ComboboxOption } from './Combobox.types';\r\nimport './Combobox.scss';\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\ntype OptionEntry =\r\n  | { type: 'group'; group: string; key: string }\r\n  | { type: 'option'; option: ComboboxOption; index: number; key: string };\r\n\r\n// ─── Component ───────────────────────────────────────────────────────────────\r\n\r\nexport const Combobox: React.FC<ComboboxProps> = ({\r\n  options = [],\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  onSearch,\r\n  placeholder = 'Search or select…',\r\n  loading = false,\r\n  loadingText = 'Searching…',\r\n  emptyText = 'No results found',\r\n  allowFreeText = false,\r\n  clearable = true,\r\n  disabled = false,\r\n  size = 'md',\r\n  label,\r\n  error,\r\n  hint,\r\n  fullWidth = false,\r\n  className = '',\r\n  maxHeight = '300px',\r\n  renderOption,\r\n}) => {\r\n  const uid = useId();\r\n\r\n  // ─── Refs ─────────────────────────────────────────────────────────────────\r\n\r\n  /** Entire combobox wrapper - used for click-outside detection */\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  /** The trigger wrapper div - passed to Dropdown as externalTriggerRef for width */\r\n  const comboboxTriggerRef = useRef<HTMLDivElement>(null);\r\n\r\n  /** The 0-height span that IS the Dropdown trigger element - programmatically clicked to open */\r\n  const dropdownSpanRef = useRef<HTMLSpanElement>(null);\r\n\r\n  /** Native input element */\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n  /** Focusable option divs for scroll-into-view */\r\n  const optionRefs = useRef<(HTMLDivElement | null)[]>([]);\r\n\r\n  /**\r\n   * Synchronous open-state flag.\r\n   * React state updates are async; reading this ref inside event handlers\r\n   * gives us the true current value without waiting for a re-render.\r\n   */\r\n  const isOpenRef = useRef(false);\r\n\r\n  // ─── State ────────────────────────────────────────────────────────────────\r\n\r\n  const isControlled = value !== undefined;\r\n\r\n  const getInitialInputValue = (): string => {\r\n    const seed = isControlled ? value : defaultValue;\r\n    if (!seed) return '';\r\n    const match = options.find((o) => o.value === seed);\r\n    return match ? match.label : allowFreeText ? seed : '';\r\n  };\r\n\r\n  const getInitialCommittedValue = (): string => {\r\n    return isControlled ? (value ?? '') : (defaultValue ?? '');\r\n  };\r\n\r\n  const [inputValue, _setInputValue] = useState<string>(getInitialInputValue);\r\n  const inputValueRef = useRef<string>(inputValue);\r\n  const setInputValue = useCallback((v: string) => {\r\n    inputValueRef.current = v;\r\n    _setInputValue(v);\r\n  }, []);\r\n\r\n  const [committedValue, _setCommittedValue] = useState<string>(getInitialCommittedValue);\r\n  const committedValueRef = useRef<string>(committedValue);\r\n  const setCommittedValue = useCallback((v: string) => {\r\n    committedValueRef.current = v;\r\n    _setCommittedValue(v);\r\n  }, []);\r\n\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [menuKey, setMenuKey] = useState(0);\r\n  const [focusedIndex, setFocusedIndex] = useState(-1);\r\n\r\n  // ─── Sync controlled value ────────────────────────────────────────────────\r\n\r\n  useEffect(() => {\r\n    if (!isControlled) return;\r\n    const v = value ?? '';\r\n    const match = options.find((o) => o.value === v);\r\n    const label = match ? match.label : allowFreeText ? v : '';\r\n    setInputValue(label);\r\n    setCommittedValue(v);\r\n  }, [value, isControlled, options, allowFreeText, setInputValue, setCommittedValue]);\r\n\r\n  // ─── Derived: filtered options ────────────────────────────────────────────\r\n\r\n  const filteredOptions = useMemo<ComboboxOption[]>(() => {\r\n    const q = inputValue.toLowerCase();\r\n    if (!q) return options;\r\n    return options.filter((o) => o.label.toLowerCase().includes(q));\r\n  }, [options, inputValue]);\r\n\r\n  // Reset focused index when the filtered set changes\r\n  useEffect(() => {\r\n    setFocusedIndex(-1);\r\n  }, [filteredOptions]);\r\n\r\n  // Keep optionRefs array in sync with filteredOptions length\r\n  useEffect(() => {\r\n    optionRefs.current = optionRefs.current.slice(0, filteredOptions.length);\r\n  }, [filteredOptions.length]);\r\n\r\n  // ─── Derived: option entries (with group headers) ─────────────────────────\r\n\r\n  const optionEntries = useMemo<OptionEntry[]>(() => {\r\n    const entries: OptionEntry[] = [];\r\n    const hasGroups = filteredOptions.some((o) => o.group);\r\n\r\n    if (!hasGroups) {\r\n      filteredOptions.forEach((option, index) => {\r\n        entries.push({ type: 'option', option, index, key: option.id });\r\n      });\r\n      return entries;\r\n    }\r\n\r\n    // Build ordered group map while preserving insertion order\r\n    const groupMap = new Map<string | null, ComboboxOption[]>();\r\n    for (const option of filteredOptions) {\r\n      const g = option.group ?? null;\r\n      if (!groupMap.has(g)) groupMap.set(g, []);\r\n      groupMap.get(g)!.push(option);\r\n    }\r\n\r\n    let optionIndex = 0;\r\n    for (const [group, opts] of groupMap.entries()) {\r\n      if (group !== null) {\r\n        entries.push({ type: 'group', group, key: `group-${group}` });\r\n      }\r\n      for (const option of opts) {\r\n        entries.push({ type: 'option', option, index: optionIndex++, key: option.id });\r\n      }\r\n    }\r\n\r\n    return entries;\r\n  }, [filteredOptions]);\r\n\r\n  // ─── Open / Close helpers ─────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Open the dropdown by programmatically clicking the 0-height span trigger.\r\n   * The click bubbles to div.eidos-dropdown-trigger → Dropdown.handleTriggerClick → opens.\r\n   *\r\n   * We set isOpenRef AFTER the synthetic click so that the Dropdown's toggle\r\n   * handler fires while isOpenRef is still false (allowing it to open).\r\n   */\r\n  const openDropdown = useCallback(() => {\r\n    if (isOpenRef.current || disabled) return;\r\n    dropdownSpanRef.current?.click(); // opens the Dropdown (bubbles to trigger)\r\n    isOpenRef.current = true;\r\n    setIsOpen(true);\r\n  }, [disabled]);\r\n\r\n  /**\r\n   * Close the dropdown by remounting it (menuKey increment resets internal state).\r\n   * Optionally revert inputValue to the last committed value.\r\n   */\r\n  const closeDropdown = useCallback(\r\n    (revertInput = false) => {\r\n      isOpenRef.current = false;\r\n      setIsOpen(false);\r\n      setFocusedIndex(-1);\r\n      setMenuKey((prev) => prev + 1);\r\n\r\n      if (revertInput) {\r\n        const match = options.find((o) => o.value === committedValueRef.current);\r\n        setInputValue(match ? match.label : allowFreeText ? committedValueRef.current : '');\r\n      }\r\n    },\r\n    [options, allowFreeText, setInputValue],\r\n  );\r\n\r\n  // ─── Click-outside detection ──────────────────────────────────────────────\r\n\r\n  useEffect(() => {\r\n    const handleMouseDown = (e: MouseEvent) => {\r\n      if (!isOpenRef.current) return;\r\n      // defaultPrevented is set by the listbox's onMouseDown - means the user\r\n      // clicked an option in the portal, not truly outside the combobox.\r\n      if (e.defaultPrevented) return;\r\n      if (containerRef.current?.contains(e.target as Node)) return;\r\n\r\n      // Focus leaving to a non-focusable target: validate and close\r\n      isOpenRef.current = false;\r\n      setIsOpen(false);\r\n      setFocusedIndex(-1);\r\n      setMenuKey((prev) => prev + 1);\r\n\r\n      const current = inputValueRef.current;\r\n      const committed = committedValueRef.current;\r\n\r\n      if (!allowFreeText) {\r\n        const match = options.find((o) => o.label.toLowerCase() === current.toLowerCase());\r\n        if (match) {\r\n          if (match.value !== committed) {\r\n            setCommittedValue(match.value);\r\n            onChange?.(match.value);\r\n            setInputValue(match.label);\r\n          }\r\n        } else {\r\n          const revertMatch = options.find((o) => o.value === committed);\r\n          setInputValue(revertMatch ? revertMatch.label : '');\r\n        }\r\n      } else {\r\n        if (current !== committed) {\r\n          setCommittedValue(current);\r\n          onChange?.(current);\r\n        }\r\n      }\r\n    };\r\n\r\n    document.addEventListener('mousedown', handleMouseDown);\r\n    return () => document.removeEventListener('mousedown', handleMouseDown);\r\n  }, [allowFreeText, options, onChange, setCommittedValue, setInputValue]);\r\n\r\n  // ─── Input handlers ───────────────────────────────────────────────────────\r\n\r\n  const handleFocus = useCallback(() => {\r\n    openDropdown();\r\n  }, [openDropdown]);\r\n\r\n  const handleChange = useCallback(\r\n    (e: React.ChangeEvent<HTMLInputElement>) => {\r\n      const query = e.target.value;\r\n      setInputValue(query);\r\n      onSearch?.(query);\r\n      if (!isOpenRef.current) openDropdown();\r\n    },\r\n    [setInputValue, onSearch, openDropdown],\r\n  );\r\n\r\n  /**\r\n   * On blur, validate the typed value against options.\r\n   * A 0ms defer ensures a click on a posIcon button (X / chevron) inside the\r\n   * Input completes its onClick before we run close logic, so we can check\r\n   * document.activeElement reliably.\r\n   */\r\n  const handleBlur = useCallback(() => {\r\n    const current = inputValueRef.current;\r\n    const committed = committedValueRef.current;\r\n\r\n    setTimeout(() => {\r\n      // If focus came back inside the container (e.g., posIcon button clicked),\r\n      // don't close or validate yet.\r\n      if (containerRef.current?.contains(document.activeElement)) return;\r\n\r\n      // Close\r\n      isOpenRef.current = false;\r\n      setIsOpen(false);\r\n      setFocusedIndex(-1);\r\n      setMenuKey((prev) => prev + 1);\r\n\r\n      // Validate\r\n      if (!allowFreeText) {\r\n        const match = options.find((o) => o.label.toLowerCase() === current.toLowerCase());\r\n        if (match) {\r\n          if (match.value !== committed) {\r\n            setCommittedValue(match.value);\r\n            onChange?.(match.value);\r\n            setInputValue(match.label);\r\n          } else {\r\n            // Normalize the display label (fix casing)\r\n            setInputValue(match.label);\r\n          }\r\n        } else {\r\n          // No match - revert to last committed value\r\n          const revertMatch = options.find((o) => o.value === committed);\r\n          setInputValue(revertMatch ? revertMatch.label : '');\r\n        }\r\n      } else {\r\n        // allowFreeText: commit whatever the user typed\r\n        if (current !== committed) {\r\n          setCommittedValue(current);\r\n          onChange?.(current);\r\n        }\r\n      }\r\n    }, 0);\r\n  }, [allowFreeText, options, onChange, setCommittedValue, setInputValue]);\r\n\r\n  const handleKeyDown = useCallback(\r\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (disabled) return;\r\n\r\n      switch (e.key) {\r\n        case 'ArrowDown':\r\n          e.preventDefault();\r\n          if (!isOpenRef.current) {\r\n            openDropdown();\r\n            setFocusedIndex(0);\r\n          } else {\r\n            setFocusedIndex((prev) => {\r\n              const next = prev < filteredOptions.length - 1 ? prev + 1 : 0;\r\n              setTimeout(\r\n                () =>\r\n                  optionRefs.current[next]?.scrollIntoView({\r\n                    block: 'nearest',\r\n                    behavior: 'smooth',\r\n                  }),\r\n                0,\r\n              );\r\n              return next;\r\n            });\r\n          }\r\n          break;\r\n\r\n        case 'ArrowUp':\r\n          e.preventDefault();\r\n          if (!isOpenRef.current) {\r\n            openDropdown();\r\n            setFocusedIndex(filteredOptions.length - 1);\r\n          } else {\r\n            setFocusedIndex((prev) => {\r\n              const next = prev > 0 ? prev - 1 : filteredOptions.length - 1;\r\n              setTimeout(\r\n                () =>\r\n                  optionRefs.current[next]?.scrollIntoView({\r\n                    block: 'nearest',\r\n                    behavior: 'smooth',\r\n                  }),\r\n                0,\r\n              );\r\n              return next;\r\n            });\r\n          }\r\n          break;\r\n\r\n        case 'Enter':\r\n          e.preventDefault();\r\n          if (isOpenRef.current && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {\r\n            handleOptionSelect(filteredOptions[focusedIndex]);\r\n          } else if (allowFreeText && inputValue.trim()) {\r\n            const trimmed = inputValue.trim();\r\n            setCommittedValue(trimmed);\r\n            onChange?.(trimmed);\r\n            closeDropdown();\r\n          }\r\n          break;\r\n\r\n        case 'Escape':\r\n          e.preventDefault();\r\n          if (isOpenRef.current) {\r\n            closeDropdown(true /* revert */);\r\n          }\r\n          break;\r\n\r\n        default:\r\n          break;\r\n      }\r\n    },\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [\r\n      disabled,\r\n      filteredOptions,\r\n      focusedIndex,\r\n      allowFreeText,\r\n      inputValue,\r\n      onChange,\r\n      openDropdown,\r\n      closeDropdown,\r\n      setCommittedValue,\r\n    ],\r\n  );\r\n\r\n  // ─── Option selection ─────────────────────────────────────────────────────\r\n\r\n  const handleOptionSelect = useCallback(\r\n    (option: ComboboxOption) => {\r\n      if (option.disabled) return;\r\n      setInputValue(option.label);\r\n      setCommittedValue(option.value);\r\n      onChange?.(option.value);\r\n      closeDropdown();\r\n      // Return focus to the input so the user can continue interacting\r\n      inputRef.current?.focus();\r\n    },\r\n    [onChange, closeDropdown, setInputValue, setCommittedValue],\r\n  );\r\n\r\n  // ─── Clear ────────────────────────────────────────────────────────────────\r\n\r\n  const handleClearClick = useCallback(() => {\r\n    setInputValue('');\r\n    setCommittedValue('');\r\n    onChange?.('');\r\n    // Re-focus input so the user can immediately start typing again\r\n    inputRef.current?.focus();\r\n  }, [onChange, setInputValue, setCommittedValue]);\r\n\r\n  // ─── Chevron toggle ───────────────────────────────────────────────────────\r\n\r\n  const handleChevronClick = useCallback(() => {\r\n    if (isOpenRef.current) {\r\n      closeDropdown();\r\n    } else {\r\n      openDropdown();\r\n    }\r\n  }, [closeDropdown, openDropdown]);\r\n\r\n  // ─── Render: individual option ────────────────────────────────────────────\r\n\r\n  const renderOptionItem = useCallback(\r\n    (option: ComboboxOption, index: number): React.ReactNode => {\r\n      const isSelected = option.value === committedValue;\r\n      const isFocused = index === focusedIndex;\r\n\r\n      const classes = [\r\n        'eidos-combobox-option',\r\n        isSelected && 'eidos-combobox-option--selected',\r\n        isFocused && 'eidos-combobox-option--focused',\r\n        option.disabled && 'eidos-combobox-option--disabled',\r\n      ]\r\n        .filter(Boolean)\r\n        .join(' ');\r\n\r\n      return (\r\n        <div\r\n          key={option.id}\r\n          ref={(el) => {\r\n            optionRefs.current[index] = el;\r\n          }}\r\n          className={classes}\r\n          onClick={() => handleOptionSelect(option)}\r\n          onMouseEnter={() => !option.disabled && setFocusedIndex(index)}\r\n          role=\"option\"\r\n          aria-selected={isSelected}\r\n          aria-disabled={option.disabled}\r\n          id={`${uid}-option-${index}`}\r\n        >\r\n          {renderOption ? (\r\n            renderOption(option)\r\n          ) : (\r\n            <>\r\n              <Check\r\n                className={`eidos-combobox-option-icon${\r\n                  !isSelected ? ' eidos-combobox-option-icon--hidden' : ''\r\n                }`}\r\n              />\r\n              <span className=\"eidos-combobox-option-label\">{option.label}</span>\r\n              {option.description && (\r\n                <span className=\"eidos-combobox-option-description\">{option.description}</span>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n      );\r\n    },\r\n    [committedValue, focusedIndex, handleOptionSelect, renderOption, uid],\r\n  );\r\n\r\n  // ─── Render: dropdown content ─────────────────────────────────────────────\r\n\r\n  const dropdownContent = useMemo(() => {\r\n    if (loading) {\r\n      return (\r\n        <div className=\"eidos-combobox-loading\">\r\n          <Loader2 className=\"eidos-combobox-loading-icon\" />\r\n          <span>{loadingText}</span>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (filteredOptions.length === 0) {\r\n      return <div className=\"eidos-combobox-empty\">{emptyText}</div>;\r\n    }\r\n\r\n    return optionEntries.map((entry) => {\r\n      if (entry.type === 'group') {\r\n        return (\r\n          <div key={entry.key} className=\"eidos-combobox-option-group-label\">\r\n            {entry.group}\r\n          </div>\r\n        );\r\n      }\r\n      return renderOptionItem(entry.option, entry.index);\r\n    });\r\n  }, [loading, loadingText, filteredOptions.length, emptyText, optionEntries, renderOptionItem]);\r\n\r\n  // ─── posIcon / posIconButton wiring ───────────────────────────────────────\r\n\r\n  const hasClearableValue = clearable && !!inputValue;\r\n  const posIcon = hasClearableValue ? X : ChevronDown;\r\n  const posIconClick = hasClearableValue ? handleClearClick : handleChevronClick;\r\n\r\n  // ─── CSS classes ──────────────────────────────────────────────────────────\r\n\r\n  const containerClasses = [\r\n    'eidos-combobox',\r\n    fullWidth && 'eidos-combobox--fullWidth',\r\n    error && 'eidos-combobox--error',\r\n    disabled && 'eidos-combobox--disabled',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const maxHeightValue = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\r\n\r\n  // ─── Render ───────────────────────────────────────────────────────────────\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={containerClasses}\r\n      aria-expanded={isOpen}\r\n      aria-haspopup=\"listbox\"\r\n    >\r\n      <div ref={comboboxTriggerRef} className=\"eidos-combobox-trigger\">\r\n        {/*\r\n          The Input is a direct child of eidos-combobox-trigger.\r\n          It is NOT inside the Dropdown trigger div, so clicking it\r\n          never bubbles to Dropdown.handleTriggerClick and never\r\n          accidentally toggles the dropdown closed mid-edit.\r\n        */}\r\n        <Input\r\n          ref={inputRef}\r\n          value={inputValue}\r\n          onChange={handleChange}\r\n          onFocus={handleFocus}\r\n          onBlur={handleBlur}\r\n          onKeyDown={handleKeyDown}\r\n          placeholder={placeholder}\r\n          disabled={disabled}\r\n          size={size}\r\n          fullWidth\r\n          label={label}\r\n          clearable={false} // we render our own clear via posIcon\r\n          isSelect={false}\r\n          posIcon={posIcon}\r\n          posIconButton\r\n          onPosIconClick={posIconClick}\r\n          aria-autocomplete=\"list\"\r\n          aria-controls={`${uid}-listbox`}\r\n          aria-activedescendant={focusedIndex >= 0 ? `${uid}-option-${focusedIndex}` : undefined}\r\n        />\r\n\r\n        {/*\r\n          The Dropdown trigger is a 0-height span placed AFTER the Input\r\n          in the normal document flow. Its getBoundingClientRect sits at\r\n          exactly the bottom edge of the Input, giving the Dropdown correct\r\n          placement without any click-toggle collision with the Input above.\r\n          closeOnClickOutside and closeOnEscape are disabled because we own\r\n          those interactions in our mousedown listener and onKeyDown handler.\r\n        */}\r\n        <Dropdown\r\n          key={menuKey}\r\n          trigger={\r\n            <span\r\n              ref={dropdownSpanRef}\r\n              className=\"eidos-combobox-dropdown-anchor\"\r\n              aria-hidden=\"true\"\r\n            />\r\n          }\r\n          content={\r\n            <div\r\n              id={`${uid}-listbox`}\r\n              className=\"eidos-combobox-options\"\r\n              role=\"listbox\"\r\n              aria-label={label ?? 'Options'}\r\n              // Prevent the input from blurring when the user clicks an option,\r\n              // and mark this event so the click-outside handler ignores it.\r\n              onMouseDown={(e) => e.preventDefault()}\r\n            >\r\n              {dropdownContent}\r\n            </div>\r\n          }\r\n          triggerRef={comboboxTriggerRef as React.RefObject<HTMLElement | null>}\r\n          maxHeight={maxHeightValue}\r\n          autoWidth\r\n          closeOnClickOutside={false}\r\n          closeOnEscape={false}\r\n        />\r\n      </div>\r\n\r\n      {hint && !error && <span className=\"eidos-combobox-hint\">{hint}</span>}\r\n      {error && (\r\n        <span className=\"eidos-combobox-error-message\">\r\n          <CircleAlert className=\"eidos-combobox-error-icon\" />\r\n          {error}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nCombobox.displayName = 'Combobox';\r\n"],"mappings":"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","names":["label"]}

package/dist/chunk-XSGUFMT4.js

@@ -0,0 +1,21 @@
+// src/utils/renderIcon.tsx
+import { icons } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var renderIcon = (icon, className) => {
+  if (!icon) return null;
+  if (typeof icon === "string") {
+    const iconName = icon.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+    const LucideIcon = icons[iconName];
+    if (LucideIcon) {
+      return /* @__PURE__ */ jsx(LucideIcon, { className, "aria-hidden": "true" });
+    }
+    return /* @__PURE__ */ jsx("i", { className: `${icon} ${className || ""}`, "aria-hidden": "true" });
+  }
+  const IconComponent = icon;
+  return /* @__PURE__ */ jsx(IconComponent, { className, "aria-hidden": "true" });
+};
+
+export {
+  renderIcon
+};
+//# sourceMappingURL=chunk-XSGUFMT4.js.map

package/dist/chunk-XSGUFMT4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/renderIcon.tsx"],"sourcesContent":["import React from 'react';\r\nimport { icons } from 'lucide-react';\r\n\r\nexport type IconType = React.ComponentType<{ className?: string }> | string;\r\n\r\n/**\r\n * Helper function to render icons dynamically\r\n * Supports both React components (Lucide, MUI, etc.) and string-based icon names\r\n *\r\n * @param icon - Icon component or string name (e.g., \"heart\" or \"arrow-right\")\r\n * @param className - Optional CSS class name to apply to the icon\r\n * @returns React node representing the icon, or null if no icon provided\r\n *\r\n * @example\r\n * // Component-based icon\r\n * import { Heart } from 'lucide-react';\r\n * renderIcon(Heart, 'my-icon-class');\r\n *\r\n * @example\r\n * // String-based Lucide icon (kebab-case converted to PascalCase)\r\n * renderIcon('heart', 'my-icon-class');\r\n * renderIcon('arrow-right', 'my-icon-class');\r\n *\r\n * @example\r\n * // String-based CSS class (for Font Awesome, Remixicon, etc.)\r\n * renderIcon('fas fa-heart', 'my-icon-class');\r\n */\r\nexport const renderIcon = (icon: IconType | undefined, className?: string): React.ReactNode => {\r\n  if (!icon) return null;\r\n\r\n  if (typeof icon === 'string') {\r\n    // Convert kebab-case to PascalCase for Lucide icons\r\n    const iconName = icon\r\n      .split('-')\r\n      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\r\n      .join('');\r\n\r\n    // Try to find the icon in lucide-react\r\n    const LucideIcon = icons[iconName as keyof typeof icons] as\r\n      React.ComponentType<{ className?: string }> | undefined;\r\n\r\n    if (LucideIcon) {\r\n      return <LucideIcon className={className} aria-hidden=\"true\" />;\r\n    }\r\n\r\n    // Fallback: render as a CSS class (for Font Awesome, Remixicon, etc.)\r\n    return <i className={`${icon} ${className || ''}`} aria-hidden=\"true\" />;\r\n  }\r\n\r\n  // It's a React component\r\n  const IconComponent = icon;\r\n  return <IconComponent className={className} aria-hidden=\"true\" />;\r\n};\r\n"],"mappings":";AACA,SAAS,aAAa;AAyCT;AAfN,IAAM,aAAa,CAAC,MAA4B,cAAwC;AAC7F,MAAI,CAAC,KAAM,QAAO;AAElB,MAAI,OAAO,SAAS,UAAU;AAE5B,UAAM,WAAW,KACd,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,YAAY,IAAI,KAAK,MAAM,CAAC,CAAC,EAC1D,KAAK,EAAE;AAGV,UAAM,aAAa,MAAM,QAA8B;AAGvD,QAAI,YAAY;AACd,aAAO,oBAAC,cAAW,WAAsB,eAAY,QAAO;AAAA,IAC9D;AAGA,WAAO,oBAAC,OAAE,WAAW,GAAG,IAAI,IAAI,aAAa,EAAE,IAAI,eAAY,QAAO;AAAA,EACxE;AAGA,QAAM,gBAAgB;AACtB,SAAO,oBAAC,iBAAc,WAAsB,eAAY,QAAO;AACjE;","names":[]}

package/dist/chunk-XUZOU2EB.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-XUZOU2EB.js.map

package/dist/chunk-XUZOU2EB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-YCUT6NQ4.js

@@ -0,0 +1,106 @@
+import {
+  MenuPanel
+} from "./chunk-O6B4KB4D.js";
+
+// src/components/ContextMenu/ContextMenu.component.tsx
+import { useState, useEffect, useRef, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ContextMenu = ({
+  items,
+  children,
+  disabled = false,
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isPositioned, setIsPositioned] = useState(false);
+  const menuRef = useRef(null);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setIsPositioned(false);
+  }, []);
+  useEffect(() => {
+    if (!isOpen || !menuRef.current) return;
+    const menu = menuRef.current;
+    const { width, height } = menu.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const GAP = 4;
+    const clampedX = Math.min(position.x, vw - width - GAP);
+    const clampedY = Math.min(position.y, vh - height - GAP);
+    menu.style.left = `${Math.max(GAP, clampedX)}px`;
+    menu.style.top = `${Math.max(GAP, clampedY)}px`;
+    setIsPositioned(true);
+  }, [isOpen, position]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleMouseDown = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        close();
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [isOpen, close]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") close();
+    };
+    const handleScroll = () => close();
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [isOpen, close]);
+  const handleContextMenu = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsOpen(true);
+    setIsPositioned(false);
+    setPosition({ x: e.clientX, y: e.clientY });
+  };
+  const handleItemClick = useCallback(
+    (_item) => {
+      close();
+    },
+    [close]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: ["eidos-context-menu-target", className].filter(Boolean).join(" "),
+        onContextMenu: handleContextMenu,
+        children
+      }
+    ),
+    isOpen && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          className: [
+            "eidos-context-menu-panel",
+            isPositioned && "eidos-context-menu-panel--positioned"
+          ].filter(Boolean).join(" "),
+          style: {
+            top: position.y,
+            left: position.x
+          },
+          children: /* @__PURE__ */ jsx(MenuPanel, { items, onItemClick: handleItemClick })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+export {
+  ContextMenu
+};
+//# sourceMappingURL=chunk-YCUT6NQ4.js.map