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

package/dist/indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","LayoutChangeEvent","ViewStyle","AnimatedStyle","SharedValue","NumberFormatter","useEffect","useState","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","Text","useIconStyle","localeOf","withOpacity","useTheme","composeStyles","RESERVED","styles","stylesOf","IndicatorColors","active","track","IndicatorTiming","duration","easing","IndicatorTone","activeLength","width","percentage","Math","max","fillOf","color","backgroundColor","IndicatorLabels","t0","$","_c","label","value","theme","hasLabel","undefined","hasValue","t1","t2","t3","t4","labels","IndicatorLine","activeOpacity","children","colors","sheet","opacity","get","T0","stop","line","readingOf","formatOptions","style","locale","maxValue","minValue","valueLabel","Intl","NumberFormatOptions","clamped","min","range","share","text","format","useEased","target","timing","reduceMotion","shown","x1","y1","x2","y2","set","bezier","useIndicatorColors","tone","slot","onSurface","secondaryContainer","useMeasuredWidth","setWidth","Symbol","for","event","nativeEvent","layout","onLayout","_c","Text"],"sources":["../../src/indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { LayoutChangeEvent, ViewStyle } from 'react-native'\nimport type { AnimatedStyle, SharedValue } from 'react-native-reanimated'\n\nimport { NumberFormatter } from '@internationalized/number'\nimport { useEffect, useState } from 'react'\nimport { View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { Text } from '../components/text'\nimport { useIconStyle } from '../glyphs/icon-style'\nimport { localeOf } from '../number/locale'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { RESERVED, styles, stylesOf } from './styles'\n\n// The pieces a linear indicator is drawn from, shared by ProgressIndicator and\n// Meter as web's src/indicator is. The styles they use are in ./styles.ts.\n//\n// Web lays the line out with `calc()` against the row's own width. React\n// Native has no `calc()`, so the row is measured through `onLayout` and the\n// active indicator's width worked out from that, which is also the length a\n// wave along the line follows.\n\n/** What a line draws its parts in. */\ntype IndicatorColors = {\n  /** The active indicator and the stop indicator. */\n  readonly active: string\n  /** The track. */\n  readonly track: string\n}\n\n/** How a value that changes moves: a duration in ms and a cubic Bézier. */\ntype IndicatorTiming = {\n  readonly duration: number\n  readonly easing: readonly [number, number, number, number]\n}\n\n/**\n * The line's colour. `primary` is the page's own pair. `negative` and\n * `positive` swap the active indicator and the stop indicator alone, leaving\n * the track in secondary container, so a column of meters reads as one scale\n * with bars of different colours. `inherit` takes the colour of the slot the\n * line sits in for both, and gives the track a quarter of it.\n */\ntype IndicatorTone = 'inherit' | 'negative' | 'positive' | 'primary'\n\n/**\n * The active indicator's length at a value: the value's share of what the two\n * gaps and the stop leave of the row, as web's `activeAt` gives it. A share of\n * the whole row would run the row 12dp long at the maximum, with the stop\n * drawn past its end.\n */\nfunction activeLength(width: number, percentage: number) {\n  'worklet'\n  return (Math.max(0, width - RESERVED) * percentage) / 100\n}\n\n// A view's fill, built by a call rather than written inline at the prop,\n// which is what react-perf's no-new-object-as-prop is after.\nfunction fillOf(color: string) {\n  return { backgroundColor: color }\n}\n\n/**\n * The label and, optionally, the value, on a row above the indicator, both in\n * the label-large role and on-surface-variant. Renders nothing when there is\n * neither to show.\n */\nfunction IndicatorLabels({\n  label,\n  value,\n}: {\n  readonly label: string | undefined\n  readonly value: string | undefined\n}) {\n  const theme = useTheme()\n  const hasLabel = label !== undefined && label !== ''\n  const hasValue = value !== undefined && value !== ''\n\n  if (!hasLabel && !hasValue) {\n    return null\n  }\n\n  return (\n    <View style={stylesOf(theme).labels}>\n      {hasLabel ? (\n        <Text style={styles.label} tone=\"muted\" variant=\"labelLarge\">\n          {label}\n        </Text>\n      ) : null}\n      {hasValue ? (\n        <Text\n          numberOfLines={1}\n          style={styles.value}\n          tone=\"muted\"\n          variant=\"labelLarge\"\n        >\n          {value}\n        </Text>\n      ) : null}\n    </View>\n  )\n}\n\n/**\n * The page's line: the active indicator at its share of the measured width,\n * the track taking what is left, and the stop indicator at the end. Anything\n * passed as `children` is drawn inside the track, which is what the progress\n * indicator's buffer fills it with; with none the track is solid.\n * `activeOpacity` is how far the active indicator shows, which is how the\n * progress indicator fades it under a wave.\n */\nfunction IndicatorLine({\n  activeOpacity,\n  children,\n  colors,\n  percentage,\n  width,\n}: {\n  readonly activeOpacity?: SharedValue<number>\n  readonly children?: ReactNode\n  readonly colors: IndicatorColors\n  readonly percentage: SharedValue<number>\n  readonly width: number\n}) {\n  const theme = useTheme()\n  const sheet = stylesOf(theme)\n  const active = useAnimatedStyle(() => {\n    'worklet'\n    return {\n      opacity: activeOpacity === undefined ? 1 : activeOpacity.get(),\n      width: activeLength(width, percentage.get()),\n    }\n  })\n\n  return (\n    <View style={styles.line}>\n      <Animated.View\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          styles.active,\n          sheet.active,\n          fillOf(colors.active),\n          active,\n        )}\n      />\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.track,\n          sheet.track,\n          children === undefined ? fillOf(colors.track) : undefined,\n        )}\n      >\n        {children}\n      </View>\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.stop,\n          sheet.stop,\n          fillOf(colors.active),\n        )}\n      />\n    </View>\n  )\n}\n\n/**\n * The value as React Aria's `useProgressBar` and `useMeter` read it: clamped to the range,\n * as a percentage of it, and written out by `formatOptions` in the locale,\n * the share of the range under a percent style and the value itself under\n * any other, unless `valueLabel` says it in words.\n */\nfunction readingOf({\n  formatOptions = { style: 'percent' },\n  locale,\n  maxValue,\n  minValue,\n  value,\n  valueLabel,\n}: {\n  readonly formatOptions: Intl.NumberFormatOptions | undefined\n  readonly locale: string | undefined\n  readonly maxValue: number\n  readonly minValue: number\n  readonly value: number\n  readonly valueLabel: string | undefined\n}) {\n  const clamped = Math.min(Math.max(value, minValue), maxValue)\n  const range = maxValue - minValue\n  const share = range === 0 ? 0 : (clamped - minValue) / range\n  const text =\n    valueLabel ??\n    new NumberFormatter(localeOf(locale), formatOptions).format(\n      formatOptions.style === 'percent' ? share : clamped,\n    )\n\n  return { percentage: share * 100, text, value: clamped }\n}\n\n/**\n * A value that moves to each new target over `timing`, or jumps to it while\n * the reader has asked for reduced motion, as web's transition drops to `0s`\n * there. It starts at its first target, so nothing moves as it mounts.\n */\nfunction useEased(target: number, timing: IndicatorTiming) {\n  const reduceMotion = useReducedMotion()\n  const shown = useSharedValue(target)\n  const { duration } = timing\n  const [x1, y1, x2, y2] = timing.easing\n\n  useEffect(() => {\n    shown.set(\n      reduceMotion\n        ? target\n        : withTiming(target, {\n            duration,\n            easing: Easing.bezier(x1, y1, x2, y2),\n          }),\n    )\n  }, [duration, reduceMotion, shown, target, x1, x2, y1, y2])\n\n  return shown\n}\n\n/**\n * The colours a tone draws the line in. `inherit` reads the colour of the\n * slot the line sits in, as a button hands its content colour to what it\n * holds, and falls back to on-surface outside one.\n */\nfunction useIndicatorColors(tone: IndicatorTone): IndicatorColors {\n  const { colors } = useTheme()\n  const slot = useIconStyle().color\n\n  if (tone === 'inherit') {\n    const color = typeof slot === 'string' ? slot : colors.onSurface\n\n    return { active: color, track: withOpacity(color, 0.25) }\n  }\n\n  return { active: colors[tone], track: colors.secondaryContainer }\n}\n\n/** The width a view was last laid out at, and the handler that reads it. */\nfunction useMeasuredWidth() {\n  const [width, setWidth] = useState(0)\n\n  return {\n    onLayout: (event: LayoutChangeEvent) => {\n      setWidth(event.nativeEvent.layout.width)\n    },\n    width,\n  }\n}\n\nexport {\n  activeLength,\n  fillOf,\n  IndicatorLabels,\n  IndicatorLine,\n  readingOf,\n  useEased,\n  useIndicatorColors,\n  useMeasuredWidth,\n}\nexport type { IndicatorColors, IndicatorTiming, IndicatorTone }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","LayoutChangeEvent","ViewStyle","AnimatedStyle","SharedValue","NumberFormatter","useEffect","useState","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","Text","useIconStyle","withOpacity","useTheme","composeStyles","RESERVED","styles","stylesOf","IndicatorColors","active","track","IndicatorTiming","duration","easing","IndicatorTone","activeLength","width","percentage","Math","max","fillOf","color","backgroundColor","IndicatorLabels","t0","$","_c","label","value","theme","hasLabel","undefined","hasValue","t1","t2","t3","t4","labels","IndicatorLine","activeOpacity","children","colors","sheet","opacity","get","T0","stop","line","readingOf","formatOptions","style","locale","maxValue","minValue","valueLabel","Intl","NumberFormatOptions","clamped","min","range","share","text","format","useEased","target","timing","reduceMotion","shown","x1","y1","x2","y2","set","bezier","useIndicatorColors","tone","slot","onSurface","secondaryContainer","useMeasuredWidth","setWidth","Symbol","for","event","nativeEvent","layout","onLayout","_c","Text"],"sources":["../../src/indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { LayoutChangeEvent, ViewStyle } from 'react-native'\nimport type { AnimatedStyle, SharedValue } from 'react-native-reanimated'\n\nimport { NumberFormatter } from '@internationalized/number'\nimport { useEffect, useState } from 'react'\nimport { View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { Text } from '../components/text'\nimport { useIconStyle } from '../glyphs/icon-style'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { RESERVED, styles, stylesOf } from './styles'\n\n// The pieces a linear indicator is drawn from, shared by ProgressIndicator and\n// Meter as web's src/indicator is. The styles they use are in ./styles.ts.\n//\n// Web lays the line out with `calc()` against the row's own width. React\n// Native has no `calc()`, so the row is measured through `onLayout` and the\n// active indicator's width worked out from that, which is also the length a\n// wave along the line follows.\n\n/** What a line draws its parts in. */\ntype IndicatorColors = {\n  /** The active indicator and the stop indicator. */\n  readonly active: string\n  /** The track. */\n  readonly track: string\n}\n\n/** How a value that changes moves: a duration in ms and a cubic Bézier. */\ntype IndicatorTiming = {\n  readonly duration: number\n  readonly easing: readonly [number, number, number, number]\n}\n\n/**\n * The line's colour. `primary` is the page's own pair. `negative` and\n * `positive` swap the active indicator and the stop indicator alone, leaving\n * the track in secondary container, so a column of meters reads as one scale\n * with bars of different colours. `inherit` takes the colour of the slot the\n * line sits in for both, and gives the track a quarter of it.\n */\ntype IndicatorTone = 'inherit' | 'negative' | 'positive' | 'primary'\n\n/**\n * The active indicator's length at a value: the value's share of what the two\n * gaps and the stop leave of the row, as web's `activeAt` gives it. A share of\n * the whole row would run the row 12dp long at the maximum, with the stop\n * drawn past its end.\n */\nfunction activeLength(width: number, percentage: number) {\n  'worklet'\n  return (Math.max(0, width - RESERVED) * percentage) / 100\n}\n\n// A view's fill, built by a call rather than written inline at the prop,\n// which is what react-perf's no-new-object-as-prop is after.\nfunction fillOf(color: string) {\n  return { backgroundColor: color }\n}\n\n/**\n * The label and, optionally, the value, on a row above the indicator, both in\n * the label-large role and on-surface-variant. Renders nothing when there is\n * neither to show.\n */\nfunction IndicatorLabels({\n  label,\n  value,\n}: {\n  readonly label: string | undefined\n  readonly value: string | undefined\n}) {\n  const theme = useTheme()\n  const hasLabel = label !== undefined && label !== ''\n  const hasValue = value !== undefined && value !== ''\n\n  if (!hasLabel && !hasValue) {\n    return null\n  }\n\n  return (\n    <View style={stylesOf(theme).labels}>\n      {hasLabel ? (\n        <Text style={styles.label} tone=\"muted\" variant=\"labelLarge\">\n          {label}\n        </Text>\n      ) : null}\n      {hasValue ? (\n        <Text\n          numberOfLines={1}\n          style={styles.value}\n          tone=\"muted\"\n          variant=\"labelLarge\"\n        >\n          {value}\n        </Text>\n      ) : null}\n    </View>\n  )\n}\n\n/**\n * The page's line: the active indicator at its share of the measured width,\n * the track taking what is left, and the stop indicator at the end. Anything\n * passed as `children` is drawn inside the track, which is what the progress\n * indicator's buffer fills it with; with none the track is solid.\n * `activeOpacity` is how far the active indicator shows, which is how the\n * progress indicator fades it under a wave.\n */\nfunction IndicatorLine({\n  activeOpacity,\n  children,\n  colors,\n  percentage,\n  width,\n}: {\n  readonly activeOpacity?: SharedValue<number>\n  readonly children?: ReactNode\n  readonly colors: IndicatorColors\n  readonly percentage: SharedValue<number>\n  readonly width: number\n}) {\n  const theme = useTheme()\n  const sheet = stylesOf(theme)\n  const active = useAnimatedStyle(() => {\n    'worklet'\n    return {\n      opacity: activeOpacity === undefined ? 1 : activeOpacity.get(),\n      width: activeLength(width, percentage.get()),\n    }\n  })\n\n  return (\n    <View style={styles.line}>\n      <Animated.View\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          styles.active,\n          sheet.active,\n          fillOf(colors.active),\n          active,\n        )}\n      />\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.track,\n          sheet.track,\n          children === undefined ? fillOf(colors.track) : undefined,\n        )}\n      >\n        {children}\n      </View>\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.stop,\n          sheet.stop,\n          fillOf(colors.active),\n        )}\n      />\n    </View>\n  )\n}\n\n/**\n * The value as React Aria's `useProgressBar` and `useMeter` read it: clamped to the range,\n * as a percentage of it, and written out by `formatOptions` in the locale,\n * the share of the range under a percent style and the value itself under\n * any other, unless `valueLabel` says it in words.\n */\nfunction readingOf({\n  formatOptions = { style: 'percent' },\n  locale,\n  maxValue,\n  minValue,\n  value,\n  valueLabel,\n}: {\n  readonly formatOptions: Intl.NumberFormatOptions | undefined\n  readonly locale: string\n  readonly maxValue: number\n  readonly minValue: number\n  readonly value: number\n  readonly valueLabel: string | undefined\n}) {\n  const clamped = Math.min(Math.max(value, minValue), maxValue)\n  const range = maxValue - minValue\n  const share = range === 0 ? 0 : (clamped - minValue) / range\n  const text =\n    valueLabel ??\n    new NumberFormatter(locale, formatOptions).format(\n      formatOptions.style === 'percent' ? share : clamped,\n    )\n\n  return { percentage: share * 100, text, value: clamped }\n}\n\n/**\n * A value that moves to each new target over `timing`, or jumps to it while\n * the reader has asked for reduced motion, as web's transition drops to `0s`\n * there. It starts at its first target, so nothing moves as it mounts.\n */\nfunction useEased(target: number, timing: IndicatorTiming) {\n  const reduceMotion = useReducedMotion()\n  const shown = useSharedValue(target)\n  const { duration } = timing\n  const [x1, y1, x2, y2] = timing.easing\n\n  useEffect(() => {\n    shown.set(\n      reduceMotion\n        ? target\n        : withTiming(target, {\n            duration,\n            easing: Easing.bezier(x1, y1, x2, y2),\n          }),\n    )\n  }, [duration, reduceMotion, shown, target, x1, x2, y1, y2])\n\n  return shown\n}\n\n/**\n * The colours a tone draws the line in. `inherit` reads the colour of the\n * slot the line sits in, as a button hands its content colour to what it\n * holds, and falls back to on-surface outside one.\n */\nfunction useIndicatorColors(tone: IndicatorTone): IndicatorColors {\n  const { colors } = useTheme()\n  const slot = useIconStyle().color\n\n  if (tone === 'inherit') {\n    const color = typeof slot === 'string' ? slot : colors.onSurface\n\n    return { active: color, track: withOpacity(color, 0.25) }\n  }\n\n  return { active: colors[tone], track: colors.secondaryContainer }\n}\n\n/** The width a view was last laid out at, and the handler that reads it. */\nfunction useMeasuredWidth() {\n  const [width, setWidth] = useState(0)\n\n  return {\n    onLayout: (event: LayoutChangeEvent) => {\n      setWidth(event.nativeEvent.layout.width)\n    },\n    width,\n  }\n}\n\nexport {\n  activeLength,\n  fillOf,\n  IndicatorLabels,\n  IndicatorLine,\n  readingOf,\n  useEased,\n  useIndicatorColors,\n  useMeasuredWidth,\n}\nexport type { IndicatorColors, IndicatorTiming, IndicatorTone }\n"],"mappings":"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"}

package/dist/mark/index.js

@@ -1,6 +1,7 @@
 import { useTheme } from "../theme/scope.js";
 import { composeStyles } from "../theme/styles.js";
 import { useTypeRole } from "../typography/roles.js";
+import { useLocaleOf } from "../i18n/provider.js";
 import { PersonGlyph } from "../glyphs/index.js";
 import { useImageLoadingStatus } from "./image.js";
 import { initialOfThing, initialsOfPerson } from "./initials.js";
@@ -38,7 +39,7 @@ const CONTENT = {
 * exported from the package.
 */
 function Mark(t0) {
-	const $ = c(62);
+	const $ = c(40);
 	let imgProps;
 	let kind;
 	let name;
@@ -80,107 +81,66 @@ function Mark(t0) {
 	const theme = useTheme();
 	const label = useTypeRole("labelLarge");
 	const { handlersFor, previous, status } = useImageLoadingStatus(src);
-	let T0;
-	let initialsNode;
+	const own = markStylesOf(theme);
+	const text = initialsStylesOf(theme);
+	const locale = useLocaleOf(void 0);
 	let t3;
-	let t4;
-	let t5;
-	let t6;
-	let t7;
-	let t8;
-	if ($[11] !== decorative || $[12] !== initials || $[13] !== kind || $[14] !== label || $[15] !== name || $[16] !== previous || $[17] !== props || $[18] !== shape || $[19] !== showPersonIcon || $[20] !== size || $[21] !== status || $[22] !== style || $[23] !== theme || $[24] !== tintsFallback || $[25] !== tone) {
-		const own = markStylesOf(theme);
-		const text = initialsStylesOf(theme);
-		let t9;
-		if ($[34] !== initials || $[35] !== name) {
-			t9 = initials(name);
-			$[34] = initials;
-			$[35] = name;
-			$[36] = t9;
-		} else t9 = $[36];
-		const fallback = t9;
-		const named = !decorative && name.trim() !== "";
-		const showsPicture = status === "loaded" || previous !== void 0;
-		initialsNode = null;
-		if (!showsPicture && kind === "person" && fallback === "") {
-			let t10;
-			if ($[37] !== showPersonIcon || $[38] !== size || $[39] !== theme || $[40] !== tone) {
-				t10 = showPersonIcon ? /* @__PURE__ */ jsx(PersonGlyph, {
-					color: theme.colors[CONTENT[tone]],
-					size: DIAMETERS[size] * GLYPH_SHARE
-				}) : null;
-				$[37] = showPersonIcon;
-				$[38] = size;
-				$[39] = theme;
-				$[40] = tone;
-				$[41] = t10;
-			} else t10 = $[41];
-			initialsNode = t10;
-		} else if (!showsPicture) {
-			const initialsText = /* @__PURE__ */ jsx(Text, {
-				allowFontScaling: false,
-				style: composeStyles(label, text[size], text[tone]),
-				children: fallback
-			});
-			initialsNode = tintsFallback ? /* @__PURE__ */ jsx(View, {
-				style: composeStyles(markStyles.fallback, own[tone]),
-				children: initialsText
-			}) : initialsText;
-		}
-		T0 = View;
-		t3 = named ? true : void 0;
-		t4 = decorative ? true : void 0;
-		t5 = named ? name : void 0;
-		t6 = named ? "img" : void 0;
-		t7 = props;
-		t8 = composeStyles(own.base, own[shape], markStyles[size], tintsFallback ? void 0 : own[tone], style);
-		$[11] = decorative;
-		$[12] = initials;
-		$[13] = kind;
-		$[14] = label;
-		$[15] = name;
-		$[16] = previous;
-		$[17] = props;
-		$[18] = shape;
-		$[19] = showPersonIcon;
-		$[20] = size;
-		$[21] = status;
-		$[22] = style;
-		$[23] = theme;
-		$[24] = tintsFallback;
-		$[25] = tone;
-		$[26] = T0;
-		$[27] = initialsNode;
-		$[28] = t3;
-		$[29] = t4;
-		$[30] = t5;
-		$[31] = t6;
-		$[32] = t7;
-		$[33] = t8;
-	} else {
-		T0 = $[26];
-		initialsNode = $[27];
-		t3 = $[28];
-		t4 = $[29];
-		t5 = $[30];
-		t6 = $[31];
-		t7 = $[32];
-		t8 = $[33];
+	if ($[11] !== initials || $[12] !== locale || $[13] !== name) {
+		t3 = initials(name, locale);
+		$[11] = initials;
+		$[12] = locale;
+		$[13] = name;
+		$[14] = t3;
+	} else t3 = $[14];
+	const fallback = t3;
+	const named = !decorative && name.trim() !== "";
+	const showsPicture = status === "loaded" || previous !== void 0;
+	let initialsNode = null;
+	if (!showsPicture && kind === "person" && fallback === "") {
+		let t4;
+		if ($[15] !== showPersonIcon || $[16] !== size || $[17] !== theme || $[18] !== tone) {
+			t4 = showPersonIcon ? /* @__PURE__ */ jsx(PersonGlyph, {
+				color: theme.colors[CONTENT[tone]],
+				size: DIAMETERS[size] * GLYPH_SHARE
+			}) : null;
+			$[15] = showPersonIcon;
+			$[16] = size;
+			$[17] = theme;
+			$[18] = tone;
+			$[19] = t4;
+		} else t4 = $[19];
+		initialsNode = t4;
+	} else if (!showsPicture) {
+		const initialsText = /* @__PURE__ */ jsx(Text, {
+			allowFontScaling: false,
+			style: composeStyles(label, text[size], text[tone]),
+			children: fallback
+		});
+		initialsNode = tintsFallback ? /* @__PURE__ */ jsx(View, {
+			style: composeStyles(markStyles.fallback, own[tone]),
+			children: initialsText
+		}) : initialsText;
 	}
+	const T0 = View;
+	const t4 = named ? true : void 0;
+	const t5 = decorative ? true : void 0;
+	const t6 = named ? name : void 0;
+	const t7 = named ? "img" : void 0;
+	const t8 = composeStyles(own.base, own[shape], markStyles[size], tintsFallback ? void 0 : own[tone], style);
 	let t9;
-	if ($[42] !== previous || $[43] !== resizeMode) {
+	if ($[20] !== previous || $[21] !== resizeMode) {
 		t9 = previous === void 0 ? null : /* @__PURE__ */ jsx(Image, {
 			accessibilityIgnoresInvertColors: true,
 			resizeMode,
 			source: sourceOf(previous),
 			style: markStyles.image
 		}, previous);
-		$[42] = previous;
-		$[43] = resizeMode;
-		$[44] = t9;
-	} else t9 = $[44];
+		$[20] = previous;
+		$[21] = resizeMode;
+		$[22] = t9;
+	} else t9 = $[22];
 	let t10;
-	if ($[45] !== handlersFor || $[46] !== imgProps || $[47] !== resizeMode || $[48] !== src || $[49] !== status) {
+	if ($[23] !== handlersFor || $[24] !== imgProps || $[25] !== resizeMode || $[26] !== src || $[27] !== status) {
 		t10 = src === void 0 || status === "error" ? null : /* @__PURE__ */ jsx(Image, {
 			accessibilityIgnoresInvertColors: true,
 			...imgProps,
@@ -189,21 +149,21 @@ function Mark(t0) {
 			source: sourceOf(src),
 			style: composeStyles(markStyles.image, status === "loaded" ? void 0 : markStyles.imagePending)
 		}, src);
-		$[45] = handlersFor;
-		$[46] = imgProps;
-		$[47] = resizeMode;
-		$[48] = src;
-		$[49] = status;
-		$[50] = t10;
-	} else t10 = $[50];
+		$[23] = handlersFor;
+		$[24] = imgProps;
+		$[25] = resizeMode;
+		$[26] = src;
+		$[27] = status;
+		$[28] = t10;
+	} else t10 = $[28];
 	let t11;
-	if ($[51] !== T0 || $[52] !== initialsNode || $[53] !== t10 || $[54] !== t3 || $[55] !== t4 || $[56] !== t5 || $[57] !== t6 || $[58] !== t7 || $[59] !== t8 || $[60] !== t9) {
+	if ($[29] !== T0 || $[30] !== initialsNode || $[31] !== props || $[32] !== t10 || $[33] !== t4 || $[34] !== t5 || $[35] !== t6 || $[36] !== t7 || $[37] !== t8 || $[38] !== t9) {
 		t11 = /* @__PURE__ */ jsxs(T0, {
-			accessible: t3,
-			"aria-hidden": t4,
-			"aria-label": t5,
-			role: t6,
-			...t7,
+			accessible: t4,
+			"aria-hidden": t5,
+			"aria-label": t6,
+			role: t7,
+			...props,
 			style: t8,
 			children: [
 				initialsNode,
@@ -211,18 +171,18 @@ function Mark(t0) {
 				t10
 			]
 		});
-		$[51] = T0;
-		$[52] = initialsNode;
-		$[53] = t10;
-		$[54] = t3;
-		$[55] = t4;
-		$[56] = t5;
-		$[57] = t6;
-		$[58] = t7;
-		$[59] = t8;
-		$[60] = t9;
-		$[61] = t11;
-	} else t11 = $[61];
+		$[29] = T0;
+		$[30] = initialsNode;
+		$[31] = props;
+		$[32] = t10;
+		$[33] = t4;
+		$[34] = t5;
+		$[35] = t6;
+		$[36] = t7;
+		$[37] = t8;
+		$[38] = t9;
+		$[39] = t11;
+	} else t11 = $[39];
 	return t11;
 }
 function sourceOf(uri) {

package/dist/mark/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","Ref","ImageProps","ImageSourcePropType","ImageStyle","StyleProp","TextStyle","ViewProps","ViewStyle","Image","Text","NativeText","View","ResolvedTheme","MarkSize","MarkTone","PersonGlyph","useTheme","composeStyles","useTypeRole","useImageLoadingStatus","initialOfThing","initialsOfPerson","DIAMETERS","GLYPH_SHARE","initialsStylesOf","markStyles","markStylesOf","MarkImageProps","Pick","MarkProps","Omit","decorative","imgProps","kind","KINDS","name","ref","showPersonIcon","size","src","style","tone","person","initials","resizeMode","shape","tintsFallback","thing","const","CONTENT","Readonly","Record","negative","positive","primary","secondary","tertiary","Mark","t0","$","_c","props","t1","t2","undefined","theme","label","handlersFor","previous","status","T0","initialsNode","t3","t4","t5","t6","t7","t8","own","text","t9","fallback","named","trim","showsPicture","t10","colors","initialsText","base","sourceOf","image","imagePending","t11","uri","_c","NativeText"],"sources":["../../src/mark/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type {\n  ImageProps,\n  ImageSourcePropType,\n  ImageStyle,\n  StyleProp,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Image, Text as NativeText, View } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { MarkSize, MarkTone } from './styles'\n\nimport { PersonGlyph } from '../glyphs'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { useImageLoadingStatus } from './image'\nimport { initialOfThing, initialsOfPerson } from './initials'\nimport {\n  DIAMETERS,\n  GLYPH_SHARE,\n  initialsStylesOf,\n  markStyles,\n  markStylesOf,\n} from './styles'\n\n/** The native props a picture's own `Image` takes, as Avatar and ProductIcon take them. */\ntype MarkImageProps = Pick<\n  ImageProps,\n  | 'crossOrigin'\n  | 'fadeDuration'\n  | 'progressiveRenderingEnabled'\n  | 'referrerPolicy'\n  | 'resizeMethod'\n>\n\ntype MarkProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * Hides the mark from screen readers, for one beside the name it stands\n   * for, which would otherwise be announced twice.\n   */\n  readonly decorative?: boolean\n  /** Props for the picture's own `Image`. */\n  readonly imgProps?: MarkImageProps\n  /** A person, which Avatar draws, or anything else, which ProductIcon does. */\n  readonly kind: keyof typeof KINDS\n  /** Supplies the fallback's initials, and the accessible name unless decorative. */\n  readonly name: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether a person with no initials to take, a blank name, draws the\n   * anonymous person, or an empty disc, as a loading skeleton wants.\n   */\n  readonly showPersonIcon?: boolean\n  readonly size: MarkSize\n  /** A picture to show in place of the initials once it has loaded. */\n  readonly src?: string\n  readonly style?: StyleProp<ViewStyle>\n  readonly tone: MarkTone\n}\n\n// What each kind of mark is drawn as. The header of `./styles` says why the\n// two differ where they do; everything not in this table is the same for\n// both.\nconst KINDS = {\n  person: {\n    initials: initialsOfPerson,\n    resizeMode: 'cover',\n    shape: 'circle',\n    tintsFallback: false,\n  },\n  thing: {\n    initials: initialOfThing,\n    resizeMode: 'contain',\n    shape: 'square',\n    tintsFallback: true,\n  },\n} as const\n\n// The role each tone draws the anonymous person in.\nconst CONTENT: Readonly<Record<MarkTone, keyof ResolvedTheme['colors']>> = {\n  negative: 'onNegativeContainer',\n  positive: 'onPositiveContainer',\n  primary: 'onPrimaryContainer',\n  secondary: 'onSecondaryContainer',\n  tertiary: 'onTertiaryContainer',\n}\n\n/**\n * The small identity mark Avatar and ProductIcon both render: a picture once\n * it has loaded, initials until then or if it fails, named for whoever or\n * whatever it stands for. Shared rather than written into each, so a fix to\n * one reaches both, as on web. Not a component of the library's own, and not\n * exported from the package.\n */\nfunction Mark({\n  decorative = false,\n  imgProps,\n  kind,\n  name,\n  showPersonIcon = true,\n  size,\n  src,\n  style,\n  tone,\n  ...props\n}: MarkProps) {\n  const { initials, resizeMode, shape, tintsFallback } = KINDS[kind]\n  const theme = useTheme()\n  const label = useTypeRole('labelLarge')\n  const { handlersFor, previous, status } = useImageLoadingStatus(src)\n\n  const own = markStylesOf(theme)\n  const text = initialsStylesOf(theme)\n  const fallback = initials(name)\n\n  // Announced as an image named for whoever or whatever it stands for,\n  // rather than letting the initials be read: \"AL\" is not what anyone means\n  // to announce. A blank name names nothing, so the mark is then a plain\n  // view, which a screen reader passes over rather than reading as an image\n  // with no name. A decorative mark is hidden outright, its initials with it.\n  const named = !decorative && name.trim() !== ''\n\n  // The initials while no picture shows: before the first loads, and once\n  // one fails. They are left out under a picture rather than kept beneath\n  // it, since a letterboxed logo would show them through its transparent\n  // parts.\n  const showsPicture = status === 'loaded' || previous !== undefined\n  let initialsNode = null\n  if (!showsPicture && kind === 'person' && fallback === '') {\n    // A person with no initials to take, a blank name or one still loading,\n    // draws Material Design's anonymous person in the tone's on-container\n    // colour. The glyph hides itself from screen readers.\n    initialsNode = showPersonIcon ? (\n      <PersonGlyph\n        color={theme.colors[CONTENT[tone]]}\n        size={DIAMETERS[size] * GLYPH_SHARE}\n      />\n    ) : null\n  } else if (!showsPicture) {\n    // The initials keep their size whatever the device's text size asks\n    // for: the mark is a fixed size and clips what runs past it, and the\n    // name a screen reader reads is what they stand for.\n    const initialsText = (\n      <NativeText\n        allowFontScaling={false}\n        style={composeStyles<TextStyle>(label, text[size], text[tone])}\n      >\n        {fallback}\n      </NativeText>\n    )\n    initialsNode = tintsFallback ? (\n      <View style={composeStyles<ViewStyle>(markStyles.fallback, own[tone])}>\n        {initialsText}\n      </View>\n    ) : (\n      initialsText\n    )\n  }\n\n  return (\n    <View\n      accessible={named ? true : undefined}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={named ? name : undefined}\n      role={named ? 'img' : undefined}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[shape],\n        markStyles[size],\n        tintsFallback ? undefined : own[tone],\n        style,\n      )}\n    >\n      {initialsNode}\n      {/* Two pictures at most, laid over the initials. The one last loaded\n          stays while a new `src` loads, and the new one is drawn on top of\n          it from the start, hidden until it has loaded. Neither is inverted\n          by the iOS Smart Invert setting, which is meant for interface\n          colours rather than pictures. */}\n      {previous === undefined ? null : (\n        <Image\n          accessibilityIgnoresInvertColors\n          key={previous}\n          resizeMode={resizeMode}\n          source={sourceOf(previous)}\n          style={markStyles.image}\n        />\n      )}\n      {src === undefined || status === 'error' ? null : (\n        <Image\n          accessibilityIgnoresInvertColors\n          key={src}\n          {...imgProps}\n          {...handlersFor(src)}\n          resizeMode={resizeMode}\n          source={sourceOf(src)}\n          style={composeStyles<ImageStyle>(\n            markStyles.image,\n            status === 'loaded' ? undefined : markStyles.imagePending,\n          )}\n        />\n      )}\n    </View>\n  )\n}\n\n// An address as the source `Image` takes. The compiler keeps the one it made\n// for as long as the address is the same, so a re-render hands the image the\n// object it already had.\nfunction sourceOf(uri: string): ImageSourcePropType {\n  return { uri }\n}\n\nexport type { MarkImageProps, MarkProps }\n\nexport { Mark }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","ImageProps","ImageSourcePropType","ImageStyle","StyleProp","TextStyle","ViewProps","ViewStyle","Image","Text","NativeText","View","ResolvedTheme","MarkSize","MarkTone","PersonGlyph","useLocaleOf","useTheme","composeStyles","useTypeRole","useImageLoadingStatus","initialOfThing","initialsOfPerson","DIAMETERS","GLYPH_SHARE","initialsStylesOf","markStyles","markStylesOf","MarkImageProps","Pick","MarkProps","Omit","decorative","imgProps","kind","KINDS","name","ref","showPersonIcon","size","src","style","tone","person","initials","resizeMode","shape","tintsFallback","thing","const","CONTENT","Readonly","Record","negative","positive","primary","secondary","tertiary","Mark","t0","$","_c","props","t1","t2","undefined","theme","label","handlersFor","previous","status","own","text","locale","t3","fallback","named","trim","showsPicture","initialsNode","t4","colors","initialsText","T0","t5","t6","t7","t8","base","t9","sourceOf","image","t10","imagePending","t11","uri","_c","NativeText"],"sources":["../../src/mark/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type {\n  ImageProps,\n  ImageSourcePropType,\n  ImageStyle,\n  StyleProp,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Image, Text as NativeText, View } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { MarkSize, MarkTone } from './styles'\n\nimport { PersonGlyph } from '../glyphs'\nimport { useLocaleOf } from '../i18n/provider'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { useImageLoadingStatus } from './image'\nimport { initialOfThing, initialsOfPerson } from './initials'\nimport {\n  DIAMETERS,\n  GLYPH_SHARE,\n  initialsStylesOf,\n  markStyles,\n  markStylesOf,\n} from './styles'\n\n/** The native props a picture's own `Image` takes, as Avatar and ProductIcon take them. */\ntype MarkImageProps = Pick<\n  ImageProps,\n  | 'crossOrigin'\n  | 'fadeDuration'\n  | 'progressiveRenderingEnabled'\n  | 'referrerPolicy'\n  | 'resizeMethod'\n>\n\ntype MarkProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * Hides the mark from screen readers, for one beside the name it stands\n   * for, which would otherwise be announced twice.\n   */\n  readonly decorative?: boolean\n  /** Props for the picture's own `Image`. */\n  readonly imgProps?: MarkImageProps\n  /** A person, which Avatar draws, or anything else, which ProductIcon does. */\n  readonly kind: keyof typeof KINDS\n  /** Supplies the fallback's initials, and the accessible name unless decorative. */\n  readonly name: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether a person with no initials to take, a blank name, draws the\n   * anonymous person, or an empty disc, as a loading skeleton wants.\n   */\n  readonly showPersonIcon?: boolean\n  readonly size: MarkSize\n  /** A picture to show in place of the initials once it has loaded. */\n  readonly src?: string\n  readonly style?: StyleProp<ViewStyle>\n  readonly tone: MarkTone\n}\n\n// What each kind of mark is drawn as. The header of `./styles` says why the\n// two differ where they do; everything not in this table is the same for\n// both.\nconst KINDS = {\n  person: {\n    initials: initialsOfPerson,\n    resizeMode: 'cover',\n    shape: 'circle',\n    tintsFallback: false,\n  },\n  thing: {\n    initials: initialOfThing,\n    resizeMode: 'contain',\n    shape: 'square',\n    tintsFallback: true,\n  },\n} as const\n\n// The role each tone draws the anonymous person in.\nconst CONTENT: Readonly<Record<MarkTone, keyof ResolvedTheme['colors']>> = {\n  negative: 'onNegativeContainer',\n  positive: 'onPositiveContainer',\n  primary: 'onPrimaryContainer',\n  secondary: 'onSecondaryContainer',\n  tertiary: 'onTertiaryContainer',\n}\n\n/**\n * The small identity mark Avatar and ProductIcon both render: a picture once\n * it has loaded, initials until then or if it fails, named for whoever or\n * whatever it stands for. Shared rather than written into each, so a fix to\n * one reaches both, as on web. Not a component of the library's own, and not\n * exported from the package.\n */\nfunction Mark({\n  decorative = false,\n  imgProps,\n  kind,\n  name,\n  showPersonIcon = true,\n  size,\n  src,\n  style,\n  tone,\n  ...props\n}: MarkProps) {\n  const { initials, resizeMode, shape, tintsFallback } = KINDS[kind]\n  const theme = useTheme()\n  const label = useTypeRole('labelLarge')\n  const { handlersFor, previous, status } = useImageLoadingStatus(src)\n\n  const own = markStylesOf(theme)\n  const text = initialsStylesOf(theme)\n  const locale = useLocaleOf(undefined)\n  const fallback = initials(name, locale)\n\n  // Announced as an image named for whoever or whatever it stands for,\n  // rather than letting the initials be read: \"AL\" is not what anyone means\n  // to announce. A blank name names nothing, so the mark is then a plain\n  // view, which a screen reader passes over rather than reading as an image\n  // with no name. A decorative mark is hidden outright, its initials with it.\n  const named = !decorative && name.trim() !== ''\n\n  // The initials while no picture shows: before the first loads, and once\n  // one fails. They are left out under a picture rather than kept beneath\n  // it, since a letterboxed logo would show them through its transparent\n  // parts.\n  const showsPicture = status === 'loaded' || previous !== undefined\n  let initialsNode = null\n  if (!showsPicture && kind === 'person' && fallback === '') {\n    // A person with no initials to take, a blank name or one still loading,\n    // draws Material Design's anonymous person in the tone's on-container\n    // colour. The glyph hides itself from screen readers.\n    initialsNode = showPersonIcon ? (\n      <PersonGlyph\n        color={theme.colors[CONTENT[tone]]}\n        size={DIAMETERS[size] * GLYPH_SHARE}\n      />\n    ) : null\n  } else if (!showsPicture) {\n    // The initials keep their size whatever the device's text size asks\n    // for: the mark is a fixed size and clips what runs past it, and the\n    // name a screen reader reads is what they stand for.\n    const initialsText = (\n      <NativeText\n        allowFontScaling={false}\n        style={composeStyles<TextStyle>(label, text[size], text[tone])}\n      >\n        {fallback}\n      </NativeText>\n    )\n    initialsNode = tintsFallback ? (\n      <View style={composeStyles<ViewStyle>(markStyles.fallback, own[tone])}>\n        {initialsText}\n      </View>\n    ) : (\n      initialsText\n    )\n  }\n\n  return (\n    <View\n      accessible={named ? true : undefined}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={named ? name : undefined}\n      role={named ? 'img' : undefined}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[shape],\n        markStyles[size],\n        tintsFallback ? undefined : own[tone],\n        style,\n      )}\n    >\n      {initialsNode}\n      {/* Two pictures at most, laid over the initials. The one last loaded\n          stays while a new `src` loads, and the new one is drawn on top of\n          it from the start, hidden until it has loaded. Neither is inverted\n          by the iOS Smart Invert setting, which is meant for interface\n          colours rather than pictures. */}\n      {previous === undefined ? null : (\n        <Image\n          accessibilityIgnoresInvertColors\n          key={previous}\n          resizeMode={resizeMode}\n          source={sourceOf(previous)}\n          style={markStyles.image}\n        />\n      )}\n      {src === undefined || status === 'error' ? null : (\n        <Image\n          accessibilityIgnoresInvertColors\n          key={src}\n          {...imgProps}\n          {...handlersFor(src)}\n          resizeMode={resizeMode}\n          source={sourceOf(src)}\n          style={composeStyles<ImageStyle>(\n            markStyles.image,\n            status === 'loaded' ? undefined : markStyles.imagePending,\n          )}\n        />\n      )}\n    </View>\n  )\n}\n\n// An address as the source `Image` takes. The compiler keeps the one it made\n// for as long as the address is the same, so a re-render hands the image the\n// object it already had.\nfunction sourceOf(uri: string): ImageSourcePropType {\n  return { uri }\n}\n\nexport type { MarkImageProps, MarkProps }\n\nexport { Mark }\n"],"mappings":"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"}

package/dist/mark/initials.js.map

@@ -1 +1 @@
-{"version":3,"file":"initials.js","names":["INITIAL","JOINING","ZERO_WIDTH_NON_JOINER","TITLE","SUFFIX","TRAILING_ASIDE","GRAPHEME","segmenters","Map","Intl","Segmenter","graphemesOf","text","locale","match","key","segmenter","get","undefined","granularity","set","Array","from","segment","initialOf","word","graphemes","chosen","find","grapheme","test","at","toLocaleUpperCase","initialOfThing","name","trim","initialsOfPerson","words","replace","split","filter","Boolean","length","slice","first","last","between"],"sources":["../../src/mark/initials.ts"],"sourcesContent":["// What a mark shows while it has no picture: the initials of a person's\n// name, or the initial of a thing's. Copied from kanso-ui's\n// `src/mark/initials.ts` rather than shared through a package, so the two\n// read a name the same way and each can be read without the other.\n//\n// It works in graphemes, what a reader sees as one character, in the\n// device's locale. A code point drops an accent written as a combining mark,\n// splits an Indic conjunct and cuts a flag or a joined emoji in half;\n// upper-casing without the locale turns a Turkish \"i\" into \"I\" rather than\n// \"İ\".\n//\n// Graphemes come from `Intl.Segmenter` where the engine has it, as browsers\n// and Node do. Hermes's Intl has no Segmenter, only a collator and the date\n// and number formats, so on a device `GRAPHEME` stands in: a\n// character with the marks and emoji modifiers after it, a pair of regional\n// indicators as one flag, a sequence joined by a zero-width joiner, and the\n// consonants Unicode joins through a virama into one conjunct. It has no rule\n// for the rest of Unicode's, so it splits a Hangul syllable written as\n// separate jamo, which a name typed on a phone is not.\n\n// What a word's initial can be: a letter, a number, or a picture — an emoji,\n// or a flag, which is a pair of regional indicators. A word opening with\n// anything else — a bracket, a quote, the @ of a handle, the # of a channel\n// — is initialised by the first of these inside it.\nconst INITIAL = /^[\\p{L}\\p{N}\\p{Extended_Pictographic}\\p{Regional_Indicator}]/u\n\n// The scripts whose letters join to the next one. Two initials in one of\n// them, written side by side, shape into a single connected word rather than\n// two letters, so a zero-width non-joiner goes between them.\nconst JOINING =\n  /^[\\p{Script=Arabic}\\p{Script=Syriac}\\p{Script=Mongolian}\\p{Script=Nko}\\p{Script=Adlam}\\p{Script=Mandaic}\\p{Script=Manichaean}\\p{Script=Psalter_Pahlavi}\\p{Script=Hanifi_Rohingya}\\p{Script=Sogdian}\\p{Script=Old_Uyghur}]/u\n\nconst ZERO_WIDTH_NON_JOINER = '\\u200C'\n\n// A title before a name — \"Dr.\", \"Mrs.\", \"Prof.\" — which is not one of its\n// words. Two letters at least, so a first initial written \"J.\" is kept.\nconst TITLE = /^\\p{L}{2,4}\\.$/u\n\n// A generational suffix after a name — \"Jr.\", \"Sr\", \"III\", \"3rd\" — which is\n// not its last word either. The numerals are the generational ones only, so\n// a surname that reads as a numeral, \"Xi\" say, is kept.\nconst SUFFIX = /^(?:jr|sr|ii|iii|iv|\\d+(?:st|nd|rd|th))\\.?,?$/iu\n\n// Something said about the name rather than part of it, in brackets at its\n// end: \"(she/her)\", \"[away]\".\nconst TRAILING_ASIDE = /\\s*[([{][^)\\]}]*[)\\]}]\\s*$/u\n\n// One grapheme, where the engine has no `Intl.Segmenter`: a flag, or a\n// character followed by what attaches to it. The viramas are the six Unicode\n// joins the next consonant through, in Devanagari, Bengali, Gujarati, Oriya,\n// Telugu and Malayalam, and they are tried before the plain mark they also\n// are, so the consonant after one stays in the grapheme.\nconst GRAPHEME =\n  /\\p{Regional_Indicator}{2}|\\P{M}(?:[\\u094D\\u09CD\\u0ACD\\u0B4D\\u0C4D\\u0D4D]\\u200D?\\p{L}|[\\p{M}\\p{Emoji_Modifier}]|\\u200D\\P{M})*/gu\n\nconst segmenters = new Map<string, Intl.Segmenter>()\n\nfunction graphemesOf(text: string, locale: string | undefined) {\n  // Asked on every call rather than once, so a test can take it away.\n  if (typeof Intl.Segmenter !== 'function') {\n    return text.match(GRAPHEME) ?? []\n  }\n\n  const key = locale ?? ''\n  let segmenter = segmenters.get(key)\n  if (segmenter === undefined) {\n    segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' })\n    segmenters.set(key, segmenter)\n  }\n  return Array.from(segmenter.segment(text), ({ segment }) => segment)\n}\n\n/**\n * The character that stands for `word`: its first grapheme that is a letter,\n * a number or a picture, or its first grapheme where it has none of those,\n * so something always shows. Upper-cased in the locale, and then one\n * grapheme of that, since upper-casing can lengthen it: \"ß\" is \"SS\".\n */\nfunction initialOf(word: string, locale: string | undefined) {\n  const graphemes = graphemesOf(word, locale)\n  const chosen =\n    graphemes.find((grapheme) => INITIAL.test(grapheme)) ??\n    graphemes.at(0) ??\n    ''\n  return graphemesOf(chosen.toLocaleUpperCase(locale), locale).at(0) ?? ''\n}\n\n/**\n * One letter, where a person takes two. A person has a first name and a last\n * name to initialise; a thing usually has neither, so the same rule applied\n * to \"Second item\" would produce \"SI\", a pair of initials for something that\n * was never two words in that sense.\n *\n * `locale` is the device's when left out, which is what a product icon\n * passes.\n */\nfunction initialOfThing(name: string, locale?: string) {\n  return initialOf(name.trim(), locale)\n}\n\n/**\n * The initials of the first and the last word, which handles both \"Ada\" and\n * \"Ada Lovelace\" without a separate prop for how many to take. What a\n * display name carries around the name itself is left out first: a title\n * before it, a generational suffix after it, and an aside in brackets at its\n * end. A name written without spaces between its words — Japanese, Chinese —\n * is one word to this, and takes one initial.\n *\n * `locale` is the device's when left out, which is what an avatar passes.\n */\nfunction initialsOfPerson(name: string, locale?: string) {\n  let words = name.replace(TRAILING_ASIDE, '').split(/\\s+/u).filter(Boolean)\n  if (words.length > 1 && TITLE.test(words[0] ?? '')) {\n    words = words.slice(1)\n  }\n  if (words.length > 1 && SUFFIX.test(words.at(-1) ?? '')) {\n    words = words.slice(0, -1)\n  }\n  if (words.length === 0) {\n    return ''\n  }\n  const first = initialOf(words[0] ?? '', locale)\n  if (words.length === 1) {\n    return first\n  }\n  const last = initialOf(words.at(-1) ?? '', locale)\n  const between =\n    JOINING.test(first) && JOINING.test(last) ? ZERO_WIDTH_NON_JOINER : ''\n  return `${first}${between}${last}`\n}\n\nexport { initialOfThing, initialsOfPerson }\n"],"mappings":";AAwBA,MAAMA,UAAU;AAKhB,MAAMC,UACJ;AAEF,MAAMC,wBAAwB;AAI9B,MAAMC,QAAQ;AAKd,MAAMC,SAAS;AAIf,MAAMC,iBAAiB;AAOvB,MAAMC,WACJ;AAEF,MAAMC,6BAAa,IAAIC,IAA4B;AAEnD,SAASG,YAAYC,MAAcC,QAA4B;CAE7D,IAAI,OAAOJ,KAAKC,cAAc,YAC5B,OAAOE,KAAKE,MAAMR,QAAQ,KAAK,CAAA;CAGjC,MAAMS,MAAMF,UAAU;CACtB,IAAIG,YAAYT,WAAWU,IAAIF,GAAG;CAClC,IAAIC,cAAcE,KAAAA,GAAW;EAC3BF,YAAY,IAAIP,KAAKC,UAAUG,QAAQ,EAAEM,aAAa,WAAW,CAAC;EAClEZ,WAAWa,IAAIL,KAAKC,SAAS;CAC/B;CACA,OAAOK,MAAMC,KAAKN,UAAUO,QAAQX,IAAI,IAAI,EAAEW,cAAcA,OAAO;AACrE;;;;;;;AAQA,SAASC,UAAUC,MAAcZ,QAA4B;CAC3D,MAAMa,YAAYf,YAAYc,MAAMZ,MAAM;CAK1C,OAAOF,aAHLe,UAAUE,MAAMC,aAAa7B,QAAQ8B,KAAKD,QAAQ,CAAC,KACnDH,UAAUK,GAAG,CAAC,KACd,GAAA,CACwBC,kBAAkBnB,MAAM,GAAGA,MAAM,CAAC,CAACkB,GAAG,CAAC,KAAK;AACxE;;;;;;;;;;AAWA,SAASE,eAAeC,MAAcrB,QAAiB;CACrD,OAAOW,UAAUU,KAAKC,KAAK,GAAGtB,MAAM;AACtC;;;;;;;;;;;AAYA,SAASuB,iBAAiBF,MAAcrB,QAAiB;CACvD,IAAIwB,QAAQH,KAAKI,QAAQjC,gBAAgB,EAAE,CAAC,CAACkC,MAAM,MAAM,CAAC,CAACC,OAAOC,OAAO;CACzE,IAAIJ,MAAMK,SAAS,KAAKvC,MAAM2B,KAAKO,MAAM,MAAM,EAAE,GAC/CA,QAAQA,MAAMM,MAAM,CAAC;CAEvB,IAAIN,MAAMK,SAAS,KAAKtC,OAAO0B,KAAKO,MAAMN,GAAG,EAAE,KAAK,EAAE,GACpDM,QAAQA,MAAMM,MAAM,GAAG,EAAE;CAE3B,IAAIN,MAAMK,WAAW,GACnB,OAAO;CAET,MAAME,QAAQpB,UAAUa,MAAM,MAAM,IAAIxB,MAAM;CAC9C,IAAIwB,MAAMK,WAAW,GACnB,OAAOE;CAET,MAAMC,OAAOrB,UAAUa,MAAMN,GAAG,EAAE,KAAK,IAAIlB,MAAM;CAGjD,OAAO,GAAG+B,QADR3C,QAAQ6B,KAAKc,KAAK,KAAK3C,QAAQ6B,KAAKe,IAAI,IAAI3C,wBAAwB,KAC1C2C;AAC9B"}
+{"version":3,"file":"initials.js","names":["INITIAL","JOINING","ZERO_WIDTH_NON_JOINER","TITLE","SUFFIX","TRAILING_ASIDE","GRAPHEME","segmenters","Map","Intl","Segmenter","graphemesOf","text","locale","match","key","segmenter","get","undefined","granularity","set","Array","from","segment","initialOf","word","graphemes","chosen","find","grapheme","test","at","toLocaleUpperCase","initialOfThing","name","trim","initialsOfPerson","words","replace","split","filter","Boolean","length","slice","first","last","between"],"sources":["../../src/mark/initials.ts"],"sourcesContent":["// What a mark shows while it has no picture: the initials of a person's\n// name, or the initial of a thing's. Copied from kanso-ui's\n// `src/mark/initials.ts` rather than shared through a package, so the two\n// read a name the same way and each can be read without the other.\n//\n// It works in graphemes, what a reader sees as one character, in the locale\n// the mark is drawn in. A code point drops an accent written as a combining mark,\n// splits an Indic conjunct and cuts a flag or a joined emoji in half;\n// upper-casing without the locale turns a Turkish \"i\" into \"I\" rather than\n// \"İ\".\n//\n// Graphemes come from `Intl.Segmenter` where the engine has it, as browsers\n// and Node do. Hermes's Intl has no Segmenter, only a collator and the date\n// and number formats, so on a device `GRAPHEME` stands in: a\n// character with the marks and emoji modifiers after it, a pair of regional\n// indicators as one flag, a sequence joined by a zero-width joiner, and the\n// consonants Unicode joins through a virama into one conjunct. It has no rule\n// for the rest of Unicode's, so it splits a Hangul syllable written as\n// separate jamo, which a name typed on a phone is not.\n\n// What a word's initial can be: a letter, a number, or a picture — an emoji,\n// or a flag, which is a pair of regional indicators. A word opening with\n// anything else — a bracket, a quote, the @ of a handle, the # of a channel\n// — is initialised by the first of these inside it.\nconst INITIAL = /^[\\p{L}\\p{N}\\p{Extended_Pictographic}\\p{Regional_Indicator}]/u\n\n// The scripts whose letters join to the next one. Two initials in one of\n// them, written side by side, shape into a single connected word rather than\n// two letters, so a zero-width non-joiner goes between them.\nconst JOINING =\n  /^[\\p{Script=Arabic}\\p{Script=Syriac}\\p{Script=Mongolian}\\p{Script=Nko}\\p{Script=Adlam}\\p{Script=Mandaic}\\p{Script=Manichaean}\\p{Script=Psalter_Pahlavi}\\p{Script=Hanifi_Rohingya}\\p{Script=Sogdian}\\p{Script=Old_Uyghur}]/u\n\nconst ZERO_WIDTH_NON_JOINER = '\\u200C'\n\n// A title before a name — \"Dr.\", \"Mrs.\", \"Prof.\" — which is not one of its\n// words. Two letters at least, so a first initial written \"J.\" is kept.\nconst TITLE = /^\\p{L}{2,4}\\.$/u\n\n// A generational suffix after a name — \"Jr.\", \"Sr\", \"III\", \"3rd\" — which is\n// not its last word either. The numerals are the generational ones only, so\n// a surname that reads as a numeral, \"Xi\" say, is kept.\nconst SUFFIX = /^(?:jr|sr|ii|iii|iv|\\d+(?:st|nd|rd|th))\\.?,?$/iu\n\n// Something said about the name rather than part of it, in brackets at its\n// end: \"(she/her)\", \"[away]\".\nconst TRAILING_ASIDE = /\\s*[([{][^)\\]}]*[)\\]}]\\s*$/u\n\n// One grapheme, where the engine has no `Intl.Segmenter`: a flag, or a\n// character followed by what attaches to it. The viramas are the six Unicode\n// joins the next consonant through, in Devanagari, Bengali, Gujarati, Oriya,\n// Telugu and Malayalam, and they are tried before the plain mark they also\n// are, so the consonant after one stays in the grapheme.\nconst GRAPHEME =\n  /\\p{Regional_Indicator}{2}|\\P{M}(?:[\\u094D\\u09CD\\u0ACD\\u0B4D\\u0C4D\\u0D4D]\\u200D?\\p{L}|[\\p{M}\\p{Emoji_Modifier}]|\\u200D\\P{M})*/gu\n\nconst segmenters = new Map<string, Intl.Segmenter>()\n\nfunction graphemesOf(text: string, locale: string | undefined) {\n  // Asked on every call rather than once, so a test can take it away.\n  if (typeof Intl.Segmenter !== 'function') {\n    return text.match(GRAPHEME) ?? []\n  }\n\n  const key = locale ?? ''\n  let segmenter = segmenters.get(key)\n  if (segmenter === undefined) {\n    segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' })\n    segmenters.set(key, segmenter)\n  }\n  return Array.from(segmenter.segment(text), ({ segment }) => segment)\n}\n\n/**\n * The character that stands for `word`: its first grapheme that is a letter,\n * a number or a picture, or its first grapheme where it has none of those,\n * so something always shows. Upper-cased in the locale, and then one\n * grapheme of that, since upper-casing can lengthen it: \"ß\" is \"SS\".\n */\nfunction initialOf(word: string, locale: string | undefined) {\n  const graphemes = graphemesOf(word, locale)\n  const chosen =\n    graphemes.find((grapheme) => INITIAL.test(grapheme)) ??\n    graphemes.at(0) ??\n    ''\n  return graphemesOf(chosen.toLocaleUpperCase(locale), locale).at(0) ?? ''\n}\n\n/**\n * One letter, where a person takes two. A person has a first name and a last\n * name to initialise; a thing usually has neither, so the same rule applied\n * to \"Second item\" would produce \"SI\", a pair of initials for something that\n * was never two words in that sense.\n *\n * `locale` is the device's when left out, which is what a product icon\n * passes.\n */\nfunction initialOfThing(name: string, locale?: string) {\n  return initialOf(name.trim(), locale)\n}\n\n/**\n * The initials of the first and the last word, which handles both \"Ada\" and\n * \"Ada Lovelace\" without a separate prop for how many to take. What a\n * display name carries around the name itself is left out first: a title\n * before it, a generational suffix after it, and an aside in brackets at its\n * end. A name written without spaces between its words — Japanese, Chinese —\n * is one word to this, and takes one initial.\n *\n * `locale` is the device's when left out, which is what an avatar passes.\n */\nfunction initialsOfPerson(name: string, locale?: string) {\n  let words = name.replace(TRAILING_ASIDE, '').split(/\\s+/u).filter(Boolean)\n  if (words.length > 1 && TITLE.test(words[0] ?? '')) {\n    words = words.slice(1)\n  }\n  if (words.length > 1 && SUFFIX.test(words.at(-1) ?? '')) {\n    words = words.slice(0, -1)\n  }\n  if (words.length === 0) {\n    return ''\n  }\n  const first = initialOf(words[0] ?? '', locale)\n  if (words.length === 1) {\n    return first\n  }\n  const last = initialOf(words.at(-1) ?? '', locale)\n  const between =\n    JOINING.test(first) && JOINING.test(last) ? ZERO_WIDTH_NON_JOINER : ''\n  return `${first}${between}${last}`\n}\n\nexport { initialOfThing, initialsOfPerson }\n"],"mappings":";AAwBA,MAAMA,UAAU;AAKhB,MAAMC,UACJ;AAEF,MAAMC,wBAAwB;AAI9B,MAAMC,QAAQ;AAKd,MAAMC,SAAS;AAIf,MAAMC,iBAAiB;AAOvB,MAAMC,WACJ;AAEF,MAAMC,6BAAa,IAAIC,IAA4B;AAEnD,SAASG,YAAYC,MAAcC,QAA4B;CAE7D,IAAI,OAAOJ,KAAKC,cAAc,YAC5B,OAAOE,KAAKE,MAAMR,QAAQ,KAAK,CAAA;CAGjC,MAAMS,MAAMF,UAAU;CACtB,IAAIG,YAAYT,WAAWU,IAAIF,GAAG;CAClC,IAAIC,cAAcE,KAAAA,GAAW;EAC3BF,YAAY,IAAIP,KAAKC,UAAUG,QAAQ,EAAEM,aAAa,WAAW,CAAC;EAClEZ,WAAWa,IAAIL,KAAKC,SAAS;CAC/B;CACA,OAAOK,MAAMC,KAAKN,UAAUO,QAAQX,IAAI,IAAI,EAAEW,cAAcA,OAAO;AACrE;;;;;;;AAQA,SAASC,UAAUC,MAAcZ,QAA4B;CAC3D,MAAMa,YAAYf,YAAYc,MAAMZ,MAAM;CAK1C,OAAOF,aAHLe,UAAUE,MAAMC,aAAa7B,QAAQ8B,KAAKD,QAAQ,CAAC,KACnDH,UAAUK,GAAG,CAAC,KACd,GAAA,CACwBC,kBAAkBnB,MAAM,GAAGA,MAAM,CAAC,CAACkB,GAAG,CAAC,KAAK;AACxE;;;;;;;;;;AAWA,SAASE,eAAeC,MAAcrB,QAAiB;CACrD,OAAOW,UAAUU,KAAKC,KAAK,GAAGtB,MAAM;AACtC;;;;;;;;;;;AAYA,SAASuB,iBAAiBF,MAAcrB,QAAiB;CACvD,IAAIwB,QAAQH,KAAKI,QAAQjC,gBAAgB,EAAE,CAAC,CAACkC,MAAM,MAAM,CAAC,CAACC,OAAOC,OAAO;CACzE,IAAIJ,MAAMK,SAAS,KAAKvC,MAAM2B,KAAKO,MAAM,MAAM,EAAE,GAC/CA,QAAQA,MAAMM,MAAM,CAAC;CAEvB,IAAIN,MAAMK,SAAS,KAAKtC,OAAO0B,KAAKO,MAAMN,GAAG,EAAE,KAAK,EAAE,GACpDM,QAAQA,MAAMM,MAAM,GAAG,EAAE;CAE3B,IAAIN,MAAMK,WAAW,GACnB,OAAO;CAET,MAAME,QAAQpB,UAAUa,MAAM,MAAM,IAAIxB,MAAM;CAC9C,IAAIwB,MAAMK,WAAW,GACnB,OAAOE;CAET,MAAMC,OAAOrB,UAAUa,MAAMN,GAAG,EAAE,KAAK,IAAIlB,MAAM;CAGjD,OAAO,GAAG+B,QADR3C,QAAQ6B,KAAKc,KAAK,KAAK3C,QAAQ6B,KAAKe,IAAI,IAAI3C,wBAAwB,KAC1C2C;AAC9B"}

package/dist/modal/index.js

@@ -4,6 +4,7 @@ import { withOpacity } from "../theme/color.js";
 import { ButtonSlotContext } from "../button/slots.js";
 import { AnimatedPressable } from "../button/index.js";
 import { OverlayHost } from "../overlay/host.js";
+import { SeparatorOrientationContext } from "../separator/index.js";
 import { c } from "react/compiler-runtime";
 import { AccessibilityInfo, I18nManager, Modal, Platform, StyleSheet } from "react-native";
 import { useEffect, useRef, useState } from "react";
@@ -52,7 +53,7 @@ function insetsOf(insets) {
 * and the scrim, with the surface itself as its children.
 */
 function ModalWindow(t0) {
-	const $ = c(20);
+	const $ = c(23);
 	const { children, isKeyboardDismissDisabled, labelledBy, onClose, onScrimPress, scrim, title } = t0;
 	const styles = stylesOf(useTheme());
 	const T0 = Modal;
@@ -72,48 +73,60 @@ function ModalWindow(t0) {
 	const t9 = true;
 	const T1 = ButtonSlotContext;
 	const t10 = null;
-	const T2 = OverlayHost;
-	const T3 = AnimatedPressable;
-	const t11 = false;
-	const t12 = true;
-	const t13 = false;
-	const t14 = composeStyles(styles.scrim, scrim);
-	let t15;
-	if ($[2] !== T3 || $[3] !== onScrimPress || $[4] !== t14) {
-		t15 = /* @__PURE__ */ jsx(T3, {
-			accessible: t11,
-			"aria-hidden": t12,
-			focusable: t13,
+	const T2 = SeparatorOrientationContext;
+	const t11 = null;
+	const T3 = OverlayHost;
+	const T4 = AnimatedPressable;
+	const t12 = false;
+	const t13 = true;
+	const t14 = false;
+	const t15 = composeStyles(styles.scrim, scrim);
+	let t16;
+	if ($[2] !== T4 || $[3] !== onScrimPress || $[4] !== t15) {
+		t16 = /* @__PURE__ */ jsx(T4, {
+			accessible: t12,
+			"aria-hidden": t13,
+			focusable: t14,
 			onPress: onScrimPress,
-			style: t14,
+			style: t15,
 			tabIndex: -1
 		});
-		$[2] = T3;
+		$[2] = T4;
 		$[3] = onScrimPress;
-		$[4] = t14;
-		$[5] = t15;
-	} else t15 = $[5];
-	let t16;
-	if ($[6] !== T2 || $[7] !== children || $[8] !== t15) {
-		t16 = /* @__PURE__ */ jsxs(T2, { children: [t15, children] });
-		$[6] = T2;
-		$[7] = children;
-		$[8] = t15;
-		$[9] = t16;
-	} else t16 = $[9];
+		$[4] = t15;
+		$[5] = t16;
+	} else t16 = $[5];
 	let t17;
-	if ($[10] !== T1 || $[11] !== t16) {
-		t17 = /* @__PURE__ */ jsx(T1, {
+	if ($[6] !== T3 || $[7] !== children || $[8] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(T3, { children: [t16, children] });
+		$[6] = T3;
+		$[7] = children;
+		$[8] = t16;
+		$[9] = t17;
+	} else t17 = $[9];
+	let t18;
+	if ($[10] !== T2 || $[11] !== t17) {
+		t18 = /* @__PURE__ */ jsx(T2, {
+			value: t11,
+			children: t17
+		});
+		$[10] = T2;
+		$[11] = t17;
+		$[12] = t18;
+	} else t18 = $[12];
+	let t19;
+	if ($[13] !== T1 || $[14] !== t18) {
+		t19 = /* @__PURE__ */ jsx(T1, {
 			value: t10,
-			children: t16
+			children: t18
 		});
-		$[10] = T1;
-		$[11] = t16;
-		$[12] = t17;
-	} else t17 = $[12];
-	let t18;
-	if ($[13] !== T0 || $[14] !== t17 || $[15] !== t2 || $[16] !== t4 || $[17] !== t5 || $[18] !== t7) {
-		t18 = /* @__PURE__ */ jsx(T0, {
+		$[13] = T1;
+		$[14] = t18;
+		$[15] = t19;
+	} else t19 = $[15];
+	let t20;
+	if ($[16] !== T0 || $[17] !== t19 || $[18] !== t2 || $[19] !== t4 || $[20] !== t5 || $[21] !== t7) {
+		t20 = /* @__PURE__ */ jsx(T0, {
 			animationType: t1,
 			"aria-labelledby": t2,
 			navigationBarTranslucent: t3,
@@ -123,17 +136,17 @@ function ModalWindow(t0) {
 			supportedOrientations: t7,
 			transparent: t8,
 			visible: t9,
-			children: t17
+			children: t19
 		});
-		$[13] = T0;
-		$[14] = t17;
-		$[15] = t2;
-		$[16] = t4;
-		$[17] = t5;
-		$[18] = t7;
-		$[19] = t18;
-	} else t18 = $[19];
-	return t18;
+		$[16] = T0;
+		$[17] = t19;
+		$[18] = t2;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t7;
+		$[22] = t20;
+	} else t20 = $[22];
+	return t20;
 }
 function panelRoleOf(role, labelledBy) {
 	if (Platform.OS === "web") return {};