@kamod-ch/ui 0.2.1

package/dist/chunk-JNF7FDJO.js

@@ -0,0 +1,633 @@
+import { Button } from './chunk-5FBD2NTR.js';
+import { cn } from './chunk-MS2ZNYCJ.js';
+import { useMemo, useState } from 'preact/hooks';
+import { jsxs, jsx } from 'preact/jsx-runtime';
+
+var atNoon = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0);
+var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var isBetweenInclusive = (d, a, b) => {
+  const t = atNoon(d).getTime();
+  return t >= atNoon(a).getTime() && t <= atNoon(b).getTime();
+};
+var startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+var addMonths = (d, delta) => new Date(d.getFullYear(), d.getMonth() + delta, 1);
+var isoWeekNumber = (d) => {
+  const copy = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0);
+  const day = (copy.getDay() + 6) % 7;
+  copy.setDate(copy.getDate() - day + 3);
+  const week1 = new Date(copy.getFullYear(), 0, 4);
+  const w1d = (week1.getDay() + 6) % 7;
+  week1.setDate(week1.getDate() - w1d + 3);
+  return 1 + Math.round((copy.getTime() - week1.getTime()) / 6048e5);
+};
+var formatWeekIndex = (n) => String(n).padStart(2, "0");
+var buildCalendarRows = (year, month, showOutsideDays, fixedWeeks) => {
+  const first = new Date(year, month, 1);
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const startPad = first.getDay();
+  const flat = [];
+  for (let i = 0; i < startPad; i += 1) {
+    if (showOutsideDays) {
+      const prevMonth = month === 0 ? 11 : month - 1;
+      const prevYear = month === 0 ? year - 1 : year;
+      const prevDays = new Date(prevYear, prevMonth + 1, 0).getDate();
+      const day = prevDays - startPad + i + 1;
+      flat.push({ date: new Date(prevYear, prevMonth, day), outside: true });
+    } else {
+      flat.push(null);
+    }
+  }
+  for (let d = 1; d <= daysInMonth; d += 1) {
+    flat.push({ date: new Date(year, month, d), outside: false });
+  }
+  const rem = flat.length % 7;
+  if (rem !== 0) {
+    const need = 7 - rem;
+    for (let i = 0; i < need; i += 1) {
+      if (showOutsideDays) {
+        flat.push({ date: new Date(year, month + 1, i + 1), outside: true });
+      } else {
+        flat.push(null);
+      }
+    }
+  }
+  if (fixedWeeks) {
+    while (flat.length < 42) {
+      if (showOutsideDays) {
+        const lastCell = flat[flat.length - 1];
+        if (lastCell) {
+          const next = new Date(lastCell.date);
+          next.setDate(next.getDate() + 1);
+          flat.push({ date: next, outside: true });
+        } else {
+          flat.push(null);
+        }
+      } else {
+        flat.push(null);
+      }
+    }
+  }
+  const rows = [];
+  for (let i = 0; i < flat.length; i += 7) {
+    rows.push(flat.slice(i, i + 7));
+  }
+  return rows;
+};
+var ChevronLeft = ({ class: className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    class: cn("size-4 shrink-0", className),
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+  }
+);
+var ChevronRight = ({ class: className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    class: cn("size-4 shrink-0", className),
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+  }
+);
+var intlOpts = (locale, timeZone) => timeZone ? { locale, timeZone } : locale ? { locale } : void 0;
+var MonthCaption = ({
+  displayMonth,
+  captionLayout,
+  dir,
+  locale,
+  timeZone,
+  captionTitleClass,
+  size,
+  onPrev,
+  onNext,
+  onPickMonthYear
+}) => {
+  const sm = size === "sm";
+  const y = displayMonth.getFullYear();
+  const m = displayMonth.getMonth();
+  const yearStart = y - 100;
+  const yearEnd = y + 20;
+  const years = useMemo(() => {
+    const list = [];
+    for (let yy = yearStart; yy <= yearEnd; yy += 1) list.push(yy);
+    return list;
+  }, [yearStart, yearEnd]);
+  const fmt = intlOpts(locale, timeZone);
+  if (captionLayout === "dropdown") {
+    const selectBaseClass = sm ? "border-input bg-background text-foreground focus-visible:ring-ring/50 box-border h-7 min-h-7 shrink-0 rounded-md border px-2 pe-7 text-xs leading-4 shadow-xs outline-none focus-visible:ring-2" : "border-input bg-background text-foreground focus-visible:ring-ring/50 box-border h-8 min-h-8 shrink-0 rounded-md border px-2.5 pe-8 text-xs leading-4 shadow-xs outline-none focus-visible:ring-2";
+    const monthSelectClass = cn(
+      selectBaseClass,
+      sm ? "min-w-[5rem] max-w-full" : "min-w-[5.25rem] max-w-full"
+    );
+    const yearSelectClass = cn(
+      selectBaseClass,
+      sm ? "min-w-[3.75rem] max-w-full" : "min-w-[4.25rem] max-w-full"
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        class: cn("flex w-full items-center justify-between", sm ? "mb-1 gap-0.5" : "mb-1.5 gap-1"),
+        dir,
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: sm ? "icon-xs" : "icon-sm",
+              "aria-label": "Previous month",
+              onClick: onPrev,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { class: dir === "rtl" ? "rotate-180" : void 0 })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: cn(
+                "text-foreground flex min-w-0 flex-1 items-center justify-center font-medium",
+                sm ? "gap-1 text-xs" : "gap-1.5 text-xs",
+                captionTitleClass
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    class: monthSelectClass,
+                    value: String(m),
+                    "aria-label": "Month",
+                    onChange: (e) => {
+                      const nextM = Number(e.target.value);
+                      onPickMonthYear(y, nextM);
+                    },
+                    children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx("option", { value: String(i), children: new Date(y, i, 1).toLocaleString(fmt?.locale ?? void 0, {
+                      month: "short",
+                      ...fmt && "timeZone" in fmt && fmt.timeZone ? { timeZone: fmt.timeZone } : {}
+                    }) }, i))
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    class: yearSelectClass,
+                    value: String(y),
+                    "aria-label": "Year",
+                    onChange: (e) => {
+                      const nextY = Number(e.target.value);
+                      onPickMonthYear(nextY, m);
+                    },
+                    children: years.map((yy) => /* @__PURE__ */ jsx("option", { value: String(yy), children: yy }, yy))
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: sm ? "icon-xs" : "icon-sm",
+              "aria-label": "Next month",
+              onClick: onNext,
+              children: /* @__PURE__ */ jsx(ChevronRight, { class: dir === "rtl" ? "rotate-180" : void 0 })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: cn("flex items-center justify-between", sm ? "mb-1 gap-1" : "mb-1.5 gap-1.5"),
+      dir,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: sm ? "icon-xs" : "icon-sm",
+            "aria-label": "Previous month",
+            onClick: onPrev,
+            children: /* @__PURE__ */ jsx(ChevronLeft, { class: dir === "rtl" ? "rotate-180" : void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { class: cn(sm ? "text-xs font-medium" : "text-sm font-medium", captionTitleClass), children: displayMonth.toLocaleString(fmt?.locale ?? void 0, {
+          month: "long",
+          year: "numeric",
+          ...fmt && "timeZone" in fmt && fmt.timeZone ? { timeZone: fmt.timeZone } : {}
+        }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: sm ? "icon-xs" : "icon-sm",
+            "aria-label": "Next month",
+            onClick: onNext,
+            children: /* @__PURE__ */ jsx(ChevronRight, { class: dir === "rtl" ? "rotate-180" : void 0 })
+          }
+        )
+      ]
+    }
+  );
+};
+var DualMonthCaption = ({
+  firstMonth,
+  secondMonth,
+  dir,
+  locale,
+  timeZone,
+  captionTitleClass,
+  size,
+  onPrev,
+  onNext
+}) => {
+  const fmt = intlOpts(locale, timeZone);
+  const sm = size === "sm";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: cn("flex items-center justify-between", sm ? "mb-1 gap-1" : "mb-1.5 gap-1.5"),
+      dir,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: sm ? "icon-xs" : "icon-sm",
+            class: "shrink-0",
+            "aria-label": "Previous month",
+            onClick: onPrev,
+            children: /* @__PURE__ */ jsx(ChevronLeft, { class: dir === "rtl" ? "rotate-180" : void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            class: cn(
+              "flex min-w-0 flex-1 justify-center text-center font-medium",
+              sm ? "gap-2 text-xs sm:gap-4" : "gap-4 text-sm sm:gap-6"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { class: cn("truncate", captionTitleClass), children: firstMonth.toLocaleString(fmt?.locale ?? void 0, {
+                month: "long",
+                year: "numeric",
+                ...fmt && "timeZone" in fmt && fmt.timeZone ? { timeZone: fmt.timeZone } : {}
+              }) }),
+              /* @__PURE__ */ jsx("span", { class: cn("truncate", captionTitleClass), children: secondMonth.toLocaleString(fmt?.locale ?? void 0, {
+                month: "long",
+                year: "numeric",
+                ...fmt && "timeZone" in fmt && fmt.timeZone ? { timeZone: fmt.timeZone } : {}
+              }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: sm ? "icon-xs" : "icon-sm",
+            class: "shrink-0",
+            "aria-label": "Next month",
+            onClick: onNext,
+            children: /* @__PURE__ */ jsx(ChevronRight, { class: dir === "rtl" ? "rotate-180" : void 0 })
+          }
+        )
+      ]
+    }
+  );
+};
+var MonthGrid = ({
+  year,
+  month,
+  mode,
+  singleSelected,
+  range,
+  locale,
+  weekdayLabels: weekdayLabelsProp,
+  showWeekdayLeadBorder,
+  showOutsideDays,
+  fixedWeeks,
+  showWeekNumber,
+  isDisabled,
+  modifierClassesFor,
+  dayAddon,
+  hasDayAddon,
+  size,
+  onDayClick
+}) => {
+  const sm = size === "sm";
+  const gridGap = sm ? "gap-0.5" : "gap-1";
+  const rows = useMemo(
+    () => buildCalendarRows(year, month, showOutsideDays, fixedWeeks),
+    [year, month, showOutsideDays, fixedWeeks]
+  );
+  const today = useMemo(() => atNoon(/* @__PURE__ */ new Date()), []);
+  const weekdayLabels = useMemo(() => {
+    if (weekdayLabelsProp?.length === 7) return weekdayLabelsProp;
+    return Array.from(
+      { length: 7 },
+      (_, i) => new Date(2024, 0, 7 + i).toLocaleDateString(locale, { weekday: "short" })
+    );
+  }, [locale, weekdayLabelsProp]);
+  const dayClass = (d, outside) => {
+    let cls = cn(
+      "inline-flex size-[length:var(--cell-size,2rem)] min-h-[length:var(--cell-size,2rem)] min-w-[length:var(--cell-size,2rem)] items-center justify-center rounded-md leading-none font-normal transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 dark:hover:text-accent-foreground",
+      sm ? "text-xs" : "text-sm",
+      hasDayAddon && "flex-col gap-0.5"
+    );
+    if (outside) {
+      cls += " text-muted-foreground";
+    }
+    const isToday = isSameDay(d, today);
+    const singleSel = mode === "single" && singleSelected && isSameDay(d, singleSelected);
+    const from = range?.from;
+    const to = range?.to;
+    const rangeFromOnly = mode === "range" && from && !to && isSameDay(d, from);
+    const inFullRange = mode === "range" && from && to && isBetweenInclusive(d, from, to);
+    if (singleSel || rangeFromOnly) {
+      cls += " bg-primary text-primary-foreground hover:bg-primary/90";
+    } else if (inFullRange && from && to) {
+      if (isSameDay(from, to)) {
+        cls += " bg-primary text-primary-foreground hover:bg-primary/90 rounded-md";
+      } else if (isSameDay(d, from)) {
+        cls += " bg-primary text-primary-foreground hover:bg-primary/90 rounded-s-md rounded-e-none";
+      } else if (isSameDay(d, to)) {
+        cls += " bg-primary text-primary-foreground hover:bg-primary/90 rounded-e-md rounded-s-none";
+      } else {
+        cls += " bg-accent text-accent-foreground hover:bg-accent/80 rounded-none";
+      }
+    } else if (isToday) {
+      cls += " bg-accent text-accent-foreground";
+    } else {
+      cls += " hover:bg-accent hover:text-accent-foreground";
+    }
+    return cls;
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        class: cn(
+          "grid text-center text-muted-foreground",
+          gridGap,
+          sm ? "text-[0.65rem] leading-none" : "text-xs",
+          showWeekNumber ? "grid-cols-8" : "grid-cols-7"
+        ),
+        children: [
+          showWeekNumber ? /* @__PURE__ */ jsx("div", { class: "flex size-[length:var(--cell-size,2rem)] items-center justify-center font-normal" }) : null,
+          weekdayLabels.map((day, wi) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: cn(
+                "flex size-[length:var(--cell-size,2rem)] items-center justify-center font-normal",
+                showWeekdayLeadBorder && wi === 0 && "relative ms-0.5 border-s border-border ps-2"
+              ),
+              children: day
+            },
+            `w-${wi}`
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { class: cn("flex flex-col", gridGap, sm ? "mt-1" : "mt-1.5"), children: rows.map((row, ri) => /* @__PURE__ */ jsxs("div", { class: cn("grid", gridGap, showWeekNumber ? "grid-cols-8" : "grid-cols-7"), children: [
+      showWeekNumber ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          class: "text-muted-foreground flex size-[length:var(--cell-size,2rem)] items-center justify-center text-[0.8rem] select-none",
+          "aria-hidden": "true",
+          children: (() => {
+            const first = row.find((c) => c !== null);
+            return first ? formatWeekIndex(isoWeekNumber(first.date)) : "";
+          })()
+        }
+      ) : null,
+      row.map(
+        (cell, ci) => cell ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-slot": "calendar-day",
+            "data-outside": cell.outside ? "true" : void 0,
+            "data-today": isSameDay(cell.date, today) ? "true" : void 0,
+            disabled: isDisabled(cell.date),
+            class: cn(dayClass(cell.date, cell.outside), modifierClassesFor(cell.date)),
+            onClick: () => onDayClick(cell.date, cell.outside),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: cell.date.getDate() }),
+              (() => {
+                if (!dayAddon) return null;
+                const extra = dayAddon(cell.date, cell.outside);
+                if (extra == null || extra === false) return null;
+                return /* @__PURE__ */ jsx("span", { class: "text-muted-foreground text-xs leading-none opacity-70", children: extra });
+              })()
+            ]
+          },
+          `${cell.date.getTime()}-${ci}`
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "size-[length:var(--cell-size,2rem)]",
+            "aria-hidden": "true"
+          },
+          `empty-${ri}-${ci}`
+        )
+      )
+    ] }, ri)) })
+  ] });
+};
+var Calendar = ({
+  class: className,
+  mode = "single",
+  selected,
+  onSelect,
+  value,
+  onValueChange,
+  defaultMonth,
+  month: monthProp,
+  onMonthChange,
+  numberOfMonths = 1,
+  captionLayout = "buttons",
+  dir = "ltr",
+  showOutsideDays = true,
+  fixedWeeks = false,
+  disabled,
+  showWeekNumber = false,
+  modifiers,
+  modifiersClassNames,
+  locale,
+  timeZone,
+  dayAddon,
+  captionTitleClass,
+  weekdayLabels,
+  showWeekdayLeadBorder,
+  size = "default",
+  ...rest
+}) => {
+  const calSize = size;
+  const singleSelected = mode === "single" ? selected ?? value : void 0;
+  const rangeSelected = mode === "range" ? selected : void 0;
+  const initialMonth = useMemo(() => {
+    const fromSel = singleSelected ?? rangeSelected?.from;
+    return startOfMonth(defaultMonth ?? fromSel ?? /* @__PURE__ */ new Date());
+  }, []);
+  const [innerMonth, setInnerMonth] = useState(initialMonth);
+  const displayMonth = monthProp !== void 0 ? startOfMonth(monthProp) : innerMonth;
+  const setMonth = (next) => {
+    const s = startOfMonth(next);
+    onMonthChange?.(s);
+    if (monthProp === void 0) {
+      setInnerMonth(s);
+    }
+  };
+  const shiftMonth = (delta) => {
+    setMonth(addMonths(displayMonth, delta));
+  };
+  const isDisabled = (d) => {
+    if (!disabled) return false;
+    if (Array.isArray(disabled)) {
+      return disabled.some((x) => isSameDay(atNoon(x), atNoon(d)));
+    }
+    return disabled(d);
+  };
+  const modifierClassesFor = (d) => {
+    if (!modifiers || !modifiersClassNames) return "";
+    const parts = [];
+    for (const [name, dates] of Object.entries(modifiers)) {
+      if (!dates?.length) continue;
+      if (dates.some((x) => isSameDay(atNoon(x), atNoon(d)))) {
+        const cnVal = modifiersClassNames[name];
+        if (cnVal) parts.push(cnVal);
+      }
+    }
+    return parts.join(" ");
+  };
+  const handleDayClick = (d, outside) => {
+    if (outside) {
+      setMonth(startOfMonth(d));
+    }
+    if (mode === "single") {
+      onSelect?.(d);
+      onValueChange?.(d);
+      return;
+    }
+    const cur = rangeSelected;
+    if (!cur?.from || cur.from && cur.to) {
+      onSelect?.({ from: d, to: void 0 });
+    } else {
+      let from = cur.from;
+      let to = d;
+      if (atNoon(to) < atNoon(from)) {
+        const tmp = from;
+        from = to;
+        to = tmp;
+      }
+      onSelect?.({ from, to });
+    }
+  };
+  const monthsToRender = numberOfMonths === 2 ? [0, 1] : [0];
+  const effectiveCaption = numberOfMonths === 2 ? "buttons" : captionLayout;
+  const secondVisible = addMonths(displayMonth, 1);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "calendar",
+      "data-calendar-size": calSize,
+      dir,
+      class: cn(
+        "bg-background group/calendar relative w-fit rounded-md border [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        calSize === "sm" ? "min-w-[15rem] p-2 [--cell-size:1.5625rem]" : "min-w-[16.75rem] p-2.5 [--cell-size:1.75rem]",
+        numberOfMonths === 2 && "max-w-full",
+        className
+      ),
+      ...rest,
+      children: [
+        numberOfMonths === 2 ? /* @__PURE__ */ jsx(
+          DualMonthCaption,
+          {
+            firstMonth: displayMonth,
+            secondMonth: secondVisible,
+            dir,
+            locale,
+            timeZone,
+            captionTitleClass,
+            size: calSize,
+            onPrev: () => shiftMonth(-1),
+            onNext: () => shiftMonth(1)
+          }
+        ) : /* @__PURE__ */ jsx(
+          MonthCaption,
+          {
+            displayMonth,
+            captionLayout: effectiveCaption,
+            dir,
+            locale,
+            timeZone,
+            captionTitleClass,
+            size: calSize,
+            onPrev: () => shiftMonth(-1),
+            onNext: () => shiftMonth(1),
+            onPickMonthYear: (yy, monthIndex) => {
+              setMonth(new Date(yy, monthIndex, 1));
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: cn(
+              "relative flex flex-col",
+              calSize === "sm" ? "gap-2.5" : "gap-3",
+              numberOfMonths === 2 && "md:flex-row md:items-start md:justify-between",
+              numberOfMonths === 2 && (calSize === "sm" ? "md:gap-4" : "md:gap-6")
+            ),
+            children: monthsToRender.map((offset) => {
+              const ym = addMonths(displayMonth, offset);
+              const y = ym.getFullYear();
+              const m = ym.getMonth();
+              return /* @__PURE__ */ jsx(
+                MonthGrid,
+                {
+                  year: y,
+                  month: m,
+                  mode,
+                  singleSelected,
+                  range: rangeSelected,
+                  locale,
+                  weekdayLabels,
+                  showWeekdayLeadBorder,
+                  showOutsideDays,
+                  fixedWeeks,
+                  showWeekNumber,
+                  isDisabled,
+                  modifierClassesFor,
+                  dayAddon,
+                  hasDayAddon: Boolean(dayAddon),
+                  size: calSize,
+                  onDayClick: handleDayClick
+                },
+                `${y}-${m}`
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Calendar };
+//# sourceMappingURL=chunk-JNF7FDJO.js.map
+//# sourceMappingURL=chunk-JNF7FDJO.js.map