@helpwave/hightide 0.1.25 → 0.1.27

package/dist/components/user-action/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/user-action/Textarea.tsx","../../../src/hooks/useDelay.ts","../../../src/util/noop.ts","../../../src/components/user-action/Label.tsx"],"sourcesContent":["import type { TextareaHTMLAttributes } from 'react'\nimport { useEffect, useState } from 'react'\nimport clsx from 'clsx'\nimport { useDelay, type UseDelayOptions } from '../../hooks/useDelay'\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  value?: string,\n  resizable?: boolean,\n  onChangeText?: (text: string) => void,\n  disclaimer?: string,\n  onEditCompleted?: (text: string) => void,\n  saveDelayOptions?: UseDelayOptions,\n  defaultStyle?: boolean,\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>\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                           onChangeText = noop,\n                           disclaimer,\n                           onBlur = noop,\n                           onEditCompleted = noop,\n                           saveDelayOptions,\n                           defaultStyle = true,\n                           disabled = false,\n                           className,\n                           ...props\n                         }: TextareaProps) => {\n  const [hasFocus, setHasFocus] = useState(false)\n  const { restartTimer, clearTimer } = useDelay(saveDelayOptions)\n\n  const onEditCompletedWrapper = (text: string) => {\n    onEditCompleted(text)\n    clearTimer()\n  }\n\n  return (\n    <div className=\"w-full\">\n      {label && (\n        <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}\n               labelType={label.labelType ?? 'labelSmall'}/>\n      )}\n      <div\n        className={clsx('relative',\n          {\n            'border-2 rounded-lg': defaultStyle,\n            'bg-input-background text-input-text hover:border-primary focus-within:border-primary': defaultStyle && !disabled,\n            'border-disabled-border bg-disabled-background cursor-not-allowed': defaultStyle && disabled,\n          })}\n      >\n        {headline && (\n          <span className=\"mx-3 mt-3 block textstyle-label-md\">\n            {headline}\n          </span>\n        )}\n        <textarea\n          id={id}\n          className={clsx('pt-0 px-3 border-transparent appearance-none w-full leading-tight focus:ring-0 focus:outline-none', {\n            'resize-none': !resizable,\n            'h-32': defaultStyle,\n            'mt-3': !headline,\n            'text-disabled-text': disabled,\n          }, className)}\n          onChange={(event) => {\n            const value = event.target.value\n            restartTimer(() => {\n              onEditCompletedWrapper(value)\n            })\n            onChange(event)\n            onChangeText(value)\n          }}\n          onFocus={() => {\n            setHasFocus(true)\n          }}\n          onBlur={(event) => {\n            onBlur(event)\n            onEditCompletedWrapper(event.target.value)\n            setHasFocus(false)\n          }}\n          disabled={disabled}\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\n/**\n * A Textarea component that is not controlled by its parent\n */\nexport const TextareaUncontrolled = ({\n                                       value = '',\n                                       onChangeText = noop,\n                                       ...props\n                                     }: TextareaProps) => {\n  const [text, setText] = useState<string>(value)\n\n  useEffect(() => {\n    setText(value)\n  }, [value])\n\n  return (\n    <Textarea\n      {...props}\n      value={text}\n      onChangeText={text => {\n        setText(text)\n        onChangeText(text)\n      }}\n    />\n  )\n}","import { useEffect, useState } from 'react'\n\nexport type UseDelayOptionsResolved = {\n  delay: number,\n  disabled: boolean,\n}\n\nexport type UseDelayOptions = Partial<UseDelayOptionsResolved>\n\nconst defaultOptions: UseDelayOptionsResolved = {\n  delay: 3000,\n  disabled: false,\n}\n\nexport function useDelay(options?: UseDelayOptions) {\n  const [timer, setTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n  const { delay, disabled }: UseDelayOptionsResolved = {\n    ...defaultOptions,\n    ...options\n  }\n\n  const clearTimer = () => {\n    clearTimeout(timer)\n    setTimer(undefined)\n  }\n\n  const restartTimer = (onDelayFinish: () => void) => {\n    if(disabled) {\n      return\n    }\n    clearTimeout(timer)\n    setTimer(setTimeout(() => {\n      onDelayFinish()\n      setTimer(undefined)\n    }, delay))\n  }\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [timer])\n\n  useEffect(() => {\n    if(disabled){\n      clearTimeout(timer)\n      setTimer(undefined)\n    }\n  }, [disabled, timer])\n\n  return { restartTimer, clearTimer, hasActiveTimer: !!timer }\n}","export const noop = () => undefined\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n  labelSmall: 'textstyle-label-sm',\n  labelMedium: 'textstyle-label-md',\n  labelBig: 'textstyle-label-lg',\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                        className,\n                        ...props\n                      }: LabelProps) => {\n  return (\n    <label {...props} className={clsx(styleMapping[labelType], className)}>\n      {children ? children : name}\n    </label>\n  )\n}\n"],"mappings":"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","names":["import_react","import_clsx","clsx","import_jsx_runtime","clsx","text"]}
+{"version":3,"sources":["../../../src/components/user-action/Textarea.tsx","../../../src/components/user-action/Label.tsx","../../../src/hooks/useDelay.ts","../../../src/utils/noop.ts"],"sourcesContent":["import type { ReactNode, TextareaHTMLAttributes } from 'react'\nimport { forwardRef, useEffect, useId, useState } from 'react'\nimport clsx from 'clsx'\nimport type { LabelProps } from '@/src/components/user-action/Label'\nimport { Label } from '@/src/components/user-action/Label'\nimport { useDelay, type UseDelayOptions } from '@/src/hooks/useDelay'\nimport { noop } from '@/src/utils/noop'\n\nexport type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {\n  /** Inside the area */\n  value?: string,\n  invalid?: boolean,\n  onChangeText?: (text: string) => void,\n  onEditCompleted?: (text: string) => void,\n  saveDelayOptions?: UseDelayOptions,\n  defaultStyle?: boolean,\n}\n\n/**\n * A Textarea component for inputting longer texts\n *\n * The State is managed by the parent\n */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea({\n                                                                                           id,\n                                                                                           onChange,\n                                                                                           onChangeText,\n                                                                                           onBlur,\n                                                                                           onEditCompleted,\n                                                                                           saveDelayOptions,\n                                                                                           defaultStyle = true,\n                                                                                           invalid = false,\n                                                                                           disabled = false,\n                                                                                           className,\n                                                                                           ...props\n                                                                                         }, ref) {\n  const { restartTimer, clearTimer } = useDelay(saveDelayOptions)\n\n  const onEditCompletedWrapper = (text: string) => {\n    onEditCompleted?.(text)\n    clearTimer()\n  }\n\n  return (\n    <textarea\n      ref={ref}\n      id={id}\n      className={clsx(\n        'resize-none w-full h-32 overflow-y-scroll',\n        'py-2 px-3 rounded-md border-1',\n        {\n          'bg-input-background text-input-text hover:border-primary focus-within:border-primary focus-within:ring-2 ring-focus': !disabled && !invalid,\n          'bg-on-negative text-negative border-negative-border hover:border-negative-border-hover focus-visible:ring-negative-border': invalid && !disabled && defaultStyle,\n          'text-disabled-text bg-disabled-background border-disabled-border': disabled && defaultStyle,\n        },\n        className\n      )}\n      onChange={(event) => {\n        const value = event.target.value\n        restartTimer(() => {\n          onEditCompletedWrapper(value)\n        })\n        onChange?.(event)\n        onChangeText?.(value)\n      }}\n      onBlur={(event) => {\n        onBlur?.(event)\n        onEditCompletedWrapper(event.target.value)\n      }}\n      disabled={disabled}\n      {...props}\n    />\n  )\n})\n\n/**\n * A Textarea component that is not controlled by its parent\n */\nexport const TextareaUncontrolled = ({\n                                       value = '',\n                                       onChangeText = noop,\n                                       ...props\n                                     }: TextareaProps) => {\n  const [text, setText] = useState<string>(value)\n\n  useEffect(() => {\n    setText(value)\n  }, [value])\n\n  return (\n    <Textarea\n      {...props}\n      value={text}\n      onChangeText={text => {\n        setText(text)\n        onChangeText(text)\n      }}\n    />\n  )\n}\n\nexport type TextareaWithHeadlineProps = Omit<TextareaProps, 'defaultStyle'> & {\n  headline: ReactNode,\n  headlineProps: Omit<LabelProps, 'children'>,\n  containerClassName?: string,\n}\n\nexport const TextareaWithHeadline = ({\n                                       id,\n                                       headline,\n                                       headlineProps,\n                                       disabled,\n                                       className,\n                                       containerClassName,\n                                       ...props\n                                     }: TextareaWithHeadlineProps) => {\n  const genId = useId()\n  const usedId = id ?? genId\n\n  return (\n    <div\n      className={clsx(\n        'group flex-col-3 border-2 rounded-lg',\n        {\n          'bg-input-background text-input-text hover:border-primary focus-within:border-primary': !disabled,\n          'border-disabled-border bg-disabled-background cursor-not-allowed': disabled,\n        },\n        containerClassName\n      )}\n    >\n      {headline && (\n        <Label size=\"md\" {...headlineProps} htmlFor={usedId}>\n          {headline}\n        </Label>\n      )}\n      <Textarea\n        {...props}\n        id={usedId}\n        className={clsx(\n          'border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32',\n          className\n        )}\n        defaultStyle={false}\n      />\n    </div>\n  )\n}","import clsx from 'clsx'\nimport type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'sm' | 'md'\n\nconst styleMapping: Record<LabelType, string> = {\n  sm: 'typography-label-xs color-label-text',\n  md: 'typography-label-md color-label-text',\n}\n\nexport type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  /** The size of the label */\n  size?: LabelType,\n}\n\n/**\n * A Label component\n */\nexport const Label = ({\n                        children,\n                        size = 'md',\n                        className,\n                        ...props\n                      }: LabelProps) => {\n  return (\n    <label {...props} className={clsx(styleMapping[size], className)}>\n      {children}\n    </label>\n  )\n}\n","import { useEffect, useState } from 'react'\n\nexport type UseDelayOptionsResolved = {\n  delay: number,\n  disabled: boolean,\n}\n\nexport type UseDelayOptions = Partial<UseDelayOptionsResolved>\n\nconst defaultOptions: UseDelayOptionsResolved = {\n  delay: 3000,\n  disabled: false,\n}\n\nexport function useDelay(options?: UseDelayOptions) {\n  const [timer, setTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n  const { delay, disabled }: UseDelayOptionsResolved = {\n    ...defaultOptions,\n    ...options\n  }\n\n  const clearTimer = () => {\n    clearTimeout(timer)\n    setTimer(undefined)\n  }\n\n  const restartTimer = (onDelayFinish: () => void) => {\n    if(disabled) {\n      return\n    }\n    clearTimeout(timer)\n    setTimer(setTimeout(() => {\n      onDelayFinish()\n      setTimer(undefined)\n    }, delay))\n  }\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [timer])\n\n  useEffect(() => {\n    if(disabled){\n      clearTimeout(timer)\n      setTimer(undefined)\n    }\n  }, [disabled, timer])\n\n  return { restartTimer, clearTimer, hasActiveTimer: !!timer }\n}","export const noop = () => undefined\n"],"mappings":"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","names":["import_react","import_clsx","clsx","import_jsx_runtime","Textarea","clsx","text"]}

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

