@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/user-input/Textarea.mjs

@@ -0,0 +1,120 @@
+// src/components/user-input/Textarea.tsx
+import { useState as useState2 } from "react";
+import clsx from "clsx";
+
+// src/hooks/useSaveDelay.ts
+import { useEffect, useState } from "react";
+function useSaveDelay(setNotificationStatus, delay) {
+  const [updateTimer, setUpdateTimer] = useState(void 0);
+  const [notificationTimer, setNotificationTimer] = useState(void 0);
+  const restartTimer = (onSave) => {
+    clearTimeout(updateTimer);
+    setUpdateTimer(setTimeout(() => {
+      onSave();
+      setNotificationStatus(true);
+      clearTimeout(notificationTimer);
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false);
+        clearTimeout(notificationTimer);
+      }, delay));
+      clearTimeout(updateTimer);
+    }, delay));
+  };
+  const clearUpdateTimer = (hasSaved = true) => {
+    clearTimeout(updateTimer);
+    if (hasSaved) {
+      setNotificationStatus(true);
+      clearTimeout(notificationTimer);
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false);
+        clearTimeout(notificationTimer);
+      }, delay));
+    } else {
+      setNotificationStatus(false);
+    }
+  };
+  useEffect(() => {
+    return () => {
+      clearTimeout(updateTimer);
+      clearTimeout(notificationTimer);
+    };
+  }, []);
+  return { restartTimer, clearUpdateTimer };
+}
+var useSaveDelay_default = useSaveDelay;
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/user-input/Label.tsx
+import { jsx } from "react/jsx-runtime";
+var styleMapping = {
+  labelSmall: "textstyle-label-sm",
+  labelMedium: "textstyle-label-md",
+  labelBig: "textstyle-label-lg"
+};
+var Label = ({
+  children,
+  name,
+  labelType = "labelSmall",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("label", { ...props, children: children ? children : /* @__PURE__ */ jsx("span", { className: styleMapping[labelType], children: name }) });
+};
+
+// src/components/user-input/Textarea.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Textarea = ({
+  label,
+  headline,
+  id,
+  resizable = false,
+  onChange = noop,
+  disclaimer,
+  onBlur = noop,
+  onEditCompleted = noop,
+  defaultStyle = true,
+  className,
+  ...props
+}) => {
+  const [hasFocus, setHasFocus] = useState2(false);
+  const { restartTimer, clearUpdateTimer } = useSaveDelay_default(() => void 0, 3e3);
+  const onEditCompletedWrapper = (text) => {
+    onEditCompleted(text);
+    clearUpdateTimer();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx2(Label, { ...label, htmlFor: id, className: clsx("mb-1", label.className), labelType: label.labelType ?? "labelSmall" }),
+    /* @__PURE__ */ jsxs("div", { className: `${clsx(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 border-gray-300 hover:border-primary rounded-lg": defaultStyle })}`, children: [
+      headline && /* @__PURE__ */ jsx2("span", { className: "mx-3 mt-3 block text-gray-700 font-bold", children: headline }),
+      /* @__PURE__ */ jsx2(
+        "textarea",
+        {
+          id,
+          className: clsx("pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none", { "resize-none": !resizable, "h-32": defaultStyle, "mt-3": !headline }, className),
+          onChange: (event) => {
+            const value = event.target.value;
+            restartTimer(() => {
+              onEditCompletedWrapper(value);
+            });
+            onChange(value);
+          },
+          onFocus: () => {
+            setHasFocus(true);
+          },
+          onBlur: (event) => {
+            onBlur(event);
+            onEditCompletedWrapper(event.target.value);
+            setHasFocus(false);
+          },
+          ...props
+        }
+      )
+    ] }),
+    hasFocus && disclaimer && /* @__PURE__ */ jsx2("label", { className: "text-negative", children: disclaimer })
+  ] });
+};
+export {
+  Textarea
+};
+//# sourceMappingURL=Textarea.mjs.map

