@nori-ui/core 1.0.6 → 1.1.0

package/dist/{chunk-X7APG7G2.js → chunk-HZKXPN6B.js}

@@ -1,9 +1,9 @@
-import { Select } from './chunk-ZQMNGPLE.js';
-import { useTranslation } from './chunk-RFW5SRZA.js';
+import { Select } from './chunk-UJ5KFRDE.js';
+import { useTranslation } from './chunk-MJ4AGXS7.js';
 import { useThemeColors } from './chunk-R5JMDDCB.js';
 import { __name } from './chunk-WCQVDF3K.js';
 import { today, getLocalTimeZone, CalendarDate, startOfMonth } from '@internationalized/date';
-import { createContext, useState, useCallback, useContext, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
+import { createContext, useState, useCallback, useContext, useEffect, useRef, useLayoutEffect, useMemo } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { jsx, Fragment, jsxs } from 'nativewind/jsx-runtime';
 
@@ -26,6 +26,13 @@ var useLocale = /* @__PURE__ */ __name(() => {
   return ctx ?? detectLocale();
 }, "useLocale");
 
+// src/components/Calendar/scroll/ScrollBody.tsx
+var ScrollBody = /* @__PURE__ */ __name((_props) => {
+  throw new Error(
+    "[Calendar] ScrollBody: no platform implementation resolved. Ensure your bundler honors *.web.tsx / *.native.tsx extensions."
+  );
+}, "ScrollBody");
+
 // src/components/Calendar/state/locale-utils.ts
 var getFirstDayOfWeek = /* @__PURE__ */ __name((locale) => {
   try {
@@ -541,7 +548,7 @@ var Caption = /* @__PURE__ */ __name(({
         alignSelf: "center"
       },
       children: [
-        /* @__PURE__ */ jsx(NavButton, { label: t("calendar.header.previous", { defaultValue: "Previous" }), onPress: onPrev, children: "\u2039" }),
+        /* @__PURE__ */ jsx(NavButton, { label: t("calendar.header.previous", { defaultValue: "Previous month" }), onPress: onPrev, children: "\u2039" }),
         /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", gap: monthGap, width: titleRowWidth }, children: showMultiTitles ? months.map((m, i) => /* @__PURE__ */ jsx(View, { style: { width: gridWidth, alignItems: "center" }, children: caption === "dropdown" && view === "day" ? /* @__PURE__ */ jsx(
           DropdownPair,
           {
@@ -587,7 +594,7 @@ var Caption = /* @__PURE__ */ __name(({
             drilldown: true
           }
         ) }) }),
-        /* @__PURE__ */ jsx(NavButton, { label: t("calendar.header.next", { defaultValue: "Next" }), onPress: onNext, children: "\u203A" })
+        /* @__PURE__ */ jsx(NavButton, { label: t("calendar.header.next", { defaultValue: "Next month" }), onPress: onNext, children: "\u203A" })
       ]
     }
   );
@@ -630,8 +637,53 @@ var DropdownPair = /* @__PURE__ */ __name(({ month, year, monthOptions, yearOpti
   ] });
 }, "DropdownPair");
 var CELL_SIZE = 40;