@@ -1,7 +1,23 @@
 // src/components/user-action/Textarea.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { forwardRef, useEffect as useEffect2, useId, useState as useState2 } from "react";
 import clsx2 from "clsx";
 
+// src/components/user-action/Label.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var styleMapping = {
+  sm: "typography-label-xs color-label-text",
+  md: "typography-label-md color-label-text"
+};
+var Label = ({
+  children,
+  size = "md",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("label", { ...props, className: clsx(styleMapping[size], className), children });
+};
+
 // src/hooks/useDelay.ts
 import { useEffect, useState } from "react";
 var defaultOptions = {
@@ -42,110 +58,61 @@ function useDelay(options) {
   return { restartTimer, clearTimer, hasActiveTimer: !!timer };
 }
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
-// src/components/user-action/Label.tsx
-import clsx from "clsx";
-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",
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx("label", { ...props, className: clsx(styleMapping[labelType], className), children: children ? children : name });
-};
-
 // src/components/user-action/Textarea.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Textarea = ({
-  label,
-  headline,
+var Textarea = forwardRef(function Textarea2({
   id,
-  resizable = false,
-  onChange = noop,
-  onChangeText = noop,
-  disclaimer,
-  onBlur = noop,
-  onEditCompleted = noop,
+  onChange,
+  onChangeText,
+  onBlur,
+  onEditCompleted,
   saveDelayOptions,
   defaultStyle = true,
+  invalid = false,
   disabled = false,
   className,
   ...props
-}) => {
-  const [hasFocus, setHasFocus] = useState2(false);
+}, ref) {
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompletedWrapper = (text) => {
-    onEditCompleted(text);
+    onEditCompleted?.(text);
     clearTimer();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx2(
-      Label,
-      {
-        ...label,
-        htmlFor: id,
-        className: clsx2("mb-1", label.className),
-        labelType: label.labelType ?? "labelSmall"
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx2(
-          "relative",
-          {
-            "border-2 rounded-lg": defaultStyle,
-            "bg-input-background text-input-text hover:border-primary focus-within:border-primary": defaultStyle && !disabled,
-            "border-disabled-border bg-disabled-background cursor-not-allowed": defaultStyle && disabled
-          }
-        ),
-        children: [
-          headline && /* @__PURE__ */ jsx2("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
-          /* @__PURE__ */ jsx2(
-            "textarea",
-            {
-              id,
-              className: clsx2("pt-0 px-3 border-transparent appearance-none w-full leading-tight focus:ring-0 focus:outline-none", {
-                "resize-none": !resizable,
-                "h-32": defaultStyle,
-                "mt-3": !headline,
-                "text-disabled-text": disabled
-              }, className),
-              onChange: (event) => {
-                const value = event.target.value;
-                restartTimer(() => {
-                  onEditCompletedWrapper(value);
-                });
-                onChange(event);
-                onChangeText(value);
-              },
-              onFocus: () => {
-                setHasFocus(true);
-              },
-              onBlur: (event) => {
-                onBlur(event);
-                onEditCompletedWrapper(event.target.value);
-                setHasFocus(false);
-              },
-              disabled,
-              ...props
-            }
-          )
-        ]
-      }
-    ),
-    hasFocus && disclaimer && /* @__PURE__ */ jsx2("label", { className: "text-negative", children: disclaimer })
-  ] });
-};
+  return /* @__PURE__ */ jsx2(
+    "textarea",
+    {
+      ref,
+      id,
+      className: clsx2(
+        "resize-none w-full h-32 overflow-y-scroll",
+        "py-2 px-3 rounded-md border-1",
+        {
+          "bg-input-background text-input-text hover:border-primary focus-within:border-primary focus-within:ring-2 ring-focus": !disabled && !invalid,
+          "bg-on-negative text-negative border-negative-border hover:border-negative-border-hover focus-visible:ring-negative-border": invalid && !disabled && defaultStyle,
+          "text-disabled-text bg-disabled-background border-disabled-border": disabled && defaultStyle
+        },
+        className
+      ),
+      onChange: (event) => {
+        const value = event.target.value;
+        restartTimer(() => {
+          onEditCompletedWrapper(value);
+        });
+        onChange?.(event);
+        onChangeText?.(value);
+      },
+      onBlur: (event) => {
+        onBlur?.(event);
+        onEditCompletedWrapper(event.target.value);
+      },
+      disabled,
+      ...props
+    }
+  );
+});
 var TextareaUncontrolled = ({
   value = "",
   onChangeText = noop,
@@ -167,8 +134,49 @@ var TextareaUncontrolled = ({
     }
   );
 };
+var TextareaWithHeadline = ({
+  id,
+  headline,
+  headlineProps,
+  disabled,
+  className,
+  containerClassName,
+  ...props
+}) => {
+  const genId = useId();
+  const usedId = id ?? genId;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx2(
+        "group flex-col-3 border-2 rounded-lg",
+        {
+          "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
+          "border-disabled-border bg-disabled-background cursor-not-allowed": disabled
+        },
+        containerClassName
+      ),
+      children: [
+        headline && /* @__PURE__ */ jsx2(Label, { size: "md", ...headlineProps, htmlFor: usedId, children: headline }),
+        /* @__PURE__ */ jsx2(
+          Textarea,
+          {
+            ...props,
+            id: usedId,
+            className: clsx2(
+              "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
+              className
+            ),
+            defaultStyle: false
+          }
+        )
+      ]
+    }
+  );
+};
 export {
   Textarea,
-  TextareaUncontrolled
+  TextareaUncontrolled,
+  TextareaWithHeadline
 };
 //# sourceMappingURL=Textarea.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/user-action/Textarea.tsx","../../../src/hooks/useDelay.ts","../../../src/util/noop.ts","../../../src/components/user-action/Label.tsx"],"sourcesContent":["import type { TextareaHTMLAttributes } from 'react'\nimport { useEffect, useState } from 'react'\nimport clsx from 'clsx'\nimport { useDelay, type UseDelayOptions } from '../../hooks/useDelay'\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  value?: string,\n  resizable?: boolean,\n  onChangeText?: (text: string) => void,\n  disclaimer?: string,\n  onEditCompleted?: (text: string) => void,\n  saveDelayOptions?: UseDelayOptions,\n  defaultStyle?: boolean,\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>\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                           onChangeText = noop,\n                           disclaimer,\n                           onBlur = noop,\n                           onEditCompleted = noop,\n                           saveDelayOptions,\n                           defaultStyle = true,\n                           disabled = false,\n                           className,\n                           ...props\n                         }: TextareaProps) => {\n  const [hasFocus, setHasFocus] = useState(false)\n  const { restartTimer, clearTimer } = useDelay(saveDelayOptions)\n\n  const onEditCompletedWrapper = (text: string) => {\n    onEditCompleted(text)\n    clearTimer()\n  }\n\n  return (\n    <div className=\"w-full\">\n      {label && (\n        <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}\n               labelType={label.labelType ?? 'labelSmall'}/>\n      )}\n      <div\n        className={clsx('relative',\n          {\n            'border-2 rounded-lg': defaultStyle,\n            'bg-input-background text-input-text hover:border-primary focus-within:border-primary': defaultStyle && !disabled,\n            'border-disabled-border bg-disabled-background cursor-not-allowed': defaultStyle && disabled,\n          })}\n      >\n        {headline && (\n          <span className=\"mx-3 mt-3 block textstyle-label-md\">\n            {headline}\n          </span>\n        )}\n        <textarea\n          id={id}\n          className={clsx('pt-0 px-3 border-transparent appearance-none w-full leading-tight focus:ring-0 focus:outline-none', {\n            'resize-none': !resizable,\n            'h-32': defaultStyle,\n            'mt-3': !headline,\n            'text-disabled-text': disabled,\n          }, className)}\n          onChange={(event) => {\n            const value = event.target.value\n            restartTimer(() => {\n              onEditCompletedWrapper(value)\n            })\n            onChange(event)\n            onChangeText(value)\n          }}\n          onFocus={() => {\n            setHasFocus(true)\n          }}\n          onBlur={(event) => {\n            onBlur(event)\n            onEditCompletedWrapper(event.target.value)\n            setHasFocus(false)\n          }}\n          disabled={disabled}\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\n/**\n * A Textarea component that is not controlled by its parent\n */\nexport const TextareaUncontrolled = ({\n                                       value = '',\n                                       onChangeText = noop,\n                                       ...props\n                                     }: TextareaProps) => {\n  const [text, setText] = useState<string>(value)\n\n  useEffect(() => {\n    setText(value)\n  }, [value])\n\n  return (\n    <Textarea\n      {...props}\n      value={text}\n      onChangeText={text => {\n        setText(text)\n        onChangeText(text)\n      }}\n    />\n  )\n}","import { useEffect, useState } from 'react'\n\nexport type UseDelayOptionsResolved = {\n  delay: number,\n  disabled: boolean,\n}\n\nexport type UseDelayOptions = Partial<UseDelayOptionsResolved>\n\nconst defaultOptions: UseDelayOptionsResolved = {\n  delay: 3000,\n  disabled: false,\n}\n\nexport function useDelay(options?: UseDelayOptions) {\n  const [timer, setTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n  const { delay, disabled }: UseDelayOptionsResolved = {\n    ...defaultOptions,\n    ...options\n  }\n\n  const clearTimer = () => {\n    clearTimeout(timer)\n    setTimer(undefined)\n  }\n\n  const restartTimer = (onDelayFinish: () => void) => {\n    if(disabled) {\n      return\n    }\n    clearTimeout(timer)\n    setTimer(setTimeout(() => {\n      onDelayFinish()\n      setTimer(undefined)\n    }, delay))\n  }\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [timer])\n\n  useEffect(() => {\n    if(disabled){\n      clearTimeout(timer)\n      setTimer(undefined)\n    }\n  }, [disabled, timer])\n\n  return { restartTimer, clearTimer, hasActiveTimer: !!timer }\n}","export const noop = () => undefined\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n  labelSmall: 'textstyle-label-sm',\n  labelMedium: 'textstyle-label-md',\n  labelBig: 'textstyle-label-lg',\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                        className,\n                        ...props\n                      }: LabelProps) => {\n  return (\n    <label {...props} className={clsx(styleMapping[labelType], className)}>\n      {children ? children : name}\n    </label>\n  )\n}\n"],"mappings":"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","names":["useEffect","useState","clsx","jsx","useState","clsx","useEffect","text"]}
