@helpwave/hightide 0.1.35 → 0.1.37

package/dist/components/dialog/ThemeDialog.js

@@ -35,6 +35,8 @@ module.exports = __toCommonJS(ThemeDialog_exports);
 
 // src/components/dialog/Dialog.tsx
 var import_react7 = require("react");
+var import_react8 = require("react");
+var import_react9 = require("react");
 var import_clsx2 = __toESM(require("clsx"));
 var import_lucide_react = require("lucide-react");
 
@@ -701,10 +703,21 @@ var Dialog = ({
   onClose,
   className,
   backgroundClassName,
-  position = "center"
+  position = "center",
+  isAnimated = true
 }) => {
   const translation = useTranslation([formTranslation]);
-  const ref = (0, import_react7.useRef)(null);
+  const [visible, setVisible] = (0, import_react8.useState)(isOpen);
+  const ref = (0, import_react9.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    if (isOpen) {
+      setVisible(true);
+    } else {
+      if (!isAnimated) {
+        setVisible(false);
+      }
+    }
+  }, [isAnimated, isOpen]);
   const onCloseWrapper = () => {
     if (!isModal) return;
     onClose?.();
@@ -712,7 +725,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 = {
@@ -726,6 +739,7 @@ var Dialog = ({
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
+          hidden: !visible,
           className: (0, import_clsx2.default)(
             "fixed inset-0 h-screen w-screen bg-overlay-shadow z-100",
             {
@@ -734,21 +748,30 @@ var Dialog = ({
             },
             backgroundClassName
           ),
-          hidden: !isOpen,
-          "aria-hidden": true,
-          onClick: onCloseWrapper
+          onAnimationEnd: () => {
+            if (!isOpen) {
+              setVisible(false);
+            }
+          },
+          onClick: onCloseWrapper,
+          "aria-hidden": true
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
           ref,
-          hidden: !isOpen,
+          hidden: !visible,
           onKeyDown: (event) => {
             if (event.key === "Escape") {
               onCloseWrapper();
             }
           },
+          onAnimationEnd: () => {
+            if (!isOpen) {
+              setVisible(false);
+            }
+          },
           className: (0, import_clsx2.default)(
             "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",
             {
@@ -795,7 +818,7 @@ var import_lucide_react4 = require("lucide-react");
 var import_clsx6 = __toESM(require("clsx"));
 
 // src/theming/useTheme.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {
@@ -822,9 +845,9 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = (0, import_react8.createContext)(null);
+var ThemeContext = (0, import_react10.createContext)(null);
 var useTheme = () => {
-  const context = (0, import_react8.useContext)(ThemeContext);
+  const context = (0, import_react10.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
   }
@@ -832,19 +855,19 @@ var useTheme = () => {
 };
 
 // src/components/user-action/select/Select.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_clsx5 = __toESM(require("clsx"));
 
 // src/components/layout/Expandable.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_clsx3 = __toESM(require("clsx"));
 
 // src/hooks/useOverwritableState.ts
-var import_react9 = require("react");
+var import_react11 = require("react");
 var useOverwritableState = (initialValue, onChange) => {
-  const [state, setState] = (0, import_react9.useState)(initialValue);
-  (0, import_react9.useEffect)(() => {
+  const [state, setState] = (0, import_react11.useState)(initialValue);
+  (0, import_react11.useEffect)(() => {
     setState(initialValue);
   }, [initialValue]);
   const onChangeWrapper = (action) => {
@@ -870,7 +893,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
     }
   );
 };
-var Expandable = (0, import_react10.forwardRef)(function Expandable2({
+var Expandable = (0, import_react12.forwardRef)(function Expandable2({
   children,
   id: providedId,
   label,
@@ -884,9 +907,9 @@ var Expandable = (0, import_react10.forwardRef)(function Expandable2({
   contentClassName,
   contentExpandedClassName
 }, ref) {
-  const defaultIcon = (0, import_react10.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
+  const defaultIcon = (0, import_react12.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
-  const generatedId = (0, import_react10.useId)();
+  const generatedId = (0, import_react12.useId)();
   const id = providedId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
@@ -941,7 +964,7 @@ var Expandable = (0, import_react10.forwardRef)(function Expandable2({
     }
   );
 });
-var ExpandableUncontrolled = (0, import_react10.forwardRef)(function ExpandableUncontrolled2({
+var ExpandableUncontrolled = (0, import_react12.forwardRef)(function ExpandableUncontrolled2({
   isExpanded,
   onChange,
   ...props
@@ -1030,7 +1053,7 @@ var Chip = ({
 };
 
 // src/hooks/useFloatingElement.ts
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/utils/math.ts
 var clamp = (value, range = [0, 1]) => {
@@ -1093,9 +1116,9 @@ function useFloatingElement({
   screenPadding = 16,
   gap = 4
 }) {
-  const [style, setStyle] = (0, import_react11.useState)();
+  const [style, setStyle] = (0, import_react13.useState)();
   const isMounted = useIsMounted();
-  const calculate = (0, import_react11.useCallback)(() => {
+  const calculate = (0, import_react13.useCallback)(() => {
     const containerRect = containerRef.current.getBoundingClientRect();
     const windowRect = windowRef?.current.getBoundingClientRect() ?? {
       top: 0,
@@ -1125,14 +1148,14 @@ function useFloatingElement({
   }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
   const height = containerRef.current?.getBoundingClientRect().height;
   const width = containerRef.current?.getBoundingClientRect().width;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (active && isMounted) {
       calculate();
     } else {
       setStyle(void 0);
     }
   }, [calculate, active, isMounted, height, width]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     window.addEventListener("resize", calculate);
     let timeout;
     if (isPolling) {
@@ -1154,9 +1177,9 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 var defaultToggleOpenOptions = {
   highlightStartPosition: "first"
 };
-var SelectContext = (0, import_react12.createContext)(null);
+var SelectContext = (0, import_react14.createContext)(null);
 function useSelectContext() {
-  const ctx = (0, import_react12.useContext)(SelectContext);
+  const ctx = (0, import_react14.useContext)(SelectContext);
   if (!ctx) {
     throw new Error("SelectContext must be used within a ListBoxPrimitive");
   }
@@ -1175,11 +1198,11 @@ var SelectRoot = ({
   isMultiSelect = false,
   iconAppearance = "left"
 }) => {
-  const [options, setOptions] = (0, import_react12.useState)([]);
-  const triggerRef = (0, import_react12.useRef)(null);
-  const generatedId = (0, import_react12.useId)();
+  const [options, setOptions] = (0, import_react14.useState)([]);
+  const triggerRef = (0, import_react14.useRef)(null);
+  const generatedId = (0, import_react14.useId)();
   const usedId = id ?? generatedId;
-  const [internalState, setInternalState] = (0, import_react12.useState)({
+  const [internalState, setInternalState] = (0, import_react14.useState)({
     isOpen
   });
   const selectedValues = isMultiSelect ? values ?? [] : [value].filter(Boolean);
@@ -1196,7 +1219,7 @@ var SelectRoot = ({
     isMultiSelect,
     iconAppearance
   };
-  const registerItem = (0, import_react12.useCallback)((item) => {
+  const registerItem = (0, import_react14.useCallback)((item) => {
     setOptions((prev) => {
       const updated = [...prev, item];
       updated.sort((a, b) => {
@@ -1208,7 +1231,7 @@ var SelectRoot = ({
       return updated;
     });
   }, []);
-  const unregisterItem = (0, import_react12.useCallback)((value2) => {
+  const unregisterItem = (0, import_react14.useCallback)((value2) => {
     setOptions((prev) => prev.filter((i) => i.value !== value2));
   }, []);
   const toggleSelection = (value2, isSelected) => {
@@ -1251,10 +1274,10 @@ var SelectRoot = ({
       highlightedValue: value2
     }));
   };
-  const registerTrigger = (0, import_react12.useCallback)((ref) => {
+  const registerTrigger = (0, import_react14.useCallback)((ref) => {
     triggerRef.current = ref.current;
   }, []);
-  const unregisterTrigger = (0, import_react12.useCallback)(() => {
+  const unregisterTrigger = (0, import_react14.useCallback)(() => {
     triggerRef.current = null;
   }, []);
   const toggleOpen = (isOpen2, toggleOpenOptions) => {
@@ -1295,7 +1318,7 @@ var SelectRoot = ({
       highlightedValue
     }));
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!internalState.highlightedValue) return;
     const highlighted = options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
@@ -1323,14 +1346,14 @@ var SelectRoot = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContext.Provider, { value: contextValue, children });
 };
-var SelectOption = (0, import_react12.forwardRef)(
+var SelectOption = (0, import_react14.forwardRef)(
   function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
     const { state, config, item, trigger } = useSelectContext();
     const { register, unregister, toggleSelection, highlightItem } = item;
-    const itemRef = (0, import_react12.useRef)(null);
+    const itemRef = (0, import_react14.useRef)(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    (0, import_react12.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       register({
         value,
         label,
@@ -1408,13 +1431,13 @@ var defaultSelectButtonTranslation = {
     clickToSelect: "Zum ausw\xE4hlen dr\xFCcken"
   }
 };
-var SelectButton = (0, import_react12.forwardRef)(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
+var SelectButton = (0, import_react14.forwardRef)(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
   const translation = useTranslation([defaultSelectButtonTranslation]);
   const { state, trigger } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  const innerRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react12.useEffect)(() => {
+  const innerRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react14.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -1487,12 +1510,12 @@ var SelectButton = (0, import_react12.forwardRef)(function SelectButton2({ place
     }
   );
 });
-var SelectChipDisplay = (0, import_react12.forwardRef)(function SelectChipDisplay2({ ...props }, ref) {
+var SelectChipDisplay = (0, import_react14.forwardRef)(function SelectChipDisplay2({ ...props }, ref) {
   const { state, trigger, item } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  const innerRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react12.useEffect)(() => {
+  const innerRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react14.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -1555,14 +1578,14 @@ var SelectChipDisplay = (0, import_react12.forwardRef)(function SelectChipDispla
     }
   );
 });
-var SelectContent = (0, import_react12.forwardRef)(
+var SelectContent = (0, import_react14.forwardRef)(
   function SelectContent2({
     alignment,
     orientation = "vertical",
     ...props
   }, ref) {
-    const innerRef = (0, import_react12.useRef)(null);
-    (0, import_react12.useImperativeHandle)(ref, () => innerRef.current);
+    const innerRef = (0, import_react14.useRef)(null);
+    (0, import_react14.useImperativeHandle)(ref, () => innerRef.current);
     const { trigger, state, config, item } = useSelectContext();
     const position = useFloatingElement({
       active: state.isOpen,
@@ -1649,7 +1672,7 @@ var SelectContent = (0, import_react12.forwardRef)(
     );
   }
 );
-var Select = (0, import_react12.forwardRef)(function Select2({
+var Select = (0, import_react14.forwardRef)(function Select2({
   children,
   contentPanelProps,
   buttonProps,
@@ -1671,7 +1694,7 @@ var Select = (0, import_react12.forwardRef)(function Select2({
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var SelectUncontrolled = (0, import_react12.forwardRef)(function SelectUncontrolled2({
+var SelectUncontrolled = (0, import_react14.forwardRef)(function SelectUncontrolled2({
   value: initialValue,
   onValueChanged,
   ...props
@@ -1687,7 +1710,7 @@ var SelectUncontrolled = (0, import_react12.forwardRef)(function SelectUncontrol
     }
   );
 });
-var MultiSelect = (0, import_react12.forwardRef)(function MultiSelect2({
+var MultiSelect = (0, import_react14.forwardRef)(function MultiSelect2({
   children,
   contentPanelProps,
   buttonProps,
@@ -1698,7 +1721,7 @@ var MultiSelect = (0, import_react12.forwardRef)(function MultiSelect2({
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var MultiSelectUncontrolled = (0, import_react12.forwardRef)(function MultiSelectUncontrolled2({
+var MultiSelectUncontrolled = (0, import_react14.forwardRef)(function MultiSelectUncontrolled2({
   values: initialValues,
   onValuesChanged,
   ...props
@@ -1714,7 +1737,7 @@ var MultiSelectUncontrolled = (0, import_react12.forwardRef)(function MultiSelec
     }
   );
 });
-var MultiSelectChipDisplay = (0, import_react12.forwardRef)(function MultiSelectChipDisplay2({
+var MultiSelectChipDisplay = (0, import_react14.forwardRef)(function MultiSelectChipDisplay2({
   children,
   contentPanelProps,
   chipDisplayProps,
@@ -1725,7 +1748,7 @@ var MultiSelectChipDisplay = (0, import_react12.forwardRef)(function MultiSelect
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var MultiSelectChipDisplayUncontrolled = (0, import_react12.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
+var MultiSelectChipDisplayUncontrolled = (0, import_react14.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
   values: initialValues,
   onValuesChanged,
   ...props