@kanso-labs/react-native-kanso-ui 0.5.0 → 0.7.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/avatar/index.d.ts

@@ -1,6 +1,6 @@
 import { MarkImageProps } from "../../mark/index.js";
-import { ComponentRef, Ref } from "react";
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/avatar/index.d.ts
 type AvatarProps = Omit<ViewProps, 'children' | 'style'> & {
   /**

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

@@ -1,6 +1,6 @@
 import { ButtonLinkForm, ButtonPressForm, ButtonToggleForm } from "../../button/index.js";
-import { ComponentRef, ReactNode, Ref } from "react";
 import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/button/index.d.ts
 type ButtonForm = ButtonLinkForm | ButtonPressForm | (ButtonToggleForm & {
   /**

package/dist/components/button/index.js

@@ -1,15 +1,15 @@
 import { IconStyleContext } from "../../glyphs/icon-style.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 { AnimatedPressable, HEIGHTS, OUTLINE_WIDTHS, PRESSED_CORNERS, buttonStyles, toggleState, useButtonAction, useCorner, useSlotTrigger } from "../../button/index.js";
 import { palettesOf } from "../../button/palettes.js";
 import { BUSY, CONCEALED, PendingContent, PendingRing, pendingStyles, usePending } from "../../button/pending.js";
-import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { StyleSheet, Text, useWindowDimensions } from "react-native";
 import Animated from "react-native-reanimated";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/button/index.tsx
 const DISABLED = {
 	elevated: "filledDisabled",

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

@@ -0,0 +1,51 @@
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
+import { CalendarProps, DateValue } from "react-stately/useCalendarState";
+//#region src/components/calendar/index.d.ts
+type CalendarProps$1<T extends DateValue = DateValue> = Pick<CalendarProps<T>, 'defaultFocusedValue' | 'defaultValue' | 'firstDayOfWeek' | 'focusedValue' | 'isDateUnavailable' | 'isDisabled' | 'isReadOnly' | 'maxValue' | 'minValue' | 'onChange' | 'onFocusChange' | 'value'> & {
+  /**
+   * The calendar's name. The month shown is added to it, as React Aria adds
+   * it on web.
+   */
+  readonly 'aria-label'?: string;
+  /**
+   * The BCP 47 locale the calendar is written in: its month and weekday
+   * names, its digits, its first day of the week and its calendar system.
+   * Defaults to the device's.
+   */
+  readonly locale?: string;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * Whether the header draws the month and the year as menu buttons, each
+   * opening a list of them in the grid's place, as the docked date picker's
+   * header does, rather than one heading between the chevrons. For a date
+   * far from the one shown, such as a date of birth: the year list runs a
+   * century either side of the year shown, or to `minValue` and `maxValue`
+   * where they are closer.
+   * @default false
+   */
+  readonly showMonthYearMenus?: boolean;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+/**
+ * A month calendar for picking a date. The value is an
+ * `@internationalized/date` value, as on web: pass `value` with `onChange` to
+ * control it, or `defaultValue` to let it keep its own.
+ *
+ * ```tsx
+ * import { getLocalTimeZone, today } from '@internationalized/date'
+ *
+ * <Calendar aria-label="Label" defaultValue={today(getLocalTimeZone())} />
+ * ```
+ *
+ * `minValue` and `maxValue` bound it, and `isDateUnavailable` rules
+ * individual dates out. Name it with `aria-label`; the month shown is added
+ * to the name.
+ *
+ * `style`, `ref` and `testID` land on the container.
+ */
+declare function Calendar<T extends DateValue = DateValue>({ 'aria-label': ariaLabel, locale, ref, showMonthYearMenus, style, testID, ...props }: CalendarProps$1<T>): import("react").JSX.Element;
+//#endregion
+export { Calendar, type CalendarProps$1 as CalendarProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/calendar/index.js

@@ -0,0 +1,82 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles } from "../../theme/styles.js";
+import { localeOf } from "../../number/locale.js";
+import { stylesOf } from "../../calendar/styles.js";
+import { CalendarFrame, visibleMonthOf } from "../../calendar/index.js";
+import { c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { createCalendar } from "@internationalized/date";
+import { useCalendarState } from "react-stately/useCalendarState";
+//#region src/components/calendar/index.tsx
+/**
+* A month calendar for picking a date. The value is an
+* `@internationalized/date` value, as on web: pass `value` with `onChange` to
+* control it, or `defaultValue` to let it keep its own.
+*
+* ```tsx
+* import { getLocalTimeZone, today } from '@internationalized/date'
+*
+* <Calendar aria-label="Label" defaultValue={today(getLocalTimeZone())} />
+* ```
+*
+* `minValue` and `maxValue` bound it, and `isDateUnavailable` rules
+* individual dates out. Name it with `aria-label`; the month shown is added
+* to the name.
+*
+* `style`, `ref` and `testID` land on the container.
+*/
+function Calendar(t0) {
+	const $ = c(12);
+	const { "aria-label": ariaLabel, locale, ref, showMonthYearMenus: t1, style, testID, ...props } = t0;
+	const showMonthYearMenus = t1 === void 0 ? false : t1;
+	const writtenIn = localeOf(locale);
+	const own = stylesOf(useTheme());
+	const state = useCalendarState({
+		...props,
+		createCalendar,
+		locale: writtenIn
+	});
+	const month = visibleMonthOf(state, writtenIn);
+	const T0 = View;
+	const t2 = ariaLabel === void 0 ? month : `${ariaLabel}, ${month}`;
+	const t3 = "group";
+	const t4 = composeStyles(own.root, style);
+	let t5;
+	if ($[0] !== props.firstDayOfWeek || $[1] !== showMonthYearMenus || $[2] !== state || $[3] !== writtenIn) {
+		t5 = /* @__PURE__ */ jsx(CalendarFrame, {
+			firstDayOfWeek: props.firstDayOfWeek,
+			locale: writtenIn,
+			showMonthYearMenus,
+			state
+		});
+		$[0] = props.firstDayOfWeek;
+		$[1] = showMonthYearMenus;
+		$[2] = state;
+		$[3] = writtenIn;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== T0 || $[6] !== ref || $[7] !== t2 || $[8] !== t4 || $[9] !== t5 || $[10] !== testID) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			"aria-label": t2,
+			ref,
+			role: t3,
+			style: t4,
+			testID,
+			children: t5
+		});
+		$[5] = T0;
+		$[6] = ref;
+		$[7] = t2;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = testID;
+		$[11] = t6;
+	} else t6 = $[11];
+	return t6;
+}
+//#endregion
+export { Calendar };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","StyleProp","ViewStyle","DateValue","CalendarProps","StatelyCalendarProps","createCalendar","View","useCalendarState","CalendarFrame","visibleMonthOf","stylesOf","localeOf","useTheme","composeStyles","Pick","T","locale","ref","showMonthYearMenus","style","testID","Calendar","t0","$","_c","ariaLabel","t1","props","undefined","writtenIn","own","state","month","T0","t2","t3","t4","root","t5","firstDayOfWeek","t6","_c"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewStyle } from 'react-native'\nimport type {\n  DateValue,\n  CalendarProps as StatelyCalendarProps,\n} from 'react-stately/useCalendarState'\n\nimport { createCalendar } from '@internationalized/date'\nimport { View } from 'react-native'\nimport { useCalendarState } from 'react-stately/useCalendarState'\n\nimport { CalendarFrame, visibleMonthOf } from '../../calendar'\nimport { stylesOf } from '../../calendar/styles'\nimport { localeOf } from '../../number/locale'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// kanso-ui's Calendar, the date pickers page's docked calendar: a month grid\n// with a circle on the selected date and an outline on today. Its values are\n// that page's: a 360dp container on the high surface container, 48dp date\n// cells with a 40dp state layer inside them, body large for both the weekday\n// row and the dates, and primary for the selected circle and for today's\n// outline. The parts are in src/calendar.\n//\n// The state is React Stately's `useCalendarState`, which web's React Aria\n// calendar is built on, over `@internationalized/date`, so the selection,\n// the bounds and the locale's calendar, first day of the week and digits\n// behave as they do on web.\n//\n// The page's container is 456dp tall, which this does not take: that height\n// is a picker's, counting a headline and an action row the calendar itself\n// does not draw. What is held instead is the grid, at six weeks, the most any\n// month occupies, so the calendar keeps its height as the month moves and a\n// shorter month leaves its last rows empty.\n//\n// `showMonthYearMenus` draws the page's docked header instead of one heading:\n// the month's menu button between the chevrons that step it and the year's\n// after them, each opening its list where the grid was, as web's does. The\n// page draws the lists there, and a calendar inside a picker is already in\n// a panel, so a menu over it would be a panel over a panel.\n//\n// Five things are this component's own, as on web.\n//\n// **The year menu has no chevrons of its own.** The page draws a pair either\n// side of it that step a year; the year list reaches any year within a\n// century of the one shown in one press, or any the bounds allow where they\n// are closer.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The circle is the pressable, centred in a 48dp column and a 48dp\n// row, and its `hitSlop` reaches the 4dp past it on every side, so the whole\n// square takes the press. The chevrons and the menu buttons reach a 48dp\n// target the same way.\n//\n// **It narrows to its container.** The page's docked calendar is 360dp, and\n// a compact window leaves 328dp between its margins, so the calendar is 360\n// at most and the columns share whatever is left below that.\n//\n// **A date from the month either side is faded because it is disabled**, as\n// React Aria disables those dates: the page's 38% either way. A date\n// `isDateUnavailable` rules out is struck through at full contrast instead,\n// since a reader can still land on it and has to read it.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and\n// the on-primary label. A selected today takes the fill.\n//\n// Web's month changes at once. Here **the weeks slide in** from the side the\n// new month comes from, Material Design's shared axis transition, and change\n// at once under reduced motion.\n//\n// **The locale is a prop**, defaulting to the device's, where web reads it\n// from React Aria's `I18nProvider`. The words the calendar writes, its\n// chevrons' names and its dates', are React Aria's in that locale.\n\ntype CalendarProps<T extends DateValue = DateValue> = Pick<\n  StatelyCalendarProps<T>,\n  | 'defaultFocusedValue'\n  | 'defaultValue'\n  | 'firstDayOfWeek'\n  | 'focusedValue'\n  | 'isDateUnavailable'\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'maxValue'\n  | 'minValue'\n  | 'onChange'\n  | 'onFocusChange'\n  | 'value'\n> & {\n  /**\n   * The calendar's name. The month shown is added to it, as React Aria adds\n   * it on web.\n   */\n  readonly 'aria-label'?: string\n  /**\n   * The BCP 47 locale the calendar is written in: its month and weekday\n   * names, its digits, its first day of the week and its calendar system.\n   * Defaults to the device's.\n   */\n  readonly locale?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as the docked date picker's\n   * header does, rather than one heading between the chevrons. For a date\n   * far from the one shown, such as a date of birth: the year list runs a\n   * century either side of the year shown, or to `minValue` and `maxValue`\n   * where they are closer.\n   * @default false\n   */\n  readonly showMonthYearMenus?: boolean\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\n/**\n * A month calendar for picking a date. The value is an\n * `@internationalized/date` value, as on web: pass `value` with `onChange` to\n * control it, or `defaultValue` to let it keep its own.\n *\n * ```tsx\n * import { getLocalTimeZone, today } from '@internationalized/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, and `isDateUnavailable` rules\n * individual dates out. Name it with `aria-label`; the month shown is added\n * to the name.\n *\n * `style`, `ref` and `testID` land on the container.\n */\nfunction Calendar<T extends DateValue = DateValue>({\n  'aria-label': ariaLabel,\n  locale,\n  ref,\n  showMonthYearMenus = false,\n  style,\n  testID,\n  ...props\n}: CalendarProps<T>) {\n  const writtenIn = localeOf(locale)\n  const own = stylesOf(useTheme())\n  const state = useCalendarState<T>({\n    ...props,\n    createCalendar,\n    locale: writtenIn,\n  })\n  const month = visibleMonthOf(state, writtenIn)\n\n  return (\n    <View\n      aria-label={ariaLabel === undefined ? month : `${ariaLabel}, ${month}`}\n      ref={ref}\n      role=\"group\"\n      style={composeStyles<ViewStyle>(own.root, style)}\n      testID={testID}\n    >\n      <CalendarFrame\n        firstDayOfWeek={props.firstDayOfWeek}\n        locale={writtenIn}\n        showMonthYearMenus={showMonthYearMenus}\n        state={state}\n      />\n    </View>\n  )\n}\n\nexport type { CalendarProps }\n\nexport { Calendar }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsIA,SAAAuB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAmD,MAAA,EAAA,cAAAC,WAAAT,QAAAC,KAAAC,oBAAAQ,IAAAP,OAAAC,QAAA,GAAAO,UAAAL;CAIjD,MAAAJ,qBAAAQ,OAAAE,KAAAA,IAAA,QAAAF;CAKA,MAAAG,YAAkBlB,SAASK,MAAM;CACjC,MAAAc,MAAYpB,SAASE,SAAS,CAAC;CAC/B,MAAAmB,QAAcxB,iBAAoB;EAAA,GAC7BoB;EAAKtB;EAAAW,QAEAa;CACV,CAAC;CACD,MAAAG,QAAcvB,eAAesB,OAAOF,SAAS;CAG1C,MAAAI,KAAA3B;CACa,MAAA4B,KAAAT,cAAcG,KAAAA,IAAdI,QAAA,GAAqCP,UAAS,IAAKO;CAE1D,MAAAG,KAAA;CACE,MAAAC,KAAAvB,cAAyBiB,IAAGO,MAAOlB,KAAK;CAAC,IAAAmB;CAAA,IAAAf,EAAA,OAAAI,MAAAY,kBAAAhB,EAAA,OAAAL,sBAAAK,EAAA,OAAAQ,SAAAR,EAAA,OAAAM,WAAA;EAGhDS,KAAA,oBAAC,eAAD;GACkB,gBAAAX,MAAKY;GACbV,QAAAA;GACYX;GACba;EAAK,CAAA;EACZR,EAAA,KAAAI,MAAAY;EAAAhB,EAAA,KAAAL;EAAAK,EAAA,KAAAQ;EAAAR,EAAA,KAAAM;EAAAN,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAU,MAAAV,EAAA,OAAAN,OAAAM,EAAA,OAAAW,MAAAX,EAAA,OAAAa,MAAAb,EAAA,OAAAe,MAAAf,EAAA,QAAAH,QAAA;EAZJoB,KAAA,oBAAC,IAAD;GACc,cAAAN;GACPjB;GACA,MAAAkB;GACE,OAAAC;GACChB;GAERkB,UAAAA;EAPG,CAAA;EAaEf,EAAA,KAAAU;EAAAV,EAAA,KAAAN;EAAAM,EAAA,KAAAW;EAAAX,EAAA,KAAAa;EAAAb,EAAA,KAAAe;EAAAf,EAAA,MAAAH;EAAAG,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAbPiB;AAaO"}