+{"version":3,"sources":["../../../src/components/user-action/Textarea.tsx","../../../src/components/user-action/Label.tsx","../../../src/hooks/useDelay.ts","../../../src/utils/noop.ts"],"sourcesContent":["import type { ReactNode, TextareaHTMLAttributes } from 'react'\nimport { forwardRef, useEffect, useId, useState } from 'react'\nimport clsx from 'clsx'\nimport type { LabelProps } from '@/src/components/user-action/Label'\nimport { Label } from '@/src/components/user-action/Label'\nimport { useDelay, type UseDelayOptions } from '@/src/hooks/useDelay'\nimport { noop } from '@/src/utils/noop'\n\nexport type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {\n  /** Inside the area */\n  value?: string,\n  invalid?: boolean,\n  onChangeText?: (text: string) => void,\n  onEditCompleted?: (text: string) => void,\n  saveDelayOptions?: UseDelayOptions,\n  defaultStyle?: boolean,\n}\n\n/**\n * A Textarea component for inputting longer texts\n *\n * The State is managed by the parent\n */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea({\n                                                                                           id,\n                                                                                           onChange,\n                                                                                           onChangeText,\n                                                                                           onBlur,\n                                                                                           onEditCompleted,\n                                                                                           saveDelayOptions,\n                                                                                           defaultStyle = true,\n                                                                                           invalid = false,\n                                                                                           disabled = false,\n                                                                                           className,\n                                                                                           ...props\n                                                                                         }, ref) {\n  const { restartTimer, clearTimer } = useDelay(saveDelayOptions)\n\n  const onEditCompletedWrapper = (text: string) => {\n    onEditCompleted?.(text)\n    clearTimer()\n  }\n\n  return (\n    <textarea\n      ref={ref}\n      id={id}\n      className={clsx(\n        'resize-none w-full h-32 overflow-y-scroll',\n        'py-2 px-3 rounded-md border-1',\n        {\n          'bg-input-background text-input-text hover:border-primary focus-within:border-primary focus-within:ring-2 ring-focus': !disabled && !invalid,\n          'bg-on-negative text-negative border-negative-border hover:border-negative-border-hover focus-visible:ring-negative-border': invalid && !disabled && defaultStyle,\n          'text-disabled-text bg-disabled-background border-disabled-border': disabled && defaultStyle,\n        },\n        className\n      )}\n      onChange={(event) => {\n        const value = event.target.value\n        restartTimer(() => {\n          onEditCompletedWrapper(value)\n        })\n        onChange?.(event)\n        onChangeText?.(value)\n      }}\n      onBlur={(event) => {\n        onBlur?.(event)\n        onEditCompletedWrapper(event.target.value)\n      }}\n      disabled={disabled}\n      {...props}\n    />\n  )\n})\n\n/**\n * A Textarea component that is not controlled by its parent\n */\nexport const TextareaUncontrolled = ({\n                                       value = '',\n                                       onChangeText = noop,\n                                       ...props\n                                     }: TextareaProps) => {\n  const [text, setText] = useState<string>(value)\n\n  useEffect(() => {\n    setText(value)\n  }, [value])\n\n  return (\n    <Textarea\n      {...props}\n      value={text}\n      onChangeText={text => {\n        setText(text)\n        onChangeText(text)\n      }}\n    />\n  )\n}\n\nexport type TextareaWithHeadlineProps = Omit<TextareaProps, 'defaultStyle'> & {\n  headline: ReactNode,\n  headlineProps: Omit<LabelProps, 'children'>,\n  containerClassName?: string,\n}\n\nexport const TextareaWithHeadline = ({\n                                       id,\n                                       headline,\n                                       headlineProps,\n                                       disabled,\n                                       className,\n                                       containerClassName,\n                                       ...props\n                                     }: TextareaWithHeadlineProps) => {\n  const genId = useId()\n  const usedId = id ?? genId\n\n  return (\n    <div\n      className={clsx(\n        'group flex-col-3 border-2 rounded-lg',\n        {\n          'bg-input-background text-input-text hover:border-primary focus-within:border-primary': !disabled,\n          'border-disabled-border bg-disabled-background cursor-not-allowed': disabled,\n        },\n        containerClassName\n      )}\n    >\n      {headline && (\n        <Label size=\"md\" {...headlineProps} htmlFor={usedId}>\n          {headline}\n        </Label>\n      )}\n      <Textarea\n        {...props}\n        id={usedId}\n        className={clsx(\n          'border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32',\n          className\n        )}\n        defaultStyle={false}\n      />\n    </div>\n  )\n}","import clsx from 'clsx'\nimport type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'sm' | 'md'\n\nconst styleMapping: Record<LabelType, string> = {\n  sm: 'typography-label-xs color-label-text',\n  md: 'typography-label-md color-label-text',\n}\n\nexport type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  /** The size of the label */\n  size?: LabelType,\n}\n\n/**\n * A Label component\n */\nexport const Label = ({\n                        children,\n                        size = 'md',\n                        className,\n                        ...props\n                      }: LabelProps) => {\n  return (\n    <label {...props} className={clsx(styleMapping[size], className)}>\n      {children}\n    </label>\n  )\n}\n","import { useEffect, useState } from 'react'\n\nexport type UseDelayOptionsResolved = {\n  delay: number,\n  disabled: boolean,\n}\n\nexport type UseDelayOptions = Partial<UseDelayOptionsResolved>\n\nconst defaultOptions: UseDelayOptionsResolved = {\n  delay: 3000,\n  disabled: false,\n}\n\nexport function useDelay(options?: UseDelayOptions) {\n  const [timer, setTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n  const { delay, disabled }: UseDelayOptionsResolved = {\n    ...defaultOptions,\n    ...options\n  }\n\n  const clearTimer = () => {\n    clearTimeout(timer)\n    setTimer(undefined)\n  }\n\n  const restartTimer = (onDelayFinish: () => void) => {\n    if(disabled) {\n      return\n    }\n    clearTimeout(timer)\n    setTimer(setTimeout(() => {\n      onDelayFinish()\n      setTimer(undefined)\n    }, delay))\n  }\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [timer])\n\n  useEffect(() => {\n    if(disabled){\n      clearTimeout(timer)\n      setTimer(undefined)\n    }\n  }, [disabled, timer])\n\n  return { restartTimer, clearTimer, hasActiveTimer: !!timer }\n}","export const noop = () => undefined\n"],"mappings":"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","names":["useEffect","useState","clsx","jsx","Textarea","clsx","useState","useEffect","text"]}

