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

package/README.md

@@ -94,7 +94,10 @@ same.
 
 The insets come from safe-area-context's `SafeAreaProvider`, which Expo Router
 puts around an app already; elsewhere, wrap the app in one. Without it, the
-library keeps to the window's edge.
+library keeps to the window's edge. `AppBar` and the panes of a `ListDetail` are
+the exception: each measures its own insets through safe-area-context's
+`SafeAreaView`, so it clears only the edges it actually meets, and on a device
+it needs no provider. Under React Native Web that view reads the provider too.
 
 Gesture Handler 2 and 3 both satisfy the peer. A `Switch` draws Gesture
 Handler's root view around its own track, so an app need not wrap itself in

package/dist/badge/index.js

@@ -0,0 +1,74 @@
+import { useTheme } from "../theme/scope.js";
+import { composeStyles } from "../theme/styles.js";
+import { useTypeRole } from "../typography/roles.js";
+import { styles, stylesOf } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { Text, View } from "react-native";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/badge/index.tsx
+let countFormat;
+/**
+* A badge on the top trailing corner of the icon it wraps: the small dot, or
+* with `count` the large badge holding the number.
+*/
+function Badge(t0) {
+	const $ = c(12);
+	const { children, count, inFlow: t1, max: t2 } = t0;
+	const inFlow = t1 === void 0 ? false : t1;
+	const max = t2 === void 0 ? 999 : t2;
+	const own = stylesOf(useTheme());
+	const role = useTypeRole("labelSmall");
+	let t3;
+	if ($[0] !== count || $[1] !== max) {
+		t3 = count === void 0 ? void 0 : countOf(count, max);
+		$[0] = count;
+		$[1] = max;
+		$[2] = t3;
+	} else t3 = $[2];
+	const label = t3;
+	const T0 = View;
+	const t4 = styles;
+	const T1 = View;
+	const t5 = true;
+	const t6 = composeStyles(own.mark, label === void 0 ? styles.small : [own.large, inFlow ? styles.inFlow : styles.over]);
+	const t7 = label === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+		style: styles.space,
+		children: " "
+	}), /* @__PURE__ */ jsx(Text, {
+		style: composeStyles(role, own.count),
+		children: label
+	})] });
+	let t8;
+	if ($[3] !== T1 || $[4] !== t6 || $[5] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T1, {
+			"aria-hidden": t5,
+			style: t6,
+			children: t7
+		});
+		$[3] = T1;
+		$[4] = t6;
+		$[5] = t7;
+		$[6] = t8;
+	} else t8 = $[6];
+	let t9;
+	if ($[7] !== T0 || $[8] !== children || $[9] !== t4.anchor || $[10] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
+			style: t4.anchor,
+			children: [children, t8]
+		});
+		$[7] = T0;
+		$[8] = children;
+		$[9] = t4.anchor;
+		$[10] = t8;
+		$[11] = t9;
+	} else t9 = $[11];
+	return t9;
+}
+function countOf(count, max) {
+	countFormat ??= new Intl.NumberFormat();
+	return count > max ? `${countFormat.format(max)}+` : countFormat.format(count);
+}
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=index.js.map

