@helpwave/hightide 0.1.35 → 0.1.37

package/dist/components/dialog/ThemeDialog.mjs

@@ -1,4 +1,6 @@
 // src/components/dialog/Dialog.tsx
+import { useEffect as useEffect5 } from "react";
+import { useState as useState6 } from "react";
 import { useRef as useRef2 } from "react";
 import clsx2 from "clsx";
 import { X } from "lucide-react";
@@ -666,10 +668,21 @@ var Dialog = ({
   onClose,
   className,
   backgroundClassName,
-  position = "center"
+  position = "center",
+  isAnimated = true
 }) => {
   const translation = useTranslation([formTranslation]);
+  const [visible, setVisible] = useState6(isOpen);
   const ref = useRef2(null);
+  useEffect5(() => {
+    if (isOpen) {
+      setVisible(true);
+    } else {
+      if (!isAnimated) {
+        setVisible(false);
+      }
+    }
+  }, [isAnimated, isOpen]);
   const onCloseWrapper = () => {
     if (!isModal) return;
     onClose?.();
@@ -677,7 +690,7 @@ var Dialog = ({
   useLogOnce("Dialog: onClose should be defined for modal dialogs", isModal && !onClose);
   useFocusTrap({
     container: ref,
-    active: isOpen,
+    active: visible,
     focusFirst: true
   });
   const positionMap = {
@@ -691,6 +704,7 @@ var Dialog = ({
       /* @__PURE__ */ jsx3(
         "div",
         {
+          hidden: !visible,
           className: clsx2(
             "fixed inset-0 h-screen w-screen bg-overlay-shadow z-100",
             {
@@ -699,21 +713,30 @@ var Dialog = ({
             },
             backgroundClassName
           ),
-          hidden: !isOpen,
-          "aria-hidden": true,
-          onClick: onCloseWrapper
+          onAnimationEnd: () => {
+            if (!isOpen) {
+              setVisible(false);
+            }
+          },
+          onClick: onCloseWrapper,
+          "aria-hidden": true
         }
       ),
       /* @__PURE__ */ jsxs2(
         "div",
         {
           ref,
-          hidden: !isOpen,
+          hidden: !visible,
           onKeyDown: (event) => {
             if (event.key === "Escape") {
               onCloseWrapper();
             }
           },
+          onAnimationEnd: () => {
+            if (!isOpen) {
+              setVisible(false);
+            }
+          },
           className: clsx2(
             "flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)] z-100",
             {
@@ -760,7 +783,7 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx6 from "clsx";
 
 // src/theming/useTheme.tsx
-import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect5, useMemo as useMemo2, useState as useState6 } from "react";
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect6, useMemo as useMemo2, useState as useState7 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {
@@ -802,11 +825,11 @@ import {
   forwardRef as forwardRef3,
   useCallback as useCallback6,
   useContext as useContext3,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useId as useId3,
   useImperativeHandle,
   useRef as useRef3,
-  useState as useState9
+  useState as useState10
 } from "react";
 import clsx5 from "clsx";
 
@@ -816,10 +839,10 @@ import { ChevronDown } from "lucide-react";
 import clsx3 from "clsx";
 
 // src/hooks/useOverwritableState.ts
-import { useEffect as useEffect6, useState as useState7 } from "react";
+import { useEffect as useEffect7, useState as useState8 } from "react";
 var useOverwritableState = (initialValue, onChange) => {
-  const [state, setState] = useState7(initialValue);
-  useEffect6(() => {
+  const [state, setState] = useState8(initialValue);
+  useEffect7(() => {
     setState(initialValue);
   }, [initialValue]);
   const onChangeWrapper = (action) => {
@@ -1005,7 +1028,7 @@ var Chip = ({
 };
 
 // src/hooks/useFloatingElement.ts
-import { useCallback as useCallback5, useEffect as useEffect7, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useState as useState9 } from "react";
 
 // src/utils/math.ts
 var clamp = (value, range = [0, 1]) => {
@@ -1068,7 +1091,7 @@ function useFloatingElement({
   screenPadding = 16,
   gap = 4
 }) {
-  const [style, setStyle] = useState8();
+  const [style, setStyle] = useState9();
   const isMounted = useIsMounted();
   const calculate = useCallback5(() => {
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -1100,14 +1123,14 @@ function useFloatingElement({
   }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
   const height = containerRef.current?.getBoundingClientRect().height;
   const width = containerRef.current?.getBoundingClientRect().width;
-  useEffect7(() => {
+  useEffect8(() => {
     if (active && isMounted) {
       calculate();
     } else {
       setStyle(void 0);
     }
   }, [calculate, active, isMounted, height, width]);
-  useEffect7(() => {
+  useEffect8(() => {
     window.addEventListener("resize", calculate);
     let timeout;
     if (isPolling) {
@@ -1150,11 +1173,11 @@ var SelectRoot = ({
   isMultiSelect = false,
   iconAppearance = "left"
 }) => {
-  const [options, setOptions] = useState9([]);
+  const [options, setOptions] = useState10([]);
   const triggerRef = useRef3(null);
   const generatedId = useId3();
   const usedId = id ?? generatedId;
-  const [internalState, setInternalState] = useState9({
+  const [internalState, setInternalState] = useState10({
     isOpen
   });
   const selectedValues = isMultiSelect ? values ?? [] : [value].filter(Boolean);
@@ -1270,7 +1293,7 @@ var SelectRoot = ({
       highlightedValue
     }));
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (!internalState.highlightedValue) return;
     const highlighted = options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
@@ -1305,7 +1328,7 @@ var SelectOption = forwardRef3(
     const itemRef = useRef3(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    useEffect8(() => {
+    useEffect9(() => {
       register({
         value,
         label,
@@ -1389,7 +1412,7 @@ var SelectButton = forwardRef3(function SelectButton2({ placeholder, selectedDis
   const { register, unregister, toggleOpen } = trigger;
   const innerRef = useRef3(null);
   useImperativeHandle(ref, () => innerRef.current);
-  useEffect8(() => {
+  useEffect9(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -1467,7 +1490,7 @@ var SelectChipDisplay = forwardRef3(function SelectChipDisplay2({ ...props }, re
   const { register, unregister, toggleOpen } = trigger;
   const innerRef = useRef3(null);
   useImperativeHandle(ref, () => innerRef.current);
-  useEffect8(() => {
+  useEffect9(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);