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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","ColorValue","ViewProps","ViewStyle","AnimatedStyle","Edge","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","withTiming","SafeAreaView","IconStyle","TypeRole","IconStyleContext","COLLAPSED_BLOCK_SIZE","TARGET_SIZE","hasContent","useTheme","composeStyles","themedStyles","Text","ICON_SIZE","GLYPH_INSET","HEIGHTS","lg","plain","withSubtitle","md","sm","const","HEADLINE_ROLES","Readonly","Record","AppBarSize","EDGES","styles","create","center","textAlign","pinned","zIndex","row","alignItems","flexDirection","width","safeArea","stylesOf","sizing","spacing","gap","xs","slot","flexShrink","controlSm","paddingHorizontal","text","flexGrow","justifyContent","minWidth","paddingVertical","AppBarProps","Omit","align","collapsed","contentInset","contentMaxInlineSize","headline","leading","ref","scrolled","size","subtitle","trailing","SlotProps","children","color","AppBar","t0","$","_c","props","style","t1","t2","t3","t4","t5","undefined","theme","own","inset","collapse","hasLeading","hasTrailing","t6","showsSubtitle","heights","fill","useFill","t7","t8","t9","T0","T1","t12","maxWidth","minHeight","paddingEnd","edgePadding","paddingStart","t13","colors","onSurface","t14","t15","t16","t17","onSurfaceVariant","t18","t19","t10","t11","t20","hasSlot","Math","max","iconStyleOf","Slot","motion","reduceMotion","surfaceContainer","surface","timing","duration","durationMedium1","easing","bezier","easingEmphasized","backgroundColor","_c","Text"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { ColorValue, ViewProps, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Edge } from 'react-native-safe-area-context'\n\nimport { StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  withTiming,\n} from 'react-native-reanimated'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport type { IconStyle } from '../../glyphs/icon-style'\nimport type { TypeRole } from '../../typography/roles'\n\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { COLLAPSED_BLOCK_SIZE } from '../../hooks/useAppBarScroll'\nimport { TARGET_SIZE } from '../../press'\nimport { hasContent } from '../../row'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { Text } from '../text'\n\n// kanso-ui's AppBar, Material Design's top app bar in the three sizes the spec\n// recommends. `md` and `lg` are its medium and large *flexible* bars, the\n// newer of the two sets the spec gives and the one it recommends. The old\n// center-aligned variant is a configuration of every size, which is why\n// alignment is a prop.\n//\n// Heights are minimums rather than fixed. The flexible bars hug their text,\n// so a headline that wraps, or a larger text size the device asks for, makes\n// the bar taller rather than being cut off.\n//\n// The bar paints its surface from the screen's top edge, under the status\n// bar, and keeps its contents inside the safe area: a `SafeAreaView` pads it\n// by the status bar, the notch and a rounded corner wherever the bar meets\n// them, and by nothing where it does not, so a bar drawn below another view\n// takes no inset of its own.\n//\n// Three things differ from web's, each because of the platform.\n//\n// - **No heading level.** Native screen readers have no levels to move\n//   between, so the headline is a header and `headingLevel` is gone.\n// - **`pinned` means outside the scroll view.** Native has no sticky\n//   position, so a pinned bar is one the screen draws above its scroll view\n//   rather than inside it, and the content scrolls beneath its lower edge.\n// - **The fill eases and the height does not.** Collapsing moves the height\n//   and the headline's type role at once. React Native has no transition for\n//   a type role, and easing the height alone would leave the text jumping\n//   inside a moving bar. The fill a scrolled bar takes eases over medium 1\n//   on the emphasized curve, as web's does, and arrives at once under\n//   reduced motion.\n\n// The geometry Material Design lays a bar's icon buttons out on: a 48dp\n// target per button, edge to edge, with a 24dp icon centred in each, and the\n// outermost target 4dp in from the bar's edge, so a glyph lands at the\n// page's margin. IconButton draws a 40dp box with its 48dp target spilling\n// out through `hitSlop`, so a slot pads half the difference either side and\n// puts the whole of it between two buttons, which lays the targets edge to\n// edge as the spec does.\nconst ICON_SIZE = 24\n\n// How far an icon sits inside its target, which is how much less than the\n// content inset the row is padded on an edge that holds a slot. That puts a\n// leading glyph, rather than the edge of its target, at the inset.\nconst GLYPH_INSET = (TARGET_SIZE - ICON_SIZE) / 2\n\nconst HEIGHTS = {\n  lg: { plain: 120, withSubtitle: 152 },\n  md: { plain: 112, withSubtitle: 136 },\n  sm: { plain: COLLAPSED_BLOCK_SIZE, withSubtitle: COLLAPSED_BLOCK_SIZE },\n} as const\n\n// One type role per size, as Material Design's own title tokens alias the\n// type scale rather than giving sizes of their own. A collapsed bar takes the\n// small one's.\nconst HEADLINE_ROLES: Readonly<Record<AppBarSize, TypeRole>> = {\n  lg: 'headlineMedium',\n  md: 'headlineSmall',\n  sm: 'titleLarge',\n}\n\n// The bar's sides as well as its top, so a landscape notch is cleared too.\n// The bottom is the content's.\nconst EDGES: readonly Edge[] = ['left', 'right', 'top']\n\nconst styles = StyleSheet.create({\n  center: {\n    textAlign: 'center',\n  },\n  // Drawn over what follows it, so whatever strays past the scroll view's\n  // top edge, an overscroll or a shadow, passes beneath the bar.\n  pinned: {\n    zIndex: 1,\n  },\n  row: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '100%',\n  },\n  // The row, centred once it reaches `contentMaxInlineSize`.\n  safeArea: {\n    alignItems: 'center',\n  },\n})\n\nconst stylesOf = themedStyles(({ sizing, spacing }) =>\n  StyleSheet.create({\n    row: {\n      gap: spacing.xs,\n    },\n    // Slots hold their own size rather than being squeezed by a long\n    // headline, and space their icon buttons by the spec's targets.\n    slot: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      flexShrink: 0,\n      gap: TARGET_SIZE - sizing.controlSm,\n      paddingHorizontal: (TARGET_SIZE - sizing.controlSm) / 2,\n    },\n    // The text takes the room the slots leave, and wraps inside it.\n    text: {\n      flexGrow: 1,\n      flexShrink: 1,\n      justifyContent: 'center',\n      minWidth: 0,\n      paddingVertical: spacing.sm,\n    },\n  }),\n)\n\ntype AppBarProps = Omit<ViewProps, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  readonly align?: 'center' | 'start'\n  /**\n   * Collapses a flexible bar to the height and headline of the small one,\n   * for a `pinned` bar over content that has been scrolled. Without it a\n   * pinned `lg` keeps 152dp of the screen for as long as the screen is open.\n   *\n   * Controlled, as `scrolled` is: only the app knows which view scrolls and\n   * how far into it the bar should have collapsed. `useAppBarScroll` derives\n   * both from that view's scroll, and is the way to set them unless the app\n   * needs a rule of its own. Ignored on `sm`, which is already the height\n   * this collapses to, and the subtitle goes with the height.\n   * @default false\n   */\n  readonly collapsed?: boolean\n  /**\n   * Where the bar's content starts on each edge, in dp: the headline where\n   * nothing comes before it, and the leading icon's glyph where something\n   * does. The trailing edge is the same mirrored. `0` draws a bar flush.\n   *\n   * The default is Material Design's margin for a top app bar, the spacing\n   * scale's `lg` step, which is also the margin it gives body content, so a\n   * bar and the screen beneath line up without either being told about the\n   * other.\n   * @default spacing.lg\n   */\n  readonly contentInset?: number\n  /**\n   * How wide the bar's contents may run, in dp, before they stop growing,\n   * with the row centred in what is left. The bar's surface still paints\n   * edge to edge. Unset, the row is as wide as the bar.\n   */\n  readonly contentMaxInlineSize?: number\n  /**\n   * The screen's title, a header for a screen reader. Wraps rather than\n   * truncating, and grows the bar with it.\n   */\n  readonly headline?: ReactNode\n  /**\n   * Usually a back or menu icon button. Sits before the text, and hands an\n   * icon the on-surface colour and a 24dp size through `useIconStyle()`.\n   */\n  readonly leading?: ReactNode\n  /**\n   * Marks a bar drawn above the screen's scroll view rather than inside it,\n   * so it stays put while the content scrolls beneath its lower edge, and is\n   * drawn over that content. A pinned bar is the one `collapsed` and\n   * `scrolled` are for.\n   * @default false\n   */\n  readonly pinned?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, the\n   * surface container role, and this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which view\n   * scrolls. `useAppBarScroll` derives it.\n   * @default false\n   */\n  readonly scrolled?: boolean\n  /**\n   * `sm` is Material Design's small bar, 64dp; `md` and `lg` are its medium\n   * and large flexible bars, 112dp and 120dp, or 136dp and 152dp with a\n   * subtitle, which hug their text. The headline is title large, headline\n   * small and headline medium in turn.\n   * @default 'sm'\n   */\n  readonly size?: AppBarSize\n  /** A second line under the headline. Makes `md` and `lg` taller. */\n  readonly subtitle?: ReactNode\n  /**\n   * Actions, at the far end, usually icon buttons. An icon here takes the\n   * on-surface-variant colour and a 24dp size through `useIconStyle()`.\n   */\n  readonly trailing?: ReactNode\n}\n\ntype AppBarSize = 'lg' | 'md' | 'sm'\n\ntype SlotProps = {\n  readonly children: ReactNode\n  readonly color: ColorValue\n}\n\n/**\n * Material Design's top app bar: the bar at the top of a screen carrying its\n * title, one or two actions, and the way back out.\n *\n * ```tsx\n * <AppBar\n *   headline=\"Headline\"\n *   leading={<IconButton aria-label=\"Back\"><ArrowBackGlyph /></IconButton>}\n * />\n * ```\n *\n * Three sizes. `sm` is a 64dp bar for a screen whose title is a label; `md`\n * and `lg` are the flexible bars, which give the headline a larger type role\n * and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, from the screen's top edge, and keeps its\n * contents clear of the status bar and the notch. Separating itself from the\n * content beneath is its job, which is why `scrolled` and `collapsed` exist;\n * `useAppBarScroll` sets both from the screen's scroll view.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset,\n  contentMaxInlineSize,\n  headline,\n  leading,\n  pinned = false,\n  scrolled = false,\n  size = 'sm',\n  style,\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const inset = contentInset ?? theme.spacing.lg\n  // `sm` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error, for a size chosen by the window.\n  const collapse = collapsed && size !== 'sm'\n  const hasLeading = hasContent(leading)\n  const hasTrailing = hasContent(trailing)\n  const showsSubtitle = hasContent(subtitle) && !collapse\n  const heights = HEIGHTS[collapse ? 'sm' : size]\n  const fill = useFill(scrolled)\n\n  return (\n    <Animated.View\n      {...props}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        fill,\n        pinned ? styles.pinned : null,\n        style,\n      )}\n    >\n      <SafeAreaView edges={EDGES} style={styles.safeArea}>\n        <View\n          style={composeStyles<ViewStyle>(styles.row, own.row, {\n            maxWidth: contentMaxInlineSize,\n            minHeight: showsSubtitle ? heights.withSubtitle : heights.plain,\n            paddingEnd: edgePadding(inset, hasTrailing),\n            paddingStart: edgePadding(inset, hasLeading),\n          })}\n        >\n          {hasLeading ? (\n            <Slot color={theme.colors.onSurface}>{leading}</Slot>\n          ) : null}\n          <View style={own.text}>\n            {hasContent(headline) ? (\n              <Text\n                role=\"heading\"\n                style={align === 'center' ? styles.center : undefined}\n                variant={HEADLINE_ROLES[collapse ? 'sm' : size]}\n              >\n                {headline}\n              </Text>\n            ) : null}\n            {showsSubtitle ? (\n              <Text\n                style={align === 'center' ? styles.center : undefined}\n                tone=\"muted\"\n                variant=\"bodyMedium\"\n              >\n                {subtitle}\n              </Text>\n            ) : null}\n          </View>\n          {hasTrailing ? (\n            <Slot color={theme.colors.onSurfaceVariant}>{trailing}</Slot>\n          ) : null}\n        </View>\n      </SafeAreaView>\n    </Animated.View>\n  )\n}\n\n// The row's padding on one edge, for the inset the call site gave. Where the\n// edge holds a slot the row stops short of the inset by GLYPH_INSET, clamped\n// at zero for an inset smaller than a glyph's own room.\nfunction edgePadding(inset: number, hasSlot: boolean): number {\n  return hasSlot ? Math.max(0, inset - GLYPH_INSET) : inset\n}\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's jsx-no-new-object-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction iconStyleOf(color: ColorValue): IconStyle {\n  return { color, size: ICON_SIZE }\n}\n\n// A slot's icons draw at 24dp in the slot's colour. An icon button inside it\n// hands its own icon the button's colour instead.\nfunction Slot({ children, color }: SlotProps) {\n  const own = stylesOf(useTheme())\n\n  return (\n    <IconStyleContext value={iconStyleOf(color)}>\n      <View style={own.slot}>{children}</View>\n    </IconStyleContext>\n  )\n}\n\n// The bar's surface, which takes the surface container role once the\n// content beneath has scrolled. It eases over medium 1 on the emphasized\n// curve, and arrives at once under reduced motion.\nfunction useFill(scrolled: boolean) {\n  const { colors, motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const fill = scrolled ? colors.surfaceContainer : colors.surface\n  const timing = {\n    duration: motion.durationMedium1,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    return {\n      backgroundColor: reduceMotion ? fill : withTiming(fill, timing),\n    }\n  })\n}\n\nexport { AppBar }\nexport type { AppBarProps }\n"],"mappings":"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"}

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

