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

package/dist/glyphs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ColorValue","StyleProp","ViewStyle","I18nManager","StyleSheet","Svg","Path","HIDDEN","useIconStyle","glyphStyles","GlyphProps","color","size","style","testID","ArrowBackGlyph","props","$","_c","t0","Symbol","for","t1","ArrowDownwardGlyph","ArrowDropDownGlyph","ArrowUpwardGlyph","CalendarGlyph","CheckGlyph","ChevronDownGlyph","ChevronEndGlyph","ClockGlyph","CloseGlyph","Glyph","children","mirrored","undefined","slot","side","t2","t3","compose","isRTL","t4","KeyboardGlyph","MinusGlyph","IndeterminateGlyph","PersonGlyph","PlusGlyph","SearchGlyph","_c"],"sources":["../../src/glyphs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { ColorValue, StyleProp, ViewStyle } from 'react-native'\n\nimport { I18nManager, StyleSheet } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\n\nimport { HIDDEN } from './hidden'\nimport { useIconStyle } from './icon-style'\nimport { glyphStyles } from './styles'\n\n// The glyphs the library's own controls draw, the same set kanso-ui draws on\n// web: the check and the dash a checkbox shows, the plus and minus a number\n// field's steppers show, the magnifier and cross a search field shows, and the\n// rest named beside each one. Private to the library, as on web: a call site\n// with icons of its own passes them to the slots that take a node, and reads\n// the slot's colour and size through `useIconStyle()`.\n//\n// The paths are kanso-ui's, unchanged: Material Symbols on their 24-unit grid,\n// which is what the checkbox page draws at 18dp, the icon buttons page at 20\n// and the search, menus, date picker and time picker pages at 24.\n\ntype GlyphProps = {\n  /** The fill. Defaults to the colour of the slot the glyph sits in. */\n  readonly color?: ColorValue\n  /** The square's side in dp. Defaults to the size of the slot. */\n  readonly size?: number\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\n// What a search view's back button draws, pointing at the page it returns to.\n// It says \"back\" rather than \"to the left\", so it mirrors under a right-to-left\n// layout.\nfunction ArrowBackGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props} mirrored>\n      <Path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\" />\n    </Glyph>\n  )\n}\n\n// Which way a sorted column is ordered. Up is ascending and down is\n// descending. Neither mirrors under a right-to-left layout: they say \"up\" and\n// \"down\" rather than \"onward\", and those do not flip.\nfunction ArrowDownwardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z\" />\n    </Glyph>\n  )\n}\n\n// What a menu button draws after its label, pointing at the list it opens.\n// Down is down in either writing direction, so it does not mirror.\nfunction ArrowDropDownGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M7 10l5 5 5-5z\" />\n    </Glyph>\n  )\n}\n\nfunction ArrowUpwardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n    </Glyph>\n  )\n}\n\n// What the date picker's trigger draws: the calendar a date is picked from.\nfunction CalendarGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z\" />\n    </Glyph>\n  )\n}\n\nfunction CheckGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n    </Glyph>\n  )\n}\n\n// Points down at the menu a split button's second half opens.\nfunction ChevronDownGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\" />\n    </Glyph>\n  )\n}\n\n// Points at the submenu a menu item opens. It says \"further in\" rather than\n// \"to the right\", so it mirrors under a right-to-left layout.\nfunction ChevronEndGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props} mirrored>\n      <Path d=\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n    </Glyph>\n  )\n}\n\n// What the time picker's trigger draws, and the button that takes its keyboard\n// entry back to the dial: the clock a time is picked from.\nfunction ClockGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n    </Glyph>\n  )\n}\n\nfunction CloseGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n    </Glyph>\n  )\n}\n\n/**\n * The svg every glyph draws: the 24-unit grid its path is on, a square of the\n * slot's size filled in the slot's colour, and nothing a screen reader\n * announces, since the control around a glyph carries the name. A glyph whose\n * direction means \"onward\" or \"back\" passes `mirrored`, which turns it over\n * under a right-to-left layout as `:dir(rtl)` does on web.\n */\nfunction Glyph({\n  children,\n  color,\n  mirrored = false,\n  size,\n  style,\n  testID,\n}: GlyphProps & { readonly children: ReactNode; readonly mirrored?: boolean }) {\n  const slot = useIconStyle()\n  const side = size ?? slot.size\n  return (\n    <Svg\n      {...HIDDEN}\n      color={color ?? slot.color}\n      fill=\"currentColor\"\n      height={side}\n      style={StyleSheet.compose(\n        mirrored && I18nManager.isRTL ? glyphStyles.mirrored : undefined,\n        style,\n      )}\n      testID={testID}\n      viewBox=\"0 0 24 24\"\n      width={side}\n    >\n      {children}\n    </Svg>\n  )\n}\n\n// What the time picker's dial draws on the button that switches it to typed\n// entry.\nfunction KeyboardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zm-9-9h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-3 0h2v2H5zm0-3h2v2H5zm3 6h8v2H8zm6-3h2v2h-2zm0-3h2v2h-2zm3 3h2v2h-2zm0-3h2v2h-2z\" />\n    </Glyph>\n  )\n}\n\n// The same rule stands for a partly selected checkbox and for a stepper's\n// decrement; the two names say which is meant at the call site.\nfunction MinusGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 13H5v-2h14v2z\" />\n    </Glyph>\n  )\n}\n\nconst IndeterminateGlyph = MinusGlyph\n\n// What an avatar with no name to take initials from draws: Material Design's\n// anonymous person, a head over shoulders.\nfunction PersonGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </Glyph>\n  )\n}\n\nfunction PlusGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n    </Glyph>\n  )\n}\n\nfunction SearchGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n    </Glyph>\n  )\n}\n\nexport {\n  ArrowBackGlyph,\n  ArrowDownwardGlyph,\n  ArrowDropDownGlyph,\n  ArrowUpwardGlyph,\n  CalendarGlyph,\n  CheckGlyph,\n  ChevronDownGlyph,\n  ChevronEndGlyph,\n  ClockGlyph,\n  CloseGlyph,\n  IndeterminateGlyph,\n  KeyboardGlyph,\n  MinusGlyph,\n  PersonGlyph,\n  PlusGlyph,\n  SearchGlyph,\n}\nexport type { GlyphProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ColorValue","StyleProp","ViewStyle","I18nManager","StyleSheet","Svg","Path","HIDDEN","useIconStyle","glyphStyles","GlyphProps","color","size","style","testID","ArrowBackGlyph","props","$","_c","t0","Symbol","for","t1","ArrowDownwardGlyph","ArrowDropDownGlyph","ArrowUpwardGlyph","CalendarGlyph","CheckGlyph","ChevronDownGlyph","ChevronEndGlyph","ClockGlyph","CloseGlyph","Glyph","children","mirrored","undefined","slot","side","t2","t3","compose","isRTL","t4","KeyboardGlyph","MinusGlyph","IndeterminateGlyph","PersonGlyph","PlusGlyph","SearchGlyph","_c"],"sources":["../../src/glyphs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { ColorValue, StyleProp, ViewStyle } from 'react-native'\n\nimport { I18nManager, StyleSheet } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\n\nimport { HIDDEN } from './hidden'\nimport { useIconStyle } from './icon-style'\nimport { glyphStyles } from './styles'\n\n// The glyphs the library's own controls draw, the same set kanso-ui draws on\n// web: the check and the dash a checkbox shows, the plus and minus a number\n// field's steppers show, the magnifier and cross a search field shows, and the\n// rest named beside each one. Private to the library, as on web: a call site\n// with icons of its own passes them to the slots that take a node, and reads\n// the slot's colour and size through `useIconStyle()`.\n//\n// The paths are kanso-ui's, unchanged: Material Symbols on their 24-unit grid,\n// which is what the checkbox page draws at 18dp, the icon buttons page at 20\n// and the search, menus, date picker and time picker pages at 24.\n\ntype GlyphProps = {\n  /** The fill. Defaults to the colour of the slot the glyph sits in. */\n  readonly color?: ColorValue\n  /** The square's side in dp. Defaults to the size of the slot. */\n  readonly size?: number\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\n// What a search view's back button draws, pointing at the page it returns to.\n// It says \"back\" rather than \"to the left\", so it mirrors under a right-to-left\n// layout.\nfunction ArrowBackGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props} mirrored>\n      <Path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\" />\n    </Glyph>\n  )\n}\n\n// Which way a sorted column is ordered. Up is ascending and down is\n// descending. Neither mirrors under a right-to-left layout: they say \"up\" and\n// \"down\" rather than \"onward\", and those do not flip.\nfunction ArrowDownwardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z\" />\n    </Glyph>\n  )\n}\n\n// What a menu button draws after its label, pointing at the list it opens.\n// Down is down in either writing direction, so it does not mirror.\nfunction ArrowDropDownGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M7 10l5 5 5-5z\" />\n    </Glyph>\n  )\n}\n\nfunction ArrowUpwardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n    </Glyph>\n  )\n}\n\n// What the date picker's trigger draws: the calendar a date is picked from.\nfunction CalendarGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z\" />\n    </Glyph>\n  )\n}\n\nfunction CheckGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n    </Glyph>\n  )\n}\n\n// Points down at the menu a split button's second half opens.\nfunction ChevronDownGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\" />\n    </Glyph>\n  )\n}\n\n// Points at the submenu a menu item opens. It says \"further in\" rather than\n// \"to the right\", so it mirrors under a right-to-left layout.\nfunction ChevronEndGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props} mirrored>\n      <Path d=\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n    </Glyph>\n  )\n}\n\n// What the time picker's trigger draws, and the button that takes its keyboard\n// entry back to the dial: the clock a time is picked from.\nfunction ClockGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n    </Glyph>\n  )\n}\n\nfunction CloseGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n    </Glyph>\n  )\n}\n\n/**\n * The svg every glyph draws: the 24-unit grid its path is on, a square of the\n * slot's size filled in the slot's colour, and nothing a screen reader\n * announces, since the control around a glyph carries the name. A glyph whose\n * direction means \"onward\" or \"back\" passes `mirrored`, which turns it over\n * under a right-to-left layout as `:dir(rtl)` does on web.\n */\nfunction Glyph({\n  children,\n  color,\n  mirrored = false,\n  size,\n  style,\n  testID,\n}: GlyphProps & { readonly children: ReactNode; readonly mirrored?: boolean }) {\n  const slot = useIconStyle()\n  const side = size ?? slot.size\n  return (\n    <Svg\n      {...HIDDEN}\n      color={color ?? slot.color}\n      fill=\"currentColor\"\n      height={side}\n      style={StyleSheet.compose(\n        mirrored && I18nManager.isRTL ? glyphStyles.mirrored : undefined,\n        style,\n      )}\n      testID={testID}\n      viewBox=\"0 0 24 24\"\n      width={side}\n    >\n      {children}\n    </Svg>\n  )\n}\n\n// What the time picker's dial draws on the button that switches it to typed\n// entry.\nfunction KeyboardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zm-9-9h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-3 0h2v2H5zm0-3h2v2H5zm3 6h8v2H8zm6-3h2v2h-2zm0-3h2v2h-2zm3 3h2v2h-2zm0-3h2v2h-2z\" />\n    </Glyph>\n  )\n}\n\n// The same rule stands for a partly selected checkbox and for a stepper's\n// decrement; the two names say which is meant at the call site.\nfunction MinusGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 13H5v-2h14v2z\" />\n    </Glyph>\n  )\n}\n\nconst IndeterminateGlyph = MinusGlyph\n\n// What an avatar with no name to take initials from draws: Material Design's\n// anonymous person, a head over shoulders.\nfunction PersonGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </Glyph>\n  )\n}\n\nfunction PlusGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n    </Glyph>\n  )\n}\n\nfunction SearchGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n    </Glyph>\n  )\n}\n\nexport {\n  ArrowBackGlyph,\n  ArrowDownwardGlyph,\n  ArrowDropDownGlyph,\n  ArrowUpwardGlyph,\n  CalendarGlyph,\n  CheckGlyph,\n  ChevronDownGlyph,\n  ChevronEndGlyph,\n  ClockGlyph,\n  CloseGlyph,\n  IndeterminateGlyph,\n  KeyboardGlyph,\n  MinusGlyph,\n  PersonGlyph,\n  PlusGlyph,\n  SearchGlyph,\n}\nexport type { GlyphProps }\n"],"mappings":"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"}

