@expcat/tigercat-react 1.3.4 → 1.5.0

package/dist/chunk-WLFLQB4R.mjs

@@ -0,0 +1,312 @@
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
+
+// src/components/Calendar.tsx
+import { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { classNames } from "@expcat/tigercat-core";
+import {
+  getCalendarContainerClasses,
+  calendarHeaderClasses,
+  calendarNavButtonClasses,
+  calendarTitleClasses,
+  calendarWeekdayClasses,
+  getCalendarDayClasses,
+  getCalendarMonthClasses,
+  isSameDay,
+  getMonthDays,
+  getShortDayNames,
+  getShortMonthNames,
+  formatMonthYear,
+  formatDate,
+  parseDate,
+  addDays,
+  getCalendarLabels,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Calendar = ({
+  value,
+  mode = "month",
+  fullscreen = false,
+  disabledDate,
+  locale,
+  onChange,
+  onPanelChange,
+  className
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const localeCode = mergedLocale?.locale;
+  const labels = useMemo(() => getCalendarLabels(mergedLocale), [mergedLocale]);
+  const weekdayNames = useMemo(() => getShortDayNames(localeCode), [localeCode]);
+  const monthNames = useMemo(() => getShortMonthNames(localeCode), [localeCode]);
+  const today = /* @__PURE__ */ new Date();
+  const [viewYear, setViewYear] = useState(value?.getFullYear() ?? today.getFullYear());
+  const [viewMonth, setViewMonth] = useState(value?.getMonth() ?? today.getMonth());
+  const days = useMemo(() => getMonthDays(viewYear, viewMonth), [viewYear, viewMonth]);
+  const weeks = useMemo(() => {
+    const out = [];
+    for (let i = 0; i < days.length; i += 7) out.push(days.slice(i, i + 7));
+    return out;
+  }, [days]);
+  const monthRows = useMemo(() => {
+    const out = [];
+    for (let i = 0; i < monthNames.length; i += 3) out.push(monthNames.slice(i, i + 3));
+    return out;
+  }, [monthNames]);
+  const navigate = useCallback(
+    (newYear, newMonth) => {
+      setViewYear(newYear);
+      setViewMonth(newMonth);
+      onPanelChange?.(new Date(newYear, newMonth, 1), mode);
+    },
+    [mode, onPanelChange]
+  );
+  const prevMonth = useCallback(() => {
+    if (viewMonth === 0) navigate(viewYear - 1, 11);
+    else navigate(viewYear, viewMonth - 1);
+  }, [viewYear, viewMonth, navigate]);
+  const nextMonth = useCallback(() => {
+    if (viewMonth === 11) navigate(viewYear + 1, 0);
+    else navigate(viewYear, viewMonth + 1);
+  }, [viewYear, viewMonth, navigate]);
+  const prevYear = useCallback(
+    () => navigate(viewYear - 1, viewMonth),
+    [viewYear, viewMonth, navigate]
+  );
+  const nextYear = useCallback(
+    () => navigate(viewYear + 1, viewMonth),
+    [viewYear, viewMonth, navigate]
+  );
+  const selectDay = useCallback(
+    (date) => {
+      if (disabledDate?.(date)) return;
+      onChange?.(date);
+    },
+    [disabledDate, onChange]
+  );
+  const selectMonth = useCallback(
+    (monthIdx) => {
+      setViewMonth(monthIdx);
+      onPanelChange?.(new Date(viewYear, monthIdx, 1), mode);
+    },
+    [viewYear, mode, onPanelChange]
+  );
+  const dayGridRef = useRef(null);
+  const pendingFocusIsoRef = useRef(null);
+  const [activeIso, setActiveIso] = useState(null);
+  const toIso = (d) => formatDate(d, "yyyy-MM-dd");
+  const defaultDayIso = (() => {
+    if (value && value.getFullYear() === viewYear && value.getMonth() === viewMonth)
+      return toIso(value);
+    if (today.getFullYear() === viewYear && today.getMonth() === viewMonth) return toIso(today);
+    return toIso(new Date(viewYear, viewMonth, 1));
+  })();
+  const rovingDayIso = activeIso ?? defaultDayIso;
+  const focusDayIso = (iso) => {
+    const el = dayGridRef.current?.querySelector(`button[data-date="${iso}"]`);
+    if (el && !el.disabled) {
+      el.focus();
+      setActiveIso(iso);
+      return true;
+    }
+    return false;
+  };
+  const moveDayFocus = (deltaDays) => {
+    const activeEl = document.activeElement;
+    const currentIso = activeEl?.getAttribute("data-date") ?? rovingDayIso;
+    const base = parseDate(currentIso);
+    if (!base) return;
+    let candidate = addDays(base, deltaDays);
+    for (let attempts = 0; attempts < 42; attempts++) {
+      const iso = toIso(candidate);
+      const el = dayGridRef.current?.querySelector(`button[data-date="${iso}"]`);
+      if (el && !el.disabled) {
+        el.focus();
+        setActiveIso(iso);
+        return;
+      }
+      if (!el) {
+        pendingFocusIsoRef.current = iso;
+        setActiveIso(iso);
+        navigate(candidate.getFullYear(), candidate.getMonth());
+        return;
+      }
+      candidate = addDays(candidate, deltaDays);
+    }
+  };
+  useEffect(() => {
+    const iso = pendingFocusIsoRef.current;
+    if (!iso) return;
+    const el = dayGridRef.current?.querySelector(`button[data-date="${iso}"]`);
+    if (el) {
+      el.focus();
+      pendingFocusIsoRef.current = null;
+    }
+  }, [days]);
+  const handleDayGridKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        moveDayFocus(-1);
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        moveDayFocus(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveDayFocus(-7);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        moveDayFocus(7);
+        break;
+      case "Home":
+        e.preventDefault();
+        focusDayIso(toIso(new Date(viewYear, viewMonth, 1)));
+        break;
+      case "End":
+        e.preventDefault();
+        focusDayIso(toIso(new Date(viewYear, viewMonth + 1, 0)));
+        break;
+      case "Enter":
+      case " ": {
+        const activeEl = document.activeElement;
+        const iso = activeEl?.getAttribute("data-date");
+        if (iso) {
+          e.preventDefault();
+          const d = parseDate(iso);
+          if (d) selectDay(d);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const [activeMonthIdx, setActiveMonthIdx] = useState(null);
+  const rovingMonthIdx = activeMonthIdx ?? viewMonth;
+  const monthGridRef = useRef(null);
+  const focusMonthIdx = (idx) => {
+    const els = monthGridRef.current?.querySelectorAll('button[role="gridcell"]');
+    els?.[idx]?.focus();
+    setActiveMonthIdx(idx);
+  };
+  const handleMonthKeyDown = (e, idx) => {
+    let target = idx;
+    switch (e.key) {
+      case "ArrowRight":
+        target = Math.min(11, idx + 1);
+        break;
+      case "ArrowLeft":
+        target = Math.max(0, idx - 1);
+        break;
+      case "ArrowDown":
+        target = Math.min(11, idx + 3);
+        break;
+      case "ArrowUp":
+        target = Math.max(0, idx - 3);
+        break;
+      case "Home":
+        target = 0;
+        break;
+      case "End":
+        target = 11;
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        selectMonth(idx);
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+    focusMonthIdx(target);
+  };
+  const containerClass = classNames(getCalendarContainerClasses(fullscreen), className);
+  return /* @__PURE__ */ jsxs("div", { className: containerClass, role: "group", children: [
+    /* @__PURE__ */ jsxs("div", { className: calendarHeaderClasses, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: calendarNavButtonClasses,
+          "aria-label": mode === "month" ? labels.previousMonth : labels.previousYear,
+          onClick: mode === "month" ? prevMonth : prevYear,
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: calendarTitleClasses, children: mode === "month" ? formatMonthYear(viewYear, viewMonth, localeCode) : `${viewYear}` }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: calendarNavButtonClasses,
+          "aria-label": mode === "month" ? labels.nextMonth : labels.nextYear,
+          onClick: mode === "month" ? nextMonth : nextYear,
+          children: "\u203A"
+        }
+      )
+    ] }),
+    mode === "year" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2", role: "grid", ref: monthGridRef, children: monthRows.map((row, ri) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", role: "row", children: row.map((m, ci) => {
+      const i = ri * 3 + ci;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "gridcell",
+          "aria-selected": viewMonth === i,
+          tabIndex: rovingMonthIdx === i ? 0 : -1,
+          className: getCalendarMonthClasses(viewMonth === i),
+          onClick: () => selectMonth(i),
+          onFocus: () => setActiveMonthIdx(i),
+          onKeyDown: (e) => handleMonthKeyDown(e, i),
+          children: m
+        },
+        i
+      );
+    }) }, ri)) }) : /* @__PURE__ */ jsxs("div", { role: "grid", "aria-rowcount": 7, "aria-colcount": 7, ref: dayGridRef, children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", role: "row", children: weekdayNames.map((wd) => /* @__PURE__ */ jsx("div", { className: calendarWeekdayClasses, role: "columnheader", children: wd }, wd)) }),
+      weeks.map((week, wi) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", role: "row", onKeyDown: handleDayGridKeyDown, children: week.map((date) => {
+        const isCurrentMonth = date.getMonth() === viewMonth;
+        const isSelected = value ? isSameDay(date, value) : false;
+        const isTodayDate = isSameDay(date, today);
+        const isDisabled = !!disabledDate?.(date);
+        const iso = toIso(date);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "gridcell",
+            "data-date": iso,
+            "aria-label": iso,
+            "aria-selected": isSelected,
+            "aria-current": isTodayDate ? "date" : void 0,
+            disabled: isDisabled,
+            tabIndex: rovingDayIso === iso && !isDisabled ? 0 : -1,
+            className: classNames(
+              getCalendarDayClasses(isSelected, isTodayDate, isCurrentMonth, isDisabled),
+              "justify-self-center my-0.5"
+            ),
+            onClick: () => selectDay(date),
+            onFocus: () => setActiveIso(iso),
+            children: date.getDate()
+          },
+          iso
+        );
+      }) }, wi))
+    ] })
+  ] });
+};
+var Calendar_default = Calendar;
+
+export {
+  Calendar,
+  Calendar_default
+};

