@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/date/DayPicker.mjs

@@ -0,0 +1,195 @@
+// 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

package/dist/components/date/DayPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/util/array.ts","../../../src/util/date.ts","../../../src/util/noop.ts","../../../src/components/date/DayPicker.tsx","../../../src/hooks/useLanguage.tsx","../../../src/hooks/useLocalStorage.tsx"],"sourcesContent":["export const equalSizeGroups = <T >(array: T[], groupSize: number): T[][] => {\n  if (groupSize <= 0) {\n    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n    return [[...array]]\n  }\n\n  const groups = []\n  for (let i = 0; i < array.length; i += groupSize) {\n    groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n  }\n  return groups\n}\n\n/**\n * @param start\n * @param end inclusive\n * @param allowEmptyRange Whether the range can be defined empty via end < start\n */\nexport const range = (start: number, end: number, allowEmptyRange: boolean = false): number[] => {\n  if (end < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start + 1 }, (_, index) => index + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = <T >(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n  return list.reduce((item1, item2) => {\n    return firstCloser(item1, item2) ? item1 : item2\n  })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = <T >(list: T[], item: T, neighbourDistance: number = 2) => {\n  const index = list.indexOf(item)\n  const totalItems = neighbourDistance * 2 + 1\n  if (list.length < totalItems) {\n    console.warn('List is to short')\n    return list\n  }\n\n  if (index === -1) {\n    console.error('item not found in list')\n    return list.splice(0, totalItems)\n  }\n\n  let start = index - neighbourDistance\n  if (start < 0) {\n    start += list.length\n  }\n  const end = (index + neighbourDistance + 1) % list.length\n\n  const result: T[] = []\n  let ignoreOnce = list.length === totalItems\n  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n    result.push(list[i]!)\n    if (end === i && ignoreOnce) {\n      ignoreOnce = false\n    }\n  }\n  return result\n}\n\nexport const createLoopingListWithIndex = <T >(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  if (length < 0) {\n    console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n  } else if (length === 0) {\n    length = list.length\n  }\n\n  const returnList: [number, T][] = []\n\n  if (forwards) {\n    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n      returnList.push([i, list[i]!])\n    }\n  } else {\n    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n      returnList.push([i, list[i]!])\n    }\n  }\n\n  return returnList\n}\n\nexport const createLoopingList = <T >(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n  unique: <T>(list: T[]): T[] => {\n    const seen = new Set<T>()\n    return list.filter((item) => {\n      if (seen.has(item)) {\n        return false\n      }\n      seen.add(item)\n      return true\n    })\n  },\n\n  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  }\n}\n","import { equalSizeGroups } from './array'\n\nexport const monthsList = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'] as const\nexport type Month = typeof monthsList[number]\n\nexport const weekDayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] as const\nexport type WeekDay = typeof weekDayList[number]\n\nexport const formatDate = (date: Date) => {\n  const year = date.getFullYear().toString().padStart(4, '0')\n  const month = (date.getMonth() + 1).toString().padStart(2, '0')\n  const day = (date.getDate()).toString().padStart(2, '0')\n  return `${year}-${month}-${day}`\n}\n\nexport const formatDateTime = (date: Date) => {\n  const dateString = formatDate(date)\n  const hours = date.getHours().toString().padStart(2, '0')\n  const minutes = date.getMinutes().toString().padStart(2, '0')\n  return `${dateString}T${hours}:${minutes}`\n}\n\nexport const getDaysInMonth = (year: number, month: number): number => {\n  const lastDayOfMonth = new Date(year, month + 1, 0)\n  return lastDayOfMonth.getDate()\n}\n\nexport type Duration = {\n  years?: number,\n  months?: number,\n  days?: number,\n  hours?: number,\n  minutes?: number,\n  seconds?: number,\n  milliseconds?: number,\n}\n\nexport const changeDuration = (date: Date, duration: Duration, isAdding?: boolean): Date => {\n  const {\n    years = 0,\n    months = 0,\n    days = 0,\n    hours = 0,\n    minutes = 0,\n    seconds = 0,\n    milliseconds = 0,\n  } = duration\n\n  // Check ranges\n  if (years < 0) {\n    console.error(`Range error years must be greater than 0: received ${years}`)\n    return new Date(date)\n  }\n  if (months < 0 || months > 11) {\n    console.error(`Range error month must be 0 <= month <= 11: received ${months}`)\n    return new Date(date)\n  }\n  if (days < 0) {\n    console.error(`Range error days must be greater than 0: received ${days}`)\n    return new Date(date)\n  }\n  if (hours < 0 || hours > 23) {\n    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`)\n    return new Date(date)\n  }\n  if (minutes < 0 || minutes > 59) {\n    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`)\n    return new Date(date)\n  }\n  if (seconds < 0 || seconds > 59) {\n    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`)\n    return new Date(date)\n  }\n  if (milliseconds < 0) {\n    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`)\n    return new Date(date)\n  }\n\n  const multiplier = isAdding ? 1 : -1\n\n  const newDate = new Date(date)\n\n  newDate.setFullYear(newDate.getFullYear() + multiplier * years)\n\n  newDate.setMonth(newDate.getMonth() + multiplier * months)\n\n  newDate.setDate(newDate.getDate() + multiplier * days)\n\n  newDate.setHours(newDate.getHours() + multiplier * hours)\n\n  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes)\n\n  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds)\n\n  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds)\n\n  return newDate\n}\n\nexport const addDuration = (date: Date, duration: Duration): Date => {\n  return changeDuration(date, duration, true)\n}\n\nexport const subtractDuration = (date: Date, duration: Duration): Date => {\n  return changeDuration(date, duration, false)\n}\n\nexport const getBetweenDuration = (startDate: Date, endDate: Date): Duration => {\n  const durationInMilliseconds = endDate.getTime() - startDate.getTime()\n\n  const millisecondsInSecond = 1000\n  const millisecondsInMinute = 60 * millisecondsInSecond\n  const millisecondsInHour = 60 * millisecondsInMinute\n  const millisecondsInDay = 24 * millisecondsInHour\n  const millisecondsInMonth = 30 * millisecondsInDay // Rough estimation, can be adjusted\n\n  const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay))\n  const months = Math.floor(durationInMilliseconds / millisecondsInMonth)\n  const days = Math.floor(durationInMilliseconds / millisecondsInDay)\n  const hours = Math.floor((durationInMilliseconds % millisecondsInDay) / millisecondsInHour)\n  const seconds = Math.floor((durationInMilliseconds % millisecondsInHour) / millisecondsInSecond)\n  const milliseconds = durationInMilliseconds % millisecondsInSecond\n\n  return {\n    years,\n    months,\n    days,\n    hours,\n    seconds,\n    milliseconds,\n  }\n}\n\n/** Checks if a given date is in the range of two dates\n *\n * An undefined value for startDate or endDate means no bound for the start or end respectively\n */\nexport const isInTimeSpan = (value: Date, startDate?: Date, endDate?: Date): boolean => {\n  if(startDate && endDate) {\n    console.assert(startDate <= endDate)\n    return startDate <= value && value <= endDate\n  } else if (startDate) {\n    return startDate <= value\n  } else if(endDate) {\n    return endDate >= value\n  } else {\n    return true\n  }\n}\n\n/** Compare two dates on the year, month, day */\nexport const equalDate = (date1: Date, date2: Date) => {\n  return date1.getFullYear() === date2.getFullYear()\n    && date1.getMonth() === date2.getMonth()\n    && date1.getDate() === date2.getDate()\n}\n\nexport const getWeeksForCalenderMonth = (date: Date, weekStart: WeekDay, weeks: number = 6) => {\n  const month = date.getMonth()\n  const year = date.getFullYear()\n\n  const dayList: Date[] = []\n  let currentDate = new Date(year, month, 1) // Start of month\n  const weekStartIndex = weekDayList.indexOf(weekStart)\n\n  // Move the current day to the week before\n  while (currentDate.getDay() !== weekStartIndex) {\n    currentDate = subtractDuration(currentDate, { days: 1 })\n  }\n\n  while (dayList.length < 7 * weeks) {\n    const date = new Date(currentDate)\n    date.setHours(date.getHours(), date.getMinutes()) // To make sure we are not overwriting the time\n    dayList.push(date)\n    currentDate = addDuration(currentDate, { days: 1 })\n  }\n\n  // weeks\n  return equalSizeGroups(dayList, 7)\n}\n","export const noop = () => undefined\n","import type { WeekDay } from '../../util/date'\nimport { isInTimeSpan } from '../../util/date'\nimport { equalDate, getWeeksForCalenderMonth } from '../../util/date'\nimport { noop } from '../../util/noop'\nimport clsx from 'clsx'\nimport { useLocale } from '../../hooks/useLanguage'\nimport { useEffect, useState } from 'react'\n\nexport type DayPickerProps = {\n  displayedMonth: Date,\n  selected?: Date,\n  start?: Date,\n  end?: Date,\n  onChange?: (date: Date) => void,\n  weekStart?: WeekDay,\n  markToday?: boolean,\n  className?: string,\n}\n\n/**\n * A component for selecting a day of a month\n */\nexport const DayPicker = ({\n  displayedMonth,\n                            selected,\n                            start,\n                            end,\n                            onChange = noop,\n                            weekStart = 'monday',\n                            markToday = true,\n                            className = ''\n                          }: DayPickerProps) => {\n  const locale = useLocale()\n  const month = displayedMonth.getMonth()\n  const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart)\n\n  return (\n    <div className={clsx('col gap-y-1 min-w-[220px] select-none', className)}>\n      <div className=\"row text-center\">\n        {weeks[0]!.map((weekDay, index) => (\n          <div key={index} className=\"flex-1 font-semibold\">\n            {new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(weekDay).substring(0, 2)}\n          </div>\n        ))}\n      </div>\n      {weeks.map((week, index) => (\n        <div key={index} className=\"row text-center\">\n          {week.map((date) => {\n            const isSelected = !!selected && equalDate(selected, date)\n            const isToday = equalDate(new Date(), date)\n            const isSameMonth = date.getMonth() === month\n            const isDayValid = isInTimeSpan(date, start, end)\n            return (\n              <button\n                disabled={!isDayValid}\n                key={date.getDate()}\n                className={clsx(\n                  'flex-1 rounded-full border-2 border-transparent shadow-sm',\n                  {\n                    'text-gray-700 bg-gray-100': !isSameMonth && isDayValid,\n                    'text-black bg-white': !isSelected && isSameMonth && isDayValid,\n                    'text-on-primary bg-primary': isSelected,\n                    'border-black': isToday && markToday,\n                    'hover:brightness-90 hover:bg-primary hover:text-on-primary': isDayValid,\n                    'text-disabled-text bg-disabled-background': !isDayValid\n                  }\n                )}\n                onClick={() => onChange(date)}\n              >\n                {date.getDate()}\n              </button>\n            )\n          })}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport const DayPickerControlled = ({ displayedMonth, onChange = noop, ...restProps }: DayPickerProps) => {\n  const [date, setDate] = useState(displayedMonth)\n\n  useEffect(() => setDate(displayedMonth), [displayedMonth])\n\n  return (\n    <DayPicker\n      displayedMonth={date}\n      onChange={newDate => {\n        setDate(newDate)\n        onChange(newDate)\n      }}\n      {...restProps}\n    />\n  )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport useLocalStorage from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n  language: Languages,\n  setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n  const { language } = useLanguage()\n  const mapping: Record<Languages, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n  initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n  const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if(language !== initialLanguage && initialLanguage){\n      console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const languagesToTestAgainst = Object.values(languages)\n\n    const matchingBrowserLanguages = window.navigator.languages\n      .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguages.length === 0) return\n\n    const firstMatch = matchingBrowserLanguages[0] as Languages\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nconst useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}\n\nexport default useLocalStorage\n"],"mappings":"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","names":["date","useEffect","useState","useEffect","useState","jsx"]}

