@helpwave/hightide 0.1.18 → 0.1.20

package/dist/components/user-action/DateAndTimePicker.js

@@ -272,6 +272,7 @@ var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
 };
 
 // src/components/user-action/Button.tsx
+var import_react3 = require("react");
 var import_clsx = __toESM(require("clsx"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ButtonColorUtil = {
@@ -297,7 +298,7 @@ var ButtonUtil = {
   paddingMapping,
   iconPaddingMapping
 };
-var SolidButton = ({
+var SolidButton = (0, import_react3.forwardRef)(function SolidButton2({
   children,
   disabled = false,
   color = "primary",
@@ -307,7 +308,7 @@ var SolidButton = ({
   onClick,
   className,
   ...restProps
-}) => {
+}, ref) {
   const colorClasses = {
     primary: "bg-button-solid-primary-background text-button-solid-primary-text",
     secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
@@ -329,8 +330,9 @@ var SolidButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      ref,
+      onClick,
+      disabled,
       className: (0, import_clsx.default)(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
@@ -365,7 +367,7 @@ var SolidButton = ({
       ]
     }
   );
-};
+});
 var TextButton = ({
   children,
   disabled = false,
@@ -390,8 +392,8 @@ var TextButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      onClick,
+      disabled,
       className: (0, import_clsx.default)(
         {
           "text-disabled-text cursor-not-allowed": disabled,
@@ -429,7 +431,7 @@ var TextButton = ({
 };
 
 // src/components/date/TimePicker.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
 var import_clsx2 = __toESM(require("clsx"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -441,12 +443,12 @@ var TimePicker = ({
   maxHeight = 300,
   className = ""
 }) => {
-  const minuteRef = (0, import_react3.useRef)(null);
-  const hourRef = (0, import_react3.useRef)(null);
+  const minuteRef = (0, import_react4.useRef)(null);
+  const hourRef = (0, import_react4.useRef)(null);
   const isPM = time.getHours() >= 11;
   const hours = is24HourFormat ? range(24) : range([1, 12], { exclusiveEnd: false });
   let minutes = range(60);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const scrollToItem = () => {
       if (minuteRef.current) {
         const container = minuteRef.current.parentElement;
@@ -461,7 +463,7 @@ var TimePicker = ({
     };
     scrollToItem();
   }, [minuteRef, minuteRef.current]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const scrollToItem = () => {
       if (hourRef.current) {
         const container = hourRef.current.parentElement;
@@ -500,8 +502,8 @@ var TimePicker = ({
     transformer(newDate);
     onChange(newDate);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)("row gap-x-2 w-fit min-w-[150px] select-none", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col gap-y-1 h-full", children: hours.map((hour) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)("flex-row-2 w-fit min-w-[150px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-col-1 h-full", children: hours.map((hour) => {
       const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
@@ -514,7 +516,7 @@ var TimePicker = ({
         hour
       );
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-col-1 h-full", children: minutes.map((minute) => {
       const currentMinute = minute === closestMinute;
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
@@ -527,7 +529,7 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }) }),
-    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "col gap-y-1", children: [
+    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-col-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
         {
@@ -549,22 +551,33 @@ var TimePicker = ({
 };
 
 // src/components/date/DatePicker.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_clsx6 = __toESM(require("clsx"));
 
 // src/components/date/YearMonthPicker.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_custom_scrollbars_22 = require("react-custom-scrollbars-2");
 var import_clsx4 = __toESM(require("clsx"));
 
 // src/components/layout-and-navigation/Expandable.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_lucide_react = require("lucide-react");
 var import_clsx3 = __toESM(require("clsx"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronUp, { className: "min-w-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronDown, { className: "min-w-4 w-4" });
-var Expandable = (0, import_react4.forwardRef)(function Expandable2({
+var ExpansionIcon = ({ isExpanded, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_lucide_react.ChevronDown,
+    {
+      className: (0, import_clsx3.default)(
+        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        { "rotate-180": isExpanded },
+        className
+      )
+    }
+  );
+};
+var Expandable = (0, import_react5.forwardRef)(function Expandable2({
   children,
   label,
   icon,
@@ -574,24 +587,26 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
   disabled = false,
   className,
   headerClassName,
-  contentClassName
+  contentClassName,
+  contentExpandedClassName
 }, ref) {
-  icon ??= DefaultIcon;
+  const defaultIcon = (0, import_react5.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
+  icon ??= defaultIcon;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ref,
-      className: (0, import_clsx3.default)("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
+      className: (0, import_clsx3.default)("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
             className: (0, import_clsx3.default)(
-              "row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
+              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
-                "group-hover:brightness-95": !isExpanded,
-                "hover:brightness-95": isExpanded && !disabled,
+                "group-hover:brightness-97": !isExpanded,
+                "hover:brightness-97": isExpanded && !disabled,
                 "cursor-pointer": clickOnlyOnHeader && !disabled
               },
               headerClassName
@@ -603,18 +618,31 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx3.default)("col px-4 pb-2", contentClassName), children })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: (0, import_clsx3.default)(
+              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
+              {
+                [(0, import_clsx3.default)("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
+                "max-h-0 opacity-0 overflow-hidden": !isExpanded
+              },
+              contentClassName
+            ),
+            children
+          }
+        )
       ]
     }
   );
 });
-var ExpandableUncontrolled = (0, import_react4.forwardRef)(function ExpandableUncontrolled2({
+var ExpandableUncontrolled = (0, import_react5.forwardRef)(function ExpandableUncontrolled2({
   isExpanded,
   onChange = noop,
   ...props
 }, ref) {
-  const [usedIsExpanded, setUsedIsExpanded] = (0, import_react4.useState)(isExpanded);
-  (0, import_react4.useEffect)(() => {
+  const [usedIsExpanded, setUsedIsExpanded] = (0, import_react5.useState)(isExpanded);
+  (0, import_react5.useEffect)(() => {
     setUsedIsExpanded(isExpanded);
   }, [isExpanded]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -643,8 +671,8 @@ var YearMonthPicker = ({
   showValueOpen = true
 }) => {
   const locale = useLocale();
-  const ref = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const ref = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     const scrollToItem = () => {
       if (ref.current) {
         ref.current.scrollIntoView({
@@ -660,7 +688,7 @@ var YearMonthPicker = ({
     return null;
   }
   const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx4.default)("col select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx4.default)("flex-col-0 select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       ExpandableUncontrolled,
@@ -669,7 +697,7 @@ var YearMonthPicker = ({
         label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: (0, import_clsx4.default)({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
         contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row gap-x-1", children: monthList.map((month) => {
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-row-1", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
@@ -701,7 +729,7 @@ var YearMonthPicker = ({
 
 // src/components/date/DayPicker.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var DayPicker = ({
   displayedMonth,
@@ -716,9 +744,9 @@ var DayPicker = ({
   const locale = useLocale();
   const month = displayedMonth.getMonth();
   const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx5.default)("col gap-y-1 min-w-[220px] select-none", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "row text-center", children: week.map((date) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx5.default)("flex-col-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-row-2 text-center", children: week.map((date) => {
       const isSelected = !!selected && equalDate(selected, date);
       const isToday = equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
@@ -835,17 +863,17 @@ var DatePicker = ({
 }) => {
   const locale = useLocale();
   const translation = useTranslation([timeTranslation], overwriteTranslation);
-  const [displayedMonth, setDisplayedMonth] = (0, import_react7.useState)(value);
-  const [displayMode, setDisplayMode] = (0, import_react7.useState)(initialDisplay);
-  (0, import_react7.useEffect)(() => {
+  const [displayedMonth, setDisplayedMonth] = (0, import_react8.useState)(value);
+  const [displayMode, setDisplayMode] = (0, import_react8.useState)(initialDisplay);
+  (0, import_react8.useEffect)(() => {
     setDisplayedMonth(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_clsx6.default)("col gap-y-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row items-center justify-between h-7", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_clsx6.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-row-2 items-center justify-between h-7", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         TextButton,
         {
-          className: (0, import_clsx6.default)("row gap-x-1 items-center cursor-pointer select-none", {
+          className: (0, import_clsx6.default)("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled-text": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
@@ -855,7 +883,7 @@ var DatePicker = ({
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row justify-end", children: [
+      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-row-2 justify-end", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           SolidButton,
           {
@@ -927,6 +955,7 @@ var DatePicker = ({
 // src/localization/defaults/form.ts
 var formTranslation = {
   en: {
+    add: "Add",
     all: "All",
     apply: "Apply",
     back: "Back",
@@ -939,6 +968,7 @@ var formTranslation = {
     confirm: "Confirm",
     copy: "Copy",
     copied: "Copied",
+    create: "Create",
     decline: "Decline",
     delete: "Delete",
     discard: "Discard",
@@ -981,6 +1011,7 @@ var formTranslation = {
     yes: "Yes"
   },
   de: {
+    add: "Hinzuf\xFCgen",
     all: "Alle",
     apply: "Anwenden",
     back: "Zur\xFCck",
@@ -993,6 +1024,7 @@ var formTranslation = {
     confirm: "Best\xE4tigen",
     copy: "Kopieren",
     copied: "Kopiert",
+    create: "Erstellen",
     decline: "Ablehnen",
     delete: "L\xF6schen",
     discard: "Verwerfen",
@@ -1081,12 +1113,12 @@ var DateTimePicker = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "col w-fit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-col-2 w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-row-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-row-2 mt-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         SolidButton,