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

package/dist/components/calendar/index.js

@@ -1,8 +1,6 @@
-import { useTheme } from "../../theme/scope.js";
 import { composeStyles } from "../../theme/styles.js";
 import { useLocaleOf } from "../../i18n/provider.js";
-import { stylesOf } from "../../calendar/styles.js";
-import { CalendarFrame, visibleMonthOf } from "../../calendar/index.js";
+import { CalendarFrame, useRootStyle, visibleRangeOf } from "../../calendar/index.js";
 import { c } from "react/compiler-runtime";
 import { View } from "react-native";
 import { jsx } from "react/jsx-runtime";
@@ -27,7 +25,7 @@ import { useCalendarState } from "react-stately/useCalendarState";
 * `style`, `ref` and `testID` land on the container.
 */
 function Calendar(t0) {
-	const $ = c(26);
+	const $ = c(33);
 	let ariaLabel;
 	let locale;
 	let props;
@@ -35,8 +33,9 @@ function Calendar(t0) {
 	let style;
 	let t1;
 	let testID;
+	let visibleDuration;
 	if ($[0] !== t0) {
-		({"aria-label": ariaLabel, locale, ref, showMonthYearMenus: t1, style, testID, ...props} = t0);
+		({"aria-label": ariaLabel, locale, ref, showMonthYearMenus: t1, style, testID, visibleDuration, ...props} = t0);
 		$[0] = t0;
 		$[1] = ariaLabel;
 		$[2] = locale;
@@ -45,6 +44,7 @@ function Calendar(t0) {
 		$[5] = style;
 		$[6] = t1;
 		$[7] = testID;
+		$[8] = visibleDuration;
 	} else {
 		ariaLabel = $[1];
 		locale = $[2];
@@ -53,66 +53,81 @@ function Calendar(t0) {
 		style = $[5];
 		t1 = $[6];
 		testID = $[7];
+		visibleDuration = $[8];
 	}
 	const showMonthYearMenus = t1 === void 0 ? false : t1;
 	const writtenIn = useLocaleOf(locale);
-	const own = stylesOf(useTheme());
+	const months = Math.max(1, visibleDuration?.months ?? 1);
+	const rootStyle = useRootStyle(months);
 	let t2;
-	if ($[8] !== props || $[9] !== writtenIn) {
-		t2 = {
-			...props,
-			createCalendar,
-			locale: writtenIn
-		};
-		$[8] = props;
-		$[9] = writtenIn;
+	if ($[9] !== months) {
+		t2 = { months };
+		$[9] = months;
 		$[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 t4 = ariaLabel === void 0 ? month : `${ariaLabel}, ${month}`;
-	const t5 = "group";
-	const t6 = composeStyles(own.root, style);
+	if ($[11] !== props || $[12] !== t2 || $[13] !== writtenIn) {
+		t3 = {
+			...props,
+			createCalendar,
+			locale: writtenIn,
+			visibleDuration: t2
+		};
+		$[11] = props;
+		$[12] = t2;
+		$[13] = writtenIn;
+		$[14] = t3;
+	} else t3 = $[14];
+	const state = useCalendarState(t3);
+	let t4;
+	if ($[15] !== state || $[16] !== writtenIn) {
+		t4 = visibleRangeOf(state, writtenIn, true);
+		$[15] = state;
+		$[16] = writtenIn;
+		$[17] = t4;
+	} else t4 = $[17];
+	const month = t4;
+	const t5 = ariaLabel === void 0 ? month : `${ariaLabel}, ${month}`;
+	let t6;
+	if ($[18] !== rootStyle || $[19] !== style) {
+		t6 = composeStyles(rootStyle, style);
+		$[18] = rootStyle;
+		$[19] = style;
+		$[20] = t6;
+	} else t6 = $[20];
 	let t7;
-	if ($[14] !== props.firstDayOfWeek || $[15] !== showMonthYearMenus || $[16] !== state || $[17] !== writtenIn) {
+	if ($[21] !== months || $[22] !== props.firstDayOfWeek || $[23] !== showMonthYearMenus || $[24] !== state || $[25] !== writtenIn) {
 		t7 = /* @__PURE__ */ jsx(CalendarFrame, {
 			firstDayOfWeek: props.firstDayOfWeek,
 			locale: writtenIn,
+			months,
 			showMonthYearMenus,
 			state
 		});
-		$[14] = props.firstDayOfWeek;
-		$[15] = showMonthYearMenus;
-		$[16] = state;
-		$[17] = writtenIn;
-		$[18] = t7;
-	} else t7 = $[18];
+		$[21] = months;
+		$[22] = props.firstDayOfWeek;
+		$[23] = showMonthYearMenus;
+		$[24] = state;
+		$[25] = writtenIn;
+		$[26] = t7;
+	} else t7 = $[26];
 	let t8;
-	if ($[19] !== T0 || $[20] !== ref || $[21] !== t4 || $[22] !== t6 || $[23] !== t7 || $[24] !== testID) {
-		t8 = /* @__PURE__ */ jsx(T0, {
-			"aria-label": t4,
+	if ($[27] !== ref || $[28] !== t5 || $[29] !== t6 || $[30] !== t7 || $[31] !== testID) {
+		t8 = /* @__PURE__ */ jsx(View, {
+			"aria-label": t5,
 			ref,
-			role: t5,
+			role: "group",
 			style: t6,
 			testID,
 			children: t7
 		});
-		$[19] = T0;
-		$[20] = ref;
-		$[21] = t4;
-		$[22] = t6;
-		$[23] = t7;
-		$[24] = testID;
-		$[25] = t8;
-	} else t8 = $[25];
+		$[27] = ref;
+		$[28] = t5;
+		$[29] = t6;
+		$[30] = t7;
+		$[31] = testID;
+		$[32] = t8;
+	} else t8 = $[32];
 	return t8;
 }
 //#endregion

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","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"}
+{"version":3,"file":"index.js","names":["DateDuration","ComponentRef","Ref","StyleProp","ViewStyle","DateValue","CalendarProps","StatelyCalendarProps","createCalendar","View","useCalendarState","CalendarFrame","useRootStyle","visibleRangeOf","useLocaleOf","composeStyles","Pick","T","locale","ref","showMonthYearMenus","style","testID","visibleDuration","Calendar","t0","$","_c","ariaLabel","props","t1","undefined","writtenIn","months","Math","max","rootStyle","t2","t3","state","t4","month","t5","t6","t7","firstDayOfWeek","t8","_c"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { DateDuration } from '@internationalized/date'\nimport 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, useRootStyle, visibleRangeOf } from '../../calendar'\nimport { useLocaleOf } from '../../i18n/provider'\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// **`visibleDuration` shows more than one month**, each in a grid of its own,\n// side by side from the expanded window size up and one under another below\n// it, as web's sit, since two side by side come to 720dp with the padding.\n// The container widens to hold them. Only its `months` is read, as web draws\n// whole months alone, and with more than one the header is the plain one\n// whatever `showMonthYearMenus` says, since the menus name the first month\n// alone.\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, or the months, is added to it, as\n   * React Aria adds 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   * How many months the calendar shows at once, and moves by: side by side\n   * from the expanded window size up, one under another below it. Only\n   * `months` is read.\n   * @default { months: 1 }\n   */\n  readonly visibleDuration?: DateDuration\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  visibleDuration,\n  ...props\n}: CalendarProps<T>) {\n  const writtenIn = useLocaleOf(locale)\n  const months = Math.max(1, visibleDuration?.months ?? 1)\n  const rootStyle = useRootStyle(months)\n  const state = useCalendarState<T>({\n    ...props,\n    createCalendar,\n    locale: writtenIn,\n    visibleDuration: { months },\n  })\n  const month = visibleRangeOf(state, writtenIn, true)\n\n  return (\n    <View\n      aria-label={ariaLabel === undefined ? month : `${ariaLabel}, ${month}`}\n      ref={ref}\n      role=\"group\"\n      style={composeStyles<ViewStyle>(rootStyle, style)}\n      testID={testID}\n    >\n      <CalendarFrame\n        firstDayOfWeek={props.firstDayOfWeek}\n        locale={writtenIn}\n        months={months}\n        showMonthYearMenus={showMonthYearMenus}\n        state={state}\n      />\n    </View>\n  )\n}\n\nexport type { CalendarProps }\n\nexport { Calendar }\n"],"mappings":"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"}

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

@@ -0,0 +1,72 @@
+import { CarouselLayout } from "../../carousel/arrangement.js";
+import { View, ViewProps } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/carousel/index.d.ts
+type CarouselItemProps = Omit<ViewProps, 'children'> & {
+  /** What the item shows: usually an image, which the item masks. */
+  readonly children?: ReactNode;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+};
+type CarouselProps = Omit<ViewProps, 'children'> & {
+  /** The items: `Carousel.Item` for each. */
+  readonly children?: ReactNode;
+  /**
+   * The large item's preferred width, in dp. Multi-browse lays out as many
+   * as fit and narrows them where they do not; uncontained draws every item
+   * at it; hero takes its large item's width from the carousel's.
+   * @default 240
+   */
+  readonly itemSize?: number;
+  /**
+   * What the carousel shows, for a screen reader. Required rather than
+   * optional: a carousel is a region, and a region with no name is one a
+   * screen reader cannot introduce.
+   */
+  readonly label: string;
+  /**
+   * Which of the page's layouts the carousel draws.
+   * @default 'multi-browse'
+   */
+  readonly layout?: CarouselLayout;
+  /**
+   * What the next button is called. Left out, the library names it in the
+   * reader's locale — "Next slide" in English.
+   */
+  readonly nextLabel?: string;
+  /**
+   * What the previous button is called. Left out, the library names it in
+   * the reader's locale — "Previous slide" in English.
+   */
+  readonly previousLabel?: string;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+};
+/**
+ * A row of items that scrolls on and off the screen, in the carousel page's
+ * multi-browse, hero or uncontained layout. Name it with `label`, and give it
+ * a `Carousel.Item` for each item.
+ *
+ * ```tsx
+ * <Carousel label="Label">
+ *   <Carousel.Item><Image alt="First item" source={first} /></Carousel.Item>
+ *   <Carousel.Item><Image alt="Second item" source={second} /></Carousel.Item>
+ * </Carousel>
+ * ```
+ *
+ * `style`, `ref` and `testID` land on the carousel as a whole, which is the
+ * view a layout positions, and a `style` there applies over its own.
+ */
+declare function Carousel({ children, itemSize, label, layout, nextLabel, previousLabel, style, ...props }: CarouselProps): import("react").JSX.Element;
+declare namespace Carousel {
+  var Item: typeof CarouselItem;
+}
+/**
+ * One item. It is named by which of how many it is — "2 of 6" — unless it is
+ * given an `aria-label` of its own.
+ *
+ * `style`, `ref` and `testID` land on the item, the view with the corner that
+ * cuts what it holds to the width it is drawn at.
+ */
+declare function CarouselItem({ children, style, ...props }: CarouselItemProps): import("react").JSX.Element;
+//#endregion
+export { Carousel, CarouselItem, type CarouselItemProps, type CarouselLayout, type CarouselProps };
+//# sourceMappingURL=index.d.ts.map