@kanso-labs/react-native-kanso-ui 0.5.0 → 0.7.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";