-var DayCell = /* @__PURE__ */ __name(({ ctx, onPress, onHoverIn, onHoverOut, renderDay }) => {
+var formatterCache = /* @__PURE__ */ new Map();
+var RUNTIME_DEFAULT_LOCALE_KEY = "__default__";
+var getDayFormatter = /* @__PURE__ */ __name((locale) => {
+  const key = locale ?? RUNTIME_DEFAULT_LOCALE_KEY;
+  const cached = formatterCache.get(key);
+  if (cached) {
+    return cached;
+  }
+  try {
+    const fmt = new Intl.DateTimeFormat(locale, {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+      timeZone: "UTC"
+    });
+    formatterCache.set(key, fmt);
+    return fmt;
+  } catch {
+    return null;
+  }
+}, "getDayFormatter");
+var formatDayLabel = /* @__PURE__ */ __name((ctx, locale) => {
+  const jsDate = new Date(Date.UTC(ctx.date.year, ctx.date.month - 1, ctx.date.day));
+  const fmt = getDayFormatter(locale);
+  const base = fmt ? fmt.format(jsDate) : (
+    // Fallback if the runtime rejects the locale tag.
+    `${ctx.date.month}/${ctx.date.day}/${ctx.date.year}`
+  );
+  const suffixes = [];
+  if (ctx.isToday) {
+    suffixes.push("today");
+  }
+  if (ctx.isSelected || ctx.isRangeStart || ctx.isRangeEnd) {
+    suffixes.push("selected");
+  }
+  if (ctx.isInRange && !ctx.isRangeStart && !ctx.isRangeEnd) {
+    suffixes.push("in range");
+  }
+  if (ctx.isUnavailable) {
+    suffixes.push("unavailable");
+  }
+  return suffixes.length > 0 ? `${base}, ${suffixes.join(", ")}` : base;
+}, "formatDayLabel");
+var DayCell = /* @__PURE__ */ __name(({ ctx, onPress, onHoverIn, onHoverOut, renderDay, locale }) => {
   const colors = useThemeColors();
+  const accessibilityLabel = formatDayLabel(ctx, locale);
   const isSelectedLike = ctx.isSelected || ctx.isRangeStart || ctx.isRangeEnd;
   const isInsideRange = ctx.isInRange || ctx.isInPreviewRange;
   const isRangeMiddle = isInsideRange && !isSelectedLike;
@@ -640,7 +692,8 @@ var DayCell = /* @__PURE__ */ __name(({ ctx, onPress, onHoverIn, onHoverOut, ren
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityState: { disabled: ctx.isUnavailable },
+      accessibilityLabel,
+      accessibilityState: { disabled: ctx.isUnavailable, selected: isSelectedLike },
       disabled: ctx.isUnavailable,
       onPress,
       ...onHoverIn ? { onHoverIn } : {},
@@ -898,6 +951,7 @@ var DayGrid = /* @__PURE__ */ __name((props) => {
               DayCell,
               {
                 ctx,
+                locale,
                 onPress: () => onDayPress(date),
                 ...onDayHover ? {
                   onHoverIn: /* @__PURE__ */ __name(() => onDayHover(date), "onHoverIn"),
@@ -1060,6 +1114,9 @@ var focusDayCell = /* @__PURE__ */ __name((root, date, force) => {
   if (!root) {
     return;
   }
+  if (typeof document === "undefined" || typeof root.contains !== "function") {
+    return;
+  }
   if (!force && !root.contains(document.activeElement)) {
     return;
   }
@@ -1164,8 +1221,13 @@ var SingleOrMultiCalendar = /* @__PURE__ */ __name((props) => {
   const colors = useThemeColors();
   const firstDayOfWeek = props.firstDayOfWeek ?? getFirstDayOfWeek(locale);
   const weekendDays = props.weekendDays ?? getWeekendDays(locale);
-  const visibleMonths = pickVisibleMonths(props.visibleMonths, containerWidth);
+  const visibleMonths = props.behavior === "scroll" ? 1 : pickVisibleMonths(props.visibleMonths, containerWidth);
   const { innerWidth, gridsRowWidth } = surfaceMetrics(visibleMonths);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && props.behavior === "scroll" && typeof props.visibleMonths === "number" && props.visibleMonths > 1) {
+      console.warn('[Calendar] visibleMonths is ignored when behavior="scroll"; falling back to single column.');
+    }
+  }, [props.behavior, props.visibleMonths]);
   const containerRef = useRef(null);
   const state = useCalendarState({
     ...props.mode !== void 0 ? { mode: props.mode } : {},
@@ -1228,6 +1290,8 @@ var SingleOrMultiCalendar = /* @__PURE__ */ __name((props) => {
       setAnchor((a) => a.add({ years: -10 }));
     } else if (state.view === "month") {
       setAnchor((a) => a.add({ years: -1 }));
+    } else if (props.behavior === "scroll") {
+      state.moveFocus({ months: -1 });
     } else {
       setAnchor((a) => a.add({ months: -1 }));
     }
@@ -1237,6 +1301,8 @@ var SingleOrMultiCalendar = /* @__PURE__ */ __name((props) => {
       setAnchor((a) => a.add({ years: 10 }));
     } else if (state.view === "month") {
       setAnchor((a) => a.add({ years: 1 }));
+    } else if (props.behavior === "scroll") {
+      state.moveFocus({ months: 1 });
     } else {
       setAnchor((a) => a.add({ months: 1 }));
     }
@@ -1299,22 +1365,44 @@ var SingleOrMultiCalendar = /* @__PURE__ */ __name((props) => {
           }
         ),
         /* @__PURE__ */ jsxs(FadeIn, { children: [
-          state.view === "day" && /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", gap: MONTH_GAP, alignSelf: "center", width: gridsRowWidth }, children: months.map((m) => /* @__PURE__ */ jsx(
-            DayGrid,
+          state.view === "day" && (props.behavior === "scroll" ? /* @__PURE__ */ jsx(
+            ScrollBody,
             {
-              visibleMonth: m,
-              locale,
               mode: props.mode ?? "single",
-              value: state.value,
+              locale,
               focusedDate: state.focusedDate,
-              isUnavailable: state.isUnavailable,
-              weekendDays,
+              onFocusedMonthChange: (next) => setAnchor(next),
+              value: state.value,
+              onSelectDate: (date) => state.selectDate(date, "click"),
               firstDayOfWeek,
-              onDayPress: (date) => state.selectDate(date, "click"),
+              weekendDays,
+              ...props.minValue !== void 0 ? { minValue: props.minValue } : {},
+              ...props.maxValue !== void 0 ? { maxValue: props.maxValue } : {},
+              ...props.isDateUnavailable !== void 0 ? { isDateUnavailable: props.isDateUnavailable } : {},
               ...renderDay ? { renderDay } : {}
-            },
-            `${m.year}-${m.month}`
-          )) }),
+            }
+          ) : /* @__PURE__ */ jsx(
+            View,
+            {
+              style: { flexDirection: "row", gap: MONTH_GAP, alignSelf: "center", width: gridsRowWidth },
+              children: months.map((m) => /* @__PURE__ */ jsx(
+                DayGrid,
+                {
+                  visibleMonth: m,
+                  locale,
+                  mode: props.mode ?? "single",
+                  value: state.value,
+                  focusedDate: state.focusedDate,
+                  isUnavailable: state.isUnavailable,
+                  weekendDays,
+                  firstDayOfWeek,
+                  onDayPress: (date) => state.selectDate(date, "click"),
+                  ...renderDay ? { renderDay } : {}
+                },
+                `${m.year}-${m.month}`
+              ))
+            }
+          )),
           state.view === "month" && /* @__PURE__ */ jsx(View, { style: { alignItems: "center" }, children: /* @__PURE__ */ jsx(
             MonthGrid,
             {
@@ -1349,8 +1437,13 @@ var RangeCalendar = /* @__PURE__ */ __name((props) => {
   const colors = useThemeColors();
   const firstDayOfWeek = props.firstDayOfWeek ?? getFirstDayOfWeek(locale);
   const weekendDays = props.weekendDays ?? getWeekendDays(locale);
-  const visibleMonths = pickVisibleMonths(props.visibleMonths, containerWidth);
+  const visibleMonths = props.behavior === "scroll" ? 1 : pickVisibleMonths(props.visibleMonths, containerWidth);
   const { innerWidth, gridsRowWidth } = surfaceMetrics(visibleMonths);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && props.behavior === "scroll" && typeof props.visibleMonths === "number" && props.visibleMonths > 1) {
+      console.warn('[Calendar] visibleMonths is ignored when behavior="scroll"; falling back to single column.');
+    }
+  }, [props.behavior, props.visibleMonths]);
   const containerRef = useRef(null);
   const range = useRangeState({
     ...props.value !== void 0 ? { value: props.value } : {},
@@ -1428,6 +1521,8 @@ var RangeCalendar = /* @__PURE__ */ __name((props) => {
       setAnchor((a) => a.add({ years: -10 }));
     } else if (view === "month") {
       setAnchor((a) => a.add({ years: -1 }));
+    } else if (props.behavior === "scroll") {
+      setFocusedDate((f) => f.add({ months: -1 }));
     } else {
       setAnchor((a) => a.add({ months: -1 }));
     }
@@ -1437,6 +1532,8 @@ var RangeCalendar = /* @__PURE__ */ __name((props) => {
       setAnchor((a) => a.add({ years: 10 }));
     } else if (view === "month") {
       setAnchor((a) => a.add({ years: 1 }));
+    } else if (props.behavior === "scroll") {
+      setFocusedDate((f) => f.add({ months: 1 }));
     } else {
       setAnchor((a) => a.add({ months: 1 }));
     }
@@ -1507,24 +1604,47 @@ var RangeCalendar = /* @__PURE__ */ __name((props) => {
           }
         ),
         /* @__PURE__ */ jsxs(FadeIn, { children: [
-          view === "day" && /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", gap: MONTH_GAP, alignSelf: "center", width: gridsRowWidth }, children: months.map((m) => /* @__PURE__ */ jsx(
-            DayGrid,
+          view === "day" && (props.behavior === "scroll" ? /* @__PURE__ */ jsx(
+            ScrollBody,
             {
-              visibleMonth: m,
-              locale,
               mode: "range",
+              locale,
+              focusedDate,
+              onFocusedMonthChange: (next) => setAnchor(next),
               value: range.value,
               previewRange: range.previewRange,
-              focusedDate,
-              isUnavailable: range.isUnavailable,
-              weekendDays,
+              onSelectDate: (date) => range.selectDate(date),
               firstDayOfWeek,
-              onDayPress: (date) => range.selectDate(date),
-              onDayHover: (date) => range.setHoveredDate(date),
+              weekendDays,
+              ...props.minValue !== void 0 ? { minValue: props.minValue } : {},
+              ...props.maxValue !== void 0 ? { maxValue: props.maxValue } : {},
+              ...props.isDateUnavailable !== void 0 ? { isDateUnavailable: props.isDateUnavailable } : {},
               ...renderDay ? { renderDay } : {}
-            },
-            `${m.year}-${m.month}`
-          )) }),
+            }
+          ) : /* @__PURE__ */ jsx(
+            View,
+            {
+              style: { flexDirection: "row", gap: MONTH_GAP, alignSelf: "center", width: gridsRowWidth },
+              children: months.map((m) => /* @__PURE__ */ jsx(
+                DayGrid,
+                {
+                  visibleMonth: m,
+                  locale,
+                  mode: "range",
+                  value: range.value,
+                  previewRange: range.previewRange,
+                  focusedDate,
+                  isUnavailable: range.isUnavailable,
+                  weekendDays,
+                  firstDayOfWeek,
+                  onDayPress: (date) => range.selectDate(date),
+                  onDayHover: (date) => range.setHoveredDate(date),
+                  ...renderDay ? { renderDay } : {}
+                },
+                `${m.year}-${m.month}`
+              ))
+            }
+          )),
           view === "month" && /* @__PURE__ */ jsx(View, { style: { alignItems: "center" }, children: /* @__PURE__ */ jsx(
             MonthGrid,
             {
@@ -1562,5 +1682,5 @@ var Calendar = CalendarRoot;
 Calendar.Caption = CalendarCaption;
 
 export { Calendar, LocaleProvider, detectLocale, useCalendarCaption, useLocale };
-//# sourceMappingURL=chunk-X7APG7G2.js.map
-//# sourceMappingURL=chunk-X7APG7G2.js.map
+//# sourceMappingURL=chunk-HZKXPN6B.js.map
+//# sourceMappingURL=chunk-HZKXPN6B.js.map