@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.1

package/dist/chip/index.js

@@ -0,0 +1,194 @@
+import { IconStyleContext } from "../glyphs/icon-style.js";
+import { CheckGlyph } from "../glyphs/index.js";
+import { useTheme } from "../theme/scope.js";
+import { composeStyles } from "../theme/styles.js";
+import { useTypeRole } from "../typography/roles.js";
+import { withOpacity } from "../theme/color.js";
+import { styles, stylesOf } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, withTiming } from "react-native-reanimated";
+//#region src/chip/index.tsx
+const CHECK = /* @__PURE__ */ jsx(CheckGlyph, {});
+/**
+* What a chip draws before its label: the check while it is selected, its own
+* icon while it is not, and nothing for an unselected chip with no icon. The
+* slot hands the glyph its colour and size through `useIconStyle()`.
+*/
+function ChipGlyph(t0) {
+	const $ = c(10);
+	const { color, icon, selected } = t0;
+	const own = stylesOf(useTheme());
+	const glyph = selected ? CHECK : icon;
+	if (glyph === void 0 || glyph === null) return null;
+	const T0 = IconStyleContext;
+	let t1;
+	if ($[0] !== color) {
+		t1 = iconStyleOf(color);
+		$[0] = color;
+		$[1] = t1;
+	} else t1 = $[1];
+	const T1 = View;
+	const t2 = composeStyles(styles.glyph, own.glyphStart);
+	let t3;
+	if ($[2] !== T1 || $[3] !== glyph || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T1, {
+			style: t2,
+			children: glyph
+		});
+		$[2] = T1;
+		$[3] = glyph;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== T0 || $[7] !== t1 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			value: t1,
+			children: t3
+		});
+		$[6] = T0;
+		$[7] = t1;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+/**
+* The label a chip draws, on one line and cut short with an ellipsis, in the
+* colour `useEasedColors` eases.
+*/
+function ChipLabel(t0) {
+	const $ = c(6);
+	const { children, color } = t0;
+	const role = useTypeRole("labelLarge");
+	let t1;
+	if ($[0] !== color || $[1] !== role) {
+		t1 = composeStyles(role, styles.label, color);
+		$[0] = color;
+		$[1] = role;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== children || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Animated.Text, {
+			numberOfLines: 1,
+			style: t1,
+			children
+		});
+		$[3] = children;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+function iconStyleOf(color) {
+	return {
+		color,
+		size: 18
+	};
+}
+/**
+* Records a chip's width for its target, then calls the call site's own
+* `onLayout`. Built by a call rather than declared in a component, which is
+* what react-perf's jsx-no-new-function-as-prop is after; the React Compiler
+* memoises the result on its inputs.
+*/
+function measureThen(setWidth, onLayout) {
+	return (event) => {
+		setWidth(event.nativeEvent.layout.width);
+		onLayout?.(event);
+	};
+}
+/**
+* The colours a chip draws, as the header sets them out. Transparent is
+* written as the colour it eases to or from at no opacity, since Reanimated
+* reads `transparent` as black at none and an ease from it would darken on
+* the way: the fill as the secondary container a selected chip takes, and the
+* rule as the outline it gives up.
+*/
+function paintOf({ colors, stateLayerOpacity }, { assist, disabled, elevated, selected }) {
+	const clearFill = withOpacity(colors.secondaryContainer, 0);
+	const clearRule = withOpacity(colors.outlineVariant, 0);
+	const contained = selected || elevated;
+	if (disabled) {
+		const content = withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
+		const container = withOpacity(colors.onSurface, stateLayerOpacity.disabledContainer);
+		return {
+			content,
+			fill: contained ? container : clearFill,
+			glyph: content,
+			layer: colors.onSurface,
+			rule: contained ? clearRule : container
+		};
+	}
+	if (selected) return {
+		content: colors.onSecondaryContainer,
+		fill: colors.secondaryContainer,
+		glyph: colors.onSecondaryContainer,
+		layer: colors.onSecondaryContainer,
+		rule: clearRule
+	};
+	return {
+		content: assist ? colors.onSurface : colors.onSurfaceVariant,
+		fill: elevated ? colors.surfaceContainerLow : clearFill,
+		glyph: colors.primary,
+		layer: colors.onSurface,
+		rule: elevated ? clearRule : colors.outlineVariant
+	};
+}
+/**
+* The target the header sets out: half the gap chips wrap apart above and
+* below, and across, whatever brings the chip up to 48dp wide.
+*/
+function targetOf(width, { spacing }) {
+	const across = Math.max(0, (48 - width) / 2);
+	const reach = spacing.sm / 2;
+	return {
+		bottom: reach,
+		left: across,
+		right: across,
+		top: reach
+	};
+}
+/**
+* The container's fill and rule and the label's colour, easing to the paint
+* they are given, or there at once under reduced motion.
+*/
+function useEasedColors(t0) {
+	const $ = c(3);
+	const { content, fill, rule } = t0;
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const timing = {
+		duration: motion.durationShort2,
+		easing: Easing.bezier(...motion.easingStandard)
+	};
+	const container = useAnimatedStyle(() => {
+		"worklet";
+		return {
+			backgroundColor: reduceMotion ? fill : withTiming(fill, timing),
+			borderColor: reduceMotion ? rule : withTiming(rule, timing)
+		};
+	});
+	const label = useAnimatedStyle(() => {
+		"worklet";
+		return { color: reduceMotion ? content : withTiming(content, timing) };
+	});
+	let t1;
+	if ($[0] !== container || $[1] !== label) {
+		t1 = {
+			container,
+			label
+		};
+		$[0] = container;
+		$[1] = label;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+//#endregion
+export { ChipGlyph, ChipLabel, measureThen, paintOf, targetOf, useEasedColors };
+
+//# sourceMappingURL=index.js.map

package/dist/chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Insets","LayoutChangeEvent","TextStyle","ViewStyle","AnimatedStyle","View","Animated","Easing","useAnimatedStyle","useReducedMotion","withTiming","IconStyle","ResolvedTheme","CheckGlyph","IconStyleContext","TARGET_SIZE","withOpacity","useTheme","composeStyles","useTypeRole","GLYPH_SIZE","styles","stylesOf","Paint","content","fill","glyph","layer","rule","CHECK","ChipGlyph","t0","$","_c","color","icon","selected","own","undefined","T0","t1","iconStyleOf","T1","t2","glyphStart","t3","t4","ChipLabel","children","role","label","size","measureThen","setWidth","width","onLayout","event","nativeEvent","layout","paintOf","colors","stateLayerOpacity","assist","disabled","elevated","clearFill","secondaryContainer","clearRule","outlineVariant","contained","onSurface","disabledContent","container","disabledContainer","onSecondaryContainer","onSurfaceVariant","surfaceContainerLow","primary","targetOf","spacing","across","Math","max","reach","sm","bottom","left","right","top","useEasedColors","motion","reduceMotion","timing","duration","durationShort2","easing","bezier","easingStandard","backgroundColor","borderColor","_c"],"sources":["../../src/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type {\n  Insets,\n  LayoutChangeEvent,\n  TextStyle,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { IconStyle } from '../glyphs/icon-style'\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { CheckGlyph } from '../glyphs'\nimport { IconStyleContext } from '../glyphs/icon-style'\nimport { TARGET_SIZE } from '../press'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { GLYPH_SIZE, styles, stylesOf } from './styles'\n\n// The pill the chips page draws, shared by Chip and ChipGroup's chip so the\n// two cannot drift, as web's `src/chip` is. Not a component of the library's\n// own and not exported from the package. A 32dp pill with an 8dp corner, 16dp\n// of inline padding and a 1dp rule, its label in label-large.\n//\n// An unselected chip is an outline-variant rule around nothing. **An elevated\n// chip trades the outline for a container**, surface container low at the\n// page's elevation 1, raised to 2 under a pointer; a selected one keeps the\n// secondary container and takes the shadow with it. Its rule stays,\n// transparent, so a chip is one size whichever container it is on.\n//\n// The check takes the icon's place rather than joining it, so a chip with an\n// icon keeps its width when it is chosen, where one without grows by the\n// slot. The check is what makes the selection legible without colour. An icon\n// is in the primary role, and in the label's colour while disabled; the check\n// is always in the label's. The slot is the page's 18dp, and a chip drawing\n// one pads 8dp on that side rather than 16.\n//\n// **The label is one line, cut short with an ellipsis.** The chip is never\n// wider than what holds it, which leaves the label a width to be cut at, and a\n// screen reader still reads all of it. The height is a floor rather than a\n// fixed size, so a label the device's text size enlarges grows the chip\n// rather than running out of it.\n//\n// The fill, the rule and the label's colour ease over `durationShort2` on the\n// standard curve, and change at once under reduced motion. The check appears\n// at once, as on web, and the shadow moves at once, as a button's does.\n//\n// **Disabled is the page's colour at an opacity, translucent**, as a button's\n// is: the label on-surface at `disabledContent`, a selected or elevated chip's\n// container on-surface at `disabledContainer`, and an unselected one's rule at\n// the same. A disabled chip casts no shadow.\n//\n// The state layers, the ripple and the focus ring are src/press's: on-surface\n// over an unselected or elevated chip, on-secondary-container over a selected\n// one.\n//\n// **The target departs from the page's 48dp, as web's does.** Across, it is\n// the chip's width or 48dp, whichever is wider, centred on the chip. Up and\n// down it reaches half the `spacing.sm` that chips wrap apart, not the 8dp a\n// 48dp target would ask: a full reach would lay one row's target over the next\n// one's, and a press just under one chip could go to the chip below it.\n// Halfway, two rows' targets meet in the middle of the gap.\n\n/** The colours a chip draws in one state. */\ntype Paint = {\n  /** The label's colour. */\n  readonly content: string\n  readonly fill: string\n  /**\n   * The glyph's colour: the label's for the check, and for an icon the\n   * primary role's, or the label's while the chip is disabled.\n   */\n  readonly glyph: string\n  /** The state layer's and the ripple's colour. */\n  readonly layer: string\n  readonly rule: string\n}\n\nconst CHECK = <CheckGlyph />\n\n/**\n * What a chip draws before its label: the check while it is selected, its own\n * icon while it is not, and nothing for an unselected chip with no icon. The\n * slot hands the glyph its colour and size through `useIconStyle()`.\n */\nfunction ChipGlyph({\n  color,\n  icon,\n  selected,\n}: {\n  readonly color: string\n  readonly icon: ReactNode\n  readonly selected: boolean\n}) {\n  const own = stylesOf(useTheme())\n  const glyph = selected ? CHECK : icon\n\n  if (glyph === undefined || glyph === null) {\n    return null\n  }\n\n  return (\n    <IconStyleContext value={iconStyleOf(color)}>\n      <View style={composeStyles<ViewStyle>(styles.glyph, own.glyphStart)}>\n        {glyph}\n      </View>\n    </IconStyleContext>\n  )\n}\n\n/**\n * The label a chip draws, on one line and cut short with an ellipsis, in the\n * colour `useEasedColors` eases.\n */\nfunction ChipLabel({\n  children,\n  color,\n}: {\n  readonly children: ReactNode\n  readonly color: AnimatedStyle<TextStyle>\n}) {\n  const role = useTypeRole('labelLarge')\n\n  return (\n    <Animated.Text\n      numberOfLines={1}\n      style={composeStyles<AnimatedStyle<TextStyle>>(role, styles.label, color)}\n    >\n      {children}\n    </Animated.Text>\n  )\n}\n\nfunction iconStyleOf(color: string): IconStyle {\n  return { color, size: GLYPH_SIZE }\n}\n\n/**\n * Records a chip's width for its target, then calls the call site's own\n * `onLayout`. Built by a call rather than declared in a component, which is\n * what react-perf's jsx-no-new-function-as-prop is after; the React Compiler\n * memoises the result on its inputs.\n */\nfunction measureThen(\n  setWidth: (width: number) => void,\n  onLayout: ((event: LayoutChangeEvent) => void) | null | undefined,\n) {\n  return (event: LayoutChangeEvent) => {\n    setWidth(event.nativeEvent.layout.width)\n    onLayout?.(event)\n  }\n}\n\n/**\n * The colours a chip draws, as the header sets them out. Transparent is\n * written as the colour it eases to or from at no opacity, since Reanimated\n * reads `transparent` as black at none and an ease from it would darken on\n * the way: the fill as the secondary container a selected chip takes, and the\n * rule as the outline it gives up.\n */\nfunction paintOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    assist,\n    disabled,\n    elevated,\n    selected,\n  }: {\n    readonly assist: boolean\n    readonly disabled: boolean\n    readonly elevated: boolean\n    readonly selected: boolean\n  },\n): Paint {\n  const clearFill = withOpacity(colors.secondaryContainer, 0)\n  const clearRule = withOpacity(colors.outlineVariant, 0)\n  const contained = selected || elevated\n\n  if (disabled) {\n    const content = withOpacity(\n      colors.onSurface,\n      stateLayerOpacity.disabledContent,\n    )\n    const container = withOpacity(\n      colors.onSurface,\n      stateLayerOpacity.disabledContainer,\n    )\n\n    return {\n      content,\n      fill: contained ? container : clearFill,\n      glyph: content,\n      layer: colors.onSurface,\n      rule: contained ? clearRule : container,\n    }\n  }\n\n  if (selected) {\n    return {\n      content: colors.onSecondaryContainer,\n      fill: colors.secondaryContainer,\n      glyph: colors.onSecondaryContainer,\n      layer: colors.onSecondaryContainer,\n      rule: clearRule,\n    }\n  }\n\n  return {\n    content: assist ? colors.onSurface : colors.onSurfaceVariant,\n    fill: elevated ? colors.surfaceContainerLow : clearFill,\n    glyph: colors.primary,\n    layer: colors.onSurface,\n    rule: elevated ? clearRule : colors.outlineVariant,\n  }\n}\n\n/**\n * The target the header sets out: half the gap chips wrap apart above and\n * below, and across, whatever brings the chip up to 48dp wide.\n */\nfunction targetOf(width: number, { spacing }: ResolvedTheme): Insets {\n  const across = Math.max(0, (TARGET_SIZE - width) / 2)\n  const reach = spacing.sm / 2\n\n  return { bottom: reach, left: across, right: across, top: reach }\n}\n\n/**\n * The container's fill and rule and the label's colour, easing to the paint\n * they are given, or there at once under reduced motion.\n */\nfunction useEasedColors({ content, fill, rule }: Paint) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingStandard),\n  }\n\n  const container = useAnimatedStyle(() => {\n    'worklet'\n    return {\n      backgroundColor: reduceMotion ? fill : withTiming(fill, timing),\n      borderColor: reduceMotion ? rule : withTiming(rule, timing),\n    }\n  })\n  const label = useAnimatedStyle(() => {\n    'worklet'\n    return { color: reduceMotion ? content : withTiming(content, timing) }\n  })\n\n  return { container, label }\n}\n\nexport { ChipGlyph, ChipLabel, measureThen, paintOf, targetOf, useEasedColors }\nexport type { Paint }\n"],"mappings":"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"}

package/dist/chip/styles.js

@@ -0,0 +1,36 @@
+import { themedStyles } from "../theme/styles.js";
+import { StyleSheet } from "react-native";
+const styles = StyleSheet.create({
+	glyph: {
+		alignItems: "center",
+		flexShrink: 0,
+		height: 18,
+		justifyContent: "center",
+		width: 18
+	},
+	label: {
+		flexShrink: 1,
+		minWidth: 0
+	}
+});
+const stylesOf = themedStyles(({ radii, sizing, spacing }) => StyleSheet.create({
+	glyphStart: { marginStart: -spacing.sm },
+	pill: {
+		alignItems: "center",
+		borderRadius: radii.sm,
+		borderWidth: 1,
+		flexDirection: "row",
+		gap: spacing.sm,
+		maxWidth: "100%",
+		minHeight: sizing.controlXs,
+		paddingHorizontal: spacing.lg
+	}
+}));
+const shadowsOf = themedStyles(({ shadows }) => StyleSheet.create({
+	elevation1: { boxShadow: shadows.elevation1 },
+	elevation2: { boxShadow: shadows.elevation2 }
+}));
+//#endregion
+export { shadowsOf, styles, stylesOf };
+
+//# sourceMappingURL=styles.js.map

package/dist/chip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["StyleSheet","themedStyles","GLYPH_SIZE","RULE_WIDTH","styles","create","glyph","alignItems","flexShrink","height","justifyContent","width","label","minWidth","stylesOf","radii","sizing","spacing","glyphStart","marginStart","sm","pill","borderRadius","borderWidth","flexDirection","gap","maxWidth","minHeight","controlXs","paddingHorizontal","lg","shadowsOf","shadows","elevation1","boxShadow","elevation2"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { themedStyles } from '../theme/styles'\n\n// The pill the chips page draws, shared by the two components that draw one:\n// Chip, and ChipGroup's chip. See the header of `./index.tsx`.\n\n// The page's icon size for a chip. A literal, as on web: the theme has no\n// scale for icon sizes.\nconst GLYPH_SIZE = 18\n\n// The rule every chip draws, transparent on a container of its own, so a chip\n// is one size whichever container it is on.\nconst RULE_WIDTH = 1\n\nconst styles = StyleSheet.create({\n  glyph: {\n    alignItems: 'center',\n    flexShrink: 0,\n    height: GLYPH_SIZE,\n    justifyContent: 'center',\n    width: GLYPH_SIZE,\n  },\n  // The label gives way before anything else in the pill does, and `minWidth`\n  // lets it narrow below its text, which React Native Web otherwise holds it\n  // at, so the ellipsis has somewhere to fall.\n  label: {\n    flexShrink: 1,\n    minWidth: 0,\n  },\n})\n\nconst stylesOf = themedStyles(({ radii, sizing, spacing }) =>\n  StyleSheet.create({\n    // The pill's inline padding is 8dp on the side the glyph is on, so the\n    // slot gives back the difference rather than the pill padding each side\n    // apart, as web's does.\n    glyphStart: {\n      marginStart: -spacing.sm,\n    },\n    // No block padding, as on web: the label's own line box is what keeps an\n    // enlarged label off the pill's edge, and a padding off the spacing scale\n    // would grow the pill past 32dp under a scheme with a roomier one.\n    pill: {\n      alignItems: 'center',\n      borderRadius: radii.sm,\n      borderWidth: RULE_WIDTH,\n      flexDirection: 'row',\n      gap: spacing.sm,\n      maxWidth: '100%',\n      minHeight: sizing.controlXs,\n      paddingHorizontal: spacing.lg,\n    },\n  }),\n)\n\nconst shadowsOf = themedStyles(({ shadows }) =>\n  StyleSheet.create({\n    elevation1: { boxShadow: shadows.elevation1 },\n    elevation2: { boxShadow: shadows.elevation2 },\n  }),\n)\n\nexport { GLYPH_SIZE, RULE_WIDTH, shadowsOf, styles, stylesOf }\n"],"mappings":";;AAeA,MAAMI,SAASJ,WAAWK,OAAO;CAC/BC,OAAO;EACLC,YAAY;EACZC,YAAY;EACZC,QAAAA;EACAC,gBAAgB;EAChBC,OAAAA;CACF;CAIAC,OAAO;EACLJ,YAAY;EACZK,UAAU;CACZ;AACF,CAAC;AAED,MAAMC,WAAWb,cAAc,EAAEc,OAAOC,QAAQC,cAC9CjB,WAAWK,OAAO;CAIhBa,YAAY,EACVC,aAAa,CAACF,QAAQG,GACxB;CAIAC,MAAM;EACJd,YAAY;EACZe,cAAcP,MAAMK;EACpBG,aAAAA;EACAC,eAAe;EACfC,KAAKR,QAAQG;EACbM,UAAU;EACVC,WAAWX,OAAOY;EAClBC,mBAAmBZ,QAAQa;CAC7B;AACF,CAAC,CACH;AAEA,MAAMC,YAAY9B,cAAc,EAAE+B,cAChChC,WAAWK,OAAO;CAChB4B,YAAY,EAAEC,WAAWF,QAAQC,WAAW;CAC5CE,YAAY,EAAED,WAAWF,QAAQG,WAAW;AAC9C,CAAC,CACH"}

package/dist/clipboard/index.js

@@ -0,0 +1,58 @@
+import { useSyncExternalStore } from "react";
+//#region src/clipboard/index.ts
+let clipboard;
+let loading;
+const listeners = /* @__PURE__ */ new Set();
+async function load() {
+	try {
+		return await import(
+			/* @vite-ignore */
+			"expo-clipboard"
+);
+	} catch {
+		return null;
+	}
+}
+async function settle() {
+	loading ??= load().then((settled) => {
+		clipboard = settled;
+		for (const listener of listeners) listener();
+		return settled;
+	});
+	return loading;
+}
+function snapshot() {
+	settle();
+	return clipboard;
+}
+function subscribe(listener) {
+	settle();
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+/**
+* Whether expo-clipboard is there to write to: `false` once importing it has
+* failed, and `true` until then, so a control that copies draws at once in
+* the app that installed it rather than a moment after.
+*/
+function useClipboardAvailable() {
+	return useSyncExternalStore(subscribe, snapshot) !== null;
+}
+/**
+* Puts text on the clipboard, and rejects when it did not get there: when
+* expo-clipboard is not installed, or when its write says it failed. On iOS
+* and Android the write always lands. Under React Native Web it fails only
+* where the browser refuses its clipboard and its older copy command throws
+* as well, since expo-clipboard falls back to the second itself.
+*/
+async function writeClipboard(text) {
+	const settled = await settle();
+	if (settled === null) throw new Error("expo-clipboard is not installed");
+	if (!await settled.setStringAsync(text)) throw new Error("The clipboard refused the write");
+}
+//#endregion
+export { useClipboardAvailable, writeClipboard };
+
+//# sourceMappingURL=index.js.map

package/dist/clipboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useSyncExternalStore","Clipboard","setStringAsync","text","Promise","clipboard","loading","listeners","Set","load","settle","then","settled","listener","snapshot","subscribe","add","delete","useClipboardAvailable","writeClipboard","Error"],"sources":["../../src/clipboard/index.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\ntype Clipboard = {\n  readonly setStringAsync: (text: string) => Promise<boolean>\n}\n\n// expo-clipboard is an optional peer, so it is imported where its absence can\n// be caught, as src/typography/fonts.ts imports expo-font: Metro takes an\n// import inside a `try` as optional and bundles an app without it. Until the\n// import settles the module is `undefined`, and `null` once it has failed,\n// which is also what an app that installed it without rebuilding gets, since\n// the package throws on import when its native half is missing.\nlet clipboard: Clipboard | null | undefined\nlet loading: Promise<Clipboard | null> | undefined\nconst listeners = new Set<() => void>()\n\nasync function load(): Promise<Clipboard | null> {\n  try {\n    return await import(/* @vite-ignore */ 'expo-clipboard')\n  } catch {\n    return null\n  }\n}\n\nasync function settle() {\n  loading ??= load().then((settled) => {\n    clipboard = settled\n\n    for (const listener of listeners) {\n      listener()\n    }\n\n    return settled\n  })\n\n  return loading\n}\n\nfunction snapshot() {\n  void settle()\n  return clipboard\n}\n\nfunction subscribe(listener: () => void) {\n  void settle()\n  listeners.add(listener)\n  return () => {\n    listeners.delete(listener)\n  }\n}\n\n/**\n * Whether expo-clipboard is there to write to: `false` once importing it has\n * failed, and `true` until then, so a control that copies draws at once in\n * the app that installed it rather than a moment after.\n */\nfunction useClipboardAvailable(): boolean {\n  return useSyncExternalStore(subscribe, snapshot) !== null\n}\n\n/**\n * Puts text on the clipboard, and rejects when it did not get there: when\n * expo-clipboard is not installed, or when its write says it failed. On iOS\n * and Android the write always lands. Under React Native Web it fails only\n * where the browser refuses its clipboard and its older copy command throws\n * as well, since expo-clipboard falls back to the second itself.\n */\nasync function writeClipboard(text: string): Promise<void> {\n  const settled = await settle()\n\n  if (settled === null) {\n    throw new Error('expo-clipboard is not installed')\n  }\n\n  if (!(await settled.setStringAsync(text))) {\n    throw new Error('The clipboard refused the write')\n  }\n}\n\nexport { useClipboardAvailable, writeClipboard }\n"],"mappings":";;AAYA,IAAIK;AACJ,IAAIC;AACJ,MAAMC,4BAAY,IAAIC,IAAgB;AAEtC,eAAeC,OAAkC;CAC/C,IAAI;EACF,OAAO,MAAM;;GAA0B;;CACzC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,eAAeC,SAAS;CACtBJ,YAAYG,KAAK,CAAC,CAACE,MAAMC,YAAY;EACnCP,YAAYO;EAEZ,KAAK,MAAMC,YAAYN,WACrBM,SAAS;EAGX,OAAOD;CACT,CAAC;CAED,OAAON;AACT;AAEA,SAASQ,WAAW;CAClB,OAAY;CACZ,OAAOT;AACT;AAEA,SAASU,UAAUF,UAAsB;CACvC,OAAY;CACZN,UAAUS,IAAIH,QAAQ;CACtB,aAAa;EACXN,UAAUU,OAAOJ,QAAQ;CAC3B;AACF;;;;;;AAOA,SAAAK,wBAAA;CAAA,OACSlB,qBAAqBe,WAAWD,QAAQ,MAAM;AAAI;;;;;;;;AAU3D,eAAeK,eAAehB,MAA6B;CACzD,MAAMS,UAAU,MAAMF,OAAO;CAE7B,IAAIE,YAAY,MACd,MAAM,IAAIQ,MAAM,iCAAiC;CAGnD,IAAI,CAAE,MAAMR,QAAQV,eAAeC,IAAI,GACrC,MAAM,IAAIiB,MAAM,iCAAiC;AAErD"}

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

@@ -0,0 +1,82 @@
+import { MarkImageProps } from "../../mark/index.js";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { Ref } from "react";
+//#region src/components/avatar/index.d.ts
+type AvatarProps = Omit<ViewProps, 'children' | 'style'> & {
+  /**
+   * Hides the avatar from screen readers, for one beside the person's name,
+   * such as a row whose headline is the name or a byline, where it would
+   * otherwise announce the name a second time. `name` still supplies the
+   * initials, and is not announced.
+   * @default false
+   */
+  readonly decorative?: boolean;
+  /**
+   * Props for the photo's own `Image`: `crossOrigin` and `referrerPolicy`
+   * for where it is served from, and `resizeMethod`, `fadeDuration` and
+   * `progressiveRenderingEnabled` for how Android decodes and shows it.
+   */
+  readonly imgProps?: MarkImageProps;
+  /**
+   * The person this represents. Supplies both the initials and the
+   * accessible name, so a screen reader announces who it is rather than
+   * reading two letters aloud.
+   *
+   * A display name, as a reader would see it written: the initials are its
+   * first and last words. A title before the name ("Dr."), a generational
+   * suffix after it ("Jr.", "III") and an aside in brackets at its end
+   * ("(she/her)") are passed over, as is punctuation a word opens with. A
+   * name written without spaces between its words, as Japanese and Chinese
+   * names are, is one word, and takes one initial.
+   */
+  readonly name: string;
+  readonly ref?: Ref<View>;
+  /**
+   * Whether an avatar with no initials to take, for a blank `name`, draws
+   * Material Design's anonymous person. `false` leaves the tinted disc
+   * empty, for a loading skeleton.
+   * @default true
+   */
+  readonly showPersonIcon?: boolean;
+  /**
+   * Diameter: `sm` 36dp, `md` 40dp, `lg` 56dp.
+   * @default 'md'
+   */
+  readonly size?: 'lg' | 'md' | 'sm';
+  /**
+   * A photo to show in place of the initials. The initials stay until it has
+   * loaded, and come back if it fails.
+   */
+  readonly src?: string;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * Which container and on-container colour pair to tint with.
+   * @default 'primary'
+   */
+  readonly tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';
+};
+/**
+ * A person, as a disc holding their photo or, until it loads or when there
+ * is none, their initials. `name` is both where the initials come from and
+ * what a screen reader announces, so it is required even with a photo.
+ *
+ * ```tsx
+ * <Avatar name="Ada Lovelace" size="lg" src={photo} />
+ * ```
+ *
+ * It is announced as an image named by `name`. When the person's name is
+ * already written next to the avatar, mark it `decorative`, so a screen
+ * reader reads the name once. A blank name names nothing, so the avatar is
+ * then a plain view, which a screen reader passes over rather than reading
+ * as an image with no name.
+ *
+ * Reach for ProductIcon when what is drawn is not a person; the two share
+ * their sizes, so either fills the same slot in a row or a card.
+ *
+ * The initials are taken in the device's locale. `style`, `ref` and `testID`
+ * land on the disc.
+ */
+declare function Avatar({ size, tone, ...props }: AvatarProps): import("react").JSX.Element;
+//#endregion
+export { Avatar, type AvatarProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.js

@@ -0,0 +1,62 @@
+import { Mark } from "../../mark/index.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/avatar/index.tsx
+/**
+* A person, as a disc holding their photo or, until it loads or when there
+* is none, their initials. `name` is both where the initials come from and
+* what a screen reader announces, so it is required even with a photo.
+*
+* ```tsx
+* <Avatar name="Ada Lovelace" size="lg" src={photo} />
+* ```
+*
+* It is announced as an image named by `name`. When the person's name is
+* already written next to the avatar, mark it `decorative`, so a screen
+* reader reads the name once. A blank name names nothing, so the avatar is
+* then a plain view, which a screen reader passes over rather than reading
+* as an image with no name.
+*
+* Reach for ProductIcon when what is drawn is not a person; the two share
+* their sizes, so either fills the same slot in a row or a card.
+*
+* The initials are taken in the device's locale. `style`, `ref` and `testID`
+* land on the disc.
+*/
+function Avatar(t0) {
+	const $ = c(8);
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({size: t1, tone: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		props = $[1];
+		t1 = $[2];
+		t2 = $[3];
+	}
+	const size = t1 === void 0 ? "md" : t1;
+	const tone = t2 === void 0 ? "primary" : t2;
+	let t3;
+	if ($[4] !== props || $[5] !== size || $[6] !== tone) {
+		t3 = /* @__PURE__ */ jsx(Mark, {
+			...props,
+			kind: "person",
+			size,
+			tone
+		});
+		$[4] = props;
+		$[5] = size;
+		$[6] = tone;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+//#endregion
+export { Avatar };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Ref","StyleProp","View","ViewProps","ViewStyle","MarkImageProps","Mark","AvatarProps","Omit","decorative","imgProps","name","ref","showPersonIcon","size","src","style","tone","Avatar","t0","$","_c","props","t1","t2","undefined","t3","_c"],"sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["import type { Ref } from 'react'\nimport type { StyleProp, View, ViewProps, ViewStyle } from 'react-native'\n\nimport type { MarkImageProps } from '../../mark'\n\nimport { Mark } from '../../mark'\n\n// A person, drawn as a disc with the photo cropped to fill it, as kanso-ui's\n// Avatar draws one. The box, the sizes, the tones, the photo's loading and\n// the labelling are the mark's in `src/mark`, which ProductIcon draws a thing\n// through as well, so a person and a thing fill the same slot.\n//\n// Which tone a given person gets is the consuming app's decision, since the\n// cycle of colours belongs where the list of people is.\n\ntype AvatarProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * Hides the avatar from screen readers, for one beside the person's name,\n   * such as a row whose headline is the name or a byline, where it would\n   * otherwise announce the name a second time. `name` still supplies the\n   * initials, and is not announced.\n   * @default false\n   */\n  readonly decorative?: boolean\n  /**\n   * Props for the photo's own `Image`: `crossOrigin` and `referrerPolicy`\n   * for where it is served from, and `resizeMethod`, `fadeDuration` and\n   * `progressiveRenderingEnabled` for how Android decodes and shows it.\n   */\n  readonly imgProps?: MarkImageProps\n  /**\n   * The person this represents. Supplies both the initials and the\n   * accessible name, so a screen reader announces who it is rather than\n   * reading two letters aloud.\n   *\n   * A display name, as a reader would see it written: the initials are its\n   * first and last words. A title before the name (\"Dr.\"), a generational\n   * suffix after it (\"Jr.\", \"III\") and an aside in brackets at its end\n   * (\"(she/her)\") are passed over, as is punctuation a word opens with. A\n   * name written without spaces between its words, as Japanese and Chinese\n   * names are, is one word, and takes one initial.\n   */\n  readonly name: string\n  readonly ref?: Ref<View>\n  /**\n   * Whether an avatar with no initials to take, for a blank `name`, draws\n   * Material Design's anonymous person. `false` leaves the tinted disc\n   * empty, for a loading skeleton.\n   * @default true\n   */\n  readonly showPersonIcon?: boolean\n  /**\n   * Diameter: `sm` 36dp, `md` 40dp, `lg` 56dp.\n   * @default 'md'\n   */\n  readonly size?: 'lg' | 'md' | 'sm'\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  readonly src?: string\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Which container and on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  readonly tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary'\n}\n\n/**\n * A person, as a disc holding their photo or, until it loads or when there\n * is none, their initials. `name` is both where the initials come from and\n * what a screen reader announces, so it is required even with a photo.\n *\n * ```tsx\n * <Avatar name=\"Ada Lovelace\" size=\"lg\" src={photo} />\n * ```\n *\n * It is announced as an image named by `name`. When the person's name is\n * already written next to the avatar, mark it `decorative`, so a screen\n * reader reads the name once. A blank name names nothing, so the avatar is\n * then a plain view, which a screen reader passes over rather than reading\n * as an image with no name.\n *\n * Reach for ProductIcon when what is drawn is not a person; the two share\n * their sizes, so either fills the same slot in a row or a card.\n *\n * The initials are taken in the device's locale. `style`, `ref` and `testID`\n * land on the disc.\n */\nfunction Avatar({ size = 'md', tone = 'primary', ...props }: AvatarProps) {\n  return <Mark {...props} kind=\"person\" size={size} tone={tone} />\n}\n\nexport type { AvatarProps }\n\nexport { Avatar }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,SAAAkB,OAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAgB,CAAA,CAAAL,MAAAS,IAAAN,MAAAO,IAAA,GAAAF,SAAAH;EAAwDC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAF,QAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAtD,MAAAN,OAAAS,OAAAE,KAAAA,IAAA,OAAAF;CAAa,MAAAN,OAAAO,OAAAC,KAAAA,IAAA,YAAAD;CAAgB,IAAAE;CAAA,IAAAN,EAAA,OAAAE,SAAAF,EAAA,OAAAN,QAAAM,EAAA,OAAAH,MAAA;EACtCS,KAAA,oBAAC,MAAD;GAAK,GAAKJ;GAAY,MAAA;GAAeR;GAAYG;EAAI,CAAA;EAAIG,EAAA,KAAAE;EAAAF,EAAA,KAAAN;EAAAM,EAAA,KAAAH;EAAAG,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAAzDM;AAAyD"}

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

@@ -0,0 +1,87 @@
+import { ButtonLinkForm, ButtonPressForm, ButtonToggleForm } from "../../button/index.js";
+import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+//#region src/components/button/index.d.ts
+type ButtonForm = ButtonLinkForm | ButtonPressForm | (ButtonToggleForm & {
+  /**
+   * A toggle takes any variant but `text`, which the page gives no
+   * selected colours.
+   */
+  readonly variant?: Exclude<ButtonVariant, 'text'>;
+});
+type ButtonProps = ButtonForm & Omit<PressableProps, 'children' | 'disabled' | 'style'> & {
+  /** The label. */
+  readonly children?: ReactNode;
+  /**
+   * Draws no press ripple. The state layer is unaffected.
+   * @default false
+   */
+  readonly disableRipple?: boolean;
+  /**
+   * An icon before the label, at the page's icon size for the button's
+   * size: 20dp at `xs` and `md`, 24dp at `lg`, 32dp at `xl` and 40dp at
+   * `xxl`. The slot hands it the label's colour and that size through
+   * `useIconStyle()`.
+   */
+  readonly icon?: ReactNode;
+  /**
+   * Draws the button disabled, and takes no presses.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<View>;
+  /**
+   * The corner the button rests at: `round` is the pill, `square` the
+   * page's rounded rectangle, 12dp up to `md`, 16dp at `lg` and 28dp above.
+   * Either tightens while pressed, and a toggle trades one for the other
+   * once selected.
+   * @default 'round'
+   */
+  readonly shape?: ButtonShape;
+  /**
+   * Control height: `xs` 32dp, `md` 40dp, `lg` 56dp, `xl` 96dp, `xxl` 136dp,
+   * the buttons spec page's XS, S, M, L and XL, each with its own padding
+   * and type role. `md` is the page's default. The height is a floor, so a
+   * label that wraps, or that the device's text size enlarges, grows the
+   * button rather than running out of it.
+   * @default 'md'
+   */
+  readonly size?: ButtonSize;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * How much weight the button pulls. `filled` and `tonal` carry a container
+   * of their own; `outlined` and `text` sit on the page; `elevated` sits on
+   * a low surface and lifts off it with a shadow, for a button that has to
+   * separate from a busy background rather than from the page.
+   * @default 'filled'
+   */
+  readonly variant?: ButtonVariant;
+};
+type ButtonShape = 'round' | 'square';
+type ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';
+type ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';
+/**
+ * The design's button, at five emphasis levels and five control heights,
+ * round or square, with web's props and values. Given `href` it is a link with
+ * the same appearance, and given `isSelected`, `defaultSelected` or
+ * `onChange` it is a toggle, which reports its state to a screen reader and
+ * draws the page's second pair of colour roles for its variant.
+ *
+ * ```tsx
+ * <Button defaultSelected variant="tonal">
+ *   Label
+ * </Button>
+ * ```
+ *
+ * A column stretches a button across it, as it does any view, and as a flex
+ * column does a button on web; a column that should hold its buttons at their
+ * labels' width says so with `alignItems`.
+ *
+ * The two sizes under 48dp tall, `xs` and `md`, take presses over a 48dp
+ * target through `hitSlop`, which a `hitSlop` of the call site's own replaces.
+ * `style`, `ref` and `testID` land on the `Pressable`.
+ */
+declare function Button({ children, defaultSelected, disableRipple, hitSlop: ownHitSlop, href, icon, isDisabled, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, shape, size, style, type, variant, ...props }: ButtonProps): import("react").JSX.Element;
+//#endregion
+export { Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant };
+//# sourceMappingURL=index.d.ts.map