package/dist/components/user-action/input/Input.d.mts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { InputHTMLAttributes } from 'react';
+import { UseDelayOptionsResolved } from '../../../hooks/useDelay.mjs';
+
+type EditCompleteOptionsResolved = {
+    onBlur: boolean;
+    afterDelay: boolean;
+    allowEnterComplete?: boolean;
+} & Omit<UseDelayOptionsResolved, 'disabled'>;
+type EditCompleteOptions = Partial<EditCompleteOptionsResolved>;
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+    invalid?: boolean;
+    onChangeText?: (text: string) => void;
+    onEditCompleted?: (text: string) => void;
+    editCompleteOptions?: EditCompleteOptions;
+    defaultStyle?: boolean;
+};
+/**
+ * A Component for inputting text or other information
+ *
+ * Its state is managed must be managed by the parent
+ */
+declare const Input: React__default.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    invalid?: boolean;
+    onChangeText?: (text: string) => void;
+    onEditCompleted?: (text: string) => void;
+    editCompleteOptions?: EditCompleteOptions;
+    defaultStyle?: boolean;
+} & React__default.RefAttributes<HTMLInputElement>>;
+/**
+ * A Component for inputting text or other information
+ *
+ * Its state is managed by the component itself
+ */
+declare const InputUncontrolled: ({ value, onChangeText, ...props }: InputProps) => react_jsx_runtime.JSX.Element;
+
+export { type EditCompleteOptions, type EditCompleteOptionsResolved, Input, type InputProps, InputUncontrolled };

