@kanso-labs/react-native-kanso-ui 0.8.0 → 0.9.0

package/dist/badge/index.js

@@ -1,76 +1,15 @@
-import { useTheme } from "../theme/scope.js";
-import { composeStyles } from "../theme/styles.js";
-import { useTypeRole } from "../typography/roles.js";
-import { formatCount } from "../number/count.js";
-import { useLocaleOf } from "../i18n/provider.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";
+import { createContext } from "react";
 //#region src/badge/index.tsx
 /**
-* A badge on the top trailing corner of the icon it wraps: the small dot, or
-* with `count` the large badge holding the number.
+* Whether a large badge joins the flow after what it is drawn on rather than
+* standing over its corner. A navigation destination sets its label beside
+* its icon in its horizontal forms, and a count overhangs the icon by up to
+* 22dp on that side: the destination puts the mark in the flow there, so the
+* label starts after it rather than under it. The small badge stays inside
+* its icon's box, so nothing has to make room for it.
 */
-function Badge(t0) {
-	const $ = c(13);
-	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");
-	const locale = useLocaleOf(void 0);
-	let t3;
-	if ($[0] !== count || $[1] !== locale || $[2] !== max) {
-		t3 = count === void 0 ? void 0 : countOf(count, max, locale);
-		$[0] = count;
-		$[1] = locale;
-		$[2] = max;
-		$[3] = t3;
-	} else t3 = $[3];
-	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 ($[4] !== T1 || $[5] !== t6 || $[6] !== t7) {
-		t8 = /* @__PURE__ */ jsx(T1, {
-			"aria-hidden": t5,
-			style: t6,
-			children: t7
-		});
-		$[4] = T1;
-		$[5] = t6;
-		$[6] = t7;
-		$[7] = t8;
-	} else t8 = $[7];
-	let t9;
-	if ($[8] !== T0 || $[9] !== children || $[10] !== t4.anchor || $[11] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(T0, {
-			style: t4.anchor,
-			children: [children, t8]
-		});
-		$[8] = T0;
-		$[9] = children;
-		$[10] = t4.anchor;
-		$[11] = t8;
-		$[12] = t9;
-	} else t9 = $[12];
-	return t9;
-}
-function countOf(count, max, locale) {
-	return count > max ? `${formatCount(max, locale)}+` : formatCount(count, locale);
-}
+const BadgeInFlowContext = createContext(false);
 //#endregion
-export { Badge };
+export { BadgeInFlowContext };
 
 //# sourceMappingURL=index.js.map

