panelui-native 0.66.1 → 0.71.0

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

@@ -0,0 +1,788 @@
+"use strict";
+
+/**
+ * Planner — a month of days, each carrying what falls on it.
+ *
+ * ```tsx
+ * const [month, setMonth] = useState(new Date());
+ *
+ * <Planner
+ *   month={month}
+ *   onMonthChange={setMonth}
+ *   entries={renewals}
+ *   categories={[
+ *     { id: 'monthly', label: 'Monthly' },
+ *     { id: 'yearly', label: 'Yearly', colorIndex: 4 },
+ *   ]}
+ * >
+ *   <Planner.Header>
+ *     <Planner.Title />
+ *     <Planner.Today />
+ *     <Planner.Nav />
+ *   </Planner.Header>
+ *   <Planner.Grid />
+ *   <Planner.Legend />
+ *   <Planner.Details>
+ *     {(date, entries) => <Text>{entries.length} on {date.toDateString()}</Text>}
+ *   </Planner.Details>
+ * </Planner>
+ * ```
+ *
+ * ## How it differs from Calendar
+ *
+ * `Calendar` picks a date and answers with one. This shows what is already on
+ * the days and answers with the day you asked about — the selection exists to
+ * open something, not to be submitted.
+ *
+ * ## Why it draws its own Frame
+ *
+ * A month at a glance is a widget: a boundary, a strip along the top carrying
+ * the month and the way through it, and a footer that holds still while the
+ * middle changes. That is `Frame`, so the root renders one instead of leaving
+ * every caller to assemble the same shell. Pass `frame={false}` to drop it,
+ * for a planner in a sheet or a card that already draws its own edge.
+ *
+ * ## Why the grid is always six weeks
+ *
+ * A month can span five weeks or six. Drawn at its natural height the panel
+ * jumps as you page through the year and the days appear to move under your
+ * thumb, so the grid is always six rows and the last one is sometimes all
+ * next month. `Calendar` fixes its height for the same reason.
+ *
+ * ## Why a day says more than its date
+ *
+ * The marker on a day is a coloured dot, and colour is a signal that does not
+ * reach everyone looking at it. So the legend prints its label beside every
+ * swatch, and a day is spoken as its date, how many entries it carries and
+ * which categories they belong to. Neither is decoration: between them they
+ * are the whole content of the grid for somebody who cannot see it.
+ */
+import { Children, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, AppState, Platform, Pressable, View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { ChevronLeftIcon, ChevronRightIcon } from "../../icons/index.js";
+import { Text } from "../../primitives/text.js";
+import { cn } from "../../utils/cn.js";
+import { addCalendarMonths, calendarDayNumber, calendarLongDate, calendarMonthLabel, isSameCalendarMonth, isSameDay, localeWeekStart, monthGrid, normalizeWeekStart, resolveCalendar, startOfCalendarMonth, startOfDay, weekdayNames } from "../../utils/date.js";
+import { Dialog } from "../dialog/index.js";
+import { Frame } from "../frame/index.js";
+import { bucketByDay, dayAccessibilityLabel, entriesOn, summariseMonth, visibleEntries } from "./planner-entries.js";
+import { usePlannerMonthAnnouncement } from "./planner-announcement.js";
+import { plannerGridTarget } from "./planner-grid-navigation.js";
+import { usePlannerMonthLifecycle, usePlannerSelectionLifecycle } from "./planner-lifecycle.js";
+
+/** How many of a day's entries a cell draws before it stops and counts. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_ENTRY_LIMIT = 2;
+
+/** The palette a category takes its dot from when it does not name a colour. */
+const PALETTE_SIZE = 5;
+
+/** Stable wrapper keeps the native method's receiver and the hook dependency steady. */
+const announceMonth = label => {
+  AccessibilityInfo.announceForAccessibility(label);
+};
+const plannerVariants = tv({
+  slots: {
+    grid: 'gap-1 px-3 pb-3 pt-1',
+    week: 'flex-row',
+    heading: 'flex-1 text-center',
+    legend: 'flex-row flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3',
+    swatch: 'h-2 w-2 rounded-full'
+  }
+});
+const dayVariants = tv({
+  slots: {
+    /*
+     * A fixed height, and a square-ish tile rather than a circle.
+     *
+     * Fixed because the cell has to be the same size whether the day carries
+     * anything or not — sized to its contents, a row with one icon in it is
+     * taller than the five around it and the grid stops being a grid.
+     *
+     * Square-ish because a day here holds a number, a marker and sometimes an
+     * icon, and a circle wastes the corners it needs for them.
+     */
+    cell: 'mx-0.5 h-14 flex-1 rounded-xl px-1.5 pt-1.5',
+    number: 'text-xs leading-none',
+    marker: 'absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full',
+    body: 'flex-1 flex-row items-center justify-center gap-0.5 pb-1'
+  },
+  variants: {
+    /** Inside the month being shown, as opposed to the days either side. */
+    inMonth: {
+      true: {
+        cell: 'bg-muted/40',
+        number: 'text-foreground'
+      },
+      false: {
+        cell: 'bg-muted/15',
+        number: 'text-muted-foreground/40'
+      }
+    },
+    /*
+     * Today is the number, not the tile. A ring on today and a ring on the
+     * open day are two rings that mean different things and look the same.
+     */
+    today: {
+      true: {
+        number: 'text-primary font-semibold'
+      }
+    },
+    selected: {
+      true: {
+        cell: 'border border-primary/60 bg-primary/10'
+      }
+    },
+    disabled: {
+      true: {
+        cell: 'opacity-40'
+      }
+    }
+  },
+  defaultVariants: {
+    inMonth: true
+  }
+});
+
+/* ------------------------------------------------------------------ *
+ * Data
+ * ------------------------------------------------------------------ */
+
+/** One thing that falls on a day. */
+
+/** A group of entries: the key to a colour, and a line in the legend. */
+
+const PlannerContext = /*#__PURE__*/createContext(null);
+function usePlanner(component) {
+  const context = useContext(PlannerContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <Planner>`);
+  }
+  return context;
+}
+
+/** Today, recomputed when the app comes back rather than only at mount. */
+function useToday() {
+  const [today, setToday] = useState(() => startOfDay(new Date()));
+  useEffect(() => {
+    const refresh = () => {
+      const now = startOfDay(new Date());
+      // A new object every resume would invalidate every memo below it for a
+      // date that has not changed.
+      setToday(current => current.getTime() === now.getTime() ? current : now);
+    };
+    const subscription = AppState.addEventListener('change', state => {
+      if (state === 'active') refresh();
+    });
+    return () => subscription.remove();
+  }, []);
+  return today;
+}
+
+/**
+ * The five series colours, read once.
+ *
+ * A fixed number of reads rather than one per category: a hook cannot run in a
+ * loop whose length is a prop.
+ */
+function usePalette() {
+  const one = useCSSVariable('--color-chart-1');
+  const two = useCSSVariable('--color-chart-2');
+  const three = useCSSVariable('--color-chart-3');
+  const four = useCSSVariable('--color-chart-4');
+  const five = useCSSVariable('--color-chart-5');
+  return useMemo(() => [one, two, three, four, five].map(v => typeof v === 'string' ? v : undefined), [one, two, three, four, five]);
+}
+
+/* ------------------------------------------------------------------ *
+ * Root
+ * ------------------------------------------------------------------ */
+
+const PlannerRoot = /*#__PURE__*/forwardRef(({
+  className,
+  month: monthProp,
+  defaultMonth,
+  onMonthChange,
+  entries = [],
+  categories = [],
+  selected: selectedProp,
+  defaultSelected = null,
+  onSelectedChange,
+  onDayPress,
+  entryLimit = DEFAULT_ENTRY_LIMIT,
+  weekStartsOn = 'auto',
+  locale,
+  calendar = 'gregory',
+  frame = true,
+  children,
+  ...props
+}, ref) => {
+  const system = resolveCalendar(calendar, locale);
+  const palette = usePalette();
+  const today = useToday();
+  const settleMonth = useCallback(date => startOfCalendarMonth(date, system, locale), [system, locale]);
+  const [month, requestMonth] = usePlannerMonthLifecycle({
+    month: monthProp,
+    defaultMonth,
+    settleMonth,
+    onMonthChange
+  });
+  /*
+   * The announcement is registered against the month a press asks for, and
+   * spoken only once a commit arrives carrying it. That is what keeps a
+   * controlled parent's rejection silent, so it wraps the lifecycle's setter
+   * rather than living inside it — the hook owns which month is current, and
+   * this owns whether the change was the user's to hear about.
+   */
+  const expectMonthAnnouncement = usePlannerMonthAnnouncement({
+    monthKey: month.getTime(),
+    monthLabel: calendarMonthLabel(month, system, locale),
+    announce: announceMonth
+  });
+  const setMonth = useCallback(next => {
+    expectMonthAnnouncement(settleMonth(next));
+    requestMonth(next);
+  }, [expectMonthAnnouncement, requestMonth, settleMonth]);
+  const [selected, select] = usePlannerSelectionLifecycle({
+    selected: selectedProp,
+    defaultSelected,
+    onSelectedChange
+  });
+  const days = useMemo(() => bucketByDay(entries), [entries]);
+  const normalizedWeekStart = weekStartsOn === 'auto' ? localeWeekStart(locale) : normalizeWeekStart(weekStartsOn);
+  const grid = useMemo(() => monthGrid(month, normalizedWeekStart, system, locale), [month, normalizedWeekStart, system, locale]);
+  const isInMonth = useCallback(date => isSameCalendarMonth(date, month, system, locale), [month, system, locale]);
+  const categoryLabels = useMemo(() => new Map(categories.map(category => [category.id, category.label])), [categories]);
+  const categoryColors = useMemo(() => {
+    const colors = new Map();
+    categories.forEach((category, index) => {
+      // `findIndex` used to make the first duplicate id authoritative.
+      if (colors.has(category.id)) return;
+      const slot = (category.colorIndex ?? index + 1) - 1;
+      colors.set(category.id, category.color ?? palette[(slot % PALETTE_SIZE + PALETTE_SIZE) % PALETTE_SIZE]);
+    });
+    return colors;
+  }, [categories, palette]);
+  const colorOf = useCallback(id => id ? categoryColors.get(id) : undefined, [categoryColors]);
+  const summary = useMemo(() => summariseMonth(days, grid, categories, isInMonth), [days, grid, categories, isInMonth]);
+  const context = useMemo(() => ({
+    month,
+    setMonth,
+    today,
+    selected,
+    select,
+    days,
+    categories,
+    categoryLabels,
+    colorOf,
+    summary,
+    entryLimit,
+    weekStartsOn: normalizedWeekStart,
+    grid,
+    locale,
+    system,
+    isInMonth,
+    onDayPress
+  }), [month, setMonth, today, selected, select, days, categories, categoryLabels, colorOf, summary, entryLimit, normalizedWeekStart, grid, locale, system, isInMonth, onDayPress]);
+
+  /*
+   * The header belongs in the Frame's strip and everything else in its
+   * panel, so the root sorts its children rather than asking the caller to
+   * nest them in two places to get one widget.
+   */
+  const parts = Children.toArray(children);
+  const header = parts.find(child => /*#__PURE__*/isValidElement(child) && child.type === PlannerHeader);
+  const body = parts.filter(child => child !== header);
+  return /*#__PURE__*/_jsx(PlannerContext.Provider, {
+    value: context,
+    children: frame ?
+    /*#__PURE__*/
+    // Full width by default: the grid is seven equal columns, and a
+    // container that sizes to its content collapses them to the width of
+    // a two-digit number.
+    _jsxs(Frame, {
+      ref: ref,
+      className: cn('w-full', className),
+      ...props,
+      children: [header, /*#__PURE__*/_jsx(Frame.Panel, {
+        dividers: false,
+        children: body
+      })]
+    }) : /*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      className: cn('w-full', className),
+      ...props,
+      children: [header, body]
+    })
+  });
+});
+PlannerRoot.displayName = 'Planner';
+
+/* ------------------------------------------------------------------ *
+ * Header strip
+ * ------------------------------------------------------------------ */
+
+/**
+ * The strip along the top of the frame. Put `Title`, `Today` and `Nav` in it.
+ *
+ * The strip has two ends rather than an even spread. What the month *is* —
+ * its name, and the way back to today — reads from the leading edge; what
+ * *moves* it sits at the trailing edge, under the thumb that reaches for it.
+ * Spaced evenly across a full-width strip they read as three unrelated
+ * controls instead of a label and a pair of buttons.
+ */
+function PlannerHeader({
+  children
+}) {
+  const parts = Children.toArray(children);
+  const trails = child => /*#__PURE__*/isValidElement(child) && (child.type === PlannerNav || child.type === PlannerAction);
+  const trailing = parts.filter(trails);
+  const lead = parts.filter(child => !trails(child));
+  return /*#__PURE__*/_jsxs(Frame.Header, {
+    children: [/*#__PURE__*/_jsx(View, {
+      className: "min-w-0 flex-1 flex-row items-center gap-2",
+      children: lead
+    }), trailing.length > 0 ? /*#__PURE__*/_jsx(View, {
+      className: "shrink-0 flex-row items-center gap-1.5",
+      children: trailing
+    }) : null]
+  });
+}
+PlannerHeader.displayName = 'Planner.Header';
+/** The month on show, in the calendar system and locale the grid uses. */
+function PlannerTitle({
+  children,
+  className,
+  ...props
+}) {
+  const {
+    month,
+    system,
+    locale
+  } = usePlanner('Planner.Title');
+  return /*#__PURE__*/_jsx(Text, {
+    weight: "medium",
+    className: cn('text-base', className),
+    ...props,
+    children: children ?? calendarMonthLabel(month, system, locale)
+  });
+}
+PlannerTitle.displayName = 'Planner.Title';
+/** Jumps back to the month today is in, and selects nothing. */
+function PlannerToday({
+  children = 'Today'
+}) {
+  const {
+    today,
+    setMonth,
+    month,
+    system,
+    locale
+  } = usePlanner('Planner.Today');
+  const alreadyHere = isSameCalendarMonth(today, month, system, locale);
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: () => setMonth(today),
+    disabled: alreadyHere,
+    hitSlop: 6,
+    accessibilityRole: "button",
+    accessibilityLabel: "Go to this month",
+    accessibilityState: {
+      disabled: alreadyHere
+    },
+    className: cn('rounded-full border border-border px-3 py-1', alreadyHere ? 'opacity-40' : 'active:bg-accent'),
+    children: /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      muted: true,
+      children: children
+    })
+  });
+}
+PlannerToday.displayName = 'Planner.Today';
+/** Back and forward a month. */
+function PlannerNav({
+  className
+}) {
+  const {
+    month,
+    setMonth,
+    system,
+    locale
+  } = usePlanner('Planner.Nav');
+  return /*#__PURE__*/_jsxs(View, {
+    className: cn('flex-row items-center gap-1', className),
+    children: [/*#__PURE__*/_jsx(PlannerArrow, {
+      direction: "previous",
+      onPress: () => setMonth(addCalendarMonths(month, -1, system, locale))
+    }), /*#__PURE__*/_jsx(PlannerArrow, {
+      direction: "next",
+      onPress: () => setMonth(addCalendarMonths(month, 1, system, locale))
+    })]
+  });
+}
+PlannerNav.displayName = 'Planner.Nav';
+function PlannerArrow({
+  direction,
+  onPress
+}) {
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    hitSlop: 8,
+    accessibilityRole: "button",
+    accessibilityLabel: direction === 'next' ? 'Next month' : 'Previous month',
+    className: "h-8 w-8 items-center justify-center rounded-lg active:bg-accent",
+    children: direction === 'next' ? /*#__PURE__*/_jsx(ChevronRightIcon, {
+      size: 18
+    }) : /*#__PURE__*/_jsx(ChevronLeftIcon, {
+      size: 18
+    })
+  });
+}
+/** The trailing end of the header strip, for a button of the caller's. */
+function PlannerAction({
+  children
+}) {
+  return /*#__PURE__*/_jsx(Frame.Action, {
+    children: children
+  });
+}
+PlannerAction.displayName = 'Planner.Action';
+
+/* ------------------------------------------------------------------ *
+ * Grid
+ * ------------------------------------------------------------------ */
+
+/** What a custom cell is handed. Everything the default cell draws from. */
+
+const PlannerGridNavigationContext = /*#__PURE__*/createContext(null);
+
+/**
+ * The weekday row and the six weeks below it.
+ *
+ * React Native has no per-cell grid vocabulary — no `gridcell`, no `row` — so
+ * a screen reader never hears "row three, column five" and cannot fall back on
+ * position for context. Every day therefore carries its own full date, and the
+ * weekday headings are hidden rather than read out 42 times over.
+ */
+function PlannerGrid({
+  className,
+  renderDay
+}) {
+  const {
+    grid: weeks,
+    weekStartsOn,
+    locale,
+    selected,
+    today,
+    isInMonth
+  } = usePlanner('Planner.Grid');
+  const {
+    grid,
+    week: weekRow,
+    heading
+  } = plannerVariants();
+  const headings = useMemo(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
+  const dates = useMemo(() => weeks.flat(), [weeks]);
+  const indexByDay = useMemo(() => new Map(dates.map((date, index) => [date.getTime(), index])), [dates]);
+  const initialDay = selected ?? today;
+  const [activeDay, setActiveDay] = useState(initialDay.getTime());
+  const storedIndex = indexByDay.get(activeDay);
+  const preferredIndex = (selected ? indexByDay.get(startOfDay(selected).getTime()) : undefined) ?? indexByDay.get(today.getTime()) ?? dates.findIndex(isInMonth);
+  const activeIndex = storedIndex ?? Math.max(0, preferredIndex);
+  const refs = useRef(new Map());
+  const register = useCallback((index, node) => {
+    if (node) refs.current.set(index, node);else refs.current.delete(index);
+  }, []);
+  const makeActive = useCallback(index => {
+    const date = dates[index];
+    if (date) setActiveDay(date.getTime());
+  }, [dates]);
+  const focus = useCallback((index, event) => {
+    const target = plannerGridTarget(event.nativeEvent.key ?? '', index, dates.length);
+    if (target === null) return;
+    event.preventDefault();
+    makeActive(target);
+    refs.current.get(target)?.focus();
+  }, [dates.length, makeActive]);
+  const navigation = useMemo(() => ({
+    activeIndex,
+    indexByDay,
+    register,
+    focus,
+    makeActive
+  }), [activeIndex, indexByDay, register, focus, makeActive]);
+  return /*#__PURE__*/_jsx(PlannerGridNavigationContext.Provider, {
+    value: renderDay ? null : navigation,
+    children: /*#__PURE__*/_jsxs(View, {
+      className: grid({
+        className
+      }),
+      children: [/*#__PURE__*/_jsx(View, {
+        className: weekRow(),
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: headings.map(label => /*#__PURE__*/_jsx(Text, {
+          size: "xs",
+          muted: true,
+          className: heading(),
+          children: label.toUpperCase()
+        }, label))
+      }), weeks.map((week, index) => /*#__PURE__*/_jsx(View, {
+        className: weekRow(),
+        children: week.map(date => /*#__PURE__*/_jsx(PlannerDay, {
+          date: date,
+          renderDay: renderDay
+        }, date.getTime()))
+      }, index))]
+    })
+  });
+}
+PlannerGrid.displayName = 'Planner.Grid';
+/** One cell. Pressing it selects the day and opens whatever is bound to it. */
+function PlannerDay({
+  date,
+  renderDay
+}) {
+  const {
+    days,
+    today,
+    selected,
+    select,
+    colorOf,
+    categoryLabels,
+    entryLimit,
+    locale,
+    system,
+    isInMonth,
+    onDayPress
+  } = usePlanner('Planner.Day');
+  const navigation = useContext(PlannerGridNavigationContext);
+  const registerGridCell = navigation?.register;
+  const focusGridCell = navigation?.focus;
+  const makeGridCellActive = navigation?.makeActive;
+  const entries = entriesOn(days, date);
+  const inMonth = isInMonth(date);
+  const isToday = isSameDay(date, today);
+  const isSelected = selected ? isSameDay(date, selected) : false;
+  const {
+    shown,
+    overflow
+  } = visibleEntries(entries, entryLimit);
+  const drawable = shown.filter(entry => entry.icon);
+  const styles = dayVariants({
+    inMonth,
+    today: isToday,
+    selected: isSelected
+  });
+  const label = dayAccessibilityLabel(calendarLongDate(date, system, locale), entries, categoryLabels);
+  const press = () => {
+    onDayPress?.(date, entries);
+    select(date);
+  };
+  const gridIndex = navigation?.indexByDay.get(date.getTime());
+  const setRef = useCallback(node => {
+    if (gridIndex !== undefined) registerGridCell?.(gridIndex, node);
+  }, [gridIndex, registerGridCell]);
+  const onFocus = useCallback(() => {
+    if (gridIndex !== undefined) makeGridCellActive?.(gridIndex);
+  }, [gridIndex, makeGridCellActive]);
+  const onKeyDown = useCallback(event => {
+    if (gridIndex !== undefined) focusGridCell?.(gridIndex, event);
+  }, [gridIndex, focusGridCell]);
+  const webGridProps = Platform.OS === 'web' && gridIndex !== undefined && navigation ? {
+    ref: setRef,
+    tabIndex: navigation.activeIndex === gridIndex ? 0 : -1,
+    onFocus,
+    onKeyDown
+  } : {};
+  if (renderDay) {
+    return /*#__PURE__*/_jsx(View, {
+      className: "flex-1",
+      children: renderDay({
+        date,
+        entries,
+        isToday,
+        isSelected,
+        isInMonth: inMonth
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(Pressable, {
+    ...webGridProps,
+    onPress: press,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    accessibilityHint: entries.length > 0 ? 'Opens what is on this day' : undefined,
+    accessibilityState: {
+      selected: isSelected
+    },
+    className: styles.cell(),
+    children: [/*#__PURE__*/_jsx(Text, {
+      className: styles.number(),
+      children: calendarDayNumber(date, system, locale)
+    }), entries.length > 0 ? /*#__PURE__*/_jsx(View, {
+      className: styles.marker(),
+      style: {
+        backgroundColor: markerColor(entries, colorOf)
+      }
+    }) : null, drawable.length > 0 ? /*#__PURE__*/_jsxs(View, {
+      className: styles.body(),
+      children: [drawable.map(entry => /*#__PURE__*/_jsx(View, {
+        children: entry.icon
+      }, entry.id)), overflow > 0 ? /*#__PURE__*/_jsxs(Text, {
+        size: "xs",
+        muted: true,
+        className: "leading-none",
+        children: ["+", overflow]
+      }) : null]
+    }) : null]
+  });
+}
+PlannerDay.displayName = 'Planner.Day';
+
+/**
+ * The dot's colour: the first entry that names a category the planner knows.
+ *
+ * One dot rather than one per entry. A cell this size fits a row of dots or a
+ * day number, and the count is already spoken — so the dot answers "is there
+ * anything here, and roughly what kind", which is all it has room to answer.
+ */
+function markerColor(entries, colorOf) {
+  for (const entry of entries) {
+    const color = colorOf(entry.category);
+    if (color) return color;
+  }
+  return undefined;
+}
+
+/* ------------------------------------------------------------------ *
+ * Legend and summary
+ * ------------------------------------------------------------------ */
+
+/**
+ * The key to the dots.
+ *
+ * It prints the label beside every swatch, because a column of coloured dots
+ * with nothing to read them against is a quiz.
+ */
+function PlannerLegend({
+  className,
+  counts = false,
+  children
+}) {
+  const {
+    summary,
+    colorOf
+  } = usePlanner('Planner.Legend');
+  const {
+    legend,
+    swatch
+  } = plannerVariants();
+  return /*#__PURE__*/_jsxs(View, {
+    className: cn(legend(), 'justify-between border-t border-border', className),
+    children: [/*#__PURE__*/_jsx(View, {
+      className: "flex-row flex-wrap items-center gap-x-4 gap-y-2",
+      children: summary.categories.map(category => /*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-center gap-1.5",
+        children: [/*#__PURE__*/_jsx(View, {
+          className: swatch(),
+          style: {
+            backgroundColor: colorOf(category.id)
+          }
+        }), /*#__PURE__*/_jsx(Text, {
+          size: "xs",
+          muted: true,
+          children: counts ? `${category.label} ${category.count}` : category.label
+        })]
+      }, category.id))
+    }), children]
+  });
+}
+PlannerLegend.displayName = 'Planner.Legend';
+/** What the month adds up to. Counts this month only, never the days either side. */
+function PlannerSummary({
+  children,
+  ...props
+}) {
+  const {
+    summary
+  } = usePlanner('Planner.Summary');
+  return /*#__PURE__*/_jsx(Text, {
+    size: "xs",
+    muted: true,
+    ...props,
+    children: children ?? `${summary.total} ${summary.total === 1 ? 'entry' : 'entries'}`
+  });
+}
+PlannerSummary.displayName = 'Planner.Summary';
+/** The strip along the bottom, for tools that act on the month. */
+function PlannerFooter({
+  className,
+  children
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    className: cn('flex-row items-center justify-between gap-3 px-4 py-3', className),
+    children: children
+  });
+}
+PlannerFooter.displayName = 'Planner.Footer';
+
+/* ------------------------------------------------------------------ *
+ * Details
+ * ------------------------------------------------------------------ */
+
+/**
+ * A dialog bound to the open day.
+ *
+ * The planner owns the grid and the binding; what the dialog says is the
+ * application's, because the contents of a day are its data and not the
+ * component's. Leave it out and `onDayPress` is still called — a planner that
+ * pushes a screen instead of opening a dialog wants that and nothing else.
+ */
+function PlannerDetails({
+  className,
+  title,
+  description,
+  children
+}) {
+  const {
+    selected,
+    select,
+    days,
+    system,
+    locale
+  } = usePlanner('Planner.Details');
+  const entries = selected ? entriesOn(days, selected) : [];
+  const count = entries.length === 1 ? '1 entry' : `${entries.length} entries`;
+  return /*#__PURE__*/_jsx(Dialog, {
+    open: selected !== null,
+    onOpenChange: open => !open && select(null),
+    children: /*#__PURE__*/_jsxs(Dialog.Content, {
+      className: cn('gap-3', className),
+      children: [/*#__PURE__*/_jsxs(View, {
+        className: "gap-0.5",
+        children: [/*#__PURE__*/_jsx(Dialog.Title, {
+          children: title ?? (selected ? calendarLongDate(selected, system, locale) : '')
+        }), description === null ? null : /*#__PURE__*/_jsx(Dialog.Description, {
+          children: description ?? (entries.length === 0 ? 'Nothing planned' : count)
+        })]
+      }), selected ? children(selected, entries) : null]
+    })
+  });
+}
+PlannerDetails.displayName = 'Planner.Details';
+export const Planner = Object.assign(PlannerRoot, {
+  Header: PlannerHeader,
+  Title: PlannerTitle,
+  Today: PlannerToday,
+  Nav: PlannerNav,
+  Action: PlannerAction,
+  Grid: PlannerGrid,
+  Day: PlannerDay,
+  Legend: PlannerLegend,
+  Summary: PlannerSummary,
+  Footer: PlannerFooter,
+  Details: PlannerDetails
+});
+//# sourceMappingURL=index.js.map