@helpwave/hightide 0.0.17 → 0.0.19

package/dist/index.mjs

@@ -3882,14 +3882,16 @@ var ModalHeader = ({
   descriptionText = ""
 }) => {
   const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
+  const hasTitleRow = !!title || !!titleText || !!onCloseClick;
+  const titleRow = /* @__PURE__ */ jsxs31("div", { className: "row justify-between items-start gap-x-8", children: [
+    title ?? /* @__PURE__ */ jsx44("span", { className: clsx32("textstyle-title-lg", {
+      "mb-1": description || descriptionText
+    }), children: titleText }),
+    !!onCloseClick && /* @__PURE__ */ jsx44(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ jsx44("button", { className: "row bg-gray-200 hover:bg-gray-300 rounded-md p-1", onClick: onCloseClick, children: /* @__PURE__ */ jsx44(X, {}) }) })
+  ] });
   return /* @__PURE__ */ jsxs31("div", { className: "col", children: [
-    /* @__PURE__ */ jsxs31("div", { className: "row justify-between items-start gap-x-8", children: [
-      title ?? /* @__PURE__ */ jsx44("span", { className: clsx32("textstyle-title-lg", {
-        "mb-1": description || descriptionText
-      }), children: titleText }),
-      !!onCloseClick && /* @__PURE__ */ jsx44(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ jsx44("button", { className: "row bg-gray-200 hover:bg-gray-300 rounded-md p-1", onClick: onCloseClick, children: /* @__PURE__ */ jsx44(X, {}) }) })
-    ] }),
-    description ?? /* @__PURE__ */ jsx44("span", { className: "textstyle-description", children: descriptionText })
+    hasTitleRow && titleRow,
+    description ?? (descriptionText && /* @__PURE__ */ jsx44("span", { className: "textstyle-description", children: descriptionText }))
   ] });
 };
 var modalRootName = "modal-root";
@@ -5242,29 +5244,35 @@ var ScrollPicker = ({
 };
 
 // src/components/user-input/ToggleableInput.tsx
-import { useState as useState25 } from "react";
+import { useEffect as useEffect19, useRef as useRef7, useState as useState25 } from "react";
 import { Pencil } from "lucide-react";
 import clsx45 from "clsx";
 import { jsx as jsx63, jsxs as jsxs44 } from "react/jsx-runtime";
 var ToggleableInput = ({
-  id,
   type = "text",
   value,
   onChange = noop,
+  onChangeText = noop,
+  onEditCompleted = noop,
   labelClassName = "",
   initialState = "display",
   size = 20,
   disclaimer,
   onBlur,
-  onEditCompleted = noop,
   ...restProps
 }) => {
   const [isEditing, setIsEditing] = useState25(initialState !== "display");
   const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
+  const ref = useRef7(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearUpdateTimer();
   };
+  useEffect19(() => {
+    if (isEditing) {
+      ref.current?.focus();
+    }
+  }, [isEditing]);
   return /* @__PURE__ */ jsxs44("div", { children: [
     /* @__PURE__ */ jsxs44(
       "div",
@@ -5275,17 +5283,17 @@ var ToggleableInput = ({
           /* @__PURE__ */ jsx63("div", { className: clsx45("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx63(
             "input",
             {
-              autoFocus: true,
+              ref,
               ...restProps,
               value,
               type,
-              id,
               onChange: (event) => {
                 const value2 = event.target.value;
                 restartTimer(() => {
                   onEditCompletedWrapper(value2);
                 });
-                onChange(value2);
+                onChangeText(value2);
+                onChange(event);
               },
               onBlur: (event) => {
                 if (onBlur) {
@@ -5300,7 +5308,7 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: clsx45(labelClassName, `w-full border-none rounded-none focus:ring-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: clsx45(labelClassName, `w-full border-none rounded-none ring-0 outline-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {
                 underline: isEditing
               }),
               onFocus: (event) => event.target.select()
@@ -5312,17 +5320,45 @@ var ToggleableInput = ({
               children: value
             }
           ) }),
-          /* @__PURE__ */ jsx63(Pencil, { className: clsx45(`min-w-[${size}px] cursor-pointer`, { "text-transparent": isEditing }), size })
+          /* @__PURE__ */ jsx63(
+            Pencil,
+            {
+              className: clsx45(`cursor-pointer`, { "text-transparent": isEditing }),
+              size,
+              style: { minWidth: `${size}px` }
+            }
+          )
         ]
       }
     ),
     isEditing && disclaimer && /* @__PURE__ */ jsx63("label", { className: "text-negative", children: disclaimer })
   ] });
 };
+var ToggleableInputUncontrolled = ({
+  value: initialValue,
+  onChangeText = noop,
+  ...restProps
+}) => {
+  const [value, setValue] = useState25(initialValue);
+  useEffect19(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ jsx63(
+    ToggleableInput,
+    {
+      value,
+      onChangeText: (text) => {
+        setValue(text);
+        onChangeText(text);
+      },
+      ...restProps
+    }
+  );
+};
 
 // src/hooks/useTheme.tsx
 import { useContext as useContext3 } from "react";
-import { createContext as createContext3, useState as useState26, useEffect as useEffect19 } from "react";
+import { createContext as createContext3, useState as useState26, useEffect as useEffect20 } from "react";
 import { jsx as jsx64 } from "react/jsx-runtime";
 var defaultThemeTypeTranslation = {
   en: {
@@ -5341,13 +5377,13 @@ var ThemeContext = createContext3({
 });
 var ThemeProvider = ({ children, initialTheme = "light" }) => {
   const [theme, setTheme] = useState26(initialTheme);
-  useEffect19(() => {
+  useEffect20(() => {
     if (theme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
       setTheme(initialTheme);
     }
   }, [initialTheme]);
-  useEffect19(() => {
+  useEffect20(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
   return /* @__PURE__ */ jsx64(ThemeContext.Provider, { value: { theme, setTheme }, children });
@@ -5483,6 +5519,7 @@ export {
   TimeDisplay,
   TimePicker,
   ToggleableInput,
+  ToggleableInputUncontrolled,
   Tooltip,
   UncontrolledCheckbox,
   UncontrolledInput,