package/dist/components/user-input/Textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/user-input/Textarea.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts","../../../src/components/user-input/Label.tsx"],"sourcesContent":["import type { TextareaHTMLAttributes } from 'react'\nimport { useState } from 'react'\nimport clsx from 'clsx'\nimport useSaveDelay from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type TextareaProps = {\n  /** Outside the area */\n  label?: Omit<LabelProps, 'id'>,\n  /** Inside the area */\n  headline?: string,\n  id?: string,\n  resizable?: boolean,\n  onChange?: (text: string) => void,\n  disclaimer?: string,\n  onEditCompleted?: (text: string) => void,\n  defaultStyle?: boolean,\n} & Omit<TextareaHTMLAttributes<Element>, 'id' | 'onChange'>\n\n/**\n * A Textarea component for inputting longer texts\n *\n * The State is managed by the parent\n */\nexport const Textarea = ({\n  label,\n  headline,\n  id,\n  resizable = false,\n  onChange = noop,\n  disclaimer,\n  onBlur = noop,\n  onEditCompleted = noop,\n  defaultStyle = true,\n  className,\n  ...props\n}: TextareaProps) => {\n  const [hasFocus, setHasFocus] = useState(false)\n  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)\n\n  const onEditCompletedWrapper = (text: string) => {\n    onEditCompleted(text)\n    clearUpdateTimer()\n  }\n\n  return (\n    <div className=\"w-full\">\n      {label && (<Label {...label} htmlFor={id} className={clsx('mb-1', label.className)} labelType={label.labelType ?? 'labelSmall'}/>)}\n      <div className={`${clsx(' bg-surface text-on-surface focus-within:border-primary relative', { 'shadow border-2 border-gray-300 hover:border-primary rounded-lg': defaultStyle })}`}>\n        {headline && (\n          <span className=\"mx-3 mt-3 block text-gray-700 font-bold\">\n            {headline}\n          </span>\n        )}\n        <textarea\n          id={id}\n          className={clsx('pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none', { 'resize-none': !resizable, 'h-32': defaultStyle, 'mt-3': !headline }, className)}\n          onChange={(event) => {\n            const value = event.target.value\n            restartTimer(() => {\n              onEditCompletedWrapper(value)\n            })\n            onChange(value)\n          }}\n          onFocus={() => {\n            setHasFocus(true)\n          }}\n          onBlur={(event) => {\n            onBlur(event)\n            onEditCompletedWrapper(event.target.value)\n            setHasFocus(false)\n          }}\n          {...props}\n        >\n      </textarea>\n      </div>\n      {(hasFocus && disclaimer) && (\n        <label className=\"text-negative\">\n          {disclaimer}\n        </label>\n      )}\n    </div>\n  )\n}\n","import { useEffect, useState } from 'react'\n\nfunction useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n  const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n  const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n\n  const restartTimer = (onSave: () => void) => {\n    clearTimeout(updateTimer)\n    setUpdateTimer(setTimeout(() => {\n      onSave()\n      setNotificationStatus(true)\n      // Show Saved Notification for fade animation duration\n      clearTimeout(notificationTimer)\n      setNotificationTimer(setTimeout(() => {\n        setNotificationStatus(false)\n        clearTimeout(notificationTimer)\n      }, delay))\n      clearTimeout(updateTimer)\n    }, delay))\n  }\n\n  const clearUpdateTimer = (hasSaved = true) => {\n    clearTimeout(updateTimer)\n    if (hasSaved) {\n      setNotificationStatus(true)\n      clearTimeout(notificationTimer)\n      setNotificationTimer(setTimeout(() => {\n        setNotificationStatus(false)\n        clearTimeout(notificationTimer)\n      }, delay))\n    } else {\n      setNotificationStatus(false)\n    }\n  }\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(updateTimer)\n      clearTimeout(notificationTimer)\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { restartTimer, clearUpdateTimer }\n}\n\nexport default useSaveDelay\n","export const noop = () => undefined\n","import type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig'\nconst styleMapping: Record<LabelType, string> = {\n  labelSmall: 'textstyle-label-sm',\n  labelMedium: 'textstyle-label-md',\n  labelBig: 'textstyle-label-lg',\n}\n\n\nexport type LabelProps = {\n  /** The text for the label */\n  name?: string,\n  /** The styling for the label */\n  labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/**\n * A Label component\n */\nexport const Label = ({\n  children,\n  name,\n  labelType = 'labelSmall',\n  ...props\n}: LabelProps) => {\n  return (\n    <label {...props}>\n      {children ? children : (<span className={styleMapping[labelType]}>{name}</span>)}\n    </label>\n  )\n}\n"],"mappings":"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","names":["useState","jsx","useState"]}