package/dist/hooks/useAppBarScroll.d.ts

@@ -0,0 +1,56 @@
+import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from "react-native";
+//#region src/hooks/useAppBarScroll.d.ts
+type AppBarScroll = {
+  /** For the bar's `collapsed`. */
+  readonly collapsed: boolean;
+  /**
+   * For the bar's `onLayout`. The bar's height is what tells the hook how
+   * much room collapsing gives back, so without it every screen counts as
+   * long enough to collapse on.
+   */
+  readonly onLayout: (event: LayoutChangeEvent) => void;
+  /** For the `onScroll` of the view that scrolls. */
+  readonly onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /** For the bar's `scrolled`. */
+  readonly scrolled: boolean;
+};
+type AppBarScrollOptions = {
+  /**
+   * How far the screen scrolls, in dp, before the bar collapses. It expands
+   * again once the screen is scrolled back to this offset or less.
+   * @default 0
+   */
+  readonly collapseAfter?: number;
+};
+/**
+ * Derives an `AppBar`'s `scrolled` and `collapsed` from the view its screen
+ * scrolls in. Pass `onLayout` to the bar and `onScroll` to that view, and
+ * hand the bar the two states.
+ *
+ * ```tsx
+ * const { collapsed, onLayout, onScroll, scrolled } = useAppBarScroll()
+ *
+ * <AppBar collapsed={collapsed} onLayout={onLayout} pinned scrolled={scrolled} size="lg" />
+ * <ScrollView onScroll={onScroll} scrollEventThrottle={16}>…</ScrollView>
+ * ```
+ *
+ * `onScroll` is a plain handler, so it fits any scroll view: a `ScrollView`,
+ * a `FlatList`, the library's `List`, and Reanimated's animated ones. Give
+ * the view a `scrollEventThrottle` of 16, so the event comes once a frame:
+ * React Native's default of 0 sends it once each time the view is scrolled.
+ *
+ * It collapses the bar only on a screen long enough to stay collapsed.
+ * Collapsing shortens the bar, which the scroll view below it grows into, so
+ * a screen that overflows by less than the height the bar gives back plus
+ * `collapseAfter` cannot scroll that far any more: the offset is pulled back
+ * inside the shorter content, below `collapseAfter`, the bar expands, and
+ * the two take turns on every scroll event. On such a screen the bar stays
+ * expanded, which is also all there is room for. The bar's height counts its
+ * safe-area inset as well, which collapsing keeps, so a screen that only
+ * just overflows by enough is taken to be too short, and the bar stays
+ * expanded there too.
+ */
+declare function useAppBarScroll({ collapseAfter }?: AppBarScrollOptions): AppBarScroll;
+//#endregion
+export { type AppBarScroll, type AppBarScrollOptions, useAppBarScroll };
+//# sourceMappingURL=useAppBarScroll.d.ts.map