package/dist/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","TextStyle","ViewStyle","Text","NativeText","View","useTheme","composeStyles","useTypeRole","styles","stylesOf","BadgeProps","children","count","inFlow","max","countFormat","Intl","NumberFormat","Badge","t0","$","_c","t1","t2","undefined","own","role","t3","countOf","label","T0","T1","t5","t6","mark","small","large","over","t7","space","t8","t9","t4","anchor","format","_c","NativeText"],"sources":["../../src/badge/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { TextStyle, ViewStyle } from 'react-native'\n\nimport { Text as NativeText, View } from 'react-native'\n\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { styles, stylesOf } from './styles'\n\n// The badges page's badge, as kanso-ui's Badge draws it on a navigation\n// destination: a mark on the corner of an icon that flags something new\n// there, either as the 6dp small badge or as the 16dp large badge holding a\n// count. Both are the error pair, the error role with the count in on error,\n// on a full corner, and the count is label small, capped with a plus, as\n// \"999+\".\n//\n// The badge wraps the icon and places the mark against the icon's box,\n// which is what the page measures from. The small badge fills the icon's top\n// trailing 6dp square. The large badge's bottom leading corner sits 14dp\n// down and 12dp in from the icon's top trailing corner, so it stands 2dp\n// above the icon and grows toward the end as its count lengthens. Both are\n// placed by `start` and `end`, so the mark stays on the trailing corner under\n// right-to-left.\n//\n// Where a label stands beside the icon rather than under it, the large badge\n// joins the flow after the icon instead, so the label starts after it rather\n// than under it: `inFlow`. The small badge stays inside the icon's box, so\n// nothing has to make room for it.\n//\n// The mark is hidden from a screen reader. A count read on its own is a\n// number with no subject; it belongs in the name of the control it sits on,\n// where a reader meets it with what it counts, \"First item, 3 new\".\n//\n// The count is set apart from the text before it by a space drawn out of the\n// flow. Under React Native Web the count is still text inside the control,\n// and with nothing between them a label and its count ran together as\n// \"Second item3\", a word in no name: what axe's label-in-name check fails,\n// and not what a speech-input user would say. Web draws the count as\n// generated content instead, which a style here has no counterpart for.\n\ntype BadgeProps = {\n  /** What the badge is drawn on: an icon, at 24dp. */\n  readonly children?: ReactNode\n  /**\n   * The number to show, which draws the large badge. Left out, the badge is\n   * the small dot, which flags without counting.\n   */\n  readonly count?: number | undefined\n  /**\n   * Draws the large badge in the flow after the icon rather than over its\n   * corner, for a label beside the icon.\n   * @default false\n   */\n  readonly inFlow?: boolean\n  /**\n   * The largest count drawn as itself. Above it the badge reads `max` and a\n   * plus, which is the page's 999+ at the default.\n   * @default 999\n   */\n  readonly max?: number\n}\n\nlet countFormat: Intl.NumberFormat | undefined\n\n/**\n * A badge on the top trailing corner of the icon it wraps: the small dot, or\n * with `count` the large badge holding the number.\n */\nfunction Badge({ children, count, inFlow = false, max = 999 }: BadgeProps) {\n  const own = stylesOf(useTheme())\n  const role = useTypeRole('labelSmall')\n  const label = count === undefined ? undefined : countOf(count, max)\n\n  return (\n    <View style={styles.anchor}>\n      {children}\n      <View\n        aria-hidden\n        style={composeStyles<ViewStyle>(\n          own.mark,\n          label === undefined\n            ? styles.small\n            : [own.large, inFlow ? styles.inFlow : styles.over],\n        )}\n      >\n        {label === undefined ? null : (\n          <>\n            <NativeText style={styles.space}> </NativeText>\n            <NativeText style={composeStyles<TextStyle>(role, own.count)}>\n              {label}\n            </NativeText>\n          </>\n        )}\n      </View>\n    </View>\n  )\n}\n\n// The count in the device's digits and grouping, as web writes it in the\n// reader's locale. One formatter, since a badge's count changes often.\nfunction countOf(count: number, max: number) {\n  countFormat ??= new Intl.NumberFormat()\n\n  return count > max ? `${countFormat.format(max)}+` : countFormat.format(count)\n}\n\nexport type { BadgeProps }\n\nexport { Badge }\n"],"mappings":";;;;;;;;AA+DA,IAAIgB;;;;;AAMJ,SAAAG,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAe,MAAA,EAAAV,UAAAC,OAAAC,QAAAS,IAAAR,KAAAS,OAAAJ;CAAmB,MAAAN,SAAAS,OAAAE,KAAAA,IAAA,QAAAF;CAAgB,MAAAR,MAAAS,OAAAC,KAAAA,IAAA,MAAAD;CAChD,MAAAE,MAAYhB,SAASJ,SAAS,CAAC;CAC/B,MAAAqB,OAAanB,YAAY,YAAY;CAAC,IAAAoB;CAAA,IAAAP,EAAA,OAAAR,SAAAQ,EAAA,OAAAN,KAAA;EACxBa,KAAAf,UAAUY,KAAAA,IAAVA,KAAAA,IAAkCI,QAAQhB,OAAOE,GAAG;EAACM,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAnE,MAAAS,QAAcF;CAGX,MAAAG,KAAA1B;CAAYI,MAAAA,KAAAA;CAEV,MAAAuB,KAAA3B;CACC,MAAA4B,KAAA;CACO,MAAAC,KAAA3B,cACLmB,IAAGS,MACHL,UAAUL,KAAAA,IACNhB,OAAM2B,QADV,CAEKV,IAAGW,OAAQvB,SAASL,OAAMK,SAAUL,OAAM6B,IAAK,CACtD;CAEC,MAAAC,KAAAT,UAAUL,KAAAA,IAAV,OAAA,qBAAA,UAAA,EAAA,UAAA,CAEG,oBAACsB,MAAD;EAAmB,OAAAtC,OAAM+B;EAAQ,UAAA;CAAtB,CAAA,GACX,oBAACO,MAAD;EAAmB,OAAAxC,cAAyBoB,MAAMD,IAAGb,KAAM;EACxDiB,UAAAA;CADQ,CAAA,CAEE,EAAA,CAAA;CAEhB,IAAAW;CAAA,IAAApB,EAAA,OAAAW,MAAAX,EAAA,OAAAa,MAAAb,EAAA,OAAAkB,IAAA;EAhBHE,KAAA,oBAAC,IAAD;GACE,eAAAR;GACO,OAAAC;GAONK,UAAAA;EATE,CAAA;EAiBElB,EAAA,KAAAW;EAAAX,EAAA,KAAAa;EAAAb,EAAA,KAAAkB;EAAAlB,EAAA,KAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,IAAAqB;CAAA,IAAArB,EAAA,OAAAU,MAAAV,EAAA,OAAAT,YAAAS,EAAA,OAAAsB,GAAAC,UAAAvB,EAAA,QAAAoB,IAAA;EAnBTC,KAAA,qBAAC,IAAD;GAAa,OAAAjC,GAAMmC;GAAnB,UAAA,CACGhC,UACD6B,EAFG;;EAoBEpB,EAAA,KAAAU;EAAAV,EAAA,KAAAT;EAAAS,EAAA,KAAAsB,GAAAC;EAAAvB,EAAA,MAAAoB;EAAApB,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,OApBPqB;AAoBO;AAMX,SAASb,QAAQhB,OAAeE,KAAa;CAC3CC,gBAAgB,IAAIC,KAAKC,aAAa;CAEtC,OAAOL,QAAQE,MAAM,GAAGC,YAAY6B,OAAO9B,GAAG,EAAC,KAAMC,YAAY6B,OAAOhC,KAAK;AAC/E"}