package/dist/components/user-input/ToggleableInput.d.mts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react';
+
+type InputProps = {
+    /**
+     * used for the label's `for` attribute
+     */
+    id: string;
+    value: string;
+    /**
+     * @default 'text'
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Callback for when the input's value changes
+     * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled
+     * That could be enforced through a union type but that seems a bit overkill
+     * @default noop
+     */
+    onChange?: (text: string) => void;
+    labelClassName?: string;
+    initialState?: 'editing' | 'display';
+    size?: number;
+    disclaimer?: string;
+    onEditCompleted?: (text: string) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>;
+/**
+ * A Text input component for inputting text. It changes appearance upon entering the edit mode and switches
+ * back to display mode on loss of focus or on enter
+ *
+ * The State is managed by the parent
+ */
+declare const ToggleableInput: ({ id, type, value, onChange, labelClassName, initialState, size, disclaimer, onBlur, onEditCompleted, ...restProps }: InputProps) => react_jsx_runtime.JSX.Element;
+
+export { ToggleableInput };

package/dist/components/user-input/ToggleableInput.d.ts

@@ -1,4 +1,6 @@
-import type { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react';
+
 type InputProps = {
     /**
      * used for the label's `for` attribute
@@ -28,5 +30,6 @@ type InputProps = {
  *
  * The State is managed by the parent
  */
-export declare const ToggleableInput: ({ id, type, value, onChange, labelClassName, initialState, size, disclaimer, onBlur, onEditCompleted, ...restProps }: InputProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const ToggleableInput: ({ id, type, value, onChange, labelClassName, initialState, size, disclaimer, onBlur, onEditCompleted, ...restProps }: InputProps) => react_jsx_runtime.JSX.Element;
+
+export { ToggleableInput };

package/dist/components/user-input/ToggleableInput.js

@@ -1,40 +1,163 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Pencil } from 'lucide-react';
-import clsx from 'clsx';
-import useSaveDelay from '../../hooks/useSaveDelay';
-import { noop } from '../../util/noop';
-/**
- * A Text input component for inputting text. It changes appearance upon entering the edit mode and switches
- * back to display mode on loss of focus or on enter
- *
- * The State is managed by the parent
- */
-export const ToggleableInput = ({ id, type = 'text', value, onChange = noop, labelClassName = '', initialState = 'display', size = 20, disclaimer, onBlur, onEditCompleted = noop, ...restProps }) => {
-    const [isEditing, setIsEditing] = useState(initialState !== 'display');
-    const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000);
-    const onEditCompletedWrapper = (text) => {
-        onEditCompleted(text);
-        clearUpdateTimer();
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/user-input/ToggleableInput.tsx
+var ToggleableInput_exports = {};
+__export(ToggleableInput_exports, {
+  ToggleableInput: () => ToggleableInput
+});
+module.exports = __toCommonJS(ToggleableInput_exports);
+var import_react2 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_clsx = __toESM(require("clsx"));
+
+// src/hooks/useSaveDelay.ts
+var import_react = require("react");
+function useSaveDelay(setNotificationStatus, delay) {
+  const [updateTimer, setUpdateTimer] = (0, import_react.useState)(void 0);
+  const [notificationTimer, setNotificationTimer] = (0, import_react.useState)(void 0);
+  const restartTimer = (onSave) => {
+    clearTimeout(updateTimer);
+    setUpdateTimer(setTimeout(() => {
+      onSave();
+      setNotificationStatus(true);
+      clearTimeout(notificationTimer);
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false);
+        clearTimeout(notificationTimer);
+      }, delay));
+      clearTimeout(updateTimer);
+    }, delay));
+  };
+  const clearUpdateTimer = (hasSaved = true) => {
+    clearTimeout(updateTimer);
+    if (hasSaved) {
+      setNotificationStatus(true);
+      clearTimeout(notificationTimer);
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false);
+        clearTimeout(notificationTimer);
+      }, delay));
+    } else {
+      setNotificationStatus(false);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    return () => {
+      clearTimeout(updateTimer);
+      clearTimeout(notificationTimer);
     };
-    return (_jsxs("div", { children: [_jsxs("div", { className: "row items-center w-full gap-x-2 overflow-hidden", onClick: () => !isEditing ? setIsEditing(!isEditing) : undefined, children: [_jsx("div", { className: clsx('row overflow-hidden', { 'flex-1': isEditing }), children: isEditing ? (_jsx("input", { autoFocus: true, ...restProps, value: value, type: type, id: id, onChange: event => {
-                                const value = event.target.value;
-                                restartTimer(() => {
-                                    onEditCompletedWrapper(value);
-                                });
-                                onChange(value);
-                            }, onBlur: (event) => {
-                                if (onBlur) {
-                                    onBlur(event);
-                                }
-                                onEditCompletedWrapper(value);
-                                setIsEditing(false);
-                            }, onKeyDown: event => {
-                                if (event.key === 'Enter') {
-                                    setIsEditing(false);
-                                    onEditCompletedWrapper(value);
-                                }
-                            }, className: clsx(labelClassName, `w-full border-none rounded-none focus:ring-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {
-                                underline: isEditing
-                            }), onFocus: event => event.target.select() })) : (_jsx("span", { className: clsx(labelClassName, 'max-w-xs break-words overflow-hidden'), children: value })) }), _jsx(Pencil, { className: clsx(`min-w-[${size}px] cursor-pointer`, { 'text-transparent': isEditing }), size: size })] }), (isEditing && disclaimer) && (_jsx("label", { className: "text-negative", children: disclaimer }))] }));
+  }, []);
+  return { restartTimer, clearUpdateTimer };
+}
+var useSaveDelay_default = useSaveDelay;
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/user-input/ToggleableInput.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToggleableInput = ({
+  id,
+  type = "text",
+  value,
+  onChange = noop,
+  labelClassName = "",
+  initialState = "display",
+  size = 20,
+  disclaimer,
+  onBlur,
+  onEditCompleted = noop,
+  ...restProps
+}) => {
+  const [isEditing, setIsEditing] = (0, import_react2.useState)(initialState !== "display");
+  const { restartTimer, clearUpdateTimer } = useSaveDelay_default(() => void 0, 3e3);
+  const onEditCompletedWrapper = (text) => {
+    onEditCompleted(text);
+    clearUpdateTimer();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: "row items-center w-full gap-x-2 overflow-hidden",
+        onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              autoFocus: true,
+              ...restProps,
+              value,
+              type,
+              id,
+              onChange: (event) => {
+                const value2 = event.target.value;
+                restartTimer(() => {
+                  onEditCompletedWrapper(value2);
+                });
+                onChange(value2);
+              },
+              onBlur: (event) => {
+                if (onBlur) {
+                  onBlur(event);
+                }
+                onEditCompletedWrapper(value);
+                setIsEditing(false);
+              },
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  setIsEditing(false);
+                  onEditCompletedWrapper(value);
+                }
+              },
+              className: (0, import_clsx.default)(labelClassName, `w-full border-none rounded-none focus:ring-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {
+                underline: isEditing
+              }),
+              onFocus: (event) => event.target.select()
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: (0, import_clsx.default)(labelClassName, "max-w-xs break-words overflow-hidden"),
+              children: value
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Pencil, { className: (0, import_clsx.default)(`min-w-[${size}px] cursor-pointer`, { "text-transparent": isEditing }), size })
+        ]
+      }
+    ),
+    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "text-negative", children: disclaimer })
+  ] });
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleableInput
+});
+//# sourceMappingURL=ToggleableInput.js.map

package/dist/components/user-input/ToggleableInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/user-input/ToggleableInput.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts"],"sourcesContent":["import { useState } from 'react'\nimport type { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'\nimport { Pencil } from 'lucide-react'\nimport clsx from 'clsx'\nimport useSaveDelay from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\n\ntype InputProps = {\n  /**\n   * used for the label's `for` attribute\n   */\n  id: string,\n  value: string,\n  /**\n   * @default 'text'\n   */\n  type?: HTMLInputTypeAttribute,\n  /**\n   * Callback for when the input's value changes\n   * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n   * That could be enforced through a union type but that seems a bit overkill\n   * @default noop\n   */\n  onChange?: (text: string) => void,\n  labelClassName?: string,\n  initialState?: 'editing' | 'display',\n  size?: number,\n  disclaimer?: string,\n  onEditCompleted?: (text: string) => void,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>\n\n/**\n * A Text input component for inputting text. It changes appearance upon entering the edit mode and switches\n * back to display mode on loss of focus or on enter\n *\n * The State is managed by the parent\n */\nexport const ToggleableInput = ({\n  id,\n  type = 'text',\n  value,\n  onChange = noop,\n  labelClassName = '',\n  initialState = 'display',\n  size = 20,\n  disclaimer,\n  onBlur,\n  onEditCompleted = noop,\n  ...restProps\n}: InputProps) => {\n  const [isEditing, setIsEditing] = useState(initialState !== 'display')\n  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)\n\n  const onEditCompletedWrapper = (text: string) => {\n    onEditCompleted(text)\n    clearUpdateTimer()\n  }\n\n  return (\n    <div>\n      <div\n        className=\"row items-center w-full gap-x-2 overflow-hidden\"\n        onClick={() => !isEditing ? setIsEditing(!isEditing) : undefined}\n      >\n        <div className={clsx('row overflow-hidden', { 'flex-1': isEditing })}>\n          {isEditing ? (\n            <input\n              autoFocus\n              {...restProps}\n              value={value}\n              type={type}\n              id={id}\n              onChange={event => {\n                const value = event.target.value\n                restartTimer(() => {\n                  onEditCompletedWrapper(value)\n                })\n                onChange(value)\n              }}\n              onBlur={(event) => {\n                if (onBlur) {\n                  onBlur(event)\n                }\n                onEditCompletedWrapper(value)\n                setIsEditing(false)\n              }}\n              onKeyDown={event => {\n                if (event.key === 'Enter') {\n                  setIsEditing(false)\n                  onEditCompletedWrapper(value)\n                }\n              }}\n              className={clsx(labelClassName, `w-full border-none rounded-none focus:ring-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {\n                underline: isEditing\n              })}\n              onFocus={event => event.target.select()}\n            />\n          ) : (\n            <span\n              className={clsx(labelClassName, 'max-w-xs break-words overflow-hidden')}\n            >\n        {value}\n        </span>\n          )}\n        </div>\n        <Pencil className={clsx(`min-w-[${size}px] cursor-pointer`, { 'text-transparent': isEditing })} size={size} />\n      </div>\n      {(isEditing && disclaimer) && (\n        <label className=\"text-negative\">\n          {disclaimer}\n        </label>\n      )}\n    </div>\n  )\n}\n","import { useEffect, useState } from 'react'\n\nfunction useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n  const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n  const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n\n  const restartTimer = (onSave: () => void) => {\n    clearTimeout(updateTimer)\n    setUpdateTimer(setTimeout(() => {\n      onSave()\n      setNotificationStatus(true)\n      // Show Saved Notification for fade animation duration\n      clearTimeout(notificationTimer)\n      setNotificationTimer(setTimeout(() => {\n        setNotificationStatus(false)\n        clearTimeout(notificationTimer)\n      }, delay))\n      clearTimeout(updateTimer)\n    }, delay))\n  }\n\n  const clearUpdateTimer = (hasSaved = true) => {\n    clearTimeout(updateTimer)\n    if (hasSaved) {\n      setNotificationStatus(true)\n      clearTimeout(notificationTimer)\n      setNotificationTimer(setTimeout(() => {\n        setNotificationStatus(false)\n        clearTimeout(notificationTimer)\n      }, delay))\n    } else {\n      setNotificationStatus(false)\n    }\n  }\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(updateTimer)\n      clearTimeout(notificationTimer)\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { restartTimer, clearUpdateTimer }\n}\n\nexport default useSaveDelay\n","export const noop = () => undefined\n"],"mappings":"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","names":["import_react","clsx","value"]}

package/dist/components/user-input/ToggleableInput.mjs

@@ -0,0 +1,128 @@
+// src/components/user-input/ToggleableInput.tsx
+import { useState as useState2 } from "react";
+import { Pencil } from "lucide-react";
+import clsx from "clsx";
+
+// src/hooks/useSaveDelay.ts
+import { useEffect, useState } from "react";
+function useSaveDelay(setNotificationStatus, delay) {
+  const [updateTimer, setUpdateTimer] = useState(void 0);
+  const [notificationTimer, setNotificationTimer] = useState(void 0);
+  const restartTimer = (onSave) => {
+    clearTimeout(updateTimer);
+    setUpdateTimer(setTimeout(() => {
+      onSave();
+      setNotificationStatus(true);
+      clearTimeout(notificationTimer);
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false);
+        clearTimeout(notificationTimer);
+      }, delay));
+      clearTimeout(updateTimer);
+    }, delay));
+  };
+  const clearUpdateTimer = (hasSaved = true) => {
+    clearTimeout(updateTimer);
+    if (hasSaved) {
+      setNotificationStatus(true);
+      clearTimeout(notificationTimer);
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false);
+        clearTimeout(notificationTimer);
+      }, delay));
+    } else {
+      setNotificationStatus(false);
+    }
+  };
+  useEffect(() => {
+    return () => {
+      clearTimeout(updateTimer);
+      clearTimeout(notificationTimer);
+    };
+  }, []);
+  return { restartTimer, clearUpdateTimer };
+}
+var useSaveDelay_default = useSaveDelay;
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/user-input/ToggleableInput.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToggleableInput = ({
+  id,
+  type = "text",
+  value,
+  onChange = noop,
+  labelClassName = "",
+  initialState = "display",
+  size = 20,
+  disclaimer,
+  onBlur,
+  onEditCompleted = noop,
+  ...restProps
+}) => {
+  const [isEditing, setIsEditing] = useState2(initialState !== "display");
+  const { restartTimer, clearUpdateTimer } = useSaveDelay_default(() => void 0, 3e3);
+  const onEditCompletedWrapper = (text) => {
+    onEditCompleted(text);
+    clearUpdateTimer();
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "row items-center w-full gap-x-2 overflow-hidden",
+        onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: clsx("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              autoFocus: true,
+              ...restProps,
+              value,
+              type,
+              id,
+              onChange: (event) => {
+                const value2 = event.target.value;
+                restartTimer(() => {
+                  onEditCompletedWrapper(value2);
+                });
+                onChange(value2);
+              },
+              onBlur: (event) => {
+                if (onBlur) {
+                  onBlur(event);
+                }
+                onEditCompletedWrapper(value);
+                setIsEditing(false);
+              },
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  setIsEditing(false);
+                  onEditCompletedWrapper(value);
+                }
+              },
+              className: clsx(labelClassName, `w-full border-none rounded-none focus:ring-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {
+                underline: isEditing
+              }),
+              onFocus: (event) => event.target.select()
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(labelClassName, "max-w-xs break-words overflow-hidden"),
+              children: value
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Pencil, { className: clsx(`min-w-[${size}px] cursor-pointer`, { "text-transparent": isEditing }), size })
+        ]
+      }
+    ),
+    isEditing && disclaimer && /* @__PURE__ */ jsx("label", { className: "text-negative", children: disclaimer })
+  ] });
+};
+export {
+  ToggleableInput
+};
+//# sourceMappingURL=ToggleableInput.mjs.map

package/dist/components/user-input/ToggleableInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/user-input/ToggleableInput.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts"],"sourcesContent":["import { useState } from 'react'\nimport type { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'\nimport { Pencil } from 'lucide-react'\nimport clsx from 'clsx'\nimport useSaveDelay from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\n\ntype InputProps = {\n  /**\n   * used for the label's `for` attribute\n   */\n  id: string,\n  value: string,\n  /**\n   * @default 'text'\n   */\n  type?: HTMLInputTypeAttribute,\n  /**\n   * Callback for when the input's value changes\n   * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n   * That could be enforced through a union type but that seems a bit overkill\n   * @default noop\n   */\n  onChange?: (text: string) => void,\n  labelClassName?: string,\n  initialState?: 'editing' | 'display',\n  size?: number,\n  disclaimer?: string,\n  onEditCompleted?: (text: string) => void,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>\n\n/**\n * A Text input component for inputting text. It changes appearance upon entering the edit mode and switches\n * back to display mode on loss of focus or on enter\n *\n * The State is managed by the parent\n */\nexport const ToggleableInput = ({\n  id,\n  type = 'text',\n  value,\n  onChange = noop,\n  labelClassName = '',\n  initialState = 'display',\n  size = 20,\n  disclaimer,\n  onBlur,\n  onEditCompleted = noop,\n  ...restProps\n}: InputProps) => {\n  const [isEditing, setIsEditing] = useState(initialState !== 'display')\n  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)\n\n  const onEditCompletedWrapper = (text: string) => {\n    onEditCompleted(text)\n    clearUpdateTimer()\n  }\n\n  return (\n    <div>\n      <div\n        className=\"row items-center w-full gap-x-2 overflow-hidden\"\n        onClick={() => !isEditing ? setIsEditing(!isEditing) : undefined}\n      >\n        <div className={clsx('row overflow-hidden', { 'flex-1': isEditing })}>\n          {isEditing ? (\n            <input\n              autoFocus\n              {...restProps}\n              value={value}\n              type={type}\n              id={id}\n              onChange={event => {\n                const value = event.target.value\n                restartTimer(() => {\n                  onEditCompletedWrapper(value)\n                })\n                onChange(value)\n              }}\n              onBlur={(event) => {\n                if (onBlur) {\n                  onBlur(event)\n                }\n                onEditCompletedWrapper(value)\n                setIsEditing(false)\n              }}\n              onKeyDown={event => {\n                if (event.key === 'Enter') {\n                  setIsEditing(false)\n                  onEditCompletedWrapper(value)\n                }\n              }}\n              className={clsx(labelClassName, `w-full border-none rounded-none focus:ring-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {\n                underline: isEditing\n              })}\n              onFocus={event => event.target.select()}\n            />\n          ) : (\n            <span\n              className={clsx(labelClassName, 'max-w-xs break-words overflow-hidden')}\n            >\n        {value}\n        </span>\n          )}\n        </div>\n        <Pencil className={clsx(`min-w-[${size}px] cursor-pointer`, { 'text-transparent': isEditing })} size={size} />\n      </div>\n      {(isEditing && disclaimer) && (\n        <label className=\"text-negative\">\n          {disclaimer}\n        </label>\n      )}\n    </div>\n  )\n}\n","import { useEffect, useState } from 'react'\n\nfunction useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n  const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n  const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n\n  const restartTimer = (onSave: () => void) => {\n    clearTimeout(updateTimer)\n    setUpdateTimer(setTimeout(() => {\n      onSave()\n      setNotificationStatus(true)\n      // Show Saved Notification for fade animation duration\n      clearTimeout(notificationTimer)\n      setNotificationTimer(setTimeout(() => {\n        setNotificationStatus(false)\n        clearTimeout(notificationTimer)\n      }, delay))\n      clearTimeout(updateTimer)\n    }, delay))\n  }\n\n  const clearUpdateTimer = (hasSaved = true) => {\n    clearTimeout(updateTimer)\n    if (hasSaved) {\n      setNotificationStatus(true)\n      clearTimeout(notificationTimer)\n      setNotificationTimer(setTimeout(() => {\n        setNotificationStatus(false)\n        clearTimeout(notificationTimer)\n      }, delay))\n    } else {\n      setNotificationStatus(false)\n    }\n  }\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(updateTimer)\n      clearTimeout(notificationTimer)\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { restartTimer, clearUpdateTimer }\n}\n\nexport default useSaveDelay\n","export const noop = () => undefined\n"],"mappings":"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","names":["useState","useState","value"]}

