panelui-native 0.25.0 → 0.30.0

package/lib/module/components/calendar/index.js

@@ -0,0 +1,792 @@
+"use strict";
+
+/**
+ * Calendar — a month of days, for picking one, several, or a range.
+ *
+ * ```tsx
+ * const [day, setDay] = useState<Date>();
+ *
+ * <Calendar mode="single" selected={day} onSelect={setDay} />
+ * ```
+ *
+ * ## The grid is always six weeks
+ *
+ * A month needs five rows or six depending on what day it starts on. Drawing
+ * only the rows a month uses makes the calendar change height as it is paged
+ * through — everything below it jumps, and the days themselves appear to shift
+ * between months. So the grid is six rows always, and the spare cells hold the
+ * neighbouring months' days.
+ *
+ * ## How a range is drawn
+ *
+ * On the web the band under a selected range is one background with the ends
+ * rounded by `:first-child` and `:last-child`. There are no pseudo-classes
+ * here, so each cell draws its own piece of the band as a view *behind* the
+ * number, and works out for itself where that piece has to stop.
+ *
+ * Two questions, and they are not the same one:
+ *
+ * - **How wide.** A day between the two ends fills its cell, so the pieces meet
+ *   and the band reads as continuous. An end fills half its cell, from the
+ *   centre outwards towards the middle of the range — the half that is not
+ *   covered by the disc, so the disc appears to sit *on* the band rather than
+ *   beside it. That is the join the old three-piece version never made, which
+ *   is why a range used to read as two discs with a gap and a stripe.
+ * - **Where it is rounded.** Only where it genuinely stops: at an end of the
+ *   range, or at the edge of a row, because a range running over a weekend has
+ *   to close off on Saturday and open again on Sunday rather than trailing into
+ *   the gap between the two.
+ */
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "../../icons/index.js";
+import { Text } from "../../primitives/text.js";
+import { cn } from "../../utils/cn.js";
+import { Popover } from "../popover/index.js";
+import { addCalendarMonths, addDays, calendarDayNumber, calendarLongDate, calendarMonthLabel, calendarMonthNames, calendarParts, isAfter, isBefore, isSameCalendarMonth, isSameDay, isWithin, resolveCalendar, startOfCalendarMonth, startOfDay, weekdayNames } from "../../utils/date.js";
+
+/** A range under construction: `to` is undefined between the two taps. */
+
+/**
+ * What a `mode` selects. Written as a map so the root, the parts and the
+ * caller all read the same association rather than each casting their own way.
+ */
+
+/**
+ * Which days cannot be picked. A list, a span, or a rule — a rule because
+ * "no weekends" and "not in the past" are the two most common cases and
+ * neither can be written as a list that stays right tomorrow.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The corner radius of a day, and so of the band that runs between days.
+ *
+ * A number rather than a class because the band's four corners are set
+ * independently from the flags below, which no single `rounded-*` can express.
+ */
+const DAY_RADIUS = 8;
+const calendarVariants = tv({
+  slots: {
+    root: 'gap-3',
+    header: 'h-10 flex-row items-center justify-between gap-2',
+    nav: 'h-8 w-8 items-center justify-center rounded-full',
+    caption: 'flex-1 flex-row items-center justify-center gap-1'
+  },
+  variants: {
+    /** Draw the calendar's own panel, for one standing on the page. */
+    bordered: {
+      true: {
+        root: 'rounded-3xl border border-border bg-card p-3'
+      }
+    }
+  },
+  defaultVariants: {
+    bordered: true
+  }
+});
+const dayVariants = tv({
+  slots: {
+    cell: 'h-10 flex-1 items-center justify-center',
+    /** The range band, drawn behind the number so it can run cell to cell. */
+    band: 'absolute inset-y-0.5 bg-accent',
+    /**
+     * The fill on a selected day, or the ring on today. Square-ish rather than
+     * round: a circle has one point of contact with the band beside it, so a
+     * range reads as beads on a string. A rounded rectangle meets the band
+     * along its whole edge and the two become one shape.
+     */
+    disc: 'h-9 w-9 items-center justify-center rounded-lg',
+    label: 'text-sm'
+  },
+  variants: {
+    selected: {
+      true: {
+        disc: 'bg-primary',
+        label: 'text-primary-foreground'
+      }
+    },
+    today: {
+      true: {
+        disc: 'border border-primary',
+        label: 'text-primary'
+      }
+    },
+    outside: {
+      true: {
+        label: 'text-muted-foreground/40'
+      }
+    },
+    disabled: {
+      true: {
+        label: 'text-muted-foreground/30'
+      }
+    },
+    /** A ruled-out day inside a range still sits on it, but faintly. */
+    fadedBand: {
+      true: {
+        band: 'opacity-40'
+      }
+    }
+  },
+  compoundVariants: [
+  // A selected day inside a range keeps the solid fill; the band passes
+  // under it rather than the disc losing to it.
+  {
+    selected: true,
+    today: true,
+    class: {
+      label: 'text-primary-foreground'
+    }
+  }]
+});
+const CalendarContext = /*#__PURE__*/createContext(null);
+function useCalendar(component) {
+  const context = useContext(CalendarContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <Calendar>`);
+  }
+  return context;
+}
+
+/** Whether a rule, a list or a span rules this day out. */
+function isDisabled(date, disabled, minDate, maxDate) {
+  /*
+   * Both bounds are compared at local midnight, because they are about days
+   * and the caller almost always hands over a moment. `minDate={new Date()}`
+   * means "from today", and against a raw timestamp that would rule out every
+   * hour of today that has already passed — which is to say, today.
+   */
+  if (minDate && isBefore(date, startOfDay(minDate))) return true;
+  if (maxDate && isAfter(date, startOfDay(maxDate))) return true;
+  if (!disabled) return false;
+  if (typeof disabled === 'function') return disabled(date);
+  if (Array.isArray(disabled)) return disabled.some(day => isSameDay(day, date));
+  return isWithin(date, disabled.from, disabled.to);
+}
+function CalendarRoot({
+  className,
+  mode = 'single',
+  selected,
+  defaultSelected,
+  onSelect,
+  month: monthProp,
+  defaultMonth,
+  onMonthChange,
+  numberOfMonths = 1,
+  captionLayout = 'label',
+  disabled,
+  minDate,
+  maxDate,
+  startMonth,
+  endMonth,
+  weekStartsOn = 0,
+  showOutsideDays = true,
+  selectOutsideDays = false,
+  bordered = true,
+  locale,
+  calendar = 'gregory',
+  ...props
+}) {
+  // Settled once here rather than at each call site, so every part of the
+  // grid is certainly reading the same calendar.
+  const system = useMemo(() => resolveCalendar(calendar, locale), [calendar, locale]);
+  const [internalSelected, setInternalSelected] = useState(defaultSelected);
+  const isControlled = selected !== undefined;
+  const value = isControlled ? selected : internalSelected;
+
+  /**
+   * The month to open on: whatever is selected, so a picker reopened on a date
+   * chosen last year does not land on today and make it look unselected.
+   */
+  const initialMonth = useMemo(() => {
+    if (defaultMonth) return startOfCalendarMonth(defaultMonth, system, locale);
+    const first = value instanceof Date ? value : Array.isArray(value) ? value[0] : value && typeof value === 'object' && 'from' in value ? value.from : undefined;
+    return startOfCalendarMonth(first ?? new Date(), system, locale);
+    // Only the first render decides this; after that the month is its own state.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const [internalMonth, setInternalMonth] = useState(initialMonth);
+  const month = monthProp ? startOfCalendarMonth(monthProp, system, locale) : internalMonth;
+  const setMonth = useCallback(next => {
+    const settled = startOfCalendarMonth(next, system, locale);
+    if (!monthProp) setInternalMonth(settled);
+    onMonthChange?.(settled);
+  }, [monthProp, onMonthChange, system, locale]);
+  const commit = useCallback(next => {
+    if (!isControlled) setInternalSelected(next);
+    onSelect?.(next);
+  }, [isControlled, onSelect]);
+  const select = useCallback(date => {
+    const day = startOfDay(date);
+    if (mode === 'multiple') {
+      const current = value ?? [];
+      const without = current.filter(picked => !isSameDay(picked, day));
+      const next = without.length === current.length ? [...current, day] : without;
+      commit(next);
+      return;
+    }
+    if (mode === 'range') {
+      const current = value;
+      /*
+       * Three states, not two: no range, half a range, a whole range. A tap
+       * with half a range open closes it — unless it landed before the open
+       * end, in which case it becomes the new start. Anything else would ask
+       * someone who picked the wrong month first to undo before retrying.
+       */
+      if (!current || current.to || isBefore(day, current.from)) {
+        commit({
+          from: day
+        });
+      } else {
+        commit({
+          from: current.from,
+          to: day
+        });
+      }
+      return;
+    }
+
+    // Single. Tapping the selected day again clears it.
+    const current = value;
+    commit(isSameDay(current, day) ? undefined : day);
+  }, [mode, value, commit]);
+  const context = useMemo(() => ({
+    month,
+    setMonth,
+    locale,
+    system,
+    minDate,
+    maxDate,
+    startMonth,
+    endMonth,
+    captionLayout
+  }), [month, setMonth, locale, system, minDate, maxDate, startMonth, endMonth, captionLayout]);
+  const {
+    root
+  } = calendarVariants({
+    bordered
+  });
+  const months = Math.max(1, numberOfMonths);
+  return /*#__PURE__*/_jsx(CalendarContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(View, {
+      ...props,
+      className: cn(root(), className),
+      children: Array.from({
+        length: months
+      }, (_unused, offset) => /*#__PURE__*/_jsxs(View, {
+        className: "gap-2",
+        children: [/*#__PURE__*/_jsx(CalendarHeader, {
+          offset: offset,
+          lastOffset: months - 1
+        }), /*#__PURE__*/_jsx(CalendarGrid, {
+          month: addCalendarMonths(month, offset, system, locale),
+          mode: mode,
+          value: value,
+          onSelect: select,
+          disabled: disabled,
+          minDate: minDate,
+          maxDate: maxDate,
+          weekStartsOn: weekStartsOn,
+          showOutsideDays: showOutsideDays,
+          selectOutsideDays: selectOutsideDays,
+          locale: locale,
+          system: system
+        })]
+      }, offset))
+    })
+  });
+}
+CalendarRoot.displayName = 'Calendar';
+
+/* -------------------------------------------------------------------------- */
+/* Caption                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The row over a month: an arrow at each edge and the month's name between
+ * them.
+ *
+ * The arrows are pinned to the edges of the calendar rather than packed around
+ * the label, so the two targets are as far apart as the panel allows and the
+ * name sits centred over its own grid. With several months shown they are split
+ * across the run — back on the first, forward on the last — because both sets
+ * on both headers would page the whole run and give two ways to do one thing.
+ * The month that owns neither still lays out a spacer, or its name would slide
+ * off centre.
+ */
+function CalendarHeader({
+  offset = 0,
+  lastOffset = 0
+}) {
+  const {
+    month,
+    setMonth,
+    locale,
+    system,
+    minDate,
+    maxDate,
+    captionLayout
+  } = useCalendar('Calendar.Header');
+  const {
+    header,
+    caption
+  } = calendarVariants();
+  const shown = addCalendarMonths(month, offset, system, locale);
+  const canGoBack = !minDate || isBefore(startOfCalendarMonth(minDate, system, locale), month);
+  const canGoForward = !maxDate || isAfter(startOfCalendarMonth(maxDate, system, locale), shown);
+  return /*#__PURE__*/_jsxs(View, {
+    className: header(),
+    children: [offset === 0 ? /*#__PURE__*/_jsx(CalendarNav, {
+      direction: "previous",
+      disabled: !canGoBack,
+      onPress: () => setMonth(addCalendarMonths(month, -1, system, locale))
+    }) : /*#__PURE__*/_jsx(View, {
+      className: "h-8 w-8"
+    }), /*#__PURE__*/_jsx(View, {
+      className: caption(),
+      children: captionLayout === 'dropdown' ? /*#__PURE__*/_jsx(CalendarDropdowns, {
+        month: shown,
+        offset: offset
+      }) : /*#__PURE__*/_jsx(Text, {
+        weight: "semibold",
+        className: "text-base",
+        children: calendarMonthLabel(shown, system, locale)
+      })
+    }), offset === lastOffset ? /*#__PURE__*/_jsx(CalendarNav, {
+      direction: "next",
+      disabled: !canGoForward,
+      onPress: () => setMonth(addCalendarMonths(month, 1, system, locale))
+    }) : /*#__PURE__*/_jsx(View, {
+      className: "h-8 w-8"
+    })]
+  });
+}
+/**
+ * One paging arrow.
+ *
+ * Borderless: two bordered squares at the ends of a bordered panel read as a
+ * row of boxes rather than as controls, and the chevron is legible enough on
+ * its own. The target is still 32px with another 8 of slop around it.
+ */
+function CalendarNav({
+  direction,
+  disabled = false,
+  onPress
+}) {
+  const {
+    nav
+  } = calendarVariants();
+  return /*#__PURE__*/_jsx(Pressable, {
+    disabled: disabled,
+    onPress: onPress,
+    hitSlop: 8,
+    accessibilityRole: "button",
+    accessibilityLabel: direction === 'next' ? 'Next month' : 'Previous month',
+    accessibilityState: {
+      disabled
+    },
+    className: cn(nav(), disabled ? 'opacity-30' : 'active:bg-accent'),
+    children: direction === 'next' ? /*#__PURE__*/_jsx(ChevronRightIcon, {
+      size: 18
+    }) : /*#__PURE__*/_jsx(ChevronLeftIcon, {
+      size: 18
+    })
+  });
+}
+
+/**
+ * Month and year as chips that open a panel of options.
+ *
+ * The panel floats rather than opening in place, and the caption is the reason:
+ * it is a fixed-height row, so a list opened inside it has nowhere to go and
+ * spills over the grid below. A popover is laid out against the chip and
+ * clamped to the screen, which is the behaviour this needs and already has.
+ *
+ * Native pickers are still the wrong tool — a platform overlay on top of a
+ * calendar that is itself already in a popover is two floating layers deep for
+ * choosing a number, and it cannot show a Hijri year at all.
+ */
+function CalendarDropdowns({
+  month,
+  offset
+}) {
+  const {
+    setMonth,
+    locale,
+    system,
+    minDate,
+    maxDate,
+    startMonth,
+    endMonth
+  } = useCalendar('Calendar.Caption');
+
+  /*
+   * Everything here counts in the calendar on screen, not in the platform's.
+   * The names come from a real year of that calendar rather than from twelve
+   * Gregorian firsts, and the year list is that calendar's years — a Hijri
+   * caption offering Gregorian years is choosing from the wrong set.
+   */
+  const months = useMemo(() => calendarMonthNames(month, system, locale, 'short'), [month, system, locale]);
+  const current = calendarParts(month, system, locale);
+  /*
+   * `startMonth`/`endMonth` bound the lists, falling back to the selectable
+   * bounds and then to a century back and a decade on. They are separate props
+   * because the two questions are different: a birthday picker wants a hundred
+   * years on offer and no bound at all on the days inside them.
+   */
+  const first = startMonth ?? minDate;
+  const last = endMonth ?? maxDate;
+  const bounds = {
+    from: first ? calendarParts(first, system, locale).year : current.year - 100,
+    to: last ? calendarParts(last, system, locale).year : current.year + 10
+  };
+  /*
+   * Oldest first, the way a year runs. The list is long — a century by default
+   * — so it is opened scrolled to the year already in the caption rather than
+   * to either end, which is what makes the natural order affordable. Counting
+   * backwards was a way of putting the likely years at the top of a list that
+   * always opened at the top; it is not needed once the list opens in the right
+   * place, and it made every other use of the picker read upside down.
+   */
+  const years = Array.from({
+    length: Math.max(1, bounds.to - bounds.from + 1)
+  }, (_unused, index) => bounds.from + index);
+
+  /*
+   * Navigated by months rather than by building a date, because there is no
+   * `new Date(hijriYear, hijriMonth)`. A Hijri year is always twelve months,
+   * so a year jump is twelve of them.
+   */
+  const choose = months_ => {
+    setMonth(addCalendarMonths(month, months_ - offset, system, locale));
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CaptionDropdown, {
+      label: months[current.month - 1] ?? String(current.month),
+      accessibilityLabel: "Month",
+      options: months,
+      active: current.month - 1,
+      width: MONTH_LIST_WIDTH,
+      onSelect: index => choose(index - (current.month - 1))
+    }), /*#__PURE__*/_jsx(CaptionDropdown, {
+      label: String(current.year),
+      accessibilityLabel: "Year",
+      options: years.map(String),
+      active: years.indexOf(current.year),
+      width: YEAR_LIST_WIDTH,
+      onSelect: index => choose((years[index] - current.year) * 12)
+    })]
+  });
+}
+
+/** Panel widths. A month name needs the room; a four-digit year does not. */
+const MONTH_LIST_WIDTH = 176;
+const YEAR_LIST_WIDTH = 132;
+
+/**
+ * Height of one option row, and the tallest the list is allowed to be.
+ *
+ * The row height is a constant rather than a measurement because it is what
+ * turns "the twenty-ninth option" into a scroll offset, and that has to be
+ * known before the list has laid out — the whole point is that it opens in the
+ * right place rather than scrolling there afterwards.
+ */
+const OPTION_HEIGHT = 40;
+const LIST_MAX_HEIGHT = OPTION_HEIGHT * 6.5;
+
+/**
+ * One chip and the list of options it opens.
+ *
+ * A list, not a grid of chips. Twelve months tile into a panel well enough, but
+ * the same treatment applied to a century of years is a wall of four-digit
+ * numbers with no order the eye can follow — and it opened at whichever end
+ * happened to be first. Rows in a column read as a list, take a checkmark, and
+ * can be scrolled to a particular one.
+ */
+function CaptionDropdown({
+  label,
+  accessibilityLabel,
+  options,
+  active,
+  width,
+  onSelect
+}) {
+  const [open, setOpen] = useState(false);
+  const list = useRef(null);
+  /*
+   * The check is given a colour rather than left to its own fallback, which is
+   * white — right inside a filled control, invisible on this panel.
+   */
+  const rawTick = useCSSVariable('--color-foreground');
+  const tick = typeof rawTick === 'string' ? rawTick : undefined;
+
+  /*
+   * Opened on the option already in the caption, centred in the panel rather
+   * than pinned to an edge so the years either side of it are in view too. A
+   * hundred-item list that opens at the top is showing the one year nobody came
+   * to pick, and asks for a flick through a century to reach the one they did.
+   */
+  const scrollToActive = useCallback(() => {
+    if (active < 0) return;
+    const centred = active * OPTION_HEIGHT - LIST_MAX_HEIGHT / 2 + OPTION_HEIGHT / 2;
+    list.current?.scrollTo({
+      y: Math.max(0, centred),
+      animated: false
+    });
+  }, [active]);
+  return /*#__PURE__*/_jsxs(Popover, {
+    open: open,
+    onOpenChange: setOpen,
+    children: [/*#__PURE__*/_jsx(Popover.Trigger, {
+      children: /*#__PURE__*/_jsx(CaptionChip, {
+        label: label,
+        expanded: open,
+        accessibilityLabel: accessibilityLabel
+      })
+    }), /*#__PURE__*/_jsx(Popover.Content, {
+      align: "center",
+      width: width,
+      className: "p-1.5",
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        ref: list,
+        bounces: false,
+        showsVerticalScrollIndicator: false,
+        style: {
+          maxHeight: LIST_MAX_HEIGHT
+        }
+        // Fires once the rows exist, which is the first moment there is
+        // anything to scroll. Doing it on mount would scroll an empty list.
+        ,
+        onContentSizeChange: scrollToActive,
+        children: options.map((option, index) => {
+          const selected = index === active;
+          return /*#__PURE__*/_jsxs(Pressable, {
+            onPress: () => {
+              onSelect(index);
+              setOpen(false);
+            },
+            accessibilityRole: "button",
+            accessibilityState: {
+              selected
+            },
+            style: {
+              height: OPTION_HEIGHT
+            },
+            className: cn('flex-row items-center justify-between gap-2 rounded-xl px-3', selected ? 'bg-accent' : 'active:bg-accent'),
+            children: [/*#__PURE__*/_jsx(Text, {
+              size: "sm",
+              weight: selected ? 'semibold' : 'normal',
+              children: option
+            }), selected ? /*#__PURE__*/_jsx(CheckIcon, {
+              size: 16,
+              color: tick
+            }) : null]
+          }, option);
+        })
+      })
+    })]
+  });
+}
+function CaptionChip({
+  label,
+  expanded,
+  accessibilityLabel,
+  onPress
+}) {
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      expanded
+    },
+    className: "flex-row items-center gap-1 rounded-lg px-2 py-1.5 active:bg-accent",
+    children: [/*#__PURE__*/_jsx(Text, {
+      weight: "semibold",
+      children: label
+    }), /*#__PURE__*/_jsx(ChevronDownIcon, {
+      size: 14
+    })]
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+/* Grid                                                                       */
+/* -------------------------------------------------------------------------- */
+
+function CalendarGrid({
+  month,
+  mode,
+  value,
+  onSelect,
+  disabled,
+  minDate,
+  maxDate,
+  weekStartsOn,
+  showOutsideDays,
+  selectOutsideDays = false,
+  locale,
+  system
+}) {
+  /*
+   * Six rows of consecutive days, anchored on the first of *this* calendar's
+   * month. Weekdays are shared between the two calendars — only the month
+   * boundaries and the day numbers differ — so the walk itself is the same
+   * either way and only where it starts moves.
+   */
+  const weeks = useMemo(() => {
+    const first = startOfCalendarMonth(month, system, locale);
+    const lead = (first.getDay() - weekStartsOn + 7) % 7;
+    const start = addDays(first, -lead);
+    return Array.from({
+      length: 6
+    }, (_unusedWeek, week) => Array.from({
+      length: 7
+    }, (_unusedDay, day) => addDays(start, week * 7 + day)));
+  }, [month, weekStartsOn, system, locale]);
+  const headings = useMemo(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
+  const today = startOfDay(new Date());
+  const range = mode === 'range' ? value : undefined;
+  const multiple = mode === 'multiple' ? value ?? [] : [];
+  const single = mode === 'single' ? value : undefined;
+  return (
+    /*#__PURE__*/
+    // React Native has no `grid` role, so the month announces itself as a list
+    // of days and each day carries its own full date as its label.
+    _jsxs(View, {
+      accessibilityRole: "list",
+      className: "gap-1",
+      children: [/*#__PURE__*/_jsx(View, {
+        className: "flex-row",
+        children: headings.map(heading => /*#__PURE__*/_jsx(Text, {
+          size: "xs",
+          muted: true,
+          className: "flex-1 text-center",
+          children: heading
+        }, heading))
+      }), weeks.map((week, weekIndex) => /*#__PURE__*/_jsx(View, {
+        className: "flex-row",
+        children: week.map((date, dayIndex) => {
+          const outside = !isSameCalendarMonth(date, month, system, locale);
+          if (outside && !showOutsideDays) {
+            // A spacer, not nothing: the row has to stay seven wide or the
+            // columns stop lining up with their headings.
+            return /*#__PURE__*/_jsx(View, {
+              className: "h-10 flex-1"
+            }, dayIndex);
+          }
+          const isStart = mode === 'range' && isSameDay(date, range?.from);
+          const isEnd = mode === 'range' && isSameDay(date, range?.to);
+          const selected = mode === 'range' ? isStart || isEnd : mode === 'multiple' ? multiple.some(picked => isSameDay(picked, date)) : isSameDay(date, single);
+
+          /*
+           * Inclusive of both ends, unlike the old middles-only rule. An end
+           * has to carry its half of the band or there is a gap between the
+           * disc and the run beside it — which is precisely what made a range
+           * read as two discs with a stripe floating between them.
+           */
+          const inRange = !!range?.to && isWithin(date, range.from, range.to);
+
+          /*
+           * Whether the band carries on past this cell's edge into the one
+           * beside it. It stops at an end of the range, and at the edge of a
+           * row — a range over a weekend closes on Saturday and opens again
+           * on Sunday rather than trailing into the gap between the rows.
+           */
+          const openStart = inRange && !isStart && dayIndex > 0;
+          const openEnd = inRange && !isEnd && dayIndex < 6;
+
+          // A neighbouring month's day is drawn, not offered. Reaching into
+          // July from June is what the arrows are for.
+          const ruledOut = isDisabled(date, disabled, minDate, maxDate) || outside && !selectOutsideDays;
+          return /*#__PURE__*/_jsx(CalendarDay, {
+            date: date,
+            outside: outside,
+            selected: selected,
+            inRange: inRange,
+            rangeStart: isStart,
+            rangeEnd: isEnd,
+            today: isSameDay(date, today),
+            disabled: ruledOut,
+            openStart: openStart,
+            openEnd: openEnd,
+            locale: locale,
+            system: system,
+            onPress: () => onSelect(date)
+          }, dayIndex);
+        })
+      }, weekIndex))]
+    })
+  );
+}
+function CalendarDay({
+  date,
+  outside,
+  selected,
+  inRange,
+  rangeStart = false,
+  rangeEnd = false,
+  today,
+  disabled,
+  openStart,
+  openEnd,
+  locale,
+  system,
+  onPress
+}) {
+  const styles = dayVariants({
+    selected,
+    today: today && !selected,
+    outside,
+    disabled,
+    fadedBand: disabled && inRange
+  });
+
+  /*
+   * An end of the range fills half its cell, from the centre outwards towards
+   * the rest of the range; every other day in it fills the whole cell. Half a
+   * cell is what puts the band underneath the disc rather than beside it — the
+   * disc is centred, so a band starting at the centre emerges from behind it
+   * and the two read as one shape. A range of one day gets both halves and so
+   * no band at all, which is right: there is nothing to span.
+   */
+  const bandStyle = inRange ? {
+    left: rangeStart ? '50%' : 0,
+    right: rangeEnd ? '50%' : 0,
+    borderTopLeftRadius: openStart ? 0 : DAY_RADIUS,
+    borderBottomLeftRadius: openStart ? 0 : DAY_RADIUS,
+    borderTopRightRadius: openEnd ? 0 : DAY_RADIUS,
+    borderBottomRightRadius: openEnd ? 0 : DAY_RADIUS
+  } : null;
+  return /*#__PURE__*/_jsxs(Pressable, {
+    disabled: disabled,
+    onPress: onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: calendarLongDate(date, system, locale),
+    accessibilityState: {
+      selected,
+      disabled
+    },
+    className: styles.cell(),
+    children: [bandStyle ? /*#__PURE__*/_jsx(View, {
+      className: styles.band(),
+      style: bandStyle
+    }) : null, /*#__PURE__*/_jsx(View, {
+      className: styles.disc(),
+      children: /*#__PURE__*/_jsx(Text, {
+        className: styles.label(),
+        children: calendarDayNumber(date, system, locale)
+      })
+    })]
+  });
+}
+export const Calendar = Object.assign(CalendarRoot, {
+  Header: CalendarHeader,
+  Nav: CalendarNav,
+  Grid: CalendarGrid,
+  Day: CalendarDay
+});
+//# sourceMappingURL=index.js.map