@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+import { Node } from "react-stately";
+//#region src/components/autocomplete/index.d.ts
+/**
+ * Whether a search keeps a row: handed the row's text, what has been typed
+ * and the row's entry in the collection, as React Aria's is.
+ */
+type AutocompleteFilter<T extends object = object> = (textValue: string, inputValue: string, node: Node<T>) => boolean;
+type AutocompleteProps<T extends object = object> = {
+  /**
+   * The search field and the list it filters, in whatever the page puts
+   * around them.
+   */
+  readonly children?: ReactNode;
+  /** What has been typed at first, when the autocomplete keeps its own. */
+  readonly defaultInputValue?: string;
+  /**
+   * Which rows a search keeps. Left out, a row is kept when its text
+   * contains what has been typed anywhere in it, ignoring case and accents.
+   */
+  readonly filter?: AutocompleteFilter<T>;
+  /** What has been typed, when the call site holds it. */
+  readonly inputValue?: string;
+  /** Called with what has been typed whenever an edit changes it. */
+  readonly onInputChange?: (value: string) => void;
+};
+/**
+ * A search field that filters the list under it. What has been typed is the
+ * autocomplete's: pass `inputValue` with `onInputChange` to control it, or
+ * `defaultInputValue` to let it keep its own. The field inside shows it, and
+ * its own `value` and `defaultValue` are not read there.
+ *
+ * ```tsx
+ * <Autocomplete>
+ *   <SearchField label="Search" placeholder="Search" />
+ *   <List aria-label="Results" selectionMode="single">
+ *     <List.Item id="first">First item</List.Item>
+ *   </List>
+ * </Autocomplete>
+ * ```
+ *
+ * It renders nothing of its own, so the field and the list sit wherever the
+ * page puts them, and the list says how many rows each search leaves to a
+ * screen reader.
+ */
+declare function Autocomplete<T extends object = object>({ children, defaultInputValue, filter, inputValue, onInputChange }: AutocompleteProps<T>): import("react").JSX.Element;
+//#endregion
+export { Autocomplete, type AutocompleteFilter, type AutocompleteProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/autocomplete/index.js

@@ -0,0 +1,87 @@
+import { AutocompleteContext, containsIn } from "../../autocomplete/index.js";
+import { localeOf } from "../../number/locale.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/autocomplete/index.tsx
+/**
+* A search field that filters the list under it. What has been typed is the
+* autocomplete's: pass `inputValue` with `onInputChange` to control it, or
+* `defaultInputValue` to let it keep its own. The field inside shows it, and
+* its own `value` and `defaultValue` are not read there.
+*
+* ```tsx
+* <Autocomplete>
+*   <SearchField label="Search" placeholder="Search" />
+*   <List aria-label="Results" selectionMode="single">
+*     <List.Item id="first">First item</List.Item>
+*   </List>
+* </Autocomplete>
+* ```
+*
+* It renders nothing of its own, so the field and the list sit wherever the
+* page puts them, and the list says how many rows each search leaves to a
+* screen reader.
+*/
+function Autocomplete(t0) {
+	const $ = c(14);
+	const { children, defaultInputValue: t1, filter, inputValue, onInputChange } = t0;
+	const [own, setOwn] = useState(t1 === void 0 ? "" : t1);
+	const current = inputValue ?? own;
+	let t2;
+	if ($[0] !== filter) {
+		t2 = filter ?? containsIn(localeOf(void 0));
+		$[0] = filter;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== current || $[3] !== t2) {
+		t3 = matchesOf(t2, current);
+		$[2] = current;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== onInputChange) {
+		t4 = setterOf(setOwn, onInputChange);
+		$[5] = onInputChange;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== current || $[8] !== t3 || $[9] !== t4) {
+		t5 = {
+			inputValue: current,
+			matches: t3,
+			setInputValue: t4
+		};
+		$[7] = current;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	const value = t5;
+	let t6;
+	if ($[11] !== children || $[12] !== value) {
+		t6 = /* @__PURE__ */ jsx(AutocompleteContext, {
+			value,
+			children
+		});
+		$[11] = children;
+		$[12] = value;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
+}
+function matchesOf(filter, inputValue) {
+	return (textValue, node) => filter(textValue, inputValue, node);
+}
+function setterOf(setOwn, onInputChange) {
+	return (value) => {
+		setOwn(value);
+		onInputChange?.(value);
+	};
+}
+//#endregion
+export { Autocomplete };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Node","useMemo","useState","AutocompleteValue","AutocompleteContext","containsIn","localeOf","AutocompleteFilter","textValue","inputValue","node","T","AutocompleteProps","children","defaultInputValue","filter","onInputChange","value","Autocomplete","t0","$","_c","t1","undefined","own","setOwn","current","t2","t3","matchesOf","t4","setterOf","t5","matches","setInputValue","t6","_c"],"sources":["../../../src/components/autocomplete/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Node } from 'react-stately'\n\nimport { useMemo, useState } from 'react'\n\nimport type { AutocompleteValue } from '../../autocomplete'\n\nimport { AutocompleteContext, containsIn } from '../../autocomplete'\nimport { localeOf } from '../../number/locale'\n\n// kanso-ui's Autocomplete, from the search page's search with suggestions: a\n// SearchField over a List, where typing narrows the rows the list shows. It\n// draws nothing of its own, as web's draws nothing: the bar is SearchField's,\n// the rows are List's, and where the two sit is the page's business. So it\n// takes no `style`, since there is nothing for one to land on.\n//\n// Three things are worth knowing, and the last two differ from web's.\n//\n// **Filtering is on by default,** as on web: `filter` falls back to a match\n// anywhere in a row's text, compared by an `Intl.Collator` in the device's\n// locale at base sensitivity, so case and accents are ignored, which is what\n// web's falls back to as well.\n//\n// **There is no virtual focus.** Web keeps the keyboard in the input while\n// the arrow keys move through the list. A touch screen has no arrow keys, so\n// the list's rows are pressed where they are, and a press on one selects it\n// or runs its action, as it does in any List. A list inside an Autocomplete\n// keeps the keyboard up through that press, with `keyboardShouldPersistTaps`\n// at `handled`, so a row is reached on the first tap rather than the one\n// that would otherwise only close the keyboard.\n//\n// **The count is announced.** Web says only that a search left nothing.\n// Here the list says how many rows a search leaves each time the number\n// changes, in React Aria's words for a ComboBox's count, and that it left\n// none in the empty row's: through a polite live region on Android and\n// under React Native Web, and `AccessibilityInfo` on iOS, which has no live\n// regions. The list's empty row is drawn as ever when nothing matches.\n\n/**\n * Whether a search keeps a row: handed the row's text, what has been typed\n * and the row's entry in the collection, as React Aria's is.\n */\ntype AutocompleteFilter<T extends object = object> = (\n  textValue: string,\n  inputValue: string,\n  node: Node<T>,\n) => boolean\n\ntype AutocompleteProps<T extends object = object> = {\n  /**\n   * The search field and the list it filters, in whatever the page puts\n   * around them.\n   */\n  readonly children?: ReactNode\n  /** What has been typed at first, when the autocomplete keeps its own. */\n  readonly defaultInputValue?: string\n  /**\n   * Which rows a search keeps. Left out, a row is kept when its text\n   * contains what has been typed anywhere in it, ignoring case and accents.\n   */\n  readonly filter?: AutocompleteFilter<T>\n  /** What has been typed, when the call site holds it. */\n  readonly inputValue?: string\n  /** Called with what has been typed whenever an edit changes it. */\n  readonly onInputChange?: (value: string) => void\n}\n\n/**\n * A search field that filters the list under it. What has been typed is the\n * autocomplete's: pass `inputValue` with `onInputChange` to control it, or\n * `defaultInputValue` to let it keep its own. The field inside shows it, and\n * its own `value` and `defaultValue` are not read there.\n *\n * ```tsx\n * <Autocomplete>\n *   <SearchField label=\"Search\" placeholder=\"Search\" />\n *   <List aria-label=\"Results\" selectionMode=\"single\">\n *     <List.Item id=\"first\">First item</List.Item>\n *   </List>\n * </Autocomplete>\n * ```\n *\n * It renders nothing of its own, so the field and the list sit wherever the\n * page puts them, and the list says how many rows each search leaves to a\n * screen reader.\n */\nfunction Autocomplete<T extends object = object>({\n  children,\n  defaultInputValue = '',\n  filter,\n  inputValue,\n  onInputChange,\n}: AutocompleteProps<T>) {\n  const [own, setOwn] = useState(defaultInputValue)\n  const current = inputValue ?? own\n  const value = useMemo<AutocompleteValue>(\n    () => ({\n      inputValue: current,\n      matches: matchesOf(filter ?? containsIn(localeOf(undefined)), current),\n      setInputValue: setterOf(setOwn, onInputChange),\n    }),\n    [current, filter, onInputChange],\n  )\n\n  return <AutocompleteContext value={value}>{children}</AutocompleteContext>\n}\n\n// The filter with what has been typed already in it, which is all a list\n// asks of a row.\nfunction matchesOf<T extends object>(\n  filter: AutocompleteFilter<T>,\n  inputValue: string,\n): AutocompleteValue['matches'] {\n  return (textValue, node) =>\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the rows are the call site's, which typed the filter it wrote for them\n    filter(textValue, inputValue, node as Node<T>)\n}\n\n// Keeps an edit as the autocomplete's own value and reports it, so one the\n// call site controls is told and one it does not still filters.\nfunction setterOf(\n  setOwn: (value: string) => void,\n  onInputChange: ((value: string) => void) | undefined,\n) {\n  return (value: string) => {\n    setOwn(value)\n    onInputChange?.(value)\n  }\n}\n\nexport { Autocomplete }\nexport type { AutocompleteFilter, AutocompleteProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,SAAAmB,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAiD,MAAA,EAAAR,UAAAC,mBAAAQ,IAAAP,QAAAN,YAAAO,kBAAAG;CAO/C,MAAA,CAAAK,KAAAC,UAAsBvB,SALtBoB,OAAAC,KAAAA,IAAA,KAAAD,EAKgD;CAChD,MAAAI,UAAgBjB,cAAAe;CAAiB,IAAAG;CAAA,IAAAP,EAAA,OAAAL,QAAA;EAIVY,KAAAZ,UAAUV,WAAWC,SAASiB,KAAAA,CAAS,CAAC;EAACH,EAAA,KAAAL;EAAAK,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAM,WAAAN,EAAA,OAAAO,IAAA;EAAnDC,KAAAC,UAAUF,IAA2CD,OAAO;EAACN,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAJ,eAAA;EACvDc,KAAAC,SAASN,QAAQT,aAAa;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAM,WAAAN,EAAA,OAAAQ,MAAAR,EAAA,OAAAU,IAAA;EAHzCE,KAAA;GAAAvB,YACOiB;GAAOO,SACVL;GAA6DM,eACvDJ;EACjB;EAACV,EAAA,KAAAM;EAAAN,EAAA,KAAAQ;EAAAR,EAAA,KAAAU;EAAAV,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CALH,MAAAH,QACSe;CAMR,IAAAG;CAAA,IAAAf,EAAA,QAAAP,YAAAO,EAAA,QAAAH,OAAA;EAEMkB,KAAA,oBAAC,qBAAD;GAA4BlB;GAAQJ;EAAhB,CAAA;EAA+CO,EAAA,MAAAP;EAAAO,EAAA,MAAAH;EAAAG,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAAnEe;AAAmE;AAK5E,SAASN,UACPd,QACAN,YAC8B;CAC9B,QAAQD,WAAWE,SAEjBK,OAAOP,WAAWC,YAAYC,IAAe;AACjD;AAIA,SAASqB,SACPN,QACAT,eACA;CACA,QAAQC,UAAkB;EACxBQ,OAAOR,KAAK;EACZD,gBAAgBC,KAAK;CACvB;AACF"}

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

@@ -81,7 +81,7 @@ type ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';
  * target through `hitSlop`, which a `hitSlop` of the call site's own replaces.
  * `style`, `ref` and `testID` land on the `Pressable`.
  */
-declare function Button({ children, defaultSelected, disableRipple, hitSlop: ownHitSlop, href, icon, isDisabled, isPending, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, shape, size, slot, style, type, variant, ...props }: ButtonProps): import("react").JSX.Element;
+declare function Button({ children, defaultSelected, delayLongPress, disableRipple, hitSlop: ownHitSlop, href, icon, isDisabled, isPending, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, ref, shape, size, slot, style, type, variant, ...props }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant };
 //# sourceMappingURL=index.d.ts.map