package/dist/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TextStyle","ViewStyle","Text","NativeText","View","useLocaleOf","formatCount","useTheme","composeStyles","useTypeRole","styles","stylesOf","BadgeProps","children","count","inFlow","max","Badge","t0","$","_c","t1","t2","undefined","own","role","locale","t3","countOf","label","T0","T1","t5","t6","mark","small","large","over","t7","space","t8","t9","t4","anchor","_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 { useLocaleOf } from '../i18n/provider'\nimport { formatCount } from '../number/count'\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\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 locale = useLocaleOf(undefined)\n  const label = count === undefined ? undefined : countOf(count, max, locale)\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 locale's digits and grouping, as web writes it in the\n// provider's.\nfunction countOf(count: number, max: number, locale: string) {\n  return count > max\n    ? `${formatCount(max, locale)}+`\n    : formatCount(count, locale)\n}\n\nexport type { BadgeProps }\n\nexport { Badge }\n"],"mappings":";;;;;;;;;;;;;;AAqEA,SAAAkB,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAe,MAAA,EAAAP,UAAAC,OAAAC,QAAAM,IAAAL,KAAAM,OAAAJ;CAAmB,MAAAH,SAAAM,OAAAE,KAAAA,IAAA,QAAAF;CAAgB,MAAAL,MAAAM,OAAAC,KAAAA,IAAA,MAAAD;CAChD,MAAAE,MAAYb,SAASJ,SAAS,CAAC;CAC/B,MAAAkB,OAAahB,YAAY,YAAY;CACrC,MAAAiB,SAAerB,YAAYkB,KAAAA,CAAS;CAAC,IAAAI;CAAA,IAAAR,EAAA,OAAAL,SAAAK,EAAA,OAAAO,UAAAP,EAAA,OAAAH,KAAA;EACvBW,KAAAb,UAAUS,KAAAA,IAAVA,KAAAA,IAAkCK,QAAQd,OAAOE,KAAKU,MAAM;EAACP,EAAA,KAAAL;EAAAK,EAAA,KAAAO;EAAAP,EAAA,KAAAH;EAAAG,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAA3E,MAAAU,QAAcF;CAGX,MAAAG,KAAA1B;CAAYM,MAAAA,KAAAA;CAEV,MAAAqB,KAAA3B;CACC,MAAA4B,KAAA;CACO,MAAAC,KAAAzB,cACLgB,IAAGU,MACHL,UAAUN,KAAAA,IACNb,OAAMyB,QADV,CAEKX,IAAGY,OAAQrB,SAASL,OAAMK,SAAUL,OAAM2B,IAAK,CACtD;CAEC,MAAAC,KAAAT,UAAUN,KAAAA,IAAV,OAAA,qBAAA,UAAA,EAAA,UAAA,CAEG,oBAACsB,MAAD;EAAmB,OAAAnC,OAAM6B;EAAQ,UAAA;CAAtB,CAAA,GACX,oBAACM,MAAD;EAAmB,OAAArC,cAAyBiB,MAAMD,IAAGV,KAAM;EACxDe,UAAAA;CADQ,CAAA,CAEE,EAAA,CAAA;CAEhB,IAAAW;CAAA,IAAArB,EAAA,OAAAY,MAAAZ,EAAA,OAAAc,MAAAd,EAAA,OAAAmB,IAAA;EAhBHE,KAAA,oBAAC,IAAD;GACE,eAAAR;GACO,OAAAC;GAONK,UAAAA;EATE,CAAA;EAiBEnB,EAAA,KAAAY;EAAAZ,EAAA,KAAAc;EAAAd,EAAA,KAAAmB;EAAAnB,EAAA,KAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,OAAAW,MAAAX,EAAA,OAAAN,YAAAM,EAAA,QAAAuB,GAAAC,UAAAxB,EAAA,QAAAqB,IAAA;EAnBTC,KAAA,qBAAC,IAAD;GAAa,OAAA/B,GAAMiC;GAAnB,UAAA,CACG9B,UACD2B,EAFG;;EAoBErB,EAAA,KAAAW;EAAAX,EAAA,KAAAN;EAAAM,EAAA,MAAAuB,GAAAC;EAAAxB,EAAA,MAAAqB;EAAArB,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,OApBPsB;AAoBO;AAMX,SAASb,QAAQd,OAAeE,KAAaU,QAAgB;CAC3D,OAAOZ,QAAQE,MACX,GAAGV,YAAYU,KAAKU,MAAM,EAAC,KAC3BpB,YAAYQ,OAAOY,MAAM;AAC/B"}
+{"version":3,"file":"index.js","names":["createContext","BadgeInFlowContext"],"sources":["../../src/badge/index.tsx"],"sourcesContent":["import { createContext } from 'react'\n\n// What a component drawing a badge can say about where its large mark goes,\n// as src/badge does on web. A module of its own rather than a part of the one\n// place that uses it, since the badge reads it and that place draws the\n// badge.\n\n/**\n * Whether a large badge joins the flow after what it is drawn on rather than\n * standing over its corner. A navigation destination sets its label beside\n * its icon in its horizontal forms, and a count overhangs the icon by up to\n * 22dp on that side: the destination puts the mark in the flow there, so the\n * label starts after it rather than under it. The small badge stays inside\n * its icon's box, so nothing has to make room for it.\n */\nconst BadgeInFlowContext = createContext(false)\n\nexport { BadgeInFlowContext }\n"],"mappings":";;;;;;;;;;AAeA,MAAMC,qBAAqBD,cAAc,KAAK"}

package/dist/button/index.js

@@ -1,7 +1,7 @@
 import { useTheme } from "../theme/scope.js";
+import { useOpenLink } from "../router/index.js";
 import { FormContext } from "../form/index.js";
 import { refsOf } from "../ref/index.js";
-import { useOpenLink } from "../router/index.js";
 import { ButtonSlotContext } from "./slots.js";
 import { c } from "react/compiler-runtime";
 import { Platform, Pressable, StyleSheet } from "react-native";

