silver-ui 0.3.0 → 0.4.0

package/dist/{chunk-AH4AMQEO.js → chunk-6ONAGCCZ.js}

@@ -1,8 +1,9 @@
 import { plainDateIsEqual, plainDateIsBefore, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_MONTH_YEAR, plainDateIsInRange, DATE_FORMAT_WITH_WEEKDAY, getDaysInMonth, plainDateCreate, plainDateDayOfWeek, plainDateIsAfter, plainDateToday } from './chunk-QSEDH7T2.js';
 import { getBrowserTimezoneID } from './chunk-OX4ZMUF4.js';
-import { Button } from './chunk-HLN3JQYD.js';
-import { cx } from './chunk-GUKZNXTB.js';
-import { css } from './chunk-OD4DHHZH.js';
+import { Button } from './chunk-2LABTS4P.js';
+import { sva } from './chunk-IAVZKGZS.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { Temporal } from '@js-temporal/polyfill';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { memo, useMemo, useCallback, useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -107,149 +108,217 @@ function useGridFocus({
   );
   return { gridRef, handleKeyDown, focusCell, focusFirst, focusLast };
 }
-var styles = {
-  root: css({
-    display: "inline-block",
-    minW: "220px",
-    color: "fg",
-    fontFamily: "body"
-  }),
-  header: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "2",
-    mb: "2"
-  }),
-  monthYear: css({
-    flex: 1,
-    textAlign: "center",
-    fontSize: "sm",
-    fontWeight: "semibold"
-  }),
-  months: css({
-    display: "flex",
-    gap: "4"
-  }),
-  monthGrid: css({
-    flex: "1 1 0"
-  }),
-  weekHeader: css({
-    display: "grid",
-    gridTemplateColumns: "repeat(7, 1fr)",
-    mb: "1"
-  }),
-  weekHeaderWithNumbers: css({
-    gridTemplateColumns: "auto repeat(7, 1fr)"
-  }),
-  dayName: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    w: "component.md",
-    h: "component.md",
-    color: "fg.muted",
-    fontSize: "sm"
-  }),
-  daysGrid: css({
-    display: "grid",
-    gridTemplateColumns: "repeat(7, 1fr)"
-  }),
-  daysGridWithNumbers: css({
-    gridTemplateColumns: "auto repeat(7, 1fr)"
-  }),
-  weekRow: css({
-    display: "contents"
-  }),
-  weekNumber: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    w: "component.md",
-    h: "component.md",
-    color: "fg.muted",
-    fontSize: "sm"
-  }),
-  cell: css({
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    h: "component.md",
-    isolation: "isolate"
-  }),
-  rangeBackground: css({
-    position: "absolute",
-    insetBlock: "2px",
-    insetInline: 0,
-    bg: "bg.selected"
-  }),
-  previewBackground: css({
-    position: "absolute",
-    insetBlock: "2px",
-    insetInline: 0,
-    bg: "bg.subtle"
-  }),
-  rangeLeft: css({
-    left: "2px",
-    borderTopLeftRadius: "full",
-    borderBottomLeftRadius: "full"
-  }),
-  rangeRight: css({
-    right: "2px",
-    borderTopRightRadius: "full",
-    borderBottomRightRadius: "full"
-  }),
-  day: css({
-    position: "relative",
-    zIndex: 1,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    w: "component.sm",
-    h: "component.sm",
-    p: 0,
-    borderWidth: 0,
-    borderStyle: "none",
-    borderRadius: "full",
-    bg: "transparent",
-    color: "fg",
-    cursor: "pointer",
-    fontFamily: "inherit",
-    fontSize: "md",
-    transitionProperty: "background-color, color",
-    transitionDuration: "fast",
-    _hover: {
-      bg: "bg.subtle"
+
+// src/components/Calendar/Calendar.recipe.ts
+var calendarRecipe = sva({
+  slots: [
+    "root",
+    "header",
+    "monthYear",
+    "months",
+    "monthGrid",
+    "weekHeader",
+    "dayName",
+    "daysGrid",
+    "weekRow",
+    "weekNumber",
+    "cell",
+    "rangeBackground",
+    "day"
+  ],
+  base: {
+    root: {
+      display: "inline-block",
+      minW: "220px",
+      color: "fg",
+      fontFamily: "body"
+    },
+    header: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "2",
+      mb: "2"
+    },
+    monthYear: {
+      flex: 1,
+      textAlign: "center",
+      fontSize: "sm",
+      fontWeight: "semibold"
+    },
+    months: {
+      display: "flex",
+      gap: "4"
+    },
+    monthGrid: {
+      flex: "1 1 0"
+    },
+    weekHeader: {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, 1fr)",
+      mb: "1"
     },
-    _focusVisible: {
-      outlineWidth: "focus",
-      outlineStyle: "solid",
-      outlineColor: "primary",
-      outlineOffset: "focusOffset"
+    dayName: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "component.md",
+      h: "component.md",
+      color: "fg.muted",
+      fontSize: "sm"
     },
-    _disabled: {
-      cursor: "not-allowed"
+    daysGrid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, 1fr)"
+    },
+    weekRow: {
+      display: "contents"
+    },
+    weekNumber: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "component.md",
+      h: "component.md",
+      color: "fg.muted",
+      fontSize: "sm"
+    },
+    cell: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      h: "component.md",
+      isolation: "isolate"
+    },
+    rangeBackground: {
+      position: "absolute",
+      insetBlock: "2px",
+      insetInline: 0
+    },
+    day: {
+      position: "relative",
+      zIndex: 1,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "component.sm",
+      h: "component.sm",
+      p: 0,
+      borderWidth: 0,
+      borderStyle: "none",
+      borderRadius: "full",
+      bg: "transparent",
+      color: "fg",
+      cursor: "pointer",
+      fontFamily: "inherit",
+      fontSize: "md",
+      transitionProperty: "background-color, color",
+      transitionDuration: "fast",
+      _hover: {
+        bg: "bg.subtle"
+      },
+      _focusVisible: {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffset"
+      },
+      _disabled: {
+        cursor: "not-allowed"
+      }
     }
-  }),
-  dayOutside: css({
-    color: "fg.muted",
-    opacity: 0.55
-  }),
-  dayToday: css({
-    boxShadow: "inset 0 0 0 1px token(colors.border.emphasized)"
-  }),
-  daySelected: css({
-    bg: "primary",
-    color: "fg.onPrimary",
-    _hover: {
-      bg: "primary"
+  },
+  variants: {
+    // Reserve a leading column for ISO week numbers in the header and grid.
+    hasWeekNumbers: {
+      true: {
+        weekHeader: { gridTemplateColumns: "auto repeat(7, 1fr)" },
+        daysGrid: { gridTemplateColumns: "auto repeat(7, 1fr)" }
+      },
+      false: {}
+    },
+    isOutside: {
+      true: { day: { color: "fg.muted", opacity: 0.55 } },
+      false: {}
+    },
+    // Marker variant; the today ring is suppressed for selected/in-range days,
+    // so the real styling lives in compoundVariants below.
+    isToday: {
+      true: {},
+      false: {}
+    },
+    isSelected: {
+      true: {
+        day: {
+          bg: "primary",
+          color: "fg.onPrimary",
+          _hover: { bg: "primary" }
+        }
+      },
+      false: {}
+    },
+    // Marker variant; only used to suppress the today ring on range middles.
+    isInRange: {
+      true: {},
+      false: {}
+    },
+    // Declared after isOutside so the disabled opacity wins when both apply.
+    // Outside days are `aria-disabled` but intentionally not natively
+    // `disabled` (that would drop them from useGridFocus's dense-grid index
+    // math), so the not-allowed cursor is driven from this variant rather than
+    // the native `:disabled` pseudo.
+    isDisabled: {
+      true: { day: { opacity: 0.35, cursor: "not-allowed" } },
+      false: {}
+    },
+    rangeTone: {
+      range: { rangeBackground: { bg: "bg.selected" } },
+      preview: { rangeBackground: { bg: "bg.subtle" } }
+    },
+    roundedStart: {
+      true: {
+        rangeBackground: {
+          left: "2px",
+          borderTopLeftRadius: "full",
+          borderBottomLeftRadius: "full"
+        }
+      },
+      false: {}
+    },
+    roundedEnd: {
+      true: {
+        rangeBackground: {
+          right: "2px",
+          borderTopRightRadius: "full",
+          borderBottomRightRadius: "full"
+        }
+      },
+      false: {}
     }
-  }),
-  dayDisabled: css({
-    opacity: 0.35
-  })
-};
+  },
+  compoundVariants: [
+    {
+      isToday: true,
+      isSelected: false,
+      isInRange: false,
+      css: {
+        day: { boxShadow: "inset 0 0 0 1px token(colors.border.emphasized)" }
+      }
+    }
+  ],
+  defaultVariants: {
+    hasWeekNumbers: false,
+    isOutside: false,
+    isToday: false,
+    isSelected: false,
+    isInRange: false,
+    isDisabled: false,
+    rangeTone: "range",
+    roundedStart: false,
+    roundedEnd: false
+  }
+});
 function generateCalendarDays({
   year,
   month,
@@ -293,13 +362,6 @@ function checkDateDisabled(date, options) {
   }
   return options.getIsDateDisabled?.(date) ?? false;
 }
-function plainDateFromDataAttribute(value) {
-  return plainDateCreate(
-    parseInt(value.slice(0, 4)),
-    parseInt(value.slice(5, 7)),
-    parseInt(value.slice(8, 10))
-  );
-}
 function getSelectedTabDate({
   days,
   getIsDisabled,
@@ -377,10 +439,10 @@ function Calendar({
   const lastVisibleMonth = visibleMonths.at(-1) ?? baseMonth;
   const canNavigateNext = max == null || plainDateIsAfter(max.with({ day: 1 }), lastVisibleMonth);
   const navigateMonth = useCallback(
-    (delta, focusedDate, offset = 7) => {
+    (delta, nextFocus) => {
       const nextMonth = baseMonth.add({ months: delta });
-      if (focusedDate != null) {
-        setPendingFocus(focusedDate.add({ days: delta * offset }));
+      if (nextFocus != null) {
+        setPendingFocus(nextFocus);
       }
       onViewDateChange?.(nextMonth);
       if (!isViewDateControlled) {
@@ -420,17 +482,18 @@ function Calendar({
     [mode, onChange, rangeSelectionStart]
   );
   const handleNavigateNext = useCallback(
-    (focusedDate, offset) => navigateMonth(1, focusedDate, offset),
+    (nextFocus) => navigateMonth(1, nextFocus),
     [navigateMonth]
   );
   const handleNavigatePrevious = useCallback(
-    (focusedDate, offset) => navigateMonth(-1, focusedDate, offset),
+    (nextFocus) => navigateMonth(-1, nextFocus),
     [navigateMonth]
   );
   const handlePendingFocusHandled = useCallback(
     () => setPendingFocus(null),
     []
   );
+  const styles = calendarRecipe();
   return (
     // eslint-disable-next-line jsx-a11y-x/no-static-element-interactions
     /* @__PURE__ */ jsxs(
@@ -555,7 +618,7 @@ var MonthGrid = memo(function MonthGrid2({
   const getFocusedDate = useCallback(() => {
     const activeElement = document.activeElement;
     const date = activeElement?.dataset.date;
-    return date == null ? null : plainDateFromDataAttribute(date);
+    return date == null ? null : Temporal.PlainDate.from(date);
   }, []);
   const { gridRef, handleKeyDown } = useGridFocus({
     columns: 7,
@@ -563,25 +626,27 @@ var MonthGrid = memo(function MonthGrid2({
     onNavigateBefore: (_column, offset) => {
       const focusedDate = getFocusedDate();
       if (focusedDate != null) {
-        onNavigatePrevious(focusedDate, offset);
+        onNavigatePrevious(focusedDate.subtract({ days: offset }));
       }
     },
     onNavigateAfter: (_column, offset) => {
       const focusedDate = getFocusedDate();
       if (focusedDate != null) {
-        onNavigateNext(focusedDate, offset);
+        onNavigateNext(focusedDate.add({ days: offset }));
       }
     },
+    // Page keys move a whole month, keeping the same day. Temporal's default
+    // `constrain` overflow clamps to the month's last day (e.g. Jan 31 -> Feb 28).
     onPageUp: () => {
       const focusedDate = getFocusedDate();
       if (focusedDate != null) {
-        onNavigatePrevious(focusedDate, 7);
+        onNavigatePrevious(focusedDate.subtract({ months: 1 }));
       }
     },
     onPageDown: () => {
       const focusedDate = getFocusedDate();
       if (focusedDate != null) {
-        onNavigateNext(focusedDate, 7);
+        onNavigateNext(focusedDate.add({ months: 1 }));
       }
     }
   });
@@ -613,28 +678,18 @@ var MonthGrid = memo(function MonthGrid2({
       previewEnd = plainDateIsBefore(hoveredDate, rangeSelectionStart) ? rangeSelectionStart : hoveredDate;
     }
   }
+  const isSelectingRange = mode === "range" && rangeSelectionStart != null;
+  const styles = calendarRecipe({ hasWeekNumbers });
   return /* @__PURE__ */ jsxs("div", { className: styles.monthGrid, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cx(
-          styles.weekHeader,
-          hasWeekNumbers ? styles.weekHeaderWithNumbers : void 0
-        ),
-        children: [
-          hasWeekNumbers ? /* @__PURE__ */ jsx("div", { className: styles.dayName }) : null,
-          dayNames.map((dayName) => /* @__PURE__ */ jsx("div", { className: styles.dayName, role: "columnheader", children: dayName }, dayName))
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxs("div", { className: styles.weekHeader, children: [
+      hasWeekNumbers ? /* @__PURE__ */ jsx("div", { className: styles.dayName }) : null,
+      dayNames.map((dayName) => /* @__PURE__ */ jsx("div", { className: styles.dayName, role: "columnheader", children: dayName }, dayName))
+    ] }),
     /* @__PURE__ */ jsx(
       "div",
       {
         "aria-label": plainDateFormat(month, DATE_FORMAT_MONTH_YEAR),
-        className: cx(
-          styles.daysGrid,
-          hasWeekNumbers ? styles.daysGridWithNumbers : void 0
-        ),
+        className: styles.daysGrid,
         onKeyDown: handleKeyDown,
         ref: gridRef,
         role: "grid",
@@ -655,6 +710,7 @@ var MonthGrid = memo(function MonthGrid2({
                     dayIndex,
                     hasOutsideDays,
                     isDisabled: isDisabled(day.date),
+                    isSelectingRange,
                     isTabbable: tabbableDate != null && plainDateIsEqual(tabbableDate, day.date),
                     mode,
                     onDayClick,
@@ -689,12 +745,13 @@ var DayCell = memo(function DayCell2({
   today,
   hasOutsideDays,
   isDisabled,
+  isSelectingRange,
   isTabbable,
   onDayClick,
   onDayHover
 }) {
   if (day.isOutside && !hasOutsideDays) {
-    return /* @__PURE__ */ jsx("div", { className: styles.cell });
+    return /* @__PURE__ */ jsx("div", { className: calendarRecipe().cell });
   }
   const effectivelyDisabled = isDisabled || day.isOutside;
   const isToday = plainDateIsEqual(day.date, today);
@@ -707,40 +764,33 @@ var DayCell = memo(function DayCell2({
   const isPreviewEnd = previewEnd != null && plainDateIsEqual(day.date, previewEnd);
   const isFirstColumn = dayIndex === 0;
   const isLastColumn = dayIndex === 6;
+  const styles = calendarRecipe({
+    isOutside: day.isOutside,
+    isToday,
+    isSelected: isSelected || isRangeStart || isRangeEnd,
+    isInRange,
+    isDisabled: effectivelyDisabled
+  });
+  const rangeBackgroundClass = calendarRecipe({
+    rangeTone: "range",
+    roundedStart: isRangeStart || isFirstColumn,
+    roundedEnd: isRangeEnd || isLastColumn
+  }).rangeBackground;
+  const previewBackgroundClass = calendarRecipe({
+    rangeTone: "preview",
+    roundedStart: isPreviewStart || isFirstColumn,
+    roundedEnd: isPreviewEnd || isLastColumn
+  }).rangeBackground;
   return /* @__PURE__ */ jsxs("div", { className: styles.cell, children: [
-    isInRange ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(
-          styles.rangeBackground,
-          isRangeStart || isFirstColumn ? styles.rangeLeft : void 0,
-          isRangeEnd || isLastColumn ? styles.rangeRight : void 0
-        )
-      }
-    ) : null,
-    isInPreview ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(
-          styles.previewBackground,
-          isPreviewStart || isFirstColumn ? styles.rangeLeft : void 0,
-          isPreviewEnd || isLastColumn ? styles.rangeRight : void 0
-        )
-      }
-    ) : null,
+    isInRange ? /* @__PURE__ */ jsx("div", { className: rangeBackgroundClass }) : null,
+    isInPreview ? /* @__PURE__ */ jsx("div", { className: previewBackgroundClass }) : null,
     /* @__PURE__ */ jsx(
       "button",
       {
         "aria-disabled": effectivelyDisabled || void 0,
         "aria-label": plainDateFormat(day.date, DATE_FORMAT_WITH_WEEKDAY),
         "aria-selected": isSelected || isInRange || void 0,
-        className: cx(
-          styles.day,
-          day.isOutside ? styles.dayOutside : void 0,
-          isToday && !isSelected && !isInRange ? styles.dayToday : void 0,
-          isSelected || isRangeStart || isRangeEnd ? styles.daySelected : void 0,
-          effectivelyDisabled ? styles.dayDisabled : void 0
-        ),
+        className: styles.day,
         "data-date": day.date.toString(),
         disabled: isDisabled,
         onClick: () => {
@@ -749,11 +799,15 @@ var DayCell = memo(function DayCell2({
           }
         },
         onMouseEnter: () => {
-          if (!effectivelyDisabled) {
+          if (isSelectingRange && !effectivelyDisabled) {
             onDayHover(day.date);
           }
         },
-        onMouseLeave: () => onDayHover(null),
+        onMouseLeave: () => {
+          if (isSelectingRange) {
+            onDayHover(null);
+          }
+        },
         role: "gridcell",
         tabIndex: isTabbable ? 0 : -1,
         type: "button",
@@ -765,5 +819,5 @@ var DayCell = memo(function DayCell2({
 Calendar.displayName = "Calendar";
 
 export { Calendar };
-//# sourceMappingURL=chunk-AH4AMQEO.js.map
-//# sourceMappingURL=chunk-AH4AMQEO.js.map
+//# sourceMappingURL=chunk-6ONAGCCZ.js.map
+//# sourceMappingURL=chunk-6ONAGCCZ.js.map