@astryxdesign/core 0.7.8 → 0.7.9-canary.0236bb8

package/src/Calendar/hooks/useCalendarDays.ts

@@ -4,9 +4,11 @@
 
 /**
  * @file useCalendarDays.ts
- * @input Uses React useMemo, useLocale, PlainDate utilities, generated CLDR weekday data
- * @output Exports useCalendarDays hook for generating calendar day grids
- * @position Calendar-specific hook; used by Calendar
+ * @input Uses React useMemo, useLocale, PlainDate and calendar-system
+ *   utilities, generated CLDR weekday data
+ * @output Exports useCalendarDays, the day grid of one month of any calendar
+ *   system (Gregorian by default)
+ * @position Calendar-specific hook; used by Calendar and MonthScroller
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Calendar/hooks/index.ts
@@ -17,12 +19,17 @@ import type {DayOfWeek, ISODateString} from '../../utils/dateTypes';
 import {
   type PlainDate,
   plainDateToISO,
-  getDaysInMonth,
   plainDateDayOfWeek,
   plainDateAddDays,
 } from '../../utils/plainDate';
 import {useLocale} from '../../i18n';
 import {getWeekdayHeaderNames} from '../getWeekdayHeaderNames';
+import {
+  type CalendarSystem,
+  calendarDayOfMonth,
+  calendarMonthFromYearMonth,
+} from '../../utils/calendarSystem';
+import {resolveShownCalendar} from '../../i18n/useCalendarSystem';
 
 /**
  * Represents a single day in the calendar grid.
@@ -42,14 +49,27 @@ export interface CalendarDay {
  * Configuration for calendar days generation
  */
 export interface UseCalendarDaysOptions {
-  /** The year to generate days for */
+  /** The year to generate days for, in `calendar`'s numbering */
   year: number;
-  /** The month (1-based: 1 = January, 12 = December) */
+  /**
+   * The month's position in its year (1-based). In the Gregorian calendar,
+   * 1 is January and 12 is December. In other calendars it is numbered as
+   * `Temporal.PlainDate` numbers it: 1 through 13 in a Hebrew leap year.
+   */
   month: number;
   /** First day of week (0=Sunday through 6=Saturday) */
   weekStartsOn?: DayOfWeek;
   /** Use variable rows per month vs. fixed 6-row grid */
   hasVariableRowCount?: boolean;
+  /**
+   * The calendar system that numbers `year`, `month`, and each `dayNumber`.
+   * Each day keeps its Gregorian `date` and `iso`. The hook never reads the
+   * InternationalizationProvider calendar. Calendars other than gregory,
+   * iso8601, buddhist, roc, and japanese need Temporal; without it, the hook
+   * reads Gregorian numbers and warns once in development.
+   * @default 'gregory'
+   */
+  calendar?: CalendarSystem;
 }
 
 /**
@@ -80,71 +100,82 @@ export interface UseCalendarDaysReturn {
  *   weekStartsOn: 0, // Sunday
  * });
  * // days[i].date is a PlainDate { year, month (1-based), day }
+ *
+ * // Aban 1405 in the Persian calendar; dates stay Gregorian
+ * useCalendarDays({year: 1405, month: 8, calendar: 'persian'});
  * ```
  */
 export function useCalendarDays(
   options: UseCalendarDaysOptions,
 ): UseCalendarDaysReturn {
-  const {year, month, weekStartsOn = 0, hasVariableRowCount = false} = options;
-  const locale = useLocale();
-
-  // Calculate grid structure
-  const gridInfo = useMemo(() => {
-    const totalDaysInMonth = getDaysInMonth(year, month);
+  const {
+    year,
+    month,
+    weekStartsOn = 0,
+    hasVariableRowCount = false,
+    calendar: calendarOption = 'gregory',
+  } = options;
+  const calendar = resolveShownCalendar(calendarOption, 'useCalendarDays');
+  const days = useMemo(() => {
+    const calendarMonth = calendarMonthFromYearMonth(calendar, {year, month});
+    return layOutMonthDays({
+      first: calendarMonth.start,
+      length: calendarMonth.length,
+      weekStartsOn,
+      hasVariableRowCount,
+      dayNumberOf: (pd, offset) =>
+        offset >= 0 && offset < calendarMonth.length
+          ? offset + 1
+          : calendarDayOfMonth(calendar, pd),
+    });
+  }, [year, month, calendar, weekStartsOn, hasVariableRowCount]);
+  return useMonthGrid(days, weekStartsOn);
+}
 
-    // Calculate starting offset based on weekStartsOn
-    let startingDayOfWeek =
-      plainDateDayOfWeek({year, month, day: 1}) - weekStartsOn;
-    if (startingDayOfWeek < 0) {
-      startingDayOfWeek += 7;
-    }
+interface MonthLayout {
+  first: PlainDate;
+  length: number;
+  weekStartsOn: DayOfWeek;
+  hasVariableRowCount: boolean;
+  /** The day number of a grid day, given its offset from the month's first day. */
+  dayNumberOf: (pd: PlainDate, offset: number) => number;
+}
 
-    // Calculate total cells
-    const totalDays = totalDaysInMonth + startingDayOfWeek;
-    const totalRows = hasVariableRowCount ? Math.ceil(totalDays / 7) : 6;
-    const totalCells = totalRows * 7;
+function layOutMonthDays(layout: MonthLayout): CalendarDay[] {
+  const {first, length, weekStartsOn, hasVariableRowCount, dayNumberOf} =
+    layout;
+  let startingDayOfWeek = plainDateDayOfWeek(first) - weekStartsOn;
+  if (startingDayOfWeek < 0) {
+    startingDayOfWeek += 7;
+  }
+  const totalRows = hasVariableRowCount
+    ? Math.ceil((length + startingDayOfWeek) / 7)
+    : 6;
+  const result: CalendarDay[] = [];
+  for (let i = 0; i < totalRows * 7; i++) {
+    const offset = i - startingDayOfWeek;
+    const pd = plainDateAddDays(first, offset);
+    result.push({
+      date: pd,
+      iso: plainDateToISO(pd),
+      isOutside: offset < 0 || offset >= length,
+      dayNumber: dayNumberOf(pd, offset),
+    });
+  }
+  return result;
+}
 
-    return {
-      daysInMonth: totalDaysInMonth,
-      startingDayOfWeek,
-      totalCells,
-    };
-  }, [year, month, weekStartsOn, hasVariableRowCount]);
+function useMonthGrid(
+  days: CalendarDay[],
+  weekStartsOn: DayOfWeek,
+): UseCalendarDaysReturn {
+  const locale = useLocale();
 
   const dayNames = useMemo(
     () => getWeekdayHeaderNames(locale, weekStartsOn),
     [locale, weekStartsOn],
   );
 
-  // Generate days array
-  const days = useMemo(() => {
-    const {
-      daysInMonth: totalDaysInMonth,
-      startingDayOfWeek,
-      totalCells,
-    } = gridInfo;
-    const firstOfMonth: PlainDate = {year, month, day: 1};
-    const result: CalendarDay[] = [];
-
-    for (let i = 0; i < totalCells; i++) {
-      const dayOffset = i - startingDayOfWeek + 1;
-      const isOutside = dayOffset < 1 || dayOffset > totalDaysInMonth;
-      const pd: PlainDate = isOutside
-        ? plainDateAddDays(firstOfMonth, dayOffset - 1)
-        : {year, month, day: dayOffset};
-
-      result.push({
-        date: pd,
-        iso: plainDateToISO(pd),
-        isOutside,
-        dayNumber: pd.day,
-      });
-    }
-
-    return result;
-  }, [year, month, gridInfo]);
-
-  // Group days into weeks
   const weeks = useMemo(() => {
     const result: CalendarDay[][] = [];
     for (let i = 0; i < days.length; i += 7) {
@@ -153,10 +184,5 @@ export function useCalendarDays(
     return result;
   }, [days]);
 
-  return {
-    days,
-    weeks,
-    dayNames,
-    totalCells: gridInfo.totalCells,
-  };
+  return {days, weeks, dayNames, totalCells: days.length};
 }

package/src/Calendar/hooks/useCalendarNavigation.ts

@@ -4,9 +4,11 @@
 
 /**
  * @file useCalendarNavigation.ts
- * @input Uses React useState, useMemo, useCallback, useLocale, PlainDate utilities
- * @output Exports useCalendarNavigation hook for month navigation
- * @position Calendar-specific hook; used by Calendar
+ * @input Uses React useState, useMemo, useCallback, useLocale, PlainDate and
+ *   calendar-system utilities
+ * @output Exports useCalendarNavigation hook for month navigation in any
+ *   calendar system (Gregorian by default)
+ * @position Calendar-specific public hook
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Calendar/hooks/index.ts
@@ -19,12 +21,17 @@ import {
   plainDateFromISO,
   plainDateToISO,
   plainDateToday,
-  plainDateSetFirstOfMonth,
-  plainDateAddMonths,
   plainDateAddDays,
 } from '../../utils/plainDate';
-import {plainDateFormatStandaloneMonthYear} from '../../utils/plainDate';
+import {
+  type CalendarSystem,
+  calendarAddMonths,
+  calendarMonthOf,
+  calendarYearMonthOf,
+  formatCalendarMonthLabel,
+} from '../../utils/calendarSystem';
 import {useLocale} from '../../i18n';
+import {resolveShownCalendar} from '../../i18n/useCalendarSystem';
 
 /**
  * Configuration for calendar navigation
@@ -38,17 +45,31 @@ export interface UseCalendarNavigationOptions {
   onFocusDateChange?: (focusDate: ISODateString) => void;
   /** Number of months to display */
   numberOfMonths?: 1 | 2;
+  /**
+   * The calendar system whose months the hook steps and labels. Dates stay
+   * Gregorian ISO. The hook never reads the InternationalizationProvider
+   * calendar. Calendars other than gregory, iso8601, buddhist, roc, and
+   * japanese need Temporal; without it, the hook steps Gregorian months and
+   * warns once in development.
+   * @default 'gregory'
+   */
+  calendar?: CalendarSystem;
 }
 
 /**
  * Return type for useCalendarNavigation hook
  */
 export interface UseCalendarNavigationReturn {
-  /** The base month (first day of the focus month) as a PlainDate */
+  /** The Gregorian first day of the focus month */
   baseMonth: PlainDate;
-  /** Array of visible months to render as PlainDates */
+  /** The Gregorian first day of each visible month */
   visibleMonths: PlainDate[];
-  /** Formatted label for the month header */
+  /**
+   * The year and month numbers of each visible month in `calendar`, as
+   * `useCalendarDays` reads them with the same `calendar`
+   */
+  visibleCalendarMonths: {year: number; month: number}[];
+  /** Formatted label for the month header, in `calendar` */
   monthYearLabel: string;
   /** Navigate to previous/next month */
   navigateMonth: (
@@ -87,6 +108,13 @@ export interface UseCalendarNavigationReturn {
  * // Navigate from arrow key (with focus tracking)
  * navigateMonth(1, focusedDate, 1); // horizontal offset
  * navigateMonth(1, focusedDate, 7); // vertical offset
+ *
+ * // Persian months, laid out by useCalendarDays
+ * const nav = useCalendarNavigation({initialValue, calendar: 'persian'});
+ * const {weeks} = useCalendarDays({
+ *   ...nav.visibleCalendarMonths[0],
+ *   calendar: 'persian',
+ * });
  * ```
  */
 export function useCalendarNavigation(
@@ -97,8 +125,13 @@ export function useCalendarNavigation(
     focusDate: focusDateProp,
     onFocusDateChange,
     numberOfMonths = 1,
+    calendar: calendarOption = 'gregory',
   } = options;
   const locale = useLocale();
+  const calendar = resolveShownCalendar(
+    calendarOption,
+    'useCalendarNavigation',
+  );
 
   // Pending focus target after month navigation
   const [pendingFocus, setPendingFocus] = useState<ISODateString | null>(null);
@@ -121,32 +154,40 @@ export function useCalendarNavigation(
     ? plainDateFromISO(focusDateProp)
     : internalFocusDate;
 
-  // Base month (first day of focus month)
-  const baseMonth = useMemo(() => {
-    return plainDateSetFirstOfMonth(focusDate);
-  }, [focusDate]);
+  // A controlled focus date is a new object on each render. Key the memo on
+  // its ISO string.
+  const focusIso = plainDateToISO(focusDate);
+  const shownMonths = useMemo(() => {
+    const first = calendarMonthOf(calendar, plainDateFromISO(focusIso));
+    return Array.from({length: numberOfMonths}, (_, i) =>
+      calendarAddMonths(calendar, first, i),
+    );
+  }, [calendar, focusIso, numberOfMonths]);
+
+  const visibleMonths = useMemo(
+    () => shownMonths.map(month => month.start),
+    [shownMonths],
+  );
+  const baseMonth = visibleMonths[0];
 
-  // Generate visible months
-  const visibleMonths = useMemo(() => {
-    return Array.from({length: numberOfMonths}, (_, i) => {
-      return plainDateAddMonths(baseMonth, i);
-    });
-  }, [baseMonth, numberOfMonths]);
+  const visibleCalendarMonths = useMemo(
+    () => shownMonths.map(month => calendarYearMonthOf(calendar, month)),
+    [calendar, shownMonths],
+  );
 
-  // Format month header
-  // Each month is its own stand-alone label (Calendar FR1).
+  // Each month is its own stand-alone label.
   const monthYearLabel = useMemo(
     () =>
-      visibleMonths
-        .map(m => plainDateFormatStandaloneMonthYear(m, locale))
+      shownMonths
+        .map(month => formatCalendarMonthLabel(calendar, month, locale))
         .join(' – '),
-    [visibleMonths, locale],
+    [calendar, shownMonths, locale],
   );
 
   // Navigate to previous/next month
   const navigateMonth = useCallback(
     (delta: number, focusedDate?: ISODateString, offset?: number) => {
-      const newMonth = plainDateAddMonths(baseMonth, delta);
+      const newMonth = calendarAddMonths(calendar, shownMonths[0], delta).start;
       const newISO = plainDateToISO(newMonth);
 
       // Calculate target focus date if provided
@@ -164,7 +205,7 @@ export function useCalendarNavigation(
         setInternalFocusDate(newMonth);
       }
     },
-    [baseMonth, onFocusDateChange],
+    [calendar, shownMonths, onFocusDateChange],
   );
 
   // Clear pending focus
@@ -175,6 +216,7 @@ export function useCalendarNavigation(
   return {
     baseMonth,
     visibleMonths,
+    visibleCalendarMonths,
     monthYearLabel,
     navigateMonth,
     pendingFocus,

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -109,7 +109,7 @@ export const docs = {
       name: 'size',
       type: "'sm' | 'md'",
       description:
-        'The size of the checkbox. sm for compact layouts, md for default.',
+        'The size of the checkbox. sm for compact layouts, md for default. Under a coarse pointer a labelled checkbox’s target grows toward 44 px through an invisible hit area. It never shrinks below the row and stops at half the gap to a closer neighbour; nothing changes size.',
       default: "'md'",
     },
     {
@@ -155,7 +155,7 @@ export const docs = {
       {
         name: '--_indicator-press-image',
         description:
-          "The row's touch press image, handed down to a first-party indicator that paints its own press. Set from the press paint only while the row itself is pressed; only this row declares it.",
+          "The row's touch press image, handed down to a first-party indicator that paints its own press. Set from the press paint only while the row itself is pressed, or, under a CheckboxList row that owns the press, from that row's press paint. Only this row declares it.",
         default: 'none',
         private: true,
       },
@@ -361,7 +361,8 @@ export const docsZh = {
     {
       name: 'size',
       type: "'sm' | 'md'",
-      description: '复选框尺寸。sm 用于紧凑布局，md 为默认。',
+      description:
+        '复选框尺寸。sm 用于紧凑布局，md 为默认。在粗指针（触摸）下，带可见标签的复选框的目标通过不可见的点击区域向 44 px 扩展。它不小于所在行，与相邻控件较近时止于间距的一半；尺寸不变。',
       default: "'md'",
     },
     {
@@ -403,7 +404,7 @@ export const docsZh = {
       {
         name: '--_indicator-press-image',
         description:
-          '复选框行的触摸按下图像，传递给自行绘制按下效果的第一方指示器。仅在该行自身被按下时根据按下涂层设置，只有该行声明它。',
+          '复选框行的触摸按下图像，传递给自行绘制按下效果的第一方指示器。仅在该行自身被按下时根据按下涂层设置；在拥有按下效果的 CheckboxList 行中，取该行的按下涂层。只有该行声明它。',
         default: 'none',
         private: true,
       },

package/src/CheckboxInput/CheckboxInput.tsx

@@ -4,7 +4,8 @@
 
 /**
  * @file CheckboxInput.tsx
- * @input Uses React, useId, ChangeEvent, FieldLabel, FieldStatus, IconType, InputStatus, useTooltip
+ * @input Uses React, useId, ChangeEvent, FieldLabel, FieldStatus, IconType, InputStatus, useTooltip,
+ *   CheckboxRowPressContext (a row around the checkbox that owns its press)
  * @output Exports CheckboxInput component, CheckboxInputProps
  * @position Core implementation; consumed by index.ts, tested by CheckboxInput.test.tsx
  *
@@ -17,6 +18,7 @@
  */
 
 import {
+  use,
   useId,
   useCallback,
   useOptimistic,
@@ -24,6 +26,8 @@ import {
   useTransition,
   type ChangeEvent,
   type FocusEvent,
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -55,11 +59,14 @@ import {useIndicator} from '../Indicator/useIndicator';
 import {themeProps} from '../utils/themeProps';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useTouchHitArea} from '../utils/touchHitArea';
+import {touchHitAreaStyles} from '../utils/touchHitArea.stylex';
 import {
   registerEnglishFallback,
   useComponentTranslator,
 } from '../i18n/useComponentTranslator';
 import english from '../i18n/generated-english/CheckboxInput/CheckboxInput.generated';
+import {CheckboxRowPressContext} from './CheckboxRowPressContext';
 
 registerEnglishFallback(english);
 
@@ -83,10 +90,14 @@ const styles = stylex.create({
   containerLabelHidden: {
     gap: 0,
   },
+  // Under a coarse pointer the row contains its hit band.
+  hitAreaHost: {
+    position: {default: null, '@media (pointer: coarse)': 'relative'},
+  },
   // An indicator in another package may not name this row's private press
   // attribute. So the row hands its touch press image down to an indicator
   // that paints its own press, but only in its own press states. A pressed
-  // ancestor row reaches it no more than it reaches the built-in box. The
+  // outer row hands down nothing, as for the built-in box. The
   // property has no default: a layered stylesheet ranks a default above the
   // arms. Only this row declares it. A menu item paints its own press, so a
   // mapped indicator there paints none.
@@ -97,6 +108,12 @@ const styles = stylex.create({
       [PRESSED_FADING]: 'var(--_press-paint-image)',
     },
   },
+  // Under a row that owns the press (CheckboxRowPressContext), this row is
+  // never pressed. So it hands down that row's press paint, which the
+  // built-in box reads too.
+  indicatorRowPressImage: {
+    '--_indicator-press-image': 'var(--_checkbox-row-press-paint, none)',
+  },
   checkboxWrapper: {
     position: 'relative',
     display: 'flex',
@@ -108,11 +125,12 @@ const styles = stylex.create({
   // The owner paints this layer over the resolved indicator, so a plain theme
   // replacement keeps the pressed feedback. An indicator with
   // `indicatorPressScope` paints its own press from what the row hands down,
-  // so this layer stays off over it.
-  // Two pointers, two press models (see interactionOverlay.stylex.ts): a
-  // mouse keeps `:active`; under a coarse pointer that arm is dropped and the
-  // touch press controller writes `data-astryx-press` on the row, which this layer
-  // reads off the same scope marker as the hover tint.
+  // so this layer stays off over it. A mouse keeps `:active` (see
+  // interactionOverlay.stylex.ts). Under a coarse pointer that arm is dropped.
+  // The touch press controller then writes the press attribute on the row.
+  // This layer reads it off the scope marker, as the hover tint does. Under a
+  // row that owns the press (CheckboxRowPressContext), the row's own checkbox
+  // paints that row's press paint instead (indicatorRowPressOverlay).
   indicatorPressOverlay: {
     '::after': {
       // `when.descendant` takes a pseudo-class; `:is(*)` matches any marked
@@ -149,6 +167,15 @@ const styles = stylex.create({
       },
     },
   },
+  // The row's own checkbox when its row owns the press
+  // (CheckboxRowPressContext). It paints only the paint that row declares
+  // (`--_checkbox-row-press-paint`). No outer row, card or fine pointer
+  // reaches it.
+  indicatorRowPressOverlay: {
+    '::after': {
+      backgroundImage: 'var(--_checkbox-row-press-paint, none)',
+    },
+  },
   // Holds only the indicator, so the focus ring has one unambiguous target.
   // `display: contents` adds no box of its own — the indicator keeps whatever
   // layout relationship it already had with the wrapper.
@@ -373,6 +400,13 @@ export function CheckboxInput({
   // The row is the pressable: the overlay's pressed arm reads the row's
   // scope marker, the way the indicator's hover tint does.
   const pressable = usePressFeedback();
+  // A row around the checkbox that answers a press anywhere on it (a
+  // CheckboxListItem) owns the touch press instead. The checkbox then carries
+  // no press marker of its own. So the controller's innermost-wins rule finds
+  // the row for a finger on the label, the description or the box. The
+  // overlay below paints that row's press.
+  const isRowPressSurface = use(CheckboxRowPressContext);
+  const ownsPress = !isDisabled && !isRowPressSurface;
   const generatedId = useId();
   const id = idProp || generatedId;
   const descriptionID = useId();
@@ -407,6 +441,55 @@ export function CheckboxInput({
   useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), indicatorRef);
   const {focusProps} = useIndicatorFocusRing(indicatorRef);
 
+  // Under a coarse pointer a labelled checkbox's row grows toward 44 px
+  // through an invisible band, and nothing changes size. A label-hidden
+  // checkbox is a marker in another component's row, which keeps its target.
+  const hasHitArea = !isLabelHidden && !isDisabled && !isReadOnly;
+  const inputRef = useRef<HTMLInputElement>(null);
+  // The band's insets stay live while the row takes taps, and clear when it
+  // stops.
+  const watchRowHitArea = useTouchHitArea(hasHitArea);
+  // The disabled-message tooltip listens for hover and focus on the whole
+  // row, a larger trigger. It anchors on the checkbox itself (below), so it
+  // shows next to the control. Its handlers check isEnabled, so the row
+  // always attaches them.
+  const rowRef = useMergedRefs(
+    disabledMessageTooltip.interactionRef,
+    watchRowHitArea,
+  );
+  // Where a press on the row itself began. A browser can move a tap's click
+  // onto the row's edge, so the band is judged from the press.
+  const pressPointRef = useRef<{x: number; y: number} | null>(null);
+  const handleRowPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    pressPointRef.current =
+      event.target === event.currentTarget
+        ? {x: event.clientX, y: event.clientY}
+        : null;
+  };
+  // A press that began on the band, outside the row's box, toggles the
+  // checkbox, as a tap on the box does. A click from code has no press count
+  // (`detail` is 0), so it never toggles from here.
+  const handleRowClick = (event: ReactMouseEvent<HTMLDivElement>) => {
+    const press = pressPointRef.current;
+    pressPointRef.current = null;
+    if (
+      press == null ||
+      event.detail === 0 ||
+      event.target !== event.currentTarget
+    ) {
+      return;
+    }
+    const box = event.currentTarget.getBoundingClientRect();
+    const isOnBand =
+      press.x < box.left ||
+      press.x > box.right ||
+      press.y < box.top ||
+      press.y > box.bottom;
+    if (isOnBand) {
+      inputRef.current?.click();
+    }
+  };
+
   const isIndeterminate = optimisticValue === 'indeterminate';
   const isChecked = optimisticValue === true;
 
@@ -455,33 +538,34 @@ export function CheckboxInput({
         style,
       )}>
       <div
-        ref={el => {
-          // Interaction (hover/focus) listeners for the disabled-message
-          // tooltip attach to the whole row for a larger trigger target;
-          // positioning anchors on the checkbox itself (below) so the tooltip
-          // appears next to the control, not the far edge of the row.
-          // Handlers are gated internally by isEnabled, so attaching
-          // unconditionally is safe.
-          disabledMessageTooltip.interactionRef(el);
-        }}
-        {...(isDisabled ? undefined : pressable)}
+        ref={rowRef}
+        onPointerDown={hasHitArea ? handleRowPointerDown : undefined}
+        onClick={hasHitArea ? handleRowClick : undefined}
+        {...(ownsPress ? pressable : undefined)}
         {...stylex.props(
           styles.container,
           isLabelHidden && styles.containerLabelHidden,
+          hasHitArea && styles.hitAreaHost,
+          hasHitArea && touchHitAreaStyles.layer,
           // Hover and focus reach the checkbox visual through this ancestor
           // marker rather than props, so the whole row drives it.
           !isDisabled && indicatorScope,
-          !isDisabled && styles.indicatorPressImage,
+          !isDisabled &&
+            (isRowPressSurface
+              ? styles.indicatorRowPressImage
+              : styles.indicatorPressImage),
           // The touch press's strength and release live on the row the
           // controller writes to; the layer over the checkbox box inherits
-          // and paints it.
-          !isDisabled && interactionOverlayStyles.pressedAlpha,
+          // and paints it. Under a row that owns the press, the box inherits
+          // that row's strength instead.
+          ownsPress && interactionOverlayStyles.pressedAlpha,
         )}>
         <div
           {...stylex.props(
             styles.checkboxWrapper,
             wrapperSizeStyles[size],
             !isDisabled && styles.indicatorPressOverlay,
+            !isDisabled && isRowPressSurface && styles.indicatorRowPressOverlay,
           )}
           {...focusProps}>
           <input
@@ -490,6 +574,7 @@ export function CheckboxInput({
               ref,
               indeterminateRef,
               disabledMessageTooltip.positionRef,
+              inputRef,
             )}
             id={id}
             type="checkbox"

package/src/CheckboxInput/CheckboxRowPressContext.ts

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file CheckboxRowPressContext.ts
+ * @input Uses the private layer-scoped context factory
+ * @output CheckboxRowPressContext: whether the row is its checkbox's press surface
+ * @position Internal; CheckboxListItem provides it, CheckboxInput reads it
+ *
+ * Such a row carries the shared press marker (utils/pressFeedback.ts). Its
+ * checkbox carries none, so a finger anywhere on the row presses the row.
+ * It is layer-scoped and wraps only the row's own checkbox.
+ *
+ * SYNC: When modified, update CheckboxInput.tsx and
+ * ../CheckboxList/CheckboxListItem.tsx.
+ */
+
+import {createLayerScopedContext} from '../Layer/layerScopedContext';
+
+export const CheckboxRowPressContext = createLayerScopedContext(false);
+CheckboxRowPressContext.displayName = 'CheckboxRowPressContext';