panelui-native 0.30.0 → 0.34.0

package/src/components/button/index.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, type ReactNode } from 'react';
-import type { View } from 'react-native';
+import { View } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import {
@@ -8,7 +8,7 @@ import {
 } from '../../primitives/animated-pressable';
 import { Text, textChildren } from '../../primitives/text';
 import { IconColorProvider } from '../../icons';
-import { getNativeUI } from '../../native';
+import { getNativeUI, getSwiftUIModifiers } from '../../native';
 import { Spinner } from '../spinner';
 
 const buttonVariants = tv({
@@ -118,8 +118,29 @@ export interface ButtonProps
    * A native button **sizes itself to its label**, the way a platform button
    * is supposed to. It does not stretch to fill its container, and `fullWidth`
    * has no effect on it.
+   *
+   * **Give it a string, not elements, unless `size` is `icon`.** A string
+   * becomes the platform's own label. Anything else has to be hosted inside
+   * the native tree, and a hosted view only measures where something above it
+   * is definite on *both* axes — which is true of an icon button, because it
+   * is a square this component sizes, and false of a labelled one, whose width
+   * is its text's and known to nobody in advance. Host a label without a width
+   * and the two layout systems ask each other the same question until the app
+   * dies, in native code, where a `try` here has nothing to catch.
    */
   native?: boolean;
+  /**
+   * Draw the native button in the platform's Liquid Glass material — the one
+   * iOS 26 uses for its own floating controls. Requires `native`, and iOS 26 or
+   * later; anywhere else it is ignored and the button keeps its ordinary
+   * platform style rather than failing.
+   *
+   * `primary` and `destructive` take the prominent variant, which keeps the
+   * accent tint a filled button is supposed to have; every other variant takes
+   * the plain one. An icon button is drawn round rather than in the platform's
+   * default capsule.
+   */
+  glass?: boolean;
 }
 
 /**
@@ -140,6 +161,51 @@ const NATIVE_HEIGHT: Record<NonNullable<ButtonVariantProps['size']>, number> = {
   icon: 44,
 };
 
+/**
+ * Room around the glyph in a native icon button, applied to the glyph itself.
+ *
+ * Not to the button, and that distinction is the whole thing. SwiftUI's
+ * `padding` on a Button pads *outside* its background — the chrome stays the
+ * size it was and moves inward — and `frame` only sets the layout box, leaving
+ * a glyph-sized background centred in a larger invisible one. Neither grows
+ * the button. What the background is drawn around is the *label*, and the
+ * label here is a React Native view we host ourselves, so padding it in React
+ * is both the simplest lever and the only one that works.
+ */
+const NATIVE_ICON_PADDING = 6;
+
+/**
+ * The frame a native icon button is given, which must contain the padded glyph
+ * above with room to spare.
+ *
+ * It exists to end a measurement, not to set a look. The chain is
+ * `Host(matchContents)` → platform button → `RNHostView(matchContents)` → our
+ * view: every link sized by its contents, and nothing anywhere with a size of
+ * its own. Something has to be definite or the two layout systems ask each
+ * other the same question forever, and that fails down in the platform, where
+ * there is nothing for a JavaScript `try` to catch.
+ *
+ */
+const NATIVE_ICON_FRAME = 44;
+
+/**
+ * Our sizes on the platform's own control scale, which is how a native button
+ * is made bigger: it scales the room the style leaves around the label, and the
+ * label with it.
+ *
+ * Only ever sent for a *string* label. A hosted label is the case that has
+ * taken this app down twice, and while the cause turned out to be a missing
+ * frame rather than this modifier, a labelled button has no hosted view and no
+ * measurement to get wrong — so there is no reason to find out on both at once.
+ */
+const NATIVE_CONTROL_SIZE = {
+  sm: 'small',
+  md: 'regular',
+  lg: 'large',
+  icon: 'regular',
+} as const;
+
+
 /** PanelUI variants mapped onto the platform button styles. */
 const NATIVE_VARIANT: Record<
   NonNullable<ButtonVariantProps['variant']>,
@@ -167,6 +233,7 @@ export const Button = forwardRef<View, ButtonProps>(
       startContent,
       endContent,
       native,
+      glass = false,
       ...props
     },
     ref
@@ -198,6 +265,39 @@ export const Button = forwardRef<View, ButtonProps>(
     if (nativeUI) {
       const { Host, Button: NativeButton, RNHostView } = nativeUI;
       const isStringLabel = typeof children === 'string';
+      const prominent = variant === 'primary' || variant === 'destructive';
+
+      /*
+       * Looks the portable props cannot ask for.
+       *
+       * `buttonStyle` because Liquid Glass has no cross-platform variant to
+       * map onto. `glassProminent` is the tinted one — it keeps the accent
+       * fill a prominent button is supposed to have, which drawing the
+       * material by hand over a plain button throws away. A supplied
+       * `buttonStyle` replaces the one the variant would have set, so this is
+       * a substitution rather than a layer on top.
+       *
+       * `buttonBorderShape` because an icon button is round and the platform's
+       * default capsule is not — a lone glyph in a capsule reads as a text
+       * button somebody forgot to label. It shapes the glass too.
+       */
+      const swiftUI = getSwiftUIModifiers();
+      const nativeModifiers = swiftUI
+        ? [
+            glass ? swiftUI.buttonStyle(prominent ? 'glassProminent' : 'glass') : null,
+            size === 'icon' ? swiftUI.buttonBorderShape('circle') : null,
+            isStringLabel ? swiftUI.controlSize(NATIVE_CONTROL_SIZE[size ?? 'md']) : null,
+          ].filter(Boolean)
+        : [];
+
+      /*
+       * The platform paints the background, not the theme — so a hosted icon
+       * cannot read its colour from a token the way it does in the styled
+       * button. On a tinted button that is white, whatever the theme thinks its
+       * own primary foreground is; on the rest, including plain glass, the
+       * material is clear enough to leave the page's own foreground legible.
+       */
+      const nativeContent = prominent ? '#ffffff' : contentColor;
 
       return (
         <Host matchContents>
@@ -205,7 +305,22 @@ export const Button = forwardRef<View, ButtonProps>(
             label={isStringLabel ? children : undefined}
             variant={NATIVE_VARIANT[variant ?? 'primary']}
             disabled={isDisabled}
-            style={{ height: NATIVE_HEIGHT[size ?? 'md'] }}
+            /*
+             * A square for an icon button, a height for a labelled one — and
+             * in both cases a definite number, which is what stops the
+             * measurement chain above from having no fixed point in it.
+             *
+             * The frame does not decide how big the *button* looks; the padded
+             * label does, because that is what the platform draws its
+             * background around. The frame only has to be large enough to hold
+             * the result.
+             */
+            style={
+              size === 'icon'
+                ? { width: NATIVE_ICON_FRAME, height: NATIVE_ICON_FRAME }
+                : { height: NATIVE_HEIGHT[size ?? 'md'] }
+            }
+            modifiers={nativeModifiers.length ? nativeModifiers : undefined}
             onPress={props.onPress}
           >
             {/* Non-string children are React Native views, and the native
@@ -215,11 +330,28 @@ export const Button = forwardRef<View, ButtonProps>(
                 bare text once it is in there. */}
             {isStringLabel ? undefined : (
               <RNHostView matchContents>
-                <>
-                  {textChildren(children, (text) => (
-                    <Text className={label({ className: labelClassName })}>{text}</Text>
-                  ))}
-                </>
+                {/* Padding the hosted label is what grows the button, because
+                    the platform draws its background around the label. The
+                    centring is not redundant with it: a view lays a child out
+                    from its leading edge, so an icon narrower than the line it
+                    sits on ends up off to one side of a circle that is not. */}
+                <View
+                  style={
+                    size === 'icon'
+                      ? {
+                          padding: NATIVE_ICON_PADDING,
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                        }
+                      : undefined
+                  }
+                >
+                  <IconColorProvider color={nativeContent}>
+                    {textChildren(children, (text) => (
+                      <Text className={label({ className: labelClassName })}>{text}</Text>
+                    ))}
+                  </IconColorProvider>
+                </View>
               </RNHostView>
             )}
           </NativeButton>

package/src/components/calendar/index.tsx

@@ -39,11 +39,12 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
-import { Pressable, ScrollView, View, type ViewProps } from 'react-native';
+import { AppState, Pressable, ScrollView, View, type ViewProps } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import {
@@ -57,17 +58,20 @@ import { cn } from '../../utils/cn';
 import { Popover } from '../popover';
 import {
   addCalendarMonths,
-  addDays,
   calendarDayNumber,
   calendarLongDate,
   calendarMonthLabel,
   calendarMonthNames,
   calendarParts,
+  clampDate,
   isAfter,
   isBefore,
   isSameCalendarMonth,
   isSameDay,
   isWithin,
+  localeWeekStart,
+  monthGrid,
+  normalizeWeekStart,
   resolveCalendar,
   startOfCalendarMonth,
   startOfDay,
@@ -184,6 +188,35 @@ function useCalendar(component: string): CalendarContextValue {
   return context;
 }
 
+/**
+ * Today, kept current.
+ *
+ * "Today" is not a constant, and a calendar is exactly the kind of thing left
+ * on screen across the boundary that changes it — a picker open in a sheet, an
+ * app resumed the next morning. Recomputed when the app comes back to the
+ * foreground, which is when a stale answer would otherwise become visible, and
+ * held as state so the marker actually moves when it does.
+ */
+function useToday(): Date {
+  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;
+}
+
 /** Whether a rule, a list or a span rules this day out. */
 function isDisabled(
   date: Date,
@@ -245,8 +278,17 @@ export interface CalendarProps<Mode extends CalendarMode = 'single'>
   startMonth?: Date;
   /** Latest month the caption's pickers offer. Defaults to `maxDate`, else ten years on. */
   endMonth?: Date;
-  /** `0` is Sunday. */
-  weekStartsOn?: number;
+  /**
+   * Which day the week's first column is. `0` is Sunday.
+   *
+   * `auto` asks the locale, which is what most of the world wants — `en-GB` and
+   * `fr-FR` start on Monday, and a calendar that says otherwise is wrong in a
+   * way its reader notices immediately. It is not the default only because
+   * changing an existing calendar's columns out from under it is not something
+   * a version bump should do. Out-of-range numbers wrap rather than producing
+   * a blank column.
+   */
+  weekStartsOn?: number | 'auto';
   /** Draw the neighbouring months' days rather than leaving the cells blank. */
   showOutsideDays?: boolean;
   /**
@@ -291,7 +333,7 @@ function CalendarRoot<Mode extends CalendarMode = 'single'>({
   maxDate,
   startMonth,
   endMonth,
-  weekStartsOn = 0,
+  weekStartsOn: weekStartsOnProp = 0,
   showOutsideDays = true,
   selectOutsideDays = false,
   bordered = true,
@@ -302,6 +344,16 @@ function CalendarRoot<Mode extends CalendarMode = 'single'>({
   // 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]);
+  // Settled once too, and normalised: everything below indexes an array of
+  // seven with it, where a negative or out-of-range value is a blank column
+  // rather than an error anyone would trace back to here.
+  const weekStartsOn = useMemo(
+    () =>
+      weekStartsOnProp === 'auto'
+        ? localeWeekStart(locale)
+        : normalizeWeekStart(weekStartsOnProp),
+    [weekStartsOnProp, locale]
+  );
   const [internalSelected, setInternalSelected] = useState<CalendarSelection[Mode] | undefined>(
     defaultSelected
   );
@@ -328,15 +380,52 @@ function CalendarRoot<Mode extends CalendarMode = 'single'>({
   }, []);
 
   const [internalMonth, setInternalMonth] = useState(initialMonth);
-  const month = monthProp ? startOfCalendarMonth(monthProp, system, locale) : internalMonth;
+  /*
+   * Memoised on the *instant*, not on the prop. A controlled caller almost
+   * always passes a fresh `new Date(…)`, and deriving a new month object from
+   * it on every render invalidates the grid memo and the context memo below —
+   * so a calendar that has not moved rebuilds forty-two cells per keystroke
+   * somewhere else on the screen.
+   */
+  const controlledMonth = useMemo(
+    () => (monthProp ? startOfCalendarMonth(monthProp, system, locale) : undefined),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [monthProp?.getTime(), system, locale]
+  );
+  const month = controlledMonth ?? internalMonth;
+
+  /*
+   * How far the calendar may be paged, as the first day of the outermost month
+   * either way. `startMonth`/`endMonth` win where they are given, because they
+   * are the props about *navigation*; `minDate`/`maxDate` are about which days
+   * can be picked, and stand in when the navigation bounds are not stated.
+   */
+  const monthBounds = useMemo(() => {
+    const lower = startMonth ?? minDate;
+    const upper = endMonth ?? maxDate;
+    return {
+      from: lower ? startOfCalendarMonth(lower, system, locale) : undefined,
+      to: upper ? startOfCalendarMonth(upper, system, locale) : undefined,
+    };
+  }, [startMonth, minDate, endMonth, maxDate, system, locale]);
 
   const setMonth = useCallback(
     (next: Date) => {
-      const settled = startOfCalendarMonth(next, system, locale);
+      /*
+       * Clamped here rather than only at the arrows. The arrows guard
+       * themselves, but the caption's dropdowns and a controlled caller both
+       * reach this by other routes — and a month list that offers a year is a
+       * poor place to discover that the year was out of bounds.
+       */
+      const settled = clampDate(
+        startOfCalendarMonth(next, system, locale),
+        monthBounds.from,
+        monthBounds.to
+      );
       if (!monthProp) setInternalMonth(settled);
       onMonthChange?.(settled);
     },
-    [monthProp, onMonthChange, system, locale]
+    [monthProp, onMonthChange, system, locale, monthBounds]
   );
 
   const commit = useCallback(
@@ -351,6 +440,14 @@ function CalendarRoot<Mode extends CalendarMode = 'single'>({
     (date: Date) => {
       const day = startOfDay(date);
 
+      /*
+       * A tap on a neighbouring month's cell — which only happens with
+       * `selectOutsideDays` — commits a date the grid is not showing. Page to
+       * it, or the selection lands in a greyed-out cell of the month you are
+       * still looking at and reads as having missed.
+       */
+      if (!isSameCalendarMonth(day, month, system, locale)) setMonth(day);
+
       if (mode === 'multiple') {
         const current = (value as Date[] | undefined) ?? [];
         const without = current.filter((picked) => !isSameDay(picked, day));
@@ -379,7 +476,7 @@ function CalendarRoot<Mode extends CalendarMode = 'single'>({
       const current = value as Date | undefined;
       commit((isSameDay(current, day) ? undefined : day) as CalendarSelection[Mode]);
     },
-    [mode, value, commit]
+    [mode, value, commit, month, system, locale, setMonth]
   );
 
   const context = useMemo(
@@ -563,10 +660,30 @@ function CalendarDropdowns({ month, offset }: { month: Date; offset: number }) {
    */
   const first = startMonth ?? minDate;
   const last = endMonth ?? maxDate;
+  const firstParts = first ? calendarParts(first, system, locale) : null;
+  const lastParts = last ? calendarParts(last, system, locale) : null;
   const bounds = {
-    from: first ? calendarParts(first, system, locale).year : current.year - 100,
-    to: last ? calendarParts(last, system, locale).year : current.year + 10,
+    from: firstParts ? firstParts.year : current.year - 100,
+    to: lastParts ? lastParts.year : current.year + 10,
   };
+  /*
+   * The month list is bounded too, and only the year list used to be — so a
+   * calendar starting in March 1925 still offered January and February of 1925,
+   * and picking one navigated somewhere the calendar had said it would not go.
+   * Only the outermost year of each bound loses months; every year between them
+   * has all twelve.
+   */
+  const monthOptions = months
+    .map((label, index) => ({ label, month: index + 1 }))
+    .filter(({ month }) => {
+      if (firstParts && current.year === firstParts.year && month < firstParts.month) {
+        return false;
+      }
+      if (lastParts && current.year === lastParts.year && month > lastParts.month) {
+        return false;
+      }
+      return true;
+    });
   /*
    * 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
@@ -594,10 +711,10 @@ function CalendarDropdowns({ month, offset }: { month: Date; offset: number }) {
       <CaptionDropdown
         label={months[current.month - 1] ?? String(current.month)}
         accessibilityLabel="Month"
-        options={months}
-        active={current.month - 1}
+        options={monthOptions.map((option) => option.label)}
+        active={monthOptions.findIndex((option) => option.month === current.month)}
         width={MONTH_LIST_WIDTH}
-        onSelect={(index) => choose(index - (current.month - 1))}
+        onSelect={(index) => choose((monthOptions[index]?.month ?? current.month) - current.month)}
       />
       <CaptionDropdown
         label={String(current.year)}
@@ -787,16 +904,12 @@ function CalendarGrid({
    * 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 weeks = useMemo(
+    () => monthGrid(month, weekStartsOn, system, locale),
+    [month, weekStartsOn, system, locale]
+  );
   const headings = useMemo(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
-  const today = startOfDay(new Date());
+  const today = useToday();
 
   const range = mode === 'range' ? (value as DateRange | undefined) : undefined;
   const multiple = mode === 'multiple' ? ((value as Date[] | undefined) ?? []) : [];