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

package/dist/components/radio-group/index.js

@@ -1,15 +1,15 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { useTypeRole } from "../../typography/roles.js";
 import { withOpacity } from "../../theme/color.js";
-import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { controlStylesOf } from "../../control/styles.js";
 import { ControlLabel, ControlMessage, describedBy, messageOf } from "../../control/index.js";
 import { c } from "react/compiler-runtime";
-import { createContext, use, useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, withTiming } from "react-native-reanimated";
+import { createContext, use, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRadioGroupState } from "react-stately/useRadioGroupState";
 //#region src/components/radio-group/index.tsx
 const RING_SIZE = 20;

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

@@ -1,6 +1,6 @@
 import { ValidationResult } from "../../form/index.js";
-import { ComponentRef, Ref } from "react";
 import { StyleProp, TextInput, TextInputProps, View, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/search-field/index.d.ts
 type SearchFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'aria-disabled' | 'aria-label' | 'children' | 'cursorColor' | 'defaultValue' | 'editable' | 'multiline' | 'numberOfLines' | 'onChange' | 'onChangeText' | 'placeholderTextColor' | 'readOnly' | 'returnKeyType' | 'role' | 'selectionColor' | 'style' | 'underlineColorAndroid' | 'value'> & {
   /**

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

@@ -1,17 +1,17 @@
-import { AutocompleteContext } from "../../autocomplete/index.js";
 import { IconStyleContext } from "../../glyphs/icon-style.js";
-import { CloseGlyph, SearchGlyph } from "../../glyphs/index.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
-import { useFieldValidation } from "../../form/index.js";
-import { withOpacity } from "../../theme/color.js";
 import { usePressFeedback } from "../../press/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { AutocompleteContext } from "../../autocomplete/index.js";
+import { CloseGlyph, SearchGlyph } from "../../glyphs/index.js";
+import { useFieldValidation } from "../../form/index.js";
 import { IconButton } from "../icon-button/index.js";
 import { FieldInput, FieldMessage, FieldStates, FieldStroke, describedBy, useFieldFocus, useStrokeMotion } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
+import { Pressable, StyleSheet, View, useWindowDimensions } from "react-native";
 import { use, useId, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Pressable, StyleSheet, View, useWindowDimensions } from "react-native";
 //#region src/components/search-field/index.tsx
 const ICON_SIZE = 24;
 const MAX_WIDTH = 720;

package/dist/components/segmented-button/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentRef, ReactNode, Ref } from "react";
 import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 import { Key } from "react-stately";
 //#region src/components/segmented-button/index.d.ts
 /** A name for the set: its own label, or the id of what labels it. */

package/dist/components/segmented-button/index.js

@@ -1,16 +1,16 @@
 import { IconStyleContext } from "../../glyphs/icon-style.js";
-import { CheckGlyph } from "../../glyphs/index.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { useTypeRole } from "../../typography/roles.js";
-import { toggleState } from "../../button/index.js";
 import { withOpacity } from "../../theme/color.js";
-import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { CheckGlyph } from "../../glyphs/index.js";
+import { toggleState } from "../../button/index.js";
 import { c } from "react/compiler-runtime";
-import { Children, Fragment, createContext, isValidElement, use, useLayoutEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { Children, Fragment, createContext, isValidElement, use, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useToggleGroupState } from "react-stately/useToggleGroupState";
 //#region src/components/segmented-button/index.tsx
 const GLYPH_SIZE = 18;

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

@@ -1,5 +1,5 @@
-import { ComponentRef, Ref } from "react";
 import { View, ViewProps } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/separator/index.d.ts
 type SeparatorInset = 'both' | 'none' | 'start';
 type SeparatorProps = ViewProps & {

package/dist/components/separator/index.js

@@ -1,8 +1,8 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/separator/index.tsx
 const styles = StyleSheet.create({
 	horizontal: {

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

@@ -1,6 +1,6 @@
 import { ModalOpenProps } from "../../modal/index.js";
-import { ComponentRef, ReactNode, Ref } from "react";
 import { HostInstance, ScrollView, ScrollViewProps, StyleProp, TextProps, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/sheet/index.d.ts
 type SheetBodyProps = ScrollViewProps & {
   readonly ref?: Ref<ComponentRef<typeof ScrollView>>;

package/dist/components/sheet/index.js

@@ -1,18 +1,18 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
 import { useTypeRole } from "../../typography/roles.js";
 import { refsOf } from "../../ref/index.js";
 import { ButtonSlotContext } from "../../button/slots.js";
 import { messagesFor } from "../../i18n/index.js";
-import { usePressFeedback } from "../../press/index.js";
 import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
 import { ModalWindow, NO_INSETS, insetsOf, panelRoleOf, useModalState, useModalTrigger } from "../../modal/index.js";
 import { c } from "react/compiler-runtime";
-import { createContext, use, useEffect, useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { I18nManager, Pressable, ScrollView, StyleSheet, Text, View, useWindowDimensions } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { createContext, use, useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
 //#region src/components/sheet/index.tsx
 const SIDE_WIDTH = 400;

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

@@ -1,5 +1,5 @@
-import { ComponentRef, Ref } from "react";
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/snackbar/index.d.ts
 type ShownMessage = {
   readonly action: SnackbarAction | undefined;

package/dist/components/snackbar/index.js

@@ -1,16 +1,16 @@
-import { CloseGlyph } from "../../glyphs/index.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
-import { useTypeRole } from "../../typography/roles.js";
 import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { CloseGlyph } from "../../glyphs/index.js";
 import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
 import { Overlay } from "../../overlay/host.js";
 import { c } from "react/compiler-runtime";
-import { use, useEffect, useRef, useState, useSyncExternalStore } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { AccessibilityInfo, Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { use, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/snackbar/index.tsx
 const MESSAGE_MS = 5e3;
 const UNTIL_CLOSED = 0;

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

@@ -1,5 +1,5 @@
-import { ComponentRef, Ref } from "react";
 import { View, ViewProps } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/stack/index.d.ts
 type StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';
 type StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';

package/dist/components/stack/index.js

@@ -1,8 +1,8 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/stack/index.tsx
 const alignments = StyleSheet.create({
 	baseline: { alignItems: "baseline" },

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

@@ -1,5 +1,5 @@
-import { ComponentRef, ReactNode, Ref } from "react";
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/switch/index.d.ts
 type SwitchProps = Omit<ViewProps, 'children' | 'style'> & {
   /**

package/dist/components/switch/index.js

@@ -1,15 +1,15 @@
-import { CheckGlyph } from "../../glyphs/index.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
-import { withOpacity } from "../../theme/color.js";
 import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { CheckGlyph } from "../../glyphs/index.js";
 import { controlStylesOf } from "../../control/styles.js";
 import { ControlLabel, ControlMessage, describedBy, messageOf } from "../../control/index.js";
 import { c } from "react/compiler-runtime";
-import { useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { I18nManager, Platform, Pressable, StyleSheet, View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useToggleState } from "react-stately/useToggleState";
 import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
 //#region src/components/switch/index.tsx

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

@@ -1,6 +1,6 @@
 import { TypeRole } from "../../typography/roles.js";
-import { ComponentRef, Ref } from "react";
 import { Text, TextProps } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/text/index.d.ts
 type TextProps$1 = TextProps & {
   readonly ref?: Ref<ComponentRef<typeof Text>>;

package/dist/components/text/index.js

@@ -2,8 +2,8 @@ import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { useTypeRole } from "../../typography/roles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { StyleSheet, Text } from "react-native";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/text/index.tsx
 const stylesOf = themedStyles(({ colors }) => StyleSheet.create({
 	error: { color: colors.error },

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

@@ -1,7 +1,7 @@
 import { ValidationResult } from "../../form/index.js";
 import { FieldVariant } from "../../field/index.js";
-import { ComponentRef, ReactNode, Ref } from "react";
 import { StyleProp, TextInput, TextInputProps, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/text-field/index.d.ts
 type TextFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'aria-disabled' | 'aria-label' | 'children' | 'cursorColor' | 'defaultValue' | 'editable' | 'multiline' | 'numberOfLines' | 'onChange' | 'onChangeText' | 'placeholder' | 'placeholderTextColor' | 'readOnly' | 'selectionColor' | 'style' | 'underlineColorAndroid' | 'value'> & {
   /**

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

@@ -1,9 +1,9 @@
 import { useFieldValidation } from "../../form/index.js";
 import { FieldBox, FieldInput, FieldMessage, describedBy, useFieldFocus } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
+import { View } from "react-native";
 import { useId, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { View } from "react-native";
 //#region src/components/text-field/index.tsx
 function blurThen(onBlur, then) {
 	return (event) => {

package/dist/control/checkbox-box.js

@@ -1,11 +1,11 @@
-import { CheckGlyph, IndeterminateGlyph } from "../glyphs/index.js";
 import { useTheme } from "../theme/scope.js";
 import { composeStyles } from "../theme/styles.js";
 import { withOpacity } from "../theme/color.js";
+import { CheckGlyph, IndeterminateGlyph } from "../glyphs/index.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { StyleSheet } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, withTiming } from "react-native-reanimated";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/control/checkbox-box.tsx
 const BOX_SIZE = 18;
 const styles = StyleSheet.create({ box: {

package/dist/control/index.js

@@ -3,8 +3,8 @@ import { composeStyles } from "../theme/styles.js";
 import { useTypeRole } from "../typography/roles.js";
 import { controlStylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { Platform, Text, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
 //#region src/control/index.tsx
 const HIDDEN = {
 	accessibilityElementsHidden: true,

package/dist/field/index.d.ts

@@ -1,6 +1,6 @@
-import { ComponentRef, ReactNode, Ref, RefObject } from "react";
 import { StyleProp, TextInput, TextInputProps, ViewStyle } from "react-native";
 import "react-native-reanimated";
+import { ComponentRef, ReactNode, Ref, RefObject } from "react";
 //#region src/field/index.d.ts
 /**
  * The filled box, or the outlined one: no fill, an outline that thickens and

package/dist/field/index.js

@@ -1,17 +1,17 @@
 import { IconStyleContext } from "../glyphs/icon-style.js";
 import { useTheme } from "../theme/scope.js";
 import { composeStyles } from "../theme/styles.js";
+import { usePressFeedback } from "../press/index.js";
 import { useFontFamily } from "../typography/fonts.js";
 import { useTypeRole } from "../typography/roles.js";
-import { useInsideForm } from "../form/index.js";
 import { withOpacity } from "../theme/color.js";
-import { usePressFeedback } from "../press/index.js";
+import { useInsideForm } from "../form/index.js";
 import { fieldStylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { createContext, use, useEffect, useId, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AccessibilityInfo, Platform, Pressable, Text, TextInput, View, useWindowDimensions } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useDerivedValue, useReducedMotion, withTiming } from "react-native-reanimated";
+import { createContext, use, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/field/index.tsx
 const ICON_SIZE = 24;
 const OUTSIDE_BOX = {

package/dist/form/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentRef, RefObject } from "react";
 import { TextInput } from "react-native";
+import { ComponentRef, RefObject } from "react";
 //#region src/form/index.d.ts
 /**
  * `aria` shows a field's error as soon as the field says so, and lets the

package/dist/glyphs/index.js

@@ -1,9 +1,9 @@
-import { HIDDEN } from "./hidden.js";
 import { useIconStyle } from "./icon-style.js";
+import { HIDDEN } from "./hidden.js";
 import { glyphStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { I18nManager, StyleSheet } from "react-native";
+import { jsx } from "react/jsx-runtime";
 import Svg, { Path } from "react-native-svg";
 //#region src/glyphs/index.tsx
 function CheckGlyph(props) {

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/index.d.ts

@@ -1,3 +1,4 @@
+import { AppBar, AppBarProps } from "./components/app-bar/index.js";
 import { Autocomplete, AutocompleteFilter, AutocompleteProps } from "./components/autocomplete/index.js";
 import { Avatar, AvatarProps } from "./components/avatar/index.js";
 import { Button, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from "./components/button/index.js";
@@ -12,9 +13,13 @@ import { Form, FormHandle, FormProps } from "./components/form/index.js";
 import { IconButton, IconButtonProps, IconButtonSize, IconButtonVariant } from "./components/icon-button/index.js";
 import { Link, LinkProps, LinkTone, LinkUnderline } from "./components/link/index.js";
 import { List, ListLoadMore, ListLoadMoreProps, ListProps, ListRow, ListRowProps, ListSection, ListSectionProps } from "./components/list/index.js";
+import { ListDetail, ListDetailProps } from "./components/list-detail/index.js";
 import { ListItem, ListItemProps } from "./components/list-item/index.js";
 import { Menu, MenuAlign, MenuContent, MenuContentProps, MenuItem, MenuItemProps, MenuLoadMore, MenuLoadMoreProps, MenuProps, MenuSection, MenuSectionProps, MenuSeparator, MenuSeparatorProps, MenuSide, MenuSubmenu, MenuSubmenuProps, MenuTrigger } from "./components/menu/index.js";
 import { Meter, MeterProps, MeterTone } from "./components/meter/index.js";
+import { KuiTheme } from "./tokens/defaults.js";
+import { ResolvedTheme, useTheme } from "./theme/scope.js";
+import { NavigationBar, NavigationBarItem, NavigationBarItemProps, NavigationBarProps, NavigationTabBar, NavigationTabBarProps } from "./components/navigation-bar/index.js";
 import { FieldVariant } from "./field/index.js";
 import { NumberField, NumberFieldProps } from "./components/number-field/index.js";
 import { Popover, PopoverAlign, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitle, PopoverTitleProps, PopoverTrigger } from "./components/popover/index.js";
@@ -32,10 +37,9 @@ import { TypeRole } from "./typography/roles.js";
 import { Text, TextProps } from "./components/text/index.js";
 import { TextField, TextFieldProps } from "./components/text-field/index.js";
 import { IconStyle, useIconStyle } from "./glyphs/icon-style.js";
-import { KuiTheme } from "./tokens/defaults.js";
+import { AppBarScroll, AppBarScrollOptions, useAppBarScroll } from "./hooks/useAppBarScroll.js";
 import { WindowSizeClass, useWindowSizeClass } from "./hooks/useWindowSizeClass.js";
 import { RouterProvider, RouterProviderProps } from "./router/index.js";
 import { ThemeScope, ThemeScopeProps } from "./theme-scope.js";
-import { ResolvedTheme, useTheme } from "./theme/scope.js";
 import { Key, Selection } from "react-stately";
-export { Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, Dialog, DialogBody, type DialogBodyProps, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogPartProps, type DialogProps, DialogTitle, type DialogTitleProps, type FieldVariant, Form, type FormHandle, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconStyle, type Key, type KuiTheme, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListItem, type ListItemProps, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, type MenuTrigger, Meter, type MeterProps, type MeterTone, NumberField, type NumberFieldProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, PopoverTitle, type PopoverTitleProps, type PopoverTrigger, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, type ResolvedTheme, RouterProvider, type RouterProviderProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, type Selection, Separator, type SeparatorInset, type SeparatorProps, Sheet, SheetBody, type SheetBodyProps, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, type SheetHandleProps, SheetHeader, type SheetPartProps, type SheetProps, SheetTitle, type SheetTitleProps, Snackbar, type SnackbarAction, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextField, type TextFieldProps, type TextProps, ThemeScope, type ThemeScopeProps, type TypeRole, type WindowSizeClass, useIconStyle, useTheme, useWindowSizeClass };
+export { AppBar, type AppBarProps, type AppBarScroll, type AppBarScrollOptions, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, Dialog, DialogBody, type DialogBodyProps, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogPartProps, type DialogProps, DialogTitle, type DialogTitleProps, type FieldVariant, Form, type FormHandle, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconStyle, type Key, type KuiTheme, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, type MenuTrigger, Meter, type MeterProps, type MeterTone, NavigationBar, NavigationBarItem, type NavigationBarItemProps, type NavigationBarProps, NavigationTabBar, type NavigationTabBarProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, PopoverTitle, type PopoverTitleProps, type PopoverTrigger, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, type ResolvedTheme, RouterProvider, type RouterProviderProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, type Selection, Separator, type SeparatorInset, type SeparatorProps, Sheet, SheetBody, type SheetBodyProps, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, type SheetHandleProps, SheetHeader, type SheetPartProps, type SheetProps, SheetTitle, type SheetTitleProps, Snackbar, type SnackbarAction, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextField, type TextFieldProps, type TextProps, ThemeScope, type ThemeScopeProps, type TypeRole, type WindowSizeClass, useAppBarScroll, useIconStyle, useTheme, useWindowSizeClass };

package/dist/index.js

@@ -1,9 +1,11 @@
-import { Autocomplete } from "./components/autocomplete/index.js";
 import { useIconStyle } from "./glyphs/icon-style.js";
+import { useAppBarScroll } from "./hooks/useAppBarScroll.js";
 import { useTheme } from "./theme/scope.js";
+import { Text } from "./components/text/index.js";
+import { AppBar } from "./components/app-bar/index.js";
+import { Autocomplete } from "./components/autocomplete/index.js";
 import { Avatar } from "./components/avatar/index.js";
 import { RouterProvider } from "./router/index.js";
-import { Text } from "./components/text/index.js";
 import { ProgressIndicator } from "./components/progress-indicator/index.js";
 import { Button } from "./components/button/index.js";
 import { Card } from "./components/card/index.js";
@@ -18,10 +20,12 @@ import { Form } from "./components/form/index.js";
 import { IconButton } from "./components/icon-button/index.js";
 import { Link } from "./components/link/index.js";
 import { List, ListLoadMore, ListRow, ListSection } from "./components/list/index.js";
+import { ListDetail } from "./components/list-detail/index.js";
 import { ListItem } from "./components/list-item/index.js";
 import { Separator } from "./components/separator/index.js";
 import { Menu, MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu } from "./components/menu/index.js";
 import { Meter } from "./components/meter/index.js";
+import { NavigationBar, NavigationBarItem, NavigationTabBar } from "./components/navigation-bar/index.js";
 import { NumberField } from "./components/number-field/index.js";
 import { Popover, PopoverContent, PopoverDescription, PopoverTitle } from "./components/popover/index.js";
 import { ProductIcon } from "./components/product-icon/index.js";
@@ -34,4 +38,4 @@ import { Stack } from "./components/stack/index.js";
 import { Switch } from "./components/switch/index.js";
 import { TextField } from "./components/text-field/index.js";
 import { ThemeScope } from "./theme-scope.js";
-export { Autocomplete, Avatar, Button, Card, Checkbox, Chip, ChipGroup, ChipGroupChip, CopyField, Currency, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Form, IconButton, Link, List, ListItem, ListLoadMore, ListRow, ListSection, Menu, MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu, Meter, NumberField, Popover, PopoverContent, PopoverDescription, PopoverTitle, ProductIcon, ProgressIndicator, Radio, RadioGroup, RouterProvider, SearchField, SegmentedButton, SegmentedButtonSegment, Separator, Sheet, SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle, Snackbar, Stack, Switch, Text, TextField, ThemeScope, useIconStyle, useTheme, useWindowSizeClass };
+export { AppBar, Autocomplete, Avatar, Button, Card, Checkbox, Chip, ChipGroup, ChipGroupChip, CopyField, Currency, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Form, IconButton, Link, List, ListDetail, ListItem, ListLoadMore, ListRow, ListSection, Menu, MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu, Meter, NavigationBar, NavigationBarItem, NavigationTabBar, NumberField, Popover, PopoverContent, PopoverDescription, PopoverTitle, ProductIcon, ProgressIndicator, Radio, RadioGroup, RouterProvider, SearchField, SegmentedButton, SegmentedButtonSegment, Separator, Sheet, SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle, Snackbar, Stack, Switch, Text, TextField, ThemeScope, useAppBarScroll, useIconStyle, useTheme, useWindowSizeClass };

package/dist/indicator/index.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import "react-native";
+import { LayoutChangeEvent } from "react-native";
 import "react-native-reanimated";
+import { ReactNode } from "react";
 //#region src/indicator/index.d.ts
 /**
  * The line's colour. `primary` is the page's own pair. `negative` and

package/dist/indicator/index.js

@@ -1,15 +1,15 @@
-import { localeOf } from "../number/locale.js";
 import { useIconStyle } from "../glyphs/icon-style.js";
 import { useTheme } from "../theme/scope.js";
 import { composeStyles } from "../theme/styles.js";
 import { withOpacity } from "../theme/color.js";
 import { Text as Text$1 } from "../components/text/index.js";
+import { localeOf } from "../number/locale.js";
 import { styles, stylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberFormatter } from "@internationalized/number";
 //#region src/indicator/index.tsx
 /**

package/dist/indicator/motion.js

@@ -1,6 +1,6 @@
 import { c } from "react/compiler-runtime";
-import { useEffect } from "react";
 import { Easing, ReduceMotion, cancelAnimation, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
+import { useEffect } from "react";
 //#region src/indicator/motion.ts
 const SEARCH_STEPS = 24;
 /**