@helpwave/hightide 0.1.18 → 0.1.20

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

@@ -239,6 +239,7 @@ var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
 };
 
 // src/components/user-action/Button.tsx
+import { forwardRef } from "react";
 import clsx from "clsx";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var ButtonColorUtil = {
@@ -264,7 +265,7 @@ var ButtonUtil = {
   paddingMapping,
   iconPaddingMapping
 };
-var SolidButton = ({
+var SolidButton = forwardRef(function SolidButton2({
   children,
   disabled = false,
   color = "primary",
@@ -274,7 +275,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",
@@ -296,8 +297,9 @@ var SolidButton = ({
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      ref,
+      onClick,
+      disabled,
       className: clsx(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
@@ -332,7 +334,7 @@ var SolidButton = ({
       ]
     }
   );
-};
+});
 var TextButton = ({
   children,
   disabled = false,
@@ -357,8 +359,8 @@ var TextButton = ({
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      onClick,
+      disabled,
       className: clsx(
         {
           "text-disabled-text cursor-not-allowed": disabled,
@@ -467,8 +469,8 @@ var TimePicker = ({
     transformer(newDate);
     onChange(newDate);
   };
-  return /* @__PURE__ */ jsxs2("div", { className: clsx2("row gap-x-2 w-fit min-w-[150px] select-none", className), children: [
-    /* @__PURE__ */ jsx3(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx3("div", { className: "col gap-y-1 h-full", children: hours.map((hour) => {
+  return /* @__PURE__ */ jsxs2("div", { className: clsx2("flex-row-2 w-fit min-w-[150px] select-none", className), children: [
+    /* @__PURE__ */ jsx3(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx3("div", { className: "flex-col-1 h-full", children: hours.map((hour) => {
       const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
       return /* @__PURE__ */ jsx3(
         "button",
@@ -481,7 +483,7 @@ var TimePicker = ({
         hour
       );
     }) }) }),
-    /* @__PURE__ */ jsx3(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx3("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
+    /* @__PURE__ */ jsx3(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx3("div", { className: "flex-col-1 h-full", children: minutes.map((minute) => {
       const currentMinute = minute === closestMinute;
       return /* @__PURE__ */ jsx3(
         "button",
@@ -494,7 +496,7 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }) }),
-    !is24HourFormat && /* @__PURE__ */ jsxs2("div", { className: "col gap-y-1", children: [
+    !is24HourFormat && /* @__PURE__ */ jsxs2("div", { className: "flex-col-1", children: [
       /* @__PURE__ */ jsx3(
         "button",
         {
@@ -526,12 +528,23 @@ import { Scrollbars as Scrollbars2 } from "react-custom-scrollbars-2";
 import clsx4 from "clsx";
 
 // src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef, useEffect as useEffect4, useState as useState4 } from "react";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect4, useState as useState4 } from "react";
+import { ChevronDown } from "lucide-react";
 import clsx3 from "clsx";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx4(ChevronUp, { className: "min-w-4 w-4" }) : /* @__PURE__ */ jsx4(ChevronDown, { className: "min-w-4 w-4" });
-var Expandable = forwardRef(function Expandable2({
+var ExpansionIcon = ({ isExpanded, className }) => {
+  return /* @__PURE__ */ jsx4(
+    ChevronDown,
+    {
+      className: clsx3(
+        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        { "rotate-180": isExpanded },
+        className
+      )
+    }
+  );
+};
+var Expandable = forwardRef2(function Expandable2({
   children,
   label,
   icon,
@@ -541,24 +554,26 @@ var Expandable = forwardRef(function Expandable2({
   disabled = false,
   className,
   headerClassName,
-  contentClassName
+  contentClassName,
+  contentExpandedClassName
 }, ref) {
-  icon ??= DefaultIcon;
+  const defaultIcon = useCallback2((expanded) => /* @__PURE__ */ jsx4(ExpansionIcon, { isExpanded: expanded }), []);
+  icon ??= defaultIcon;
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref,
-      className: clsx3("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
+      className: clsx3("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__ */ jsxs3(
           "div",
           {
             className: clsx3(
-              "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
@@ -570,12 +585,25 @@ var Expandable = forwardRef(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsx4("div", { className: clsx3("col px-4 pb-2", contentClassName), children })
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: clsx3(
+              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
+              {
+                [clsx3("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
+                "max-h-0 opacity-0 overflow-hidden": !isExpanded
+              },
+              contentClassName
+            ),
+            children
+          }
+        )
       ]
     }
   );
 });
-var ExpandableUncontrolled = forwardRef(function ExpandableUncontrolled2({
+var ExpandableUncontrolled = forwardRef2(function ExpandableUncontrolled2({
   isExpanded,
   onChange = noop,
   ...props
@@ -627,7 +655,7 @@ var YearMonthPicker = ({
     return null;
   }
   const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
-  return /* @__PURE__ */ jsx5("div", { className: clsx4("col select-none", className), children: /* @__PURE__ */ jsx5(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx5("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
+  return /* @__PURE__ */ jsx5("div", { className: clsx4("flex-col-0 select-none", className), children: /* @__PURE__ */ jsx5(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx5("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
     return /* @__PURE__ */ jsx5(
       ExpandableUncontrolled,
@@ -636,7 +664,7 @@ var YearMonthPicker = ({
         label: /* @__PURE__ */ jsx5("span", { className: clsx4({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
         contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx5("div", { className: "row gap-x-1", children: monthList.map((month) => {
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx5("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();
@@ -683,9 +711,9 @@ var DayPicker = ({
   const locale = useLocale();
   const month = displayedMonth.getMonth();
   const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  return /* @__PURE__ */ jsxs4("div", { className: clsx5("col gap-y-1 min-w-[220px] select-none", className), children: [
-    /* @__PURE__ */ jsx6("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx6("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ jsx6("div", { className: "row text-center", children: week.map((date) => {
+  return /* @__PURE__ */ jsxs4("div", { className: clsx5("flex-col-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ jsx6("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx6("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ jsx6("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;
@@ -807,12 +835,12 @@ var DatePicker = ({
   useEffect7(() => {
     setDisplayedMonth(value);
   }, [value]);
-  return /* @__PURE__ */ jsxs5("div", { className: clsx6("col gap-y-4", className), children: [
-    /* @__PURE__ */ jsxs5("div", { className: "row items-center justify-between h-7", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: clsx6("flex-col-4", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex-row-2 items-center justify-between h-7", children: [
       /* @__PURE__ */ jsxs5(
         TextButton,
         {
-          className: clsx6("row gap-x-1 items-center cursor-pointer select-none", {
+          className: clsx6("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled-text": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
@@ -822,7 +850,7 @@ var DatePicker = ({
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ jsxs5("div", { className: "row justify-end", children: [
+      displayMode === "day" && /* @__PURE__ */ jsxs5("div", { className: "flex-row-2 justify-end", children: [
         /* @__PURE__ */ jsx7(
           SolidButton,
           {
@@ -894,6 +922,7 @@ var DatePicker = ({
 // src/localization/defaults/form.ts
 var formTranslation = {
   en: {
+    add: "Add",
     all: "All",
     apply: "Apply",
     back: "Back",
@@ -906,6 +935,7 @@ var formTranslation = {
     confirm: "Confirm",
     copy: "Copy",
     copied: "Copied",
+    create: "Create",
     decline: "Decline",
     delete: "Delete",
     discard: "Discard",
@@ -948,6 +978,7 @@ var formTranslation = {
     yes: "Yes"
   },
   de: {
+    add: "Hinzuf\xFCgen",
     all: "Alle",
     apply: "Anwenden",
     back: "Zur\xFCck",
@@ -960,6 +991,7 @@ var formTranslation = {
     confirm: "Best\xE4tigen",
     copy: "Kopieren",
     copied: "Kopiert",
+    create: "Erstellen",
     decline: "Ablehnen",
     delete: "L\xF6schen",
     discard: "Verwerfen",
@@ -1048,12 +1080,12 @@ var DateTimePicker = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs6("div", { className: "col w-fit", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "row gap-x-4", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "flex-col-2 w-fit", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex-row-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs6("div", { className: "row gap-x-2 mt-1", children: [
+    /* @__PURE__ */ jsx8("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ jsxs6("div", { className: "flex-row-2 mt-1", children: [
       /* @__PURE__ */ jsx8(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
       /* @__PURE__ */ jsx8(
         SolidButton,