@expcat/tigercat-react 2.0.0 → 2.0.4

package/dist/{chunk-JTFNGXOC.mjs → chunk-2ENQZECC.mjs}

@@ -1,3 +1,7 @@
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -89,6 +93,20 @@ var AutoComplete = (props) => {
   const [activeIndex, setActiveIndex] = useState(-1);
   const containerRef = useRef(null);
   const inputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const overlay = useAnchoredOverlay({
+    enabled: isOpen,
+    referenceRef: inputRef,
+    floatingRef: dropdownRef,
+    containerRef,
+    placement: "bottom-start",
+    offset: 4,
+    matchReferenceWidth: true,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    restoreFocusOnDismiss: true,
+    onDismiss: closeDropdown
+  });
   useEffect(() => {
     if (searchValue !== void 0) {
       return;
@@ -191,17 +209,41 @@ var AutoComplete = (props) => {
         break;
     }
   }
-  useEffect(() => {
-    if (!isOpen) return;
-    function handleClickOutside(e) {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        closeDropdown();
-      }
-    }
-    document.addEventListener("click", handleClickOutside);
-    return () => document.removeEventListener("click", handleClickOutside);
-  }, [isOpen]);
   const containerClasses = classNames(autoCompleteBaseClasses, className);
+  const dropdown = isOpen && (filteredOptions.length > 0 || inputValue) ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: dropdownRef,
+      ...filteredOptions.length > 0 ? getPickerListboxAria({ id: listboxId }) : {},
+      className: classNames(
+        autoCompleteDropdownClasses,
+        filteredOptions.length === 0 && autoCompleteEmptyStateClasses,
+        overlay.floatingClasses
+      ),
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: getPickerOptionId(listboxId, index),
+          ...getPickerOptionAria({
+            selected: String(option.value) === String(value),
+            disabled: !!option.disabled
+          }),
+          className: getAutoCompleteOptionClasses(
+            String(option.value) === String(value),
+            !!option.disabled,
+            size
+          ),
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => handleSelect(option),
+          onMouseEnter: () => setActiveIndex(index),
+          children: option.label
+        },
+        String(option.value)
+      )) : resolvedNotFoundText
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, ...divProps, children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -239,27 +281,7 @@ var AutoComplete = (props) => {
         )
       }
     ),
-    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx("div", { ...getPickerListboxAria({ id: listboxId }), className: autoCompleteDropdownClasses, children: filteredOptions.map((option, index) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: getPickerOptionId(listboxId, index),
-        ...getPickerOptionAria({
-          selected: String(option.value) === String(value),
-          disabled: !!option.disabled
-        }),
-        className: getAutoCompleteOptionClasses(
-          String(option.value) === String(value),
-          !!option.disabled,
-          size
-        ),
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: () => handleSelect(option),
-        onMouseEnter: () => setActiveIndex(index),
-        children: option.label
-      },
-      String(option.value)
-    )) }),
-    isOpen && inputValue && filteredOptions.length === 0 && /* @__PURE__ */ jsx("div", { className: classNames(autoCompleteDropdownClasses, autoCompleteEmptyStateClasses), children: resolvedNotFoundText })
+    renderOverlayPortal(dropdown, overlay.target)
   ] });
 };
 

package/dist/{chunk-O5RAMCBV.mjs → chunk-2JYJPNW3.mjs}

@@ -6,7 +6,7 @@ import {
   useBodyScrollLock,
   useEscapeKey,
   useFocusTrap
-} from "./chunk-SEWNVIHH.mjs";
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";

package/dist/{chunk-NBQ3Q6DD.mjs → chunk-2WGEHH5A.mjs}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-5TE7KLE5.mjs";
 import {
   Loading
-} from "./chunk-AJJJ6HWC.mjs";
+} from "./chunk-K4GIKSZE.mjs";
 import {
   Text
 } from "./chunk-HLS4CHWX.mjs";

package/dist/{chunk-K7MYQISG.mjs → chunk-54HN5BXW.mjs}