package/dist/button/palettes.d.ts

@@ -0,0 +1,2 @@
+import "../index.js";
+import { ViewStyle } from "react-native";

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

@@ -0,0 +1,48 @@
+import { View, ViewProps } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/badge/index.d.ts
+type BadgeProps = Omit<ViewProps, 'children'> & {
+  /**
+   * What the badge is drawn on, usually an icon at 24dp. Left out, the badge
+   * is the mark alone, standing in the line after what comes before it.
+   */
+  readonly children?: ReactNode;
+  /**
+   * The number to show, which draws the page's large badge. Left out, the
+   * badge is the small 6dp dot, which flags without counting. A count of 0
+   * still draws, so leave the badge out when there is nothing to count.
+   */
+  readonly count?: number | undefined;
+  /**
+   * The largest count drawn as itself. Above it the badge reads `max` and a
+   * plus, which is the page's 999+ at the default.
+   * @default 999
+   */
+  readonly max?: number;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+};
+/**
+ * A badge on the top trailing corner of what it wraps, usually an icon: the
+ * small dot, or with `count` the large badge holding a number. The mark is
+ * hidden from a screen reader, so put what it says in the name of the
+ * control it sits on.
+ *
+ * ```tsx
+ * <IconButton aria-label="Label, 3 new">
+ *   <Badge count={3}>{icon}</Badge>
+ * </IconButton>
+ * ```
+ *
+ * Given no children, the mark stands alone in the line, as a tab draws it
+ * after its label. The count is written in the digits of the
+ * `I18nProvider`'s locale, or the device's outside one.
+ *
+ * `style`, `ref` and `testID` land on the view wrapping what the badge is
+ * drawn on, and a `style` there applies over the badge's own. Like any view,
+ * it stretches across a column it sits in on its own, which moves the mark
+ * to the column's edge, so a call site placing one there sets `alignSelf`.
+ */
+declare function Badge({ children, count, max, style, ...props }: BadgeProps): import("react").JSX.Element;
+//#endregion
+export { Badge, type BadgeProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.js

@@ -0,0 +1,122 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { formatCount } from "../../number/count.js";
+import { useLocaleOf } from "../../i18n/provider.js";
+import { BadgeInFlowContext } from "../../badge/index.js";
+import { styles, stylesOf } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { Text, View } from "react-native";
+import { use } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/badge/index.tsx
+/**
+* A badge on the top trailing corner of what it wraps, usually an icon: the
+* small dot, or with `count` the large badge holding a number. The mark is
+* hidden from a screen reader, so put what it says in the name of the
+* control it sits on.
+*
+* ```tsx
+* <IconButton aria-label="Label, 3 new">
+*   <Badge count={3}>{icon}</Badge>
+* </IconButton>
+* ```
+*
+* Given no children, the mark stands alone in the line, as a tab draws it
+* after its label. The count is written in the digits of the
+* `I18nProvider`'s locale, or the device's outside one.
+*
+* `style`, `ref` and `testID` land on the view wrapping what the badge is
+* drawn on, and a `style` there applies over the badge's own. Like any view,
+* it stretches across a column it sits in on its own, which moves the mark
+* to the column's edge, so a call site placing one there sets `alignSelf`.
+*/
+function Badge(t0) {
+	const $ = c(22);
+	let children;
+	let count;
+	let props;
+	let style;
+	let t1;
+	if ($[0] !== t0) {
+		({children, count, max: t1, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = count;
+		$[3] = props;
+		$[4] = style;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		count = $[2];
+		props = $[3];
+		style = $[4];
+		t1 = $[5];
+	}
+	const max = t1 === void 0 ? 999 : t1;
+	const own = stylesOf(useTheme());
+	const role = useTypeRole("labelSmall");
+	const locale = useLocaleOf(void 0);
+	const inFlow = use(BadgeInFlowContext);
+	let t2;
+	if ($[6] !== count || $[7] !== locale || $[8] !== max) {
+		t2 = count === void 0 ? void 0 : countOf(count, max, locale);
+		$[6] = count;
+		$[7] = locale;
+		$[8] = max;
+		$[9] = t2;
+	} else t2 = $[9];
+	const label = t2;
+	const alone = children === void 0 || children === null;
+	const T0 = View;
+	let t3;
+	if ($[10] !== style) {
+		t3 = composeStyles(styles.anchor, style);
+		$[10] = style;
+		$[11] = t3;
+	} else t3 = $[11];
+	const T1 = View;
+	const t4 = true;
+	const t5 = composeStyles(own.mark, label === void 0 ? [styles.small, alone ? styles.alone : styles.smallOver] : [own.large, alone ? styles.alone : inFlow ? styles.inFlow : styles.over]);
+	const t6 = label === void 0 ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {
+		style: styles.space,
+		children: " "
+	}), /* @__PURE__ */ jsx(Text, {
+		style: composeStyles(role, own.count),
+		children: label
+	})] });
+	let t7;
+	if ($[12] !== T1 || $[13] !== t5 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T1, {
+			"aria-hidden": t4,
+			style: t5,
+			children: t6
+		});
+		$[12] = T1;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== T0 || $[17] !== children || $[18] !== props || $[19] !== t3 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(T0, {
+			...props,
+			style: t3,
+			children: [children, t7]
+		});
+		$[16] = T0;
+		$[17] = children;
+		$[18] = props;
+		$[19] = t3;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	return t8;
+}
+function countOf(count, max, locale) {
+	return count > max ? `${formatCount(max, locale)}+` : formatCount(count, locale);
+}
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","TextStyle","ViewProps","ViewStyle","use","Text","NativeText","View","BadgeInFlowContext","useLocaleOf","formatCount","useTheme","composeStyles","useTypeRole","styles","stylesOf","BadgeProps","Omit","children","count","max","ref","Badge","t0","$","_c","props","style","t1","undefined","own","role","locale","inFlow","t2","countOf","label","alone","T0","t3","anchor","T1","t4","t5","mark","small","smallOver","large","over","t6","space","t7","t8","_c","NativeText"],"sources":["../../../src/components/badge/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\n\nimport { use } from 'react'\nimport { Text as NativeText, View } from 'react-native'\n\nimport { BadgeInFlowContext } from '../../badge'\nimport { useLocaleOf } from '../../i18n/provider'\nimport { formatCount } from '../../number/count'\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: a mark on the corner\n// of an icon that flags something new there, either as the 6dp small badge\n// or as the 16dp large badge holding a count. Both are the error pair, the\n// error role with the count in on error, on a full corner, and the count is\n// label small, capped with a plus, as \"999+\".\n//\n// The badge wraps what it is drawn on, usually an icon, and places the mark\n// against that view's box, which is what the page measures from. The small\n// badge fills the icon's top trailing 6dp square. The large badge's bottom\n// leading corner sits 14dp down and 12dp in from the icon's top trailing\n// corner, so it stands 2dp above the icon and grows toward the end as its\n// count lengthens. Both are placed by `start` and `end`, so the mark stays on\n// the trailing corner under right-to-left.\n//\n// Given nothing to wrap, the badge is the mark alone, standing in the line\n// rather than over a corner. That is the form the tabs page draws after a\n// label with no icon above 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 = Omit<ViewProps, 'children'> & {\n  /**\n   * What the badge is drawn on, usually an icon at 24dp. Left out, the badge\n   * is the mark alone, standing in the line after what comes before it.\n   */\n  readonly children?: ReactNode\n  /**\n   * The number to show, which draws the page's large badge. Left out, the\n   * badge is the small 6dp dot, which flags without counting. A count of 0\n   * still draws, so leave the badge out when there is nothing to count.\n   */\n  readonly count?: number | undefined\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  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/**\n * A badge on the top trailing corner of what it wraps, usually an icon: the\n * small dot, or with `count` the large badge holding a number. The mark is\n * hidden from a screen reader, so put what it says in the name of the\n * control it sits on.\n *\n * ```tsx\n * <IconButton aria-label=\"Label, 3 new\">\n *   <Badge count={3}>{icon}</Badge>\n * </IconButton>\n * ```\n *\n * Given no children, the mark stands alone in the line, as a tab draws it\n * after its label. The count is written in the digits of the\n * `I18nProvider`'s locale, or the device's outside one.\n *\n * `style`, `ref` and `testID` land on the view wrapping what the badge is\n * drawn on, and a `style` there applies over the badge's own. Like any view,\n * it stretches across a column it sits in on its own, which moves the mark\n * to the column's edge, so a call site placing one there sets `alignSelf`.\n */\nfunction Badge({ children, count, max = 999, style, ...props }: BadgeProps) {\n  const own = stylesOf(useTheme())\n  const role = useTypeRole('labelSmall')\n  const locale = useLocaleOf(undefined)\n  const inFlow = use(BadgeInFlowContext)\n  const label = count === undefined ? undefined : countOf(count, max, locale)\n  const alone = children === undefined || children === null\n\n  return (\n    <View {...props} style={composeStyles<ViewStyle>(styles.anchor, style)}>\n      {children}\n      <View\n        aria-hidden\n        style={composeStyles<ViewStyle>(\n          own.mark,\n          label === undefined\n            ? [styles.small, alone ? styles.alone : styles.smallOver]\n            : [\n                own.large,\n                alone ? styles.alone : inFlow ? styles.inFlow : styles.over,\n              ],\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 locale's digits and grouping, as web writes it in the\n// provider's.\nfunction countOf(count: number, max: number, locale: string) {\n  return count > max\n    ? `${formatCount(max, locale)}+`\n    : formatCount(count, locale)\n}\n\nexport type { BadgeProps }\n\nexport { Badge }\n"],"mappings":"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"}

