@helpwave/hightide 0.0.15 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (215) hide show
  1. package/dist/components/ErrorComponent.js.map +1 -1
  2. package/dist/components/ErrorComponent.mjs.map +1 -1
  3. package/dist/components/LoadingAndErrorComponent.js.map +1 -1
  4. package/dist/components/LoadingAndErrorComponent.mjs.map +1 -1
  5. package/dist/components/LoadingAnimation.js.map +1 -1
  6. package/dist/components/LoadingAnimation.mjs.map +1 -1
  7. package/dist/components/Pagination.js.map +1 -1
  8. package/dist/components/Pagination.mjs.map +1 -1
  9. package/dist/components/SearchableList.js +1 -2
  10. package/dist/components/SearchableList.js.map +1 -1
  11. package/dist/components/SearchableList.mjs +1 -2
  12. package/dist/components/SearchableList.mjs.map +1 -1
  13. package/dist/components/StepperBar.js.map +1 -1
  14. package/dist/components/StepperBar.mjs.map +1 -1
  15. package/dist/components/Table.js.map +1 -1
  16. package/dist/components/Table.mjs.map +1 -1
  17. package/dist/components/TextImage.js.map +1 -1
  18. package/dist/components/TextImage.mjs.map +1 -1
  19. package/dist/components/TimeDisplay.js.map +1 -1
  20. package/dist/components/TimeDisplay.mjs.map +1 -1
  21. package/dist/components/date/DatePicker.js.map +1 -1
  22. package/dist/components/date/DatePicker.mjs.map +1 -1
  23. package/dist/components/date/DayPicker.js.map +1 -1
  24. package/dist/components/date/DayPicker.mjs.map +1 -1
  25. package/dist/components/date/YearMonthPicker.js.map +1 -1
  26. package/dist/components/date/YearMonthPicker.mjs.map +1 -1
  27. package/dist/components/modals/ConfirmDialog.js.map +1 -1
  28. package/dist/components/modals/ConfirmDialog.mjs.map +1 -1
  29. package/dist/components/modals/DiscardChangesDialog.js.map +1 -1
  30. package/dist/components/modals/DiscardChangesDialog.mjs.map +1 -1
  31. package/dist/components/modals/InputModal.js +1 -2
  32. package/dist/components/modals/InputModal.js.map +1 -1
  33. package/dist/components/modals/InputModal.mjs +1 -2
  34. package/dist/components/modals/InputModal.mjs.map +1 -1
  35. package/dist/components/modals/LanguageModal.js.map +1 -1
  36. package/dist/components/modals/LanguageModal.mjs.map +1 -1
  37. package/dist/components/modals/Modal.js.map +1 -1
  38. package/dist/components/modals/Modal.mjs.map +1 -1
  39. package/dist/components/properties/CheckboxProperty.js.map +1 -1
  40. package/dist/components/properties/CheckboxProperty.mjs.map +1 -1
  41. package/dist/components/properties/DateProperty.js +1 -2
  42. package/dist/components/properties/DateProperty.js.map +1 -1
  43. package/dist/components/properties/DateProperty.mjs +1 -2
  44. package/dist/components/properties/DateProperty.mjs.map +1 -1
  45. package/dist/components/properties/MultiSelectProperty.js +1 -2
  46. package/dist/components/properties/MultiSelectProperty.js.map +1 -1
  47. package/dist/components/properties/MultiSelectProperty.mjs +1 -2
  48. package/dist/components/properties/MultiSelectProperty.mjs.map +1 -1
  49. package/dist/components/properties/NumberProperty.js +1 -2
  50. package/dist/components/properties/NumberProperty.js.map +1 -1
  51. package/dist/components/properties/NumberProperty.mjs +1 -2
  52. package/dist/components/properties/NumberProperty.mjs.map +1 -1
  53. package/dist/components/properties/PropertyBase.js.map +1 -1
  54. package/dist/components/properties/PropertyBase.mjs.map +1 -1
  55. package/dist/components/properties/SelectProperty.js +1 -2
  56. package/dist/components/properties/SelectProperty.js.map +1 -1
  57. package/dist/components/properties/SelectProperty.mjs +1 -2
  58. package/dist/components/properties/SelectProperty.mjs.map +1 -1
  59. package/dist/components/properties/TextProperty.js +1 -2
  60. package/dist/components/properties/TextProperty.js.map +1 -1
  61. package/dist/components/properties/TextProperty.mjs +1 -2
  62. package/dist/components/properties/TextProperty.mjs.map +1 -1
  63. package/dist/components/user-input/DateAndTimePicker.js.map +1 -1
  64. package/dist/components/user-input/DateAndTimePicker.mjs.map +1 -1
  65. package/dist/components/user-input/Input.js +1 -2
  66. package/dist/components/user-input/Input.js.map +1 -1
  67. package/dist/components/user-input/Input.mjs +1 -2
  68. package/dist/components/user-input/Input.mjs.map +1 -1
  69. package/dist/components/user-input/MultiSelect.js +1 -2
  70. package/dist/components/user-input/MultiSelect.js.map +1 -1
  71. package/dist/components/user-input/MultiSelect.mjs +1 -2
  72. package/dist/components/user-input/MultiSelect.mjs.map +1 -1
  73. package/dist/components/user-input/SearchableSelect.js +1 -2
  74. package/dist/components/user-input/SearchableSelect.js.map +1 -1
  75. package/dist/components/user-input/SearchableSelect.mjs +1 -2
  76. package/dist/components/user-input/SearchableSelect.mjs.map +1 -1
  77. package/dist/components/user-input/Textarea.js +1 -2
  78. package/dist/components/user-input/Textarea.js.map +1 -1
  79. package/dist/components/user-input/Textarea.mjs +1 -2
  80. package/dist/components/user-input/Textarea.mjs.map +1 -1
  81. package/dist/components/user-input/ToggleableInput.js +1 -2
  82. package/dist/components/user-input/ToggleableInput.js.map +1 -1
  83. package/dist/components/user-input/ToggleableInput.mjs +1 -2
  84. package/dist/components/user-input/ToggleableInput.mjs.map +1 -1
  85. package/dist/hooks/useLanguage.js +1 -2
  86. package/dist/hooks/useLanguage.js.map +1 -1
  87. package/dist/hooks/useLanguage.mjs +1 -2
  88. package/dist/hooks/useLanguage.mjs.map +1 -1
  89. package/dist/hooks/useLocalStorage.d.mts +1 -1
  90. package/dist/hooks/useLocalStorage.d.ts +1 -1
  91. package/dist/hooks/useLocalStorage.js +5 -2
  92. package/dist/hooks/useLocalStorage.js.map +1 -1
  93. package/dist/hooks/useLocalStorage.mjs +1 -2
  94. package/dist/hooks/useLocalStorage.mjs.map +1 -1
  95. package/dist/hooks/useSaveDelay.d.mts +1 -1
  96. package/dist/hooks/useSaveDelay.d.ts +1 -1
  97. package/dist/hooks/useSaveDelay.js +5 -2
  98. package/dist/hooks/useSaveDelay.js.map +1 -1
  99. package/dist/hooks/useSaveDelay.mjs +1 -2
  100. package/dist/hooks/useSaveDelay.mjs.map +1 -1
  101. package/dist/hooks/useTranslation.js.map +1 -1
  102. package/dist/hooks/useTranslation.mjs.map +1 -1
  103. package/dist/index.d.mts +88 -2
  104. package/dist/index.d.ts +88 -2
  105. package/dist/index.js +5716 -0
  106. package/dist/index.js.map +1 -1
  107. package/dist/index.mjs +5541 -0
  108. package/dist/index.mjs.map +1 -1
  109. package/dist/util/news.d.mts +9 -9
  110. package/dist/util/news.d.ts +9 -9
  111. package/dist/util/news.js.map +1 -1
  112. package/dist/util/news.mjs.map +1 -1
  113. package/package.json +14 -12
  114. package/dist/components/Span.d.mts +0 -2
  115. package/dist/components/Span.d.ts +0 -2
  116. package/dist/components/Span.js +0 -2
  117. package/dist/components/Span.js.map +0 -1
  118. package/dist/components/Span.mjs +0 -1
  119. package/dist/components/Span.mjs.map +0 -1
  120. package/dist/components/examples/InputGroupExample.d.mts +0 -11
  121. package/dist/components/examples/InputGroupExample.d.ts +0 -11
  122. package/dist/components/examples/InputGroupExample.js +0 -466
  123. package/dist/components/examples/InputGroupExample.js.map +0 -1
  124. package/dist/components/examples/InputGroupExample.mjs +0 -436
  125. package/dist/components/examples/InputGroupExample.mjs.map +0 -1
  126. package/dist/components/examples/MultiSelectExample.d.mts +0 -14
  127. package/dist/components/examples/MultiSelectExample.d.ts +0 -14
  128. package/dist/components/examples/MultiSelectExample.js +0 -661
  129. package/dist/components/examples/MultiSelectExample.js.map +0 -1
  130. package/dist/components/examples/MultiSelectExample.mjs +0 -631
  131. package/dist/components/examples/MultiSelectExample.mjs.map +0 -1
  132. package/dist/components/examples/SearchableSelectExample.d.mts +0 -13
  133. package/dist/components/examples/SearchableSelectExample.d.ts +0 -13
  134. package/dist/components/examples/SearchableSelectExample.js +0 -365
  135. package/dist/components/examples/SearchableSelectExample.js.map +0 -1
  136. package/dist/components/examples/SearchableSelectExample.mjs +0 -335
  137. package/dist/components/examples/SearchableSelectExample.mjs.map +0 -1
  138. package/dist/components/examples/SelectExample.d.mts +0 -9
  139. package/dist/components/examples/SelectExample.d.ts +0 -9
  140. package/dist/components/examples/SelectExample.js +0 -180
  141. package/dist/components/examples/SelectExample.js.map +0 -1
  142. package/dist/components/examples/SelectExample.mjs +0 -145
  143. package/dist/components/examples/SelectExample.mjs.map +0 -1
  144. package/dist/components/examples/StackingModals.d.mts +0 -8
  145. package/dist/components/examples/StackingModals.d.ts +0 -8
  146. package/dist/components/examples/StackingModals.js +0 -498
  147. package/dist/components/examples/StackingModals.js.map +0 -1
  148. package/dist/components/examples/StackingModals.mjs +0 -463
  149. package/dist/components/examples/StackingModals.mjs.map +0 -1
  150. package/dist/components/examples/TableExample.d.mts +0 -13
  151. package/dist/components/examples/TableExample.d.ts +0 -13
  152. package/dist/components/examples/TableExample.js +0 -853
  153. package/dist/components/examples/TableExample.js.map +0 -1
  154. package/dist/components/examples/TableExample.mjs +0 -823
  155. package/dist/components/examples/TableExample.mjs.map +0 -1
  156. package/dist/components/examples/TextareaExample.d.mts +0 -12
  157. package/dist/components/examples/TextareaExample.d.ts +0 -12
  158. package/dist/components/examples/TextareaExample.js +0 -176
  159. package/dist/components/examples/TextareaExample.js.map +0 -1
  160. package/dist/components/examples/TextareaExample.mjs +0 -141
  161. package/dist/components/examples/TextareaExample.mjs.map +0 -1
  162. package/dist/components/examples/TileExample.d.mts +0 -14
  163. package/dist/components/examples/TileExample.d.ts +0 -14
  164. package/dist/components/examples/TileExample.js +0 -79
  165. package/dist/components/examples/TileExample.js.map +0 -1
  166. package/dist/components/examples/TileExample.mjs +0 -44
  167. package/dist/components/examples/TileExample.mjs.map +0 -1
  168. package/dist/components/examples/Title.d.mts +0 -2
  169. package/dist/components/examples/Title.d.ts +0 -2
  170. package/dist/components/examples/Title.js +0 -2
  171. package/dist/components/examples/Title.js.map +0 -1
  172. package/dist/components/examples/Title.mjs +0 -1
  173. package/dist/components/examples/Title.mjs.map +0 -1
  174. package/dist/components/examples/date/DateTimePickerExample.d.mts +0 -18
  175. package/dist/components/examples/date/DateTimePickerExample.d.ts +0 -18
  176. package/dist/components/examples/date/DateTimePickerExample.js +0 -879
  177. package/dist/components/examples/date/DateTimePickerExample.js.map +0 -1
  178. package/dist/components/examples/date/DateTimePickerExample.mjs +0 -844
  179. package/dist/components/examples/date/DateTimePickerExample.mjs.map +0 -1
  180. package/dist/components/examples/properties/CheckboxPropertyExample.d.mts +0 -16
  181. package/dist/components/examples/properties/CheckboxPropertyExample.d.ts +0 -16
  182. package/dist/components/examples/properties/CheckboxPropertyExample.js +0 -349
  183. package/dist/components/examples/properties/CheckboxPropertyExample.js.map +0 -1
  184. package/dist/components/examples/properties/CheckboxPropertyExample.mjs +0 -314
  185. package/dist/components/examples/properties/CheckboxPropertyExample.mjs.map +0 -1
  186. package/dist/components/examples/properties/DatePropertyExample.d.mts +0 -16
  187. package/dist/components/examples/properties/DatePropertyExample.d.ts +0 -16
  188. package/dist/components/examples/properties/DatePropertyExample.js +0 -460
  189. package/dist/components/examples/properties/DatePropertyExample.js.map +0 -1
  190. package/dist/components/examples/properties/DatePropertyExample.mjs +0 -430
  191. package/dist/components/examples/properties/DatePropertyExample.mjs.map +0 -1
  192. package/dist/components/examples/properties/MultiSelectPropertyExample.d.mts +0 -18
  193. package/dist/components/examples/properties/MultiSelectPropertyExample.d.ts +0 -18
  194. package/dist/components/examples/properties/MultiSelectPropertyExample.js +0 -848
  195. package/dist/components/examples/properties/MultiSelectPropertyExample.js.map +0 -1
  196. package/dist/components/examples/properties/MultiSelectPropertyExample.mjs +0 -818
  197. package/dist/components/examples/properties/MultiSelectPropertyExample.mjs.map +0 -1
  198. package/dist/components/examples/properties/NumberPropertyExample.d.mts +0 -14
  199. package/dist/components/examples/properties/NumberPropertyExample.d.ts +0 -14
  200. package/dist/components/examples/properties/NumberPropertyExample.js +0 -456
  201. package/dist/components/examples/properties/NumberPropertyExample.js.map +0 -1
  202. package/dist/components/examples/properties/NumberPropertyExample.mjs +0 -426
  203. package/dist/components/examples/properties/NumberPropertyExample.mjs.map +0 -1
  204. package/dist/components/examples/properties/SelectPropertyExample.d.mts +0 -17
  205. package/dist/components/examples/properties/SelectPropertyExample.d.ts +0 -17
  206. package/dist/components/examples/properties/SelectPropertyExample.js +0 -584
  207. package/dist/components/examples/properties/SelectPropertyExample.js.map +0 -1
  208. package/dist/components/examples/properties/SelectPropertyExample.mjs +0 -554
  209. package/dist/components/examples/properties/SelectPropertyExample.mjs.map +0 -1
  210. package/dist/components/examples/properties/TextPropertyExample.d.mts +0 -16
  211. package/dist/components/examples/properties/TextPropertyExample.d.ts +0 -16
  212. package/dist/components/examples/properties/TextPropertyExample.js +0 -405
  213. package/dist/components/examples/properties/TextPropertyExample.js.map +0 -1
  214. package/dist/components/examples/properties/TextPropertyExample.mjs +0 -370
  215. package/dist/components/examples/properties/TextPropertyExample.mjs.map +0 -1