package/dist/components/date/TimePicker.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MinuteIncrement = '1min' | '5min' | '10min' | '15min' | '30min';
+type TimePickerProps = {
+    time?: Date;
+    onChange?: (time: Date) => void;
+    is24HourFormat?: boolean;
+    minuteIncrement?: MinuteIncrement;
+    maxHeight?: number;
+    className?: string;
+};
+declare const TimePicker: ({ time, onChange, is24HourFormat, minuteIncrement, maxHeight, className }: TimePickerProps) => react_jsx_runtime.JSX.Element;
+declare const ControlledTimePicker: ({ time, onChange, ...props }: TimePickerProps) => react_jsx_runtime.JSX.Element;
+
+export { ControlledTimePicker, TimePicker, type TimePickerProps };

package/dist/components/date/TimePicker.d.ts

@@ -1,5 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
 type MinuteIncrement = '1min' | '5min' | '10min' | '15min' | '30min';
-export type TimePickerProps = {
+type TimePickerProps = {
     time?: Date;
     onChange?: (time: Date) => void;
     is24HourFormat?: boolean;
@@ -7,6 +9,7 @@ export type TimePickerProps = {
     maxHeight?: number;
     className?: string;
 };
-export declare const TimePicker: ({ time, onChange, is24HourFormat, minuteIncrement, maxHeight, className }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ControlledTimePicker: ({ time, onChange, ...props }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const TimePicker: ({ time, onChange, is24HourFormat, minuteIncrement, maxHeight, className }: TimePickerProps) => react_jsx_runtime.JSX.Element;
+declare const ControlledTimePicker: ({ time, onChange, ...props }: TimePickerProps) => react_jsx_runtime.JSX.Element;
+
+export { ControlledTimePicker, TimePicker, type TimePickerProps };

package/dist/components/date/TimePicker.js

@@ -1,79 +1,200 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { Scrollbars } from 'react-custom-scrollbars-2';
-import { noop } from '../../util/noop';
-import { closestMatch, range } from '../../util/array';
-import clsx from 'clsx';
-export const TimePicker = ({ time = 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);
-    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]); // eslint-disable-line
-    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]); // eslint-disable-line
-    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;
+"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/date/TimePicker.tsx
+var TimePicker_exports = {};
+__export(TimePicker_exports, {
+  ControlledTimePicker: () => ControlledTimePicker,
+  TimePicker: () => TimePicker
+});
+module.exports = __toCommonJS(TimePicker_exports);
+var import_react = require("react");
+var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/util/array.ts
+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`);
     }
-    const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()));
-    const style = (selected) => clsx('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 [];
+  }
+  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/components/date/TimePicker.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var TimePicker = ({
+  time = /* @__PURE__ */ new Date(),
+  onChange = noop,
+  is24HourFormat = true,
+  minuteIncrement = "5min",
+  maxHeight = 300,
+  className = ""
+}) => {
+  const minuteRef = (0, import_react.useRef)(null);
+  const hourRef = (0, import_react.useRef)(null);
+  const isPM = time.getHours() >= 11;
+  const hours = is24HourFormat ? range(0, 23) : range(1, 12);
+  let minutes = range(0, 59);
+  (0, import_react.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_react.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"
+          });
+        }
+      }
     };
-    return (_jsxs("div", { className: clsx('row gap-x-2 w-fit min-w-[150px] select-none', className), children: [_jsx(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: '100%' }, children: _jsx("div", { className: "col gap-y-1 h-full", children: hours.map(hour => {
-                        const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-                        return (_jsx("button", { ref: currentHour ? hourRef : undefined, className: style(currentHour), onClick: () => onChangeWrapper(newDate => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0))), children: hour.toString().padStart(2, '0') }, hour));
-                    }) }) }), _jsx(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: '100%' }, children: _jsx("div", { className: "col gap-y-1 h-full", children: minutes.map(minute => {
-                        const currentMinute = minute === closestMinute;
-                        return (_jsx("button", { ref: currentMinute ? minuteRef : undefined, className: style(currentMinute), onClick: () => onChangeWrapper(newDate => newDate.setMinutes(minute)), children: minute.toString().padStart(2, '0') }, minute + minuteIncrement));
-                    }) }) }), !is24HourFormat && (_jsxs("div", { className: "col gap-y-1", children: [_jsx("button", { className: style(!isPM), onClick: () => onChangeWrapper(newDate => isPM && newDate.setHours(newDate.getHours() - 12)), children: "AM" }), _jsx("button", { className: style(isPM), onClick: () => onChangeWrapper(newDate => !isPM && newDate.setHours(newDate.getHours() + 12)), children: "PM" })] }))] }));
+    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_clsx.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_runtime.jsxs)("div", { className: (0, import_clsx.default)("row gap-x-2 w-fit min-w-[150px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
+      const currentMinute = minute === closestMinute;
+      return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)("div", { className: "col gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: style(!isPM),
+          onClick: () => onChangeWrapper((newDate) => isPM && newDate.setHours(newDate.getHours() - 12)),
+          children: "AM"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: style(isPM),
+          onClick: () => onChangeWrapper((newDate) => !isPM && newDate.setHours(newDate.getHours() + 12)),
+          children: "PM"
+        }
+      )
+    ] })
+  ] });
 };
-export const ControlledTimePicker = ({ time, onChange = noop, ...props }) => {
-    const [value, setValue] = useState(time);
-    useEffect(() => setValue(time), [time]);
-    return (_jsx(TimePicker, { ...props, time: value, onChange: time1 => {
-            setValue(time1);
-            onChange(time1);
-        } }));
+var ControlledTimePicker = ({
+  time,
+  onChange = noop,
+  ...props
+}) => {
+  const [value, setValue] = (0, import_react.useState)(time);
+  (0, import_react.useEffect)(() => setValue(time), [time]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    TimePicker,
+    {
+      ...props,
+      time: value,
+      onChange: (time1) => {
+        setValue(time1);
+        onChange(time1);
+      }
+    }
+  );
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ControlledTimePicker,
+  TimePicker
+});
+//# sourceMappingURL=TimePicker.js.map

package/dist/components/date/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/date/TimePicker.tsx","../../../src/util/noop.ts","../../../src/util/array.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '../../util/noop'\nimport { closestMatch, range } from '../../util/array'\nimport clsx from 'clsx'\n\ntype MinuteIncrement = '1min' | '5min' | '10min' | '15min' | '30min'\n\nexport type TimePickerProps = {\n  time?: Date,\n  onChange?: (time: Date) => void,\n  is24HourFormat?: boolean,\n  minuteIncrement?: MinuteIncrement,\n  maxHeight?: number,\n  className?: string,\n}\n\nexport const TimePicker = ({\n  time = new Date(),\n  onChange = noop,\n  is24HourFormat = true,\n  minuteIncrement = '5min',\n  maxHeight = 300,\n  className = ''\n}: TimePickerProps) => {\n  const minuteRef = useRef<HTMLButtonElement>(null)\n  const hourRef = useRef<HTMLButtonElement>(null)\n\n  const isPM = time.getHours() >= 11\n  const hours = is24HourFormat ? range(0, 23) : range(1, 12)\n  let minutes = range(0, 59)\n\n  useEffect(() => {\n    const scrollToItem = () => {\n      if (minuteRef.current) {\n        const container = minuteRef.current.parentElement!\n\n        const hasOverflow = container.scrollHeight > maxHeight\n        if (hasOverflow) {\n          minuteRef.current.scrollIntoView({\n            behavior: 'instant',\n            block: 'nearest',\n          })\n        }\n      }\n    }\n    scrollToItem()\n  }, [minuteRef, minuteRef.current]) // eslint-disable-line\n\n  useEffect(() => {\n    const scrollToItem = () => {\n      if (hourRef.current) {\n        const container = hourRef.current.parentElement!\n\n        const hasOverflow = container.scrollHeight > maxHeight\n        if (hasOverflow) {\n          hourRef.current.scrollIntoView({\n            behavior: 'instant',\n            block: 'nearest',\n          })\n        }\n      }\n    }\n    scrollToItem()\n  }, [hourRef, hourRef.current]) // eslint-disable-line\n\n  switch (minuteIncrement) {\n    case '5min':\n      minutes = minutes.filter(value => value % 5 === 0)\n      break\n    case '10min':\n      minutes = minutes.filter(value => value % 10 === 0)\n      break\n    case '15min':\n      minutes = minutes.filter(value => value % 15 === 0)\n      break\n    case '30min':\n      minutes = minutes.filter(value => value % 30 === 0)\n      break\n  }\n\n  const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()))\n\n  const style = (selected: boolean) => clsx('chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3',\n    { 'bg-primary text-on-primary': selected, 'bg-white text-black': !selected })\n\n  const onChangeWrapper = (transformer: (newDate: Date) => void) => {\n    const newDate = new Date(time)\n    transformer(newDate)\n    onChange(newDate)\n  }\n\n  return (\n    <div className={clsx('row gap-x-2 w-fit min-w-[150px] select-none', className)}>\n      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n        <div className=\"col gap-y-1 h-full\">\n          {hours.map(hour => {\n            const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0)\n            return (\n              <button\n                key={hour}\n                ref={currentHour ? hourRef : undefined}\n                className={style(currentHour)}\n                onClick={() => onChangeWrapper(newDate => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0)))}\n              >\n                {hour.toString().padStart(2, '0')}\n              </button>\n            )\n          })}\n        </div>\n      </Scrollbars>\n      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n        <div className=\"col gap-y-1 h-full\">\n          {minutes.map(minute => {\n            const currentMinute = minute === closestMinute\n            return (\n              <button\n                key={minute + minuteIncrement} // minute increment so that scroll works\n                ref={currentMinute ? minuteRef : undefined}\n                className={style(currentMinute)}\n                onClick={() => onChangeWrapper(newDate => newDate.setMinutes(minute))}\n              >\n                {minute.toString().padStart(2, '0')}\n              </button>\n            )\n          })}\n        </div>\n      </Scrollbars>\n      {!is24HourFormat && (\n        <div className=\"col gap-y-1\">\n          <button\n            className={style(!isPM)}\n            onClick={() => onChangeWrapper(newDate => isPM && newDate.setHours(newDate.getHours() - 12))}\n          >\n            AM\n          </button>\n          <button\n            className={style(isPM)}\n            onClick={() => onChangeWrapper(newDate => !isPM && newDate.setHours(newDate.getHours() + 12))}\n          >\n            PM\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ControlledTimePicker = ({\n                                    time,\n                                    onChange = noop,\n                                    ...props\n                                  }: TimePickerProps) => {\n  const [value, setValue] = useState(time)\n  useEffect(() => setValue(time), [time])\n\n  return (\n    <TimePicker\n      {...props}\n      time={value}\n      onChange={time1 => {\n        setValue(time1)\n        onChange(time1)\n      }}\n    />\n  )\n}\n","export const noop = () => undefined\n","export const equalSizeGroups = <T >(array: T[], groupSize: number): T[][] => {\n  if (groupSize <= 0) {\n    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n    return [[...array]]\n  }\n\n  const groups = []\n  for (let i = 0; i < array.length; i += groupSize) {\n    groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n  }\n  return groups\n}\n\n/**\n * @param start\n * @param end inclusive\n * @param allowEmptyRange Whether the range can be defined empty via end < start\n */\nexport const range = (start: number, end: number, allowEmptyRange: boolean = false): number[] => {\n  if (end < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start + 1 }, (_, index) => index + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = <T >(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n  return list.reduce((item1, item2) => {\n    return firstCloser(item1, item2) ? item1 : item2\n  })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = <T >(list: T[], item: T, neighbourDistance: number = 2) => {\n  const index = list.indexOf(item)\n  const totalItems = neighbourDistance * 2 + 1\n  if (list.length < totalItems) {\n    console.warn('List is to short')\n    return list\n  }\n\n  if (index === -1) {\n    console.error('item not found in list')\n    return list.splice(0, totalItems)\n  }\n\n  let start = index - neighbourDistance\n  if (start < 0) {\n    start += list.length\n  }\n  const end = (index + neighbourDistance + 1) % list.length\n\n  const result: T[] = []\n  let ignoreOnce = list.length === totalItems\n  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n    result.push(list[i]!)\n    if (end === i && ignoreOnce) {\n      ignoreOnce = false\n    }\n  }\n  return result\n}\n\nexport const createLoopingListWithIndex = <T >(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  if (length < 0) {\n    console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n  } else if (length === 0) {\n    length = list.length\n  }\n\n  const returnList: [number, T][] = []\n\n  if (forwards) {\n    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n      returnList.push([i, list[i]!])\n    }\n  } else {\n    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n      returnList.push([i, list[i]!])\n    }\n  }\n\n  return returnList\n}\n\nexport const createLoopingList = <T >(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n  unique: <T>(list: T[]): T[] => {\n    const seen = new Set<T>()\n    return list.filter((item) => {\n      if (seen.has(item)) {\n        return false\n      }\n      seen.add(item)\n      return true\n    })\n  },\n\n  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  }\n}\n"],"mappings":"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","names":["clsx"]}