package/dist/badge/styles.js

@@ -0,0 +1,51 @@
+import { themedStyles } from "../theme/styles.js";
+import { StyleSheet } from "react-native";
+//#region src/badge/styles.ts
+const SMALL_SIZE = 6;
+const LARGE_SIZE = 16;
+const styles = StyleSheet.create({
+	anchor: {
+		alignItems: "flex-start",
+		flexDirection: "row"
+	},
+	inFlow: {
+		marginStart: -12,
+		position: "relative",
+		top: -2
+	},
+	over: {
+		position: "absolute",
+		start: 12,
+		top: -2
+	},
+	small: {
+		end: 0,
+		height: SMALL_SIZE,
+		position: "absolute",
+		top: 0,
+		width: SMALL_SIZE
+	},
+	space: { position: "absolute" }
+});
+const stylesOf = themedStyles(({ colors, radii, spacing }) => StyleSheet.create({
+	count: {
+		color: colors.onError,
+		fontVariant: ["tabular-nums"]
+	},
+	large: {
+		alignItems: "center",
+		justifyContent: "center",
+		minHeight: LARGE_SIZE,
+		minWidth: LARGE_SIZE,
+		paddingHorizontal: spacing.xs
+	},
+	mark: {
+		backgroundColor: colors.error,
+		borderRadius: radii.pill,
+		pointerEvents: "none"
+	}
+}));
+//#endregion
+export { styles, stylesOf };
+
+//# sourceMappingURL=styles.js.map

