silver-ui 0.3.0 → 0.3.1

package/dist/chunk-5D4LRSIV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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","file":"chunk-5D4LRSIV.js","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport {\n  useCallback,\n  useId,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {plainDateIsEqual, type PlainDate} from '../../internal/plainDate';\nimport {DateInput} from '../DateInput';\nimport {\n  Field,\n  getNecessity,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport type {IconComponent} from '../Icon';\nimport {TimeInput, type PlainTime} from '../TimeInput';\n\nexport type PlainDateTime = Temporal.PlainDateTime;\n\nexport type DateTimeInputProps = {\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Returns true for dates that should be disabled.\n   */\n  getIsDateDisabled?: (date: PlainDate) => boolean;\n  /**\n   * Supporting text rendered below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether to show the seconds field in the time input.\n   * @default false\n   */\n  hasSeconds?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the input is in a loading state.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Field label text.\n   */\n  label: string;\n  /**\n   * Icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Maximum selectable date-time.\n   */\n  max?: PlainDateTime;\n  /**\n   * Minimum selectable date-time.\n   */\n  min?: PlainDateTime;\n  /**\n   * Called when the selected date-time changes.\n   */\n  onChange: (value: PlainDateTime | undefined) => void;\n  /**\n   * Ref forwarded to the date input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size of the inputs.\n   * @default 'md'\n   */\n  size?: InputSize;\n  /**\n   * Validation status displayed below the input.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Currently selected date-time.\n   */\n  value: PlainDateTime | undefined;\n} & FieldNecessity;\n\nconst styles = {\n  row: css({\n    display: 'grid',\n    gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.75fr)',\n    gap: '2',\n  }),\n} as const;\n\nfunction splitDateTime(value: PlainDateTime | undefined): {\n  date: PlainDate | undefined;\n  time: PlainTime | undefined;\n} {\n  if (value == null) {\n    return {date: undefined, time: undefined};\n  }\n  return {\n    date: value.toPlainDate(),\n    time: value.toPlainTime(),\n  };\n}\n\nfunction combineDateTime(\n  date: PlainDate | undefined,\n  time: PlainTime | undefined,\n): PlainDateTime | undefined {\n  if (date == null && time == null) {\n    return undefined;\n  }\n  const resolvedDate = date ?? Temporal.Now.plainDateISO();\n  const resolvedTime = time ?? Temporal.Now.plainTimeISO();\n  return resolvedDate.toPlainDateTime(resolvedTime);\n}\n\nfunction clampTime(\n  time: PlainTime,\n  min: PlainTime | undefined,\n  max: PlainTime | undefined,\n): PlainTime {\n  if (min != null && Temporal.PlainTime.compare(time, min) < 0) {\n    return min;\n  }\n  if (max != null && Temporal.PlainTime.compare(time, max) > 0) {\n    return max;\n  }\n  return time;\n}\n\n/**\n * A combined date and time input with calendar popover and time fields.\n */\nexport function DateTimeInput({\n  label,\n  value,\n  onChange,\n  min,\n  max,\n  getIsDateDisabled,\n  hasSeconds = false,\n  size = 'md',\n  description,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isLoading = false,\n  status,\n  labelIcon,\n  labelTooltip,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: DateTimeInputProps): React.JSX.Element {\n  const fieldId = useId();\n  const {date, time} = useMemo(() => splitDateTime(value), [value]);\n  const minParts = useMemo(() => splitDateTime(min), [min]);\n  const maxParts = useMemo(() => splitDateTime(max), [max]);\n\n  const handleDateChange = useCallback(\n    (nextDate: PlainDate | undefined) => {\n      if (nextDate == null || time == null) {\n        onChange(combineDateTime(nextDate, time));\n        return;\n      }\n      const effectiveTimeMin =\n        min != null && nextDate.equals(min.toPlainDate())\n          ? min.toPlainTime()\n          : undefined;\n      const effectiveTimeMax =\n        max != null && nextDate.equals(max.toPlainDate())\n          ? max.toPlainTime()\n          : undefined;\n      onChange(\n        combineDateTime(\n          nextDate,\n          clampTime(time, effectiveTimeMin, effectiveTimeMax),\n        ),\n      );\n    },\n    [onChange, time, min, max],\n  );\n  const handleTimeChange = useCallback(\n    (nextTime: PlainTime | undefined) =>\n      onChange(combineDateTime(date, nextTime)),\n    [onChange, date],\n  );\n\n  const necessity = getNecessity(isOptional, isRequired);\n\n  return (\n    <Field\n      description={description}\n      inputId={fieldId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...necessity}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={status}>\n      <div\n        className={cx(styles.row, className)}\n        data-testid={dataTestId}\n        style={style}>\n        <DateInput\n          getIsDateDisabled={getIsDateDisabled}\n          htmlId={fieldId}\n          isDisabled={isDisabled}\n          isLabelHidden\n          isLoading={isLoading}\n          label={`${label} date`}\n          max={maxParts.date}\n          min={minParts.date}\n          onChange={handleDateChange}\n          ref={ref}\n          size={size}\n          value={date}\n        />\n        <TimeInput\n          hasSeconds={hasSeconds}\n          isDisabled={isDisabled}\n          isLabelHidden\n          isLoading={isLoading}\n          label={`${label} time`}\n          max={\n            date != null &&\n            maxParts.date != null &&\n            plainDateIsEqual(date, maxParts.date)\n              ? maxParts.time\n              : undefined\n          }\n          min={\n            date != null &&\n            minParts.date != null &&\n            plainDateIsEqual(date, minParts.date)\n              ? minParts.time\n              : undefined\n          }\n          onChange={handleTimeChange}\n          size={size}\n          value={time}\n        />\n      </div>\n    </Field>\n  );\n}\n\nDateTimeInput.displayName = 'DateTimeInput';\n"]}

package/dist/{chunk-OJKZS6HG.cjs → chunk-5GNYP3PH.cjs}

@@ -2,9 +2,10 @@
 
 var chunkCK3UJQRI_cjs = require('./chunk-CK3UJQRI.cjs');
 var chunkR37R7DEV_cjs = require('./chunk-R37R7DEV.cjs');
-var chunkYBPG5RPR_cjs = require('./chunk-YBPG5RPR.cjs');
-var chunk6BK4LUK4_cjs = require('./chunk-6BK4LUK4.cjs');
-var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
+var chunkBRB52QFV_cjs = require('./chunk-BRB52QFV.cjs');
+var chunk5QPM5LUS_cjs = require('./chunk-5QPM5LUS.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var polyfill = require('@js-temporal/polyfill');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -109,149 +110,217 @@ function useGridFocus({
   );
   return { gridRef, handleKeyDown, focusCell, focusFirst, focusLast };
 }
-var styles = {
-  root: chunkRU6JG3FS_cjs.css({
-    display: "inline-block",
-    minW: "220px",
-    color: "fg",
-    fontFamily: "body"
-  }),
-  header: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "2",
-    mb: "2"
-  }),
-  monthYear: chunkRU6JG3FS_cjs.css({
-    flex: 1,
-    textAlign: "center",
-    fontSize: "sm",
-    fontWeight: "semibold"
-  }),
-  months: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    gap: "4"
-  }),
-  monthGrid: chunkRU6JG3FS_cjs.css({
-    flex: "1 1 0"
-  }),
-  weekHeader: chunkRU6JG3FS_cjs.css({
-    display: "grid",
-    gridTemplateColumns: "repeat(7, 1fr)",
-    mb: "1"
-  }),
-  weekHeaderWithNumbers: chunkRU6JG3FS_cjs.css({
-    gridTemplateColumns: "auto repeat(7, 1fr)"
-  }),
-  dayName: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    w: "component.md",
-    h: "component.md",
-    color: "fg.muted",
-    fontSize: "sm"
-  }),
-  daysGrid: chunkRU6JG3FS_cjs.css({
-    display: "grid",
-    gridTemplateColumns: "repeat(7, 1fr)"
-  }),
-  daysGridWithNumbers: chunkRU6JG3FS_cjs.css({
-    gridTemplateColumns: "auto repeat(7, 1fr)"
-  }),
-  weekRow: chunkRU6JG3FS_cjs.css({
-    display: "contents"
-  }),
-  weekNumber: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    w: "component.md",
-    h: "component.md",
-    color: "fg.muted",
-    fontSize: "sm"
-  }),
-  cell: chunkRU6JG3FS_cjs.css({
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    h: "component.md",
-    isolation: "isolate"
-  }),
-  rangeBackground: chunkRU6JG3FS_cjs.css({
-    position: "absolute",
-    insetBlock: "2px",
-    insetInline: 0,
-    bg: "bg.selected"
-  }),
-  previewBackground: chunkRU6JG3FS_cjs.css({
-    position: "absolute",
-    insetBlock: "2px",
-    insetInline: 0,
-    bg: "bg.subtle"
-  }),
-  rangeLeft: chunkRU6JG3FS_cjs.css({
-    left: "2px",
-    borderTopLeftRadius: "full",
-    borderBottomLeftRadius: "full"
-  }),
-  rangeRight: chunkRU6JG3FS_cjs.css({
-    right: "2px",
-    borderTopRightRadius: "full",
-    borderBottomRightRadius: "full"
-  }),
-  day: chunkRU6JG3FS_cjs.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 = chunk5QPM5LUS_cjs.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"
+    },
+    dayName: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "component.md",
+      h: "component.md",
+      color: "fg.muted",
+      fontSize: "sm"
+    },
+    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"
+      }
+    }
+  },
+  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" } }
     },