package/dist/{chunk-W6AWN7BC.js → chunk-WLORVPTR.js}

@@ -3,13 +3,13 @@
 var _chunkXTV5JLLCjs = require('./chunk-XTV5JLLC.js');
 
 
-var _chunkWV5XHYW6js = require('./chunk-WV5XHYW6.js');
+var _chunk23XPDNCAjs = require('./chunk-23XPDNCA.js');
 
 
 var _chunkAX5XRD2Qjs = require('./chunk-AX5XRD2Q.js');
 
 
-var _chunkUVMQJOTXjs = require('./chunk-UVMQJOTX.js');
+var _chunkSK7PXSVEjs = require('./chunk-SK7PXSVE.js');
 
 
 var _chunkE5GD3H7Ljs = require('./chunk-E5GD3H7L.js');
@@ -326,7 +326,7 @@ var ScatterChart = ({
     }
   );
   const tooltip = showTooltip && hoverable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkUVMQJOTXjs.ChartTooltip,
+    _chunkSK7PXSVEjs.ChartTooltip,
     {
       content: tooltipContent,
       visible: resolvedHoveredIndex !== null && tooltipContent !== "",
@@ -343,7 +343,7 @@ var ScatterChart = ({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkWV5XHYW6js.ChartLegend,
+      _chunk23XPDNCAjs.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,

package/dist/{chunk-J5N5OQWB.mjs → chunk-WOEX4S6J.mjs}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-6QML6T3Y.mjs";
 import {
   ChartLegend
-} from "./chunk-UBP7HZSU.mjs";
+} from "./chunk-ZG2W4HS5.mjs";
 import {
   ChartSeries
 } from "./chunk-SDLMB34Y.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-O6YIPNXX.mjs";
 import {
   ChartAxis
 } from "./chunk-RQSQXQN6.mjs";
@@ -302,6 +302,9 @@ var BarChart = ({
               } : null
             },
             tabIndex: selectable ? 0 : void 0,
+            role: selectable ? "button" : "img",
+            "aria-label": bar.datum.label ?? String(bar.datum.x),
+            "data-bar-index": bar.index,
             onMouseEnter: (e) => handleMouseEnter(bar.index, e),
             onMouseMove: handleMouseMove,
             onMouseLeave: handleMouseLeave,