@helpwave/hightide 0.1.7 → 0.1.9

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

@@ -37,15 +37,55 @@ var useLocale = (overWriteLanguage) => {
 };
 
 // src/localization/useTranslation.ts
-var useTranslation = (defaults, translationOverwrite = {}) => {
-  const { language: languageProp, translation: overwrite } = translationOverwrite;
+var useTranslation = (translations, overwriteTranslation = {}) => {
+  const { language: languageProp, translation: overwrite } = overwriteTranslation;
   const { language: inferredLanguage } = useLanguage();
   const usedLanguage = languageProp ?? inferredLanguage;
-  let defaultValues = defaults[usedLanguage];
-  if (overwrite && overwrite[usedLanguage]) {
-    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  const usedTranslations = [...translations];
+  if (overwrite) {
+    usedTranslations.push(overwrite);
   }
-  return defaultValues;
+  return (key, options) => {
+    const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
+    try {
+      for (let i = translations.length - 1; i >= 0; i--) {
+        const translation = translations[i];
+        const localizedTranslation = translation[usedLanguage];
+        if (!localizedTranslation) {
+          continue;
+        }
+        const value = localizedTranslation[key];
+        if (!value) {
+          continue;
+        }
+        let forProcessing;
+        if (typeof value !== "string") {
+          if (count <= 0 && value?.zero) {
+            forProcessing = value.zero;
+          } else if (count === 1 && value?.one) {
+            forProcessing = value.one;
+          } else if (count === 2 && value?.two) {
+            forProcessing = value.two;
+          } else if (count <= 10 && value?.few) {
+            forProcessing = value.few;
+          } else if (count > 10 && value?.many) {
+            forProcessing = value.many;
+          } else {
+            forProcessing = value.other;
+          }
+        } else {
+          forProcessing = value;
+        }
+        forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
+          return replacements[placeholder] ?? `{{${placeholder}}}`;
+        });
+        return forProcessing;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return `{{${usedLanguage}:${key}}}`;
+  };
 };
 
 // src/util/noop.ts
@@ -461,8 +501,9 @@ var Expandable = forwardRef(function Expandable2({
   onChange = noop,
   clickOnlyOnHeader = true,
   disabled = false,
-  className = "",
-  headerClassName = ""
+  className,
+  headerClassName,
+  contentClassName
 }, ref) {
   icon ??= DefaultIcon;
   return /* @__PURE__ */ jsxs3(
@@ -491,7 +532,7 @@ var Expandable = forwardRef(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsx4("div", { className: "col px-4 pb-2", children })
+        isExpanded && /* @__PURE__ */ jsx4("div", { className: clsx3("col px-4 pb-2", contentClassName), children })
       ]
     }
   );
@@ -556,7 +597,8 @@ var YearMonthPicker = ({
         ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
         label: /* @__PURE__ */ jsx5("span", { className: clsx4({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx5("div", { className: "row", children: monthList.map((month) => {
+        contentClassName: "gap-y-1",
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx5("div", { className: "row gap-x-1", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
@@ -566,17 +608,12 @@ var YearMonthPicker = ({
           const isBeforeEnd = end === void 0 || firstOfMonth <= end;
           const isValid = isAfterStart && isBeforeEnd;
           return /* @__PURE__ */ jsx5(
-            "button",
+            SolidButton,
             {
               disabled: !isValid,
-              className: clsx4(
-                "chip hover:brightness-95 flex-1",
-                {
-                  "bg-gray-50 text-black": !selectedMonth && isValid,
-                  "bg-primary text-on-primary": selectedMonth && isValid,
-                  "bg-disabled-background text-disabled-text": !isValid
-                }
-              ),
+              color: selectedMonth && isValid ? "primary" : "neutral",
+              className: "flex-1",
+              size: "small",
               onClick: () => {
                 onChange(newDate);
               },
@@ -620,14 +657,15 @@ var DayPicker = ({
         {
           disabled: !isDayValid,
           className: clsx5(
-            "flex-1 rounded-full border-2 border-transparent shadow-sm",
+            "flex-1 rounded-full border-2",
             {
-              "text-gray-700 bg-gray-100": !isSameMonth && isDayValid,
-              "text-black bg-white": !isSelected && isSameMonth && isDayValid,
-              "text-on-primary bg-primary": isSelected,
-              "border-black": isToday && markToday,
-              "hover:brightness-90 hover:bg-primary hover:text-on-primary": isDayValid,
-              "text-disabled-text bg-disabled-background": !isDayValid
+              "text-description": !isSameMonth && !isSelected && isDayValid,
+              "text-button-solid-neutral-text bg-button-solid-neutral-background": !isSelected && isSameMonth && isDayValid,
+              "text-button-solid-primary-text bg-button-solid-primary-background": isSelected && isDayValid,
+              "hover:brightness-90 hover:bg-button-solid-primary-background hover:text-button-solid-primary-text": isDayValid,
+              "text-disabled-text bg-disabled-background cursor-not-allowed": !isDayValid,
+              "border-secondary": isToday && markToday,
+              "border-transparent": !isToday || !markToday
             }
           ),
           onClick: () => onChange(date),
@@ -639,16 +677,80 @@ var DayPicker = ({
   ] });
 };
 
-// src/components/date/DatePicker.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var defaultDatePickerTranslation = {
+// src/localization/defaults/time.ts
+var monthTranslation = {
   en: {
-    today: "Today"
+    january: "January",
+    february: "Febuary",
+    march: "March",
+    april: "April",
+    may: "May",
+    june: "June",
+    july: "July",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
   },
   de: {
-    today: "Heute"
+    january: "Januar",
+    february: "Febuar",
+    march: "M\xE4rz",
+    april: "April",
+    may: "Mai",
+    june: "Juni",
+    july: "Juli",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
   }
 };
+var timeTranslation = {
+  en: {
+    ...monthTranslation.en,
+    century: { one: "Century", other: "Centuries" },
+    decade: { one: "Decade", other: "Decades" },
+    year: { one: "Year", other: "Years" },
+    month: { one: "Month", other: "Months" },
+    day: { one: "Day", other: "Days" },
+    hour: { one: "Hour", other: "Hours" },
+    minute: { one: "Minute", other: "Minutes" },
+    second: { one: "Second", other: "Seconds" },
+    millisecond: { one: "Millisecond", other: "Milliseconds" },
+    microsecond: { one: "Microsecond", other: "Microseconds" },
+    nanosecond: { one: "Nanosecond", other: "Nanoseconds" },
+    yesterday: "Yesterday",
+    today: "Today",
+    tomorrow: "Tomorrow",
+    in: "in",
+    ago: "ago"
+  },
+  de: {
+    ...monthTranslation.de,
+    century: { one: "Jahrhundert", other: "Jahrhunderte" },
+    decade: { one: "Jahrzehnt", other: "Jahrzehnte" },
+    year: { one: "Jahr", other: "Jahre" },
+    month: { one: "Monat", other: "Monate" },
+    day: { one: "Tag", other: "Tage" },
+    hour: { one: "Stunde", other: "Stunden" },
+    minute: { one: "Minute", other: "Minuten" },
+    second: { one: "Sekunde", other: "Sekunden" },
+    millisecond: { one: "Millisekunde", other: "Millisekunden" },
+    microsecond: { one: "Mikrosekunde", other: "Mikrosekunden" },
+    nanosecond: { one: "Nanosekunde", other: "Nanosekunden" },
+    yesterday: "Gestern",
+    today: "Heute",
+    tomorrow: "Morgen",
+    in: "in",
+    ago: "vor"
+  }
+};
+
+// src/components/date/DatePicker.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var DatePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -661,7 +763,7 @@ var DatePicker = ({
   className = ""
 }) => {
   const locale = useLocale();
-  const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
+  const translation = useTranslation([timeTranslation], overwriteTranslation);
   const [displayedMonth, setDisplayedMonth] = useState7(value);
   const [displayMode, setDisplayMode] = useState7(initialDisplay);
   useEffect7(() => {
@@ -744,55 +846,115 @@ var DatePicker = ({
             newDate.setHours(value.getHours(), value.getMinutes());
             onChange(newDate);
           },
-          children: translation.today
+          children: translation("today")
         }
       ) })
     ] })
   ] });
 };
 
-// src/components/user-action/DateAndTimePicker.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var defaultTimeTranslation = {
+// src/localization/defaults/form.ts
+var formTranslation = {
   en: {
-    clear: "Clear",
+    all: "All",
+    back: "Back",
+    cancel: "Cancel",
     change: "Change",
-    year: "Year",
-    month: "Month",
-    day: "Day",
-    january: "January",
-    february: "Febuary",
-    march: "March",
-    april: "April",
-    may: "May",
-    june: "June",
-    july: "July",
-    august: "August",
-    september: "September",
-    october: "October",
-    november: "November",
-    december: "December"
+    clear: "Clear",
+    close: "Close",
+    confirm: "Confirm",
+    decline: "Decline",
+    delete: "Delete",
+    discard: "Discard",
+    discardChanges: "Discard Changes",
+    done: "Done",
+    edit: "Edit",
+    enterText: "Enter text here",
+    error: "Error",
+    exit: "Exit",
+    fieldRequiredError: "This field is required.",
+    invalidEmailError: "Please enter a valid email address.",
+    less: "Less",
+    loading: "Loading",
+    maxLengthError: "Maximum length exceeded.",
+    minLengthError: "Minimum length not met.",
+    more: "More",
+    next: "Next",
+    no: "No",
+    none: "None",
+    of: "of",
+    optional: "Optional",
+    pleaseWait: "Please wait...",
+    previous: "Previous",
+    remove: "Remove",
+    required: "Required",
+    reset: "Reset",
+    save: "Save",
+    search: "Search",
+    select: "Select",
+    selectOption: "Select an option",
+    show: "Show",
+    showMore: "Show more",
+    showLess: "Show less",
+    submit: "Submit",
+    success: "Success",
+    update: "Update",
+    unsavedChanges: "Unsaved Changes",
+    unsavedChangesSaveQuestion: "Do you want to save your changes?",
+    yes: "Yes"
   },
   de: {
-    clear: "Entfernen",
+    all: "Alle",
+    back: "Zur\xFCck",
+    cancel: "Abbrechen",
     change: "\xC4ndern",
-    year: "Jahr",
-    month: "Monat",
-    day: "Tag",
-    january: "Januar",
-    february: "Febuar",
-    march: "M\xE4rz",
-    april: "April",
-    may: "Mai",
-    june: "Juni",
-    july: "Juli",
-    august: "August",
-    september: "September",
-    october: "October",
-    november: "November",
-    december: "December"
+    clear: "L\xF6schen",
+    close: "Schlie\xDFen",
+    confirm: "Best\xE4tigen",
+    decline: "Ablehnen",
+    delete: "L\xF6schen",
+    discard: "Verwerfen",
+    discardChanges: "\xC4nderungen Verwerfen",
+    done: "Fertig",
+    edit: "Bearbeiten",
+    enterText: "Text hier eingeben",
+    error: "Fehler",
+    exit: "Beenden",
+    fieldRequiredError: "Dieses Feld ist erforderlich.",
+    invalidEmailError: "Bitte geben Sie eine g\xFCltige E-Mail-Adresse ein.",
+    less: "Weniger",
+    loading: "L\xE4dt",
+    maxLengthError: "Maximale L\xE4nge \xFCberschritten.",
+    minLengthError: "Mindestl\xE4nge nicht erreicht.",
+    more: "Mehr",
+    next: "Weiter",
+    no: "Nein",
+    none: "Nichts",
+    of: "von",
+    optional: "Optional",
+    pleaseWait: "Bitte warten...",
+    previous: "Vorherige",
+    remove: "Entfernen",
+    required: "Erforderlich",
+    reset: "Zur\xFCcksetzen",
+    save: "Speichern",
+    search: "Suche",
+    select: "Select",
+    selectOption: "Option ausw\xE4hlen",
+    show: "Anzeigen",
+    showMore: "Mehr anzeigen",
+    showLess: "Weniger anzeigen",
+    submit: "Abschicken",
+    success: "Erfolg",
+    update: "Update",
+    unsavedChanges: "Ungespeicherte \xC4nderungen",
+    unsavedChangesSaveQuestion: "M\xF6chtest du die \xC4nderungen speichern?",
+    yes: "Ja"
   }
 };
+
+// src/components/user-action/DateAndTimePicker.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var DateTimePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -805,7 +967,7 @@ var DateTimePicker = ({
   timePickerProps,
   datePickerProps
 }) => {
-  const translation = useTranslation(defaultTimeTranslation, overwriteTranslation);
+  const translation = useTranslation([formTranslation, timeTranslation], overwriteTranslation);
   const useDate = mode === "dateTime" || mode === "date";
   const useTime = mode === "dateTime" || mode === "time";
   let dateDisplay;
@@ -842,13 +1004,13 @@ var DateTimePicker = ({
       timeDisplay
     ] }),
     /* @__PURE__ */ jsx8("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs6("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ jsx8(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
+      /* @__PURE__ */ jsx8(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
       /* @__PURE__ */ jsx8(
         SolidButton,
         {
           size: "medium",
           onClick: () => onFinish(value),
-          children: translation.change
+          children: translation("change")
         }
       )
     ] }) })