-    _focusVisible: {
-      outlineWidth: "focus",
-      outlineStyle: "solid",
-      outlineColor: "primary",
-      outlineOffset: "focusOffset"
+    roundedStart: {
+      true: {
+        rangeBackground: {
+          left: "2px",
+          borderTopLeftRadius: "full",
+          borderBottomLeftRadius: "full"
+        }
+      },
+      false: {}
     },
-    _disabled: {
-      cursor: "not-allowed"
+    roundedEnd: {
+      true: {
+        rangeBackground: {
+          right: "2px",
+          borderTopRightRadius: "full",
+          borderBottomRightRadius: "full"
+        }
+      },
+      false: {}
     }
-  }),
-  dayOutside: chunkRU6JG3FS_cjs.css({
-    color: "fg.muted",
-    opacity: 0.55
-  }),
-  dayToday: chunkRU6JG3FS_cjs.css({
-    boxShadow: "inset 0 0 0 1px token(colors.border.emphasized)"
-  }),
-  daySelected: chunkRU6JG3FS_cjs.css({
-    bg: "primary",
-    color: "fg.onPrimary",
-    _hover: {
-      bg: "primary"
+  },
+  compoundVariants: [
+    {
+      isToday: true,
+      isSelected: false,
+      isInRange: false,
+      css: {
+        day: { boxShadow: "inset 0 0 0 1px token(colors.border.emphasized)" }
+      }
     }
-  }),
-  dayDisabled: chunkRU6JG3FS_cjs.css({
-    opacity: 0.35
-  })
-};
+  ],
+  defaultVariants: {
+    hasWeekNumbers: false,
+    isOutside: false,
+    isToday: false,
+    isSelected: false,
+    isInRange: false,
+    isDisabled: false,
+    rangeTone: "range",
+    roundedStart: false,
+    roundedEnd: false
+  }
+});
 function generateCalendarDays({
   year,
   month,
@@ -295,13 +364,6 @@ function checkDateDisabled(date, options) {
   }
   return options.getIsDateDisabled?.(date) ?? false;
 }
-function plainDateFromDataAttribute(value) {
-  return chunkCK3UJQRI_cjs.plainDateCreate(
-    parseInt(value.slice(0, 4)),
-    parseInt(value.slice(5, 7)),
-    parseInt(value.slice(8, 10))
-  );
-}
 function getSelectedTabDate({
   days,
   getIsDisabled,
@@ -379,10 +441,10 @@ function Calendar({
   const lastVisibleMonth = visibleMonths.at(-1) ?? baseMonth;
   const canNavigateNext = max == null || chunkCK3UJQRI_cjs.plainDateIsAfter(max.with({ day: 1 }), lastVisibleMonth);
   const navigateMonth = react.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) {
@@ -422,23 +484,24 @@ function Calendar({
     [mode, onChange, rangeSelectionStart]
   );
   const handleNavigateNext = react.useCallback(
-    (focusedDate, offset) => navigateMonth(1, focusedDate, offset),
+    (nextFocus) => navigateMonth(1, nextFocus),
     [navigateMonth]
   );
   const handleNavigatePrevious = react.useCallback(
-    (focusedDate, offset) => navigateMonth(-1, focusedDate, offset),
+    (nextFocus) => navigateMonth(-1, nextFocus),
     [navigateMonth]
   );
   const handlePendingFocusHandled = react.useCallback(
     () => setPendingFocus(null),
     []
   );
+  const styles = calendarRecipe();
   return (
     // eslint-disable-next-line jsx-a11y-x/no-static-element-interactions
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: chunk6BK4LUK4_cjs.cx(styles.root, className),
+        className: chunkSPDVNY2Z_cjs.cx(styles.root, className),
         "data-testid": dataTestId,
         onKeyDown: (event) => {
           if (mode === "range" && rangeSelectionStart != null && event.key === "Escape") {
@@ -451,7 +514,7 @@ function Calendar({
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkYBPG5RPR_cjs.Button,
+              chunkBRB52QFV_cjs.Button,
               {
                 icon: lucideReact.ChevronLeft,
                 isDisabled: !canNavigatePrevious,
@@ -464,7 +527,7 @@ function Calendar({
             ),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.monthYear, children: monthYearLabel }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkYBPG5RPR_cjs.Button,
+              chunkBRB52QFV_cjs.Button,
               {
                 icon: lucideReact.ChevronRight,
                 isDisabled: !canNavigateNext,
@@ -557,7 +620,7 @@ var MonthGrid = react.memo(function MonthGrid2({
   const getFocusedDate = react.useCallback(() => {
     const activeElement = document.activeElement;
     const date = activeElement?.dataset.date;
-    return date == null ? null : plainDateFromDataAttribute(date);
+    return date == null ? null : polyfill.Temporal.PlainDate.from(date);
   }, []);
   const { gridRef, handleKeyDown } = useGridFocus({
     columns: 7,
@@ -565,25 +628,27 @@ var MonthGrid = react.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 }));
       }
     }
   });
@@ -615,28 +680,17 @@ var MonthGrid = react.memo(function MonthGrid2({
       previewEnd = chunkCK3UJQRI_cjs.plainDateIsBefore(hoveredDate, rangeSelectionStart) ? rangeSelectionStart : hoveredDate;
     }
   }
+  const styles = calendarRecipe({ hasWeekNumbers });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.monthGrid, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: chunk6BK4LUK4_cjs.cx(
-          styles.weekHeader,
-          hasWeekNumbers ? styles.weekHeaderWithNumbers : void 0
-        ),
-        children: [
-          hasWeekNumbers ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dayName }) : null,
-          dayNames.map((dayName) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dayName, role: "columnheader", children: dayName }, dayName))
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.weekHeader, children: [
+      hasWeekNumbers ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dayName }) : null,
+      dayNames.map((dayName) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dayName, role: "columnheader", children: dayName }, dayName))
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         "aria-label": chunkCK3UJQRI_cjs.plainDateFormat(month, chunkCK3UJQRI_cjs.DATE_FORMAT_MONTH_YEAR),
-        className: chunk6BK4LUK4_cjs.cx(
-          styles.daysGrid,
-          hasWeekNumbers ? styles.daysGridWithNumbers : void 0
-        ),
+        className: styles.daysGrid,
         onKeyDown: handleKeyDown,
         ref: gridRef,
         role: "grid",
@@ -696,7 +750,7 @@ var DayCell = react.memo(function DayCell2({
   onDayHover
 }) {
   if (day.isOutside && !hasOutsideDays) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.cell });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: calendarRecipe().cell });
   }
   const effectivelyDisabled = isDisabled || day.isOutside;
   const isToday = chunkCK3UJQRI_cjs.plainDateIsEqual(day.date, today);
@@ -709,40 +763,33 @@ var DayCell = react.memo(function DayCell2({
   const isPreviewEnd = previewEnd != null && chunkCK3UJQRI_cjs.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__ */ jsxRuntime.jsxs("div", { className: styles.cell, children: [
-    isInRange ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: chunk6BK4LUK4_cjs.cx(
-          styles.rangeBackground,
-          isRangeStart || isFirstColumn ? styles.rangeLeft : void 0,
-          isRangeEnd || isLastColumn ? styles.rangeRight : void 0
-        )
-      }
-    ) : null,
-    isInPreview ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: chunk6BK4LUK4_cjs.cx(
-          styles.previewBackground,
-          isPreviewStart || isFirstColumn ? styles.rangeLeft : void 0,
-          isPreviewEnd || isLastColumn ? styles.rangeRight : void 0
-        )
-      }
-    ) : null,
+    isInRange ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: rangeBackgroundClass }) : null,
+    isInPreview ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: previewBackgroundClass }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         "aria-disabled": effectivelyDisabled || void 0,
         "aria-label": chunkCK3UJQRI_cjs.plainDateFormat(day.date, chunkCK3UJQRI_cjs.DATE_FORMAT_WITH_WEEKDAY),
         "aria-selected": isSelected || isInRange || void 0,
-        className: chunk6BK4LUK4_cjs.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: () => {
@@ -767,5 +814,5 @@ var DayCell = react.memo(function DayCell2({
 Calendar.displayName = "Calendar";
 
 exports.Calendar = Calendar;
-//# sourceMappingURL=chunk-OJKZS6HG.cjs.map
-//# sourceMappingURL=chunk-OJKZS6HG.cjs.map
+//# sourceMappingURL=chunk-5GNYP3PH.cjs.map
+//# sourceMappingURL=chunk-5GNYP3PH.cjs.map