@helpwave/hightide/dist/components/date/DayPicker.mjs

helpwave's component and theming library

// 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;
};

// src/util/date.ts
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/util/noop.ts
var noop = () => void 0;

// src/components/date/DayPicker.tsx
import clsx 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/components/date/DayPicker.tsx
import { useEffect as useEffect3, useState as useState3 } from "react";
import { jsx as jsx2, jsxs } 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__ */ jsxs("div", { className: clsx("col gap-y-1 min-w-[220px] select-none", className), children: [
    /* @__PURE__ */ jsx2("div", { className: "row 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: "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__ */ jsx2(
        "button",
        {
          disabled: !isDayValid,
          className: clsx(
            "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))
  ] });
};
var DayPickerControlled = ({ displayedMonth, onChange = noop, ...restProps }) => {
  const [date, setDate] = useState3(displayedMonth);
  useEffect3(() => setDate(displayedMonth), [displayedMonth]);
  return /* @__PURE__ */ jsx2(
    DayPicker,
    {
      displayedMonth: date,
      onChange: (newDate) => {
        setDate(newDate);
        onChange(newDate);
      },
      ...restProps
    }
  );
};
export {
  DayPicker,
  DayPickerControlled
};
//# sourceMappingURL=DayPicker.mjs.map