// src/components/date/DatePicker.tsx
import { useEffect as useEffect5, useState as useState5 } from "react";
import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";

// 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/hooks/useOverwritableState.ts
import { useEffect, useState } from "react";

// src/utils/resolveSetState.ts
function resolveSetState(action, prev) {
  return typeof action === "function" ? action(prev) : action;
}

// src/hooks/useOverwritableState.ts
var useOverwritableState = (initialValue, onChange) => {
  const [state, setState] = useState(initialValue);
  useEffect(() => {
    setState(initialValue);
  }, [initialValue]);
  const onChangeWrapper = (action) => {
    const resolved = resolveSetState(action, state);
    setState(resolved);
    onChange?.(state);
  };
  return [state, onChangeWrapper];
};

// 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/DayPicker.tsx
import clsx from "clsx";

// src/localization/LanguageProvider.tsx
import { createContext, useContext, useEffect as useEffect2, useMemo, useState as useState3 } from "react";

// src/hooks/useLocalStorage.ts
import { useCallback, useState as useState2 } 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 = () => {
  const context = useContext(LanguageContext);
  if (!context) {
    throw new Error("useLanguage must be used within LanguageContext. Try adding a LanguageProvider around your app.");
  }
  return context;
};
var useLocale = (overWriteLanguage) => {
  const { language } = useLanguage();
  const mapping = {
    en: "en-US",
    de: "de-DE"
  };
  return mapping[overWriteLanguage ?? language];
};

