@kanso-labs/react-native-kanso-ui 0.7.0 → 0.9.0

package/dist/components/calendar/index.js

@@ -1,6 +1,6 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles } from "../../theme/styles.js";
-import { localeOf } from "../../number/locale.js";
+import { useLocaleOf } from "../../i18n/provider.js";
 import { stylesOf } from "../../calendar/styles.js";
 import { CalendarFrame, visibleMonthOf } from "../../calendar/index.js";
 import { c } from "react/compiler-runtime";
@@ -27,54 +27,93 @@ import { useCalendarState } from "react-stately/useCalendarState";
 * `style`, `ref` and `testID` land on the container.
 */
 function Calendar(t0) {
-	const $ = c(12);
-	const { "aria-label": ariaLabel, locale, ref, showMonthYearMenus: t1, style, testID, ...props } = t0;
+	const $ = c(26);
+	let ariaLabel;
+	let locale;
+	let props;
+	let ref;
+	let style;
+	let t1;
+	let testID;
+	if ($[0] !== t0) {
+		({"aria-label": ariaLabel, locale, ref, showMonthYearMenus: t1, style, testID, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = locale;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = style;
+		$[6] = t1;
+		$[7] = testID;
+	} else {
+		ariaLabel = $[1];
+		locale = $[2];
+		props = $[3];
+		ref = $[4];
+		style = $[5];
+		t1 = $[6];
+		testID = $[7];
+	}
 	const showMonthYearMenus = t1 === void 0 ? false : t1;
-	const writtenIn = localeOf(locale);
+	const writtenIn = useLocaleOf(locale);
 	const own = stylesOf(useTheme());
-	const state = useCalendarState({
-		...props,
-		createCalendar,
-		locale: writtenIn
-	});
-	const month = visibleMonthOf(state, writtenIn);
+	let t2;
+	if ($[8] !== props || $[9] !== writtenIn) {
+		t2 = {
+			...props,
+			createCalendar,
+			locale: writtenIn
+		};
+		$[8] = props;
+		$[9] = writtenIn;
+		$[10] = t2;
+	} else t2 = $[10];
+	const state = useCalendarState(t2);
+	let t3;
+	if ($[11] !== state || $[12] !== writtenIn) {
+		t3 = visibleMonthOf(state, writtenIn);
+		$[11] = state;
+		$[12] = writtenIn;
+		$[13] = t3;
+	} else t3 = $[13];
+	const month = t3;
 	const T0 = View;
-	const t2 = ariaLabel === void 0 ? month : `${ariaLabel}, ${month}`;
-	const t3 = "group";
-	const t4 = composeStyles(own.root, style);
-	let t5;
-	if ($[0] !== props.firstDayOfWeek || $[1] !== showMonthYearMenus || $[2] !== state || $[3] !== writtenIn) {
-		t5 = /* @__PURE__ */ jsx(CalendarFrame, {
+	const t4 = ariaLabel === void 0 ? month : `${ariaLabel}, ${month}`;
+	const t5 = "group";
+	const t6 = composeStyles(own.root, style);
+	let t7;
+	if ($[14] !== props.firstDayOfWeek || $[15] !== showMonthYearMenus || $[16] !== state || $[17] !== writtenIn) {
+		t7 = /* @__PURE__ */ jsx(CalendarFrame, {
 			firstDayOfWeek: props.firstDayOfWeek,
 			locale: writtenIn,
 			showMonthYearMenus,
 			state
 		});
-		$[0] = props.firstDayOfWeek;
-		$[1] = showMonthYearMenus;
-		$[2] = state;
-		$[3] = writtenIn;
-		$[4] = t5;
-	} else t5 = $[4];
-	let t6;
-	if ($[5] !== T0 || $[6] !== ref || $[7] !== t2 || $[8] !== t4 || $[9] !== t5 || $[10] !== testID) {
-		t6 = /* @__PURE__ */ jsx(T0, {
-			"aria-label": t2,
+		$[14] = props.firstDayOfWeek;
+		$[15] = showMonthYearMenus;
+		$[16] = state;
+		$[17] = writtenIn;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== T0 || $[20] !== ref || $[21] !== t4 || $[22] !== t6 || $[23] !== t7 || $[24] !== testID) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			"aria-label": t4,
 			ref,
-			role: t3,
-			style: t4,
+			role: t5,
+			style: t6,
 			testID,
-			children: t5
+			children: t7
 		});
-		$[5] = T0;
-		$[6] = ref;
-		$[7] = t2;
-		$[8] = t4;
-		$[9] = t5;
-		$[10] = testID;
-		$[11] = t6;
-	} else t6 = $[11];
-	return t6;
+		$[19] = T0;
+		$[20] = ref;
+		$[21] = t4;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = testID;
+		$[25] = t8;
+	} else t8 = $[25];
+	return t8;
 }
 //#endregion
 export { Calendar };

package/dist/components/calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","Ref","StyleProp","ViewStyle","DateValue","CalendarProps","StatelyCalendarProps","createCalendar","View","useCalendarState","CalendarFrame","visibleMonthOf","stylesOf","localeOf","useTheme","composeStyles","Pick","T","locale","ref","showMonthYearMenus","style","testID","Calendar","t0","$","_c","ariaLabel","t1","props","undefined","writtenIn","own","state","month","T0","t2","t3","t4","root","t5","firstDayOfWeek","t6","_c"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewStyle } from 'react-native'\nimport type {\n  DateValue,\n  CalendarProps as StatelyCalendarProps,\n} from 'react-stately/useCalendarState'\n\nimport { createCalendar } from '@internationalized/date'\nimport { View } from 'react-native'\nimport { useCalendarState } from 'react-stately/useCalendarState'\n\nimport { CalendarFrame, visibleMonthOf } from '../../calendar'\nimport { stylesOf } from '../../calendar/styles'\nimport { localeOf } from '../../number/locale'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// kanso-ui's Calendar, the date pickers page's docked calendar: a month grid\n// with a circle on the selected date and an outline on today. Its values are\n// that page's: a 360dp container on the high surface container, 48dp date\n// cells with a 40dp state layer inside them, body large for both the weekday\n// row and the dates, and primary for the selected circle and for today's\n// outline. The parts are in src/calendar.\n//\n// The state is React Stately's `useCalendarState`, which web's React Aria\n// calendar is built on, over `@internationalized/date`, so the selection,\n// the bounds and the locale's calendar, first day of the week and digits\n// behave as they do on web.\n//\n// The page's container is 456dp tall, which this does not take: that height\n// is a picker's, counting a headline and an action row the calendar itself\n// does not draw. What is held instead is the grid, at six weeks, the most any\n// month occupies, so the calendar keeps its height as the month moves and a\n// shorter month leaves its last rows empty.\n//\n// `showMonthYearMenus` draws the page's docked header instead of one heading:\n// the month's menu button between the chevrons that step it and the year's\n// after them, each opening its list where the grid was, as web's does. The\n// page draws the lists there, and a calendar inside a picker is already in\n// a panel, so a menu over it would be a panel over a panel.\n//\n// Five things are this component's own, as on web.\n//\n// **The year menu has no chevrons of its own.** The page draws a pair either\n// side of it that step a year; the year list reaches any year within a\n// century of the one shown in one press, or any the bounds allow where they\n// are closer.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The circle is the pressable, centred in a 48dp column and a 48dp\n// row, and its `hitSlop` reaches the 4dp past it on every side, so the whole\n// square takes the press. The chevrons and the menu buttons reach a 48dp\n// target the same way.\n//\n// **It narrows to its container.** The page's docked calendar is 360dp, and\n// a compact window leaves 328dp between its margins, so the calendar is 360\n// at most and the columns share whatever is left below that.\n//\n// **A date from the month either side is faded because it is disabled**, as\n// React Aria disables those dates: the page's 38% either way. A date\n// `isDateUnavailable` rules out is struck through at full contrast instead,\n// since a reader can still land on it and has to read it.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and\n// the on-primary label. A selected today takes the fill.\n//\n// Web's month changes at once. Here **the weeks slide in** from the side the\n// new month comes from, Material Design's shared axis transition, and change\n// at once under reduced motion.\n//\n// **The locale is a prop**, defaulting to the device's, where web reads it\n// from React Aria's `I18nProvider`. The words the calendar writes, its\n// chevrons' names and its dates', are React Aria's in that locale.\n\ntype CalendarProps<T extends DateValue = DateValue> = Pick<\n  StatelyCalendarProps<T>,\n  | 'defaultFocusedValue'\n  | 'defaultValue'\n  | 'firstDayOfWeek'\n  | 'focusedValue'\n  | 'isDateUnavailable'\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'maxValue'\n  | 'minValue'\n  | 'onChange'\n  | 'onFocusChange'\n  | 'value'\n> & {\n  /**\n   * The calendar's name. The month shown is added to it, as React Aria adds\n   * it on web.\n   */\n  readonly 'aria-label'?: string\n  /**\n   * The BCP 47 locale the calendar is written in: its month and weekday\n   * names, its digits, its first day of the week and its calendar system.\n   * Defaults to the device's.\n   */\n  readonly locale?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as the docked date picker's\n   * header does, rather than one heading between the chevrons. For a date\n   * far from the one shown, such as a date of birth: the year list runs a\n   * century either side of the year shown, or to `minValue` and `maxValue`\n   * where they are closer.\n   * @default false\n   */\n  readonly showMonthYearMenus?: boolean\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\n/**\n * A month calendar for picking a date. The value is an\n * `@internationalized/date` value, as on web: pass `value` with `onChange` to\n * control it, or `defaultValue` to let it keep its own.\n *\n * ```tsx\n * import { getLocalTimeZone, today } from '@internationalized/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, and `isDateUnavailable` rules\n * individual dates out. Name it with `aria-label`; the month shown is added\n * to the name.\n *\n * `style`, `ref` and `testID` land on the container.\n */\nfunction Calendar<T extends DateValue = DateValue>({\n  'aria-label': ariaLabel,\n  locale,\n  ref,\n  showMonthYearMenus = false,\n  style,\n  testID,\n  ...props\n}: CalendarProps<T>) {\n  const writtenIn = localeOf(locale)\n  const own = stylesOf(useTheme())\n  const state = useCalendarState<T>({\n    ...props,\n    createCalendar,\n    locale: writtenIn,\n  })\n  const month = visibleMonthOf(state, writtenIn)\n\n  return (\n    <View\n      aria-label={ariaLabel === undefined ? month : `${ariaLabel}, ${month}`}\n      ref={ref}\n      role=\"group\"\n      style={composeStyles<ViewStyle>(own.root, style)}\n      testID={testID}\n    >\n      <CalendarFrame\n        firstDayOfWeek={props.firstDayOfWeek}\n        locale={writtenIn}\n        showMonthYearMenus={showMonthYearMenus}\n        state={state}\n      />\n    </View>\n  )\n}\n\nexport type { CalendarProps }\n\nexport { Calendar }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsIA,SAAAuB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAmD,MAAA,EAAA,cAAAC,WAAAT,QAAAC,KAAAC,oBAAAQ,IAAAP,OAAAC,QAAA,GAAAO,UAAAL;CAIjD,MAAAJ,qBAAAQ,OAAAE,KAAAA,IAAA,QAAAF;CAKA,MAAAG,YAAkBlB,SAASK,MAAM;CACjC,MAAAc,MAAYpB,SAASE,SAAS,CAAC;CAC/B,MAAAmB,QAAcxB,iBAAoB;EAAA,GAC7BoB;EAAKtB;EAAAW,QAEAa;CACV,CAAC;CACD,MAAAG,QAAcvB,eAAesB,OAAOF,SAAS;CAG1C,MAAAI,KAAA3B;CACa,MAAA4B,KAAAT,cAAcG,KAAAA,IAAdI,QAAA,GAAqCP,UAAS,IAAKO;CAE1D,MAAAG,KAAA;CACE,MAAAC,KAAAvB,cAAyBiB,IAAGO,MAAOlB,KAAK;CAAC,IAAAmB;CAAA,IAAAf,EAAA,OAAAI,MAAAY,kBAAAhB,EAAA,OAAAL,sBAAAK,EAAA,OAAAQ,SAAAR,EAAA,OAAAM,WAAA;EAGhDS,KAAA,oBAAC,eAAD;GACkB,gBAAAX,MAAKY;GACbV,QAAAA;GACYX;GACba;EAAK,CAAA;EACZR,EAAA,KAAAI,MAAAY;EAAAhB,EAAA,KAAAL;EAAAK,EAAA,KAAAQ;EAAAR,EAAA,KAAAM;EAAAN,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAU,MAAAV,EAAA,OAAAN,OAAAM,EAAA,OAAAW,MAAAX,EAAA,OAAAa,MAAAb,EAAA,OAAAe,MAAAf,EAAA,QAAAH,QAAA;EAZJoB,KAAA,oBAAC,IAAD;GACc,cAAAN;GACPjB;GACA,MAAAkB;GACE,OAAAC;GACChB;GAERkB,UAAAA;EAPG,CAAA;EAaEf,EAAA,KAAAU;EAAAV,EAAA,KAAAN;EAAAM,EAAA,KAAAW;EAAAX,EAAA,KAAAa;EAAAb,EAAA,KAAAe;EAAAf,EAAA,MAAAH;EAAAG,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAbPiB;AAaO"}
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","StyleProp","ViewStyle","DateValue","CalendarProps","StatelyCalendarProps","createCalendar","View","useCalendarState","CalendarFrame","visibleMonthOf","stylesOf","useLocaleOf","useTheme","composeStyles","Pick","T","locale","ref","showMonthYearMenus","style","testID","Calendar","t0","$","_c","ariaLabel","props","t1","undefined","writtenIn","own","t2","state","t3","month","T0","t4","t5","t6","root","t7","firstDayOfWeek","t8","_c"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewStyle } from 'react-native'\nimport type {\n  DateValue,\n  CalendarProps as StatelyCalendarProps,\n} from 'react-stately/useCalendarState'\n\nimport { createCalendar } from '@internationalized/date'\nimport { View } from 'react-native'\nimport { useCalendarState } from 'react-stately/useCalendarState'\n\nimport { CalendarFrame, visibleMonthOf } from '../../calendar'\nimport { stylesOf } from '../../calendar/styles'\nimport { useLocaleOf } from '../../i18n/provider'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// kanso-ui's Calendar, the date pickers page's docked calendar: a month grid\n// with a circle on the selected date and an outline on today. Its values are\n// that page's: a 360dp container on the high surface container, 48dp date\n// cells with a 40dp state layer inside them, body large for both the weekday\n// row and the dates, and primary for the selected circle and for today's\n// outline. The parts are in src/calendar.\n//\n// The state is React Stately's `useCalendarState`, which web's React Aria\n// calendar is built on, over `@internationalized/date`, so the selection,\n// the bounds and the locale's calendar, first day of the week and digits\n// behave as they do on web.\n//\n// The page's container is 456dp tall, which this does not take: that height\n// is a picker's, counting a headline and an action row the calendar itself\n// does not draw. What is held instead is the grid, at six weeks, the most any\n// month occupies, so the calendar keeps its height as the month moves and a\n// shorter month leaves its last rows empty.\n//\n// `showMonthYearMenus` draws the page's docked header instead of one heading:\n// the month's menu button between the chevrons that step it and the year's\n// after them, each opening its list where the grid was, as web's does. The\n// page draws the lists there, and a calendar inside a picker is already in\n// a panel, so a menu over it would be a panel over a panel.\n//\n// Five things are this component's own, as on web.\n//\n// **The year menu has no chevrons of its own.** The page draws a pair either\n// side of it that step a year; the year list reaches any year within a\n// century of the one shown in one press, or any the bounds allow where they\n// are closer.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The circle is the pressable, centred in a 48dp column and a 48dp\n// row, and its `hitSlop` reaches the 4dp past it on every side, so the whole\n// square takes the press. The chevrons and the menu buttons reach a 48dp\n// target the same way.\n//\n// **It narrows to its container.** The page's docked calendar is 360dp, and\n// a compact window leaves 328dp between its margins, so the calendar is 360\n// at most and the columns share whatever is left below that.\n//\n// **A date from the month either side is faded because it is disabled**, as\n// React Aria disables those dates: the page's 38% either way. A date\n// `isDateUnavailable` rules out is struck through at full contrast instead,\n// since a reader can still land on it and has to read it.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and\n// the on-primary label. A selected today takes the fill.\n//\n// Web's month changes at once. Here **the weeks slide in** from the side the\n// new month comes from, Material Design's shared axis transition, and change\n// at once under reduced motion.\n//\n// **The locale is the `I18nProvider`'s**, as web reads it from React Aria's,\n// unless the `locale` prop names another, and the device's under neither. The\n// words the calendar writes, its chevrons' names and its dates', are React\n// Aria's in that locale.\n\ntype CalendarProps<T extends DateValue = DateValue> = Pick<\n  StatelyCalendarProps<T>,\n  | 'defaultFocusedValue'\n  | 'defaultValue'\n  | 'firstDayOfWeek'\n  | 'focusedValue'\n  | 'isDateUnavailable'\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'maxValue'\n  | 'minValue'\n  | 'onChange'\n  | 'onFocusChange'\n  | 'value'\n> & {\n  /**\n   * The calendar's name. The month shown is added to it, as React Aria adds\n   * it on web.\n   */\n  readonly 'aria-label'?: string\n  /**\n   * The BCP 47 locale the calendar is written in: its month and weekday\n   * names, its digits, its first day of the week and its calendar system.\n   * Defaults to the `I18nProvider`'s, or the device's outside one.\n   */\n  readonly locale?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as the docked date picker's\n   * header does, rather than one heading between the chevrons. For a date\n   * far from the one shown, such as a date of birth: the year list runs a\n   * century either side of the year shown, or to `minValue` and `maxValue`\n   * where they are closer.\n   * @default false\n   */\n  readonly showMonthYearMenus?: boolean\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\n/**\n * A month calendar for picking a date. The value is an\n * `@internationalized/date` value, as on web: pass `value` with `onChange` to\n * control it, or `defaultValue` to let it keep its own.\n *\n * ```tsx\n * import { getLocalTimeZone, today } from '@internationalized/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, and `isDateUnavailable` rules\n * individual dates out. Name it with `aria-label`; the month shown is added\n * to the name.\n *\n * `style`, `ref` and `testID` land on the container.\n */\nfunction Calendar<T extends DateValue = DateValue>({\n  'aria-label': ariaLabel,\n  locale,\n  ref,\n  showMonthYearMenus = false,\n  style,\n  testID,\n  ...props\n}: CalendarProps<T>) {\n  const writtenIn = useLocaleOf(locale)\n  const own = stylesOf(useTheme())\n  const state = useCalendarState<T>({\n    ...props,\n    createCalendar,\n    locale: writtenIn,\n  })\n  const month = visibleMonthOf(state, writtenIn)\n\n  return (\n    <View\n      aria-label={ariaLabel === undefined ? month : `${ariaLabel}, ${month}`}\n      ref={ref}\n      role=\"group\"\n      style={composeStyles<ViewStyle>(own.root, style)}\n      testID={testID}\n    >\n      <CalendarFrame\n        firstDayOfWeek={props.firstDayOfWeek}\n        locale={writtenIn}\n        showMonthYearMenus={showMonthYearMenus}\n        state={state}\n      />\n    </View>\n  )\n}\n\nexport type { CalendarProps }\n\nexport { Calendar }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuIA,SAAAuB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAT;CAAA,IAAAU;CAAA,IAAAT;CAAA,IAAAE;CAAA,IAAAQ;CAAA,IAAAP;CAAA,IAAAG,EAAA,OAAAD,IAAA;EAAmD,CAAA,CAAA,cAAAG,WAAAT,QAAAC,KAAAC,oBAAAS,IAAAR,OAAAC,QAAA,GAAAM,SAAAJ;EAQhCC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAP;EAAAO,EAAA,KAAAG;EAAAH,EAAA,KAAAN;EAAAM,EAAA,KAAAJ;EAAAI,EAAA,KAAAI;EAAAJ,EAAA,KAAAH;CAAA,OAAA;EAAAK,YAAAF,EAAA;EAAAP,SAAAO,EAAA;EAAAG,QAAAH,EAAA;EAAAN,MAAAM,EAAA;EAAAJ,QAAAI,EAAA;EAAAI,KAAAJ,EAAA;EAAAH,SAAAG,EAAA;CAAA;CAJjB,MAAAL,qBAAAS,OAAAC,KAAAA,IAAA,QAAAD;CAKA,MAAAE,YAAkBlB,YAAYK,MAAM;CACpC,MAAAc,MAAYpB,SAASE,SAAS,CAAC;CAAC,IAAAmB;CAAA,IAAAR,EAAA,OAAAG,SAAAH,EAAA,OAAAM,WAAA;EACEE,KAAA;GAAA,GAC7BL;GAAKrB;GAAAW,QAEAa;EACV;EAACN,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAJD,MAAAS,QAAczB,iBAAoBwB,EAIjC;CAAC,IAAAE;CAAA,IAAAV,EAAA,QAAAS,SAAAT,EAAA,QAAAM,WAAA;EACYI,KAAAxB,eAAeuB,OAAOH,SAAS;EAACN,EAAA,MAAAS;EAAAT,EAAA,MAAAM;EAAAN,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAA9C,MAAAW,QAAcD;CAGX,MAAAE,KAAA7B;CACa,MAAA8B,KAAAX,cAAcG,KAAAA,IAAdM,QAAA,GAAqCT,UAAS,IAAKS;CAE1D,MAAAG,KAAA;CACE,MAAAC,KAAAzB,cAAyBiB,IAAGS,MAAOpB,KAAK;CAAC,IAAAqB;CAAA,IAAAjB,EAAA,QAAAG,MAAAe,kBAAAlB,EAAA,QAAAL,sBAAAK,EAAA,QAAAS,SAAAT,EAAA,QAAAM,WAAA;EAGhDW,KAAA,oBAAC,eAAD;GACkB,gBAAAd,MAAKe;GACbZ,QAAAA;GACYX;GACbc;EAAK,CAAA;EACZT,EAAA,MAAAG,MAAAe;EAAAlB,EAAA,MAAAL;EAAAK,EAAA,MAAAS;EAAAT,EAAA,MAAAM;EAAAN,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAY,MAAAZ,EAAA,QAAAN,OAAAM,EAAA,QAAAa,MAAAb,EAAA,QAAAe,MAAAf,EAAA,QAAAiB,MAAAjB,EAAA,QAAAH,QAAA;EAZJsB,KAAA,oBAAC,IAAD;GACc,cAAAN;GACPnB;GACA,MAAAoB;GACE,OAAAC;GACClB;GAERoB,UAAAA;EAPG,CAAA;EAaEjB,EAAA,MAAAY;EAAAZ,EAAA,MAAAN;EAAAM,EAAA,MAAAa;EAAAb,EAAA,MAAAe;EAAAf,EAAA,MAAAiB;EAAAjB,EAAA,MAAAH;EAAAG,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAbPmB;AAaO"}

package/dist/components/checkbox/index.d.ts

@@ -49,6 +49,12 @@ type CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {
   readonly onChange?: (isSelected: boolean) => void;
   readonly ref?: Ref<ComponentRef<typeof View>>;
   readonly style?: StyleProp<ViewStyle>;
+  /**
+   * The entry this checkbox stands for inside a `CheckboxGroup`, which the
+   * group's value holds while it is selected. Required there, and unused
+   * outside one.
+   */
+  readonly value?: string;
 };
 /**
  * A checkbox with its label, and optionally a description or an error under
@@ -70,7 +76,7 @@ type CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {
  * holding the row and the line under it, which is the element a layout
  * positions.
  */
-declare function Checkbox({ 'aria-label': ariaLabel, children, defaultSelected, description, error, isDisabled, isIndeterminate, isReadOnly, isSelected, onChange, style, ...props }: CheckboxProps): import("react").JSX.Element;
+declare function Checkbox({ 'aria-label': ariaLabel, children, defaultSelected, description, error, isDisabled: ownDisabled, isIndeterminate, isReadOnly: ownReadOnly, isSelected, onChange, style, value, ...props }: CheckboxProps): import("react").JSX.Element;
 //#endregion
 export { Checkbox, type CheckboxProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.js

@@ -4,9 +4,10 @@ import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { controlStylesOf } from "../../control/styles.js";
 import { ControlLabel, ControlMessage, describedBy, messageOf } from "../../control/index.js";
 import { CheckboxBox } from "../../control/checkbox-box.js";
+import { CheckboxGroupContext } from "../../control/group.js";
 import { c } from "react/compiler-runtime";
 import { Pressable, View } from "react-native";
-import { useId } from "react";
+import { use, useEffect, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useToggleState } from "react-stately/useToggleState";
 //#region src/components/checkbox/index.tsx
@@ -45,7 +46,7 @@ const LAYERS = {
 * positions.
 */
 function Checkbox(t0) {
-	const $ = c(69);
+	const $ = c(76);
 	let ariaLabel;
 	let children;
 	let defaultSelected;
@@ -58,8 +59,9 @@ function Checkbox(t0) {
 	let t1;
 	let t2;
 	let t3;
+	let value;
 	if ($[0] !== t0) {
-		({"aria-label": ariaLabel, children, defaultSelected, description, error, isDisabled: t1, isIndeterminate: t2, isReadOnly: t3, isSelected, onChange, style, ...props} = t0);
+		({"aria-label": ariaLabel, children, defaultSelected, description, error, isDisabled: t1, isIndeterminate: t2, isReadOnly: t3, isSelected, onChange, style, value, ...props} = t0);
 		$[0] = t0;
 		$[1] = ariaLabel;
 		$[2] = children;
@@ -73,6 +75,7 @@ function Checkbox(t0) {
 		$[10] = t1;
 		$[11] = t2;
 		$[12] = t3;
+		$[13] = value;
 	} else {
 		ariaLabel = $[1];
 		children = $[2];
@@ -86,95 +89,126 @@ function Checkbox(t0) {
 		t1 = $[10];
 		t2 = $[11];
 		t3 = $[12];
+		value = $[13];
 	}
-	const isDisabled = t1 === void 0 ? false : t1;
+	const ownDisabled = t1 === void 0 ? false : t1;
 	const isIndeterminate = t2 === void 0 ? false : t2;
-	const isReadOnly = t3 === void 0 ? false : t3;
+	const ownReadOnly = t3 === void 0 ? false : t3;
 	const theme = useTheme();
+	const group = use(CheckboxGroupContext);
+	const messageId = useId();
+	const control = useRef(null);
+	const members = group?.members;
+	if (group !== null && value === void 0) throw new Error("A Checkbox inside a CheckboxGroup names the entry it stands for with `value`.");
+	const isDisabled = ownDisabled || (group?.isDisabled ?? false);
+	const isReadOnly = ownReadOnly || (group?.isReadOnly ?? false);
 	let t4;
-	if ($[13] !== defaultSelected || $[14] !== isReadOnly || $[15] !== isSelected || $[16] !== onChange) {
-		t4 = {
+	if ($[14] !== defaultSelected || $[15] !== group || $[16] !== isReadOnly || $[17] !== isSelected || $[18] !== onChange || $[19] !== value) {
+		t4 = group === null || value === void 0 ? {
 			defaultSelected,
 			isReadOnly,
 			isSelected,
 			onChange
-		};
-		$[13] = defaultSelected;
-		$[14] = isReadOnly;
-		$[15] = isSelected;
-		$[16] = onChange;
-		$[17] = t4;
-	} else t4 = $[17];
+		} : memberOf(group, value, {
+			isReadOnly,
+			onChange
+		});
+		$[14] = defaultSelected;
+		$[15] = group;
+		$[16] = isReadOnly;
+		$[17] = isSelected;
+		$[18] = onChange;
+		$[19] = value;
+		$[20] = t4;
+	} else t4 = $[20];
 	const state = useToggleState(t4);
-	const messageId = useId();
+	let t5;
+	let t6;
+	if ($[21] !== members || $[22] !== messageId) {
+		t5 = () => {
+			members?.add(messageId, control);
+			return () => {
+				members?.remove(messageId);
+			};
+		};
+		t6 = [members, messageId];
+		$[21] = members;
+		$[22] = messageId;
+		$[23] = t5;
+		$[24] = t6;
+	} else {
+		t5 = $[23];
+		t6 = $[24];
+	}
+	useEffect(t5, t6);
 	const { colors, radii } = theme;
 	const marked = state.isSelected || isIndeterminate;
 	const interactive = !isDisabled && !isReadOnly;
-	const tone = error === void 0 ? marked ? "marked" : "unmarked" : "error";
-	const t5 = colors[LAYERS[tone].hover];
-	let t6;
-	if ($[18] !== radii.circle) {
-		t6 = { borderRadius: radii.circle };
-		$[18] = radii.circle;
-		$[19] = t6;
-	} else t6 = $[19];
-	const t7 = !interactive;
-	const t8 = colors[LAYERS[tone].pressed];
-	let t9;
-	if ($[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t8) {
-		t9 = {
-			color: t5,
-			corners: t6,
-			disabled: t7,
+	const tone = error !== void 0 || (group?.isInvalid ?? false) ? "error" : marked ? "marked" : "unmarked";
+	const t7 = colors[LAYERS[tone].hover];
+	let t8;
+	if ($[25] !== radii.circle) {
+		t8 = { borderRadius: radii.circle };
+		$[25] = radii.circle;
+		$[26] = t8;
+	} else t8 = $[26];
+	const t9 = !interactive;
+	const t10 = colors[LAYERS[tone].pressed];
+	let t11;
+	if ($[27] !== t10 || $[28] !== t7 || $[29] !== t8 || $[30] !== t9) {
+		t11 = {
+			color: t7,
+			corners: t8,
+			disabled: t9,
 			disc: 40,
-			pressedColor: t8
+			pressedColor: t10
 		};
-		$[20] = t5;
-		$[21] = t6;
-		$[22] = t7;
-		$[23] = t8;
-		$[24] = t9;
-	} else t9 = $[24];
-	const feedback = usePressFeedback(t9);
+		$[27] = t10;
+		$[28] = t7;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t11;
+	} else t11 = $[31];
+	const feedback = usePressFeedback(t11);
 	const active = feedback.hovered || feedback.pressed || feedback.ring !== void 0;
-	const t10 = isIndeterminate ? "mixed" : state.isSelected;
-	let t11;
-	if ($[25] !== description || $[26] !== error || $[27] !== messageId) {
-		t11 = describedBy(messageId, messageOf(description, error));
-		$[25] = description;
-		$[26] = error;
-		$[27] = messageId;
-		$[28] = t11;
-	} else t11 = $[28];
-	const t12 = feedback.handlers;
+	const t12 = isIndeterminate ? "mixed" : state.isSelected;
 	let t13;
-	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = hitSlop(40, 40);
-		$[29] = t13;
-	} else t13 = $[29];
-	let t14;
-	if ($[30] !== state) {
-		t14 = toggleOf(state);
-		$[30] = state;
-		$[31] = t14;
-	} else t14 = $[31];
+	if ($[32] !== description || $[33] !== error || $[34] !== messageId) {
+		t13 = describedBy(messageId, messageOf(description, error));
+		$[32] = description;
+		$[33] = error;
+		$[34] = messageId;
+		$[35] = t13;
+	} else t13 = $[35];
+	const t14 = feedback.handlers;
 	let t15;
-	if ($[32] !== theme) {
-		t15 = controlStylesOf(theme);
-		$[32] = theme;
-		$[33] = t15;
-	} else t15 = $[33];
-	const t16 = t15.row;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = hitSlop(40, 40);
+		$[36] = t15;
+	} else t15 = $[36];
+	let t16;
+	if ($[37] !== state) {
+		t16 = toggleOf(state);
+		$[37] = state;
+		$[38] = t16;
+	} else t16 = $[38];
 	let t17;
-	if ($[34] !== feedback.ring || $[35] !== theme) {
-		t17 = composeStyles(controlStylesOf(theme).disc, feedback.ring);
-		$[34] = feedback.ring;
-		$[35] = theme;
-		$[36] = t17;
-	} else t17 = $[36];
-	let t18;
-	if ($[37] !== active || $[38] !== isDisabled || $[39] !== isIndeterminate || $[40] !== state.isSelected || $[41] !== tone) {
-		t18 = /* @__PURE__ */ jsx(CheckboxBox, {
+	if ($[39] !== theme) {
+		t17 = controlStylesOf(theme);
+		$[39] = theme;
+		$[40] = t17;
+	} else t17 = $[40];
+	const t18 = t17.row;
+	let t19;
+	if ($[41] !== feedback.ring || $[42] !== theme) {
+		t19 = composeStyles(controlStylesOf(theme).disc, feedback.ring);
+		$[41] = feedback.ring;
+		$[42] = theme;
+		$[43] = t19;
+	} else t19 = $[43];
+	let t20;
+	if ($[44] !== active || $[45] !== isDisabled || $[46] !== isIndeterminate || $[47] !== state.isSelected || $[48] !== tone) {
+		t20 = /* @__PURE__ */ jsx(CheckboxBox, {
 			active,
 			isDisabled,
 			isIndeterminate,
@@ -182,85 +216,96 @@ function Checkbox(t0) {
 			tone,
 			within: 40
 		});
-		$[37] = active;
-		$[38] = isDisabled;
-		$[39] = isIndeterminate;
-		$[40] = state.isSelected;
-		$[41] = tone;
-		$[42] = t18;
-	} else t18 = $[42];
-	let t19;
-	if ($[43] !== feedback.layer || $[44] !== t17 || $[45] !== t18) {
-		t19 = /* @__PURE__ */ jsxs(View, {
-			style: t17,
-			children: [feedback.layer, t18]
+		$[44] = active;
+		$[45] = isDisabled;
+		$[46] = isIndeterminate;
+		$[47] = state.isSelected;
+		$[48] = tone;
+		$[49] = t20;
+	} else t20 = $[49];
+	let t21;
+	if ($[50] !== feedback.layer || $[51] !== t19 || $[52] !== t20) {
+		t21 = /* @__PURE__ */ jsxs(View, {
+			style: t19,
+			children: [feedback.layer, t20]
 		});
-		$[43] = feedback.layer;
-		$[44] = t17;
-		$[45] = t18;
-		$[46] = t19;
-	} else t19 = $[46];
-	let t20;
-	if ($[47] !== children || $[48] !== isDisabled) {
-		t20 = /* @__PURE__ */ jsx(ControlLabel, {
+		$[50] = feedback.layer;
+		$[51] = t19;
+		$[52] = t20;
+		$[53] = t21;
+	} else t21 = $[53];
+	let t22;
+	if ($[54] !== children || $[55] !== isDisabled) {
+		t22 = /* @__PURE__ */ jsx(ControlLabel, {
 			isDisabled,
 			children
 		});
-		$[47] = children;
-		$[48] = isDisabled;
-		$[49] = t20;
-	} else t20 = $[49];
-	let t21;
-	if ($[50] !== ariaLabel || $[51] !== feedback.handlers || $[52] !== isDisabled || $[53] !== t10 || $[54] !== t11 || $[55] !== t14 || $[56] !== t15.row || $[57] !== t19 || $[58] !== t20) {
-		t21 = /* @__PURE__ */ jsxs(Pressable, {
-			"aria-checked": t10,
+		$[54] = children;
+		$[55] = isDisabled;
+		$[56] = t22;
+	} else t22 = $[56];
+	let t23;
+	if ($[57] !== ariaLabel || $[58] !== feedback.handlers || $[59] !== isDisabled || $[60] !== t12 || $[61] !== t13 || $[62] !== t16 || $[63] !== t17.row || $[64] !== t21 || $[65] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Pressable, {
+			"aria-checked": t12,
 			"aria-label": ariaLabel,
 			role: "checkbox",
-			...t11,
-			...t12,
+			...t13,
+			...t14,
 			disabled: isDisabled,
-			hitSlop: t13,
-			onPress: t14,
-			style: t16,
-			children: [t19, t20]
+			hitSlop: t15,
+			onPress: t16,
+			ref: control,
+			style: t18,
+			children: [t21, t22]
 		});
-		$[50] = ariaLabel;
-		$[51] = feedback.handlers;
-		$[52] = isDisabled;
-		$[53] = t10;
-		$[54] = t11;
-		$[55] = t14;
-		$[56] = t15.row;
-		$[57] = t19;
-		$[58] = t20;
-		$[59] = t21;
-	} else t21 = $[59];
-	let t22;
-	if ($[60] !== description || $[61] !== error || $[62] !== messageId) {
-		t22 = /* @__PURE__ */ jsx(ControlMessage, {
+		$[57] = ariaLabel;
+		$[58] = feedback.handlers;
+		$[59] = isDisabled;
+		$[60] = t12;
+		$[61] = t13;
+		$[62] = t16;
+		$[63] = t17.row;
+		$[64] = t21;
+		$[65] = t22;
+		$[66] = t23;
+	} else t23 = $[66];
+	let t24;
+	if ($[67] !== description || $[68] !== error || $[69] !== messageId) {
+		t24 = /* @__PURE__ */ jsx(ControlMessage, {
 			description,
 			error,
 			id: messageId
 		});
-		$[60] = description;
-		$[61] = error;
-		$[62] = messageId;
-		$[63] = t22;
-	} else t22 = $[63];
-	let t23;
-	if ($[64] !== props || $[65] !== style || $[66] !== t21 || $[67] !== t22) {
-		t23 = /* @__PURE__ */ jsxs(View, {
+		$[67] = description;
+		$[68] = error;
+		$[69] = messageId;
+		$[70] = t24;
+	} else t24 = $[70];
+	let t25;
+	if ($[71] !== props || $[72] !== style || $[73] !== t23 || $[74] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(View, {
 			...props,
 			style,
-			children: [t21, t22]
+			children: [t23, t24]
 		});
-		$[64] = props;
-		$[65] = style;
-		$[66] = t21;
-		$[67] = t22;
-		$[68] = t23;
-	} else t23 = $[68];
-	return t23;
+		$[71] = props;
+		$[72] = style;
+		$[73] = t23;
+		$[74] = t24;
+		$[75] = t25;
+	} else t25 = $[75];
+	return t25;
+}
+function memberOf(group, value, { isReadOnly, onChange }) {
+	return {
+		isReadOnly,
+		isSelected: group.isSelected(value),
+		onChange: (isSelected) => {
+			group.set(value, isSelected);
+			onChange?.(isSelected);
+		}
+	};
 }
 function toggleOf(state) {
 	return () => {