package/dist/components/user-action/input/Input.d.ts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { InputHTMLAttributes } from 'react';
+import { UseDelayOptionsResolved } from '../../../hooks/useDelay.js';
+
+type EditCompleteOptionsResolved = {
+    onBlur: boolean;
+    afterDelay: boolean;
+    allowEnterComplete?: boolean;
+} & Omit<UseDelayOptionsResolved, 'disabled'>;
+type EditCompleteOptions = Partial<EditCompleteOptionsResolved>;
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+    invalid?: boolean;
+    onChangeText?: (text: string) => void;
+    onEditCompleted?: (text: string) => void;
+    editCompleteOptions?: EditCompleteOptions;
+    defaultStyle?: boolean;
+};
+/**
+ * A Component for inputting text or other information
+ *
+ * Its state is managed must be managed by the parent
+ */
+declare const Input: React__default.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    invalid?: boolean;
+    onChangeText?: (text: string) => void;
+    onEditCompleted?: (text: string) => void;
+    editCompleteOptions?: EditCompleteOptions;
+    defaultStyle?: boolean;
+} & React__default.RefAttributes<HTMLInputElement>>;
+/**
+ * A Component for inputting text or other information
+ *
+ * Its state is managed by the component itself
+ */
+declare const InputUncontrolled: ({ value, onChangeText, ...props }: InputProps) => react_jsx_runtime.JSX.Element;
+
+export { type EditCompleteOptions, type EditCompleteOptionsResolved, Input, type InputProps, InputUncontrolled };

