@expcat/tigercat-react 2.0.0-rc.2 → 2.0.4

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

package/dist/{chunk-TO2URY7X.mjs → chunk-7AFRHC7P.mjs}

@@ -1,9 +1,13 @@
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
 
 // src/components/TreeSelect.tsx
-import { useState, useMemo, useRef, useEffect, useId } from "react";
+import { useState, useMemo, useRef, useId } from "react";
 import {
   resolveLocaleText,
   mergeTigerLocale,
@@ -84,6 +88,21 @@ var TreeSelect = (props) => {
     () => defaultExpandAll ? new Set(getAllTreeSelectKeys(treeData)) : /* @__PURE__ */ new Set()
   );
   const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const overlay = useAnchoredOverlay({
+    enabled: isOpen,
+    referenceRef: triggerRef,
+    floatingRef: dropdownRef,
+    containerRef,
+    placement: "bottom-start",
+    offset: 4,
+    matchReferenceWidth: true,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    restoreFocusOnDismiss: true,
+    onDismiss: closeDropdown
+  });
   const displayLabel = useMemo(() => getTreeSelectDisplayLabel(treeData, value), [treeData, value]);
   const showClearButton = clearable && !disabled && value !== void 0 && (Array.isArray(value) ? value.length > 0 : value !== "");
   const matchedKeys = useMemo(() => {
@@ -162,20 +181,11 @@ var TreeSelect = (props) => {
       closeDropdown();
     }
   }
-  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]);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(treeSelectBaseClasses, className), ...divProps, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         className: getTreeSelectTriggerClasses(size, disabled, isOpen),
         ...getPickerComboboxAria({ expanded: isOpen, listboxId }),
@@ -223,58 +233,77 @@ var TreeSelect = (props) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs("div", { ...getPickerListboxAria({ id: listboxId }), className: treeSelectDropdownClasses, children: [
-      searchable && /* @__PURE__ */ jsx(
-        "input",
+    renderOverlayPortal(
+      isOpen ? /* @__PURE__ */ jsxs(
+        "div",
         {
-          type: "text",
-          className: treeSelectSearchClasses,
-          placeholder: resolveLocaleText("Search...", mergedLocale?.common?.searchPlaceholder),
-          value: searchQuery,
-          "aria-label": resolveLocaleText("Search tree", mergedLocale?.common?.searchPlaceholder),
-          onChange: (e) => updateSearchValue(e.target.value)
-        }
-      ),
-      visibleNodes.length > 0 ? visibleNodes.map((flatNode) => {
-        const { node, level, hasChildren, isExpanded } = flatNode;
-        const selected = isSelected(node.key);
-        const indent = level * 20;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
-            className: getTreeSelectNodeClasses(selected, !!node.disabled, size),
-            style: { paddingLeft: `${indent + 8}px` },
-            onClick: (e) => {
-              e.stopPropagation();
-              handleNodeSelect(node);
-            },
-            children: [
-              hasChildren ? /* @__PURE__ */ jsx(
-                "span",
+          ref: dropdownRef,
+          ...getPickerListboxAria({ id: listboxId }),
+          className: classNames(treeSelectDropdownClasses, overlay.floatingClasses),
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          children: [
+            searchable && /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: treeSelectSearchClasses,
+                placeholder: resolveLocaleText(
+                  "Search...",
+                  mergedLocale?.common?.searchPlaceholder
+                ),
+                value: searchQuery,
+                "aria-label": resolveLocaleText(
+                  "Search tree",
+                  mergedLocale?.common?.searchPlaceholder
+                ),
+                onChange: (e) => updateSearchValue(e.target.value)
+              }
+            ),
+            visibleNodes.length > 0 ? visibleNodes.map((flatNode) => {
+              const { node, level, hasChildren, isExpanded } = flatNode;
+              const selected = isSelected(node.key);
+              const indent = level * 20;
+              return /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  className: classNames(
-                    "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
-                    isExpanded ? "rotate-90" : ""
-                  ),
-                  onClick: (e) => toggleExpand(node.key, e),
-                  children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: icon20ViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: chevronRightSolidIcon20PathD,
-                      fillRule: "evenodd",
-                      clipRule: "evenodd"
-                    }
-                  ) })
-                }
-              ) : /* @__PURE__ */ jsx("span", { className: "w-4 mr-1" }),
-              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.label })
-            ]
-          },
-          String(node.key)
-        );
-      }) : /* @__PURE__ */ jsx("div", { className: treeSelectEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) })
-    ] })
+                  ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
+                  className: getTreeSelectNodeClasses(selected, !!node.disabled, size),
+                  style: { paddingLeft: `${indent + 8}px` },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleNodeSelect(node);
+                  },
+                  children: [
+                    hasChildren ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: classNames(
+                          "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                          isExpanded ? "rotate-90" : ""
+                        ),
+                        onClick: (e) => toggleExpand(node.key, e),
+                        children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: icon20ViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: chevronRightSolidIcon20PathD,
+                            fillRule: "evenodd",
+                            clipRule: "evenodd"
+                          }
+                        ) })
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { className: "w-4 mr-1" }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.label })
+                  ]
+                },
+                String(node.key)
+              );
+            }) : /* @__PURE__ */ jsx("div", { className: treeSelectEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) })
+          ]
+        }
+      ) : null,
+      overlay.target
+    )
   ] });
 };
 

