@minicalendar/react 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type IsoDate = `${number}-${number}-${number}`;
+type GetDateTimes = (start: IsoDate, end: IsoDate) => Promise<string[]>;
+interface Options {
+    zone?: string;
+}
+declare function createCachedGetDateTimes(getDateTimes: GetDateTimes, options: Options): GetDateTimes;
+
+interface DateSelectorOptions {
+    lastDate?: string;
+}
+interface DateSelectorProps {
+    setDate: (value: IsoDate | null) => void;
+    getDateTimes: GetDateTimes;
+    options?: DateSelectorOptions;
+}
+declare function DateSelector(props: DateSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface DateTimeSelectorOptions {
+    date?: DateSelectorOptions;
+}
+interface DateTimeSelectorProps {
+    dateTime: string | null;
+    setDateTime: (value: string | null) => void;
+    getDateTimes: GetDateTimes;
+    options?: DateTimeSelectorOptions;
+}
+declare function DateTimeSelector(props: DateTimeSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface TimeSelectorProps {
+    date: IsoDate;
+    dateTime: string | null;
+    setDateTime: (value: string | null) => void;
+    getDateTimes: GetDateTimes;
+}
+declare function TimeSelector(props: TimeSelectorProps): react_jsx_runtime.JSX.Element;
+
+export { DateSelector, type DateSelectorProps, DateTimeSelector, type DateTimeSelectorProps, type GetDateTimes, type IsoDate, TimeSelector, type TimeSelectorProps, createCachedGetDateTimes };

package/dist/index.js

@@ -0,0 +1,283 @@
+// src/DateSelector.tsx
+import { useState, useMemo, useEffect } from "react";
+import { DateTime } from "luxon";
+import { jsx, jsxs } from "react/jsx-runtime";
+var countToClass = (count, max, selected) => {
+  if (selected) return "mncl-button mncl-button--selected";
+  if (count == 0) return "mncl-button mncl-button--default";
+  if (count < max * 0.2) return "mncl-button mncl-button--low";
+  if (count < max * 0.5) return "mncl-button mncl-button--medium";
+  else return "mncl-button mncl-button--high";
+};
+function DateSelector(props) {
+  const { setDate, getDateTimes, options } = props;
+  const [dateTimes, setDateTimes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [day, setDay] = useState(null);
+  const [month, setMonth] = useState((/* @__PURE__ */ new Date()).getMonth() + 1);
+  const [year, setYear] = useState((/* @__PURE__ */ new Date()).getFullYear());
+  const today = useMemo(() => DateTime.now(), []);
+  const datetime = useMemo(() => DateTime.fromObject({ year, month }), [year, month]);
+  const monthStartDay = useMemo(() => datetime.startOf("month").weekday, [datetime]);
+  const daysInMonth = useMemo(() => datetime.daysInMonth || 0, [datetime]);
+  const countsByDay = useMemo(
+    () => dateTimes.reduce((acc, dateTime) => {
+      const { day: day2 } = DateTime.fromISO(dateTime);
+      acc[day2] = (acc[day2] ?? 0) + 1;
+      return acc;
+    }, {}),
+    [dateTimes]
+  );
+  const maxCount = useMemo(
+    () => Object.values(countsByDay).reduce((prev, current) => Math.max(prev, current), 0),
+    [countsByDay]
+  );
+  const canGoBack = useMemo(() => today.toMillis() < datetime.startOf("month").toMillis(), [today, datetime]);
+  const canGoForward = useMemo(
+    () => options?.lastDate ? DateTime.fromISO(options.lastDate).toMillis() > datetime.endOf("month").toMillis() : true,
+    [options?.lastDate, datetime]
+  );
+  const prevMonth = () => {
+    if (month == 1) {
+      setMonth(12);
+      setYear((prev) => prev - 1);
+    } else {
+      setMonth((prev) => prev - 1);
+    }
+    setDay(null);
+  };
+  const nextMonth = () => {
+    if (month == 12) {
+      setMonth(1);
+      setYear((prev) => prev + 1);
+    } else {
+      setMonth((prev) => prev + 1);
+    }
+    setDay(null);
+  };
+  useEffect(() => {
+    setLoading(true);
+    setDateTimes([]);
+    const start = datetime.startOf("month").toISODate();
+    const end = datetime.endOf("month").toISODate();
+    getDateTimes(start, end).then((datetimes_) => {
+      setDateTimes(datetimes_);
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [datetime]);
+  useEffect(() => {
+    if (!day) setDate(null);
+    else {
+      setDate(DateTime.fromObject({ year, month, day }).toISODate());
+    }
+  }, [year, month, day]);
+  return /* @__PURE__ */ jsxs("div", { className: "mncl-date-selector", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mncl-date-selector__head", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous month",
+          className: `mncl-button mncl-button--accent`,
+          onClick: prevMonth,
+          disabled: !canGoBack,
+          children: "Back"
+        }
+      ),
+      /* @__PURE__ */ jsx("h2", { className: "mncl-h2", children: datetime.toFormat("LLLL yyyy") }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next month",
+          className: `mncl-button mncl-button--accent`,
+          onClick: nextMonth,
+          disabled: !canGoForward,
+          children: "Next"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mncl-date-selector__grid", children: [
+      ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"].map((day2) => /* @__PURE__ */ jsx("p", { children: day2 }, day2)),
+      Array.from({ length: monthStartDay - 1 }, (_, i) => i).map((_, i) => /* @__PURE__ */ jsx("div", { className: "mncl-ignore" }, i)),
+      Array.from({ length: daysInMonth }, (_, i) => i + 1).map((day_, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": day == day_,
+          className: countToClass(countsByDay[day_] ?? 0, maxCount, day == day_),
+          onClick: () => setDay(day_),
+          disabled: !countsByDay[day_],
+          children: day_
+        },
+        `${day_}-${month}-${year}`
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mncl-date-selector__foot", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "mncl-indicator mncl-indicator--high" }),
+        /* @__PURE__ */ jsx("p", { children: "High availability" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "mncl-indicator mncl-indicator--medium" }),
+        /* @__PURE__ */ jsx("p", { children: "Medium availability" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "mncl-indicator mncl-indicator--low" }),
+        /* @__PURE__ */ jsx("p", { children: "Low availability" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "mncl-indicator mncl-indicator--no" }),
+        /* @__PURE__ */ jsx("p", { children: "No availability" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/DateTimeSelector.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DateTimeSelector(props) {
+  const { dateTime, setDateTime, getDateTimes, options } = props;
+  const [date, setDate] = useState2(null);
+  useEffect2(() => {
+    setDateTime(null);
+  }, [date]);
+  return /* @__PURE__ */ jsxs2("div", { className: "mncl-datetime-selector", children: [
+    /* @__PURE__ */ jsx2(DateSelector, { setDate, getDateTimes, options: options?.date }),
+    date && /* @__PURE__ */ jsx2(TimeSelector, { date, dateTime, setDateTime, getDateTimes })
+  ] });
+}
+
+// src/TimeSelector.tsx
+import { DateTime as DateTime2 } from "luxon";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function TimeSelector(props) {
+  const { date, dateTime, setDateTime, getDateTimes } = props;
+  const [dateTimes, setDateTimes] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  useEffect3(() => {
+    setLoading(true);
+    setDateTimes([]);
+    getDateTimes(date, date).then((datetimes_) => {
+      setDateTimes(datetimes_);
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [date]);
+  return /* @__PURE__ */ jsxs3("div", { className: "mncl-time-selector", children: [
+    /* @__PURE__ */ jsx3("div", { className: "mncl-time-selector__head", children: /* @__PURE__ */ jsxs3("h2", { className: "mncl-h2", children: [
+      "Select time on ",
+      DateTime2.fromISO(date).toFormat("d LLLL yyyy")
+    ] }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "mncl-time-selector__grid", children: [
+      loading && /* @__PURE__ */ jsx3("p", { children: "Loading..." }),
+      dateTimes.map((dateTime_) => /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: `mncl-button mncl-button--${dateTime_ == dateTime ? "selected" : "default"}`,
+          onClick: () => setDateTime(dateTime_),
+          children: DateTime2.fromISO(dateTime_).toFormat("HH:mm")
+        },
+        dateTime_
+      ))
+    ] })
+  ] });
+}
+
+// src/createCachedGetDateTimes.ts
+import { DateTime as DateTime3 } from "luxon";
+function createCachedGetDateTimes(getDateTimes, options) {
+  const zone = options?.zone;
+  const byDay = /* @__PURE__ */ new Map();
+  const inFlight = /* @__PURE__ */ new Map();
+  const toDayKey = (iso) => DateTime3.fromISO(iso, { zone }).toISODate();
+  const listDays = (start, end) => {
+    const s = DateTime3.fromISO(start, { zone }).startOf("day");
+    const e = DateTime3.fromISO(end, { zone }).startOf("day");
+    const out = [];
+    for (let d = s; d < e; d = d.plus({ days: 1 })) out.push(d.toISODate());
+    return out;
+  };
+  const uniqueSorted = (arr) => Array.from(new Set(arr)).sort();
+  const markKnownEmpty = (start, end) => {
+    for (const day of listDays(start, end)) {
+      if (!byDay.has(day)) byDay.set(day, []);
+    }
+  };
+  const bucket = (isos) => {
+    for (const iso of isos) {
+      const day = toDayKey(iso);
+      const arr = byDay.get(day);
+      if (arr) arr.push(iso);
+      else byDay.set(day, [iso]);
+    }
+  };
+  async function fetchSegment(segStart, segEnd) {
+    console.log(segStart, segEnd);
+    const key = `${segStart}|${segEnd}`;
+    if (!inFlight.has(key)) {
+      inFlight.set(
+        key,
+        (async () => {
+          const dtIsos = await getDateTimes(segStart, segEnd);
+          markKnownEmpty(segStart, segEnd);
+          bucket(dtIsos);
+        })().finally(() => {
+          inFlight.delete(key);
+        })
+      );
+    }
+    await inFlight.get(key);
+  }
+  async function ensureCached(start, end) {
+    const days = listDays(start, end);
+    const unknown = days.filter((d) => !byDay.has(d));
+    if (unknown.length === 0) return;
+    let segStart = null;
+    let prev = null;
+    const flush = async () => {
+      if (!segStart || !prev) return;
+      const segEnd = prev.plus({ days: 1 }).toISODate();
+      await fetchSegment(segStart, segEnd);
+      segStart = null;
+      prev = null;
+    };
+    for (const day of unknown) {
+      const dt = DateTime3.fromISO(day, { zone }).startOf("day");
+      if (!segStart) {
+        segStart = day;
+        prev = dt;
+        continue;
+      }
+      const expectedNext = prev.plus({ days: 1 }).toISODate();
+      if (expectedNext !== day) {
+        await flush();
+        segStart = day;
+        prev = dt;
+      } else {
+        prev = dt;
+      }
+    }
+    await flush();
+  }
+  return async (start, end) => {
+    const endExclusive = DateTime3.fromISO(end, { zone }).plus({ days: 1 }).toISODate();
+    await ensureCached(start, endExclusive);
+    const out = [];
+    for (const day of listDays(start, endExclusive)) {
+      out.push(...byDay.get(day) ?? []);
+    }
+    return uniqueSorted(out);
+  };
+}
+export {
+  DateSelector,
+  DateTimeSelector,
+  TimeSelector,
+  createCachedGetDateTimes
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DateSelector.tsx","../src/DateTimeSelector.tsx","../src/TimeSelector.tsx","../src/createCachedGetDateTimes.ts"],"sourcesContent":["import { useState, useMemo, useEffect } from \"react\"\r\nimport { DateTime } from \"luxon\"\r\nimport { GetDateTimes, IsoDate } from \"./createCachedGetDateTimes\"\r\n\r\nconst countToClass = (count: number, max: number, selected: boolean) => {\r\n    if (selected) return \"mncl-button mncl-button--selected\"\r\n    if (count == 0) return \"mncl-button mncl-button--default\" // also gets disabled\r\n    if (count < max * 0.2) return \"mncl-button mncl-button--low\"\r\n    if (count < max * 0.5) return \"mncl-button mncl-button--medium\"\r\n    else return \"mncl-button mncl-button--high\"\r\n}\r\n\r\nexport interface DateSelectorOptions {\r\n    lastDate?: string\r\n}\r\n\r\nexport interface DateSelectorProps {\r\n    setDate: (value: IsoDate | null) => void\r\n    getDateTimes: GetDateTimes\r\n    options?: DateSelectorOptions\r\n}\r\n\r\nexport function DateSelector(props: DateSelectorProps) {\r\n    const { setDate, getDateTimes, options } = props\r\n\r\n    const [dateTimes, setDateTimes] = useState<string[]>([])\r\n    const [loading, setLoading] = useState<boolean>(true)\r\n\r\n    const [day, setDay] = useState<number | null>(null)\r\n    const [month, setMonth] = useState<number>(new Date().getMonth() + 1)\r\n    const [year, setYear] = useState<number>(new Date().getFullYear())\r\n\r\n    const today = useMemo(() => DateTime.now(), [])\r\n\r\n    const datetime = useMemo(() => DateTime.fromObject({ year, month }), [year, month])\r\n    const monthStartDay = useMemo(() => datetime.startOf(\"month\").weekday, [datetime])\r\n    const daysInMonth = useMemo(() => datetime.daysInMonth || 0, [datetime])\r\n\r\n    const countsByDay = useMemo(\r\n        () =>\r\n            dateTimes.reduce<Record<number, number>>((acc, dateTime) => {\r\n                const { day } = DateTime.fromISO(dateTime)\r\n                acc[day] = (acc[day] ?? 0) + 1\r\n                return acc\r\n            }, {}),\r\n        [dateTimes],\r\n    )\r\n    const maxCount = useMemo(\r\n        () => Object.values(countsByDay).reduce((prev, current) => Math.max(prev, current), 0),\r\n        [countsByDay],\r\n    )\r\n\r\n    const canGoBack = useMemo(() => today.toMillis() < datetime.startOf(\"month\").toMillis(), [today, datetime])\r\n    const canGoForward = useMemo(\r\n        () =>\r\n            options?.lastDate\r\n                ? DateTime.fromISO(options.lastDate).toMillis() > datetime.endOf(\"month\").toMillis()\r\n                : true,\r\n        [options?.lastDate, datetime],\r\n    )\r\n\r\n    const prevMonth = () => {\r\n        if (month == 1) {\r\n            setMonth(12)\r\n            setYear((prev) => prev - 1)\r\n        } else {\r\n            setMonth((prev) => prev - 1)\r\n        }\r\n        setDay(null)\r\n    }\r\n\r\n    const nextMonth = () => {\r\n        if (month == 12) {\r\n            setMonth(1)\r\n            setYear((prev) => prev + 1)\r\n        } else {\r\n            setMonth((prev) => prev + 1)\r\n        }\r\n        setDay(null)\r\n    }\r\n\r\n    useEffect(() => {\r\n        setLoading(true)\r\n        setDateTimes([])\r\n\r\n        const start = datetime.startOf(\"month\").toISODate() as IsoDate\r\n        const end = datetime.endOf(\"month\").toISODate() as IsoDate\r\n\r\n        getDateTimes(start, end)\r\n            .then((datetimes_) => {\r\n                setDateTimes(datetimes_)\r\n            })\r\n            .finally(() => {\r\n                setLoading(false)\r\n            })\r\n    }, [datetime])\r\n\r\n    useEffect(() => {\r\n        if (!day) setDate(null)\r\n        else {\r\n            setDate(DateTime.fromObject({ year, month, day }).toISODate() as IsoDate)\r\n        }\r\n    }, [year, month, day])\r\n\r\n    return (\r\n        <div className=\"mncl-date-selector\">\r\n            <div className=\"mncl-date-selector__head\">\r\n                <button\r\n                    type=\"button\"\r\n                    aria-label=\"Previous month\"\r\n                    className={`mncl-button mncl-button--accent`}\r\n                    onClick={prevMonth}\r\n                    disabled={!canGoBack}\r\n                >\r\n                    Back\r\n                </button>\r\n                <h2 className=\"mncl-h2\">{datetime.toFormat(\"LLLL yyyy\")}</h2>\r\n                <button\r\n                    type=\"button\"\r\n                    aria-label=\"Next month\"\r\n                    className={`mncl-button mncl-button--accent`}\r\n                    onClick={nextMonth}\r\n                    disabled={!canGoForward}\r\n                >\r\n                    Next\r\n                </button>\r\n            </div>\r\n            <div className=\"mncl-date-selector__grid\">\r\n                {[\"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\", \"SAT\", \"SUN\"].map((day) => (\r\n                    <p key={day}>{day}</p>\r\n                ))}\r\n                {Array.from({ length: monthStartDay - 1 }, (_, i) => i).map((_, i) => (\r\n                    <div className=\"mncl-ignore\" key={i}></div>\r\n                ))}\r\n                {Array.from({ length: daysInMonth }, (_, i) => i + 1).map((day_, i) => (\r\n                    <button\r\n                        type=\"button\"\r\n                        aria-pressed={day == day_}\r\n                        key={`${day_}-${month}-${year}`}\r\n                        className={countToClass(countsByDay[day_] ?? 0, maxCount, day == day_)}\r\n                        onClick={() => setDay(day_)}\r\n                        disabled={!countsByDay[day_]}\r\n                    >\r\n                        {day_}\r\n                    </button>\r\n                ))}\r\n            </div>\r\n            <div className=\"mncl-date-selector__foot\">\r\n                <div>\r\n                    <span className=\"mncl-indicator mncl-indicator--high\"></span>\r\n                    <p>High availability</p>\r\n                </div>\r\n                <div>\r\n                    <span className=\"mncl-indicator mncl-indicator--medium\"></span>\r\n                    <p>Medium availability</p>\r\n                </div>\r\n                <div>\r\n                    <span className=\"mncl-indicator mncl-indicator--low\"></span>\r\n                    <p>Low availability</p>\r\n                </div>\r\n                <div>\r\n                    <span className=\"mncl-indicator mncl-indicator--no\"></span>\r\n                    <p>No availability</p>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n","import React, { useEffect, useState } from \"react\"\r\nimport { DateSelector, IsoDate, TimeSelector, type GetDateTimes } from \"./\"\r\nimport { DateSelectorOptions } from \"./DateSelector\"\r\n\r\ninterface DateTimeSelectorOptions {\r\n    date?: DateSelectorOptions\r\n}\r\n\r\nexport interface DateTimeSelectorProps {\r\n    dateTime: string | null\r\n    setDateTime: (value: string | null) => void\r\n    getDateTimes: GetDateTimes\r\n    options?: DateTimeSelectorOptions\r\n}\r\n\r\nexport function DateTimeSelector(props: DateTimeSelectorProps) {\r\n    const { dateTime, setDateTime, getDateTimes, options } = props\r\n\r\n    const [date, setDate] = useState<IsoDate | null>(null)\r\n\r\n    useEffect(() => {\r\n        setDateTime(null)\r\n    }, [date])\r\n\r\n    return (\r\n        <div className=\"mncl-datetime-selector\">\r\n            <DateSelector setDate={setDate} getDateTimes={getDateTimes} options={options?.date} />\r\n            {date && (\r\n                <TimeSelector date={date} dateTime={dateTime} setDateTime={setDateTime} getDateTimes={getDateTimes} />\r\n            )}\r\n        </div>\r\n    )\r\n}\r\n","import { DateTime } from \"luxon\"\r\nimport { GetDateTimes, IsoDate } from \"./createCachedGetDateTimes\"\r\nimport { useEffect, useState } from \"react\"\r\n\r\nexport interface TimeSelectorProps {\r\n    date: IsoDate\r\n    dateTime: string | null\r\n    setDateTime: (value: string | null) => void\r\n    getDateTimes: GetDateTimes\r\n}\r\n\r\nexport function TimeSelector(props: TimeSelectorProps) {\r\n    const { date, dateTime, setDateTime, getDateTimes } = props\r\n\r\n    const [dateTimes, setDateTimes] = useState<string[]>([])\r\n    const [loading, setLoading] = useState<boolean>(true)\r\n\r\n    useEffect(() => {\r\n        setLoading(true)\r\n        setDateTimes([])\r\n\r\n        getDateTimes(date, date)\r\n            .then((datetimes_) => {\r\n                setDateTimes(datetimes_)\r\n            })\r\n            .finally(() => {\r\n                setLoading(false)\r\n            })\r\n    }, [date])\r\n\r\n    return (\r\n        <div className=\"mncl-time-selector\">\r\n            <div className=\"mncl-time-selector__head\">\r\n                <h2 className=\"mncl-h2\">Select time on {DateTime.fromISO(date).toFormat(\"d LLLL yyyy\")}</h2>\r\n            </div>\r\n            <div className=\"mncl-time-selector__grid\">\r\n                {loading && <p>Loading...</p>}\r\n                {dateTimes.map((dateTime_) => (\r\n                    <button\r\n                        type=\"button\"\r\n                        key={dateTime_}\r\n                        className={`mncl-button mncl-button--${dateTime_ == dateTime ? \"selected\" : \"default\"}`}\r\n                        onClick={() => setDateTime(dateTime_)}\r\n                    >\r\n                        {DateTime.fromISO(dateTime_).toFormat(\"HH:mm\")}\r\n                    </button>\r\n                ))}\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n","import { DateTime } from \"luxon\"\r\n\r\nexport type IsoDate = `${number}-${number}-${number}`\r\nexport type GetDateTimes = (start: IsoDate, end: IsoDate) => Promise<string[]>\r\n\r\ninterface Options {\r\n    zone?: string\r\n}\r\n\r\nexport function createCachedGetDateTimes(getDateTimes: GetDateTimes, options: Options): GetDateTimes {\r\n    const zone = options?.zone\r\n\r\n    const byDay = new Map<IsoDate, string[]>()\r\n    const inFlight = new Map<string, Promise<void>>()\r\n\r\n    const toDayKey = (iso: string) => DateTime.fromISO(iso, { zone }).toISODate() as IsoDate\r\n\r\n    const listDays = (start: IsoDate, end: IsoDate): IsoDate[] => {\r\n        const s = DateTime.fromISO(start, { zone }).startOf(\"day\")\r\n        const e = DateTime.fromISO(end, { zone }).startOf(\"day\")\r\n        const out: IsoDate[] = []\r\n        for (let d = s; d < e; d = d.plus({ days: 1 })) out.push(d.toISODate() as IsoDate)\r\n        return out\r\n    }\r\n\r\n    const uniqueSorted = (arr: string[]) => Array.from(new Set(arr)).sort()\r\n\r\n    const markKnownEmpty = (start: IsoDate, end: IsoDate) => {\r\n        for (const day of listDays(start, end)) {\r\n            if (!byDay.has(day)) byDay.set(day, [])\r\n        }\r\n    }\r\n\r\n    const bucket = (isos: string[]) => {\r\n        for (const iso of isos) {\r\n            const day = toDayKey(iso)\r\n            const arr = byDay.get(day)\r\n            if (arr) arr.push(iso)\r\n            else byDay.set(day, [iso])\r\n        }\r\n    }\r\n\r\n    async function fetchSegment(segStart: IsoDate, segEnd: IsoDate) {\r\n        console.log(segStart, segEnd)\r\n        const key = `${segStart}|${segEnd}`\r\n        if (!inFlight.has(key)) {\r\n            inFlight.set(\r\n                key,\r\n                (async () => {\r\n                    const dtIsos = await getDateTimes(segStart, segEnd)\r\n                    markKnownEmpty(segStart, segEnd)\r\n                    bucket(dtIsos)\r\n                })().finally(() => {\r\n                    inFlight.delete(key)\r\n                }),\r\n            )\r\n        }\r\n        await inFlight.get(key)!\r\n    }\r\n\r\n    async function ensureCached(start: IsoDate, end: IsoDate) {\r\n        const days = listDays(start, end)\r\n        const unknown = days.filter((d) => !byDay.has(d))\r\n\r\n        if (unknown.length === 0) return\r\n\r\n        let segStart: IsoDate | null = null\r\n        let prev: DateTime | null = null\r\n\r\n        const flush = async () => {\r\n            if (!segStart || !prev) return\r\n            const segEnd = prev.plus({ days: 1 }).toISODate() as IsoDate\r\n            await fetchSegment(segStart, segEnd)\r\n            segStart = null\r\n            prev = null\r\n        }\r\n\r\n        for (const day of unknown) {\r\n            const dt = DateTime.fromISO(day, { zone }).startOf(\"day\")\r\n            if (!segStart) {\r\n                segStart = day\r\n                prev = dt\r\n                continue\r\n            }\r\n            const expectedNext = prev!.plus({ days: 1 }).toISODate()\r\n            if (expectedNext !== day) {\r\n                await flush()\r\n                segStart = day\r\n                prev = dt\r\n            } else {\r\n                prev = dt\r\n            }\r\n        }\r\n        await flush()\r\n    }\r\n\r\n    return async (start: IsoDate, end: IsoDate) => {\r\n        const endExclusive = DateTime.fromISO(end, { zone }).plus({ days: 1 }).toISODate() as IsoDate\r\n\r\n        await ensureCached(start, endExclusive)\r\n\r\n        const out: string[] = []\r\n        for (const day of listDays(start, endExclusive)) {\r\n            out.push(...(byDay.get(day) ?? []))\r\n        }\r\n\r\n        return uniqueSorted(out)\r\n    }\r\n}\r\n"],"mappings":";AAAA,SAAS,UAAU,SAAS,iBAAiB;AAC7C,SAAS,gBAAgB;AAyGb,SACI,KADJ;AAtGZ,IAAM,eAAe,CAAC,OAAe,KAAa,aAAsB;AACpE,MAAI,SAAU,QAAO;AACrB,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,QAAQ,MAAM,IAAK,QAAO;AAC9B,MAAI,QAAQ,MAAM,IAAK,QAAO;AAAA,MACzB,QAAO;AAChB;AAYO,SAAS,aAAa,OAA0B;AACnD,QAAM,EAAE,SAAS,cAAc,QAAQ,IAAI;AAE3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAmB,CAAC,CAAC;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,IAAI;AAEpD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAwB,IAAI;AAClD,QAAM,CAAC,OAAO,QAAQ,IAAI,UAAiB,oBAAI,KAAK,GAAE,SAAS,IAAI,CAAC;AACpE,QAAM,CAAC,MAAM,OAAO,IAAI,UAAiB,oBAAI,KAAK,GAAE,YAAY,CAAC;AAEjE,QAAM,QAAQ,QAAQ,MAAM,SAAS,IAAI,GAAG,CAAC,CAAC;AAE9C,QAAM,WAAW,QAAQ,MAAM,SAAS,WAAW,EAAE,MAAM,MAAM,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AAClF,QAAM,gBAAgB,QAAQ,MAAM,SAAS,QAAQ,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC;AACjF,QAAM,cAAc,QAAQ,MAAM,SAAS,eAAe,GAAG,CAAC,QAAQ,CAAC;AAEvE,QAAM,cAAc;AAAA,IAChB,MACI,UAAU,OAA+B,CAAC,KAAK,aAAa;AACxD,YAAM,EAAE,KAAAA,KAAI,IAAI,SAAS,QAAQ,QAAQ;AACzC,UAAIA,IAAG,KAAK,IAAIA,IAAG,KAAK,KAAK;AAC7B,aAAO;AAAA,IACX,GAAG,CAAC,CAAC;AAAA,IACT,CAAC,SAAS;AAAA,EACd;AACA,QAAM,WAAW;AAAA,IACb,MAAM,OAAO,OAAO,WAAW,EAAE,OAAO,CAAC,MAAM,YAAY,KAAK,IAAI,MAAM,OAAO,GAAG,CAAC;AAAA,IACrF,CAAC,WAAW;AAAA,EAChB;AAEA,QAAM,YAAY,QAAQ,MAAM,MAAM,SAAS,IAAI,SAAS,QAAQ,OAAO,EAAE,SAAS,GAAG,CAAC,OAAO,QAAQ,CAAC;AAC1G,QAAM,eAAe;AAAA,IACjB,MACI,SAAS,WACH,SAAS,QAAQ,QAAQ,QAAQ,EAAE,SAAS,IAAI,SAAS,MAAM,OAAO,EAAE,SAAS,IACjF;AAAA,IACV,CAAC,SAAS,UAAU,QAAQ;AAAA,EAChC;AAEA,QAAM,YAAY,MAAM;AACpB,QAAI,SAAS,GAAG;AACZ,eAAS,EAAE;AACX,cAAQ,CAAC,SAAS,OAAO,CAAC;AAAA,IAC9B,OAAO;AACH,eAAS,CAAC,SAAS,OAAO,CAAC;AAAA,IAC/B;AACA,WAAO,IAAI;AAAA,EACf;AAEA,QAAM,YAAY,MAAM;AACpB,QAAI,SAAS,IAAI;AACb,eAAS,CAAC;AACV,cAAQ,CAAC,SAAS,OAAO,CAAC;AAAA,IAC9B,OAAO;AACH,eAAS,CAAC,SAAS,OAAO,CAAC;AAAA,IAC/B;AACA,WAAO,IAAI;AAAA,EACf;AAEA,YAAU,MAAM;AACZ,eAAW,IAAI;AACf,iBAAa,CAAC,CAAC;AAEf,UAAM,QAAQ,SAAS,QAAQ,OAAO,EAAE,UAAU;AAClD,UAAM,MAAM,SAAS,MAAM,OAAO,EAAE,UAAU;AAE9C,iBAAa,OAAO,GAAG,EAClB,KAAK,CAAC,eAAe;AAClB,mBAAa,UAAU;AAAA,IAC3B,CAAC,EACA,QAAQ,MAAM;AACX,iBAAW,KAAK;AAAA,IACpB,CAAC;AAAA,EACT,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACZ,QAAI,CAAC,IAAK,SAAQ,IAAI;AAAA,SACjB;AACD,cAAQ,SAAS,WAAW,EAAE,MAAM,OAAO,IAAI,CAAC,EAAE,UAAU,CAAY;AAAA,IAC5E;AAAA,EACJ,GAAG,CAAC,MAAM,OAAO,GAAG,CAAC;AAErB,SACI,qBAAC,SAAI,WAAU,sBACX;AAAA,yBAAC,SAAI,WAAU,4BACX;AAAA;AAAA,QAAC;AAAA;AAAA,UACG,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU,CAAC;AAAA,UACd;AAAA;AAAA,MAED;AAAA,MACA,oBAAC,QAAG,WAAU,WAAW,mBAAS,SAAS,WAAW,GAAE;AAAA,MACxD;AAAA,QAAC;AAAA;AAAA,UACG,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU,CAAC;AAAA,UACd;AAAA;AAAA,MAED;AAAA,OACJ;AAAA,IACA,qBAAC,SAAI,WAAU,4BACV;AAAA,OAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK,EAAE,IAAI,CAACA,SACpD,oBAAC,OAAa,UAAAA,QAANA,IAAU,CACrB;AAAA,MACA,MAAM,KAAK,EAAE,QAAQ,gBAAgB,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MAC5D,oBAAC,SAAI,WAAU,iBAAmB,CAAG,CACxC;AAAA,MACA,MAAM,KAAK,EAAE,QAAQ,YAAY,GAAG,CAAC,GAAG,MAAM,IAAI,CAAC,EAAE,IAAI,CAAC,MAAM,MAC7D;AAAA,QAAC;AAAA;AAAA,UACG,MAAK;AAAA,UACL,gBAAc,OAAO;AAAA,UAErB,WAAW,aAAa,YAAY,IAAI,KAAK,GAAG,UAAU,OAAO,IAAI;AAAA,UACrE,SAAS,MAAM,OAAO,IAAI;AAAA,UAC1B,UAAU,CAAC,YAAY,IAAI;AAAA,UAE1B;AAAA;AAAA,QALI,GAAG,IAAI,IAAI,KAAK,IAAI,IAAI;AAAA,MAMjC,CACH;AAAA,OACL;AAAA,IACA,qBAAC,SAAI,WAAU,4BACX;AAAA,2BAAC,SACG;AAAA,4BAAC,UAAK,WAAU,uCAAsC;AAAA,QACtD,oBAAC,OAAE,+BAAiB;AAAA,SACxB;AAAA,MACA,qBAAC,SACG;AAAA,4BAAC,UAAK,WAAU,yCAAwC;AAAA,QACxD,oBAAC,OAAE,iCAAmB;AAAA,SAC1B;AAAA,MACA,qBAAC,SACG;AAAA,4BAAC,UAAK,WAAU,sCAAqC;AAAA,QACrD,oBAAC,OAAE,8BAAgB;AAAA,SACvB;AAAA,MACA,qBAAC,SACG;AAAA,4BAAC,UAAK,WAAU,qCAAoC;AAAA,QACpD,oBAAC,OAAE,6BAAe;AAAA,SACtB;AAAA,OACJ;AAAA,KACJ;AAER;;;ACvKA,SAAgB,aAAAC,YAAW,YAAAC,iBAAgB;AAyBnC,SACI,OAAAC,MADJ,QAAAC,aAAA;AAVD,SAAS,iBAAiB,OAA8B;AAC3D,QAAM,EAAE,UAAU,aAAa,cAAc,QAAQ,IAAI;AAEzD,QAAM,CAAC,MAAM,OAAO,IAAIC,UAAyB,IAAI;AAErD,EAAAC,WAAU,MAAM;AACZ,gBAAY,IAAI;AAAA,EACpB,GAAG,CAAC,IAAI,CAAC;AAET,SACI,gBAAAF,MAAC,SAAI,WAAU,0BACX;AAAA,oBAAAD,KAAC,gBAAa,SAAkB,cAA4B,SAAS,SAAS,MAAM;AAAA,IACnF,QACG,gBAAAA,KAAC,gBAAa,MAAY,UAAoB,aAA0B,cAA4B;AAAA,KAE5G;AAER;;;AChCA,SAAS,YAAAI,iBAAgB;AAEzB,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AA8BxB,gBAAAC,MACI,QAAAC,aADJ;AArBL,SAAS,aAAa,OAA0B;AACnD,QAAM,EAAE,MAAM,UAAU,aAAa,aAAa,IAAI;AAEtD,QAAM,CAAC,WAAW,YAAY,IAAIF,UAAmB,CAAC,CAAC;AACvD,QAAM,CAAC,SAAS,UAAU,IAAIA,UAAkB,IAAI;AAEpD,EAAAD,WAAU,MAAM;AACZ,eAAW,IAAI;AACf,iBAAa,CAAC,CAAC;AAEf,iBAAa,MAAM,IAAI,EAClB,KAAK,CAAC,eAAe;AAClB,mBAAa,UAAU;AAAA,IAC3B,CAAC,EACA,QAAQ,MAAM;AACX,iBAAW,KAAK;AAAA,IACpB,CAAC;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACI,gBAAAG,MAAC,SAAI,WAAU,sBACX;AAAA,oBAAAD,KAAC,SAAI,WAAU,4BACX,0BAAAC,MAAC,QAAG,WAAU,WAAU;AAAA;AAAA,MAAgBJ,UAAS,QAAQ,IAAI,EAAE,SAAS,aAAa;AAAA,OAAE,GAC3F;AAAA,IACA,gBAAAI,MAAC,SAAI,WAAU,4BACV;AAAA,iBAAW,gBAAAD,KAAC,OAAE,wBAAU;AAAA,MACxB,UAAU,IAAI,CAAC,cACZ,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACG,MAAK;AAAA,UAEL,WAAW,4BAA4B,aAAa,WAAW,aAAa,SAAS;AAAA,UACrF,SAAS,MAAM,YAAY,SAAS;AAAA,UAEnC,UAAAH,UAAS,QAAQ,SAAS,EAAE,SAAS,OAAO;AAAA;AAAA,QAJxC;AAAA,MAKT,CACH;AAAA,OACL;AAAA,KACJ;AAER;;;AClDA,SAAS,YAAAK,iBAAgB;AASlB,SAAS,yBAAyB,cAA4B,SAAgC;AACjG,QAAM,OAAO,SAAS;AAEtB,QAAM,QAAQ,oBAAI,IAAuB;AACzC,QAAM,WAAW,oBAAI,IAA2B;AAEhD,QAAM,WAAW,CAAC,QAAgBA,UAAS,QAAQ,KAAK,EAAE,KAAK,CAAC,EAAE,UAAU;AAE5E,QAAM,WAAW,CAAC,OAAgB,QAA4B;AAC1D,UAAM,IAAIA,UAAS,QAAQ,OAAO,EAAE,KAAK,CAAC,EAAE,QAAQ,KAAK;AACzD,UAAM,IAAIA,UAAS,QAAQ,KAAK,EAAE,KAAK,CAAC,EAAE,QAAQ,KAAK;AACvD,UAAM,MAAiB,CAAC;AACxB,aAAS,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAG,KAAI,KAAK,EAAE,UAAU,CAAY;AACjF,WAAO;AAAA,EACX;AAEA,QAAM,eAAe,CAAC,QAAkB,MAAM,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,KAAK;AAEtE,QAAM,iBAAiB,CAAC,OAAgB,QAAiB;AACrD,eAAW,OAAO,SAAS,OAAO,GAAG,GAAG;AACpC,UAAI,CAAC,MAAM,IAAI,GAAG,EAAG,OAAM,IAAI,KAAK,CAAC,CAAC;AAAA,IAC1C;AAAA,EACJ;AAEA,QAAM,SAAS,CAAC,SAAmB;AAC/B,eAAW,OAAO,MAAM;AACpB,YAAM,MAAM,SAAS,GAAG;AACxB,YAAM,MAAM,MAAM,IAAI,GAAG;AACzB,UAAI,IAAK,KAAI,KAAK,GAAG;AAAA,UAChB,OAAM,IAAI,KAAK,CAAC,GAAG,CAAC;AAAA,IAC7B;AAAA,EACJ;AAEA,iBAAe,aAAa,UAAmB,QAAiB;AAC5D,YAAQ,IAAI,UAAU,MAAM;AAC5B,UAAM,MAAM,GAAG,QAAQ,IAAI,MAAM;AACjC,QAAI,CAAC,SAAS,IAAI,GAAG,GAAG;AACpB,eAAS;AAAA,QACL;AAAA,SACC,YAAY;AACT,gBAAM,SAAS,MAAM,aAAa,UAAU,MAAM;AAClD,yBAAe,UAAU,MAAM;AAC/B,iBAAO,MAAM;AAAA,QACjB,GAAG,EAAE,QAAQ,MAAM;AACf,mBAAS,OAAO,GAAG;AAAA,QACvB,CAAC;AAAA,MACL;AAAA,IACJ;AACA,UAAM,SAAS,IAAI,GAAG;AAAA,EAC1B;AAEA,iBAAe,aAAa,OAAgB,KAAc;AACtD,UAAM,OAAO,SAAS,OAAO,GAAG;AAChC,UAAM,UAAU,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC;AAEhD,QAAI,QAAQ,WAAW,EAAG;AAE1B,QAAI,WAA2B;AAC/B,QAAI,OAAwB;AAE5B,UAAM,QAAQ,YAAY;AACtB,UAAI,CAAC,YAAY,CAAC,KAAM;AACxB,YAAM,SAAS,KAAK,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU;AAChD,YAAM,aAAa,UAAU,MAAM;AACnC,iBAAW;AACX,aAAO;AAAA,IACX;AAEA,eAAW,OAAO,SAAS;AACvB,YAAM,KAAKA,UAAS,QAAQ,KAAK,EAAE,KAAK,CAAC,EAAE,QAAQ,KAAK;AACxD,UAAI,CAAC,UAAU;AACX,mBAAW;AACX,eAAO;AACP;AAAA,MACJ;AACA,YAAM,eAAe,KAAM,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU;AACvD,UAAI,iBAAiB,KAAK;AACtB,cAAM,MAAM;AACZ,mBAAW;AACX,eAAO;AAAA,MACX,OAAO;AACH,eAAO;AAAA,MACX;AAAA,IACJ;AACA,UAAM,MAAM;AAAA,EAChB;AAEA,SAAO,OAAO,OAAgB,QAAiB;AAC3C,UAAM,eAAeA,UAAS,QAAQ,KAAK,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU;AAEjF,UAAM,aAAa,OAAO,YAAY;AAEtC,UAAM,MAAgB,CAAC;AACvB,eAAW,OAAO,SAAS,OAAO,YAAY,GAAG;AAC7C,UAAI,KAAK,GAAI,MAAM,IAAI,GAAG,KAAK,CAAC,CAAE;AAAA,IACtC;AAEA,WAAO,aAAa,GAAG;AAAA,EAC3B;AACJ;","names":["day","useEffect","useState","jsx","jsxs","useState","useEffect","DateTime","useEffect","useState","jsx","jsxs","DateTime"]}

package/dist/style.css

@@ -0,0 +1,191 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rubik:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&display=swap");
+.mncl-date-selector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #ffffff;
+  border-radius: 1rem;
+  width: 32rem;
+  max-width: 100%;
+  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1254901961);
+}
+.mncl-date-selector__head {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.75rem 2rem 1.5rem 2rem;
+  border-bottom: 0.125rem solid #ced4da;
+}
+.mncl-date-selector__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.5rem;
+  padding: 2rem;
+  width: min-content;
+}
+.mncl-date-selector__grid > button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 3rem;
+  height: 2.75rem;
+}
+.mncl-date-selector__grid > button.ignore {
+  background-color: transparent;
+  box-shadow: none;
+}
+.mncl-date-selector__grid > p {
+  font-size: 0.875rem;
+  color: #868e96;
+  width: 100%;
+  text-align: center;
+}
+.mncl-date-selector__foot {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem 2rem;
+  padding: 1rem 2rem 2rem 2rem;
+  font-size: 0.875rem;
+  color: #868e96;
+}
+.mncl-date-selector__foot div {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.mncl-time-selector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #ffffff;
+  border-radius: 1rem;
+  height: fit-content;
+  width: 32rem;
+  max-width: 100%;
+  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1254901961);
+  padding: 2rem;
+  gap: 2rem;
+}
+.mncl-time-selector__head {
+  width: 100%;
+}
+.mncl-time-selector__head h2 {
+  font-size: 1.5rem;
+}
+.mncl-time-selector__grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+  gap: 0.75rem;
+}
+
+.mncl-datetime-selector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4rem;
+  padding: 4rem;
+  font-family: "Rubik", sans-serif;
+}
+.mncl-datetime-selector h2 {
+  font-family: "Space Grotesk", sans-serif;
+}
+
+/**
+* BUTTONS
+*/
+.mncl-button {
+  position: relative;
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  padding: 0.5rem 1rem;
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+  font-family: inherit;
+  color: var(--mncl-button-text, #000000);
+  background-color: var(--mncl-button-light);
+  border-radius: 0.5rem;
+  border: 0.125rem solid var(--mncl-button-border, var(--mncl-button-light));
+  box-shadow: 0 0.25rem 0 0 var(--mncl-button-dark);
+  text-decoration: none;
+}
+.mncl-button:not(:disabled):not(.disabled):not(.no-interact) {
+  cursor: pointer;
+}
+.mncl-button::before {
+  content: "";
+  position: absolute;
+  top: -0.125rem;
+  left: -0.125rem;
+  width: calc(100% + 0.25rem);
+  height: calc(100% + 0.25rem);
+}
+.mncl-button:hover:not(:disabled):not(.disabled):not(.no-interact) {
+  border-color: var(--mncl-button-dark);
+}
+.mncl-button:active:not(:disabled):not(.disabled):not(.no-interact) {
+  transform: translateY(0.25rem);
+  box-shadow: none;
+}
+.mncl-button:active:not(:disabled):not(.disabled):not(.no-interact)::before {
+  top: -0.375rem;
+}
+.mncl-button--accent {
+  --mncl-button-light: #74c0fc;
+  --mncl-button-dark: #228be6;
+}
+.mncl-button--high {
+  --mncl-button-light: #69db7c;
+  --mncl-button-dark: #37b24d;
+}
+.mncl-button--medium {
+  --mncl-button-light: #ffd43b;
+  --mncl-button-dark: #fab005;
+}
+.mncl-button--low {
+  --mncl-button-light: #ff6b6b;
+  --mncl-button-dark: #e03131;
+}
+.mncl-button--default {
+  --mncl-button-light: #ced4da;
+  --mncl-button-dark: #adb5bd;
+}
+.mncl-button--selected {
+  --mncl-button-text: #1c7ed6;
+  --mncl-button-light: #ffffff;
+  --mncl-button-dark: #1c7ed6;
+  --mncl-button-border: #1c7ed6;
+}
+.mncl-button:disabled {
+  --mncl-button-text: #adb5bd;
+  --mncl-button-light: #f1f3f5;
+  --mncl-button-dark: #ced4da;
+}
+
+.mncl-indicator {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+}
+.mncl-indicator--high {
+  background-color: #69db7c;
+}
+.mncl-indicator--medium {
+  background-color: #fcc419;
+}
+.mncl-indicator--low {
+  background-color: #fa5252;
+}
+.mncl-indicator--no {
+  background-color: #ced4da;
+}
+
+/*# sourceMappingURL=style.css.map */

package/dist/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;AAAA;AAAA;AAIA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"style.css"}

package/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "@minicalendar/react",
+    "version": "0.0.1",
+    "type": "module",
+    "description": "",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./style.css": "./dist/style.css"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsup && npm run build:css",
+        "build:css": "sass src/style.scss dist/style.css",
+        "dev": "tsup --watch",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "luxon": ">=3",
+        "react": ">=18 <20",
+        "react-dom": ">=18 <20"
+    },
+    "peerDependenciesMeta": {
+        "react-dom": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@types/luxon": "^3.7.1",
+        "@types/react": "^19.2.14",
+        "sass": "^1.97.3",
+        "tsup": "^8.5.1",
+        "typescript": "^5.9.3"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC"
+}