package/dist/components/user-action/input/Input.js

@@ -0,0 +1,244 @@
+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-action/input/Input.tsx
+var Input_exports = {};
+__export(Input_exports, {
+  Input: () => Input,
+  InputUncontrolled: () => InputUncontrolled
+});
+module.exports = __toCommonJS(Input_exports);
+var import_react3 = require("react");
+var import_clsx = __toESM(require("clsx"));
+
+// src/hooks/useDelay.ts
+var import_react = require("react");
+var defaultOptions = {
+  delay: 3e3,
+  disabled: false
+};
+function useDelay(options) {
+  const [timer, setTimer] = (0, import_react.useState)(void 0);
+  const { delay, disabled } = {
+    ...defaultOptions,
+    ...options
+  };
+  const clearTimer = () => {
+    clearTimeout(timer);
+    setTimer(void 0);
+  };
+  const restartTimer = (onDelayFinish) => {
+    if (disabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setTimer(setTimeout(() => {
+      onDelayFinish();
+      setTimer(void 0);
+    }, delay));
+  };
+  (0, import_react.useEffect)(() => {
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [timer]);
+  (0, import_react.useEffect)(() => {
+    if (disabled) {
+      clearTimeout(timer);
+      setTimer(void 0);
+    }
+  }, [disabled, timer]);
+  return { restartTimer, clearTimer, hasActiveTimer: !!timer };
+}
+
+// src/hooks/focus/useFocusManagement.ts
+var import_react2 = require("react");
+function useFocusManagement() {
+  const getFocusableElements = (0, import_react2.useCallback)(() => {
+    return Array.from(
+      document.querySelectorAll(
+        'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter(
+      (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
+    );
+  }, []);
+  const getNextFocusElement = (0, import_react2.useCallback)(() => {
+    const elements = getFocusableElements();
+    if (elements.length === 0) {
+      return void 0;
+    }
+    let nextElement = elements[0];
+    if (document.activeElement instanceof HTMLElement) {
+      const currentIndex = elements.indexOf(document.activeElement);
+      nextElement = elements[(currentIndex + 1) % elements.length];
+    }
+    return nextElement;
+  }, [getFocusableElements]);
+  const focusNext = (0, import_react2.useCallback)(() => {
+    const nextElement = getNextFocusElement();
+    nextElement?.focus();
+  }, [getNextFocusElement]);
+  const getPreviousFocusElement = (0, import_react2.useCallback)(() => {
+    const elements = getFocusableElements();
+    if (elements.length === 0) {
+      return void 0;
+    }
+    let previousElement = elements[0];
+    if (document.activeElement instanceof HTMLElement) {
+      const currentIndex = elements.indexOf(document.activeElement);
+      if (currentIndex === 0) {
+        previousElement = elements[elements.length - 1];
+      } else {
+        previousElement = elements[currentIndex - 1];
+      }
+    }
+    return previousElement;
+  }, [getFocusableElements]);
+  const focusPrevious = (0, import_react2.useCallback)(() => {
+    const previousElement = getPreviousFocusElement();
+    if (previousElement) previousElement.focus();
+  }, [getPreviousFocusElement]);
+  return {
+    getFocusableElements,
+    getNextFocusElement,
+    getPreviousFocusElement,
+    focusNext,
+    focusPrevious
+  };
+}
+
+// src/components/user-action/input/Input.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultEditCompleteOptions = {
+  allowEnterComplete: false,
+  onBlur: true,
+  afterDelay: true,
+  delay: 2500
+};
+var Input = (0, import_react3.forwardRef)(function Input2({
+  value,
+  onChange,
+  onChangeText,
+  onEditCompleted,
+  editCompleteOptions,
+  disabled = false,
+  invalid = false,
+  defaultStyle = true,
+  className,
+  ...props
+}, forwardedRef) {
+  const {
+    onBlur: allowEditCompleteOnBlur,
+    afterDelay,
+    delay,
+    allowEnterComplete
+  } = { ...defaultEditCompleteOptions, ...editCompleteOptions };
+  const {
+    restartTimer,
+    clearTimer
+  } = useDelay({ delay, disabled: !afterDelay });
+  const innerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const { focusNext } = useFocusManagement();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      ...props,
+      ref: innerRef,
+      value,
+      disabled,
+      className: defaultStyle ? (0, import_clsx.default)(
+        "px-2.5 py-1.75 rounded-md border-1 text-sm",
+        {
+          "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !invalid,
+          "bg-on-negative text-negative border-negative-border hover:border-negative-border-hover focus-visible:ring-negative-border": !disabled && invalid,
+          "bg-disabled-background text-disabled-text border-disabled-border": disabled
+        },
+        className
+      ) : className,
+      onKeyDown: (event) => {
+        props.onKeyDown?.(event);
+        if (!allowEnterComplete) {
+          return;
+        }
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          innerRef.current?.blur();
+          onEditCompleted?.(event.target.value);
+          focusNext();
+        }
+      },
+      onBlur: (event) => {
+        props.onBlur?.(event);
+        if (allowEditCompleteOnBlur) {
+          onEditCompleted?.(event.target.value);
+          clearTimer();
+        }
+      },
+      onChange: (event) => {
+        onChange?.(event);
+        const value2 = event.target.value;
+        restartTimer(() => {
+          innerRef.current?.blur();
+          onEditCompleted?.(value2);
+        });
+        onChangeText?.(value2);
+      },
+      "aria-invalid": props["aria-invalid"] ?? invalid,
+      "aria-disabled": props["aria-disabled"] ?? disabled
+    }
+  );
+});
+var InputUncontrolled = ({
+  value = "",
+  onChangeText,
+  ...props
+}) => {
+  const [usedValue, setUsedValue] = (0, import_react3.useState)(value);
+  (0, import_react3.useEffect)(() => {
+    setUsedValue(value);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Input,
+    {
+      ...props,
+      value: usedValue,
+      onChangeText: (text) => {
+        onChangeText?.(text);
+        setUsedValue(text);
+      }
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input,
+  InputUncontrolled
+});
+//# sourceMappingURL=Input.js.map