package/dist/hooks/useAppBarScroll.js

@@ -0,0 +1,87 @@
+import { c } from "react/compiler-runtime";
+import { useRef, useState } from "react";
+/**
+* Derives an `AppBar`'s `scrolled` and `collapsed` from the view its screen
+* scrolls in. Pass `onLayout` to the bar and `onScroll` to that view, and
+* hand the bar the two states.
+*
+* ```tsx
+* const { collapsed, onLayout, onScroll, scrolled } = useAppBarScroll()
+*
+* <AppBar collapsed={collapsed} onLayout={onLayout} pinned scrolled={scrolled} size="lg" />
+* <ScrollView onScroll={onScroll} scrollEventThrottle={16}>…</ScrollView>
+* ```
+*
+* `onScroll` is a plain handler, so it fits any scroll view: a `ScrollView`,
+* a `FlatList`, the library's `List`, and Reanimated's animated ones. Give
+* the view a `scrollEventThrottle` of 16, so the event comes once a frame:
+* React Native's default of 0 sends it once each time the view is scrolled.
+*
+* It collapses the bar only on a screen long enough to stay collapsed.
+* Collapsing shortens the bar, which the scroll view below it grows into, so
+* a screen that overflows by less than the height the bar gives back plus
+* `collapseAfter` cannot scroll that far any more: the offset is pulled back
+* inside the shorter content, below `collapseAfter`, the bar expands, and
+* the two take turns on every scroll event. On such a screen the bar stays
+* expanded, which is also all there is room for. The bar's height counts its
+* safe-area inset as well, which collapsing keeps, so a screen that only
+* just overflows by enough is taken to be too short, and the bar stays
+* expanded there too.
+*/
+function useAppBarScroll(t0) {
+	const $ = c(10);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { collapseAfter: t2 } = t1;
+	const collapseAfter = t2 === void 0 ? 0 : t2;
+	const height = useRef(64);
+	const [collapsed, setCollapsed] = useState(false);
+	const [scrolled, setScrolled] = useState(false);
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (event) => {
+			height.current = event.nativeEvent.layout.height;
+		};
+		$[2] = t3;
+	} else t3 = $[2];
+	const onLayout = t3;
+	let t4;
+	if ($[3] !== collapseAfter || $[4] !== collapsed) {
+		t4 = (event_0) => {
+			const { contentOffset, contentSize, layoutMeasurement } = event_0.nativeEvent;
+			const offset = contentOffset.y;
+			setScrolled(offset > 0);
+			if (offset <= collapseAfter) setCollapsed(false);
+			else if (!collapsed) {
+				const givesBack = Math.max(0, height.current - 64);
+				setCollapsed(contentSize.height - layoutMeasurement.height - givesBack > collapseAfter);
+			}
+		};
+		$[3] = collapseAfter;
+		$[4] = collapsed;
+		$[5] = t4;
+	} else t4 = $[5];
+	const onScroll = t4;
+	let t5;
+	if ($[6] !== collapsed || $[7] !== onScroll || $[8] !== scrolled) {
+		t5 = {
+			collapsed,
+			onLayout,
+			onScroll,
+			scrolled
+		};
+		$[6] = collapsed;
+		$[7] = onScroll;
+		$[8] = scrolled;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+//#endregion
+export { useAppBarScroll };
+
+//# sourceMappingURL=useAppBarScroll.js.map

package/dist/hooks/useAppBarScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppBarScroll.js","names":["LayoutChangeEvent","NativeScrollEvent","NativeSyntheticEvent","useRef","useState","COLLAPSED_BLOCK_SIZE","AppBarScroll","collapsed","onLayout","event","onScroll","scrolled","AppBarScrollOptions","collapseAfter","useAppBarScroll","t0","$","_c","t1","undefined","t2","height","setCollapsed","setScrolled","t3","Symbol","for","current","nativeEvent","layout","t4","event_0","contentOffset","contentSize","layoutMeasurement","offset","y","givesBack","Math","max","t5","_c"],"sources":["../../src/hooks/useAppBarScroll.ts"],"sourcesContent":["import type {\n  LayoutChangeEvent,\n  NativeScrollEvent,\n  NativeSyntheticEvent,\n} from 'react-native'\n\nimport { useRef, useState } from 'react'\n\n/**\n * The small bar's height in dp, which is what a flexible bar collapses to.\n * AppBar draws its small height from this, so the hook's arithmetic and the\n * bar it measures cannot disagree.\n */\nconst COLLAPSED_BLOCK_SIZE = 64\n\ntype AppBarScroll = {\n  /** For the bar's `collapsed`. */\n  readonly collapsed: boolean\n  /**\n   * For the bar's `onLayout`. The bar's height is what tells the hook how\n   * much room collapsing gives back, so without it every screen counts as\n   * long enough to collapse on.\n   */\n  readonly onLayout: (event: LayoutChangeEvent) => void\n  /** For the `onScroll` of the view that scrolls. */\n  readonly onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void\n  /** For the bar's `scrolled`. */\n  readonly scrolled: boolean\n}\n\ntype AppBarScrollOptions = {\n  /**\n   * How far the screen scrolls, in dp, before the bar collapses. It expands\n   * again once the screen is scrolled back to this offset or less.\n   * @default 0\n   */\n  readonly collapseAfter?: number\n}\n\n/**\n * Derives an `AppBar`'s `scrolled` and `collapsed` from the view its screen\n * scrolls in. Pass `onLayout` to the bar and `onScroll` to that view, and\n * hand the bar the two states.\n *\n * ```tsx\n * const { collapsed, onLayout, onScroll, scrolled } = useAppBarScroll()\n *\n * <AppBar collapsed={collapsed} onLayout={onLayout} pinned scrolled={scrolled} size=\"lg\" />\n * <ScrollView onScroll={onScroll} scrollEventThrottle={16}>…</ScrollView>\n * ```\n *\n * `onScroll` is a plain handler, so it fits any scroll view: a `ScrollView`,\n * a `FlatList`, the library's `List`, and Reanimated's animated ones. Give\n * the view a `scrollEventThrottle` of 16, so the event comes once a frame:\n * React Native's default of 0 sends it once each time the view is scrolled.\n *\n * It collapses the bar only on a screen long enough to stay collapsed.\n * Collapsing shortens the bar, which the scroll view below it grows into, so\n * a screen that overflows by less than the height the bar gives back plus\n * `collapseAfter` cannot scroll that far any more: the offset is pulled back\n * inside the shorter content, below `collapseAfter`, the bar expands, and\n * the two take turns on every scroll event. On such a screen the bar stays\n * expanded, which is also all there is room for. The bar's height counts its\n * safe-area inset as well, which collapsing keeps, so a screen that only\n * just overflows by enough is taken to be too short, and the bar stays\n * expanded there too.\n */\nfunction useAppBarScroll({\n  collapseAfter = 0,\n}: AppBarScrollOptions = {}): AppBarScroll {\n  const height = useRef(COLLAPSED_BLOCK_SIZE)\n  const [collapsed, setCollapsed] = useState(false)\n  const [scrolled, setScrolled] = useState(false)\n\n  const onLayout = (event: LayoutChangeEvent) => {\n    height.current = event.nativeEvent.layout.height\n  }\n\n  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent\n    const offset = contentOffset.y\n\n    setScrolled(offset > 0)\n    if (offset <= collapseAfter) {\n      setCollapsed(false)\n    } else if (!collapsed) {\n      const givesBack = Math.max(0, height.current - COLLAPSED_BLOCK_SIZE)\n      setCollapsed(\n        contentSize.height - layoutMeasurement.height - givesBack >\n          collapseAfter,\n      )\n    }\n  }\n\n  return { collapsed, onLayout, onScroll, scrolled }\n}\n\nexport { COLLAPSED_BLOCK_SIZE, useAppBarScroll }\nexport type { AppBarScroll, AppBarScrollOptions }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,SAAAc,gBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,IAAA;EAAyBG,KAAAH,OAAAI,KAAAA,IAAA,CAEC,IAFDJ;EAEEC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAFF,MAAA,EAAAH,eAAAO,OAAAF;CACvB,MAAAL,gBAAAO,OAAAD,KAAAA,IAAA,IAAAC;CAEA,MAAAC,SAAelB,OAAAA,EAA2B;CAC1C,MAAA,CAAAI,WAAAe,gBAAkClB,SAAS,KAAK;CAChD,MAAA,CAAAO,UAAAY,eAAgCnB,SAAS,KAAK;CAAC,IAAAoB;CAAA,IAAAR,EAAA,OAAAS,OAAAC,IAAA,2BAAA,GAAA;EAE9BF,MAAAf,UAAA;GACfY,OAAMM,UAAWlB,MAAKmB,YAAYC,OAAOR;EAA3B;EACfL,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAFD,MAAAR,WAAiBgB;CAEhB,IAAAM;CAAA,IAAAd,EAAA,OAAAH,iBAAAG,EAAA,OAAAT,WAAA;EAEgBuB,MAAAC,YAAA;GACf,MAAA,EAAAC,eAAAC,aAAAC,sBAA0DzB,QAAKmB;GAC/D,MAAAO,SAAeH,cAAaI;GAE5Bb,YAAYY,SAAS,CAAC;GACtB,IAAIA,UAAUtB,eACZS,aAAa,KAAK;QACb,IAAI,CAACf,WAAS;IACnB,MAAA8B,YAAkBC,KAAIC,IAAK,GAAGlB,OAAMM,UAAAA,EAA+B;IACnEL,aACEW,YAAWZ,SAAUa,kBAAiBb,SAAUgB,YAC9CxB,aACJ;GAAC;EACF;EACFG,EAAA,KAAAH;EAAAG,EAAA,KAAAT;EAAAS,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAdD,MAAAN,WAAiBoB;CAchB,IAAAU;CAAA,IAAAxB,EAAA,OAAAT,aAAAS,EAAA,OAAAN,YAAAM,EAAA,OAAAL,UAAA;EAEM6B,KAAA;GAAAjC;GAAAC;GAAAE;GAAAC;EAA0C;EAACK,EAAA,KAAAT;EAAAS,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,OAA3CwB;AAA2C"}

