@helpwave/hightide 0.0.12 → 0.0.15

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

@@ -1,21 +1,879 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { DateTimePicker } from '../../user-input/DateAndTimePicker';
-import { noop } from '../../../util/noop';
-/**
- * Example for the DateTimePicker
- */
-export const DateTimePickerExample = ({ value, onChange = noop, onRemove = noop, onFinish = noop, initialDisplay, is24HourFormat, minuteIncrement, showValueOpen, markToday, weekStart, ...props }) => {
-    const [time, setTime] = useState(value);
-    useEffect(() => setTime(value), [value]);
-    return (_jsx(DateTimePicker, { ...props, value: time, onChange: date => {
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/examples/date/DateTimePickerExample.tsx
+var DateTimePickerExample_exports = {};
+__export(DateTimePickerExample_exports, {
+  DateTimePickerExample: () => DateTimePickerExample
+});
+module.exports = __toCommonJS(DateTimePickerExample_exports);
+var import_react8 = require("react");
+
+// src/components/user-input/DateAndTimePicker.tsx
+var import_clsx7 = __toESM(require("clsx"));
+
+// src/hooks/useLanguage.tsx
+var import_react2 = require("react");
+
+// src/hooks/useLocalStorage.tsx
+var import_react = require("react");
+
+// src/hooks/useLanguage.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_LANGUAGE = "en";
+var LanguageContext = (0, import_react2.createContext)({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+var useLanguage = () => (0, import_react2.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
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: (0, import_clsx.default)(
+        className,
+        {
+          "text-disabled-text bg-disabled-background": disabled,
+          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
+        },
+        ButtonSizePaddings[size]
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)({
+              [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__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: (0, import_clsx.default)(
+        className,
+        {
+          "text-disabled-text": disabled,
+          [(0, import_clsx.default)(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
+        },
+        ButtonSizePaddings[size]
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            className: (0, import_clsx.default)({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/date/TimePicker.tsx
+var import_react3 = require("react");
+var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TimePicker = ({
+  time = /* @__PURE__ */ new Date(),
+  onChange = noop,
+  is24HourFormat = true,
+  minuteIncrement = "5min",
+  maxHeight = 300,
+  className = ""
+}) => {
+  const minuteRef = (0, import_react3.useRef)(null);
+  const hourRef = (0, import_react3.useRef)(null);
+  const isPM = time.getHours() >= 11;
+  const hours = is24HourFormat ? range(0, 23) : range(1, 12);
+  let minutes = range(0, 59);
+  (0, import_react3.useEffect)(() => {
+    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]);
+  (0, import_react3.useEffect)(() => {
+    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) => (0, import_clsx2.default)(
+    "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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)("row gap-x-2 w-fit min-w-[150px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col gap-y-1 h-full", children: hours.map((hour) => {
+      const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "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__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
+      const currentMinute = minute === closestMinute;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "col gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          className: style(!isPM),
+          onClick: () => onChangeWrapper((newDate) => isPM && newDate.setHours(newDate.getHours() - 12)),
+          children: "AM"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          className: style(isPM),
+          onClick: () => onChangeWrapper((newDate) => !isPM && newDate.setHours(newDate.getHours() + 12)),
+          children: "PM"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/date/DatePicker.tsx
+var import_react7 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_clsx6 = __toESM(require("clsx"));
+
+// src/components/date/YearMonthPicker.tsx
+var import_react5 = require("react");
+var import_react_custom_scrollbars_22 = require("react-custom-scrollbars-2");
+var import_clsx4 = __toESM(require("clsx"));
+
+// src/components/Expandable.tsx
+var import_react4 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_clsx3 = __toESM(require("clsx"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronDown, { size: 16, className: "min-w-[16px]" });
+var Expandable = (0, import_react4.forwardRef)(({
+  children,
+  label,
+  icon,
+  initialExpansion = false,
+  clickOnlyOnHeader = true,
+  className = "",
+  headerClassName = ""
+}, ref) => {
+  const [isExpanded, setIsExpanded] = (0, import_react4.useState)(initialExpansion);
+  icon ??= DefaultIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ref,
+      className: (0, import_clsx3.default)("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
+      onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "button",
+          {
+            className: (0, import_clsx3.default)("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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col", children })
+      ]
+    }
+  );
+});
+Expandable.displayName = "Expandable";
+
+// src/components/date/YearMonthPicker.tsx
+var import_jsx_runtime5 = require("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 = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx4.default)("col select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
+    const selectedYear = displayedYearMonth.getFullYear() === year;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Expandable,
+      {
+        ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
+        label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: (0, import_clsx4.default)({ "text-primary font-bold": selectedYear }), children: year }),
+        initialExpansion: showValueOpen && selectedYear,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              disabled: !isValid,
+              className: (0, import_clsx4.default)(
+                "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
+var import_clsx5 = __toESM(require("clsx"));
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx5.default)("col gap-y-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          disabled: !isDayValid,
+          className: (0, import_clsx5.default)(
+            "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
+var import_jsx_runtime7 = require("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] = (0, import_react7.useState)(value);
+  const [displayMode, setDisplayMode] = (0, import_react7.useState)(initialDisplay);
+  (0, import_react7.useEffect)(() => {
+    setDisplayedMonth(value);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_clsx6.default)("col gap-y-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row items-center justify-between h-7", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        TextButton,
+        {
+          className: (0, import_clsx6.default)("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__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ChevronDown, { size: 16 })
+          ]
+        }
+      ),
+      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row justify-end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          SolidButton,
+          {
+            size: "small",
+            color: "primary",
+            disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
+            onClick: () => {
+              setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ArrowUp, { size: 20 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          SolidButton,
+          {
+            size: "small",
+            color: "primary",
+            disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
+            onClick: () => {
+              setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ArrowDown, { size: 20 })
+          }
+        )
+      ] })
+    ] }),
+    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      YearMonthPicker,
+      {
+        ...yearMonthPickerProps,
+        displayedYearMonth: value,
+        start,
+        end,
+        onChange: (newDate) => {
+          setDisplayedMonth(newDate);
+          setDisplayMode("day");
+        }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        DayPicker,
+        {
+          ...dayPickerProps,
+          displayedMonth,
+          start,
+          end,
+          selected: value,
+          onChange: (date) => {
             onChange(date);
-            setTime(date);
-        }, onRemove: () => {
-            onRemove();
-            setTime(new Date());
-        }, onFinish: date => {
-            onFinish(date);
-            setTime(date);
-        }, timePickerProps: { is24HourFormat, minuteIncrement }, datePickerProps: { initialDisplay, dayPickerProps: { markToday, weekStart }, yearMonthPickerProps: { showValueOpen } } }));
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        TextButton,
+        {
+          onClick: () => {
+            const newDate = /* @__PURE__ */ new Date();
+            newDate.setHours(value.getHours(), value.getMinutes());
+            onChange(newDate);
+          },
+          children: translation.today
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/components/user-input/DateAndTimePicker.tsx
+var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsx)(
+      DatePicker,
+      {
+        ...datePickerProps,
+        className: "min-w-[320px] min-h-[250px]",
+        yearMonthPickerProps: { maxHeight: 218 },
+        value,
+        start,
+        end,
+        onChange
+      }
+    );
+  }
+  if (useTime) {
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      TimePicker,
+      {
+        ...timePickerProps,
+        className: (0, import_clsx7.default)("h-full", { "justify-between w-full": mode === "time" }),
+        maxHeight: 250,
+        time: value,
+        onChange
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "col w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-4", children: [
+      dateDisplay,
+      timeDisplay
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        SolidButton,
+        {
+          size: "medium",
+          onClick: () => onFinish(value),
+          children: translation.change
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/components/examples/date/DateTimePickerExample.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DateTimePickerExample = ({
+  value,
+  onChange = noop,
+  onRemove = noop,
+  onFinish = noop,
+  initialDisplay,
+  is24HourFormat,
+  minuteIncrement,
+  showValueOpen,
+  markToday,
+  weekStart,
+  ...props
+}) => {
+  const [time, setTime] = (0, import_react8.useState)(value);
+  (0, import_react8.useEffect)(() => setTime(value), [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    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 } }
+    }
+  );
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DateTimePickerExample
+});
+//# sourceMappingURL=DateTimePickerExample.js.map