package/dist/{badge → components/badge}/styles.js

@@ -1,9 +1,10 @@
-import { themedStyles } from "../theme/styles.js";
+import { themedStyles } from "../../theme/styles.js";
 import { StyleSheet } from "react-native";
-//#region src/badge/styles.ts
+//#region src/components/badge/styles.ts
 const SMALL_SIZE = 6;
 const LARGE_SIZE = 16;
 const styles = StyleSheet.create({
+	alone: { position: "relative" },
 	anchor: {
 		alignItems: "flex-start",
 		flexDirection: "row"
@@ -14,17 +15,20 @@ const styles = StyleSheet.create({
 		top: -2
 	},
 	over: {
+		marginStart: -12,
 		position: "absolute",
-		start: 12,
+		start: "100%",
 		top: -2
 	},
 	small: {
-		end: 0,
 		height: SMALL_SIZE,
-		position: "absolute",
-		top: 0,
 		width: SMALL_SIZE
 	},
+	smallOver: {
+		end: 0,
+		position: "absolute",
+		top: 0
+	},
 	space: { position: "absolute" }
 });
 const stylesOf = themedStyles(({ colors, radii, spacing }) => StyleSheet.create({

package/dist/components/badge/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["StyleSheet","themedStyles","OVERLAP","RISE","SMALL_SIZE","LARGE_SIZE","styles","create","alone","position","anchor","alignItems","flexDirection","inFlow","marginStart","top","over","start","small","height","width","smallOver","end","space","stylesOf","colors","radii","spacing","count","color","onError","fontVariant","large","justifyContent","minHeight","minWidth","paddingHorizontal","xs","mark","backgroundColor","error","borderRadius","pill","pointerEvents"],"sources":["../../../src/components/badge/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { themedStyles } from '../../theme/styles'\n\n// How far back over what it is drawn on the large badge reaches, from its\n// trailing edge, and how far above it the badge 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  // A badge with nothing to be drawn on: the mark in the line, where what\n  // comes before it puts it, so neither corner's placement applies.\n  alone: {\n    position: 'relative',\n  },\n  // What the badge is drawn on. It shrinks to what it holds along the row,\n  // so its box is the icon's and the mark lands where the page puts it, and\n  // lays a mark 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 top trailing corner of what it is drawn on: its\n  // leading edge 12dp inside the trailing edge, whatever the width, as web's\n  // `calc(100% - 12px)` places it.\n  over: {\n    marginStart: -OVERLAP,\n    position: 'absolute',\n    start: '100%',\n    top: -RISE,\n  },\n  // The small badge's 6dp square.\n  small: {\n    height: SMALL_SIZE,\n    width: SMALL_SIZE,\n  },\n  // The small badge on what it is drawn on, filling its top trailing 6dp\n  // square.\n  smallOver: {\n    end: 0,\n    position: 'absolute',\n    top: 0,\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":";;;AAYA,MAAMI,aAAa;AACnB,MAAMC,aAAa;AAEnB,MAAMC,SAASN,WAAWO,OAAO;CAG/BC,OAAO,EACLC,UAAU,WACZ;CAIAC,QAAQ;EACNC,YAAY;EACZC,eAAe;CACjB;CAIAC,QAAQ;EACNC,aAAa;EACbL,UAAU;EACVM,KAAK;CACP;CAIAC,MAAM;EACJF,aAAa;EACbL,UAAU;EACVQ,OAAO;EACPF,KAAK;CACP;CAEAG,OAAO;EACLC,QAAQf;EACRgB,OAAOhB;CACT;CAGAiB,WAAW;EACTC,KAAK;EACLb,UAAU;EACVM,KAAK;CACP;CAGAQ,OAAO,EACLd,UAAU,WACZ;AACF,CAAC;AAED,MAAMe,WAAWvB,cAAc,EAAEwB,QAAQC,OAAOC,cAC9C3B,WAAWO,OAAO;CAGhBqB,OAAO;EACLC,OAAOJ,OAAOK;EACdC,aAAa,CAAC,cAAc;CAC9B;CAIAC,OAAO;EACLrB,YAAY;EACZsB,gBAAgB;EAChBC,WAAW7B;EACX8B,UAAU9B;EACV+B,mBAAmBT,QAAQU;CAC7B;CAGAC,MAAM;EACJC,iBAAiBd,OAAOe;EACxBC,cAAcf,MAAMgB;EACpBC,eAAe;CACjB;AACF,CAAC,CACH"}

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

@@ -0,0 +1,66 @@
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { Key } from "react-stately";
+//#region src/components/breadcrumbs/index.d.ts
+type BreadcrumbsItemProps = Omit<ViewProps, 'children' | 'id' | 'style'> & {
+  /** The item's label. */
+  readonly children?: ReactNode;
+  /**
+   * Where the item leads. Leave it out on an item the screen handles through
+   * the trail's `onAction`, and on the current one, which is never a link.
+   */
+  readonly href?: string;
+  /** What the trail's `onAction` is handed when the item is pressed. */
+  readonly id?: Key;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+};
+type BreadcrumbsProps = Omit<ViewProps, 'children' | 'style'> & {
+  /** The trail, as `Breadcrumbs.Item` entries. */
+  readonly children?: ReactNode;
+  /**
+   * Disables every link in the trail.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Called with an item's `id` when its link is pressed, for a screen that
+   * navigates without an `href`.
+   */
+  readonly onAction?: (key: Key) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/**
+ * A trail of links back up a hierarchy, ending at the screen you are on. The
+ * last item is the current one and is drawn as text; everything before it is
+ * a link.
+ *
+ * ```tsx
+ * <Breadcrumbs aria-label="Label">
+ *   <Breadcrumbs.Item href="/first">First item</Breadcrumbs.Item>
+ *   <Breadcrumbs.Item href="/second">Second item</Breadcrumbs.Item>
+ *   <Breadcrumbs.Item>Third item</Breadcrumbs.Item>
+ * </Breadcrumbs>
+ * ```
+ *
+ * Name it with `aria-label`. A screen that navigates without an `href` gives
+ * each item an `id` and the trail an `onAction`, which is handed the `id` of
+ * the item pressed. The items may come as one fragment. `style`, `ref` and
+ * `testID` land on the row, which is the element a layout positions.
+ */
+declare function Breadcrumbs({ children, isDisabled, onAction, style, ...props }: BreadcrumbsProps): import("react").JSX.Element;
+declare namespace Breadcrumbs {
+  var Item: typeof BreadcrumbsItem;
+}
+/**
+ * One entry in the trail. Give it an `href` to navigate, or an `id` and let
+ * the trail's `onAction` handle it. The last entry is the current screen and
+ * is drawn as text rather than a link, whatever it is given. `style`, `ref`
+ * and `testID` land on the entry's row, which holds its label and the
+ * chevron after it.
+ */
+declare function BreadcrumbsItem({ children, href, id, style, ...props }: BreadcrumbsItemProps): import("react").JSX.Element;
+//#endregion
+export { Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps };
+//# sourceMappingURL=index.d.ts.map