package/dist/badge/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["StyleSheet","themedStyles","ICON_SIZE","OVERLAP","RISE","SMALL_SIZE","LARGE_SIZE","styles","create","anchor","alignItems","flexDirection","inFlow","marginStart","position","top","over","start","small","end","height","width","space","stylesOf","colors","radii","spacing","count","color","onError","fontVariant","large","justifyContent","minHeight","minWidth","paddingHorizontal","xs","mark","backgroundColor","error","borderRadius","pill","pointerEvents"],"sources":["../../src/badge/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { themedStyles } from '../theme/styles'\n\n// The icon a badge is drawn on, which the large badge's corner is measured\n// from: the 24dp every destination draws.\nconst ICON_SIZE = 24\n\n// How far back over the icon the large badge reaches, from the icon's\n// trailing edge, and how far above the icon it stands. The page's own\n// figures: its bottom leading corner 14dp down and 12dp in from the icon's\n// top trailing corner, on a 16dp badge.\nconst OVERLAP = 12\nconst RISE = 2\n\n// The small badge's side, and the large badge's least height and width.\nconst SMALL_SIZE = 6\nconst LARGE_SIZE = 16\n\nconst styles = StyleSheet.create({\n  // What the badge is drawn on. It shrinks to what it holds, so its box is\n  // the icon's and the mark lands where the page puts it, and lays a mark\n  // that joins the flow after the icon.\n  anchor: {\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n  },\n  // The large badge in the flow after the icon, 12dp back over it and 2dp\n  // above it, which is where its own placement puts it, so what follows the\n  // icon starts after the badge rather than under it.\n  inFlow: {\n    marginStart: -OVERLAP,\n    position: 'relative',\n    top: -RISE,\n  },\n  // The large badge over the icon's top trailing corner.\n  over: {\n    position: 'absolute',\n    start: ICON_SIZE - OVERLAP,\n    top: -RISE,\n  },\n  // The small badge, filling the icon's top trailing 6dp square.\n  small: {\n    end: 0,\n    height: SMALL_SIZE,\n    position: 'absolute',\n    top: 0,\n    width: SMALL_SIZE,\n  },\n  // The space before the count, out of the flow, so it sets the count apart\n  // from the text before it without moving anything.\n  space: {\n    position: 'absolute',\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, radii, spacing }) =>\n  StyleSheet.create({\n    // The count, in label small with tabular figures, so a count that\n    // changes does not change the badge's width digit by digit.\n    count: {\n      color: colors.onError,\n      fontVariant: ['tabular-nums'],\n    },\n    // The page's large badge: at least 16dp tall and as wide, 4dp either\n    // side of its count. A minimum rather than a size, so a larger text size\n    // the device asks for grows the badge rather than cutting the count.\n    large: {\n      alignItems: 'center',\n      justifyContent: 'center',\n      minHeight: LARGE_SIZE,\n      minWidth: LARGE_SIZE,\n      paddingHorizontal: spacing.xs,\n    },\n    // The fill and corner both badges share. It takes no touches, so a press\n    // on it lands on what it is drawn on.\n    mark: {\n      backgroundColor: colors.error,\n      borderRadius: radii.pill,\n      pointerEvents: 'none',\n    },\n  }),\n)\n\nexport { styles, stylesOf }\n"],"mappings":";;;AAgBA,MAAMK,aAAa;AACnB,MAAMC,aAAa;AAEnB,MAAMC,SAASP,WAAWQ,OAAO;CAI/BC,QAAQ;EACNC,YAAY;EACZC,eAAe;CACjB;CAIAC,QAAQ;EACNC,aAAa;EACbC,UAAU;EACVC,KAAK;CACP;CAEAC,MAAM;EACJF,UAAU;EACVG,OAAOf;EACPa,KAAK;CACP;CAEAG,OAAO;EACLC,KAAK;EACLC,QAAQf;EACRS,UAAU;EACVC,KAAK;EACLM,OAAOhB;CACT;CAGAiB,OAAO,EACLR,UAAU,WACZ;AACF,CAAC;AAED,MAAMS,WAAWtB,cAAc,EAAEuB,QAAQC,OAAOC,cAC9C1B,WAAWQ,OAAO;CAGhBmB,OAAO;EACLC,OAAOJ,OAAOK;EACdC,aAAa,CAAC,cAAc;CAC9B;CAIAC,OAAO;EACLrB,YAAY;EACZsB,gBAAgB;EAChBC,WAAW3B;EACX4B,UAAU5B;EACV6B,mBAAmBT,QAAQU;CAC7B;CAGAC,MAAM;EACJC,iBAAiBd,OAAOe;EACxBC,cAAcf,MAAMgB;EACpBC,eAAe;CACjB;AACF,CAAC,CACH"}