package/dist/components/card/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";
 //#region src/components/card/index.d.ts
 type CardBaseProps = {
   readonly children?: ReactNode;

package/dist/components/card/index.js

@@ -1,11 +1,11 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
-import { useLinkPress } from "../../router/index.js";
-import { withOpacity } from "../../theme/color.js";
 import { usePressFeedback } from "../../press/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { useLinkPress } from "../../router/index.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable, StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/card/index.tsx
 const paddings = themedStyles(({ spacing }) => StyleSheet.create({
 	default: { padding: spacing.lg },

package/dist/components/checkbox/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/checkbox/index.d.ts
 type CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {
   /**

package/dist/components/checkbox/index.js

@@ -5,9 +5,9 @@ import { controlStylesOf } from "../../control/styles.js";
 import { ControlLabel, ControlMessage, describedBy, messageOf } from "../../control/index.js";
 import { CheckboxBox } from "../../control/checkbox-box.js";
 import { c } from "react/compiler-runtime";
+import { Pressable, View } from "react-native";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Pressable, View } from "react-native";
 import { useToggleState } from "react-stately/useToggleState";
 //#region src/components/checkbox/index.tsx
 const LAYERS = {

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

@@ -1,5 +1,5 @@
-import { ComponentRef, ReactNode, Ref } from "react";
 import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/chip/index.d.ts
 /** An assist or suggestion chip: an action, drawn as a plain button. */
 type ChipActionProps = ChipBaseProps & {

package/dist/components/chip/index.js

@@ -1,7 +1,7 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles } from "../../theme/styles.js";
-import { AnimatedPressable, toggleState, useButtonAction } from "../../button/index.js";
 import { usePressFeedback } from "../../press/index.js";
+import { AnimatedPressable, toggleState, useButtonAction } from "../../button/index.js";
 import { shadowsOf, stylesOf } from "../../chip/styles.js";
 import { ChipGlyph, ChipLabel, measureThen, paintOf, targetOf, useEasedColors } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";

package/dist/components/chip-group/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentRef, ReactElement, ReactNode, Ref } from "react";
 import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactElement, ReactNode, Ref } from "react";
 import { Key, Selection, SelectionMode } from "react-stately";
 //#region src/components/chip-group/index.d.ts
 type ChipGroupChipProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'style'> & {