@@ -6,7 +6,7 @@ import {
   useBodyScrollLock,
   useEscapeKey,
   useFocusTrap
-} from "./chunk-SEWNVIHH.mjs";
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -166,6 +166,7 @@ var Modal = ({
   const reactId = useId();
   const modalId = useMemo(() => `tiger-modal-${reactId}`, [reactId]);
   const titleId = `${modalId}-title`;
+  const overlayHostId = `${modalId}-overlay-host`;
   const {
     ["aria-labelledby"]: _ariaLabelledby,
     role: _role,
@@ -174,6 +175,7 @@ var Modal = ({
   } = rest;
   const ariaLabelledby = rest["aria-labelledby"] ?? (title || titleContent ? titleId : void 0);
   const dialogRef = useRef(null);
+  const rootRef = useRef(null);
   const closeButtonRef = useRef(null);
   const previousActiveElementRef = useRef(null);
   const touchStartRef = useRef(null);
@@ -188,9 +190,9 @@ var Modal = ({
     }
     restoreFocus(previousActiveElementRef.current);
   }, [open]);
-  useEscapeKey({ enabled: open, onEscape: handleClose });
+  useEscapeKey({ enabled: open, onEscape: handleClose, layerRef: rootRef });
   useBodyScrollLock({ enabled: open });
-  useFocusTrap({ enabled: open, containerRef: dialogRef });
+  useFocusTrap({ enabled: open, containerRef: rootRef });
   const resetTouchGesture = useCallback(() => {
     touchStartRef.current = null;
     touchCurrentRef.current = null;
@@ -263,10 +265,12 @@ var Modal = ({
   const modalContent = /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       className: classNames(modalWrapperClasses, !open && "pointer-events-none"),
       style: { zIndex },
       hidden: !open,
       "aria-hidden": !open ? "true" : void 0,
+      "data-tiger-overlay-layer": "",
       "data-tiger-modal-root": "",
       children: [
         mask && /* @__PURE__ */ jsx(
@@ -290,6 +294,7 @@ var Modal = ({
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": ariaLabelledby,
+            "aria-owns": overlayHostId,
             tabIndex: -1,
             ref: dialogRef,
             onTouchStart: handleTouchStart,
@@ -327,7 +332,8 @@ var Modal = ({
               ] }) : null
             ]
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ jsx("div", { id: overlayHostId, className: "contents", "data-tiger-overlay-host": "" })
       ]
     }
   );

package/dist/{chunk-C6QK5MJT.mjs → chunk-5CKMYMTS.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-XZVQ3PJS.mjs";
 import {
   Loading
-} from "./chunk-AJJJ6HWC.mjs";
+} from "./chunk-K4GIKSZE.mjs";
 import {
   Tag
 } from "./chunk-7EXOY7GD.mjs";

package/dist/{chunk-Y7K27DVV.mjs → chunk-6H5Y7Y6E.mjs}

@@ -1,12 +1,16 @@
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
+
 // src/components/Mentions.tsx
-import { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { useState, useMemo, useCallback, useRef } from "react";
 import { classNames } from "@expcat/tigercat-core";
 import {
   getMentionsInputClasses,
   mentionsDropdownClasses,
   getMentionsOptionClasses,
   extractMentionQuery,
-  positionMentionsDropdown,
   getCyclicIndex
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,6 +38,18 @@ var Mentions = ({
     const q = query.toLowerCase();
     return options.filter((o) => !o.disabled && o.label.toLowerCase().includes(q));
   }, [options, query]);
+  const overlay = useAnchoredOverlay({
+    enabled: isOpen && filteredOptions.length > 0,
+    referenceRef: textareaRef,
+    floatingRef: dropdownRef,
+    containerRef,
+    placement: "bottom-start",
+    offset: 4,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    restoreFocusOnDismiss: true,
+    onDismiss: () => setIsOpen(false)
+  });
   const handleInput = useCallback(
     (e) => {
       const newValue = e.target.value;
@@ -83,21 +99,6 @@ var Mentions = ({
     },
     [isOpen, filteredOptions, activeIndex, selectOption]
   );
-  useEffect(() => {
-    if (!isOpen) return;
-    const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [isOpen]);
-  useEffect(() => {
-    if (!isOpen || filteredOptions.length === 0) return;
-    if (!textareaRef.current || !dropdownRef.current) return;
-    void positionMentionsDropdown(textareaRef.current, dropdownRef.current);
-  }, [isOpen, filteredOptions.length, size, rows, value]);
   const wrapperClass = classNames("relative", className);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: wrapperClass, children: [
     /* @__PURE__ */ jsx(
@@ -113,17 +114,30 @@ var Mentions = ({
         onKeyDown: handleKeydown
       }
     ),
-    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx("div", { ref: dropdownRef, className: mentionsDropdownClasses, role: "listbox", children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: getMentionsOptionClasses(i === activeIndex, !!opt.disabled),
-        role: "option",
-        "aria-selected": i === activeIndex,
-        onClick: () => selectOption(opt),
-        children: opt.label
-      },
-      opt.value
-    )) })
+    renderOverlayPortal(
+      isOpen && filteredOptions.length > 0 ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: dropdownRef,
+          className: classNames(mentionsDropdownClasses, overlay.floatingClasses),
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          role: "listbox",
+          children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: getMentionsOptionClasses(i === activeIndex, !!opt.disabled),
+              role: "option",
+              "aria-selected": i === activeIndex,
+              onClick: () => selectOption(opt),
+              children: opt.label
+            },
+            opt.value
+          ))
+        }
+      ) : null,
+      overlay.target
+    )
   ] });
 };
 var Mentions_default = Mentions;

package/dist/chunk-6MGQAJ62.mjs

@@ -0,0 +1,203 @@
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
+
+// src/components/ColorPicker.tsx
+import { useState, useMemo, useRef, useEffect } from "react";
+import {
+  colorPickerBaseClasses,
+  getColorPickerTriggerClasses,
+  colorPickerPanelClasses,
+  colorPickerInputClasses,
+  colorPickerPresetClasses,
+  hexToRgb,
+  rgbToHex,
+  rgbToHsv,
+  hsvToRgb,
+  formatColorString,
+  parseColorInput,
+  classNames
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorPicker = ({
+  value = "#2563eb",
+  disabled = false,
+  size = "md",
+  showAlpha = false,
+  format = "hex",
+  presets,
+  className,
+  onChange
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [alpha, setAlpha] = useState(1);
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const overlay = useAnchoredOverlay({
+    enabled: isOpen,
+    referenceRef: triggerRef,
+    floatingRef: panelRef,
+    containerRef,
+    placement: "bottom-start",
+    offset: 4,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    restoreFocusOnDismiss: true,
+    onDismiss: () => setIsOpen(false)
+  });
+  const rgb = useMemo(() => hexToRgb(value), [value]);
+  const hsv = useMemo(() => rgbToHsv(rgb.r, rgb.g, rgb.b), [rgb]);
+  const displayValue = useMemo(
+    () => formatColorString(rgb.r, rgb.g, rgb.b, format, showAlpha ? alpha : void 0),
+    [rgb, format, showAlpha, alpha]
+  );
+  const swatchColor = showAlpha ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})` : value;
+  const [inputValue, setInputValue] = useState(displayValue);
+  useEffect(() => {
+    setInputValue(displayValue);
+  }, [displayValue]);
+  function togglePanel() {
+    if (disabled) return;
+    setIsOpen((v) => !v);
+  }
+  function handleTriggerKeyDown(e) {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+      e.preventDefault();
+      setIsOpen((v) => !v);
+    } else if (e.key === "Escape" && isOpen) {
+      setIsOpen(false);
+    }
+  }
+  function handleHueChange(e) {
+    const hue = Number(e.target.value);
+    const { r, g, b } = hsvToRgb(hue, hsv.s, hsv.v);
+    const hex = rgbToHex(r, g, b);
+    onChange?.(hex);
+  }
+  function handleInputChange(e) {
+    const val = e.target.value;
+    setInputValue(val);
+    const hex = parseColorInput(val);
+    if (hex) {
+      onChange?.(hex);
+    }
+  }
+  function handleAlphaChange(e) {
+    setAlpha(Number(e.target.value) / 100);
+  }
+  function handlePresetClick(color) {
+    onChange?.(color);
+  }
+  function handlePresetKeyDown(e, color) {
+    if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+      e.preventDefault();
+      handlePresetClick(color);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(colorPickerBaseClasses, className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: getColorPickerTriggerClasses(size, disabled),
+        style: { backgroundColor: swatchColor },
+        role: "button",
+        "aria-label": "Pick color",
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : 0,
+        onClick: togglePanel,
+        onKeyDown: handleTriggerKeyDown
+      }
+    ),
+    renderOverlayPortal(
+      isOpen ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          className: classNames(colorPickerPanelClasses, overlay.floatingClasses),
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Hue" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: 0,
+                  max: 360,
+                  value: hsv.h,
+                  className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+                  "aria-label": "Hue",
+                  onChange: handleHueChange
+                }
+              )
+            ] }),
+            showAlpha && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Alpha" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: 0,
+                  max: 100,
+                  value: Math.round(alpha * 100),
+                  className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+                  "aria-label": "Alpha",
+                  onChange: handleAlphaChange
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1 uppercase", children: format }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  className: colorPickerInputClasses,
+                  value: inputValue,
+                  "aria-label": "Color value",
+                  onChange: handleInputChange
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
+                  style: { backgroundColor: swatchColor },
+                  "aria-label": "Color preview"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: displayValue })
+            ] }),
+            presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: presets.map((color) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: colorPickerPresetClasses,
+                style: { backgroundColor: color },
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Select ${color}`,
+                onClick: () => handlePresetClick(color),
+                onKeyDown: (e) => handlePresetKeyDown(e, color)
+              },
+              color
+            )) })
+          ]
+        }
+      ) : null,
+      overlay.target
+    )
+  ] });
+};
+
+export {
+  ColorPicker
+};