package/dist/button/index.d.ts

@@ -1,5 +1,5 @@
+import { HostInstance, LayoutChangeEvent, PressableProps } from "react-native";
 import { Ref } from "react";
-import { HostInstance, PressableProps } from "react-native";
 //#region src/button/index.d.ts
 /**
  * A plain button, a link, or a toggle, of which a call site writes exactly

package/dist/button/index.js

@@ -4,9 +4,9 @@ import { refsOf } from "../ref/index.js";
 import { useOpenLink } from "../router/index.js";
 import { ButtonSlotContext } from "./slots.js";
 import { c } from "react/compiler-runtime";
-import { use, useState } from "react";
 import { Platform, Pressable, StyleSheet } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { use, useState } from "react";
 //#region src/button/index.ts
 const HEIGHTS = {
 	lg: "controlLg",

package/dist/button/pending.js

@@ -2,9 +2,9 @@ import { IconStyleContext } from "../glyphs/icon-style.js";
 import { ProgressIndicator } from "../components/progress-indicator/index.js";
 import { messagesFor } from "../i18n/index.js";
 import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, Platform, StyleSheet, View } from "react-native";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { AccessibilityInfo, Platform, StyleSheet, View } from "react-native";
 //#region src/button/pending.tsx
 const pendingStyles = StyleSheet.create({
 	hidden: { opacity: 0 },

package/dist/button/slots.d.ts

@@ -1,2 +1,2 @@
-import { RefObject } from "react";
-import { HostInstance } from "react-native";
+import { HostInstance } from "react-native";
+import { RefObject } from "react";

package/dist/chip/index.js

@@ -1,14 +1,14 @@
 import { IconStyleContext } from "../glyphs/icon-style.js";
-import { CheckGlyph } from "../glyphs/index.js";
 import { useTheme } from "../theme/scope.js";
 import { composeStyles } from "../theme/styles.js";
 import { useTypeRole } from "../typography/roles.js";
 import { withOpacity } from "../theme/color.js";
+import { CheckGlyph } from "../glyphs/index.js";
 import { styles, stylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, withTiming } from "react-native-reanimated";
+import { jsx } from "react/jsx-runtime";
 //#region src/chip/index.tsx
 const CHECK = /* @__PURE__ */ jsx(CheckGlyph, {});
 /**

package/dist/components/app-bar/index.d.ts

@@ -0,0 +1,111 @@
+import { View, ViewProps } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/app-bar/index.d.ts
+type AppBarProps = Omit<ViewProps, 'children'> & {
+  /**
+   * Which of Material Design's alignments the text takes. `center` is the
+   * configuration that replaced the old center-aligned variant.
+   * @default 'start'
+   */
+  readonly align?: 'center' | 'start';
+  /**
+   * Collapses a flexible bar to the height and headline of the small one,
+   * for a `pinned` bar over content that has been scrolled. Without it a
+   * pinned `lg` keeps 152dp of the screen for as long as the screen is open.
+   *
+   * Controlled, as `scrolled` is: only the app knows which view scrolls and
+   * how far into it the bar should have collapsed. `useAppBarScroll` derives
+   * both from that view's scroll, and is the way to set them unless the app
+   * needs a rule of its own. Ignored on `sm`, which is already the height
+   * this collapses to, and the subtitle goes with the height.
+   * @default false
+   */
+  readonly collapsed?: boolean;
+  /**
+   * Where the bar's content starts on each edge, in dp: the headline where
+   * nothing comes before it, and the leading icon's glyph where something
+   * does. The trailing edge is the same mirrored. `0` draws a bar flush.
+   *
+   * The default is Material Design's margin for a top app bar, the spacing
+   * scale's `lg` step, which is also the margin it gives body content, so a
+   * bar and the screen beneath line up without either being told about the
+   * other.
+   * @default spacing.lg
+   */
+  readonly contentInset?: number;
+  /**
+   * How wide the bar's contents may run, in dp, before they stop growing,
+   * with the row centred in what is left. The bar's surface still paints
+   * edge to edge. Unset, the row is as wide as the bar.
+   */
+  readonly contentMaxInlineSize?: number;
+  /**
+   * The screen's title, a header for a screen reader. Wraps rather than
+   * truncating, and grows the bar with it.
+   */
+  readonly headline?: ReactNode;
+  /**
+   * Usually a back or menu icon button. Sits before the text, and hands an
+   * icon the on-surface colour and a 24dp size through `useIconStyle()`.
+   */
+  readonly leading?: ReactNode;
+  /**
+   * Marks a bar drawn above the screen's scroll view rather than inside it,
+   * so it stays put while the content scrolls beneath its lower edge, and is
+   * drawn over that content. A pinned bar is the one `collapsed` and
+   * `scrolled` are for.
+   * @default false
+   */
+  readonly pinned?: boolean;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * Whether the content beneath has been scrolled. Material Design separates
+   * a bar from scrolled content with a fill colour rather than a shadow, the
+   * surface container role, and this is what applies it.
+   *
+   * Controlled, with no listener of its own: only the app knows which view
+   * scrolls. `useAppBarScroll` derives it.
+   * @default false
+   */
+  readonly scrolled?: boolean;
+  /**
+   * `sm` is Material Design's small bar, 64dp; `md` and `lg` are its medium
+   * and large flexible bars, 112dp and 120dp, or 136dp and 152dp with a
+   * subtitle, which hug their text. The headline is title large, headline
+   * small and headline medium in turn.
+   * @default 'sm'
+   */
+  readonly size?: AppBarSize;
+  /** A second line under the headline. Makes `md` and `lg` taller. */
+  readonly subtitle?: ReactNode;
+  /**
+   * Actions, at the far end, usually icon buttons. An icon here takes the
+   * on-surface-variant colour and a 24dp size through `useIconStyle()`.
+   */
+  readonly trailing?: ReactNode;
+};
+type AppBarSize = 'lg' | 'md' | 'sm';
+/**
+ * Material Design's top app bar: the bar at the top of a screen carrying its
+ * title, one or two actions, and the way back out.
+ *
+ * ```tsx
+ * <AppBar
+ *   headline="Headline"
+ *   leading={<IconButton aria-label="Back"><ArrowBackGlyph /></IconButton>}
+ * />
+ * ```
+ *
+ * Three sizes. `sm` is a 64dp bar for a screen whose title is a label; `md`
+ * and `lg` are the flexible bars, which give the headline a larger type role
+ * and grow to fit a subtitle or a headline that wraps.
+ *
+ * It paints its own surface, from the screen's top edge, and keeps its
+ * contents clear of the status bar and the notch. Separating itself from the
+ * content beneath is its job, which is why `scrolled` and `collapsed` exist;
+ * `useAppBarScroll` sets both from the screen's scroll view.
+ */
+declare function AppBar({ align, collapsed, contentInset, contentMaxInlineSize, headline, leading, pinned, scrolled, size, style, subtitle, trailing, ...props }: AppBarProps): import("react").JSX.Element;
+//#endregion
+export { AppBar, type AppBarProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/app-bar/index.js

@@ -0,0 +1,341 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { hasContent } from "../../row/index.js";
+import { Text as Text$1 } from "../text/index.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, withTiming } from "react-native-reanimated";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/app-bar/index.tsx
+const ICON_SIZE = 24;
+const GLYPH_INSET = 12;
+const HEIGHTS = {
+	lg: {
+		plain: 120,
+		withSubtitle: 152
+	},
+	md: {
+		plain: 112,
+		withSubtitle: 136
+	},
+	sm: {
+		plain: 64,
+		withSubtitle: 64
+	}
+};
+const HEADLINE_ROLES = {
+	lg: "headlineMedium",
+	md: "headlineSmall",
+	sm: "titleLarge"
+};
+const EDGES = [
+	"left",
+	"right",
+	"top"
+];
+const styles = StyleSheet.create({
+	center: { textAlign: "center" },
+	pinned: { zIndex: 1 },
+	row: {
+		alignItems: "center",
+		flexDirection: "row",
+		width: "100%"
+	},
+	safeArea: { alignItems: "center" }
+});
+const stylesOf = themedStyles(({ sizing, spacing }) => StyleSheet.create({
+	row: { gap: spacing.xs },
+	slot: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexShrink: 0,
+		gap: 48 - sizing.controlSm,
+		paddingHorizontal: (48 - sizing.controlSm) / 2
+	},
+	text: {
+		flexGrow: 1,
+		flexShrink: 1,
+		justifyContent: "center",
+		minWidth: 0,
+		paddingVertical: spacing.sm
+	}
+}));
+/**
+* Material Design's top app bar: the bar at the top of a screen carrying its
+* title, one or two actions, and the way back out.
+*
+* ```tsx
+* <AppBar
+*   headline="Headline"
+*   leading={<IconButton aria-label="Back"><ArrowBackGlyph /></IconButton>}
+* />
+* ```
+*
+* Three sizes. `sm` is a 64dp bar for a screen whose title is a label; `md`
+* and `lg` are the flexible bars, which give the headline a larger type role
+* and grow to fit a subtitle or a headline that wraps.
+*
+* It paints its own surface, from the screen's top edge, and keeps its
+* contents clear of the status bar and the notch. Separating itself from the
+* content beneath is its job, which is why `scrolled` and `collapsed` exist;
+* `useAppBarScroll` sets both from the screen's scroll view.
+*/
+function AppBar(t0) {
+	const $ = c(58);
+	let contentInset;
+	let contentMaxInlineSize;
+	let headline;
+	let leading;
+	let props;
+	let style;
+	let subtitle;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let trailing;
+	if ($[0] !== t0) {
+		({align: t1, collapsed: t2, contentInset, contentMaxInlineSize, headline, leading, pinned: t3, scrolled: t4, size: t5, style, subtitle, trailing, ...props} = t0);
+		$[0] = t0;
+		$[1] = contentInset;
+		$[2] = contentMaxInlineSize;
+		$[3] = headline;
+		$[4] = leading;
+		$[5] = props;
+		$[6] = style;
+		$[7] = subtitle;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = trailing;
+	} else {
+		contentInset = $[1];
+		contentMaxInlineSize = $[2];
+		headline = $[3];
+		leading = $[4];
+		props = $[5];
+		style = $[6];
+		subtitle = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+		t4 = $[11];
+		t5 = $[12];
+		trailing = $[13];
+	}
+	const align = t1 === void 0 ? "start" : t1;
+	const collapsed = t2 === void 0 ? false : t2;
+	const pinned = t3 === void 0 ? false : t3;
+	const scrolled = t4 === void 0 ? false : t4;
+	const size = t5 === void 0 ? "sm" : t5;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const inset = contentInset ?? theme.spacing.lg;
+	const collapse = collapsed && size !== "sm";
+	const hasLeading = hasContent(leading);
+	const hasTrailing = hasContent(trailing);
+	let t6;
+	if ($[14] !== collapse || $[15] !== subtitle) {
+		t6 = hasContent(subtitle) && !collapse;
+		$[14] = collapse;
+		$[15] = subtitle;
+		$[16] = t6;
+	} else t6 = $[16];
+	const showsSubtitle = t6;
+	const heights = HEIGHTS[collapse ? "sm" : size];
+	const fill = useFill(scrolled);
+	const t7 = Animated;
+	const t8 = pinned ? styles.pinned : null;
+	let t9;
+	if ($[17] !== fill || $[18] !== style || $[19] !== t8) {
+		t9 = composeStyles(fill, t8, style);
+		$[17] = fill;
+		$[18] = style;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	const T0 = SafeAreaView;
+	const t10 = EDGES;
+	const t11 = styles;
+	const T1 = View;
+	const t12 = composeStyles(styles.row, own.row, {
+		maxWidth: contentMaxInlineSize,
+		minHeight: showsSubtitle ? heights.withSubtitle : heights.plain,
+		paddingEnd: edgePadding(inset, hasTrailing),
+		paddingStart: edgePadding(inset, hasLeading)
+	});
+	let t13;
+	if ($[21] !== hasLeading || $[22] !== leading || $[23] !== theme) {
+		t13 = hasLeading ? /* @__PURE__ */ jsx(Slot, {
+			color: theme.colors.onSurface,
+			children: leading
+		}) : null;
+		$[21] = hasLeading;
+		$[22] = leading;
+		$[23] = theme;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== align || $[26] !== collapse || $[27] !== headline || $[28] !== size) {
+		t14 = hasContent(headline) ? /* @__PURE__ */ jsx(Text$1, {
+			role: "heading",
+			style: align === "center" ? styles.center : void 0,
+			variant: HEADLINE_ROLES[collapse ? "sm" : size],
+			children: headline
+		}) : null;
+		$[25] = align;
+		$[26] = collapse;
+		$[27] = headline;
+		$[28] = size;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== align || $[31] !== showsSubtitle || $[32] !== subtitle) {
+		t15 = showsSubtitle ? /* @__PURE__ */ jsx(Text$1, {
+			style: align === "center" ? styles.center : void 0,
+			tone: "muted",
+			variant: "bodyMedium",
+			children: subtitle
+		}) : null;
+		$[30] = align;
+		$[31] = showsSubtitle;
+		$[32] = subtitle;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== own.text || $[35] !== t14 || $[36] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(View, {
+			style: own.text,
+			children: [t14, t15]
+		});
+		$[34] = own.text;
+		$[35] = t14;
+		$[36] = t15;
+		$[37] = t16;
+	} else t16 = $[37];
+	let t17;
+	if ($[38] !== hasTrailing || $[39] !== theme || $[40] !== trailing) {
+		t17 = hasTrailing ? /* @__PURE__ */ jsx(Slot, {
+			color: theme.colors.onSurfaceVariant,
+			children: trailing
+		}) : null;
+		$[38] = hasTrailing;
+		$[39] = theme;
+		$[40] = trailing;
+		$[41] = t17;
+	} else t17 = $[41];
+	let t18;
+	if ($[42] !== T1 || $[43] !== t12 || $[44] !== t13 || $[45] !== t16 || $[46] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(T1, {
+			style: t12,
+			children: [
+				t13,
+				t16,
+				t17
+			]
+		});
+		$[42] = T1;
+		$[43] = t12;
+		$[44] = t13;
+		$[45] = t16;
+		$[46] = t17;
+		$[47] = t18;
+	} else t18 = $[47];
+	let t19;
+	if ($[48] !== T0 || $[49] !== t10 || $[50] !== t11.safeArea || $[51] !== t18) {
+		t19 = /* @__PURE__ */ jsx(T0, {
+			edges: t10,
+			style: t11.safeArea,
+			children: t18
+		});
+		$[48] = T0;
+		$[49] = t10;
+		$[50] = t11.safeArea;
+		$[51] = t18;
+		$[52] = t19;
+	} else t19 = $[52];
+	let t20;
+	if ($[53] !== props || $[54] !== t19 || $[55] !== t7.View || $[56] !== t9) {
+		t20 = /* @__PURE__ */ jsx(t7.View, {
+			...props,
+			style: t9,
+			children: t19
+		});
+		$[53] = props;
+		$[54] = t19;
+		$[55] = t7.View;
+		$[56] = t9;
+		$[57] = t20;
+	} else t20 = $[57];
+	return t20;
+}
+function edgePadding(inset, hasSlot) {
+	return hasSlot ? Math.max(0, inset - GLYPH_INSET) : inset;
+}
+function iconStyleOf(color) {
+	return {
+		color,
+		size: ICON_SIZE
+	};
+}
+function Slot(t0) {
+	const $ = c(10);
+	const { children, color } = t0;
+	const t1 = useTheme();
+	let t2;
+	if ($[0] !== t1) {
+		t2 = stylesOf(t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const own = t2;
+	let t3;
+	if ($[2] !== color) {
+		t3 = iconStyleOf(color);
+		$[2] = color;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== children || $[5] !== own.slot) {
+		t4 = /* @__PURE__ */ jsx(View, {
+			style: own.slot,
+			children
+		});
+		$[4] = children;
+		$[5] = own.slot;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t3 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(IconStyleContext, {
+			value: t3,
+			children: t4
+		});
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+function useFill(scrolled) {
+	const { colors, motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const fill = scrolled ? colors.surfaceContainer : colors.surface;
+	const timing = {
+		duration: motion.durationMedium1,
+		easing: Easing.bezier(...motion.easingEmphasized)
+	};
+	return useAnimatedStyle(() => {
+		"worklet";
+		return { backgroundColor: reduceMotion ? fill : withTiming(fill, timing) };
+	});
+}
+//#endregion
+export { AppBar };
+
+//# sourceMappingURL=index.js.map