package/dist/hooks/useHoverState.d.mts

@@ -0,0 +1,42 @@
+import { Dispatch, SetStateAction } from 'react';
+
+type UseHoverStateProps = {
+    /**
+     * The delay after which the menu is closed in milliseconds
+     *
+     * default: 200ms
+     */
+    closingDelay: number;
+    /**
+     * Whether the hover state management should be disabled
+     *
+     * default: false
+     */
+    isDisabled: boolean;
+};
+type UseHoverStateReturnType = {
+    /**
+     * Whether the element is hovered
+     */
+    isHovered: boolean;
+    /**
+     * Function to change the current hover status
+     */
+    setIsHovered: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Handlers to pass on to the component that should be hovered
+     */
+    handlers: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+};
+/**
+ * @param props See UseHoverStateProps
+ *
+ * A react hook for managing the hover state of a component. The handlers provided should be
+ * forwarded to the component which should be hovered over
+ */
+declare const useHoverState: (props?: Partial<UseHoverStateProps> | undefined) => UseHoverStateReturnType;
+
+export { useHoverState };

package/dist/hooks/useHoverState.d.ts

@@ -1,4 +1,5 @@
-import type { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
+
 type UseHoverStateProps = {
     /**
      * The delay after which the menu is closed in milliseconds
@@ -36,5 +37,6 @@ type UseHoverStateReturnType = {
  * A react hook for managing the hover state of a component. The handlers provided should be
  * forwarded to the component which should be hovered over
  */
-export declare const useHoverState: (props?: Partial<UseHoverStateProps> | undefined) => UseHoverStateReturnType;
-export {};
+declare const useHoverState: (props?: Partial<UseHoverStateProps> | undefined) => UseHoverStateReturnType;
+
+export { useHoverState };