@kanso-labs/react-native-kanso-ui 0.6.0 → 0.8.0

package/dist/components/navigation-rail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","StyleProp","ViewProps","ViewStyle","AnimatedStyle","SharedValue","Edge","useMemo","I18nManager","ScrollView","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","SafeAreaView","NavigationItemProps","ResolvedTheme","NavigationContext","NavigationItem","useTheme","composeStyles","themedStyles","NavigationRailItemProps","NavigationRailProps","Omit","children","header","isExpanded","ref","selectedRoute","style","Timing","duration","easing","ReturnType","bezier","COLLAPSED_WIDTH","EXPANDED_MIN_WIDTH","EXPANDED_MAX_WIDTH","TOP_PADDING","EXPANDED_PADDING","RING_REACH","styles","create","content","flexShrink","destinations","alignSelf","flexBasis","flexGrow","margin","inset","stylesOf","colors","spacing","collapsed","alignItems","paddingBottom","xl","paddingTop","width","collapsedList","gap","xs","padding","expanded","maxWidth","minWidth","paddingHorizontal","expandedList","marginBottom","xxxl","headerExpanded","paddingStart","sm","rail","backgroundColor","surface","flexDirection","overflow","edgesOf","isRTL","NavigationRail","t0","$","_c","ariaLabel","props","t1","undefined","theme","own","reduceMotion","t2","const","t3","form","measuring","context","widthStyle","current","get","t4","t5","T0","t6","widthThen","timingOf","T1","t8","Symbol","for","T2","t10","t11","t12","t13","t14","t15","t16","t9","t17","t7","t18","NavigationRailItem","motion","durationLong2","easingEmphasized","timing","event","next","nativeEvent","layout","set","Item","_c"],"sources":["../../../src/components/navigation-rail/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  LayoutChangeEvent,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle, SharedValue } from 'react-native-reanimated'\nimport type { Edge } from 'react-native-safe-area-context'\n\nimport { useMemo } from 'react'\nimport { I18nManager, ScrollView, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport type { NavigationItemProps } from '../../navigation'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { NavigationContext, NavigationItem } from '../../navigation'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's NavigationRail, the navigation rail page's rail, in both its\n// forms: collapsed, a 96dp column of vertical destinations down the leading\n// edge, and expanded, between 220dp and 360dp with each destination the\n// page's 56dp horizontal pill. Both are on the surface role, with their\n// contents 44dp from the top: the first destination, or a header when the\n// rail has one, such as a menu button that expands it, with the first\n// destination 40dp under it. The destinations are src/navigation's, shared\n// with NavigationBar, which holds their values.\n//\n// **The rail widens and narrows** when `isExpanded` changes: its surface\n// moves from one form's width to the other's over `durationLong2` on the\n// emphasized curve, as the active indicator moves, while the destinations\n// take their new form at once and the surface reveals or covers them. Web\n// changes width at once. Under reduced motion it does here too. The width it\n// moves to is the one the new form lays out at, measured, so an expanded\n// rail is as wide as its longest label asks within the page's bounds.\n//\n// The rail paints its surface under the status bar, the home indicator and a\n// landscape notch on its leading side, and keeps its header and destinations\n// inside the safe area: a `SafeAreaView` pads it by the top, the bottom and\n// the leading inset, the left one or under right-to-left the right, wherever\n// the rail meets them. Its trailing side faces the screen's content, so it\n// takes no inset there.\n//\n// The destinations scroll in a block of their own under the header, so a\n// rail shorter than they are scrolls them rather than squashing each below\n// its height, and the header stays where it is. The block is a `tablist` and\n// each destination a `tab`, which is how both platforms announce a set of\n// top-level destinations; the header is outside it, since what it holds is\n// not one of them. Web's rail is a landmark of links, which native has no\n// counterpart for. A destination still goes to its `href` through the app's\n// router, see `RouterProvider`.\n\ntype NavigationRailItemProps = NavigationItemProps\n\ntype NavigationRailProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The destinations: `NavigationRail.Item`s. */\n  readonly children?: ReactNode\n  /**\n   * What the rail draws above its destinations: a menu button that expands\n   * it, or a floating action button.\n   */\n  readonly header?: ReactNode\n  /**\n   * Whether the rail is in its expanded form, each destination a pill with\n   * its label beside the icon, rather than collapsed with the label under it.\n   * @default false\n   */\n  readonly isExpanded?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * The route of the current destination, matched against each\n   * destination's `href`. The match is selected and draws the active\n   * indicator.\n   */\n  readonly selectedRoute?: string\n  readonly style?: StyleProp<ViewStyle>\n}\n\ntype Timing = {\n  readonly duration: number\n  readonly easing: ReturnType<typeof Easing.bezier>\n}\n\n// The collapsed rail's width, and the expanded rail's bounds.\nconst COLLAPSED_WIDTH = 96\nconst EXPANDED_MIN_WIDTH = 220\nconst EXPANDED_MAX_WIDTH = 360\n\n// The page's 44dp above the contents, header or not, and the 20dp either\n// side of the expanded rail's pills, which fall between two steps of the\n// spacing scale and so are written out.\nconst TOP_PADDING = 44\nconst EXPANDED_PADDING = 20\n\n// How far a destination's focus ring reaches past it: the 2dp offset and the\n// 2dp ring. A scroll view clips what overflows it, so the block the\n// destinations scroll in is padded by this much and pulled back out by as\n// much, which leaves every destination where it was and every ring whole.\nconst RING_REACH = 4\n\nconst styles = StyleSheet.create({\n  // The form being drawn, as wide as it lays out, whatever the surface\n  // around it is moving through.\n  content: {\n    flexShrink: 0,\n  },\n  // The destinations' block, which takes the height the header leaves and\n  // scrolls what does not fit in it.\n  destinations: {\n    alignSelf: 'stretch',\n    flexBasis: 'auto',\n    flexGrow: 1,\n    flexShrink: 1,\n    margin: -RING_REACH,\n  },\n  // The safe area and the form inside it take the rail's height and no more,\n  // shrinking below what their destinations ask, since a view keeps its\n  // content's height by default and the block would then never scroll.\n  inset: {\n    flexGrow: 1,\n    flexShrink: 1,\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, spacing }) =>\n  StyleSheet.create({\n    // The collapsed rail, its destinations centred in it.\n    collapsed: {\n      alignItems: 'center',\n      flexGrow: 1,\n      flexShrink: 1,\n      paddingBottom: spacing.xl,\n      paddingTop: TOP_PADDING,\n      width: COLLAPSED_WIDTH,\n    },\n    // The collapsed rail's destinations, 4dp apart.\n    collapsedList: {\n      alignItems: 'center',\n      gap: spacing.xs,\n      padding: RING_REACH,\n    },\n    // The expanded rail: as wide as its pills ask, within the page's bounds,\n    // 20dp either side of them.\n    expanded: {\n      flexGrow: 1,\n      flexShrink: 1,\n      maxWidth: EXPANDED_MAX_WIDTH,\n      minWidth: EXPANDED_MIN_WIDTH,\n      paddingBottom: spacing.xl,\n      paddingHorizontal: EXPANDED_PADDING,\n      paddingTop: TOP_PADDING,\n    },\n    // The expanded rail's pills, at its leading edge with no gap between.\n    expandedList: {\n      alignItems: 'flex-start',\n      padding: RING_REACH,\n    },\n    // What the rail draws above its destinations, the page's 40dp clear of\n    // the first: the collapsed rail's 4dp gap, and the rest of its own here.\n    header: {\n      alignItems: 'center',\n      marginBottom: spacing.xxxl - spacing.xs,\n    },\n    // The expanded rail has no gap between destinations, so its header keeps\n    // the whole 40dp. It starts at the leading edge where the pills do, 8dp\n    // in from there: a 40dp icon button centres its 24dp icon, and 8dp puts\n    // that icon over the pills' icons, 16dp into each pill.\n    headerExpanded: {\n      alignItems: 'flex-start',\n      alignSelf: 'stretch',\n      marginBottom: spacing.xxxl,\n      paddingStart: spacing.sm,\n    },\n    // The rail's surface. It keeps its width whatever sits beside it, and\n    // holds the form being drawn at its leading edge, clipping it while the\n    // surface is narrower.\n    rail: {\n      backgroundColor: colors.surface,\n      flexDirection: 'row',\n      flexShrink: 0,\n      overflow: 'hidden',\n    },\n  }),\n)\n\n// The edges the rail meets: the top, the bottom and its leading side, which\n// is the right one under right-to-left.\nfunction edgesOf(): readonly Edge[] {\n  return ['bottom', I18nManager.isRTL ? 'right' : 'left', 'top']\n}\n\n/**\n * The column of top-level destinations a medium or wider window keeps at its\n * leading edge, collapsed or, with `isExpanded`, expanded. Each destination\n * goes to its `href` through the app's router, see `RouterProvider`.\n *\n * ```tsx\n * <NavigationRail selectedRoute=\"/first\">\n *   <NavigationRail.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationRail.Item>\n *   <NavigationRail.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationRail.Item>\n * </NavigationRail>\n * ```\n *\n * Draw it at the leading edge of a row holding the screen's content, which\n * gives it its height: it paints its surface to the screen's edges and keeps\n * its destinations clear of the status bar, the home indicator and a notch\n * itself.\n *\n * `aria-label` names the destinations' tab list. `style`, `ref` and `testID`\n * land on the rail's own view, its surface.\n */\nfunction NavigationRail({\n  'aria-label': ariaLabel,\n  children,\n  header,\n  isExpanded = false,\n  selectedRoute,\n  style,\n  ...props\n}: NavigationRailProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const reduceMotion = useReducedMotion()\n  // The surface's width, unset until the form being drawn is first measured,\n  // which leaves the surface as wide as that form.\n  const width = useSharedValue<number | undefined>(undefined)\n  const context = useMemo(\n    () => ({\n      form: isExpanded ? ('expanded' as const) : ('collapsed' as const),\n      measuring: false,\n      selectedRoute,\n    }),\n    [isExpanded, selectedRoute],\n  )\n  const widthStyle = useAnimatedStyle(() => {\n    'worklet'\n    const current = width.get()\n\n    return current === undefined ? {} : { width: current }\n  })\n\n  return (\n    <Animated.View\n      {...props}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        own.rail,\n        widthStyle,\n        style,\n      )}\n    >\n      <View\n        onLayout={widthThen(width, reduceMotion, timingOf(theme))}\n        style={styles.content}\n      >\n        <SafeAreaView edges={edgesOf()} style={styles.inset}>\n          <View style={isExpanded ? own.expanded : own.collapsed}>\n            {header === undefined ? null : (\n              <View\n                style={composeStyles<ViewStyle>(\n                  own.header,\n                  isExpanded ? own.headerExpanded : undefined,\n                )}\n              >\n                {header}\n              </View>\n            )}\n            <ScrollView\n              aria-label={ariaLabel}\n              contentContainerStyle={\n                isExpanded ? own.expandedList : own.collapsedList\n              }\n              role=\"tablist\"\n              style={styles.destinations}\n            >\n              <NavigationContext value={context}>{children}</NavigationContext>\n            </ScrollView>\n          </View>\n        </SafeAreaView>\n      </View>\n    </Animated.View>\n  )\n}\n\n/**\n * One destination of a navigation rail: an icon, a label and, while it is\n * the current one, the active indicator. Pressing it calls `onPress`, then\n * goes to its `href`. Renders nothing of its own outside a `NavigationRail`,\n * whose `selectedRoute` says whether it is selected.\n *\n * `style`, `ref` and `testID` land on the destination's `Pressable`.\n */\nfunction NavigationRailItem(props: NavigationRailItemProps) {\n  return <NavigationItem {...props} />\n}\n\n// The rail's change of width, on the active indicator's duration and curve.\nfunction timingOf({ motion }: ResolvedTheme): Timing {\n  return {\n    duration: motion.durationLong2,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n}\n\n// Moves the surface to the width the form being drawn lays out at: at once\n// the first time, and under reduced motion, and over the rail's timing\n// after that. Built by a call rather than written inline at the prop, which\n// is what react-perf's jsx-no-new-function-as-prop is after.\nfunction widthThen(\n  width: SharedValue<number | undefined>,\n  reduceMotion: boolean,\n  timing: Timing,\n) {\n  return (event: LayoutChangeEvent) => {\n    const next = event.nativeEvent.layout.width\n\n    width.set(\n      width.get() === undefined || reduceMotion\n        ? next\n        : withTiming(next, timing),\n    )\n  }\n}\n\nNavigationRail.Item = NavigationRailItem\n\nexport type { NavigationRailItemProps, NavigationRailProps }\n\nexport { NavigationRail, NavigationRailItem }\n"],"mappings":";;;;;;;;;;AA6FA,MAAM2C,kBAAkB;AACxB,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAK3B,MAAMC,cAAc;AACpB,MAAMC,mBAAmB;AAMzB,MAAMC,aAAa;AAEnB,MAAMC,SAASpC,WAAWqC,OAAO;CAG/BC,SAAS,EACPC,YAAY,EACd;CAGAC,cAAc;EACZC,WAAW;EACXC,WAAW;EACXC,UAAU;EACVJ,YAAY;EACZK,QAAQ;CACV;CAIAC,OAAO;EACLF,UAAU;EACVJ,YAAY;CACd;AACF,CAAC;AAED,MAAMO,WAAW/B,cAAc,EAAEgC,QAAQC,cACvChD,WAAWqC,OAAO;CAEhBY,WAAW;EACTC,YAAY;EACZP,UAAU;EACVJ,YAAY;EACZY,eAAeH,QAAQI;EACvBC,YAAYpB;EACZqB,OAAOxB;CACT;CAEAyB,eAAe;EACbL,YAAY;EACZM,KAAKR,QAAQS;EACbC,SAASvB;CACX;CAGAwB,UAAU;EACRhB,UAAU;EACVJ,YAAY;EACZqB,UAAU5B;EACV6B,UAAU9B;EACVoB,eAAeH,QAAQI;EACvBU,mBAAmB5B;EACnBmB,YAAYpB;CACd;CAEA8B,cAAc;EACZb,YAAY;EACZQ,SAASvB;CACX;CAGAf,QAAQ;EACN8B,YAAY;EACZc,cAAchB,QAAQiB,OAAOjB,QAAQS;CACvC;CAKAS,gBAAgB;EACdhB,YAAY;EACZT,WAAW;EACXuB,cAAchB,QAAQiB;EACtBE,cAAcnB,QAAQoB;CACxB;CAIAC,MAAM;EACJC,iBAAiBvB,OAAOwB;EACxBC,eAAe;EACfjC,YAAY;EACZkC,UAAU;CACZ;AACF,CAAC,CACH;AAIA,SAASC,UAA2B;CAClC,OAAO;EAAC;EAAU5E,YAAY6E,QAAQ,UAAU;EAAQ;CAAK;AAC/D;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,SAAAC,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAA7D;CAAA,IAAAC;CAAA,IAAA6D;CAAA,IAAA1D;CAAA,IAAAC;CAAA,IAAA0D;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAwB,CAAA,CAAA,cAAAG,WAAA7D,UAAAC,QAAAC,YAAA6D,IAAA3D,eAAAC,OAAA,GAAAyD,SAAAJ;EAQFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAA3D;EAAA2D,EAAA,KAAA1D;EAAA0D,EAAA,KAAAG;EAAAH,EAAA,KAAAvD;EAAAuD,EAAA,KAAAtD;EAAAsD,EAAA,KAAAI;CAAA,OAAA;EAAAF,YAAAF,EAAA;EAAA3D,WAAA2D,EAAA;EAAA1D,SAAA0D,EAAA;EAAAG,QAAAH,EAAA;EAAAvD,gBAAAuD,EAAA;EAAAtD,QAAAsD,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAJpB,MAAAzD,aAAA6D,OAAAC,KAAAA,IAAA,QAAAD;CAKA,MAAAE,QAAcvE,SAAS;CACvB,MAAAwE,MAAYvC,SAASsC,KAAK;CAC1B,MAAAE,eAAqBjF,iBAAiB;CAGtC,MAAAiD,QAAchD,eAAmC6E,KAAAA,CAAS;CAGhD,MAAAI,KAAAlE,aAAc,aAAwB;CAAqB,IAAAoE;CAAA,IAAAX,EAAA,OAAAvD,iBAAAuD,EAAA,OAAAS,IAAA;EAD5DE,KAAA;GAAAC,MACCH;GAA2DI,WACtD;GAAKpE;EAElB;EAACuD,EAAA,KAAAvD;EAAAuD,EAAA,KAAAS;EAAAT,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CALH,MAAAc,UACSH;CAOT,MAAAI,aAAmBzF,uBAAiB;EAAA;EAElC,MAAA0F,UAAgBxC,MAAKyC,IAAK;EAAC,OAEpBD,YAAYX,KAAAA,IAAZ,CAA8C,IAA9C,EAAA7B,OAAsCwC,QAAQ;CAAC,CACvD;CAGE,MAAAE,KAAA9F;CAEQ,MAAA+F,KAAAnF,cACLuE,IAAGhB,MACHwB,YACArE,KACF;CAEC,MAAA0E,KAAAjG;CAAI,IAAAkG;CAAA,IAAArB,EAAA,QAAAQ,gBAAAR,EAAA,QAAAM,SAAAN,EAAA,QAAAxB,OAAA;EACO6C,KAAAC,UAAU9C,OAAOgC,cAAce,SAASjB,KAAK,CAAC;EAACN,EAAA,MAAAQ;EAAAR,EAAA,MAAAM;EAAAN,EAAA,MAAAxB;EAAAwB,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAClD1C,MAAAA,KAAAA;CAEN,MAAAkE,KAAA9F;CAAY,IAAA+F;CAAA,IAAAzB,EAAA,QAAA0B,OAAAC,IAAA,2BAAA,GAAA;EAAQF,KAAA7B,QAAQ;EAACI,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAS1C,MAAAA,KAAAA;CACpC,MAAAsE,KAAAzG;CAAY,MAAA0G,MAAAtF,aAAagE,IAAG1B,WAAY0B,IAAGpC;CACzC,MAAA2D,MAAAxF,WAAW+D,KAAAA,IAAX,OACC,oBAAC,MAAD;EACS,OAAArE,cACLuE,IAAGjE,QACHC,aAAagE,IAAGnB,iBAAhBiB,KAAAA,CACF;EAEC/D,UAAAA;CANE,CAAA;CAYH,MAAAyF,MAAAxF,aAAagE,IAAGtB,eAAgBsB,IAAG9B;CAAc,IAAAuD;CAAA,IAAAhC,EAAA,QAAA3D,YAAA2D,EAAA,QAAAc,SAAA;EAKnDkB,MAAA,oBAAC,mBAAD;GAA0BlB,OAAAA;GAAUzE;EAAlB,CAAA;EAA+C2D,EAAA,MAAA3D;EAAA2D,EAAA,MAAAc;EAAAd,EAAA,MAAAgC;CAAA,OAAAA,MAAAhC,EAAA;CAAA,IAAAiC;CAAA,IAAAjC,EAAA,QAAAE,aAAAF,EAAA,QAAA+B,OAAA/B,EAAA,QAAAgC,KAAA;EARnEC,MAAA,oBAAC,YAAD;GACc/B,cAAAA;GAEV,uBAAA6B;GAEG,MAAA;GACE,OAAAzE,OAAMI;GAEbsE,UAAAA;EARS,CAAA;EASEhC,EAAA,MAAAE;EAAAF,EAAA,MAAA+B;EAAA/B,EAAA,MAAAgC;EAAAhC,EAAA,MAAAiC;CAAA,OAAAA,MAAAjC,EAAA;CAAA,IAAAkC;CAAA,IAAAlC,EAAA,QAAA4B,MAAA5B,EAAA,QAAA6B,OAAA7B,EAAA,QAAA8B,OAAA9B,EAAA,QAAAiC,KAAA;EApBfC,MAAA,qBAAC,IAAD;GAAa,OAAAL;GAAb,UAAA,CACGC,KAUDG,GAXG;;EAqBEjC,EAAA,MAAA4B;EAAA5B,EAAA,MAAA6B;EAAA7B,EAAA,MAAA8B;EAAA9B,EAAA,MAAAiC;EAAAjC,EAAA,MAAAkC;CAAA,OAAAA,MAAAlC,EAAA;CAAA,IAAAmC;CAAA,IAAAnC,EAAA,QAAAwB,MAAAxB,EAAA,QAAAkC,OAAAlC,EAAA,QAAAyB,MAAAzB,EAAA,QAAAoC,GAAArE,OAAA;EAtBToE,MAAA,oBAAC,IAAD;GAAqB,OAAAV;GAAkB,OAAAnE,GAAMS;GAC3CmE,UAAAA;EADW,CAAA;EAuBElC,EAAA,MAAAwB;EAAAxB,EAAA,MAAAkC;EAAAlC,EAAA,MAAAyB;EAAAzB,EAAA,MAAAoC,GAAArE;EAAAiC,EAAA,MAAAmC;CAAA,OAAAA,MAAAnC,EAAA;CAAA,IAAAqC;CAAA,IAAArC,EAAA,QAAAoB,MAAApB,EAAA,QAAAmC,OAAAnC,EAAA,QAAAqB,MAAArB,EAAA,QAAAsC,GAAA9E,SAAA;EA3BjB6E,MAAA,oBAAC,IAAD;GACY,UAAAhB;GACH,OAAA/D,GAAME;GAEb2E,UAAAA;EAJG,CAAA;EA4BEnC,EAAA,MAAAoB;EAAApB,EAAA,MAAAmC;EAAAnC,EAAA,MAAAqB;EAAArB,EAAA,MAAAsC,GAAA9E;EAAAwC,EAAA,MAAAqC;CAAA,OAAAA,MAAArC,EAAA;CAAA,IAAAuC;CAAA,IAAAvC,EAAA,QAAAG,SAAAH,EAAA,QAAAqC,OAAArC,EAAA,QAAAkB,GAAA/F,QAAA6E,EAAA,QAAAmB,IAAA;EApCToB,MAAA,oBAAA,GAAA,MAAA;GAAA,GACMpC;GACG,OAAAgB;GAMPkB,UAAAA;EA6BF,CAAA;EAAgBrC,EAAA,MAAAG;EAAAH,EAAA,MAAAqC;EAAArC,EAAA,MAAAkB,GAAA/F;EAAA6E,EAAA,MAAAmB;EAAAnB,EAAA,MAAAuC;CAAA,OAAAA,MAAAvC,EAAA;CAAA,OArChBuC;AAqCgB;;;;;;;;;AAYpB,SAAAC,mBAAArC,OAAA;CAAA,MAAAH,IAAAC,EAAA,CAAA;CAAA,IAAAF;CAAA,IAAAC,EAAA,OAAAG,OAAA;EACSJ,KAAA,oBAAC,gBAAD,EAAe,GAAKI,MAAK,CAAA;EAAIH,EAAA,KAAAG;EAAAH,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAA7BD;AAA6B;AAItC,SAASwB,SAAS,EAAEkB,UAAiC;CACnD,OAAO;EACL7F,UAAU6F,OAAOC;EACjB7F,QAAQxB,OAAO0B,OAAO,GAAG0F,OAAOE,gBAAgB;CAClD;AACF;AAMA,SAASrB,UACP9C,OACAgC,cACAoC,QACA;CACA,QAAQC,UAA6B;EACnC,MAAMC,OAAOD,MAAME,YAAYC,OAAOxE;EAEtCA,MAAMyE,IACJzE,MAAMyC,IAAI,MAAMZ,KAAAA,KAAaG,eACzBsC,OACArH,WAAWqH,MAAMF,MAAM,CAC7B;CACF;AACF;AAEA9C,eAAeoD,OAAOV"}

package/dist/components/number-field/index.d.ts

@@ -6,7 +6,9 @@ import { ComponentRef, Ref } from "react";
 type NumberFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'aria-disabled' | 'aria-label' | 'autoComplete' | 'autoCorrect' | 'children' | 'cursorColor' | 'defaultValue' | 'editable' | 'inputMode' | 'keyboardType' | 'maxLength' | 'multiline' | 'numberOfLines' | 'onChange' | 'onChangeText' | 'placeholder' | 'placeholderTextColor' | 'readOnly' | 'selectionColor' | 'spellCheck' | 'style' | 'underlineColorAndroid' | 'value'> & {
   /**
    * The name of the stepper that lowers the value, for a screen reader. Left
-   * out, it is the English "Decrease" followed by the field's own label.
+   * out, it is the name React Aria gives web's in the `I18nProvider`'s
+   * locale, or the device's outside one, around the field's own label:
+   * "Decrease Label" in English.
    */
   readonly decrementLabel?: string;
   /** The value the field opens with, when it keeps its own. */
@@ -39,7 +41,9 @@ type NumberFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilit
   readonly formatOptions?: Intl.NumberFormatOptions;
   /**
    * The name of the stepper that raises the value, for a screen reader. Left
-   * out, it is the English "Increase" followed by the field's own label.
+   * out, it is the name React Aria gives web's in the `I18nProvider`'s
+   * locale, or the device's outside one, around the field's own label:
+   * "Increase Label" in English.
    */
   readonly incrementLabel?: string;
   /**
@@ -70,7 +74,7 @@ type NumberFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilit
   readonly label: string;
   /**
    * The BCP 47 locale the value is written and read in. Defaults to the
-   * device's.
+   * `I18nProvider`'s, or the device's outside one.
    */
   readonly locale?: string;
   /** The highest value the field takes. A committed value is clamped to it. */

package/dist/components/number-field/index.js

@@ -3,7 +3,8 @@ import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { withOpacity } from "../../theme/color.js";
-import { localeOf } from "../../number/locale.js";
+import { messagesFor } from "../../i18n/index.js";
+import { useLocaleOf } from "../../i18n/provider.js";
 import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
 import { useFieldValidation } from "../../form/index.js";
 import { IconButton } from "../icon-button/index.js";
@@ -99,7 +100,7 @@ function marginVerticalOf(margin) {
 * ```
 */
 function NumberField(t0) {
-	const $ = c(110);
+	const $ = c(126);
 	let decrementLabel;
 	let defaultValue;
 	let description;
@@ -205,30 +206,45 @@ function NumberField(t0) {
 	const variant = t8 === void 0 ? "filled" : t8;
 	const id = useId();
 	const control = useRef(null);
-	const writtenIn = localeOf(locale);
-	const state = useNumberFieldState({
-		defaultValue,
-		formatOptions,
-		isDisabled,
-		isReadOnly,
-		locale: writtenIn,
-		maxValue,
-		minValue,
-		onChange,
-		step,
-		value
-	});
+	const writtenIn = useLocaleOf(locale);
 	let t9;
-	if ($[31] !== state.numberValue) {
-		t9 = Number.isNaN(state.numberValue);
-		$[31] = state.numberValue;
-		$[32] = t9;
-	} else t9 = $[32];
-	const empty = t9;
-	const t10 = empty ? "" : String(state.numberValue);
-	let t11;
-	if ($[33] !== empty || $[34] !== error || $[35] !== isDisabled || $[36] !== isReadOnly || $[37] !== isRequired || $[38] !== name || $[39] !== state.numberValue || $[40] !== t10 || $[41] !== validate) {
-		t11 = {
+	if ($[31] !== defaultValue || $[32] !== formatOptions || $[33] !== isDisabled || $[34] !== isReadOnly || $[35] !== maxValue || $[36] !== minValue || $[37] !== onChange || $[38] !== step || $[39] !== value || $[40] !== writtenIn) {
+		t9 = {
+			defaultValue,
+			formatOptions,
+			isDisabled,
+			isReadOnly,
+			locale: writtenIn,
+			maxValue,
+			minValue,
+			onChange,
+			step,
+			value
+		};
+		$[31] = defaultValue;
+		$[32] = formatOptions;
+		$[33] = isDisabled;
+		$[34] = isReadOnly;
+		$[35] = maxValue;
+		$[36] = minValue;
+		$[37] = onChange;
+		$[38] = step;
+		$[39] = value;
+		$[40] = writtenIn;
+		$[41] = t9;
+	} else t9 = $[41];
+	const state = useNumberFieldState(t9);
+	let t10;
+	if ($[42] !== state.numberValue) {
+		t10 = Number.isNaN(state.numberValue);
+		$[42] = state.numberValue;
+		$[43] = t10;
+	} else t10 = $[43];
+	const empty = t10;
+	const t11 = empty ? "" : String(state.numberValue);
+	let t12;
+	if ($[44] !== empty || $[45] !== error || $[46] !== isDisabled || $[47] !== isReadOnly || $[48] !== isRequired || $[49] !== name || $[50] !== state.numberValue || $[51] !== t11 || $[52] !== validate) {
+		t12 = {
 			control,
 			error,
 			isDisabled,
@@ -236,222 +252,228 @@ function NumberField(t0) {
 			isReadOnly,
 			isRequired,
 			name,
-			submitted: t10,
+			submitted: t11,
 			validate,
 			value: state.numberValue
 		};
-		$[33] = empty;
-		$[34] = error;
-		$[35] = isDisabled;
-		$[36] = isReadOnly;
-		$[37] = isRequired;
-		$[38] = name;
-		$[39] = state.numberValue;
-		$[40] = t10;
-		$[41] = validate;
-		$[42] = t11;
-	} else t11 = $[42];
-	const validation = useFieldValidation(t11);
+		$[44] = empty;
+		$[45] = error;
+		$[46] = isDisabled;
+		$[47] = isReadOnly;
+		$[48] = isRequired;
+		$[49] = name;
+		$[50] = state.numberValue;
+		$[51] = t11;
+		$[52] = validate;
+		$[53] = t12;
+	} else t12 = $[53];
+	const validation = useFieldValidation(t12);
 	const shownError = validation.error;
-	let t12;
-	if ($[43] !== onBlur || $[44] !== state || $[45] !== validation.onBlur) {
-		t12 = commitBefore(state, blurThen(validation.onBlur, onBlur));
-		$[43] = onBlur;
-		$[44] = state;
-		$[45] = validation.onBlur;
-		$[46] = t12;
-	} else t12 = $[46];
 	let t13;
-	if ($[47] !== onFocus || $[48] !== t12) {
-		t13 = {
-			onBlur: t12,
+	if ($[54] !== onBlur || $[55] !== state || $[56] !== validation.onBlur) {
+		t13 = commitBefore(state, blurThen(validation.onBlur, onBlur));
+		$[54] = onBlur;
+		$[55] = state;
+		$[56] = validation.onBlur;
+		$[57] = t13;
+	} else t13 = $[57];
+	let t14;
+	if ($[58] !== onFocus || $[59] !== t13) {
+		t14 = {
+			onBlur: t13,
 			onFocus
 		};
-		$[47] = onFocus;
-		$[48] = t12;
-		$[49] = t13;
-	} else t13 = $[49];
-	const focus = useFieldFocus(t13);
-	const hasDecimals = (new NumberFormatter(writtenIn, formatOptions).resolvedOptions().maximumFractionDigits ?? 0) > 0;
+		$[58] = onFocus;
+		$[59] = t13;
+		$[60] = t14;
+	} else t14 = $[60];
+	const focus = useFieldFocus(t14);
+	let t15;
+	if ($[61] !== formatOptions || $[62] !== writtenIn) {
+		t15 = new NumberFormatter(writtenIn, formatOptions).resolvedOptions().maximumFractionDigits ?? 0;
+		$[61] = formatOptions;
+		$[62] = writtenIn;
+		$[63] = t15;
+	} else t15 = $[63];
+	const hasDecimals = t15 > 0;
 	const announced = useStepAnnouncement(state.inputValue);
 	const [stepperFocused, setStepperFocused] = useState(false);
-	let t14;
-	let t15;
-	if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = () => control.current;
-		t15 = [];
-		$[50] = t14;
-		$[51] = t15;
+	let t16;
+	let t17;
+	if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = () => control.current;
+		t17 = [];
+		$[64] = t16;
+		$[65] = t17;
 	} else {
-		t14 = $[50];
-		t15 = $[51];
+		t16 = $[64];
+		t17 = $[65];
 	}
-	useImperativeHandle(inputRef, t14, t15);
-	const t16 = decrementLabel ?? `Decrease ${label}`;
-	const t17 = incrementLabel ?? `Increase ${label}`;
-	const t18 = steppers === "horizontal";
-	let t19;
-	if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = () => {
-			setStepperFocused(false);
-		};
-		$[52] = t19;
-	} else t19 = $[52];
-	let t20;
-	if ($[53] !== announced || $[54] !== state.canDecrement || $[55] !== state.canIncrement || $[56] !== state.decrement || $[57] !== state.increment || $[58] !== t16 || $[59] !== t17 || $[60] !== t18 || $[61] !== validation.onEdit || $[62] !== variant) {
-		let t21;
-		if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
-			t21 = () => {
+	useImperativeHandle(inputRef, t16, t17);
+	let t18;
+	if ($[66] !== announced || $[67] !== decrementLabel || $[68] !== incrementLabel || $[69] !== label || $[70] !== state.canDecrement || $[71] !== state.canIncrement || $[72] !== state.decrement || $[73] !== state.increment || $[74] !== steppers || $[75] !== validation.onEdit || $[76] !== variant || $[77] !== writtenIn) {
+		let t19;
+		if ($[79] === Symbol.for("react.memo_cache_sentinel")) {
+			t19 = () => {
+				setStepperFocused(false);
+			};
+			$[79] = t19;
+		} else t19 = $[79];
+		let t20;
+		if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
+			t20 = () => {
 				setStepperFocused(true);
 			};
-			$[64] = t21;
-		} else t21 = $[64];
-		t20 = steppersOf({
+			$[80] = t20;
+		} else t20 = $[80];
+		t18 = steppersOf({
 			canDecrement: state.canDecrement,
 			canIncrement: state.canIncrement,
-			decrementLabel: t16,
-			incrementLabel: t17,
-			inline: t18,
+			decrementLabel: decrementLabel ?? messagesFor(writtenIn).decrease.replace("{label}", label),
+			incrementLabel: incrementLabel ?? messagesFor(writtenIn).increase.replace("{label}", label),
+			inline: steppers === "horizontal",
 			onBlur: t19,
 			onDecrement: announced(stepThen(state.decrement, validation.onEdit)),
-			onFocus: t21,
+			onFocus: t20,
 			onIncrement: announced(stepThen(state.increment, validation.onEdit)),
 			outlined: variant === "outlined"
 		});
-		$[53] = announced;
-		$[54] = state.canDecrement;
-		$[55] = state.canIncrement;
-		$[56] = state.decrement;
-		$[57] = state.increment;
-		$[58] = t16;
-		$[59] = t17;
-		$[60] = t18;
-		$[61] = validation.onEdit;
-		$[62] = variant;
-		$[63] = t20;
-	} else t20 = $[63];
-	const t21 = focus.focused || stepperFocused;
-	const t22 = shownError !== void 0;
-	const t23 = state.inputValue !== "";
-	const t24 = focus.handlers;
-	let t25;
-	if ($[65] !== description || $[66] !== id || $[67] !== shownError) {
-		t25 = describedBy(id, {
+		$[66] = announced;
+		$[67] = decrementLabel;
+		$[68] = incrementLabel;
+		$[69] = label;
+		$[70] = state.canDecrement;
+		$[71] = state.canIncrement;
+		$[72] = state.decrement;
+		$[73] = state.increment;
+		$[74] = steppers;
+		$[75] = validation.onEdit;
+		$[76] = variant;
+		$[77] = writtenIn;
+		$[78] = t18;
+	} else t18 = $[78];
+	const t19 = focus.focused || stepperFocused;
+	const t20 = shownError !== void 0;
+	const t21 = state.inputValue !== "";
+	const t22 = focus.handlers;
+	let t23;
+	if ($[81] !== description || $[82] !== id || $[83] !== shownError) {
+		t23 = describedBy(id, {
 			description,
 			error: shownError
 		});
-		$[65] = description;
-		$[66] = id;
-		$[67] = shownError;
-		$[68] = t25;
-	} else t25 = $[68];
-	const t26 = !isDisabled && !isReadOnly;
+		$[81] = description;
+		$[82] = id;
+		$[83] = shownError;
+		$[84] = t23;
+	} else t23 = $[84];
+	const t24 = !isDisabled && !isReadOnly;
+	let t25;
+	if ($[85] !== hasDecimals || $[86] !== minValue) {
+		t25 = keyboardOf(minValue, hasDecimals);
+		$[85] = hasDecimals;
+		$[86] = minValue;
+		$[87] = t25;
+	} else t25 = $[87];
+	let t26;
+	if ($[88] !== state || $[89] !== validation.onEdit) {
+		t26 = editInto(state, validation.onEdit);
+		$[88] = state;
+		$[89] = validation.onEdit;
+		$[90] = t26;
+	} else t26 = $[90];
 	let t27;
-	if ($[69] !== hasDecimals || $[70] !== minValue) {
-		t27 = keyboardOf(minValue, hasDecimals);
-		$[69] = hasDecimals;
-		$[70] = minValue;
-		$[71] = t27;
-	} else t27 = $[71];
+	if ($[91] !== onSubmitEditing || $[92] !== state) {
+		t27 = commitBefore(state, onSubmitEditing);
+		$[91] = onSubmitEditing;
+		$[92] = state;
+		$[93] = t27;
+	} else t27 = $[93];
 	let t28;
-	if ($[72] !== state || $[73] !== validation.onEdit) {
-		t28 = editInto(state, validation.onEdit);
-		$[72] = state;
-		$[73] = validation.onEdit;
-		$[74] = t28;
-	} else t28 = $[74];
-	let t29;
-	if ($[75] !== onSubmitEditing || $[76] !== state) {
-		t29 = commitBefore(state, onSubmitEditing);
-		$[75] = onSubmitEditing;
-		$[76] = state;
-		$[77] = t29;
-	} else t29 = $[77];
-	let t30;
-	if ($[78] !== focus.handlers || $[79] !== label || $[80] !== numeric || $[81] !== props || $[82] !== returnKeyType || $[83] !== state.inputValue || $[84] !== t25 || $[85] !== t26 || $[86] !== t27 || $[87] !== t28 || $[88] !== t29) {
-		t30 = /* @__PURE__ */ jsx(FieldInput, {
+	if ($[94] !== focus.handlers || $[95] !== label || $[96] !== numeric || $[97] !== props || $[98] !== returnKeyType || $[99] !== state.inputValue || $[100] !== t23 || $[101] !== t24 || $[102] !== t25 || $[103] !== t26 || $[104] !== t27) {
+		t28 = /* @__PURE__ */ jsx(FieldInput, {
 			...props,
-			...t24,
+			...t22,
 			"aria-label": label,
 			autoComplete: "off",
 			autoCorrect: false,
-			described: t25,
-			editable: t26,
-			keyboardType: t27,
+			described: t23,
+			editable: t24,
+			keyboardType: t25,
 			numeric,
-			onChangeText: t28,
-			onSubmitEditing: t29,
+			onChangeText: t26,
+			onSubmitEditing: t27,
 			ref: control,
 			returnKeyType,
 			spellCheck: false,
 			value: state.inputValue
 		});
-		$[78] = focus.handlers;
-		$[79] = label;
-		$[80] = numeric;
-		$[81] = props;
-		$[82] = returnKeyType;
-		$[83] = state.inputValue;
-		$[84] = t25;
-		$[85] = t26;
-		$[86] = t27;
-		$[87] = t28;
-		$[88] = t29;
-		$[89] = t30;
-	} else t30 = $[89];
-	let t31;
-	if ($[90] !== floatingLabel || $[91] !== isDisabled || $[92] !== isRequired || $[93] !== label || $[94] !== t20 || $[95] !== t21 || $[96] !== t22 || $[97] !== t23 || $[98] !== t30 || $[99] !== variant) {
-		t31 = /* @__PURE__ */ jsx(FieldBox, {
+		$[94] = focus.handlers;
+		$[95] = label;
+		$[96] = numeric;
+		$[97] = props;
+		$[98] = returnKeyType;
+		$[99] = state.inputValue;
+		$[100] = t23;
+		$[101] = t24;
+		$[102] = t25;
+		$[103] = t26;
+		$[104] = t27;
+		$[105] = t28;
+	} else t28 = $[105];
+	let t29;
+	if ($[106] !== floatingLabel || $[107] !== isDisabled || $[108] !== isRequired || $[109] !== label || $[110] !== t18 || $[111] !== t19 || $[112] !== t20 || $[113] !== t21 || $[114] !== t28 || $[115] !== variant) {
+		t29 = /* @__PURE__ */ jsx(FieldBox, {
 			control,
-			end: t20,
+			end: t18,
 			floatingLabel,
 			isDisabled,
-			isFocused: t21,
-			isInvalid: t22,
-			isPopulated: t23,
+			isFocused: t19,
+			isInvalid: t20,
+			isPopulated: t21,
 			isRequired,
 			label,
 			variant,
-			children: t30
+			children: t28
 		});
-		$[90] = floatingLabel;
-		$[91] = isDisabled;
-		$[92] = isRequired;
-		$[93] = label;
-		$[94] = t20;
-		$[95] = t21;
-		$[96] = t22;
-		$[97] = t23;
-		$[98] = t30;
-		$[99] = variant;
-		$[100] = t31;
-	} else t31 = $[100];
-	let t32;
-	if ($[101] !== description || $[102] !== id || $[103] !== shownError) {
-		t32 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[106] = floatingLabel;
+		$[107] = isDisabled;
+		$[108] = isRequired;
+		$[109] = label;
+		$[110] = t18;
+		$[111] = t19;
+		$[112] = t20;
+		$[113] = t21;
+		$[114] = t28;
+		$[115] = variant;
+		$[116] = t29;
+	} else t29 = $[116];
+	let t30;
+	if ($[117] !== description || $[118] !== id || $[119] !== shownError) {
+		t30 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error: shownError,
 			id
 		});
-		$[101] = description;
-		$[102] = id;
-		$[103] = shownError;
-		$[104] = t32;
-	} else t32 = $[104];
-	let t33;
-	if ($[105] !== ref || $[106] !== style || $[107] !== t31 || $[108] !== t32) {
-		t33 = /* @__PURE__ */ jsxs(View, {
+		$[117] = description;
+		$[118] = id;
+		$[119] = shownError;
+		$[120] = t30;
+	} else t30 = $[120];
+	let t31;
+	if ($[121] !== ref || $[122] !== style || $[123] !== t29 || $[124] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(View, {
 			ref,
 			style,
-			children: [t31, t32]
+			children: [t29, t30]
 		});
-		$[105] = ref;
-		$[106] = style;
-		$[107] = t31;
-		$[108] = t32;
-		$[109] = t33;
-	} else t33 = $[109];
-	return t33;
+		$[121] = ref;
+		$[122] = style;
+		$[123] = t29;
+		$[124] = t30;
+		$[125] = t31;
+	} else t31 = $[125];
+	return t31;
 }
 function outwardSlop(half, place) {
 	const slop = hitSlop(half, STEPPER_WIDTH);