@helpwave/hightide 0.0.15 → 0.0.16

package/dist/components/examples/date/DateTimePickerExample.mjs

@@ -1,844 +0,0 @@
-// src/components/examples/date/DateTimePickerExample.tsx
-import { useEffect as useEffect7, useState as useState8 } from "react";
-
-// src/components/user-input/DateAndTimePicker.tsx
-import clsx7 from "clsx";
-
-// src/hooks/useLanguage.tsx
-import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
-
-// src/hooks/useLocalStorage.tsx
-import { useCallback, useEffect, useState } from "react";
-
-// src/hooks/useLanguage.tsx
-import { jsx } from "react/jsx-runtime";
-var DEFAULT_LANGUAGE = "en";
-var LanguageContext = createContext({ language: 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/hooks/useTranslation.ts
-var useTranslation = (defaults, translationOverwrite = {}) => {
-  const { language: languageProp, translation: overwrite } = translationOverwrite;
-  const { language: inferredLanguage } = useLanguage();
-  const usedLanguage = languageProp ?? inferredLanguage;
-  let defaultValues = defaults[usedLanguage];
-  if (overwrite && overwrite[usedLanguage]) {
-    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
-  }
-  return defaultValues;
-};
-
-// src/util/noop.ts
-var noop = () => void 0;
-
-// src/util/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 range = (start, end, allowEmptyRange = false) => {
-  if (end < start) {
-    if (!allowEmptyRange) {
-      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`);
-    }
-    return [];
-  }
-  return Array.from({ length: end - start + 1 }, (_, index) => index + start);
-};
-var closestMatch = (list, firstCloser) => {
-  return list.reduce((item1, item2) => {
-    return firstCloser(item1, item2) ? item1 : item2;
-  });
-};
-
-// src/util/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/Button.tsx
-import clsx from "clsx";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var ButtonSizePaddings = {
-  small: "btn-sm",
-  medium: "btn-md",
-  large: "btn-lg"
-};
-var SolidButton = ({
-  children,
-  disabled = false,
-  color = "primary",
-  size = "medium",
-  startIcon,
-  endIcon,
-  onClick,
-  className,
-  ...restProps
-}) => {
-  const colorClasses = {
-    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
-    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
-    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
-    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
-    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text"
-  }[color];
-  const iconColorClasses = {
-    primary: "text-button-solid-primary-icon",
-    secondary: "text-button-solid-secondary-icon",
-    tertiary: "text-button-solid-tertiary-icon",
-    positive: "text-button-solid-positive-icon",
-    warning: "text-button-solid-warning-icon",
-    negative: "text-button-solid-negative-icon"
-  }[color];
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
-      className: clsx(
-        className,
-        {
-          "text-disabled-text bg-disabled-background": disabled,
-          [clsx(colorClasses, "hover:brightness-90")]: !disabled
-        },
-        ButtonSizePaddings[size]
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ jsx2(
-          "span",
-          {
-            className: clsx({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ jsx2(
-          "span",
-          {
-            className: clsx({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-};
-var TextButton = ({
-  children,
-  disabled = false,
-  color = "neutral",
-  size = "medium",
-  startIcon,
-  endIcon,
-  onClick,
-  className,
-  ...restProps
-}) => {
-  const colorClasses = {
-    negative: "bg-transparent text-button-text-negative-text",
-    neutral: "bg-transparent text-button-text-neutral-text"
-  }[color];
-  const iconColorClasses = {
-    negative: "text-button-text-negative-icon",
-    neutral: "text-button-text-neutral-icon"
-  }[color];
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
-      className: clsx(
-        className,
-        {
-          "text-disabled-text": disabled,
-          [clsx(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
-        },
-        ButtonSizePaddings[size]
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ jsx2(
-          "span",
-          {
-            className: clsx({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ jsx2(
-          "span",
-          {
-            className: clsx({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/components/date/TimePicker.tsx
-import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
-import { Scrollbars } from "react-custom-scrollbars-2";
-import clsx2 from "clsx";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var TimePicker = ({
-  time = /* @__PURE__ */ new Date(),
-  onChange = noop,
-  is24HourFormat = true,
-  minuteIncrement = "5min",
-  maxHeight = 300,
-  className = ""
-}) => {
-  const minuteRef = useRef(null);
-  const hourRef = useRef(null);
-  const isPM = time.getHours() >= 11;
-  const hours = is24HourFormat ? range(0, 23) : range(1, 12);
-  let minutes = range(0, 59);
-  useEffect3(() => {
-    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]);
-  useEffect3(() => {
-    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) => clsx2(
-    "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__ */ 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) => {
-      const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-      return /* @__PURE__ */ jsx3(
-        "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__ */ jsx3(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx3("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
-      const currentMinute = minute === closestMinute;
-      return /* @__PURE__ */ jsx3(
-        "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__ */ jsxs2("div", { className: "col gap-y-1", children: [
-      /* @__PURE__ */ jsx3(
-        "button",
-        {
-          className: style(!isPM),
-          onClick: () => onChangeWrapper((newDate) => isPM && newDate.setHours(newDate.getHours() - 12)),
-          children: "AM"
-        }
-      ),
-      /* @__PURE__ */ jsx3(
-        "button",
-        {
-          className: style(isPM),
-          onClick: () => onChangeWrapper((newDate) => !isPM && newDate.setHours(newDate.getHours() + 12)),
-          children: "PM"
-        }
-      )
-    ] })
-  ] });
-};
-
-// src/components/date/DatePicker.tsx
-import { useEffect as useEffect6, useState as useState7 } from "react";
-import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";
-import clsx6 from "clsx";
-
-// src/components/date/YearMonthPicker.tsx
-import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
-import { Scrollbars as Scrollbars2 } from "react-custom-scrollbars-2";
-import clsx4 from "clsx";
-
-// src/components/Expandable.tsx
-import { forwardRef, useState as useState4 } from "react";
-import { ChevronDown, ChevronUp } 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, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ jsx4(ChevronDown, { size: 16, className: "min-w-[16px]" });
-var Expandable = forwardRef(({
-  children,
-  label,
-  icon,
-  initialExpansion = false,
-  clickOnlyOnHeader = true,
-  className = "",
-  headerClassName = ""
-}, ref) => {
-  const [isExpanded, setIsExpanded] = useState4(initialExpansion);
-  icon ??= DefaultIcon;
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      ref,
-      className: clsx3("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
-      onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
-      children: [
-        /* @__PURE__ */ jsxs3(
-          "button",
-          {
-            className: clsx3("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
-            onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded),
-            children: [
-              label,
-              icon(isExpanded)
-            ]
-          }
-        ),
-        isExpanded && /* @__PURE__ */ jsx4("div", { className: "col", children })
-      ]
-    }
-  );
-});
-Expandable.displayName = "Expandable";
-
-// 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 = noop,
-  className = "",
-  maxHeight = 300,
-  showValueOpen = true
-}) => {
-  const locale = useLocale();
-  const ref = useRef2(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());
-  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) => {
-    const selectedYear = displayedYearMonth.getFullYear() === year;
-    return /* @__PURE__ */ jsx5(
-      Expandable,
-      {
-        ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
-        label: /* @__PURE__ */ jsx5("span", { className: clsx4({ "text-primary font-bold": selectedYear }), children: year }),
-        initialExpansion: showValueOpen && selectedYear,
-        children: /* @__PURE__ */ jsx5("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx5("div", { className: "row", 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(
-            "button",
-            {
-              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
-                }
-              ),
-              onClick: () => {
-                onChange(newDate);
-              },
-              children: new Intl.DateTimeFormat(locale, { month: "short" }).format(newDate)
-            },
-            month
-          );
-        }) }, index)) })
-      },
-      year
-    );
-  }) }) }) });
-};
-
-// src/components/date/DayPicker.tsx
-import clsx5 from "clsx";
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } 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__ */ 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) => {
-      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__ */ jsx6(
-        "button",
-        {
-          disabled: !isDayValid,
-          className: clsx5(
-            "flex-1 rounded-full border-2 border-transparent shadow-sm",
-            {
-              "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
-            }
-          ),
-          onClick: () => onChange(date),
-          children: date.getDate()
-        },
-        date.getDate()
-      );
-    }) }, index))
-  ] });
-};
-
-// src/components/date/DatePicker.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var defaultDatePickerTranslation = {
-  en: {
-    today: "Today"
-  },
-  de: {
-    today: "Heute"
-  }
-};
-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(defaultDatePickerTranslation, overwriteTranslation);
-  const [displayedMonth, setDisplayedMonth] = useState7(value);
-  const [displayMode, setDisplayMode] = useState7(initialDisplay);
-  useEffect6(() => {
-    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: [
-      /* @__PURE__ */ jsxs5(
-        TextButton,
-        {
-          className: clsx6("row gap-x-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__ */ jsx7(ChevronDown2, { size: 16 })
-          ]
-        }
-      ),
-      displayMode === "day" && /* @__PURE__ */ jsxs5("div", { className: "row justify-end", children: [
-        /* @__PURE__ */ jsx7(
-          SolidButton,
-          {
-            size: "small",
-            color: "primary",
-            disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
-            onClick: () => {
-              setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
-            },
-            children: /* @__PURE__ */ jsx7(ArrowUp, { size: 20 })
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          SolidButton,
-          {
-            size: "small",
-            color: "primary",
-            disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
-            onClick: () => {
-              setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
-            },
-            children: /* @__PURE__ */ jsx7(ArrowDown, { size: 20 })
-          }
-        )
-      ] })
-    ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ jsx7(
-      YearMonthPicker,
-      {
-        ...yearMonthPickerProps,
-        displayedYearMonth: value,
-        start,
-        end,
-        onChange: (newDate) => {
-          setDisplayedMonth(newDate);
-          setDisplayMode("day");
-        }
-      }
-    ) : /* @__PURE__ */ jsxs5("div", { children: [
-      /* @__PURE__ */ jsx7(
-        DayPicker,
-        {
-          ...dayPickerProps,
-          displayedMonth,
-          start,
-          end,
-          selected: value,
-          onChange: (date) => {
-            onChange(date);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx7("div", { className: "mt-2", children: /* @__PURE__ */ jsx7(
-        TextButton,
-        {
-          onClick: () => {
-            const newDate = /* @__PURE__ */ new Date();
-            newDate.setHours(value.getHours(), value.getMinutes());
-            onChange(newDate);
-          },
-          children: translation.today
-        }
-      ) })
-    ] })
-  ] });
-};
-
-// src/components/user-input/DateAndTimePicker.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var defaultTimeTranslation = {
-  en: {
-    clear: "Clear",
-    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"
-  },
-  de: {
-    clear: "Entfernen",
-    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"
-  }
-};
-var DateTimePicker = ({
-  overwriteTranslation,
-  value = /* @__PURE__ */ new Date(),
-  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  mode = "dateTime",
-  onFinish = noop,
-  onChange = noop,
-  onRemove = noop,
-  timePickerProps,
-  datePickerProps
-}) => {
-  const translation = useTranslation(defaultTimeTranslation, overwriteTranslation);
-  const useDate = mode === "dateTime" || mode === "date";
-  const useTime = mode === "dateTime" || mode === "time";
-  let dateDisplay;
-  let timeDisplay;
-  if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx8(
-      DatePicker,
-      {
-        ...datePickerProps,
-        className: "min-w-[320px] min-h-[250px]",
-        yearMonthPickerProps: { maxHeight: 218 },
-        value,
-        start,
-        end,
-        onChange
-      }
-    );
-  }
-  if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx8(
-      TimePicker,
-      {
-        ...timePickerProps,
-        className: clsx7("h-full", { "justify-between w-full": mode === "time" }),
-        maxHeight: 250,
-        time: value,
-        onChange
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs6("div", { className: "col w-fit", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "row gap-x-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(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
-      /* @__PURE__ */ jsx8(
-        SolidButton,
-        {
-          size: "medium",
-          onClick: () => onFinish(value),
-          children: translation.change
-        }
-      )
-    ] }) })
-  ] });
-};
-
-// src/components/examples/date/DateTimePickerExample.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var DateTimePickerExample = ({
-  value,
-  onChange = noop,
-  onRemove = noop,
-  onFinish = noop,
-  initialDisplay,
-  is24HourFormat,
-  minuteIncrement,
-  showValueOpen,
-  markToday,
-  weekStart,
-  ...props
-}) => {
-  const [time, setTime] = useState8(value);
-  useEffect7(() => setTime(value), [value]);
-  return /* @__PURE__ */ jsx9(
-    DateTimePicker,
-    {
-      ...props,
-      value: time,
-      onChange: (date) => {
-        onChange(date);
-        setTime(date);
-      },
-      onRemove: () => {
-        onRemove();
-        setTime(/* @__PURE__ */ new Date());
-      },
-      onFinish: (date) => {
-        onFinish(date);
-        setTime(date);
-      },
-      timePickerProps: { is24HourFormat, minuteIncrement },
-      datePickerProps: { initialDisplay, dayPickerProps: { markToday, weekStart }, yearMonthPickerProps: { showValueOpen } }
-    }
-  );
-};
-export {
-  DateTimePickerExample
-};
-//# sourceMappingURL=DateTimePickerExample.mjs.map