package/dist/{chunk-MGQWVJHX.mjs → chunk-ALSOPYM5.mjs}

@@ -1,6 +1,10 @@
 import {
   useControlledState
 } from "./chunk-MEFARVQI.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -316,19 +320,6 @@ function useTimePickerState(allProps) {
   const handleInputClick = () => {
     togglePanel();
   };
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (panelRef.current && inputWrapperRef.current && !panelRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
-        closePanel();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("click", handleClickOutside);
-      return () => {
-        document.removeEventListener("click", handleClickOutside);
-      };
-    }
-  }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
     const panel = panelRef.current;
@@ -599,6 +590,17 @@ var Icon = ({ path, className }) => /* @__PURE__ */ jsx3(
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var TimePicker = (allProps) => {
   const ctx = useTimePickerState(allProps);
+  const overlay = useAnchoredOverlay({
+    enabled: ctx.isOpen,
+    referenceRef: ctx.inputWrapperRef,
+    floatingRef: ctx.panelRef,
+    placement: "bottom-start",
+    offset: 4,
+    layout: "bottom-sheet-sm",
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    onDismiss: ctx.closePanel
+  });
   return /* @__PURE__ */ jsxs3("div", { className: ctx.containerClasses, ...ctx.divProps, children: [
     /* @__PURE__ */ jsxs3("div", { ref: ctx.inputWrapperRef, className: timePickerInputWrapperClasses, children: [
       /* @__PURE__ */ jsx4(
@@ -640,55 +642,60 @@ var TimePicker = (allProps) => {
         }
       )
     ] }),
-    ctx.isOpen && /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        ref: ctx.panelRef,
-        className: timePickerPanelClasses,
-        role: "dialog",
-        "aria-label": ctx.labels.dialog,
-        onKeyDown: ctx.handlePanelKeyDown,
-        children: [
-          ctx.isRangeMode && /* @__PURE__ */ jsxs3("div", { className: timePickerRangeHeaderClasses, children: [
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                type: "button",
-                className: getTimePickerRangeTabButtonClasses(ctx.activePart === "start"),
-                onClick: () => ctx.setActivePart("start"),
-                "aria-label": ctx.labels.start,
-                "aria-selected": ctx.activePart === "start",
-                children: ctx.labels.start
-              }
-            ),
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                type: "button",
-                className: getTimePickerRangeTabButtonClasses(ctx.activePart === "end"),
-                onClick: () => ctx.setActivePart("end"),
-                "aria-label": ctx.labels.end,
-                "aria-selected": ctx.activePart === "end",
-                children: ctx.labels.end
-              }
-            )
-          ] }),
-          renderTimePickerMobile(ctx),
-          renderTimePickerDesktop(ctx),
-          /* @__PURE__ */ jsxs3("div", { className: timePickerFooterClasses, children: [
-            /* @__PURE__ */ jsx4("button", { type: "button", className: timePickerFooterButtonClasses, onClick: ctx.setNow, children: ctx.labels.now }),
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                type: "button",
-                className: timePickerFooterButtonClasses,
-                onClick: ctx.closePanel,
-                children: ctx.labels.ok
-              }
-            )
-          ] })
-        ]
-      }
+    renderOverlayPortal(
+      ctx.isOpen ? /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          ref: ctx.panelRef,
+          className: `${timePickerPanelClasses} ${overlay.floatingClasses}`,
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          role: "dialog",
+          "aria-label": ctx.labels.dialog,
+          onKeyDown: ctx.handlePanelKeyDown,
+          children: [
+            ctx.isRangeMode && /* @__PURE__ */ jsxs3("div", { className: timePickerRangeHeaderClasses, children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: getTimePickerRangeTabButtonClasses(ctx.activePart === "start"),
+                  onClick: () => ctx.setActivePart("start"),
+                  "aria-label": ctx.labels.start,
+                  "aria-selected": ctx.activePart === "start",
+                  children: ctx.labels.start
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: getTimePickerRangeTabButtonClasses(ctx.activePart === "end"),
+                  onClick: () => ctx.setActivePart("end"),
+                  "aria-label": ctx.labels.end,
+                  "aria-selected": ctx.activePart === "end",
+                  children: ctx.labels.end
+                }
+              )
+            ] }),
+            renderTimePickerMobile(ctx),
+            renderTimePickerDesktop(ctx),
+            /* @__PURE__ */ jsxs3("div", { className: timePickerFooterClasses, children: [
+              /* @__PURE__ */ jsx4("button", { type: "button", className: timePickerFooterButtonClasses, onClick: ctx.setNow, children: ctx.labels.now }),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: timePickerFooterButtonClasses,
+                  onClick: ctx.closePanel,
+                  children: ctx.labels.ok
+                }
+              )
+            ] })
+          ]
+        }
+      ) : null,
+      overlay.target
     )
   ] });
 };