package/dist/i18n/index.js

@@ -17,7 +17,22 @@ function messagesFor(locale) {
 	cache.set(resolved, messages);
 	return messages;
 }
+function pluralOf(locale, count) {
+	if (Intl.PluralRules === void 0) return count === 1 ? "one" : "other";
+	return new Intl.PluralRules(locale).select(count);
+}
+/**
+* How many rows a search leaves, in `locale` or the device's, for a screen
+* reader: the count in the locale's plural form, or the empty row's words
+* when it is none.
+*/
+function resultsFor(count, locale) {
+	const resolved = localeOf(locale);
+	const messages = messagesFor(resolved);
+	if (count === 0) return messages.noResults;
+	return (pluralOf(resolved, count) === "one" ? messages.results.one : messages.results.other).replace("{count}", new Intl.NumberFormat(resolved).format(count));
+}
 //#endregion
-export { messagesFor };
+export { messagesFor, resultsFor };
 
 //# sourceMappingURL=index.js.map

package/dist/i18n/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LibraryMessages","localeOf","MESSAGES","TABLE","Map","Object","entries","cache","lookUp","locale","tag","split","language","get","find","key","startsWith","messagesFor","resolved","cached","undefined","messages","set"],"sources":["../../src/i18n/index.ts"],"sourcesContent":["import type { LibraryMessages } from './messages'\n\nimport { localeOf } from '../number/locale'\nimport { MESSAGES } from './messages'\n\n// The words the library writes itself, in the locale a component is given or\n// the device's. Web reads them through React Aria's dictionary, in the\n// I18nProvider's locale, and this falls back the way that dictionary does: the\n// table's entry for the locale, then the first for its language, then English,\n// so `fr-CA` reads French and a locale the table lacks reads English.\n\nconst TABLE = new Map(Object.entries(MESSAGES))\n\n// One set per locale an app renders in, looked up the first time a component\n// asks for it.\nconst cache = new Map<string, LibraryMessages>()\n\n// A device's locale can carry a Unicode extension, `pt-PT-u-nu-latn`, which\n// says how numbers are written rather than which words; it is set aside, or\n// `pt-PT` would match no entry and read the first Portuguese one, Brazil's.\nfunction lookUp(locale: string): LibraryMessages {\n  const tag = locale.split('-u-')[0]\n  const language = tag.split('-')[0]\n\n  return (\n    TABLE.get(tag) ??\n    [...TABLE].find(([key]) => key.startsWith(`${language}-`))?.[1] ??\n    MESSAGES['en-US']\n  )\n}\n\n/** The library's words in `locale`, or in the device's when given none. */\nfunction messagesFor(locale?: string): LibraryMessages {\n  const resolved = localeOf(locale)\n  const cached = cache.get(resolved)\n\n  if (cached !== undefined) {\n    return cached\n  }\n\n  const messages = lookUp(resolved)\n  cache.set(resolved, messages)\n  return messages\n}\n\nexport { messagesFor }\nexport type { LibraryMessages }\n"],"mappings":";;;AAWA,MAAMG,QAAQ,IAAIC,IAAIC,OAAOC,QAAQJ,QAAQ,CAAC;AAI9C,MAAMK,wBAAQ,IAAIH,IAA6B;AAK/C,SAASI,OAAOC,QAAiC;CAC/C,MAAMC,MAAMD,OAAOE,MAAM,KAAK,CAAC,CAAC;CAChC,MAAMC,WAAWF,IAAIC,MAAM,GAAG,CAAC,CAAC;CAEhC,OACER,MAAMU,IAAIH,GAAG,KACb,CAAC,GAAGP,KAAK,CAAC,CAACW,MAAM,CAACC,SAASA,IAAIC,WAAW,GAAGJ,SAAQ,EAAG,CAAC,CAAC,GAAG,MAC7DV,SAAS;AAEb;;AAGA,SAASe,YAAYR,QAAkC;CACrD,MAAMS,WAAWjB,SAASQ,MAAM;CAChC,MAAMU,SAASZ,MAAMM,IAAIK,QAAQ;CAEjC,IAAIC,WAAWC,KAAAA,GACb,OAAOD;CAGT,MAAME,WAAWb,OAAOU,QAAQ;CAChCX,MAAMe,IAAIJ,UAAUG,QAAQ;CAC5B,OAAOA;AACT"}
+{"version":3,"file":"index.js","names":["LibraryMessages","localeOf","MESSAGES","TABLE","Map","Object","entries","cache","lookUp","locale","tag","split","language","get","find","key","startsWith","messagesFor","resolved","cached","undefined","messages","set","pluralOf","count","Intl","PluralRules","select","resultsFor","noResults","form","results","one","other","replace","NumberFormat","format"],"sources":["../../src/i18n/index.ts"],"sourcesContent":["import type { LibraryMessages } from './messages'\n\nimport { localeOf } from '../number/locale'\nimport { MESSAGES } from './messages'\n\n// The words the library writes itself, in the locale a component is given or\n// the device's. Web reads them through React Aria's dictionary, in the\n// I18nProvider's locale, and this falls back the way that dictionary does: the\n// table's entry for the locale, then the first for its language, then English,\n// so `fr-CA` reads French and a locale the table lacks reads English.\n\nconst TABLE = new Map(Object.entries(MESSAGES))\n\n// One set per locale an app renders in, looked up the first time a component\n// asks for it.\nconst cache = new Map<string, LibraryMessages>()\n\n// A device's locale can carry a Unicode extension, `pt-PT-u-nu-latn`, which\n// says how numbers are written rather than which words; it is set aside, or\n// `pt-PT` would match no entry and read the first Portuguese one, Brazil's.\nfunction lookUp(locale: string): LibraryMessages {\n  const tag = locale.split('-u-')[0]\n  const language = tag.split('-')[0]\n\n  return (\n    TABLE.get(tag) ??\n    [...TABLE].find(([key]) => key.startsWith(`${language}-`))?.[1] ??\n    MESSAGES['en-US']\n  )\n}\n\n/** The library's words in `locale`, or in the device's when given none. */\nfunction messagesFor(locale?: string): LibraryMessages {\n  const resolved = localeOf(locale)\n  const cached = cache.get(resolved)\n\n  if (cached !== undefined) {\n    return cached\n  }\n\n  const messages = lookUp(resolved)\n  cache.set(resolved, messages)\n  return messages\n}\n\n// The plural form a count takes in `locale`. Hermes has not always shipped\n// `Intl.PluralRules`, and where it is missing a count of one takes the\n// singular and any other the plural, which is English's rule.\nfunction pluralOf(locale: string, count: number) {\n  // oxlint-disable-next-line typescript/no-unnecessary-condition -- typed as always there, which a runtime without it is not\n  if (Intl.PluralRules === undefined) {\n    return count === 1 ? 'one' : 'other'\n  }\n\n  return new Intl.PluralRules(locale).select(count)\n}\n\n/**\n * How many rows a search leaves, in `locale` or the device's, for a screen\n * reader: the count in the locale's plural form, or the empty row's words\n * when it is none.\n */\nfunction resultsFor(count: number, locale?: string): string {\n  const resolved = localeOf(locale)\n  const messages = messagesFor(resolved)\n\n  if (count === 0) {\n    return messages.noResults\n  }\n\n  const form =\n    pluralOf(resolved, count) === 'one'\n      ? messages.results.one\n      : messages.results.other\n\n  return form.replace('{count}', new Intl.NumberFormat(resolved).format(count))\n}\n\nexport { messagesFor, resultsFor }\nexport type { LibraryMessages }\n"],"mappings":";;;AAWA,MAAMG,QAAQ,IAAIC,IAAIC,OAAOC,QAAQJ,QAAQ,CAAC;AAI9C,MAAMK,wBAAQ,IAAIH,IAA6B;AAK/C,SAASI,OAAOC,QAAiC;CAC/C,MAAMC,MAAMD,OAAOE,MAAM,KAAK,CAAC,CAAC;CAChC,MAAMC,WAAWF,IAAIC,MAAM,GAAG,CAAC,CAAC;CAEhC,OACER,MAAMU,IAAIH,GAAG,KACb,CAAC,GAAGP,KAAK,CAAC,CAACW,MAAM,CAACC,SAASA,IAAIC,WAAW,GAAGJ,SAAQ,EAAG,CAAC,CAAC,GAAG,MAC7DV,SAAS;AAEb;;AAGA,SAASe,YAAYR,QAAkC;CACrD,MAAMS,WAAWjB,SAASQ,MAAM;CAChC,MAAMU,SAASZ,MAAMM,IAAIK,QAAQ;CAEjC,IAAIC,WAAWC,KAAAA,GACb,OAAOD;CAGT,MAAME,WAAWb,OAAOU,QAAQ;CAChCX,MAAMe,IAAIJ,UAAUG,QAAQ;CAC5B,OAAOA;AACT;AAKA,SAASE,SAASd,QAAgBe,OAAe;CAE/C,IAAIC,KAAKC,gBAAgBN,KAAAA,GACvB,OAAOI,UAAU,IAAI,QAAQ;CAG/B,OAAO,IAAIC,KAAKC,YAAYjB,MAAM,CAAC,CAACkB,OAAOH,KAAK;AAClD;;;;;;AAOA,SAASI,WAAWJ,OAAef,QAAyB;CAC1D,MAAMS,WAAWjB,SAASQ,MAAM;CAChC,MAAMY,WAAWJ,YAAYC,QAAQ;CAErC,IAAIM,UAAU,GACZ,OAAOH,SAASQ;CAQlB,QAJEN,SAASL,UAAUM,KAAK,MAAM,QAC1BH,SAASU,QAAQC,MACjBX,SAASU,QAAQE,MAAAA,CAEXC,QAAQ,WAAW,IAAIT,KAAKU,aAAajB,QAAQ,CAAC,CAACkB,OAAOZ,KAAK,CAAC;AAC9E"}