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

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

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,285 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { ChevronEndGlyph } from "../../glyphs/index.js";
+import { Link } from "../link/index.js";
+import { c } from "react/compiler-runtime";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { Children, Fragment, createContext, isValidElement, use } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/breadcrumbs/index.tsx
+const ItemContext = createContext({
+	isCurrent: false,
+	isDisabled: false,
+	onAction: void 0
+});
+const CURRENT_PAGE = { "aria-current": "page" };
+const CHEVRON_SIZE = 18;
+const stylesOf = themedStyles(({ colors, spacing }) => StyleSheet.create({
+	chevron: { flexShrink: 0 },
+	current: { color: colors.onSurface },
+	item: {
+		alignItems: "center",
+		columnGap: spacing.xs,
+		flexDirection: "row",
+		flexShrink: 1
+	},
+	label: {
+		color: colors.onSurfaceVariant,
+		flexShrink: 1
+	},
+	root: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: spacing.xs
+	}
+}));
+function actionOf(id, onAction) {
+	return id === void 0 || onAction === void 0 ? void 0 : () => {
+		onAction(id);
+	};
+}
+/**
+* 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.
+*/
+function Breadcrumbs(t0) {
+	const $ = c(26);
+	let children;
+	let onAction;
+	let props;
+	let style;
+	let t1;
+	if ($[0] !== t0) {
+		({children, isDisabled: t1, onAction, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = onAction;
+		$[3] = props;
+		$[4] = style;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		onAction = $[2];
+		props = $[3];
+		style = $[4];
+		t1 = $[5];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const theme = useTheme();
+	let T0;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[6] !== children || $[7] !== isDisabled || $[8] !== onAction || $[9] !== props || $[10] !== style || $[11] !== theme) {
+		const items = positionsOf(itemsOf(children), isDisabled, onAction);
+		T0 = View;
+		t2 = props;
+		t3 = "group";
+		if ($[17] !== style || $[18] !== theme) {
+			t4 = composeStyles(stylesOf(theme).root, style);
+			$[17] = style;
+			$[18] = theme;
+			$[19] = t4;
+		} else t4 = $[19];
+		t5 = items.map(_temp);
+		$[6] = children;
+		$[7] = isDisabled;
+		$[8] = onAction;
+		$[9] = props;
+		$[10] = style;
+		$[11] = theme;
+		$[12] = T0;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else {
+		T0 = $[12];
+		t2 = $[13];
+		t3 = $[14];
+		t4 = $[15];
+		t5 = $[16];
+	}
+	let t6;
+	if ($[20] !== T0 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			...t2,
+			role: t3,
+			style: t4,
+			children: t5
+		});
+		$[20] = T0;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+	} else t6 = $[25];
+	return t6;
+}
+/**
+* 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.
+*/
+function _temp(t0) {
+	const { element, key, position } = t0;
+	return /* @__PURE__ */ jsx(ItemContext, {
+		value: position,
+		children: element
+	}, key);
+}
+function BreadcrumbsItem(t0) {
+	const $ = c(31);
+	let children;
+	let href;
+	let id;
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({children, href, id, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = href;
+		$[3] = id;
+		$[4] = props;
+		$[5] = style;
+	} else {
+		children = $[1];
+		href = $[2];
+		id = $[3];
+		props = $[4];
+		style = $[5];
+	}
+	const theme = useTheme();
+	const { isCurrent, isDisabled, onAction } = use(ItemContext);
+	const labelRole = useTypeRole("labelLarge");
+	let T0;
+	let label;
+	let own;
+	let t1;
+	let t2;
+	if ($[6] !== isCurrent || $[7] !== labelRole || $[8] !== props || $[9] !== style || $[10] !== theme) {
+		own = stylesOf(theme);
+		label = composeStyles(labelRole, own.label, isCurrent ? own.current : void 0);
+		T0 = View;
+		t1 = props;
+		t2 = composeStyles(own.item, style);
+		$[6] = isCurrent;
+		$[7] = labelRole;
+		$[8] = props;
+		$[9] = style;
+		$[10] = theme;
+		$[11] = T0;
+		$[12] = label;
+		$[13] = own;
+		$[14] = t1;
+		$[15] = t2;
+	} else {
+		T0 = $[11];
+		label = $[12];
+		own = $[13];
+		t1 = $[14];
+		t2 = $[15];
+	}
+	let t3;
+	if ($[16] !== children || $[17] !== href || $[18] !== id || $[19] !== isCurrent || $[20] !== isDisabled || $[21] !== label || $[22] !== onAction || $[23] !== own || $[24] !== theme) {
+		t3 = isCurrent ? /* @__PURE__ */ jsx(Text, {
+			...Platform.OS === "web" ? CURRENT_PAGE : void 0,
+			style: label,
+			children
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {
+			style: label,
+			children: /* @__PURE__ */ jsx(Link, {
+				href,
+				isDisabled,
+				onPress: actionOf(id, isDisabled ? void 0 : onAction),
+				tone: "inherit",
+				underline: "hover",
+				children
+			})
+		}), /* @__PURE__ */ jsx(ChevronEndGlyph, {
+			color: theme.colors.onSurfaceVariant,
+			size: CHEVRON_SIZE,
+			style: own.chevron
+		})] });
+		$[16] = children;
+		$[17] = href;
+		$[18] = id;
+		$[19] = isCurrent;
+		$[20] = isDisabled;
+		$[21] = label;
+		$[22] = onAction;
+		$[23] = own;
+		$[24] = theme;
+		$[25] = t3;
+	} else t3 = $[25];
+	let t4;
+	if ($[26] !== T0 || $[27] !== t1 || $[28] !== t2 || $[29] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			style: t2,
+			children: t3
+		});
+		$[26] = T0;
+		$[27] = t1;
+		$[28] = t2;
+		$[29] = t3;
+		$[30] = t4;
+	} else t4 = $[30];
+	return t4;
+}
+/**
+* The entries among a trail's children, with any fragment between them
+* opened, so a trail can take its items as one fragment. Each keeps a key
+* made of its own and its fragments', so two fragments' children never share
+* one.
+*/
+function itemsOf(children, prefix = "") {
+	return Children.toArray(children).flatMap((child) => {
+		if (!isValidElement(child)) return [];
+		const key = `${prefix}${String(child.key)}`;
+		return child.type === Fragment ? itemsOf(child.props.children, `${key}/`) : [{
+			element: child,
+			key
+		}];
+	});
+}
+/**
+* Each entry with where it stands: the last is the current one, and the
+* trail's `isDisabled` and `onAction` reach every one.
+*/
+function positionsOf(items, isDisabled, onAction) {
+	return items.map((item, index) => ({
+		...item,
+		position: {
+			isCurrent: index === items.length - 1,
+			isDisabled,
+			onAction
+		}
+	}));
+}
+Breadcrumbs.Item = BreadcrumbsItem;
+//#endregion
+export { Breadcrumbs, BreadcrumbsItem };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactElement","ReactNode","Ref","StyleProp","TextStyle","ViewProps","ViewStyle","Key","Children","createContext","Fragment","isValidElement","use","Text","NativeText","Platform","StyleSheet","View","ChevronEndGlyph","useTheme","composeStyles","themedStyles","useTypeRole","Link","BreadcrumbsItemProps","Omit","children","href","id","ref","style","BreadcrumbsProps","isDisabled","onAction","key","ItemPosition","isCurrent","ItemContext","undefined","CURRENT_PAGE","const","CHEVRON_SIZE","stylesOf","colors","spacing","create","chevron","flexShrink","current","color","onSurface","item","alignItems","columnGap","xs","flexDirection","label","onSurfaceVariant","root","flexWrap","gap","actionOf","Breadcrumbs","t0","$","_c","props","t1","theme","T0","t2","t3","t4","t5","items","positionsOf","itemsOf","map","_temp","t6","element","position","BreadcrumbsItem","labelRole","own","OS","prefix","toArray","flatMap","child","String","type","index","length","Item","_c","NativeText"],"sources":["../../../src/components/breadcrumbs/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react'\nimport type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport type { Key } from 'react-stately'\n\nimport { Children, createContext, Fragment, isValidElement, use } from 'react'\nimport { Text as NativeText, Platform, StyleSheet, View } from 'react-native'\n\nimport { ChevronEndGlyph } from '../../glyphs'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\nimport { Link } from '../link'\n\n// kanso-ui's Breadcrumbs: a trail of links back up a hierarchy, ending at the\n// screen you are on. Material Design has no breadcrumbs page, so web's\n// reading stands, taken from the two nearest pages: the row takes the top app\n// bar's muted content role, on-surface variant, and each link the text\n// button's label large type.\n//\n// Three things are this component's own, as they are web's.\n//\n// **The current item is text, not a link.** It is the last item, drawn in\n// the full-strength on-surface role, so the screen you are on is the most\n// legible thing in the row rather than a faded disabled link. Native has no\n// counterpart to web's `aria-current`, so there it is told apart by being the\n// one item that leads nowhere; on the web it carries `aria-current=\"page\"`,\n// as web's does.\n//\n// **The chevron belongs to the item before it.** Each item that is not the\n// current one draws one after its link, which puts a separator between every\n// pair and none at the end. It says \"further in\" rather than \"to the right\",\n// so it mirrors under a right-to-left layout, and a screen reader skips it.\n//\n// **A link is drawn as a link in a place already understood to be links.**\n// Each is the library's Link with `tone=\"inherit\"`, taking the row's muted\n// colour, and `underline=\"hover\"`, leaving the rule for a pointer. A press\n// goes through the `RouterProvider` around the trail, as any Link's does.\n//\n// The trail is one group named by its `aria-label`, and it wraps onto further\n// lines rather than running off the edge.\n\ntype BreadcrumbsItemProps = Omit<ViewProps, 'children' | 'id' | 'style'> & {\n  /** The item's label. */\n  readonly children?: ReactNode\n  /**\n   * Where the item leads. Leave it out on an item the screen handles through\n   * the trail's `onAction`, and on the current one, which is never a link.\n   */\n  readonly href?: string\n  /** What the trail's `onAction` is handed when the item is pressed. */\n  readonly id?: Key\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\ntype BreadcrumbsProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The trail, as `Breadcrumbs.Item` entries. */\n  readonly children?: ReactNode\n  /**\n   * Disables every link in the trail.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Called with an item's `id` when its link is pressed, for a screen that\n   * navigates without an `href`.\n   */\n  readonly onAction?: (key: Key) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** Where an item stands in its trail, which the trail tells each one. */\ntype ItemPosition = {\n  readonly isCurrent: boolean\n  readonly isDisabled: boolean\n  readonly onAction: ((key: Key) => void) | undefined\n}\n\n// An item outside a trail is a link like any other.\nconst ItemContext = createContext<ItemPosition>({\n  isCurrent: false,\n  isDisabled: false,\n  onAction: undefined,\n})\n\n// What marks the current item on the web, where a screen reader reads it.\nconst CURRENT_PAGE = { 'aria-current': 'page' } as const\n\n// 18dp, a step under the 20dp the menus page gives the same glyph, as web's\n// is: a separator inside a row of label large links sits heavier than the\n// words either side of it at 20.\nconst CHEVRON_SIZE = 18\n\nconst stylesOf = themedStyles(({ colors, spacing }) =>\n  StyleSheet.create({\n    chevron: {\n      flexShrink: 0,\n    },\n    // The item you are on: the links' type in the full-strength content role,\n    // so it reads as the end of the trail.\n    current: {\n      color: colors.onSurface,\n    },\n    // An item's label and chevron. It shrinks to the row's width when its\n    // label alone is wider, so the label wraps inside it.\n    item: {\n      alignItems: 'center',\n      columnGap: spacing.xs,\n      flexDirection: 'row',\n      flexShrink: 1,\n    },\n    label: {\n      color: colors.onSurfaceVariant,\n      flexShrink: 1,\n    },\n    root: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      flexWrap: 'wrap',\n      gap: spacing.xs,\n    },\n  }),\n)\n\n// What a press on an item's link reports, when the item has an `id` and the\n// trail listens. A disabled trail hands its links nothing to call.\nfunction actionOf(id: Key | undefined, onAction: ItemPosition['onAction']) {\n  return id === undefined || onAction === undefined\n    ? undefined\n    : () => {\n        onAction(id)\n      }\n}\n\n/**\n * A trail of links back up a hierarchy, ending at the screen you are on. The\n * last item is the current one and is drawn as text; everything before it is\n * a link.\n *\n * ```tsx\n * <Breadcrumbs aria-label=\"Label\">\n *   <Breadcrumbs.Item href=\"/first\">First item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"/second\">Second item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Third item</Breadcrumbs.Item>\n * </Breadcrumbs>\n * ```\n *\n * Name it with `aria-label`. A screen that navigates without an `href` gives\n * each item an `id` and the trail an `onAction`, which is handed the `id` of\n * the item pressed. The items may come as one fragment. `style`, `ref` and\n * `testID` land on the row, which is the element a layout positions.\n */\nfunction Breadcrumbs({\n  children,\n  isDisabled = false,\n  onAction,\n  style,\n  ...props\n}: BreadcrumbsProps) {\n  const theme = useTheme()\n  const items = positionsOf(itemsOf(children), isDisabled, onAction)\n\n  return (\n    <View\n      {...props}\n      role=\"group\"\n      style={composeStyles<ViewStyle>(stylesOf(theme).root, style)}\n    >\n      {items.map(({ element, key, position }) => (\n        <ItemContext key={key} value={position}>\n          {element}\n        </ItemContext>\n      ))}\n    </View>\n  )\n}\n\n/**\n * One entry in the trail. Give it an `href` to navigate, or an `id` and let\n * the trail's `onAction` handle it. The last entry is the current screen and\n * is drawn as text rather than a link, whatever it is given. `style`, `ref`\n * and `testID` land on the entry's row, which holds its label and the\n * chevron after it.\n */\nfunction BreadcrumbsItem({\n  children,\n  href,\n  id,\n  style,\n  ...props\n}: BreadcrumbsItemProps) {\n  const theme = useTheme()\n  const { isCurrent, isDisabled, onAction } = use(ItemContext)\n  const labelRole = useTypeRole('labelLarge')\n\n  const own = stylesOf(theme)\n  const label = composeStyles<TextStyle>(\n    labelRole,\n    own.label,\n    isCurrent ? own.current : undefined,\n  )\n\n  return (\n    <View {...props} style={composeStyles<ViewStyle>(own.item, style)}>\n      {isCurrent ? (\n        <NativeText\n          {...(Platform.OS === 'web' ? CURRENT_PAGE : undefined)}\n          style={label}\n        >\n          {children}\n        </NativeText>\n      ) : (\n        <>\n          <NativeText style={label}>\n            <Link\n              href={href}\n              isDisabled={isDisabled}\n              onPress={actionOf(id, isDisabled ? undefined : onAction)}\n              tone=\"inherit\"\n              underline=\"hover\"\n            >\n              {children}\n            </Link>\n          </NativeText>\n          <ChevronEndGlyph\n            color={theme.colors.onSurfaceVariant}\n            size={CHEVRON_SIZE}\n            style={own.chevron}\n          />\n        </>\n      )}\n    </View>\n  )\n}\n\n/**\n * The entries among a trail's children, with any fragment between them\n * opened, so a trail can take its items as one fragment. Each keeps a key\n * made of its own and its fragments', so two fragments' children never share\n * one.\n */\nfunction itemsOf(\n  children: ReactNode,\n  prefix = '',\n): { readonly element: ReactElement; readonly key: string }[] {\n  return Children.toArray(children).flatMap((child) => {\n    if (!isValidElement<{ readonly children?: ReactNode }>(child)) {\n      return []\n    }\n    const key = `${prefix}${String(child.key)}`\n    return child.type === Fragment\n      ? itemsOf(child.props.children, `${key}/`)\n      : [{ element: child, key }]\n  })\n}\n\n/**\n * Each entry with where it stands: the last is the current one, and the\n * trail's `isDisabled` and `onAction` reach every one.\n */\nfunction positionsOf(\n  items: readonly { readonly element: ReactElement; readonly key: string }[],\n  isDisabled: boolean,\n  onAction: ItemPosition['onAction'],\n) {\n  return items.map((item, index) => ({\n    ...item,\n    position: {\n      isCurrent: index === items.length - 1,\n      isDisabled,\n      onAction,\n    } satisfies ItemPosition,\n  }))\n}\n\nBreadcrumbs.Item = BreadcrumbsItem\n\nexport { Breadcrumbs, BreadcrumbsItem }\nexport type { BreadcrumbsItemProps, BreadcrumbsProps }\n"],"mappings":"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"}

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

@@ -11,7 +11,7 @@ type CalendarProps$1<T extends DateValue = DateValue> = Pick<CalendarProps<T>, '
   /**
    * 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.
+   * Defaults to the `I18nProvider`'s, or the device's outside one.
    */
   readonly locale?: string;
   readonly ref?: Ref<ComponentRef<typeof View>>;