@kanso-labs/react-native-kanso-ui 0.11.23 → 0.11.25

package/dist/calendar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["StyleSheet","ResolvedTheme","withOpacity","themedStyles","WEEKS_HELD","SLIDE_DISTANCE","rootWidthOf","sizing","spacing","Pick","across","controlMd","xl","md","styles","create","column","alignItems","flexBasis","flexGrow","justifyContent","previousGlyph","transform","scaleX","previousGlyphRightToLeft","row","flexDirection","stylesOf","colors","radii","stateLayerOpacity","date","controlSm","disabled","onSurface","disabledContent","arrowExpanded","rotate","chevron","marginHorizontal","xs","chevronRoom","height","width","borderRadius","circle","marginVertical","dateInRange","backgroundColor","secondaryContainer","dateRangeEnd","borderBottomEndRadius","borderTopEndRadius","dateRangeStart","borderBottomStartRadius","borderTopStartRadius","dateSelected","primary","dateText","color","textAlign","dateTextDisabled","dateTextInRange","onSecondaryContainer","dateTextSelected","onPrimary","dateTextToday","dateTextUnavailable","textDecorationLine","dateToday","borderColor","borderWidth","grid","header","gap","sm","minHeight","headerGroup","heading","onSurfaceVariant","flexShrink","list","borderTopColor","outlineVariant","borderTopWidth","listCheck","listRow","lg","paddingHorizontal","listRowSelected","surfaceVariant","listText","listTextDisabled","menuButton","pill","menuButtonText","months","monthSideBySide","monthsSideBySide","root","surfaceContainerHigh","maxWidth","padding","rowHeight","weekday"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { withOpacity } from '../theme/color'\nimport { themedStyles } from '../theme/styles'\n\n// The values are the date pickers page's docked calendar, as kanso-ui's\n// src/calendar/styles.ts draws it, and named in\n// src/components/calendar/index.tsx along with the departures from it.\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. Holding six draws every month in the box the\n// longest one fills, so the calendar keeps its height as the month moves.\nconst WEEKS_HELD = 6\n\n// How far a month slides in from the side it comes from as it arrives,\n// Material Design's shared axis distance.\nconst SLIDE_DISTANCE = 30\n\n/**\n * The container's width for the months it holds side by side: the page's\n * 360dp for one, which is seven 48dp columns inside its padding, and for more\n * each month's seven columns with the room between them.\n */\nfunction rootWidthOf(\n  { sizing, spacing }: Pick<ResolvedTheme, 'sizing' | 'spacing'>,\n  across: number,\n) {\n  return (\n    sizing.controlMd * 7 * across + spacing.xl * (across - 1) + spacing.md * 2\n  )\n}\n\nconst styles = StyleSheet.create({\n  // A column of the grid: a seventh of its width, the date's circle centred\n  // in it.\n  column: {\n    alignItems: 'center',\n    flexBasis: 0,\n    flexGrow: 1,\n    justifyContent: 'center',\n  },\n  // The chevron that goes back is the forward chevron turned around. It says\n  // \"back\" rather than \"to the left\", so it turns with the writing direction\n  // as the forward one does, which the glyph's own mirroring and this\n  // together give.\n  previousGlyph: {\n    transform: [{ scaleX: -1 }],\n  },\n  previousGlyphRightToLeft: {\n    transform: [{ scaleX: 1 }],\n  },\n  // A row of the grid: the weekday row, or a week.\n  row: {\n    flexDirection: 'row',\n  },\n})\n\nconst stylesOf = themedStyles(\n  ({ colors, radii, sizing, spacing, stateLayerOpacity }) => {\n    // One row of the grid, and the page's 48dp column, seven to a week.\n    const row = sizing.controlMd\n    // The date's state layer: the 40dp circle a selected date fills, inside\n    // the 48dp row and column it sits in.\n    const date = sizing.controlSm\n    const disabled = withOpacity(\n      colors.onSurface,\n      stateLayerOpacity.disabledContent,\n    )\n\n    return StyleSheet.create({\n      // The open month or year list's arrow, turned over while its list is\n      // open, which says the next press closes it.\n      arrowExpanded: {\n        transform: [{ rotate: '180deg' }],\n      },\n      // The chevrons' 48dp column: the icon button's 40dp square with 4dp\n      // either side.\n      chevron: {\n        marginHorizontal: spacing.xs,\n      },\n      // A chevron's room while a list is open, which the page draws without\n      // them: as wide as the chevron, so the month's menu button stays where\n      // it was.\n      chevronRoom: {\n        height: date,\n        marginHorizontal: spacing.xs,\n        width: date,\n      },\n      // The date itself: the page's 40dp state layer, which is the circle a\n      // selected date fills and the shape a press tints, 4dp clear of the\n      // row above and below. Across, the column centres it.\n      date: {\n        alignItems: 'center',\n        borderRadius: radii.circle,\n        height: date,\n        justifyContent: 'center',\n        marginVertical: (row - date) / 2,\n        width: date,\n      },\n      // The days of a range, in the modal date picker's range-selection\n      // tokens, since the docked token set this calendar otherwise follows\n      // stops at the selected date: the secondary container, one step down\n      // from the primary its two ends take. Square rather than round, and as\n      // wide as its column rather than the 40dp circle, so one day's band\n      // meets the next one's and a run of days reads as one shape. The two\n      // ends round their outer side back, which is what makes the band start\n      // and stop at a circle.\n      dateInRange: {\n        backgroundColor: colors.secondaryContainer,\n        borderRadius: 0,\n        width: '100%',\n      },\n      // A range's last day, round on the side the band stops at. Logical\n      // corners, so a right-to-left layout turns them to the left.\n      dateRangeEnd: {\n        borderBottomEndRadius: radii.circle,\n        borderTopEndRadius: radii.circle,\n      },\n      // A range's first day, round on the side the band starts from.\n      dateRangeStart: {\n        borderBottomStartRadius: radii.circle,\n        borderTopStartRadius: radii.circle,\n      },\n      // The date the calendar holds, or either end of a range: filled in the\n      // primary role.\n      dateSelected: {\n        backgroundColor: colors.primary,\n      },\n      // A date's number, in the type the page gives the dates.\n      dateText: {\n        color: colors.onSurface,\n        textAlign: 'center',\n      },\n      // A date outside `minValue` and `maxValue`, in a month either side of\n      // the one shown, or in a disabled calendar: the page's 38% on the\n      // content role.\n      dateTextDisabled: {\n        color: disabled,\n      },\n      // A day between a range's two ends, in the label role the band's\n      // container pairs with.\n      dateTextInRange: {\n        color: colors.onSecondaryContainer,\n      },\n      dateTextSelected: {\n        color: colors.onPrimary,\n      },\n      dateTextToday: {\n        color: colors.primary,\n      },\n      // A date ruled out one at a time by `isDateUnavailable`, struck\n      // through at full contrast, since a reader can still land on it and\n      // has to read it.\n      dateTextUnavailable: {\n        textDecorationLine: 'line-through',\n      },\n      // Today, when it is not the date held: the page's 1dp outline in the\n      // primary role.\n      dateToday: {\n        borderColor: colors.primary,\n        borderWidth: 1,\n      },\n      // The room a month's grid is held at: the weekday row and six weeks.\n      grid: {\n        height: row * (WEEKS_HELD + 1),\n      },\n      // The row the chevrons and the month sit in, at the page's 40dp\n      // button height.\n      header: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: spacing.sm,\n        justifyContent: 'space-between',\n        minHeight: date,\n      },\n      // The month's menu button between the chevrons that step it.\n      headerGroup: {\n        alignItems: 'center',\n        flexDirection: 'row',\n      },\n      // The month and year, between the two chevrons.\n      heading: {\n        color: colors.onSurfaceVariant,\n        flexShrink: 1,\n        textAlign: 'center',\n      },\n      // The open list, in the place the grid was. It takes the grid's\n      // height, so opening it moves nothing under the calendar, and scrolls\n      // inside it. The negative margin runs its rows to the container's\n      // edges, as the page draws them, under the page's outline variant\n      // divider.\n      list: {\n        borderTopColor: colors.outlineVariant,\n        borderTopWidth: 1,\n        flexGrow: 0,\n        height: row * (WEEKS_HELD + 1),\n        marginHorizontal: -spacing.md,\n      },\n      // The check before the entry the calendar shows, at the page's 24dp,\n      // and the room it takes on every other row, so every label starts at\n      // the same place.\n      listCheck: {\n        alignItems: 'center',\n        height: 24,\n        justifyContent: 'center',\n        width: 24,\n      },\n      // An open list's row: the page's 48dp, its label 16dp in from the\n      // container's edge with the check's column first.\n      listRow: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: spacing.lg,\n        height: row,\n        paddingHorizontal: spacing.lg,\n      },\n      // The month or year the calendar shows, on the page's surface variant.\n      listRowSelected: {\n        backgroundColor: colors.surfaceVariant,\n      },\n      listText: {\n        color: colors.onSurface,\n        flexShrink: 1,\n      },\n      // A month the calendar's bounds leave no day of.\n      listTextDisabled: {\n        color: disabled,\n      },\n      // The page's menu button: a 40dp pill holding the month or the year in\n      // label large, in on surface variant, with the arrow after it.\n      menuButton: {\n        alignItems: 'center',\n        borderRadius: radii.pill,\n        flexDirection: 'row',\n        flexShrink: 0,\n        gap: spacing.xs,\n        height: date,\n        paddingHorizontal: spacing.sm,\n      },\n      menuButtonText: {\n        color: colors.onSurfaceVariant,\n      },\n      // The months of a calendar showing more than one, one under another,\n      // as they sit below the expanded window size: two side by side come to\n      // 720dp with the container's padding, wider than a compact window and\n      // most of a medium one.\n      months: {\n        gap: spacing.xl,\n      },\n      // A month's grid among several, seven 48dp columns wide.\n      monthSideBySide: {\n        width: row * 7,\n      },\n      // The same months side by side, from the expanded window size up, as\n      // web's sit.\n      monthsSideBySide: {\n        flexDirection: 'row',\n        gap: spacing.xl,\n      },\n      // The page's docked container: 360dp on the high surface container, or\n      // the width of its container where that is narrower, the columns\n      // sharing what is left.\n      root: {\n        backgroundColor: colors.surfaceContainerHigh,\n        borderRadius: radii.lg,\n        gap: spacing.md,\n        maxWidth: '100%',\n        padding: spacing.md,\n        width: rootWidthOf({ sizing, spacing }, 1),\n      },\n      // A row of the grid, the page's 48dp.\n      rowHeight: {\n        height: row,\n      },\n      // The weekday row, in the full content role the page gives it.\n      weekday: {\n        color: colors.onSurface,\n        textAlign: 'center',\n      },\n    })\n  },\n)\n\nexport { rootWidthOf, SLIDE_DISTANCE, styles, stylesOf, WEEKS_HELD }\n"],"mappings":";;;;;;;;;AA0BA,SAASM,YACP,EAAEC,QAAQC,WACVE,QACA;CACA,OACEH,OAAOI,YAAY,IAAID,SAASF,QAAQI,MAAMF,SAAS,KAAKF,QAAQK,KAAK;AAE7E;AAEA,MAAMC,SAASd,WAAWe,OAAO;CAG/BC,QAAQ;EACNC,YAAY;EACZC,WAAW;EACXC,UAAU;EACVC,gBAAgB;CAClB;CAKAC,eAAe,EACbC,WAAW,CAAC,EAAEC,QAAQ,GAAG,CAAC,EAC5B;CACAC,0BAA0B,EACxBF,WAAW,CAAC,EAAEC,QAAQ,EAAE,CAAC,EAC3B;CAEAE,KAAK,EACHC,eAAe,MACjB;AACF,CAAC;AAED,MAAMC,WAAWxB,cACd,EAAEyB,QAAQC,OAAOtB,QAAQC,SAASsB,wBAAwB;CAEzD,MAAML,MAAMlB,OAAOI;CAGnB,MAAMoB,OAAOxB,OAAOyB;CACpB,MAAMC,WAAW/B,YACf0B,OAAOM,WACPJ,kBAAkBK,eACpB;CAEA,OAAOnC,WAAWe,OAAO;EAGvBqB,eAAe,EACbd,WAAW,CAAC,EAAEe,QAAQ,SAAS,CAAC,EAClC;EAGAC,SAAS,EACPC,kBAAkB/B,QAAQgC,GAC5B;EAIAC,aAAa;GACXC,QAAQX;GACRQ,kBAAkB/B,QAAQgC;GAC1BG,OAAOZ;EACT;EAIAA,MAAM;GACJd,YAAY;GACZ2B,cAAcf,MAAMgB;GACpBH,QAAQX;GACRX,gBAAgB;GAChB0B,iBAAiBrB,MAAMM,QAAQ;GAC/BY,OAAOZ;EACT;EASAgB,aAAa;GACXC,iBAAiBpB,OAAOqB;GACxBL,cAAc;GACdD,OAAO;EACT;EAGAO,cAAc;GACZC,uBAAuBtB,MAAMgB;GAC7BO,oBAAoBvB,MAAMgB;EAC5B;EAEAQ,gBAAgB;GACdC,yBAAyBzB,MAAMgB;GAC/BU,sBAAsB1B,MAAMgB;EAC9B;EAGAW,cAAc,EACZR,iBAAiBpB,OAAO6B,QAC1B;EAEAC,UAAU;GACRC,OAAO/B,OAAOM;GACd0B,WAAW;EACb;EAIAC,kBAAkB,EAChBF,OAAO1B,SACT;EAGA6B,iBAAiB,EACfH,OAAO/B,OAAOmC,qBAChB;EACAC,kBAAkB,EAChBL,OAAO/B,OAAOqC,UAChB;EACAC,eAAe,EACbP,OAAO/B,OAAO6B,QAChB;EAIAU,qBAAqB,EACnBC,oBAAoB,eACtB;EAGAC,WAAW;GACTC,aAAa1C,OAAO6B;GACpBc,aAAa;EACf;EAEAC,MAAM,EACJ9B,QAAQjB,MAAOrB,EACjB;EAGAqE,QAAQ;GACNxD,YAAY;GACZS,eAAe;GACfgD,KAAKlE,QAAQmE;GACbvD,gBAAgB;GAChBwD,WAAW7C;EACb;EAEA8C,aAAa;GACX5D,YAAY;GACZS,eAAe;EACjB;EAEAoD,SAAS;GACPnB,OAAO/B,OAAOmD;GACdC,YAAY;GACZpB,WAAW;EACb;EAMAqB,MAAM;GACJC,gBAAgBtD,OAAOuD;GACvBC,gBAAgB;GAChBjE,UAAU;GACVuB,QAAQjB,MAAOrB;GACfmC,kBAAkB,CAAC/B,QAAQK;EAC7B;EAIAwE,WAAW;GACTpE,YAAY;GACZyB,QAAQ;GACRtB,gBAAgB;GAChBuB,OAAO;EACT;EAGA2C,SAAS;GACPrE,YAAY;GACZS,eAAe;GACfgD,KAAKlE,QAAQ+E;GACb7C,QAAQjB;GACR+D,mBAAmBhF,QAAQ+E;EAC7B;EAEAE,iBAAiB,EACfzC,iBAAiBpB,OAAO8D,eAC1B;EACAC,UAAU;GACRhC,OAAO/B,OAAOM;GACd8C,YAAY;EACd;EAEAY,kBAAkB,EAChBjC,OAAO1B,SACT;EAGA4D,YAAY;GACV5E,YAAY;GACZ2B,cAAcf,MAAMiE;GACpBpE,eAAe;GACfsD,YAAY;GACZN,KAAKlE,QAAQgC;GACbE,QAAQX;GACRyD,mBAAmBhF,QAAQmE;EAC7B;EACAoB,gBAAgB,EACdpC,OAAO/B,OAAOmD,iBAChB;EAKAiB,QAAQ,EACNtB,KAAKlE,QAAQI,GACf;EAEAqF,iBAAiB,EACftD,OAAOlB,MAAM,EACf;EAGAyE,kBAAkB;GAChBxE,eAAe;GACfgD,KAAKlE,QAAQI;EACf;EAIAuF,MAAM;GACJnD,iBAAiBpB,OAAOwE;GACxBxD,cAAcf,MAAM0D;GACpBb,KAAKlE,QAAQK;GACbwF,UAAU;GACVC,SAAS9F,QAAQK;GACjB8B,OAAOrC,YAAY;IAAEC;IAAQC;GAAQ,GAAG,CAAC;EAC3C;EAEA+F,WAAW,EACT7D,QAAQjB,IACV;EAEA+E,SAAS;GACP7C,OAAO/B,OAAOM;GACd0B,WAAW;EACb;CACF,CAAC;AACH,CACF"}
+{"version":3,"file":"styles.js","names":["StyleSheet","ResolvedTheme","withOpacity","themedStyles","WEEKS_HELD","SLIDE_DISTANCE","rootWidthOf","sizing","spacing","Pick","across","controlMd","xl","md","styles","create","column","alignItems","flexBasis","flexGrow","justifyContent","previousGlyph","transform","scaleX","previousGlyphRightToLeft","row","flexDirection","stylesOf","colors","radii","stateLayerOpacity","date","controlSm","disabled","onSurface","disabledContent","arrowExpanded","rotate","chevron","marginHorizontal","xs","chevronRoom","height","width","borderRadius","circle","marginVertical","dateInRange","backgroundColor","secondaryContainer","dateRangeEnd","borderBottomEndRadius","borderTopEndRadius","dateRangeStart","borderBottomStartRadius","borderTopStartRadius","dateSelected","primary","dateText","color","textAlign","dateTextDisabled","dateTextInRange","onSecondaryContainer","dateTextSelected","onPrimary","dateTextToday","dateTextUnavailable","textDecorationLine","dateToday","borderColor","borderWidth","grid","header","gap","sm","minHeight","headerGroup","heading","onSurfaceVariant","flexShrink","list","borderTopColor","outlineVariant","borderTopWidth","listCheck","listRow","lg","paddingHorizontal","listRowSelected","surfaceVariant","listText","listTextDisabled","menuButton","pill","menuButtonText","monthCaption","paddingBottom","monthCaptionText","months","monthSideBySide","monthsSideBySide","root","surfaceContainerHigh","maxWidth","padding","rowHeight","weekday"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { withOpacity } from '../theme/color'\nimport { themedStyles } from '../theme/styles'\n\n// The values are the date pickers page's docked calendar, as kanso-ui's\n// src/calendar/styles.ts draws it, and named in\n// src/components/calendar/index.tsx along with the departures from it.\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. Holding six draws every month in the box the\n// longest one fills, so the calendar keeps its height as the month moves.\nconst WEEKS_HELD = 6\n\n// How far a month slides in from the side it comes from as it arrives,\n// Material Design's shared axis distance.\nconst SLIDE_DISTANCE = 30\n\n/**\n * The container's width for the months it holds side by side: the page's\n * 360dp for one, which is seven 48dp columns inside its padding, and for more\n * each month's seven columns with the room between them.\n */\nfunction rootWidthOf(\n  { sizing, spacing }: Pick<ResolvedTheme, 'sizing' | 'spacing'>,\n  across: number,\n) {\n  return (\n    sizing.controlMd * 7 * across + spacing.xl * (across - 1) + spacing.md * 2\n  )\n}\n\nconst styles = StyleSheet.create({\n  // A column of the grid: a seventh of its width, the date's circle centred\n  // in it.\n  column: {\n    alignItems: 'center',\n    flexBasis: 0,\n    flexGrow: 1,\n    justifyContent: 'center',\n  },\n  // The chevron that goes back is the forward chevron turned around. It says\n  // \"back\" rather than \"to the left\", so it turns with the writing direction\n  // as the forward one does, which the glyph's own mirroring and this\n  // together give.\n  previousGlyph: {\n    transform: [{ scaleX: -1 }],\n  },\n  previousGlyphRightToLeft: {\n    transform: [{ scaleX: 1 }],\n  },\n  // A row of the grid: the weekday row, or a week.\n  row: {\n    flexDirection: 'row',\n  },\n})\n\nconst stylesOf = themedStyles(\n  ({ colors, radii, sizing, spacing, stateLayerOpacity }) => {\n    // One row of the grid, and the page's 48dp column, seven to a week.\n    const row = sizing.controlMd\n    // The date's state layer: the 40dp circle a selected date fills, inside\n    // the 48dp row and column it sits in.\n    const date = sizing.controlSm\n    const disabled = withOpacity(\n      colors.onSurface,\n      stateLayerOpacity.disabledContent,\n    )\n\n    return StyleSheet.create({\n      // The open month or year list's arrow, turned over while its list is\n      // open, which says the next press closes it.\n      arrowExpanded: {\n        transform: [{ rotate: '180deg' }],\n      },\n      // The chevrons' 48dp column: the icon button's 40dp square with 4dp\n      // either side.\n      chevron: {\n        marginHorizontal: spacing.xs,\n      },\n      // A chevron's room while a list is open, which the page draws without\n      // them: as wide as the chevron, so the month's menu button stays where\n      // it was.\n      chevronRoom: {\n        height: date,\n        marginHorizontal: spacing.xs,\n        width: date,\n      },\n      // The date itself: the page's 40dp state layer, which is the circle a\n      // selected date fills and the shape a press tints, 4dp clear of the\n      // row above and below. Across, the column centres it.\n      date: {\n        alignItems: 'center',\n        borderRadius: radii.circle,\n        height: date,\n        justifyContent: 'center',\n        marginVertical: (row - date) / 2,\n        width: date,\n      },\n      // The days of a range, in the modal date picker's range-selection\n      // tokens, since the docked token set this calendar otherwise follows\n      // stops at the selected date: the secondary container, one step down\n      // from the primary its two ends take. Square rather than round, and as\n      // wide as its column rather than the 40dp circle, so one day's band\n      // meets the next one's and a run of days reads as one shape. The two\n      // ends round their outer side back, which is what makes the band start\n      // and stop at a circle.\n      dateInRange: {\n        backgroundColor: colors.secondaryContainer,\n        borderRadius: 0,\n        width: '100%',\n      },\n      // A range's last day, round on the side the band stops at. Logical\n      // corners, so a right-to-left layout turns them to the left.\n      dateRangeEnd: {\n        borderBottomEndRadius: radii.circle,\n        borderTopEndRadius: radii.circle,\n      },\n      // A range's first day, round on the side the band starts from.\n      dateRangeStart: {\n        borderBottomStartRadius: radii.circle,\n        borderTopStartRadius: radii.circle,\n      },\n      // The date the calendar holds, or either end of a range: filled in the\n      // primary role.\n      dateSelected: {\n        backgroundColor: colors.primary,\n      },\n      // A date's number, in the type the page gives the dates.\n      dateText: {\n        color: colors.onSurface,\n        textAlign: 'center',\n      },\n      // A date outside `minValue` and `maxValue`, in a month either side of\n      // the one shown, or in a disabled calendar: the page's 38% on the\n      // content role.\n      dateTextDisabled: {\n        color: disabled,\n      },\n      // A day between a range's two ends, in the label role the band's\n      // container pairs with.\n      dateTextInRange: {\n        color: colors.onSecondaryContainer,\n      },\n      dateTextSelected: {\n        color: colors.onPrimary,\n      },\n      dateTextToday: {\n        color: colors.primary,\n      },\n      // A date ruled out one at a time by `isDateUnavailable`, struck\n      // through at full contrast, since a reader can still land on it and\n      // has to read it.\n      dateTextUnavailable: {\n        textDecorationLine: 'line-through',\n      },\n      // Today, when it is not the date held: the page's 1dp outline in the\n      // primary role.\n      dateToday: {\n        borderColor: colors.primary,\n        borderWidth: 1,\n      },\n      // The room a month's grid is held at: the weekday row and six weeks,\n      // so a calendar keeps its height from month to month. Months stacked\n      // one under another take the height of their own weeks instead, so a\n      // short month leaves no gap before the next one's name.\n      grid: {\n        height: row * (WEEKS_HELD + 1),\n      },\n      // The row the chevrons and the month sit in, at the page's 40dp\n      // button height.\n      header: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: spacing.sm,\n        justifyContent: 'space-between',\n        minHeight: date,\n      },\n      // The month's menu button between the chevrons that step it.\n      headerGroup: {\n        alignItems: 'center',\n        flexDirection: 'row',\n      },\n      // The month and year, between the two chevrons.\n      heading: {\n        color: colors.onSurfaceVariant,\n        flexShrink: 1,\n        textAlign: 'center',\n      },\n      // The open list, in the place the grid was. It takes the grid's\n      // height, so opening it moves nothing under the calendar, and scrolls\n      // inside it. The negative margin runs its rows to the container's\n      // edges, as the page draws them, under the page's outline variant\n      // divider.\n      list: {\n        borderTopColor: colors.outlineVariant,\n        borderTopWidth: 1,\n        flexGrow: 0,\n        height: row * (WEEKS_HELD + 1),\n        marginHorizontal: -spacing.md,\n      },\n      // The check before the entry the calendar shows, at the page's 24dp,\n      // and the room it takes on every other row, so every label starts at\n      // the same place.\n      listCheck: {\n        alignItems: 'center',\n        height: 24,\n        justifyContent: 'center',\n        width: 24,\n      },\n      // An open list's row: the page's 48dp, its label 16dp in from the\n      // container's edge with the check's column first.\n      listRow: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: spacing.lg,\n        height: row,\n        paddingHorizontal: spacing.lg,\n      },\n      // The month or year the calendar shows, on the page's surface variant.\n      listRowSelected: {\n        backgroundColor: colors.surfaceVariant,\n      },\n      listText: {\n        color: colors.onSurface,\n        flexShrink: 1,\n      },\n      // A month the calendar's bounds leave no day of.\n      listTextDisabled: {\n        color: disabled,\n      },\n      // The page's menu button: a 40dp pill holding the month or the year in\n      // label large, in on surface variant, with the arrow after it.\n      menuButton: {\n        alignItems: 'center',\n        borderRadius: radii.pill,\n        flexDirection: 'row',\n        flexShrink: 0,\n        gap: spacing.xs,\n        height: date,\n        paddingHorizontal: spacing.sm,\n      },\n      menuButtonText: {\n        color: colors.onSurfaceVariant,\n      },\n      // The name of a month while several stack. Material Design's\n      // full-screen range picker names each month of its list the same way:\n      // title small in on surface variant, at the start of a 48dp row with\n      // its text at the row's foot, so it reads with the month below it\n      // rather than the one above, inset from the dates by the 12dp the\n      // container's padding leaves.\n      monthCaption: {\n        height: row,\n        justifyContent: 'flex-end',\n        paddingBottom: spacing.sm,\n        paddingHorizontal: spacing.md,\n      },\n      monthCaptionText: {\n        color: colors.onSurfaceVariant,\n      },\n      // The months of a calendar showing more than one, one under another,\n      // as they sit below the expanded window size: two side by side come to\n      // 720dp with the container's padding, wider than a compact window and\n      // most of a medium one.\n      months: {\n        gap: spacing.xl,\n      },\n      // A month's grid among several, seven 48dp columns wide.\n      monthSideBySide: {\n        width: row * 7,\n      },\n      // The same months side by side, from the expanded window size up, as\n      // web's sit.\n      monthsSideBySide: {\n        flexDirection: 'row',\n        gap: spacing.xl,\n      },\n      // The page's docked container: 360dp on the high surface container, or\n      // the width of its container where that is narrower, the columns\n      // sharing what is left.\n      root: {\n        backgroundColor: colors.surfaceContainerHigh,\n        borderRadius: radii.lg,\n        gap: spacing.md,\n        maxWidth: '100%',\n        padding: spacing.md,\n        width: rootWidthOf({ sizing, spacing }, 1),\n      },\n      // A row of the grid, the page's 48dp.\n      rowHeight: {\n        height: row,\n      },\n      // The weekday row, in the full content role the page gives it.\n      weekday: {\n        color: colors.onSurface,\n        textAlign: 'center',\n      },\n    })\n  },\n)\n\nexport { rootWidthOf, SLIDE_DISTANCE, styles, stylesOf, WEEKS_HELD }\n"],"mappings":"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"}

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

@@ -29,8 +29,8 @@ type CalendarProps$1<T extends DateValue = DateValue> = Pick<CalendarProps<T>, '
   readonly testID?: string;
   /**
    * How many months the calendar shows at once, and moves by: side by side
-   * from the expanded window size up, one under another below it. Only
-   * `months` is read.
+   * from the expanded window size up, one under another below it, each
+   * named over its weeks. Only `months` is read.
    * @default { months: 1 }
    */
   readonly visibleDuration?: DateDuration;

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

@@ -1 +1 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqJA,SAAAwB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAV;CAAA,IAAAW;CAAA,IAAAV;CAAA,IAAAE;CAAA,IAAAS;CAAA,IAAAR;CAAA,IAAAC;CAAA,IAAAG,EAAA,OAAAD,IAAA;EAAmD,CAAA,CAAA,cAAAG,WAAAV,QAAAC,KAAAC,oBAAAU,IAAAT,OAAAC,QAAAC,iBAAA,GAAAM,SAAAJ;EAShCC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAR;EAAAQ,EAAA,KAAAG;EAAAH,EAAA,KAAAP;EAAAO,EAAA,KAAAL;EAAAK,EAAA,KAAAI;EAAAJ,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;CAAA,OAAA;EAAAK,YAAAF,EAAA;EAAAR,SAAAQ,EAAA;EAAAG,QAAAH,EAAA;EAAAP,MAAAO,EAAA;EAAAL,QAAAK,EAAA;EAAAI,KAAAJ,EAAA;EAAAJ,SAAAI,EAAA;EAAAH,kBAAAG,EAAA;CAAA;CALjB,MAAAN,qBAAAU,OAAAC,KAAAA,IAAA,QAAAD;CAMA,MAAAE,YAAkBlB,YAAYI,MAAM;CACpC,MAAAe,SAAeC,KAAIC,IAAK,GAAGZ,iBAAeU,UAAf,CAA4B;CACvD,MAAAG,YAAkBxB,aAAaqB,MAAM;CAAC,IAAAI;CAAA,IAAAX,EAAA,OAAAO,QAAA;EAKnBI,KAAA,EAAAJ,OAAS;EAACP,EAAA,KAAAO;EAAAP,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAG,SAAAH,EAAA,QAAAW,MAAAX,EAAA,QAAAM,WAAA;EAJKM,KAAA;GAAA,GAC7BT;GAAKrB;GAAAU,QAEAc;GAAST,iBACAc;EACnB;EAACX,EAAA,MAAAG;EAAAH,EAAA,MAAAW;EAAAX,EAAA,MAAAM;EAAAN,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CALD,MAAAa,QAAc7B,iBAAoB4B,EAKjC;CAAC,IAAAE;CAAA,IAAAd,EAAA,QAAAa,SAAAb,EAAA,QAAAM,WAAA;EACYQ,KAAA3B,eAAe0B,OAAOP,WAAW,IAAI;EAACN,EAAA,MAAAa;EAAAb,EAAA,MAAAM;EAAAN,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAApD,MAAAe,QAAcD;CAIE,MAAAE,KAAAd,cAAcG,KAAAA,IAAdU,QAAA,GAAqCb,UAAS,IAAKa;CAAO,IAAAE;CAAA,IAAAjB,EAAA,QAAAU,aAAAV,EAAA,QAAAL,OAAA;EAG/DsB,KAAA5B,cAAyBqB,WAAWf,KAAK;EAACK,EAAA,MAAAU;EAAAV,EAAA,MAAAL;EAAAK,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAO,UAAAP,EAAA,QAAAG,MAAAgB,kBAAAnB,EAAA,QAAAN,sBAAAM,EAAA,QAAAa,SAAAb,EAAA,QAAAM,WAAA;EAGjDY,KAAA,oBAAC,eAAD;GACkB,gBAAAf,MAAKgB;GACbb,QAAAA;GACAC;GACYb;GACbmB;EAAK,CAAA;EACZb,EAAA,MAAAO;EAAAP,EAAA,MAAAG,MAAAgB;EAAAnB,EAAA,MAAAN;EAAAM,EAAA,MAAAa;EAAAb,EAAA,MAAAM;EAAAN,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAoB;CAAA,IAAApB,EAAA,QAAAP,OAAAO,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAJ,QAAA;EAbJwB,KAAA,oBAAC,MAAD;GACc,cAAAJ;GACPvB;GACA,MAAA;GACE,OAAAwB;GACCrB;GAERsB,UAAAA;EAPG,CAAA;EAcElB,EAAA,MAAAP;EAAAO,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAJ;EAAAI,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,OAdPoB;AAcO"}
+{"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 side by side. Stacked, each month is\n// named over its grid, since the heading names them all at once, and takes\n// the height of its own weeks, so a short month leaves no gap before the\n// next one's name; a calendar of one, and months side by side, keep six\n// weeks of room so the calendar holds its height from month to month. 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, each\n   * named over its weeks. Only `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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyJA,SAAAwB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAV;CAAA,IAAAW;CAAA,IAAAV;CAAA,IAAAE;CAAA,IAAAS;CAAA,IAAAR;CAAA,IAAAC;CAAA,IAAAG,EAAA,OAAAD,IAAA;EAAmD,CAAA,CAAA,cAAAG,WAAAV,QAAAC,KAAAC,oBAAAU,IAAAT,OAAAC,QAAAC,iBAAA,GAAAM,SAAAJ;EAShCC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAR;EAAAQ,EAAA,KAAAG;EAAAH,EAAA,KAAAP;EAAAO,EAAA,KAAAL;EAAAK,EAAA,KAAAI;EAAAJ,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;CAAA,OAAA;EAAAK,YAAAF,EAAA;EAAAR,SAAAQ,EAAA;EAAAG,QAAAH,EAAA;EAAAP,MAAAO,EAAA;EAAAL,QAAAK,EAAA;EAAAI,KAAAJ,EAAA;EAAAJ,SAAAI,EAAA;EAAAH,kBAAAG,EAAA;CAAA;CALjB,MAAAN,qBAAAU,OAAAC,KAAAA,IAAA,QAAAD;CAMA,MAAAE,YAAkBlB,YAAYI,MAAM;CACpC,MAAAe,SAAeC,KAAIC,IAAK,GAAGZ,iBAAeU,UAAf,CAA4B;CACvD,MAAAG,YAAkBxB,aAAaqB,MAAM;CAAC,IAAAI;CAAA,IAAAX,EAAA,OAAAO,QAAA;EAKnBI,KAAA,EAAAJ,OAAS;EAACP,EAAA,KAAAO;EAAAP,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAG,SAAAH,EAAA,QAAAW,MAAAX,EAAA,QAAAM,WAAA;EAJKM,KAAA;GAAA,GAC7BT;GAAKrB;GAAAU,QAEAc;GAAST,iBACAc;EACnB;EAACX,EAAA,MAAAG;EAAAH,EAAA,MAAAW;EAAAX,EAAA,MAAAM;EAAAN,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CALD,MAAAa,QAAc7B,iBAAoB4B,EAKjC;CAAC,IAAAE;CAAA,IAAAd,EAAA,QAAAa,SAAAb,EAAA,QAAAM,WAAA;EACYQ,KAAA3B,eAAe0B,OAAOP,WAAW,IAAI;EAACN,EAAA,MAAAa;EAAAb,EAAA,MAAAM;EAAAN,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAApD,MAAAe,QAAcD;CAIE,MAAAE,KAAAd,cAAcG,KAAAA,IAAdU,QAAA,GAAqCb,UAAS,IAAKa;CAAO,IAAAE;CAAA,IAAAjB,EAAA,QAAAU,aAAAV,EAAA,QAAAL,OAAA;EAG/DsB,KAAA5B,cAAyBqB,WAAWf,KAAK;EAACK,EAAA,MAAAU;EAAAV,EAAA,MAAAL;EAAAK,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAO,UAAAP,EAAA,QAAAG,MAAAgB,kBAAAnB,EAAA,QAAAN,sBAAAM,EAAA,QAAAa,SAAAb,EAAA,QAAAM,WAAA;EAGjDY,KAAA,oBAAC,eAAD;GACkB,gBAAAf,MAAKgB;GACbb,QAAAA;GACAC;GACYb;GACbmB;EAAK,CAAA;EACZb,EAAA,MAAAO;EAAAP,EAAA,MAAAG,MAAAgB;EAAAnB,EAAA,MAAAN;EAAAM,EAAA,MAAAa;EAAAb,EAAA,MAAAM;EAAAN,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAoB;CAAA,IAAApB,EAAA,QAAAP,OAAAO,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAJ,QAAA;EAbJwB,KAAA,oBAAC,MAAD;GACc,cAAAJ;GACPvB;GACA,MAAA;GACE,OAAAwB;GACCrB;GAERsB,UAAAA;EAPG,CAAA;EAcElB,EAAA,MAAAP;EAAAO,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAJ;EAAAI,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,OAdPoB;AAcO"}

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

@@ -1,11 +1,32 @@
 import { CarouselLayout } from "../../carousel/arrangement.js";
 import { View, ViewProps } from "react-native";
+import { DerivedValue } from "react-native-reanimated";
 import { ComponentRef, ReactNode, Ref } from "react";
 type CarouselItemProps = Omit<ViewProps, 'children'> & {
-  /** What the item shows: usually an image, which the item masks. */
-  readonly children?: ReactNode;
+  /**
+   * What the item shows: usually an image, which the item masks. A function
+   * is handed how much of the item shows, so text the item has no room for
+   * can be hidden as the mask closes over it.
+   */
+  readonly children?: ((state: CarouselItemRenderProps) => ReactNode) | ReactNode;
   readonly ref?: Ref<ComponentRef<typeof View>>;
 };
+/** How much of a `Carousel.Item` shows, for children written as a function. */
+type CarouselItemRenderProps = {
+  /**
+   * How much of `width` shows, in dp, following the scroll on the UI
+   * thread, where an animated style reads it. The mask takes the rest evenly
+   * from both sides, so `(width - visibleWidth) / 2` is cut off each. It is
+   * `width` for an item drawn large, and for every item of an uncontained
+   * carousel, which masks nothing.
+   */
+  readonly visibleWidth: DerivedValue<number>;
+  /**
+   * The width the item is laid out at, in dp: the large item's, which every
+   * item in the carousel shares.
+   */
+  readonly width: number;
+};
 type CarouselProps = Omit<ViewProps, 'children'> & {
   /** The items: `Carousel.Item` for each. */
   readonly children?: ReactNode;
@@ -66,5 +87,5 @@ declare namespace Carousel {
  * cuts what it holds to the width it is drawn at.
  */
 declare function CarouselItem({ children, style, ...props }: CarouselItemProps): import("react").JSX.Element;
-export { Carousel, CarouselItem, type CarouselItemProps, type CarouselLayout, type CarouselProps };
+export { Carousel, CarouselItem, type CarouselItemProps, type CarouselItemRenderProps, type CarouselLayout, type CarouselProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/carousel/index.js

@@ -7,7 +7,7 @@ import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { IconButton } from "../icon-button/index.js";
 import { c } from "react/compiler-runtime";
 import { I18nManager, Platform, StyleSheet, View, useWindowDimensions } from "react-native";
-import Animated, { Extrapolation, interpolate, useAnimatedReaction, useAnimatedScrollHandler, useAnimatedStyle, useReducedMotion, useSharedValue } from "react-native-reanimated";
+import Animated, { Extrapolation, interpolate, useAnimatedReaction, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useReducedMotion, useSharedValue } from "react-native-reanimated";
 import { Children, createContext, isValidElement, use, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { scheduleOnRN } from "react-native-worklets";
@@ -317,7 +317,7 @@ function Carousel(t0) {
 * cuts what it holds to the width it is drawn at.
 */
 function CarouselItem(t0) {
-	const $ = c(28);
+	const $ = c(32);
 	let children;
 	let props;
 	let style;
@@ -339,7 +339,9 @@ function CarouselItem(t0) {
 	const slot = use(SlotContext);
 	const count = slot?.count ?? 1;
 	const index = slot?.index ?? 0;
-	const drawn = useDrawn(slot);
+	const visibleWidth = useVisibleWidth(slot);
+	const drawn = useDrawn(slot, visibleWidth);
+	const large = slot?.large ?? 0;
 	const T0 = View;
 	let t1;
 	if ($[4] !== slot) {
@@ -372,45 +374,56 @@ function CarouselItem(t0) {
 		$[13] = t8;
 	} else t8 = $[13];
 	let t9;
-	if ($[14] !== children || $[15] !== t8) {
-		t9 = /* @__PURE__ */ jsx(View, {
-			style: t8,
-			children
-		});
+	if ($[14] !== children || $[15] !== large || $[16] !== visibleWidth) {
+		t9 = typeof children === "function" ? children({
+			visibleWidth,
+			width: large
+		}) : children;
 		$[14] = children;
-		$[15] = t8;
-		$[16] = t9;
-	} else t9 = $[16];
+		$[15] = large;
+		$[16] = visibleWidth;
+		$[17] = t9;
+	} else t9 = $[17];
 	let t10;
-	if ($[17] !== props || $[18] !== t2.View || $[19] !== t4 || $[20] !== t6 || $[21] !== t7 || $[22] !== t9) {
-		t10 = /* @__PURE__ */ jsx(t2.View, {
+	if ($[18] !== t8 || $[19] !== t9) {
+		t10 = /* @__PURE__ */ jsx(View, {
+			style: t8,
+			children: t9
+		});
+		$[18] = t8;
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== props || $[22] !== t10 || $[23] !== t2.View || $[24] !== t4 || $[25] !== t6 || $[26] !== t7) {
+		t11 = /* @__PURE__ */ jsx(t2.View, {
 			"aria-label": t4,
 			role: t5,
 			...t6,
 			...props,
 			style: t7,
-			children: t9
-		});
-		$[17] = props;
-		$[18] = t2.View;
-		$[19] = t4;
-		$[20] = t6;
-		$[21] = t7;
-		$[22] = t9;
-		$[23] = t10;
-	} else t10 = $[23];
-	let t11;
-	if ($[24] !== T0 || $[25] !== t1 || $[26] !== t10) {
-		t11 = /* @__PURE__ */ jsx(T0, {
-			style: t1,
 			children: t10
 		});
-		$[24] = T0;
-		$[25] = t1;
-		$[26] = t10;
+		$[21] = props;
+		$[22] = t10;
+		$[23] = t2.View;
+		$[24] = t4;
+		$[25] = t6;
+		$[26] = t7;
 		$[27] = t11;
 	} else t11 = $[27];
-	return t11;
+	let t12;
+	if ($[28] !== T0 || $[29] !== t1 || $[30] !== t11) {
+		t12 = /* @__PURE__ */ jsx(T0, {
+			style: t1,
+			children: t11
+		});
+		$[28] = T0;
+		$[29] = t1;
+		$[30] = t11;
+		$[31] = t12;
+	} else t12 = $[31];
+	return t12;
 }
 function describedAs(word) {
 	return Platform.OS === "web" ? { "aria-roledescription": word } : void 0;
@@ -463,7 +476,7 @@ function pathsOf(rests, count) {
 function slotWidthOf(slot) {
 	return slot === null ? void 0 : { width: slot.large };
 }
-function useDrawn(slot) {
+function useDrawn(slot, visibleWidth) {
 	const path = slot?.path;
 	const scrolled = slot?.scrolled;
 	const index = slot?.index ?? 0;
@@ -474,9 +487,8 @@ function useDrawn(slot) {
 		"worklet";
 		if (path === void 0 || scrolled === void 0) return {};
 		const offset = scrolled.get();
-		const position = offset / step;
-		const start = interpolate(position, path.rests, path.starts, Extrapolation.CLAMP);
-		const width = interpolate(position, path.rests, path.widths, Extrapolation.CLAMP);
+		const start = interpolate(offset / step, path.rests, path.starts, Extrapolation.CLAMP);
+		const width = visibleWidth.get();
 		const shift = offset + start + width / 2 - index * step - large / 2;
 		return {
 			transform: [{ translateX: rtl ? -shift : shift }],
@@ -484,6 +496,17 @@ function useDrawn(slot) {
 		};
 	});
 }
+function useVisibleWidth(slot) {
+	const path = slot?.path;
+	const scrolled = slot?.scrolled;
+	const large = slot?.large ?? 0;
+	const step = slot?.step ?? 0;
+	return useDerivedValue(() => {
+		"worklet";
+		if (path === void 0 || scrolled === void 0) return large;
+		return interpolate(scrolled.get() / step, path.rests, path.widths, Extrapolation.CLAMP);
+	});
+}
 function widthTo(onMeasure) {
 	return (event) => {
 		onMeasure(event.nativeEvent.layout.width);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","ScrollView","ViewProps","ViewStyle","AnimatedStyle","SharedValue","Children","createContext","isValidElement","use","useCallback","useRef","useState","I18nManager","Platform","StyleSheet","useWindowDimensions","View","Animated","Extrapolation","interpolate","useAnimatedReaction","useAnimatedScrollHandler","useAnimatedStyle","useReducedMotion","useSharedValue","scheduleOnRN","CarouselLayout","Placement","arrange","GAP","placements","ChevronEndGlyph","slideLabelFor","useLocaleOf","useMessages","useTheme","composeStyles","themedStyles","IconButton","DEFAULT_ITEM_SIZE","SLACK","CarouselItemProps","Omit","children","ref","CarouselProps","itemSize","label","layout","nextLabel","previousLabel","Edge","Geometry","end","masked","scrolled","step","Path","rests","starts","widths","Slot","count","index","large","path","rtl","SlotContext","styles","create","contentMasked","overflow","held","flexGrow","previousGlyph","transform","scaleX","previousGlyphRightToLeft","root","minWidth","slot","alignItems","flexShrink","stylesOf","radii","spacing","controls","columnGap","sm","flexDirection","justifyContent","paddingHorizontal","lg","item","borderRadius","xl","rowGap","row","paddingVertical","along","direction","offset","Math","round","min","max","Carousel","t0","$","_c","props","style","t1","t2","undefined","theme","own","messages","reduceMotion","dimensions","scroller","measured","setMeasured","width","padding","isRTL","items","toArray","filter","length","room","arrangement","steps","paths","pathsOf","Array","from","_","rest","t3","edgeOf","edge","setEdge","onScroll","event","set","fromStart","contentOffset","x","get","now","before","t4","geometry","current","scrollTo","animated","move","t5","previous","t6","next","slots","map","__0","T0","t7","t8","carousel","describedAs","t9","t10","t11","t12","t13","t14","t15","Symbol","for","widthTo","t16","t17","t18","offsetsOf","t19","index_0","key","t20","t21","previousSlide","t22","t23","t24","t25","nextSlide","t26","t27","t28","t29","t30","CarouselItem","locale","drawn","useDrawn","slotWidthOf","slide","word","OS","atStart","atEnd","Set","at","_placed","placed","left","position","start","CLAMP","shift","translateX","onMeasure","nativeEvent","Item","_c"],"sources":["../../../src/components/carousel/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  LayoutChangeEvent,\n  ScrollView,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle, SharedValue } from 'react-native-reanimated'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useRef,\n  useState,\n} from 'react'\nimport {\n  I18nManager,\n  Platform,\n  StyleSheet,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport Animated, {\n  Extrapolation,\n  interpolate,\n  useAnimatedReaction,\n  useAnimatedScrollHandler,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n} from 'react-native-reanimated'\nimport { scheduleOnRN } from 'react-native-worklets'\n\nimport type { CarouselLayout, Placement } from '../../carousel/arrangement'\n\nimport { arrange, GAP, placements } from '../../carousel/arrangement'\nimport { ChevronEndGlyph } from '../../glyphs'\nimport { slideLabelFor } from '../../i18n'\nimport { useLocaleOf, useMessages } from '../../i18n/provider'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { IconButton } from '../icon-button'\n\n// The carousel page's carousel, as kanso-ui's Carousel draws it: a row of\n// items that scrolls on and off the screen, in three of the page's layouts.\n// Each has the page's 16dp of padding at its ends and 8dp at its top and\n// bottom, 8dp between items and a 28dp corner on every item.\n//\n// - **Multi-browse**, the default, shows as many large items as fit at\n//   `itemSize`, then a medium one and a small one, and fills its width\n//   exactly; the large width gives way where the preferred one does not fit.\n// - **Hero** shows one large item and one small.\n// - **Uncontained** shows every item at `itemSize`, scrolling past the edge.\n//\n// **Items change size as they move**, as the page draws them. The first two\n// layouts come to rest one item apart, and between two rests every item's\n// place and width are interpolated, so an item shrinks as it leaves and\n// grows as it arrives; the last rests turn the arrangement round a slot at a\n// time, so every item is drawn large at one of them. The arithmetic is\n// `src/carousel/arrangement.ts`, web's own.\n//\n// **The scrolling is the platform's.** A horizontal scroll view holds the\n// items in a row, each in a slot as wide as a large item, and is as long as\n// the run of rests, so it comes to rest at them through `snapToOffsets`. A\n// scroll handler keeps how far it has scrolled on the UI thread, and each\n// item is drawn from that there too: moved along by as much as the view has\n// scrolled, which holds it against what shows, and then to where the\n// arrangement places it, and cut to the width it is drawn at by a view with\n// the page's corner, centred on what it holds, which is laid out at the large\n// width. What it holds is cut at both sides rather than squeezed, as the\n// page's masked items are, and as web's are by `clip-path`. Uncontained has\n// no rests and no masks, so its items scroll in the row themselves, snapping\n// to their own starts.\n//\n// **It is the ARIA carousel pattern** that web follows: a region named by\n// `label`, each item a group named by which of how many it is, and a previous\n// and a next button under it, at the end, which move to the neighbouring rest\n// and are disabled at either limit. Under React Native Web the region and its\n// items take web's role descriptions, carousel and slide; neither platform\n// has a role description to give them. On iOS and Android a screen reader\n// moves through the items itself, and nothing here scrolls when one is\n// reached, which web does on focus. Under reduced motion the buttons jump\n// rather than scroll.\n//\n// The gap between items is the arrangement's 8dp, `GAP`, rather than the\n// theme's `spacing.sm`, since every rest and every place is worked out from\n// it, and a scheme moving the one without the other would draw the items\n// over each other. The padding at the ends is the theme's `spacing.lg`, which\n// the arithmetic is handed.\n//\n// The page's large width is \"dynamic, or user-set\", and neither MDC-Android\n// nor Compose has a default for it; `itemSize`'s 240 is web's own.\n// Uncontained keeps the padding at its end as well as its start, where the\n// page gives it a leading padding alone, so its last item does not end flush\n// against the edge.\n//\n// React Native Web has no `snapToOffsets`, so in the web Storybook the\n// carousel rests wherever a drag leaves it; the buttons still move it from\n// rest to rest.\n\nconst DEFAULT_ITEM_SIZE = 240\n\n// How near a limit counts as at it, in dp, since a scroll can come to rest a\n// fraction of a pixel short.\nconst SLACK = 0.5\n\ntype CarouselItemProps = Omit<ViewProps, 'children'> & {\n  /** What the item shows: usually an image, which the item masks. */\n  readonly children?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\ntype CarouselProps = Omit<ViewProps, 'children'> & {\n  /** The items: `Carousel.Item` for each. */\n  readonly children?: ReactNode\n  /**\n   * The large item's preferred width, in dp. Multi-browse lays out as many\n   * as fit and narrows them where they do not; uncontained draws every item\n   * at it; hero takes its large item's width from the carousel's.\n   * @default 240\n   */\n  readonly itemSize?: number\n  /**\n   * What the carousel shows, for a screen reader. Required rather than\n   * optional: a carousel is a region, and a region with no name is one a\n   * screen reader cannot introduce.\n   */\n  readonly label: string\n  /**\n   * Which of the page's layouts the carousel draws.\n   * @default 'multi-browse'\n   */\n  readonly layout?: CarouselLayout\n  /**\n   * What the next button is called. Left out, the library names it in the\n   * reader's locale — \"Next slide\" in English.\n   */\n  readonly nextLabel?: string\n  /**\n   * What the previous button is called. Left out, the library names it in\n   * the reader's locale — \"Previous slide\" in English.\n   */\n  readonly previousLabel?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/** Which limits the carousel is at, as one value a reaction can compare. */\ntype Edge = 'both' | 'end' | 'none' | 'start'\n\n/** What the controls scroll by, as numbers read off one render. */\ntype Geometry = {\n  /** The offset of the last rest, or for uncontained how far it scrolls. */\n  readonly end: number\n  readonly masked: boolean\n  readonly scrolled: number\n  /** The distance between two rests, or for uncontained between two items. */\n  readonly step: number\n}\n\n/** Where a layout that masks draws an item at each of its rests. */\ntype Path = {\n  /** The rests, counted from 0, which the two below are drawn at. */\n  readonly rests: readonly number[]\n  /** Where the item starts at each rest, along the content box. */\n  readonly starts: readonly number[]\n  readonly widths: readonly number[]\n}\n\ntype Slot = {\n  readonly count: number\n  readonly index: number\n  /** The width the item is laid out at. */\n  readonly large: number\n  readonly layout: CarouselLayout\n  /** Where it is drawn, for a layout that masks. */\n  readonly path: Path | undefined\n  readonly rtl: boolean\n  /** How far the carousel has scrolled along the text, on the UI thread. */\n  readonly scrolled: SharedValue<number>\n  /** The distance between two rests. */\n  readonly step: number\n}\n\nconst SlotContext = createContext<null | Slot>(null)\n\nconst styles = StyleSheet.create({\n  // A layout that masks holds its row to the run of rests, and clips what it\n  // places past either end rather than letting it lengthen the scroll view.\n  contentMasked: {\n    overflow: 'hidden',\n  },\n  // What an item holds, laid out at the large width and centred on the mask,\n  // so the mask cuts it at both sides.\n  held: {\n    flexGrow: 1,\n  },\n  // Previous points at the start, and next at the end; the end chevron turns\n  // over with the text itself, so previous turns it back.\n  previousGlyph: {\n    transform: [{ scaleX: -1 }],\n  },\n  previousGlyphRightToLeft: {\n    transform: [{ scaleX: 1 }],\n  },\n  root: {\n    minWidth: 0,\n  },\n  // The room a large item is laid out in. The mask inside it is centred,\n  // and the row stretches every slot to the tallest item.\n  slot: {\n    alignItems: 'center',\n    flexShrink: 0,\n  },\n})\n\nconst stylesOf = themedStyles(({ radii, spacing }) =>\n  StyleSheet.create({\n    controls: {\n      columnGap: spacing.sm,\n      flexDirection: 'row',\n      justifyContent: 'flex-end',\n      paddingHorizontal: spacing.lg,\n    },\n    // The mask, which is the item: the page's corner, cutting what it holds\n    // to the width it is drawn at.\n    item: {\n      alignItems: 'center',\n      borderRadius: radii.xl,\n      flexGrow: 1,\n      overflow: 'hidden',\n    },\n    root: {\n      rowGap: spacing.sm,\n    },\n    row: {\n      columnGap: GAP,\n      flexDirection: 'row',\n      paddingHorizontal: spacing.lg,\n      paddingVertical: spacing.sm,\n    },\n  }),\n)\n\n// Where a press of previous or next scrolls to from `scrolled`: the rest\n// either side of the nearest one, or for uncontained an item's width along,\n// kept between the two ends.\nfunction along(\n  direction: -1 | 1,\n  { end, masked, scrolled, step }: Geometry,\n): number {\n  const offset = masked\n    ? (Math.round(scrolled / step) + direction) * step\n    : scrolled + direction * step\n  return Math.min(Math.max(offset, 0), end)\n}\n\n/**\n * A row of items that scrolls on and off the screen, in the carousel page's\n * multi-browse, hero or uncontained layout. Name it with `label`, and give it\n * a `Carousel.Item` for each item.\n *\n * ```tsx\n * <Carousel label=\"Label\">\n *   <Carousel.Item><Image alt=\"First item\" source={first} /></Carousel.Item>\n *   <Carousel.Item><Image alt=\"Second item\" source={second} /></Carousel.Item>\n * </Carousel>\n * ```\n *\n * `style`, `ref` and `testID` land on the carousel as a whole, which is the\n * view a layout positions, and a `style` there applies over its own.\n */\nfunction Carousel({\n  children,\n  itemSize = DEFAULT_ITEM_SIZE,\n  label,\n  layout = 'multi-browse',\n  nextLabel,\n  previousLabel,\n  style,\n  ...props\n}: CarouselProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const messages = useMessages()\n  const reduceMotion = useReducedMotion()\n  const dimensions = useWindowDimensions()\n  const scroller = useRef<ComponentRef<typeof ScrollView>>(null)\n  const scrolled = useSharedValue(0)\n  // The scroll view's width, which the layout reports once it has drawn;\n  // before that the first render guesses the window's.\n  const [measured, setMeasured] = useState<number>()\n  const width = measured ?? dimensions.width\n  const padding = theme.spacing.lg\n  const rtl = I18nManager.isRTL\n\n  const items = Children.toArray(children).filter(isValidElement)\n  const count = items.length\n  const room = Math.max(width - 2 * padding, 0)\n  const arrangement = arrange(layout, room, itemSize, count)\n  const masked = layout !== 'uncontained'\n  const step = arrangement.large + GAP\n  // The last rest, or how far the uncontained row runs past the scroll view.\n  const end = masked\n    ? arrangement.steps * step\n    : Math.max(count * step - GAP + 2 * padding - width, 0)\n  const paths = masked\n    ? pathsOf(\n        Array.from({ length: arrangement.steps + 1 }, (_, rest) =>\n          placements(layout, arrangement, room, padding, count, rest),\n        ),\n        count,\n      )\n    : []\n\n  const [edge, setEdge] = useState<Edge>(() => edgeOf(0, end))\n\n  const onScroll = useAnimatedScrollHandler({\n    onScroll: (event) => {\n      'worklet'\n      scrolled.set(fromStart(event.contentOffset.x, end, rtl))\n    },\n  })\n\n  // Which limits the carousel is at, on the JavaScript thread, for the two\n  // buttons; told only when it changes, rather than on every frame.\n  useAnimatedReaction(\n    () => {\n      'worklet'\n      return edgeOf(scrolled.get(), end)\n    },\n    (now, before) => {\n      'worklet'\n      if (now !== before) {\n        scheduleOnRN(setEdge, now)\n      }\n    },\n  )\n\n  const move = useCallback(\n    (direction: -1 | 1) => {\n      const geometry = { end, masked, scrolled: scrolled.get(), step }\n      scroller.current?.scrollTo({\n        animated: !reduceMotion,\n        x: fromStart(along(direction, geometry), end, rtl),\n      })\n    },\n    [end, masked, reduceMotion, rtl, scrolled, step],\n  )\n  const previous = useCallback(() => {\n    move(-1)\n  }, [move])\n  const next = useCallback(() => {\n    move(1)\n  }, [move])\n\n  const slots = items.map((_, index): Slot => ({\n    count,\n    index,\n    large: arrangement.large,\n    layout,\n    path: paths[index],\n    rtl,\n    scrolled,\n    step,\n  }))\n\n  return (\n    <View\n      aria-label={label}\n      role=\"region\"\n      {...describedAs(messages.carousel)}\n      {...props}\n      style={composeStyles<ViewStyle>(styles.root, own.root, style)}\n    >\n      <Animated.ScrollView\n        contentContainerStyle={composeStyles<ViewStyle>(\n          own.row,\n          masked && styles.contentMasked,\n          masked && { width: width + end },\n        )}\n        decelerationRate=\"fast\"\n        // A keyboard stop while there is anywhere to scroll, so the arrow\n        // keys move it whatever its items hold, which axe's\n        // scrollable-region-focusable asks of it under React Native Web.\n        focusable={end > 0}\n        horizontal\n        onLayout={widthTo(setMeasured)}\n        onScroll={onScroll}\n        ref={scroller}\n        scrollEventThrottle={16}\n        showsHorizontalScrollIndicator={false}\n        snapToOffsets={offsetsOf(masked, arrangement.steps, step, count, end)}\n      >\n        {items.map((item, index) => (\n          <SlotContext key={item.key ?? index} value={slots[index] ?? null}>\n            {item}\n          </SlotContext>\n        ))}\n      </Animated.ScrollView>\n      <View style={own.controls}>\n        <IconButton\n          aria-label={previousLabel ?? messages.previousSlide}\n          isDisabled={edge === 'start' || edge === 'both'}\n          onPress={previous}\n        >\n          <ChevronEndGlyph\n            style={rtl ? styles.previousGlyphRightToLeft : styles.previousGlyph}\n          />\n        </IconButton>\n        <IconButton\n          aria-label={nextLabel ?? messages.nextSlide}\n          isDisabled={edge === 'end' || edge === 'both'}\n          onPress={next}\n        >\n          <ChevronEndGlyph />\n        </IconButton>\n      </View>\n    </View>\n  )\n}\n\n/**\n * One item. It is named by which of how many it is — \"2 of 6\" — unless it is\n * given an `aria-label` of its own.\n *\n * `style`, `ref` and `testID` land on the item, the view with the corner that\n * cuts what it holds to the width it is drawn at.\n */\nfunction CarouselItem({ children, style, ...props }: CarouselItemProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const locale = useLocaleOf(undefined)\n  const messages = useMessages()\n  const slot = use(SlotContext)\n  const count = slot?.count ?? 1\n  const index = slot?.index ?? 0\n  const drawn = useDrawn(slot)\n\n  return (\n    <View style={composeStyles<ViewStyle>(styles.slot, slotWidthOf(slot))}>\n      <Animated.View\n        aria-label={slideLabelFor(index + 1, count, locale)}\n        role=\"group\"\n        {...describedAs(messages.slide)}\n        {...props}\n        style={composeStyles<AnimatedStyle<ViewStyle>>(own.item, drawn, style)}\n      >\n        <View style={composeStyles<ViewStyle>(styles.held, slotWidthOf(slot))}>\n          {children}\n        </View>\n      </Animated.View>\n    </View>\n  )\n}\n\n// What the region and its items are described as, under React Native Web,\n// where the DOM takes a role description; React Native has none to give.\nfunction describedAs(word: string) {\n  return Platform.OS === 'web' ? { 'aria-roledescription': word } : undefined\n}\n\nfunction edgeOf(scrolled: number, end: number): Edge {\n  'worklet'\n  const atStart = scrolled <= SLACK\n  const atEnd = scrolled >= end - SLACK\n  if (atStart && atEnd) {\n    return 'both'\n  }\n  if (atStart) {\n    return 'start'\n  }\n  return atEnd ? 'end' : 'none'\n}\n\n/**\n * A right-to-left scroll view's offset counted from its other edge: from the\n * start of the text where it is from the left, and from the left where it is\n * from the start, so the one function reads an offset and writes one. `end`\n * is how much longer the content is than the view.\n *\n * iOS and Android agree on what a right-to-left scroll view reports, though\n * they get there differently. iOS turns the whole scroll view over, so its\n * own offset counts from the start, and React Native counts it from the left\n * again before handing it to `onScroll`, and back before `scrollTo`\n * (`_scrollViewMetrics` and `scrollToOffset` in\n * RCTScrollViewComponentView.mm). Android's is the view's own `scrollX`,\n * which is from the left and starts at the far end, so the start shows first\n * (ReactHorizontalScrollView.kt). So on both an event's offset and the one\n * `scrollTo` takes are from the left, while `snapToOffsets` is read from the\n * start on both: Android turns its offsets round where it flings, and iOS\n * compares them with its own turned-over offset. React Native Web reports no\n * right-to-left layout through I18nManager, so there nothing is turned.\n */\nfunction fromStart(offset: number, end: number, rtl: boolean): number {\n  'worklet'\n  return rtl ? end - offset : offset\n}\n\n// Where the scroll view comes to rest: at every rest of a layout that masks,\n// or at each uncontained item's start, as far as the row goes.\nfunction offsetsOf(\n  masked: boolean,\n  steps: number,\n  step: number,\n  count: number,\n  end: number,\n): number[] | undefined {\n  if (end <= 0) {\n    return undefined\n  }\n  if (masked) {\n    return Array.from({ length: steps + 1 }, (_, rest) => rest * step)\n  }\n  const starts = Array.from({ length: count }, (_, index) =>\n    Math.min(index * step, end),\n  )\n  return [...new Set(starts)]\n}\n\n// Each item's place and width at every rest, which the UI thread\n// interpolates between as the carousel moves. A carousel with one rest is\n// given it twice, since an interpolation needs two.\nfunction pathsOf(rests: readonly Placement[][], count: number): Path[] {\n  const at = rests.length > 1 ? rests : [...rests, ...rests]\n  return Array.from({ length: count }, (_, index) => ({\n    rests: at.map((_placed, rest) => rest),\n    starts: at.map((placed) => placed[index]?.left ?? 0),\n    widths: at.map((placed) => placed[index]?.width ?? 0),\n  }))\n}\n\nfunction slotWidthOf(slot: null | Slot): undefined | ViewStyle {\n  return slot === null ? undefined : { width: slot.large }\n}\n\n// Where a layout that masks draws an item as the carousel scrolls: moved\n// along by as much as it has scrolled, which holds it against what shows,\n// then from its slot to where the arrangement places it, at the width it is\n// drawn at. Physical, since a transform is: a right-to-left row is laid out\n// from the right, so there the item moves the other way.\nfunction useDrawn(slot: null | Slot) {\n  const path = slot?.path\n  const scrolled = slot?.scrolled\n  const index = slot?.index ?? 0\n  const large = slot?.large ?? 0\n  const step = slot?.step ?? 0\n  const rtl = slot?.rtl ?? false\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    if (path === undefined || scrolled === undefined) {\n      return {}\n    }\n    const offset = scrolled.get()\n    const position = offset / step\n    const start = interpolate(\n      position,\n      path.rests,\n      path.starts,\n      Extrapolation.CLAMP,\n    )\n    const width = interpolate(\n      position,\n      path.rests,\n      path.widths,\n      Extrapolation.CLAMP,\n    )\n    const shift = offset + start + width / 2 - index * step - large / 2\n    return { transform: [{ translateX: rtl ? -shift : shift }], width }\n  })\n}\n\n// A layout handler handing the width it reports to `onMeasure`. Built by a\n// call rather than written inline, which is what react-perf's\n// jsx-no-new-function-as-prop is after; the React Compiler memoises it.\nfunction widthTo(onMeasure: (width: number) => void) {\n  return (event: LayoutChangeEvent) => {\n    onMeasure(event.nativeEvent.layout.width)\n  }\n}\n\nCarousel.Item = CarouselItem\n\nexport { Carousel, CarouselItem }\nexport type { CarouselItemProps, CarouselLayout, CarouselProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","ScrollView","ViewProps","ViewStyle","AnimatedStyle","DerivedValue","SharedValue","Children","createContext","isValidElement","use","useCallback","useRef","useState","I18nManager","Platform","StyleSheet","useWindowDimensions","View","Animated","Extrapolation","interpolate","useAnimatedReaction","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useReducedMotion","useSharedValue","scheduleOnRN","CarouselLayout","Placement","arrange","GAP","placements","ChevronEndGlyph","slideLabelFor","useLocaleOf","useMessages","useTheme","composeStyles","themedStyles","IconButton","DEFAULT_ITEM_SIZE","SLACK","CarouselItemProps","Omit","children","state","CarouselItemRenderProps","ref","visibleWidth","width","CarouselProps","itemSize","label","layout","nextLabel","previousLabel","Edge","Geometry","end","masked","scrolled","step","Path","rests","starts","widths","Slot","count","index","large","path","rtl","SlotContext","styles","create","contentMasked","overflow","held","flexGrow","previousGlyph","transform","scaleX","previousGlyphRightToLeft","root","minWidth","slot","alignItems","flexShrink","stylesOf","radii","spacing","controls","columnGap","sm","flexDirection","justifyContent","paddingHorizontal","lg","item","borderRadius","xl","rowGap","row","paddingVertical","along","direction","offset","Math","round","min","max","Carousel","t0","$","_c","props","style","t1","t2","undefined","theme","own","messages","reduceMotion","dimensions","scroller","measured","setMeasured","padding","isRTL","items","toArray","filter","length","room","arrangement","steps","paths","pathsOf","Array","from","_","rest","t3","edgeOf","edge","setEdge","onScroll","event","set","fromStart","contentOffset","x","get","now","before","t4","geometry","current","scrollTo","animated","move","t5","previous","t6","next","slots","map","__0","T0","t7","t8","carousel","describedAs","t9","t10","t11","t12","t13","t14","t15","Symbol","for","widthTo","t16","t17","t18","offsetsOf","t19","index_0","key","t20","t21","previousSlide","t22","t23","t24","t25","nextSlide","t26","t27","t28","t29","t30","CarouselItem","locale","useVisibleWidth","drawn","useDrawn","slotWidthOf","slide","word","OS","atStart","atEnd","Set","at","_placed","placed","left","start","CLAMP","shift","translateX","onMeasure","nativeEvent","Item","_c"],"sources":["../../../src/components/carousel/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  LayoutChangeEvent,\n  ScrollView,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type {\n  AnimatedStyle,\n  DerivedValue,\n  SharedValue,\n} from 'react-native-reanimated'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useRef,\n  useState,\n} from 'react'\nimport {\n  I18nManager,\n  Platform,\n  StyleSheet,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport Animated, {\n  Extrapolation,\n  interpolate,\n  useAnimatedReaction,\n  useAnimatedScrollHandler,\n  useAnimatedStyle,\n  useDerivedValue,\n  useReducedMotion,\n  useSharedValue,\n} from 'react-native-reanimated'\nimport { scheduleOnRN } from 'react-native-worklets'\n\nimport type { CarouselLayout, Placement } from '../../carousel/arrangement'\n\nimport { arrange, GAP, placements } from '../../carousel/arrangement'\nimport { ChevronEndGlyph } from '../../glyphs'\nimport { slideLabelFor } from '../../i18n'\nimport { useLocaleOf, useMessages } from '../../i18n/provider'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { IconButton } from '../icon-button'\n\n// The carousel page's carousel, as kanso-ui's Carousel draws it: a row of\n// items that scrolls on and off the screen, in three of the page's layouts.\n// Each has the page's 16dp of padding at its ends and 8dp at its top and\n// bottom, 8dp between items and a 28dp corner on every item.\n//\n// - **Multi-browse**, the default, shows as many large items as fit at\n//   `itemSize`, then a medium one and a small one, and fills its width\n//   exactly; the large width gives way where the preferred one does not fit.\n// - **Hero** shows one large item and one small.\n// - **Uncontained** shows every item at `itemSize`, scrolling past the edge.\n//\n// **Items change size as they move**, as the page draws them. The first two\n// layouts come to rest one item apart, and between two rests every item's\n// place and width are interpolated, so an item shrinks as it leaves and\n// grows as it arrives; the last rests turn the arrangement round a slot at a\n// time, so every item is drawn large at one of them. The arithmetic is\n// `src/carousel/arrangement.ts`, web's own.\n//\n// **The scrolling is the platform's.** A horizontal scroll view holds the\n// items in a row, each in a slot as wide as a large item, and is as long as\n// the run of rests, so it comes to rest at them through `snapToOffsets`. A\n// scroll handler keeps how far it has scrolled on the UI thread, and each\n// item is drawn from that there too: moved along by as much as the view has\n// scrolled, which holds it against what shows, and then to where the\n// arrangement places it, and cut to the width it is drawn at by a view with\n// the page's corner, centred on what it holds, which is laid out at the large\n// width. What it holds is cut at both sides rather than squeezed, as the\n// page's masked items are, and as web's are by `clip-path`. Uncontained has\n// no rests and no masks, so its items scroll in the row themselves, snapping\n// to their own starts.\n//\n// **What an item holds can see its mask.** The page shows an item's text\n// once the item is wide enough to hold it, and only what the item holds\n// knows where its text is, so `Carousel.Item` takes its children as a\n// function too, as web's does, handed the width the item is laid out at and\n// the width that shows of it. The second is a Reanimated value rather than\n// web's number, since the mask follows the scroll on the UI thread and a\n// number would re-render the item every frame; an animated style reads it\n// there, so text can fade or hide as the mask closes over it.\n//\n// **It is the ARIA carousel pattern** that web follows: a region named by\n// `label`, each item a group named by which of how many it is, and a previous\n// and a next button under it, at the end, which move to the neighbouring rest\n// and are disabled at either limit. Under React Native Web the region and its\n// items take web's role descriptions, carousel and slide; neither platform\n// has a role description to give them. On iOS and Android a screen reader\n// moves through the items itself, and nothing here scrolls when one is\n// reached, which web does on focus. Under reduced motion the buttons jump\n// rather than scroll.\n//\n// The gap between items is the arrangement's 8dp, `GAP`, rather than the\n// theme's `spacing.sm`, since every rest and every place is worked out from\n// it, and a scheme moving the one without the other would draw the items\n// over each other. The padding at the ends is the theme's `spacing.lg`, which\n// the arithmetic is handed.\n//\n// The page's large width is \"dynamic, or user-set\", and neither MDC-Android\n// nor Compose has a default for it; `itemSize`'s 240 is web's own.\n// Uncontained keeps the padding at its end as well as its start, where the\n// page gives it a leading padding alone, so its last item does not end flush\n// against the edge.\n//\n// React Native Web has no `snapToOffsets`, so in the web Storybook the\n// carousel rests wherever a drag leaves it; the buttons still move it from\n// rest to rest.\n\nconst DEFAULT_ITEM_SIZE = 240\n\n// How near a limit counts as at it, in dp, since a scroll can come to rest a\n// fraction of a pixel short.\nconst SLACK = 0.5\n\ntype CarouselItemProps = Omit<ViewProps, 'children'> & {\n  /**\n   * What the item shows: usually an image, which the item masks. A function\n   * is handed how much of the item shows, so text the item has no room for\n   * can be hidden as the mask closes over it.\n   */\n  readonly children?:\n    | ((state: CarouselItemRenderProps) => ReactNode)\n    | ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/** How much of a `Carousel.Item` shows, for children written as a function. */\ntype CarouselItemRenderProps = {\n  /**\n   * How much of `width` shows, in dp, following the scroll on the UI\n   * thread, where an animated style reads it. The mask takes the rest evenly\n   * from both sides, so `(width - visibleWidth) / 2` is cut off each. It is\n   * `width` for an item drawn large, and for every item of an uncontained\n   * carousel, which masks nothing.\n   */\n  readonly visibleWidth: DerivedValue<number>\n  /**\n   * The width the item is laid out at, in dp: the large item's, which every\n   * item in the carousel shares.\n   */\n  readonly width: number\n}\n\ntype CarouselProps = Omit<ViewProps, 'children'> & {\n  /** The items: `Carousel.Item` for each. */\n  readonly children?: ReactNode\n  /**\n   * The large item's preferred width, in dp. Multi-browse lays out as many\n   * as fit and narrows them where they do not; uncontained draws every item\n   * at it; hero takes its large item's width from the carousel's.\n   * @default 240\n   */\n  readonly itemSize?: number\n  /**\n   * What the carousel shows, for a screen reader. Required rather than\n   * optional: a carousel is a region, and a region with no name is one a\n   * screen reader cannot introduce.\n   */\n  readonly label: string\n  /**\n   * Which of the page's layouts the carousel draws.\n   * @default 'multi-browse'\n   */\n  readonly layout?: CarouselLayout\n  /**\n   * What the next button is called. Left out, the library names it in the\n   * reader's locale — \"Next slide\" in English.\n   */\n  readonly nextLabel?: string\n  /**\n   * What the previous button is called. Left out, the library names it in\n   * the reader's locale — \"Previous slide\" in English.\n   */\n  readonly previousLabel?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/** Which limits the carousel is at, as one value a reaction can compare. */\ntype Edge = 'both' | 'end' | 'none' | 'start'\n\n/** What the controls scroll by, as numbers read off one render. */\ntype Geometry = {\n  /** The offset of the last rest, or for uncontained how far it scrolls. */\n  readonly end: number\n  readonly masked: boolean\n  readonly scrolled: number\n  /** The distance between two rests, or for uncontained between two items. */\n  readonly step: number\n}\n\n/** Where a layout that masks draws an item at each of its rests. */\ntype Path = {\n  /** The rests, counted from 0, which the two below are drawn at. */\n  readonly rests: readonly number[]\n  /** Where the item starts at each rest, along the content box. */\n  readonly starts: readonly number[]\n  readonly widths: readonly number[]\n}\n\ntype Slot = {\n  readonly count: number\n  readonly index: number\n  /** The width the item is laid out at. */\n  readonly large: number\n  readonly layout: CarouselLayout\n  /** Where it is drawn, for a layout that masks. */\n  readonly path: Path | undefined\n  readonly rtl: boolean\n  /** How far the carousel has scrolled along the text, on the UI thread. */\n  readonly scrolled: SharedValue<number>\n  /** The distance between two rests. */\n  readonly step: number\n}\n\nconst SlotContext = createContext<null | Slot>(null)\n\nconst styles = StyleSheet.create({\n  // A layout that masks holds its row to the run of rests, and clips what it\n  // places past either end rather than letting it lengthen the scroll view.\n  contentMasked: {\n    overflow: 'hidden',\n  },\n  // What an item holds, laid out at the large width and centred on the mask,\n  // so the mask cuts it at both sides.\n  held: {\n    flexGrow: 1,\n  },\n  // Previous points at the start, and next at the end; the end chevron turns\n  // over with the text itself, so previous turns it back.\n  previousGlyph: {\n    transform: [{ scaleX: -1 }],\n  },\n  previousGlyphRightToLeft: {\n    transform: [{ scaleX: 1 }],\n  },\n  root: {\n    minWidth: 0,\n  },\n  // The room a large item is laid out in. The mask inside it is centred,\n  // and the row stretches every slot to the tallest item.\n  slot: {\n    alignItems: 'center',\n    flexShrink: 0,\n  },\n})\n\nconst stylesOf = themedStyles(({ radii, spacing }) =>\n  StyleSheet.create({\n    controls: {\n      columnGap: spacing.sm,\n      flexDirection: 'row',\n      justifyContent: 'flex-end',\n      paddingHorizontal: spacing.lg,\n    },\n    // The mask, which is the item: the page's corner, cutting what it holds\n    // to the width it is drawn at.\n    item: {\n      alignItems: 'center',\n      borderRadius: radii.xl,\n      flexGrow: 1,\n      overflow: 'hidden',\n    },\n    root: {\n      rowGap: spacing.sm,\n    },\n    row: {\n      columnGap: GAP,\n      flexDirection: 'row',\n      paddingHorizontal: spacing.lg,\n      paddingVertical: spacing.sm,\n    },\n  }),\n)\n\n// Where a press of previous or next scrolls to from `scrolled`: the rest\n// either side of the nearest one, or for uncontained an item's width along,\n// kept between the two ends.\nfunction along(\n  direction: -1 | 1,\n  { end, masked, scrolled, step }: Geometry,\n): number {\n  const offset = masked\n    ? (Math.round(scrolled / step) + direction) * step\n    : scrolled + direction * step\n  return Math.min(Math.max(offset, 0), end)\n}\n\n/**\n * A row of items that scrolls on and off the screen, in the carousel page's\n * multi-browse, hero or uncontained layout. Name it with `label`, and give it\n * a `Carousel.Item` for each item.\n *\n * ```tsx\n * <Carousel label=\"Label\">\n *   <Carousel.Item><Image alt=\"First item\" source={first} /></Carousel.Item>\n *   <Carousel.Item><Image alt=\"Second item\" source={second} /></Carousel.Item>\n * </Carousel>\n * ```\n *\n * `style`, `ref` and `testID` land on the carousel as a whole, which is the\n * view a layout positions, and a `style` there applies over its own.\n */\nfunction Carousel({\n  children,\n  itemSize = DEFAULT_ITEM_SIZE,\n  label,\n  layout = 'multi-browse',\n  nextLabel,\n  previousLabel,\n  style,\n  ...props\n}: CarouselProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const messages = useMessages()\n  const reduceMotion = useReducedMotion()\n  const dimensions = useWindowDimensions()\n  const scroller = useRef<ComponentRef<typeof ScrollView>>(null)\n  const scrolled = useSharedValue(0)\n  // The scroll view's width, which the layout reports once it has drawn;\n  // before that the first render guesses the window's.\n  const [measured, setMeasured] = useState<number>()\n  const width = measured ?? dimensions.width\n  const padding = theme.spacing.lg\n  const rtl = I18nManager.isRTL\n\n  const items = Children.toArray(children).filter(isValidElement)\n  const count = items.length\n  const room = Math.max(width - 2 * padding, 0)\n  const arrangement = arrange(layout, room, itemSize, count)\n  const masked = layout !== 'uncontained'\n  const step = arrangement.large + GAP\n  // The last rest, or how far the uncontained row runs past the scroll view.\n  const end = masked\n    ? arrangement.steps * step\n    : Math.max(count * step - GAP + 2 * padding - width, 0)\n  const paths = masked\n    ? pathsOf(\n        Array.from({ length: arrangement.steps + 1 }, (_, rest) =>\n          placements(layout, arrangement, room, padding, count, rest),\n        ),\n        count,\n      )\n    : []\n\n  const [edge, setEdge] = useState<Edge>(() => edgeOf(0, end))\n\n  const onScroll = useAnimatedScrollHandler({\n    onScroll: (event) => {\n      'worklet'\n      scrolled.set(fromStart(event.contentOffset.x, end, rtl))\n    },\n  })\n\n  // Which limits the carousel is at, on the JavaScript thread, for the two\n  // buttons; told only when it changes, rather than on every frame.\n  useAnimatedReaction(\n    () => {\n      'worklet'\n      return edgeOf(scrolled.get(), end)\n    },\n    (now, before) => {\n      'worklet'\n      if (now !== before) {\n        scheduleOnRN(setEdge, now)\n      }\n    },\n  )\n\n  const move = useCallback(\n    (direction: -1 | 1) => {\n      const geometry = { end, masked, scrolled: scrolled.get(), step }\n      scroller.current?.scrollTo({\n        animated: !reduceMotion,\n        x: fromStart(along(direction, geometry), end, rtl),\n      })\n    },\n    [end, masked, reduceMotion, rtl, scrolled, step],\n  )\n  const previous = useCallback(() => {\n    move(-1)\n  }, [move])\n  const next = useCallback(() => {\n    move(1)\n  }, [move])\n\n  const slots = items.map((_, index): Slot => ({\n    count,\n    index,\n    large: arrangement.large,\n    layout,\n    path: paths[index],\n    rtl,\n    scrolled,\n    step,\n  }))\n\n  return (\n    <View\n      aria-label={label}\n      role=\"region\"\n      {...describedAs(messages.carousel)}\n      {...props}\n      style={composeStyles<ViewStyle>(styles.root, own.root, style)}\n    >\n      <Animated.ScrollView\n        contentContainerStyle={composeStyles<ViewStyle>(\n          own.row,\n          masked && styles.contentMasked,\n          masked && { width: width + end },\n        )}\n        decelerationRate=\"fast\"\n        // A keyboard stop while there is anywhere to scroll, so the arrow\n        // keys move it whatever its items hold, which axe's\n        // scrollable-region-focusable asks of it under React Native Web.\n        focusable={end > 0}\n        horizontal\n        onLayout={widthTo(setMeasured)}\n        onScroll={onScroll}\n        ref={scroller}\n        scrollEventThrottle={16}\n        showsHorizontalScrollIndicator={false}\n        snapToOffsets={offsetsOf(masked, arrangement.steps, step, count, end)}\n      >\n        {items.map((item, index) => (\n          <SlotContext key={item.key ?? index} value={slots[index] ?? null}>\n            {item}\n          </SlotContext>\n        ))}\n      </Animated.ScrollView>\n      <View style={own.controls}>\n        <IconButton\n          aria-label={previousLabel ?? messages.previousSlide}\n          isDisabled={edge === 'start' || edge === 'both'}\n          onPress={previous}\n        >\n          <ChevronEndGlyph\n            style={rtl ? styles.previousGlyphRightToLeft : styles.previousGlyph}\n          />\n        </IconButton>\n        <IconButton\n          aria-label={nextLabel ?? messages.nextSlide}\n          isDisabled={edge === 'end' || edge === 'both'}\n          onPress={next}\n        >\n          <ChevronEndGlyph />\n        </IconButton>\n      </View>\n    </View>\n  )\n}\n\n/**\n * One item. It is named by which of how many it is — \"2 of 6\" — unless it is\n * given an `aria-label` of its own.\n *\n * `style`, `ref` and `testID` land on the item, the view with the corner that\n * cuts what it holds to the width it is drawn at.\n */\nfunction CarouselItem({ children, style, ...props }: CarouselItemProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const locale = useLocaleOf(undefined)\n  const messages = useMessages()\n  const slot = use(SlotContext)\n  const count = slot?.count ?? 1\n  const index = slot?.index ?? 0\n  const visibleWidth = useVisibleWidth(slot)\n  const drawn = useDrawn(slot, visibleWidth)\n  const large = slot?.large ?? 0\n\n  return (\n    <View style={composeStyles<ViewStyle>(styles.slot, slotWidthOf(slot))}>\n      <Animated.View\n        aria-label={slideLabelFor(index + 1, count, locale)}\n        role=\"group\"\n        {...describedAs(messages.slide)}\n        {...props}\n        style={composeStyles<AnimatedStyle<ViewStyle>>(own.item, drawn, style)}\n      >\n        <View style={composeStyles<ViewStyle>(styles.held, slotWidthOf(slot))}>\n          {typeof children === 'function'\n            ? children({ visibleWidth, width: large })\n            : children}\n        </View>\n      </Animated.View>\n    </View>\n  )\n}\n\n// What the region and its items are described as, under React Native Web,\n// where the DOM takes a role description; React Native has none to give.\nfunction describedAs(word: string) {\n  return Platform.OS === 'web' ? { 'aria-roledescription': word } : undefined\n}\n\nfunction edgeOf(scrolled: number, end: number): Edge {\n  'worklet'\n  const atStart = scrolled <= SLACK\n  const atEnd = scrolled >= end - SLACK\n  if (atStart && atEnd) {\n    return 'both'\n  }\n  if (atStart) {\n    return 'start'\n  }\n  return atEnd ? 'end' : 'none'\n}\n\n/**\n * A right-to-left scroll view's offset counted from its other edge: from the\n * start of the text where it is from the left, and from the left where it is\n * from the start, so the one function reads an offset and writes one. `end`\n * is how much longer the content is than the view.\n *\n * iOS and Android agree on what a right-to-left scroll view reports, though\n * they get there differently. iOS turns the whole scroll view over, so its\n * own offset counts from the start, and React Native counts it from the left\n * again before handing it to `onScroll`, and back before `scrollTo`\n * (`_scrollViewMetrics` and `scrollToOffset` in\n * RCTScrollViewComponentView.mm). Android's is the view's own `scrollX`,\n * which is from the left and starts at the far end, so the start shows first\n * (ReactHorizontalScrollView.kt). So on both an event's offset and the one\n * `scrollTo` takes are from the left, while `snapToOffsets` is read from the\n * start on both: Android turns its offsets round where it flings, and iOS\n * compares them with its own turned-over offset. React Native Web reports no\n * right-to-left layout through I18nManager, so there nothing is turned.\n */\nfunction fromStart(offset: number, end: number, rtl: boolean): number {\n  'worklet'\n  return rtl ? end - offset : offset\n}\n\n// Where the scroll view comes to rest: at every rest of a layout that masks,\n// or at each uncontained item's start, as far as the row goes.\nfunction offsetsOf(\n  masked: boolean,\n  steps: number,\n  step: number,\n  count: number,\n  end: number,\n): number[] | undefined {\n  if (end <= 0) {\n    return undefined\n  }\n  if (masked) {\n    return Array.from({ length: steps + 1 }, (_, rest) => rest * step)\n  }\n  const starts = Array.from({ length: count }, (_, index) =>\n    Math.min(index * step, end),\n  )\n  return [...new Set(starts)]\n}\n\n// Each item's place and width at every rest, which the UI thread\n// interpolates between as the carousel moves. A carousel with one rest is\n// given it twice, since an interpolation needs two.\nfunction pathsOf(rests: readonly Placement[][], count: number): Path[] {\n  const at = rests.length > 1 ? rests : [...rests, ...rests]\n  return Array.from({ length: count }, (_, index) => ({\n    rests: at.map((_placed, rest) => rest),\n    starts: at.map((placed) => placed[index]?.left ?? 0),\n    widths: at.map((placed) => placed[index]?.width ?? 0),\n  }))\n}\n\nfunction slotWidthOf(slot: null | Slot): undefined | ViewStyle {\n  return slot === null ? undefined : { width: slot.large }\n}\n\n// Where a layout that masks draws an item as the carousel scrolls: moved\n// along by as much as it has scrolled, which holds it against what shows,\n// then from its slot to where the arrangement places it, at the width it is\n// drawn at. Physical, since a transform is: a right-to-left row is laid out\n// from the right, so there the item moves the other way.\nfunction useDrawn(slot: null | Slot, visibleWidth: DerivedValue<number>) {\n  const path = slot?.path\n  const scrolled = slot?.scrolled\n  const index = slot?.index ?? 0\n  const large = slot?.large ?? 0\n  const step = slot?.step ?? 0\n  const rtl = slot?.rtl ?? false\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    if (path === undefined || scrolled === undefined) {\n      return {}\n    }\n    const offset = scrolled.get()\n    const start = interpolate(\n      offset / step,\n      path.rests,\n      path.starts,\n      Extrapolation.CLAMP,\n    )\n    const width = visibleWidth.get()\n    const shift = offset + start + width / 2 - index * step - large / 2\n    return { transform: [{ translateX: rtl ? -shift : shift }], width }\n  })\n}\n\n// The width an item is drawn at, which is how much of it shows: the\n// arrangement's, interpolated between rests, or the large width where\n// nothing is masked.\nfunction useVisibleWidth(slot: null | Slot): DerivedValue<number> {\n  const path = slot?.path\n  const scrolled = slot?.scrolled\n  const large = slot?.large ?? 0\n  const step = slot?.step ?? 0\n\n  return useDerivedValue(() => {\n    'worklet'\n    if (path === undefined || scrolled === undefined) {\n      return large\n    }\n    return interpolate(\n      scrolled.get() / step,\n      path.rests,\n      path.widths,\n      Extrapolation.CLAMP,\n    )\n  })\n}\n\n// A layout handler handing the width it reports to `onMeasure`. Built by a\n// call rather than written inline, which is what react-perf's\n// jsx-no-new-function-as-prop is after; the React Compiler memoises it.\nfunction widthTo(onMeasure: (width: number) => void) {\n  return (event: LayoutChangeEvent) => {\n    onMeasure(event.nativeEvent.layout.width)\n  }\n}\n\nCarousel.Item = CarouselItem\n\nexport { Carousel, CarouselItem }\nexport type {\n  CarouselItemProps,\n  CarouselItemRenderProps,\n  CarouselLayout,\n  CarouselProps,\n}\n"],"mappings":"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"}