// src/components/date/DayPicker.tsx
import { useEffect as useEffect3, useState as useState4 } from "react";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var DayPicker = ({
  displayedMonth,
  selected,
  start,
  end,
  onChange,
  weekStart = "monday",
  markToday = true,
  className = ""
}) => {
  const locale = useLocale();
  const month = displayedMonth.getMonth();
  const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
  return /* @__PURE__ */ jsxs("div", { className: clsx("flex-col-1 min-w-[220px] select-none", className), children: [
    /* @__PURE__ */ jsx2("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx2("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
    weeks.map((week, index) => /* @__PURE__ */ jsx2("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__ */ jsx2(
        "button",
        {
          disabled: !isDayValid,
          className: clsx(
            "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 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,
  ...restProps
}) => {
  const [date, setDate] = useState4(selected);
  const [usedDisplayedMonth, setUsedDDisplayedMonth] = useState4(displayedMonth);
  useEffect3(() => {
    setDate(selected);
    setUsedDDisplayedMonth(selected);
  }, [selected]);
  return /* @__PURE__ */ jsx2(
    DayPicker,
    {
      displayedMonth: usedDisplayedMonth,
      selected: date,
      onChange: (newDate) => {
        setDate(newDate);
        setUsedDDisplayedMonth(newDate);
        onChange?.(newDate);
      },
      ...restProps
    }
  );
};

// src/components/date/YearMonthPicker.tsx
import { useEffect as useEffect4, useRef } from "react";
import { Scrollbars } from "react-custom-scrollbars-2";
import clsx4 from "clsx";

// src/components/layout/Expandable.tsx
import { forwardRef, useCallback as useCallback2, useId } 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 = forwardRef(function Expandable2({
  children,
  id: providedId,
  label,
  icon,
  isExpanded = false,
  onChange,
  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 = forwardRef(function ExpandableUncontrolled2({
  isExpanded,
  onChange,
  ...props
}, ref) {
  const [usedIsExpanded, setUsedIsExpanded] = useOverwritableState(isExpanded, onChange);
  return /* @__PURE__ */ jsx3(
    Expandable,
    {
      ...props,
      ref,
      isExpanded: usedIsExpanded,
      onChange: setUsedIsExpanded
    }
  );
});

// src/components/user-action/Button.tsx
import { forwardRef as forwardRef2 } from "react";
import clsx3 from "clsx";
import { jsx as jsx4, jsxs as jsxs3 } 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 = {
  none: "",
  small: "btn-sm",
  medium: "btn-md",
  large: "btn-lg"
};
var iconPaddingMapping = {
  none: "",
  tiny: "icon-btn-xs",
  small: "icon-btn-sm",
  medium: "icon-btn-md",
  large: "icon-btn-lg"
};
var ButtonUtil = {
  paddingMapping,
  iconPaddingMapping
};
var SolidButton = forwardRef2(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__ */ jsxs3(
    "button",
    {
      ref,
      onClick,
      className: clsx3(
        "group font-semibold",
        colorClasses,
        "not-disabled:hover:brightness-90",
        "disabled:text-disabled disabled:bg-disabled-background",
        ButtonUtil.paddingMapping[size],
        className
      ),
      ...restProps,
      children: [
        startIcon && /* @__PURE__ */ jsx4(
          "span",
          {
            className: clsx3(
              iconColorClasses,
              "group-disabled:text-disabled-icon"
            ),
            children: startIcon
          }
        ),
        children,
        endIcon && /* @__PURE__ */ jsx4(
          "span",
          {
            className: clsx3(
              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 not-disabled:focus-visible:outline-button-text-primary-text",
    negative: "not-disabled:bg-transparent not-disabled:text-button-text-negative-text not-disabled:focus-visible:outline-button-text-negative-text",
    neutral: "not-disabled:bg-transparent not-disabled:text-button-text-neutral-text not-disabled:focus-visible:outline-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__ */ jsxs3(
    "button",
    {
      onClick,
      className: clsx3(
        "group font-semibold",
        "disabled:text-disabled",
        colorClasses,
        {
          [backgroundColor]: coloredHoverBackground,
          "not-disabled:hover:bg-button-text-hover-background": !coloredHoverBackground
        },
        ButtonUtil.paddingMapping[size],
        className
      ),
      ...restProps,
      children: [
        startIcon && /* @__PURE__ */ jsx4(
          "span",
          {
            className: clsx3(
              iconColorClasses,
              "group-disabled:text-disabled-icon"
            ),
            children: startIcon
          }
        ),
        children,
        endIcon && /* @__PURE__ */ jsx4(
          "span",
          {
            className: clsx3(
              iconColorClasses,
              "group-disabled:text-disabled-icon"
            ),
            children: endIcon
          }
        )
      ]
    }
  );
};
var IconButton = forwardRef2(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__ */ jsx4(
    "button",
    {
      ref,
      className: clsx3(
        colorClasses,
        "not-disabled:hover:brightness-90",
        "disabled:text-disabled",
        {
          "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 { jsx as jsx5 } 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,
  className = "",
  maxHeight = 300,
  showValueOpen = true
}) => {
  const locale = useLocale();
  const ref = useRef(null);
  useEffect4(() => {
    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__ */ jsx5("div", { className: clsx4("flex-col-0 select-none", className), children: /* @__PURE__ */ jsx5(Scrollbars, { 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,
      {
        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,
        contentClassName: "gap-y-1",
        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();
          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__ */ jsx5(
            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,
  ...props
}) => {
  const [yearMonth, setYearMonth] = useOverwritableState(displayedYearMonth, onChange);
  return /* @__PURE__ */ jsx5(
    YearMonthPicker,
    {
      displayedYearMonth: yearMonth,
      onChange: setYearMonth,
      ...props
    }
  );
};

// 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/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,
  yearMonthPickerProps,
  dayPickerProps,
  className = ""
}) => {
  const locale = useLocale();
  const translation = useTranslation([timeTranslation], overwriteTranslation);
  const [displayedMonth, setDisplayedMonth] = useState5(value);
  const [displayMode, setDisplayMode] = useState5(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": 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,
  onChange,
  ...props
}) => {
  const [date, setDate] = useOverwritableState(value, onChange);
  return /* @__PURE__ */ jsx6(
    DatePicker,
    {
      ...props,
      value: date,
      onChange: setDate
    }
  );
};

// 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 } 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,
  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,
  ...props
}) => {
  const [value, setValue] = useOverwritableState(time, onChange);
  return /* @__PURE__ */ jsx8(
    TimePicker,
    {
      ...props,
      time: value,
      onChange: setValue
    }
  );
};
export {
  DatePicker,
  DatePickerUncontrolled,
  DayPicker,
  DayPickerUncontrolled,
  TimeDisplay,
  TimePicker,
  TimePickerUncontrolled,
  YearMonthPicker,
  YearMonthPickerUncontrolled
};
//# sourceMappingURL=index.mjs.map