@helpwave/hightide 0.1.27 → 0.1.28

package/dist/components/date/index.mjs

@@ -0,0 +1,1124 @@
+// src/components/date/DatePicker.tsx
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";
+
+// src/localization/LanguageProvider.tsx
+import { createContext, useContext, useEffect, useState as useState2 } from "react";
+
+// src/hooks/useLocalStorage.ts
+import { useCallback, useState } from "react";
+
+// src/localization/util.ts
+var languages = ["en", "de"];
+var languagesLocalNames = {
+  en: "English",
+  de: "Deutsch"
+};
+var DEFAULT_LANGUAGE = "en";
+var LanguageUtil = {
+  languages,
+  DEFAULT_LANGUAGE,
+  languagesLocalNames
+};
+
+// src/localization/LanguageProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var LanguageContext = createContext({
+  language: LanguageUtil.DEFAULT_LANGUAGE,
+  setLanguage: (v) => v
+});
+var useLanguage = () => useContext(LanguageContext);
+var useLocale = (overWriteLanguage) => {
+  const { language } = useLanguage();
+  const mapping = {
+    en: "en-US",
+    de: "de-DE"
+  };
+  return mapping[overWriteLanguage ?? language];
+};
+
+// src/localization/useTranslation.ts
+var TranslationPluralCount = {
+  zero: 0,
+  one: 1,
+  two: 2,
+  few: 3,
+  many: 11,
+  other: -1
+};
+var useTranslation = (translations, overwriteTranslation = {}) => {
+  const { language: languageProp, translation: overwrite } = overwriteTranslation;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  const usedTranslations = [...translations];
+  if (overwrite) {
+    usedTranslations.push(overwrite);
+  }
+  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 === TranslationPluralCount.zero && value?.zero) {
+            forProcessing = value.zero;
+          } else if (count === TranslationPluralCount.one && value?.one) {
+            forProcessing = value.one;
+          } else if (count === TranslationPluralCount.two && value?.two) {
+            forProcessing = value.two;
+          } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {
+            forProcessing = value.few;
+          } else if (count > TranslationPluralCount.many && value?.many) {
+            forProcessing = value.many;
+          } else {
+            forProcessing = value.other;
+          }
+        } else {
+          forProcessing = value;
+        }
+        forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
+          return replacements[placeholder] ?? `{{key:${placeholder}}}`;
+        });
+        return forProcessing;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return `{{${usedLanguage}:${key}}}`;
+  };
+};
+
+// src/utils/noop.ts
+var noop = () => void 0;
+
+// src/utils/array.ts
+var equalSizeGroups = (array, groupSize) => {
+  if (groupSize <= 0) {
+    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
+    return [[...array]];
+  }
+  const groups = [];
+  for (let i = 0; i < array.length; i += groupSize) {
+    groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
+  }
+  return groups;
+};
+var defaultRangeOptions = {
+  allowEmptyRange: false,
+  stepSize: 1,
+  exclusiveStart: false,
+  exclusiveEnd: true
+};
+var range = (endOrRange, options) => {
+  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options };
+  let start = 0;
+  let end;
+  if (typeof endOrRange === "number") {
+    end = endOrRange;
+  } else {
+    start = endOrRange[0];
+    end = endOrRange[1];
+  }
+  if (!exclusiveEnd) {
+    end -= 1;
+  }
+  if (exclusiveStart) {
+    start += 1;
+  }
+  if (end - 1 < start) {
+    if (!allowEmptyRange) {
+      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`);
+    }
+    return [];
+  }
+  return Array.from({ length: end - start }, (_, index) => index * stepSize + start);
+};
+var closestMatch = (list, firstCloser) => {
+  return list.reduce((item1, item2) => {
+    return firstCloser(item1, item2) ? item1 : item2;
+  });
+};
+
+// src/utils/date.ts
+var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
+var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+var changeDuration = (date, duration, isAdding) => {
+  const {
+    years = 0,
+    months = 0,
+    days = 0,
+    hours = 0,
+    minutes = 0,
+    seconds = 0,
+    milliseconds = 0
+  } = duration;
+  if (years < 0) {
+    console.error(`Range error years must be greater than 0: received ${years}`);
+    return new Date(date);
+  }
+  if (months < 0 || months > 11) {
+    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
+    return new Date(date);
+  }
+  if (days < 0) {
+    console.error(`Range error days must be greater than 0: received ${days}`);
+    return new Date(date);
+  }
+  if (hours < 0 || hours > 23) {
+    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
+    return new Date(date);
+  }
+  if (minutes < 0 || minutes > 59) {
+    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
+    return new Date(date);
+  }
+  if (seconds < 0 || seconds > 59) {
+    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
+    return new Date(date);
+  }
+  if (milliseconds < 0) {
+    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
+    return new Date(date);
+  }
+  const multiplier = isAdding ? 1 : -1;
+  const newDate = new Date(date);
+  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
+  newDate.setMonth(newDate.getMonth() + multiplier * months);
+  newDate.setDate(newDate.getDate() + multiplier * days);
+  newDate.setHours(newDate.getHours() + multiplier * hours);
+  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
+  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
+  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
+  return newDate;
+};
+var addDuration = (date, duration) => {
+  return changeDuration(date, duration, true);
+};
+var subtractDuration = (date, duration) => {
+  return changeDuration(date, duration, false);
+};
+var isInTimeSpan = (value, startDate, endDate) => {
+  if (startDate && endDate) {
+    console.assert(startDate <= endDate);
+    return startDate <= value && value <= endDate;
+  } else if (startDate) {
+    return startDate <= value;
+  } else if (endDate) {
+    return endDate >= value;
+  } else {
+    return true;
+  }
+};
+var equalDate = (date1, date2) => {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const dayList = [];
+  let currentDate = new Date(year, month, 1);
+  const weekStartIndex = weekDayList.indexOf(weekStart);
+  while (currentDate.getDay() !== weekStartIndex) {
+    currentDate = subtractDuration(currentDate, { days: 1 });
+  }
+  while (dayList.length < 7 * weeks) {
+    const date2 = new Date(currentDate);
+    date2.setHours(date2.getHours(), date2.getMinutes());
+    dayList.push(date2);
+    currentDate = addDuration(currentDate, { days: 1 });
+  }
+  return equalSizeGroups(dayList, 7);
+};
+
+// src/components/date/DatePicker.tsx
+import clsx5 from "clsx";
+
+// 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 = {
+  solid: ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"],
+  text: ["primary", "negative", "neutral"],
+  outline: ["primary"]
+};
+var IconButtonUtil = {
+  icon: [...ButtonColorUtil.solid, "transparent"]
+};
+var paddingMapping = {
+  small: "btn-sm",
+  medium: "btn-md",
+  large: "btn-lg"
+};
+var iconPaddingMapping = {
+  tiny: "icon-btn-xs",
+  small: "icon-btn-sm",
+  medium: "icon-btn-md",
+  large: "icon-btn-lg"
+};
+var ButtonUtil = {
+  paddingMapping,
+  iconPaddingMapping
+};
+var SolidButton = forwardRef(function SolidButton2({
+  children,
+  color = "primary",
+  size = "medium",
+  startIcon,
+  endIcon,
+  onClick,
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = {
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
+  }[color];
+  const iconColorClasses = {
+    primary: "not-group-disabled:text-button-solid-primary-icon",
+    secondary: "not-group-disabled:text-button-solid-secondary-icon",
+    tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
+    positive: "not-group-disabled:text-button-solid-positive-icon",
+    warning: "not-group-disabled:text-button-solid-warning-icon",
+    negative: "not-group-disabled:text-button-solid-negative-icon",
+    neutral: "not-group-disabled:text-button-solid-neutral-icon"
+  }[color];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      onClick,
+      className: clsx(
+        "group font-semibold",
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text disabled:bg-disabled-background",
+        ButtonUtil.paddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+});
+var TextButton = ({
+  children,
+  color = "neutral",
+  size = "medium",
+  startIcon,
+  endIcon,
+  onClick,
+  coloredHoverBackground = true,
+  className,
+  ...restProps
+}) => {
+  const colorClasses = {
+    primary: "not-disabled:bg-transparent not-disabled:text-button-text-primary-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-primary-text",
+    negative: "not-disabled:bg-transparent not-disabled:text-button-text-negative-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-negative-text",
+    neutral: "not-disabled:bg-transparent not-disabled:text-button-text-neutral-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-neutral-text"
+  }[color];
+  const backgroundColor = {
+    primary: "not-disabled:hover:bg-button-text-primary-text/20 not-disabled:focus-visible:bg-button-text-primary-text/20",
+    negative: "not-disabled:hover:bg-button-text-negative-text/20 not-disabled:focus-visible:bg-button-text-negative-text/20",
+    neutral: "not-disabled:hover:bg-button-text-neutral-text/20 not-disabled:focus-visible:bg-button-text-neutral-text/20"
+  }[color];
+  const iconColorClasses = {
+    primary: "not-group-disabled:text-button-text-primary-icon",
+    negative: "not-group-disabled:text-button-text-negative-icon",
+    neutral: "not-group-disabled:text-button-text-neutral-icon"
+  }[color];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: clsx(
+        "group font-semibold",
+        "disabled:text-disabled-text",
+        colorClasses,
+        {
+          [backgroundColor]: coloredHoverBackground,
+          "not-disabled:hover:bg-button-text-hover-background": !coloredHoverBackground
+        },
+        ButtonUtil.paddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+};
+var IconButton = forwardRef(function IconButton2({
+  children,
+  color = "primary",
+  size = "medium",
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = {
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
+    transparent: "not-disabled:bg-transparent"
+  }[color];
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ref,
+      className: clsx(
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text",
+        {
+          "disabled:bg-disabled-background": color !== "transparent",
+          "disabled:opacity-70": color === "transparent",
+          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
+        },
+        ButtonUtil.iconPaddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children
+    }
+  );
+});
+
+// src/components/date/YearMonthPicker.tsx
+import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import { Scrollbars } from "react-custom-scrollbars-2";
+import clsx3 from "clsx";
+
+// src/components/layout/Expandable.tsx
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useId, useState as useState3 } from "react";
+import { ChevronDown } from "lucide-react";
+import clsx2 from "clsx";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ExpansionIcon = ({ isExpanded, className }) => {
+  return /* @__PURE__ */ jsx3(
+    ChevronDown,
+    {
+      "aria-hidden": true,
+      className: clsx2(
+        "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
+        { "rotate-180": isExpanded },
+        className
+      )
+    }
+  );
+};
+var Expandable = forwardRef2(function Expandable2({
+  children,
+  id: providedId,
+  label,
+  icon,
+  isExpanded = false,
+  onChange = noop,
+  clickOnlyOnHeader = true,
+  disabled = false,
+  className,
+  headerClassName,
+  contentClassName,
+  contentExpandedClassName
+}, ref) {
+  const defaultIcon = useCallback2((expanded) => /* @__PURE__ */ jsx3(ExpansionIcon, { isExpanded: expanded }), []);
+  icon ??= defaultIcon;
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref,
+      onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: clsx2(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            className: clsx2(
+              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
+              {
+                "group-hover:brightness-97": !isExpanded,
+                "hover:brightness-97": isExpanded && !disabled,
+                "cursor-pointer": clickOnlyOnHeader && !disabled
+              },
+              headerClassName
+            ),
+            "aria-expanded": isExpanded,
+            "aria-controls": `${id}-content`,
+            "aria-disabled": disabled ?? void 0,
+            children: [
+              label,
+              icon(isExpanded)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            id: `${id}-content`,
+            className: clsx2(
+              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
+              {
+                [clsx2("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
+                "max-h-0 opacity-0 overflow-hidden": !isExpanded
+              },
+              contentClassName
+            ),
+            role: "region",
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+var ExpandableUncontrolled = forwardRef2(function ExpandableUncontrolled2({
+  isExpanded,
+  onChange = noop,
+  ...props
+}, ref) {
+  const [usedIsExpanded, setUsedIsExpanded] = useState3(isExpanded);
+  useEffect2(() => {
+    setUsedIsExpanded(isExpanded);
+  }, [isExpanded]);
+  return /* @__PURE__ */ jsx3(
+    Expandable,
+    {
+      ...props,
+      ref,
+      isExpanded: usedIsExpanded,
+      onChange: (value) => {
+        onChange(value);
+        setUsedIsExpanded(value);
+      }
+    }
+  );
+});
+
+// src/components/date/YearMonthPicker.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var YearMonthPicker = ({
+  displayedYearMonth = /* @__PURE__ */ new Date(),
+  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  onChange = noop,
+  className = "",
+  maxHeight = 300,
+  showValueOpen = true
+}) => {
+  const locale = useLocale();
+  const ref = useRef(null);
+  useEffect3(() => {
+    const scrollToItem = () => {
+      if (ref.current) {
+        ref.current.scrollIntoView({
+          behavior: "instant",
+          block: "center"
+        });
+      }
+    };
+    scrollToItem();
+  }, [ref]);
+  if (end < start) {
+    console.error(`startYear: (${start}) less than endYear: (${end})`);
+    return null;
+  }
+  const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
+  return /* @__PURE__ */ jsx4("div", { className: clsx3("flex-col-0 select-none", className), children: /* @__PURE__ */ jsx4(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx4("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
+    const selectedYear = displayedYearMonth.getFullYear() === year;
+    return /* @__PURE__ */ jsx4(
+      ExpandableUncontrolled,
+      {
+        ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
+        label: /* @__PURE__ */ jsx4("span", { className: clsx3({ "text-primary font-bold": selectedYear }), children: year }),
+        isExpanded: showValueOpen && selectedYear,
+        contentClassName: "gap-y-1",
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx4("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();
+          const firstOfMonth = new Date(year, monthIndex, 1);
+          const lastOfMonth = new Date(year, monthIndex, 1);
+          const isAfterStart = start === void 0 || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
+          const isBeforeEnd = end === void 0 || firstOfMonth <= end;
+          const isValid = isAfterStart && isBeforeEnd;
+          return /* @__PURE__ */ jsx4(
+            SolidButton,
+            {
+              disabled: !isValid,
+              color: selectedMonth && isValid ? "primary" : "neutral",
+              className: "flex-1",
+              size: "small",
+              onClick: () => {
+                onChange(newDate);
+              },
+              children: new Intl.DateTimeFormat(locale, { month: "short" }).format(newDate)
+            },
+            month
+          );
+        }) }, index))
+      },
+      year
+    );
+  }) }) }) });
+};
+var YearMonthPickerUncontrolled = ({
+  displayedYearMonth,
+  onChange = noop,
+  ...props
+}) => {
+  const [yearMonth, setYearMonth] = useState4(displayedYearMonth ?? /* @__PURE__ */ new Date());
+  useEffect3(() => setYearMonth(displayedYearMonth), [displayedYearMonth]);
+  return /* @__PURE__ */ jsx4(
+    YearMonthPicker,
+    {
+      displayedYearMonth: yearMonth,
+      onChange: (date) => {
+        setYearMonth(date);
+        onChange(date);
+      },
+      ...props
+    }
+  );
+};
+
+// src/components/date/DayPicker.tsx
+import clsx4 from "clsx";
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var DayPicker = ({
+  displayedMonth,
+  selected,
+  start,
+  end,
+  onChange = noop,
+  weekStart = "monday",
+  markToday = true,
+  className = ""
+}) => {
+  const locale = useLocale();
+  const month = displayedMonth.getMonth();
+  const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
+  return /* @__PURE__ */ jsxs3("div", { className: clsx4("flex-col-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ jsx5("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx5("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ jsx5("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;
+      const isDayValid = isInTimeSpan(date, start, end);
+      return /* @__PURE__ */ jsx5(
+        "button",
+        {
+          disabled: !isDayValid,
+          className: clsx4(
+            "flex-1 rounded-full border-2",
+            {
+              "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),
+          children: date.getDate()
+        },
+        date.getDate()
+      );
+    }) }, index))
+  ] });
+};
+var DayPickerUncontrolled = ({
+  displayedMonth,
+  selected,
+  onChange = noop,
+  ...restProps
+}) => {
+  const [date, setDate] = useState5(selected);
+  const [usedDisplayedMonth, setUsedDDisplayedMonth] = useState5(displayedMonth);
+  useEffect4(() => {
+    setDate(selected);
+    setUsedDDisplayedMonth(selected);
+  }, [selected]);
+  return /* @__PURE__ */ jsx5(
+    DayPicker,
+    {
+      displayedMonth: usedDisplayedMonth,
+      selected: date,
+      onChange: (newDate) => {
+        setDate(newDate);
+        setUsedDDisplayedMonth(newDate);
+        onChange(newDate);
+      },
+      ...restProps
+    }
+  );
+};
+
+// src/localization/defaults/time.ts
+var monthTranslation = {
+  en: {
+    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: {
+    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 jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var DatePicker = ({
+  overwriteTranslation,
+  value = /* @__PURE__ */ new Date(),
+  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
+  initialDisplay = "day",
+  onChange = noop,
+  yearMonthPickerProps,
+  dayPickerProps,
+  className = ""
+}) => {
+  const locale = useLocale();
+  const translation = useTranslation([timeTranslation], overwriteTranslation);
+  const [displayedMonth, setDisplayedMonth] = useState6(value);
+  const [displayMode, setDisplayMode] = useState6(initialDisplay);
+  useEffect5(() => {
+    setDisplayedMonth(value);
+  }, [value]);
+  return /* @__PURE__ */ jsxs4("div", { className: clsx5("flex-col-4", className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex-row-2 items-center justify-between h-7", children: [
+      /* @__PURE__ */ jsxs4(
+        TextButton,
+        {
+          className: clsx5("flex-row-1 items-center cursor-pointer select-none", {
+            "text-disabled-text": displayMode !== "day"
+          }),
+          onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
+          children: [
+            `${new Intl.DateTimeFormat(locale, { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
+            /* @__PURE__ */ jsx6(ChevronDown2, { size: 16 })
+          ]
+        }
+      ),
+      displayMode === "day" && /* @__PURE__ */ jsxs4("div", { className: "flex-row-2 justify-end", children: [
+        /* @__PURE__ */ jsx6(
+          SolidButton,
+          {
+            size: "small",
+            color: "primary",
+            disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
+            onClick: () => {
+              setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
+            },
+            children: /* @__PURE__ */ jsx6(ArrowUp, { size: 20 })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          SolidButton,
+          {
+            size: "small",
+            color: "primary",
+            disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
+            onClick: () => {
+              setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
+            },
+            children: /* @__PURE__ */ jsx6(ArrowDown, { size: 20 })
+          }
+        )
+      ] })
+    ] }),
+    displayMode === "yearMonth" ? /* @__PURE__ */ jsx6(
+      YearMonthPicker,
+      {
+        ...yearMonthPickerProps,
+        displayedYearMonth: value,
+        start,
+        end,
+        onChange: (newDate) => {
+          setDisplayedMonth(newDate);
+          setDisplayMode("day");
+        }
+      }
+    ) : /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsx6(
+        DayPicker,
+        {
+          ...dayPickerProps,
+          displayedMonth,
+          start,
+          end,
+          selected: value,
+          onChange: (date) => {
+            onChange(date);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx6("div", { className: "mt-2", children: /* @__PURE__ */ jsx6(
+        TextButton,
+        {
+          color: "primary",
+          onClick: () => {
+            const newDate = /* @__PURE__ */ new Date();
+            newDate.setHours(value.getHours(), value.getMinutes());
+            onChange(newDate);
+          },
+          children: translation("today")
+        }
+      ) })
+    ] })
+  ] });
+};
+var DatePickerUncontrolled = ({
+  value = /* @__PURE__ */ new Date(),
+  onChange = noop,
+  ...props
+}) => {
+  const [date, setDate] = useState6(value);
+  useEffect5(() => setDate(value), [value]);
+  return /* @__PURE__ */ jsx6(
+    DatePicker,
+    {
+      ...props,
+      value: date,
+      onChange: (date1) => {
+        setDate(date1);
+        onChange(date1);
+      }
+    }
+  );
+};
+
+// src/components/date/TimeDisplay.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var defaultTimeDisplayTranslations = {
+  en: {
+    ...timeTranslation.en,
+    inDays: `in {{days}} days`,
+    agoDays: `{{days}} days ago`
+  },
+  de: {
+    ...timeTranslation.de,
+    inDays: `in {{days}} Tagen`,
+    agoDays: `vor {{days}} Tagen`
+  }
+};
+var TimeDisplay = ({
+  overwriteTranslation,
+  date,
+  mode = "daysFromToday"
+}) => {
+  const translation = useTranslation([defaultTimeDisplayTranslations], overwriteTranslation);
+  const difference = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0).valueOf() - new Date(date).setHours(0, 0, 0, 0).valueOf();
+  const isBefore = difference > 0;
+  const differenceInDays = Math.floor(Math.abs(difference) / (1e3 * 3600 * 24));
+  let displayString;
+  if (differenceInDays === 0) {
+    displayString = translation("today");
+  } else if (differenceInDays === 1) {
+    displayString = isBefore ? translation("yesterday") : translation("tomorrow");
+  } else {
+    displayString = isBefore ? translation("agoDays", { replacements: { days: differenceInDays.toString() } }) : translation("inDays", { replacements: { days: differenceInDays.toString() } });
+  }
+  const monthToTranslation = {
+    0: translation("january"),
+    1: translation("february"),
+    2: translation("march"),
+    3: translation("april"),
+    4: translation("may"),
+    5: translation("june"),
+    6: translation("july"),
+    7: translation("august"),
+    8: translation("september"),
+    9: translation("october"),
+    10: translation("november"),
+    11: translation("december")
+  };
+  let fullString;
+  if (mode === "daysFromToday") {
+    fullString = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")} - ${displayString}`;
+  } else {
+    fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
+  }
+  return /* @__PURE__ */ jsx7("span", { children: fullString });
+};
+
+// src/components/date/TimePicker.tsx
+import { useEffect as useEffect6, useRef as useRef2, useState as useState7 } from "react";
+import { Scrollbars as Scrollbars2 } from "react-custom-scrollbars-2";
+import clsx6 from "clsx";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var TimePicker = ({
+  time = /* @__PURE__ */ new Date(),
+  onChange = noop,
+  is24HourFormat = true,
+  minuteIncrement = "5min",
+  maxHeight = 300,
+  className = ""
+}) => {
+  const minuteRef = useRef2(null);
+  const hourRef = useRef2(null);
+  const isPM = time.getHours() >= 11;
+  const hours = is24HourFormat ? range(24) : range([1, 12], { exclusiveEnd: false });
+  let minutes = range(60);
+  useEffect6(() => {
+    const scrollToItem = () => {
+      if (minuteRef.current) {
+        const container = minuteRef.current.parentElement;
+        const hasOverflow = container.scrollHeight > maxHeight;
+        if (hasOverflow) {
+          minuteRef.current.scrollIntoView({
+            behavior: "instant",
+            block: "nearest"
+          });
+        }
+      }
+    };
+    scrollToItem();
+  }, [minuteRef, minuteRef.current]);
+  useEffect6(() => {
+    const scrollToItem = () => {
+      if (hourRef.current) {
+        const container = hourRef.current.parentElement;
+        const hasOverflow = container.scrollHeight > maxHeight;
+        if (hasOverflow) {
+          hourRef.current.scrollIntoView({
+            behavior: "instant",
+            block: "nearest"
+          });
+        }
+      }
+    };
+    scrollToItem();
+  }, [hourRef, hourRef.current]);
+  switch (minuteIncrement) {
+    case "5min":
+      minutes = minutes.filter((value) => value % 5 === 0);
+      break;
+    case "10min":
+      minutes = minutes.filter((value) => value % 10 === 0);
+      break;
+    case "15min":
+      minutes = minutes.filter((value) => value % 15 === 0);
+      break;
+    case "30min":
+      minutes = minutes.filter((value) => value % 30 === 0);
+      break;
+  }
+  const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()));
+  const style = (selected) => clsx6(
+    "chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3",
+    { "bg-primary text-on-primary": selected, "bg-white text-black": !selected }
+  );
+  const onChangeWrapper = (transformer) => {
+    const newDate = new Date(time);
+    transformer(newDate);
+    onChange(newDate);
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: clsx6("flex-row-2 w-fit min-w-[150px] select-none", className), children: [
+    /* @__PURE__ */ jsx8(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx8("div", { className: "flex-col-1 h-full", children: hours.map((hour) => {
+      const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
+      return /* @__PURE__ */ jsx8(
+        "button",
+        {
+          ref: currentHour ? hourRef : void 0,
+          className: style(currentHour),
+          onClick: () => onChangeWrapper((newDate) => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0))),
+          children: hour.toString().padStart(2, "0")
+        },
+        hour
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx8(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx8("div", { className: "flex-col-1 h-full", children: minutes.map((minute) => {
+      const currentMinute = minute === closestMinute;
+      return /* @__PURE__ */ jsx8(
+        "button",
+        {
+          ref: currentMinute ? minuteRef : void 0,
+          className: style(currentMinute),
+          onClick: () => onChangeWrapper((newDate) => newDate.setMinutes(minute)),
+          children: minute.toString().padStart(2, "0")
+        },
+        minute + minuteIncrement
+      );
+    }) }) }),
+    !is24HourFormat && /* @__PURE__ */ jsxs5("div", { className: "flex-col-1", children: [
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          className: style(!isPM),
+          onClick: () => onChangeWrapper((newDate) => isPM && newDate.setHours(newDate.getHours() - 12)),
+          children: "AM"
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          className: style(isPM),
+          onClick: () => onChangeWrapper((newDate) => !isPM && newDate.setHours(newDate.getHours() + 12)),
+          children: "PM"
+        }
+      )
+    ] })
+  ] });
+};
+var TimePickerUncontrolled = ({
+  time,
+  onChange = noop,
+  ...props
+}) => {
+  const [value, setValue] = useState7(time);
+  useEffect6(() => setValue(time), [time]);
+  return /* @__PURE__ */ jsx8(
+    TimePicker,
+    {
+      ...props,
+      time: value,
+      onChange: (time1) => {
+        setValue(time1);
+        onChange(time1);
+      }
+    }
+  );
+};
+export {
+  DatePicker,
+  DatePickerUncontrolled,
+  DayPicker,
+  DayPickerUncontrolled,
+  TimeDisplay,
+  TimePicker,
+  TimePickerUncontrolled,
+  YearMonthPicker,
+  YearMonthPickerUncontrolled
+};
+//# sourceMappingURL=index.mjs.map