@@ -1,466 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/components/examples/InputGroupExample.tsx
31
- var InputGroupExample_exports = {};
32
- __export(InputGroupExample_exports, {
33
- InputGroupExample: () => InputGroupExample
34
- });
35
- module.exports = __toCommonJS(InputGroupExample_exports);
36
- var import_react6 = require("react");
37
-
38
- // src/components/InputGroup.tsx
39
- var import_react = require("react");
40
- var import_lucide_react = require("lucide-react");
41
- var import_clsx = __toESM(require("clsx"));
42
-
43
- // src/util/noop.ts
44
- var noop = () => void 0;
45
-
46
- // src/components/InputGroup.tsx
47
- var import_jsx_runtime = require("react/jsx-runtime");
48
- var InputGroup = ({
49
- children,
50
- title,
51
- expanded = true,
52
- isExpandable = true,
53
- disabled = false,
54
- onChange = noop,
55
- className = ""
56
- }) => {
57
- const [isExpanded, setIsExpanded] = (0, import_react.useState)(expanded);
58
- (0, import_react.useEffect)(() => {
59
- setIsExpanded(expanded);
60
- }, [expanded]);
61
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)("col gap-y-4 p-4 bg-white rounded-xl", className), children: [
62
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
63
- "div",
64
- {
65
- className: (0, import_clsx.default)(
66
- "row justify-between items-center",
67
- {
68
- "cursor-pointer": isExpandable && !disabled,
69
- "cursor-not-allowed": disabled
70
- },
71
- {
72
- "text-primary": !disabled,
73
- "text-primary/40": disabled
74
- }
75
- ),
76
- onClick: () => {
77
- if (!isExpandable) {
78
- return;
79
- }
80
- const updatedIsExpanded = !isExpanded;
81
- onChange(updatedIsExpanded);
82
- setIsExpanded(updatedIsExpanded);
83
- },
84
- children: [
85
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "textstyle-title-md", children: title }),
86
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)("rounded-full text-white w-6 h-6", {
87
- "bg-primary": isExpandable && !disabled || expanded,
88
- "bg-primary/40": disabled
89
- }), children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronUp, { className: "-translate-y-[1px]", size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { className: "translate-y-[1px]", size: 24 }) })
90
- ]
91
- }
92
- ),
93
- isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "col gap-y-2 h-full", children })
94
- ] });
95
- };
96
-
97
- // src/components/user-input/Select.tsx
98
- var import_react2 = require("@headlessui/react");
99
- var import_lucide_react2 = require("lucide-react");
100
- var import_clsx2 = __toESM(require("clsx"));
101
-
102
- // src/components/user-input/Label.tsx
103
- var import_jsx_runtime2 = require("react/jsx-runtime");
104
- var styleMapping = {
105
- labelSmall: "textstyle-label-sm",
106
- labelMedium: "textstyle-label-md",
107
- labelBig: "textstyle-label-lg"
108
- };
109
- var Label = ({
110
- children,
111
- name,
112
- labelType = "labelSmall",
113
- ...props
114
- }) => {
115
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { ...props, children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styleMapping[labelType], children: name }) });
116
- };
117
-
118
- // src/components/user-input/Select.tsx
119
- var import_jsx_runtime3 = require("react/jsx-runtime");
120
- var Select = ({
121
- value,
122
- label,
123
- options,
124
- onChange,
125
- isHidingCurrentValue = true,
126
- hintText = "",
127
- showDisabledOptions = true,
128
- isDisabled,
129
- className,
130
- textColor = "text-menu-text",
131
- hoverColor = "hover:brightness-90",
132
- additionalItems,
133
- selectedDisplayOverwrite
134
- }) => {
135
- let filteredOptions = isHidingCurrentValue ? options.filter((option) => option.value !== value) : options;
136
- if (!showDisabledOptions) {
137
- filteredOptions = filteredOptions.filter((value2) => !value2.disabled);
138
- }
139
- const selectedOption = options.find((option) => option.value === value);
140
- if (value !== void 0 && selectedOption === void 0 && selectedDisplayOverwrite === void 0) {
141
- console.warn("The selected value is not found in the options list. This might be an error on your part or default behavior if it is complex data type on which === does not work. In case of the latter use selectedDisplayOverwrite to set your selected text or component");
142
- }
143
- const borderColor = "border-menu-border";
144
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)(className), children: [
145
- label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx2.default)("mb-1", label.className) }),
146
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Menu, { as: "div", className: "relative text-menu-text", children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
147
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
148
- import_react2.Menu.Button,
149
- {
150
- className: (0, import_clsx2.default)(
151
- "inline-flex w-full justify-between items-center rounded-t-lg border-2 px-4 py-2 font-medium bg-menu-background text-menu-text",
152
- textColor,
153
- borderColor,
154
- {
155
- "rounded-b-lg": !open,
156
- [hoverColor]: !isDisabled,
157
- "bg-disabled-background cursor-not-allowed text-disabled": isDisabled
158
- }
159
- ),
160
- disabled: isDisabled,
161
- children: [
162
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: selectedDisplayOverwrite ?? selectedOption?.label ?? hintText }),
163
- open ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronDown, {})
164
- ]
165
- }
166
- ),
167
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
168
- import_react2.Menu.Items,
169
- {
170
- className: "absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto",
171
- children: [
172
- (additionalItems ?? []).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
173
- "div",
174
- {
175
- className: (0, import_clsx2.default)(borderColor, "px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0", {
176
- "border-b-0 rounded-b-lg": filteredOptions.length === 0 && index === (additionalItems?.length ?? 1) - 1
177
- }),
178
- children: item
179
- },
180
- `additionalItems${index}`
181
- )),
182
- filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Menu.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
183
- "div",
184
- {
185
- className: (0, import_clsx2.default)(
186
- "px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer",
187
- option.className,
188
- borderColor,
189
- {
190
- "brightness-90": option.value === value,
191
- "brightness-95": index % 2 === 1,
192
- "text-disabled bg-disabled-background cursor-not-allowed": !!option.disabled,
193
- "bg-menu-background text-menu-text hover:brightness-90 cursor-pointer": !option.disabled,
194
- "rounded-b-lg": index === filteredOptions.length - 1
195
- }
196
- ),
197
- onClick: () => {
198
- if (!option.disabled) {
199
- onChange(option.value);
200
- }
201
- },
202
- children: option.label
203
- }
204
- ) }, `item${index}`))
205
- ]
206
- }
207
- )
208
- ] }) })
209
- ] });
210
- };
211
-
212
- // src/components/user-input/Input.tsx
213
- var import_react4 = require("react");
214
- var import_clsx3 = __toESM(require("clsx"));
215
-
216
- // src/hooks/useSaveDelay.ts
217
- var import_react3 = require("react");
218
- function useSaveDelay(setNotificationStatus, delay) {
219
- const [updateTimer, setUpdateTimer] = (0, import_react3.useState)(void 0);
220
- const [notificationTimer, setNotificationTimer] = (0, import_react3.useState)(void 0);
221
- const restartTimer = (onSave) => {
222
- clearTimeout(updateTimer);
223
- setUpdateTimer(setTimeout(() => {
224
- onSave();
225
- setNotificationStatus(true);
226
- clearTimeout(notificationTimer);
227
- setNotificationTimer(setTimeout(() => {
228
- setNotificationStatus(false);
229
- clearTimeout(notificationTimer);
230
- }, delay));
231
- clearTimeout(updateTimer);
232
- }, delay));
233
- };
234
- const clearUpdateTimer = (hasSaved = true) => {
235
- clearTimeout(updateTimer);
236
- if (hasSaved) {
237
- setNotificationStatus(true);
238
- clearTimeout(notificationTimer);
239
- setNotificationTimer(setTimeout(() => {
240
- setNotificationStatus(false);
241
- clearTimeout(notificationTimer);
242
- }, delay));
243
- } else {
244
- setNotificationStatus(false);
245
- }
246
- };
247
- (0, import_react3.useEffect)(() => {
248
- return () => {
249
- clearTimeout(updateTimer);
250
- clearTimeout(notificationTimer);
251
- };
252
- }, []);
253
- return { restartTimer, clearUpdateTimer };
254
- }
255
- var useSaveDelay_default = useSaveDelay;
256
-
257
- // src/components/user-input/Input.tsx
258
- var import_jsx_runtime4 = require("react/jsx-runtime");
259
- var ControlledInput = ({
260
- id,
261
- type = "text",
262
- value,
263
- label,
264
- onChange = noop,
265
- onChangeEvent = noop,
266
- className = "",
267
- onEditCompleted,
268
- expanded = true,
269
- onBlur,
270
- containerClassName,
271
- ...restProps
272
- }) => {
273
- const {
274
- restartTimer,
275
- clearUpdateTimer
276
- } = useSaveDelay_default(() => void 0, 3e3);
277
- const ref = (0, import_react4.useRef)(null);
278
- (0, import_react4.useEffect)(() => {
279
- if (restProps.autoFocus) {
280
- ref.current?.focus();
281
- }
282
- }, [restProps.autoFocus]);
283
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx3.default)({ "w-full": expanded }, containerClassName), children: [
284
- label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { ...label, htmlFor: id, className: (0, import_clsx3.default)("mb-1", label.className) }),
285
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
286
- "input",
287
- {
288
- ref,
289
- value,
290
- id,
291
- type,
292
- className: (0, import_clsx3.default)("block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary", className),
293
- onBlur: (event) => {
294
- if (onBlur) {
295
- onBlur(event);
296
- }
297
- if (onEditCompleted) {
298
- onEditCompleted(event.target.value, event);
299
- clearUpdateTimer();
300
- }
301
- },
302
- onChange: (e) => {
303
- const value2 = e.target.value;
304
- if (onEditCompleted) {
305
- restartTimer(() => {
306
- onEditCompleted(value2, e);
307
- clearUpdateTimer();
308
- });
309
- }
310
- onChange(value2, e);
311
- onChangeEvent(e);
312
- },
313
- ...restProps
314
- }
315
- )
316
- ] });
317
- };
318
- var FormInput = (0, import_react4.forwardRef)(function FormInput2({
319
- id,
320
- labelText,
321
- errorText,
322
- className,
323
- labelClassName,
324
- errorClassName,
325
- containerClassName,
326
- required,
327
- ...restProps
328
- }, ref) {
329
- const input = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
330
- "input",
331
- {
332
- ref,
333
- id,
334
- ...restProps,
335
- className: (0, import_clsx3.default)(
336
- "block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary",
337
- {
338
- "focus:border-primary focus:ring-primary": !errorText,
339
- "focus:border-negative focus:ring-negative text-negative": !!errorText
340
- },
341
- className
342
- )
343
- }
344
- );
345
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx3.default)("flex flex-col gap-y-1", containerClassName), children: [
346
- labelText && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { htmlFor: id, className: (0, import_clsx3.default)("textstyle-label-md", labelClassName), children: [
347
- labelText,
348
- required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-primary font-bold", children: "*" })
349
- ] }),
350
- input,
351
- errorText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: id, className: (0, import_clsx3.default)("text-negative", errorClassName), children: errorText })
352
- ] });
353
- });
354
-
355
- // src/components/user-input/Textarea.tsx
356
- var import_react5 = require("react");
357
- var import_clsx4 = __toESM(require("clsx"));
358
- var import_jsx_runtime5 = require("react/jsx-runtime");
359
- var Textarea = ({
360
- label,
361
- headline,
362
- id,
363
- resizable = false,
364
- onChange = noop,
365
- disclaimer,
366
- onBlur = noop,
367
- onEditCompleted = noop,
368
- defaultStyle = true,
369
- className,
370
- ...props
371
- }) => {
372
- const [hasFocus, setHasFocus] = (0, import_react5.useState)(false);
373
- const { restartTimer, clearUpdateTimer } = useSaveDelay_default(() => void 0, 3e3);
374
- const onEditCompletedWrapper = (text) => {
375
- onEditCompleted(text);
376
- clearUpdateTimer();
377
- };
378
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full", children: [
379
- label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { ...label, htmlFor: id, className: (0, import_clsx4.default)("mb-1", label.className), labelType: label.labelType ?? "labelSmall" }),
380
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${(0, import_clsx4.default)(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 border-gray-300 hover:border-primary rounded-lg": defaultStyle })}`, children: [
381
- headline && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-3 mt-3 block text-gray-700 font-bold", children: headline }),
382
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
383
- "textarea",
384
- {
385
- id,
386
- className: (0, import_clsx4.default)("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),
387
- onChange: (event) => {
388
- const value = event.target.value;
389
- restartTimer(() => {
390
- onEditCompletedWrapper(value);
391
- });
392
- onChange(value);
393
- },
394
- onFocus: () => {
395
- setHasFocus(true);
396
- },
397
- onBlur: (event) => {
398
- onBlur(event);
399
- onEditCompletedWrapper(event.target.value);
400
- setHasFocus(false);
401
- },
402
- ...props
403
- }
404
- )
405
- ] }),
406
- hasFocus && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "text-negative", children: disclaimer })
407
- ] });
408
- };
409
-
410
- // src/components/examples/InputGroupExample.tsx
411
- var import_jsx_runtime6 = require("react/jsx-runtime");
412
- var InputGroupExample = ({
413
- ...props
414
- }) => {
415
- const [state, setState] = (0, import_react6.useState)({
416
- propertyName: "",
417
- description: ""
418
- });
419
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
420
- InputGroup,
421
- {
422
- ...props,
423
- onChange: console.log,
424
- children: [
425
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
426
- Select,
427
- {
428
- label: { name: "Subject Type", labelType: "labelSmall" },
429
- value: state.subject,
430
- options: [
431
- { value: "organization", label: "Organization" },
432
- { value: "ward", label: "Ward" },
433
- { value: "bed", label: "Bed" },
434
- { value: "patient", label: "Patient" }
435
- ],
436
- onChange: (subject) => setState({ ...state, subject })
437
- },
438
- "item1"
439
- ),
440
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
441
- ControlledInput,
442
- {
443
- label: { name: "Property Name" },
444
- value: state.propertyName,
445
- onChange: (propertyName) => setState({ ...state, propertyName })
446
- },
447
- "item2"
448
- ),
449
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
450
- Textarea,
451
- {
452
- label: { name: "Description" },
453
- value: state.description,
454
- onChange: (description) => setState({ ...state, description })
455
- },
456
- "item3"
457
- )
458
- ]
459
- }
460
- );
461
- };
462
- // Annotate the CommonJS export names for ESM import in node:
463
- 0 && (module.exports = {
464
- InputGroupExample
465
- });
466
- //# sourceMappingURL=InputGroupExample.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/examples/InputGroupExample.tsx","../../../src/components/InputGroup.tsx","../../../src/util/noop.ts","../../../src/components/user-input/Select.tsx","../../../src/components/user-input/Label.tsx","../../../src/components/user-input/Input.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/components/user-input/Textarea.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { InputGroupProps } from '../InputGroup'\nimport { InputGroup } from '../InputGroup'\nimport { Select } from '../user-input/Select'\nimport { Input } from '../user-input/Input'\nimport { Textarea } from '../user-input/Textarea'\n\nexport type InputGroupExampleProps = Omit<InputGroupProps, 'inputs' | 'onChange'>\n\ntype InputType = {\n subject?: string,\n propertyName: string,\n description: string,\n}\n\n/**\n * Example for an Input Group\n */\nexport const InputGroupExample = ({\n ...props\n}: InputGroupExampleProps) => {\n const [state, setState] = useState<InputType>({\n propertyName: '',\n description: ''\n })\n\n return (\n <InputGroup\n {...props}\n onChange={console.log}\n >\n <Select\n key=\"item1\"\n label={{ name: 'Subject Type', labelType: 'labelSmall' }}\n value={state.subject}\n options={[\n { value: 'organization', label: 'Organization' },\n { value: 'ward', label: 'Ward' },\n { value: 'bed', label: 'Bed' },\n { value: 'patient', label: 'Patient' },\n ]}\n onChange={subject => setState({ ...state, subject })}\n />\n <Input\n key=\"item2\"\n label={{ name: 'Property Name' }}\n value={state.propertyName}\n onChange={propertyName => setState({ ...state, propertyName })}\n />\n <Textarea\n key=\"item3\"\n label={{ name: 'Description' }}\n value={state.description}\n onChange={description => setState({ ...state, description })}\n />\n </InputGroup>\n )\n}\n","import type { PropsWithChildren } from 'react'\nimport { useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../util/noop'\n\nexport type InputGroupProps = PropsWithChildren<{\n title: string,\n expanded?: boolean,\n isExpandable?: boolean,\n disabled?: boolean,\n onChange?: (value: boolean) => void,\n className?: string,\n}>\n\n/**\n * A Component for layouting inputs in an expandable group\n */\nexport const InputGroup = ({\n children,\n title,\n expanded = true,\n isExpandable = true,\n disabled = false,\n onChange = noop,\n className = '',\n}: InputGroupProps) => {\n const [isExpanded, setIsExpanded] = useState<boolean>(expanded)\n\n useEffect(() => {\n setIsExpanded(expanded)\n }, [expanded])\n\n return (\n <div className={clsx('col gap-y-4 p-4 bg-white rounded-xl', className)}>\n <div\n className={clsx('row justify-between items-center', {\n 'cursor-pointer': isExpandable && !disabled,\n 'cursor-not-allowed': disabled,\n },\n {\n 'text-primary': !disabled,\n 'text-primary/40': disabled\n })}\n onClick={() => {\n if (!isExpandable) {\n return\n }\n const updatedIsExpanded = !isExpanded\n onChange(updatedIsExpanded)\n setIsExpanded(updatedIsExpanded)\n }}\n >\n <span className=\"textstyle-title-md\">{title}</span>\n <div className={clsx('rounded-full text-white w-6 h-6', {\n 'bg-primary': (isExpandable && !disabled) || expanded,\n 'bg-primary/40': disabled,\n })}>\n {isExpanded\n ? <ChevronUp className=\"-translate-y-[1px]\" size={24}/>\n : <ChevronDown className=\"translate-y-[1px]\" size={24}/>\n }\n </div>\n </div>\n {isExpanded && (\n <div className=\"col gap-y-2 h-full\">\n {children}\n </div>\n )}\n </div>\n )\n}\n","export const noop = () => undefined\n","import { Menu } from '@headlessui/react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type SelectOption<T> = {\n label: ReactNode,\n value: T,\n disabled?: boolean,\n className?: string,\n}\n\nexport type SelectProps<T> = {\n value?: T,\n label?: LabelProps,\n options: SelectOption<T>[],\n onChange: (value: T) => void,\n isHidingCurrentValue?: boolean,\n hintText?: string,\n showDisabledOptions?: boolean,\n className?: string,\n isDisabled?: boolean,\n textColor?: string,\n hoverColor?: string,\n /**\n * The items will be at the start of the select and aren't selectable\n */\n additionalItems?: ReactNode[],\n selectedDisplayOverwrite?: ReactNode,\n};\n\n/**\n * A Select Component for selecting form a list of options\n *\n * The State is managed by the parent\n */\nexport const Select = <T, >({\n value,\n label,\n options,\n onChange,\n isHidingCurrentValue = true,\n hintText = '',\n showDisabledOptions = true,\n isDisabled,\n className,\n textColor = 'text-menu-text',\n hoverColor = 'hover:brightness-90',\n additionalItems,\n selectedDisplayOverwrite,\n }: SelectProps<T>) => {\n // Notice: for more complex types this check here might need an additional compare method\n let filteredOptions = isHidingCurrentValue ? options.filter(option => option.value !== value) : options\n if (!showDisabledOptions) {\n filteredOptions = filteredOptions.filter(value => !value.disabled)\n }\n const selectedOption = options.find(option => option.value === value)\n if (value !== undefined && selectedOption === undefined && selectedDisplayOverwrite === undefined) {\n console.warn('The selected value is not found in the options list. This might be an error on your part or' +\n ' default behavior if it is complex data type on which === does not work. In case of the latter' +\n ' use selectedDisplayOverwrite to set your selected text or component')\n }\n\n const borderColor = 'border-menu-border'\n\n return (\n <div className={clsx(className)}>\n {label && (\n <Label {...label} labelType={label.labelType ?? 'labelBig'} className={clsx('mb-1', label.className)}/>\n )}\n <Menu as=\"div\" className=\"relative text-menu-text\">\n {({ open }) => (\n <>\n <Menu.Button\n className={clsx(\n 'inline-flex w-full justify-between items-center rounded-t-lg border-2 px-4 py-2 font-medium bg-menu-background text-menu-text',\n textColor, borderColor,\n {\n 'rounded-b-lg': !open,\n [hoverColor]: !isDisabled,\n 'bg-disabled-background cursor-not-allowed text-disabled': isDisabled\n }\n )}\n disabled={isDisabled}\n >\n <span>{selectedDisplayOverwrite ?? selectedOption?.label ?? hintText}</span>\n {open ? <ChevronUp/> : <ChevronDown/>}\n </Menu.Button>\n <Menu.Items\n className=\"absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto\"\n >\n {(additionalItems ?? []).map((item, index) => (\n <div key={`additionalItems${index}`}\n className={clsx(borderColor, 'px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0', {\n 'border-b-0 rounded-b-lg': filteredOptions.length === 0 && index === (additionalItems?.length ?? 1) - 1,\n })}\n >\n {item}\n </div>\n ))}\n {filteredOptions.map((option, index) => (\n <Menu.Item key={`item${index}`}>\n {\n <div\n className={clsx('px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer',\n option.className, borderColor, {\n 'brightness-90': option.value === value,\n 'brightness-95': index % 2 === 1,\n 'text-disabled bg-disabled-background cursor-not-allowed': !!option.disabled,\n 'bg-menu-background text-menu-text hover:brightness-90 cursor-pointer': !option.disabled,\n 'rounded-b-lg': index === filteredOptions.length - 1,\n })}\n onClick={() => {\n if (!option.disabled) {\n onChange(option.value)\n }\n }}\n >\n {option.label}\n </div>\n }\n </Menu.Item>\n ))}\n </Menu.Items>\n </>\n )}\n </Menu>\n </div>\n )\n}\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","import React, {\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type HTMLInputTypeAttribute,\n type InputHTMLAttributes, forwardRef\n} 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 InputProps = {\n /**\n * used for the label's `for` attribute\n */\n id?: string,\n value: string,\n label?: Omit<LabelProps, 'id'>,\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, event: ChangeEvent<HTMLInputElement>) => void,\n onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void,\n className?: string,\n onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>\n\n/**\n * A Component for inputting text or other information\n *\n * Its state is managed must be managed by the parent\n */\nconst ControlledInput = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeEvent = noop,\n className = '',\n onEditCompleted,\n expanded = true,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (restProps.autoFocus) {\n ref.current?.focus()\n }\n }, [restProps.autoFocus])\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n className={clsx('block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary', className)}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value, event)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value, e)\n clearUpdateTimer()\n })\n }\n onChange(value, e)\n onChangeEvent(e)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype UncontrolledInputProps = Omit<InputProps, 'value'> & {\n /**\n * @default ''\n */\n defaultValue?: string,\n}\n\n/**\n * A Component for inputting text or other information\n *\n * Its state is managed by the component itself\n */\nconst UncontrolledInput = ({\n defaultValue = '',\n onChange = noop,\n ...props\n }: UncontrolledInputProps) => {\n const [value, setValue] = useState(defaultValue)\n\n const handleChange = (text: string, event: ChangeEvent<HTMLInputElement>) => {\n setValue(text)\n onChange(text, event)\n }\n\n return (\n <ControlledInput\n {...props}\n value={value}\n onChange={handleChange}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n 'block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary',\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\">*</span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n UncontrolledInput,\n ControlledInput as Input,\n FormInput\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","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"],"mappings":"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","names":["import_react","clsx","import_react","import_lucide_react","import_clsx","import_jsx_runtime","import_jsx_runtime","value","clsx","import_react","import_clsx","import_react","import_jsx_runtime","clsx","value","FormInput","clsx","import_react","import_clsx","import_jsx_runtime","clsx","import_jsx_runtime"]}