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

package/dist/components/icon-button/index.js

@@ -0,0 +1,289 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { AnimatedPressable, HEIGHTS, OUTLINE_WIDTHS, PRESSED_CORNERS, buttonStyles, toggleState, useButtonAction, useCorner } from "../../button/index.js";
+import { palettesOf } from "../../button/palettes.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Animated from "react-native-reanimated";
+//#region src/components/icon-button/index.tsx
+const DISABLED = {
+	filled: "filledDisabled",
+	outlined: "outlinedDisabled",
+	standard: "textDisabled",
+	tonal: "filledDisabled"
+};
+const ICON_SIZES = {
+	lg: 24,
+	md: 24,
+	xl: 32,
+	xs: 20,
+	xxl: 40
+};
+const TOGGLE_PALETTES = {
+	filled: {
+		selected: "filledToggleSelected",
+		unselected: "filledToggle"
+	},
+	outlined: {
+		selected: "outlinedToggleSelected",
+		unselected: "outlined"
+	},
+	standard: {
+		selected: "standardToggleSelected",
+		unselected: "standard"
+	},
+	tonal: {
+		selected: "tonalToggleSelected",
+		unselected: "tonal"
+	}
+};
+const styles = StyleSheet.create({ base: {
+	alignItems: "center",
+	flexShrink: 0,
+	justifyContent: "center"
+} });
+const outlineWidths = StyleSheet.create({
+	lg: { borderWidth: OUTLINE_WIDTHS.lg },
+	md: { borderWidth: OUTLINE_WIDTHS.md },
+	xl: { borderWidth: OUTLINE_WIDTHS.xl },
+	xs: { borderWidth: OUTLINE_WIDTHS.xs },
+	xxl: { borderWidth: OUTLINE_WIDTHS.xxl }
+});
+const sizesOf = themedStyles(({ sizing }) => {
+	function square(size) {
+		const edge = sizing[HEIGHTS[size]];
+		return {
+			height: edge,
+			width: edge
+		};
+	}
+	return StyleSheet.create({
+		lg: square("lg"),
+		md: square("md"),
+		xl: square("xl"),
+		xs: square("xs"),
+		xxl: square("xxl")
+	});
+});
+/**
+* A button that is an icon, at five control heights, 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. The three forms are exclusive, so a toggle given
+* `href` does not compile.
+*
+* ```tsx
+* <IconButton aria-label="Label" defaultSelected variant="tonal">
+*   <Icon />
+* </IconButton>
+* ```
+*
+* The two sizes under 48dp, `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`.
+*/
+function IconButton(t0) {
+	const $ = c(58);
+	let children;
+	let defaultSelected;
+	let href;
+	let isSelected;
+	let onBlur;
+	let onChange;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onLayout;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let ownHitSlop;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let type;
+	if ($[0] !== t0) {
+		({children, defaultSelected, disableRipple: t1, hitSlop: ownHitSlop, href, isDisabled: t2, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, size: t3, style, type, variant: t4, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultSelected;
+		$[3] = href;
+		$[4] = isSelected;
+		$[5] = onBlur;
+		$[6] = onChange;
+		$[7] = onFocus;
+		$[8] = onHoverIn;
+		$[9] = onHoverOut;
+		$[10] = onLayout;
+		$[11] = onPress;
+		$[12] = onPressIn;
+		$[13] = onPressOut;
+		$[14] = ownHitSlop;
+		$[15] = props;
+		$[16] = style;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = type;
+	} else {
+		children = $[1];
+		defaultSelected = $[2];
+		href = $[3];
+		isSelected = $[4];
+		onBlur = $[5];
+		onChange = $[6];
+		onFocus = $[7];
+		onHoverIn = $[8];
+		onHoverOut = $[9];
+		onLayout = $[10];
+		onPress = $[11];
+		onPressIn = $[12];
+		onPressOut = $[13];
+		ownHitSlop = $[14];
+		props = $[15];
+		style = $[16];
+		t1 = $[17];
+		t2 = $[18];
+		t3 = $[19];
+		t4 = $[20];
+		type = $[21];
+	}
+	const disableRipple = t1 === void 0 ? false : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const size = t3 === void 0 ? "md" : t3;
+	const variant = t4 === void 0 ? "standard" : t4;
+	const theme = useTheme();
+	const isToggle = defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0;
+	let t5;
+	if ($[22] !== defaultSelected || $[23] !== href || $[24] !== isSelected || $[25] !== isToggle || $[26] !== onChange || $[27] !== onPress || $[28] !== type) {
+		t5 = {
+			defaultSelected,
+			href,
+			isSelected,
+			isToggle,
+			onChange,
+			onPress,
+			type
+		};
+		$[22] = defaultSelected;
+		$[23] = href;
+		$[24] = isSelected;
+		$[25] = isToggle;
+		$[26] = onChange;
+		$[27] = onPress;
+		$[28] = type;
+		$[29] = t5;
+	} else t5 = $[29];
+	const action = useButtonAction(t5);
+	const colors = palettesOf(theme)[isDisabled ? DISABLED[variant] : isToggle ? TOGGLE_PALETTES[variant][action.selected ? "selected" : "unselected"] : variant];
+	const feedback = usePressFeedback({
+		color: colors.content,
+		disabled: isDisabled,
+		disableRipple,
+		onBlur,
+		onFocus,
+		onHoverIn,
+		onHoverOut,
+		onPressIn,
+		onPressOut
+	});
+	const { radii, sizing } = theme;
+	const edge = sizing[HEIGHTS[size]];
+	const shaped = useCorner(feedback.pressed || action.selected ? radii[PRESSED_CORNERS[size]] : radii.pill, onLayout);
+	const T0 = AnimatedPressable;
+	const t6 = href === void 0 ? "button" : "link";
+	let t7;
+	if ($[30] !== action.selected || $[31] !== isToggle) {
+		t7 = isToggle ? toggleState(action.selected) : void 0;
+		$[30] = action.selected;
+		$[31] = isToggle;
+		$[32] = t7;
+	} else t7 = $[32];
+	const t8 = feedback.handlers;
+	let t9;
+	if ($[33] !== edge || $[34] !== ownHitSlop) {
+		t9 = ownHitSlop ?? hitSlop(edge, edge);
+		$[33] = edge;
+		$[34] = ownHitSlop;
+		$[35] = t9;
+	} else t9 = $[35];
+	const t10 = shaped.onLayout;
+	const t11 = action.onPress;
+	const t12 = composeStyles(styles.base, sizesOf(theme)[size], variant === "outlined" ? outlineWidths[size] : void 0, colors.container, shaped.corner, feedback.ring, style);
+	let t13;
+	if ($[36] !== shaped.corner) {
+		t13 = composeStyles(buttonStyles.clip, shaped.corner);
+		$[36] = shaped.corner;
+		$[37] = t13;
+	} else t13 = $[37];
+	let t14;
+	if ($[38] !== feedback.layer || $[39] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Animated.View, {
+			style: t13,
+			children: feedback.layer
+		});
+		$[38] = feedback.layer;
+		$[39] = t13;
+		$[40] = t14;
+	} else t14 = $[40];
+	const T1 = IconStyleContext;
+	const t15 = iconStyleOf(colors.content, size);
+	let t16;
+	if ($[41] !== T1 || $[42] !== children || $[43] !== t15) {
+		t16 = /* @__PURE__ */ jsx(T1, {
+			value: t15,
+			children
+		});
+		$[41] = T1;
+		$[42] = children;
+		$[43] = t15;
+		$[44] = t16;
+	} else t16 = $[44];
+	let t17;
+	if ($[45] !== T0 || $[46] !== action.onPress || $[47] !== feedback.handlers || $[48] !== isDisabled || $[49] !== props || $[50] !== shaped.onLayout || $[51] !== t12 || $[52] !== t14 || $[53] !== t16 || $[54] !== t6 || $[55] !== t7 || $[56] !== t9) {
+		t17 = /* @__PURE__ */ jsxs(T0, {
+			role: t6,
+			...t7,
+			...props,
+			...t8,
+			disabled: isDisabled,
+			hitSlop: t9,
+			onLayout: t10,
+			onPress: t11,
+			style: t12,
+			children: [t14, t16]
+		});
+		$[45] = T0;
+		$[46] = action.onPress;
+		$[47] = feedback.handlers;
+		$[48] = isDisabled;
+		$[49] = props;
+		$[50] = shaped.onLayout;
+		$[51] = t12;
+		$[52] = t14;
+		$[53] = t16;
+		$[54] = t6;
+		$[55] = t7;
+		$[56] = t9;
+		$[57] = t17;
+	} else t17 = $[57];
+	return t17;
+}
+function iconStyleOf(color, size) {
+	return {
+		color,
+		size: ICON_SIZES[size]
+	};
+}
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=index.js.map

package/dist/components/icon-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","PressableProps","StyleProp","View","ViewStyle","AnimatedStyle","StyleSheet","Animated","ButtonLinkForm","ButtonPressForm","ButtonToggleForm","PaletteName","IconStyle","AnimatedPressable","buttonStyles","HEIGHTS","OUTLINE_WIDTHS","PRESSED_CORNERS","toggleState","useButtonAction","useCorner","palettesOf","IconStyleContext","hitSlop","usePressFeedback","useTheme","composeStyles","themedStyles","IconButtonProps","Omit","children","disableRipple","isDisabled","ref","size","IconButtonSize","style","variant","IconButtonVariant","DISABLED","Readonly","Record","filled","outlined","standard","tonal","ICON_SIZES","lg","md","xl","xs","xxl","TOGGLE_PALETTES","selected","unselected","styles","create","base","alignItems","flexShrink","justifyContent","outlineWidths","borderWidth","sizesOf","sizing","square","edge","height","width","IconButton","t0","$","_c","defaultSelected","href","isSelected","onBlur","onChange","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","ownHitSlop","props","t1","t2","t3","t4","type","undefined","theme","isToggle","t5","action","colors","feedback","color","content","disabled","radii","shaped","pressed","pill","T0","t6","t7","t8","handlers","t9","t10","t11","t12","container","corner","ring","t13","clip","t14","layer","T1","t15","iconStyleOf","t16","t17","_c"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type { PressableProps, StyleProp, View, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { StyleSheet } from 'react-native'\nimport Animated from 'react-native-reanimated'\n\nimport type {\n  ButtonLinkForm,\n  ButtonPressForm,\n  ButtonToggleForm,\n} from '../../button'\nimport type { PaletteName } from '../../button/palettes'\nimport type { IconStyle } from '../../glyphs/icon-style'\n\nimport {\n  AnimatedPressable,\n  buttonStyles,\n  HEIGHTS,\n  OUTLINE_WIDTHS,\n  PRESSED_CORNERS,\n  toggleState,\n  useButtonAction,\n  useCorner,\n} from '../../button'\nimport { palettesOf } from '../../button/palettes'\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// The icon buttons spec page's four styles at its five sizes, as kanso-ui's\n// IconButton draws them: Button's chrome around a single icon. The pairs are\n// the page's: filled on primary, tonal on secondary container, outlined with\n// an outline-variant rule and an on-surface-variant icon, and standard,\n// transparent, with the same icon over whatever it sits on. Disabled is\n// Button's, on-surface at the two disabled opacities, and a standard button\n// takes the text button's colour since neither has a container.\n//\n// The sizes are the page's XS to XL at Button's five heights, so the two line\n// up in a row: a square of 32, 40, 56, 96 or 136dp holding an icon of 20, 24,\n// 24, 32 or 40dp. The two middle sizes share one icon, and the container\n// alone grows between them. The two smallest take presses over a 48dp target\n// through `hitSlop`, which is the page's floor for them.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it takes the page's second pair of colour\n// roles for its variant: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once selected, a tonal one moves\n// from the secondary container pair to secondary, a standard one stays\n// transparent while its icon moves to primary, and an outlined one swaps its\n// rule for the inverse surface pair. So a selected filled toggle looks like a\n// plain filled button, and an unselected one does not.\n//\n// **The corner morphs from a circle to a rounded square.** A press tightens\n// it to the size's pressed corner, 8dp for the two small sizes, 12dp at\n// `lg` and 16dp at the two large, and a selected toggle rests there, which is\n// the page's round-to-square morph. It eases as Button's does.\n//\n// The forms, the toggle's state, what a press does and the corner's ease are\n// src/button's, shared with Button.\n\ntype IconButtonProps = (ButtonLinkForm | ButtonPressForm | ButtonToggleForm) &\n  Omit<PressableProps, 'aria-label' | 'children' | 'disabled' | 'style'> & {\n    /**\n     * What the button does, in words. Required rather than optional: an icon\n     * on its own has no accessible name, so without this the control\n     * announces nothing at all.\n     */\n    readonly 'aria-label': string\n    /**\n     * The icon. The button hands it its colour and the page's icon size for\n     * the button's size through `useIconStyle()`.\n     */\n    readonly children?: ReactNode\n    /**\n     * Draws no press ripple. The state layer is unaffected.\n     * @default false\n     */\n    readonly disableRipple?: boolean\n    /**\n     * Draws the button disabled, and takes no presses.\n     * @default false\n     */\n    readonly isDisabled?: boolean\n    readonly ref?: Ref<View>\n    /**\n     * Control size: `xs` 32dp, `md` 40dp, `lg` 56dp, `xl` 96dp, `xxl` 136dp,\n     * the icon buttons spec page's XS to XL, and the same heights `Button`\n     * uses, so the two line up beside each other in a row. The icon is 20dp,\n     * 24dp, 24dp, 32dp and 40dp in turn.\n     * @default 'md'\n     */\n    readonly size?: IconButtonSize\n    readonly style?: StyleProp<ViewStyle>\n    /**\n     * `standard` is transparent and tints what it sits on; `outlined` is\n     * transparent with a rule around it; `filled` and `tonal` carry a\n     * container of their own.\n     * @default 'standard'\n     */\n    readonly variant?: IconButtonVariant\n  }\n\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl'\n\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal'\n\n// The disabled container each variant draws. Filled and tonal share the\n// page's one disabled container, and standard draws the text button's\n// colour, which is the icon alone.\nconst DISABLED: Readonly<Record<IconButtonVariant, PaletteName>> = {\n  filled: 'filledDisabled',\n  outlined: 'outlinedDisabled',\n  standard: 'textDisabled',\n  tonal: 'filledDisabled',\n}\n\n// The icon each size holds, from the page's size token sets. Literals, as on\n// web: they are icon sizes, which the theme has no scale for.\nconst ICON_SIZES: Readonly<Record<IconButtonSize, number>> = {\n  lg: 24,\n  md: 24,\n  xl: 32,\n  xs: 20,\n  xxl: 40,\n}\n\n// Which container a toggle draws, selected and not. An unselected outlined,\n// standard or tonal toggle is the plain button of that variant.\nconst TOGGLE_PALETTES: Readonly<\n  Record<\n    IconButtonVariant,\n    Readonly<Record<'selected' | 'unselected', PaletteName>>\n  >\n> = {\n  filled: { selected: 'filledToggleSelected', unselected: 'filledToggle' },\n  outlined: { selected: 'outlinedToggleSelected', unselected: 'outlined' },\n  standard: { selected: 'standardToggleSelected', unselected: 'standard' },\n  tonal: { selected: 'tonalToggleSelected', unselected: 'tonal' },\n}\n\nconst styles = StyleSheet.create({\n  // The icon sits in the middle of a square that a row never squeezes.\n  base: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n})\n\n// The outlined rule's width at each size, Button's.\nconst outlineWidths = StyleSheet.create({\n  lg: { borderWidth: OUTLINE_WIDTHS.lg },\n  md: { borderWidth: OUTLINE_WIDTHS.md },\n  xl: { borderWidth: OUTLINE_WIDTHS.xl },\n  xs: { borderWidth: OUTLINE_WIDTHS.xs },\n  xxl: { borderWidth: OUTLINE_WIDTHS.xxl },\n})\n\n// Square, so one control height sets both edges.\nconst sizesOf = themedStyles(({ sizing }) => {\n  function square(size: IconButtonSize): ViewStyle {\n    const edge = sizing[HEIGHTS[size]]\n\n    return { height: edge, width: edge }\n  }\n\n  return StyleSheet.create({\n    lg: square('lg'),\n    md: square('md'),\n    xl: square('xl'),\n    xs: square('xs'),\n    xxl: square('xxl'),\n  })\n})\n\n/**\n * A button that is an icon, at five control heights, with web's props and\n * values. Given `href` it is a link with the same appearance, and given\n * `isSelected`, `defaultSelected` or `onChange` it is a toggle, which reports\n * its state to a screen reader and draws the page's second pair of colour\n * roles for its variant. The three forms are exclusive, so a toggle given\n * `href` does not compile.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <Icon />\n * </IconButton>\n * ```\n *\n * The two sizes under 48dp, `xs` and `md`, take presses over a 48dp target\n * through `hitSlop`, which a `hitSlop` of the call site's own replaces.\n * `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  hitSlop: ownHitSlop,\n  href,\n  isDisabled = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onPress,\n  onPressIn,\n  onPressOut,\n  size = 'md',\n  style,\n  type,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  const theme = useTheme()\n\n  // The three props that make this a toggle, read as web reads them.\n  const isToggle =\n    defaultSelected !== undefined ||\n    isSelected !== undefined ||\n    onChange !== undefined\n  const action = useButtonAction({\n    defaultSelected,\n    href,\n    isSelected,\n    isToggle,\n    onChange,\n    onPress,\n    type,\n  })\n  const colors =\n    palettesOf(theme)[\n      isDisabled\n        ? DISABLED[variant]\n        : isToggle\n          ? TOGGLE_PALETTES[variant][\n              action.selected ? 'selected' : 'unselected'\n            ]\n          : variant\n    ]\n\n  const feedback = usePressFeedback({\n    color: colors.content,\n    disabled: isDisabled,\n    disableRipple,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  const { radii, sizing } = theme\n  const edge = sizing[HEIGHTS[size]]\n  const shaped = useCorner(\n    feedback.pressed || action.selected\n      ? radii[PRESSED_CORNERS[size]]\n      : radii.pill,\n    onLayout,\n  )\n\n  return (\n    <AnimatedPressable\n      role={href === undefined ? 'button' : 'link'}\n      {...(isToggle ? toggleState(action.selected) : undefined)}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={ownHitSlop ?? hitSlop(edge, edge)}\n      onLayout={shaped.onLayout}\n      onPress={action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        styles.base,\n        sizesOf(theme)[size],\n        variant === 'outlined' ? outlineWidths[size] : undefined,\n        colors.container,\n        shaped.corner,\n        feedback.ring,\n        style,\n      )}\n    >\n      <Animated.View\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          buttonStyles.clip,\n          shaped.corner,\n        )}\n      >\n        {feedback.layer}\n      </Animated.View>\n      <IconStyleContext value={iconStyleOf(colors.content, size)}>\n        {children}\n      </IconStyleContext>\n    </AnimatedPressable>\n  )\n}\n\nfunction iconStyleOf(color: string, size: IconButtonSize): IconStyle {\n  return { color, size: ICON_SIZES[size] }\n}\n\nexport { IconButton }\nexport type { IconButtonProps, IconButtonSize, IconButtonVariant }\n"],"mappings":"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"}

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

@@ -0,0 +1,59 @@
+import { Text, TextProps } from "react-native";
+import { ComponentRef, Ref } from "react";
+//#region src/components/link/index.d.ts
+type LinkProps = Omit<TextProps, 'disabled'> & {
+  /**
+   * Where the link leads. A press opens it through the `RouterProvider`
+   * around the link, or through the platform for a URL with a scheme of its
+   * own, after the call site's own `onPress`.
+   */
+  readonly href?: string;
+  /**
+   * Fades the link to the disabled content colour, and takes no press. It is
+   * still announced as a link, a disabled one.
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<ComponentRef<typeof Text>>;
+  /**
+   * Which colour role to render in. `primary` marks the link out from the
+   * text around it; `inherit` takes the colour of the Text around it and
+   * leans on the underline alone, for a link in a place already understood
+   * to be links, such as a footer.
+   * @default 'primary'
+   */
+  readonly tone?: LinkTone;
+  /**
+   * When to draw the rule. Leave it at `always` in prose: without it, colour
+   * is the only thing separating the link from the sentence, which some
+   * readers cannot see. `hover` and `none` are for links whose position
+   * already announces them, such as a row of footer links. A phone has no
+   * pointer, so `hover` draws no rule there.
+   * @default 'always'
+   */
+  readonly underline?: LinkUnderline;
+};
+type LinkTone = 'inherit' | 'primary';
+type LinkUnderline = 'always' | 'hover' | 'none';
+/**
+ * A run of text that leads somewhere, inside the sentence it belongs to.
+ *
+ * ```tsx
+ * <Text variant="bodyLarge">
+ *   Supporting copy with <Link href="/first">a link inside it</Link>.
+ * </Text>
+ * ```
+ *
+ * It is React Native's Text with the link role, nested in the library's
+ * Text, so it flows and wraps with the words around it and takes their type.
+ * Given no Text around it, it draws in the platform's default face rather
+ * than the theme's, so a link standing on its own, such as one of a row of
+ * footer links, is a Text holding one link.
+ *
+ * `onPress` fires for a tap, a click and the Enter key alike, then `href` is
+ * followed, through the `RouterProvider` around the link or the platform.
+ * `style`, `ref` and `testID` land on React Native's own Text.
+ */
+declare function Link({ href, isDisabled, onPress, style, suppressHighlighting, tone, underline, ...props }: LinkProps): import("react").JSX.Element;
+//#endregion
+export { Link, type LinkProps, type LinkTone, type LinkUnderline };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/link/index.js

@@ -0,0 +1,191 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useLinkPress } from "../../router/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { stylesOf as stylesOf$1 } from "../../press/styles.js";
+import { c } from "react/compiler-runtime";
+import { Platform, StyleSheet, Text } from "react-native";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/link/index.tsx
+const underlines = StyleSheet.create({
+	always: { textDecorationLine: "underline" },
+	hover: { textDecorationLine: "none" },
+	none: { textDecorationLine: "none" }
+});
+const stylesOf = themedStyles(({ colors, radii, stateLayerOpacity }) => {
+	const disabledContent = withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
+	return StyleSheet.create({
+		base: { borderRadius: radii.xs },
+		disabled: {
+			color: disabledContent,
+			textDecorationColor: disabledContent
+		},
+		hovered: {
+			color: colors.primary,
+			textDecorationColor: colors.primary
+		},
+		inherit: { textDecorationColor: colors.outline },
+		primary: {
+			color: colors.primary,
+			textDecorationColor: withOpacity(colors.primary, .7)
+		}
+	});
+});
+/**
+* A run of text that leads somewhere, inside the sentence it belongs to.
+*
+* ```tsx
+* <Text variant="bodyLarge">
+*   Supporting copy with <Link href="/first">a link inside it</Link>.
+* </Text>
+* ```
+*
+* It is React Native's Text with the link role, nested in the library's
+* Text, so it flows and wraps with the words around it and takes their type.
+* Given no Text around it, it draws in the platform's default face rather
+* than the theme's, so a link standing on its own, such as one of a row of
+* footer links, is a Text holding one link.
+*
+* `onPress` fires for a tap, a click and the Enter key alike, then `href` is
+* followed, through the `RouterProvider` around the link or the platform.
+* `style`, `ref` and `testID` land on React Native's own Text.
+*/
+function Link(t0) {
+	const $ = c(38);
+	let href;
+	let onPress;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({href, isDisabled: t1, onPress, style, suppressHighlighting: t2, tone: t3, underline: t4, ...props} = t0);
+		$[0] = t0;
+		$[1] = href;
+		$[2] = onPress;
+		$[3] = props;
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		href = $[1];
+		onPress = $[2];
+		props = $[3];
+		style = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const suppressHighlighting = t2 === void 0 ? true : t2;
+	const tone = t3 === void 0 ? "primary" : t3;
+	const underline = t4 === void 0 ? "always" : t4;
+	const theme = useTheme();
+	const press = useLinkPress(href, onPress);
+	const [hoveredState, setHovered] = useState(false);
+	const [ringShown, setRingShown] = useState(false);
+	let T0;
+	let t10;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[9] !== hoveredState || $[10] !== href || $[11] !== isDisabled || $[12] !== onPress || $[13] !== press || $[14] !== props || $[15] !== ringShown || $[16] !== style || $[17] !== theme || $[18] !== tone || $[19] !== underline) {
+		const styles = stylesOf(theme);
+		const hovered = !isDisabled && hoveredState;
+		const pressable = !isDisabled && (href !== void 0 || onPress != null);
+		let t11;
+		if ($[27] !== isDisabled) {
+			t11 = Platform.OS === "web" ? webPropsOf(isDisabled, setHovered, setRingShown) : void 0;
+			$[27] = isDisabled;
+			$[28] = t11;
+		} else t11 = $[28];
+		const web = t11;
+		T0 = Text;
+		t5 = props;
+		t6 = web;
+		t7 = isDisabled;
+		t8 = pressable ? press : void 0;
+		t9 = "link";
+		t10 = composeStyles(styles.base, styles[tone], underlines[underline], hovered && styles.hovered, hovered && underline === "hover" && underlines.always, isDisabled && styles.disabled, !isDisabled && ringShown && stylesOf$1(theme).ring, style);
+		$[9] = hoveredState;
+		$[10] = href;
+		$[11] = isDisabled;
+		$[12] = onPress;
+		$[13] = press;
+		$[14] = props;
+		$[15] = ringShown;
+		$[16] = style;
+		$[17] = theme;
+		$[18] = tone;
+		$[19] = underline;
+		$[20] = T0;
+		$[21] = t10;
+		$[22] = t5;
+		$[23] = t6;
+		$[24] = t7;
+		$[25] = t8;
+		$[26] = t9;
+	} else {
+		T0 = $[20];
+		t10 = $[21];
+		t5 = $[22];
+		t6 = $[23];
+		t7 = $[24];
+		t8 = $[25];
+		t9 = $[26];
+	}
+	let t11;
+	if ($[29] !== T0 || $[30] !== suppressHighlighting || $[31] !== t10 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7 || $[35] !== t8 || $[36] !== t9) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			...t5,
+			...t6,
+			"aria-disabled": t7,
+			onPress: t8,
+			role: t9,
+			style: t10,
+			suppressHighlighting
+		});
+		$[29] = T0;
+		$[30] = suppressHighlighting;
+		$[31] = t10;
+		$[32] = t5;
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t8;
+		$[36] = t9;
+		$[37] = t11;
+	} else t11 = $[37];
+	return t11;
+}
+function webPropsOf(isDisabled, setHovered, setRingShown) {
+	return {
+		focusable: !isDisabled,
+		onBlur: () => {
+			setRingShown(false);
+		},
+		onFocus: (event) => {
+			setRingShown(event.currentTarget.matches(":focus-visible"));
+		},
+		onKeyDown: (event) => {
+			if (!isDisabled && event.key === "Enter" && !event.repeat) event.currentTarget.click();
+		},
+		onPointerEnter: (event) => {
+			setHovered(event.pointerType !== "touch");
+		},
+		onPointerLeave: () => {
+			setHovered(false);
+		}
+	};
+}
+//#endregion
+export { Link };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","TextProps","NativeTextProps","TextStyle","useState","Text","NativeText","Platform","StyleSheet","stylesOf","ringStylesOf","useLinkPress","withOpacity","useTheme","composeStyles","themedStyles","LinkProps","Omit","href","isDisabled","ref","tone","LinkTone","underline","LinkUnderline","WebProps","focusable","onBlur","onFocus","event","currentTarget","matches","selector","onKeyDown","click","key","repeat","onPointerEnter","pointerType","onPointerLeave","underlines","create","always","textDecorationLine","hover","none","colors","radii","stateLayerOpacity","disabledContent","onSurface","base","borderRadius","xs","disabled","color","textDecorationColor","hovered","primary","inherit","outline","Link","t0","$","_c","onPress","props","style","t1","t2","t3","t4","suppressHighlighting","undefined","theme","press","hoveredState","setHovered","ringShown","setRingShown","T0","t10","t5","t6","t7","t8","t9","styles","pressable","t11","OS","webPropsOf","web","ring","shown","_c","NativeText","ringStylesOf"],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { TextProps as NativeTextProps, TextStyle } from 'react-native'\n\nimport { useState } from 'react'\nimport { Text as NativeText, Platform, StyleSheet } from 'react-native'\n\nimport { stylesOf as ringStylesOf } from '../../press/styles'\nimport { useLinkPress } from '../../router'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// No Material Design page draws an inline link, so this takes web's reading:\n// the text button's label, the primary role on no container, with the\n// disabled treatment every page gives content, and a rule under it to say it\n// can be followed. That rule is 70% of the primary role, or the outline role\n// under `inherit`, and turns fully primary under a pointer. 70% is web's\n// figure, the least that keeps the rule at 3:1 against the surface in every\n// scheme the library is shown in.\n//\n// It is a nested Text, so it sets no type of its own and takes the size and\n// face of the sentence around it, as web's takes them from its paragraph. A\n// nested Text has no frame of its own, so it takes no `hitSlop` either.\n//\n// Where it departs from web, the platform is the reason:\n//\n// - The disabled colour is on-surface at the `disabledContent` opacity,\n//   translucent over whatever the sentence sits on. Web mixes the two over\n//   the surface role, and React Native has no `color-mix()`.\n// - Android draws the rule in the text's own colour, since it has no\n//   `textDecorationColor`, and every platform draws it at its own thickness\n//   and offset, which React Native has no properties for.\n// - Hover, the focus ring and the Enter key are the web's alone: a phone has\n//   no pointer to hover with and focuses no span inside a sentence, so on\n//   native `hover` draws no rule at all. The colour changes at once rather\n//   than over a transition.\n// - iOS's own pressed highlight is off, since web's link draws no pressed\n//   state; `suppressHighlighting={false}` turns it back on.\n\ntype LinkProps = Omit<NativeTextProps, 'disabled'> & {\n  /**\n   * Where the link leads. A press opens it through the `RouterProvider`\n   * around the link, or through the platform for a URL with a scheme of its\n   * own, after the call site's own `onPress`.\n   */\n  readonly href?: string\n  /**\n   * Fades the link to the disabled content colour, and takes no press. It is\n   * still announced as a link, a disabled one.\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof NativeText>>\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the colour of the Text around it and\n   * leans on the underline alone, for a link in a place already understood\n   * to be links, such as a footer.\n   * @default 'primary'\n   */\n  readonly tone?: LinkTone\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links. A phone has no\n   * pointer, so `hover` draws no rule there.\n   * @default 'always'\n   */\n  readonly underline?: LinkUnderline\n}\n\ntype LinkTone = 'inherit' | 'primary'\n\ntype LinkUnderline = 'always' | 'hover' | 'none'\n\n// What React Native Web hands a link's span, which React Native's own Text\n// declares none of: the browser's pointer, focus and key events, each typed\n// by the fields the link reads, and whether the span takes the Tab key.\ntype WebProps = {\n  readonly focusable: boolean\n  readonly onBlur: () => void\n  readonly onFocus: (event: {\n    readonly currentTarget: { readonly matches: (selector: string) => boolean }\n  }) => void\n  readonly onKeyDown: (event: {\n    readonly currentTarget: { readonly click: () => void }\n    readonly key: string\n    readonly repeat: boolean\n  }) => void\n  readonly onPointerEnter: (event: { readonly pointerType: string }) => void\n  readonly onPointerLeave: () => void\n}\n\n// React Native's underline is off unless a style turns it on, and a nested\n// Text inherits its sentence's, so `hover` and `none` say `none` outright, as\n// web's do over an anchor's own underline.\nconst underlines = StyleSheet.create({\n  always: { textDecorationLine: 'underline' },\n  hover: { textDecorationLine: 'none' },\n  none: { textDecorationLine: 'none' },\n})\n\nconst stylesOf = themedStyles(({ colors, radii, stateLayerOpacity }) => {\n  const disabledContent = withOpacity(\n    colors.onSurface,\n    stateLayerOpacity.disabledContent,\n  )\n\n  return StyleSheet.create({\n    // The ring's corner on web, where an outline follows it. A nested Text\n    // draws no frame on native, so there it draws nothing.\n    base: {\n      borderRadius: radii.xs,\n    },\n    disabled: {\n      color: disabledContent,\n      textDecorationColor: disabledContent,\n    },\n    // Under a pointer, either tone turns its text and its rule fully primary.\n    hovered: {\n      color: colors.primary,\n      textDecorationColor: colors.primary,\n    },\n    // No colour, so the Text around it lends its own.\n    inherit: {\n      textDecorationColor: colors.outline,\n    },\n    primary: {\n      color: colors.primary,\n      textDecorationColor: withOpacity(colors.primary, 0.7),\n    },\n  })\n})\n\n/**\n * A run of text that leads somewhere, inside the sentence it belongs to.\n *\n * ```tsx\n * <Text variant=\"bodyLarge\">\n *   Supporting copy with <Link href=\"/first\">a link inside it</Link>.\n * </Text>\n * ```\n *\n * It is React Native's Text with the link role, nested in the library's\n * Text, so it flows and wraps with the words around it and takes their type.\n * Given no Text around it, it draws in the platform's default face rather\n * than the theme's, so a link standing on its own, such as one of a row of\n * footer links, is a Text holding one link.\n *\n * `onPress` fires for a tap, a click and the Enter key alike, then `href` is\n * followed, through the `RouterProvider` around the link or the platform.\n * `style`, `ref` and `testID` land on React Native's own Text.\n */\nfunction Link({\n  href,\n  isDisabled = false,\n  onPress,\n  style,\n  suppressHighlighting = true,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps) {\n  const theme = useTheme()\n  const press = useLinkPress(href, onPress)\n  const [hoveredState, setHovered] = useState(false)\n  const [ringShown, setRingShown] = useState(false)\n\n  const styles = stylesOf(theme)\n  const hovered = !isDisabled && hoveredState\n  const pressable = !isDisabled && (href !== undefined || onPress != null)\n  const web =\n    Platform.OS === 'web'\n      ? webPropsOf(isDisabled, setHovered, setRingShown)\n      : undefined\n\n  return (\n    <NativeText\n      {...props}\n      {...web}\n      aria-disabled={isDisabled}\n      onPress={pressable ? press : undefined}\n      role=\"link\"\n      style={composeStyles<TextStyle>(\n        styles.base,\n        styles[tone],\n        underlines[underline],\n        hovered && styles.hovered,\n        hovered && underline === 'hover' && underlines.always,\n        isDisabled && styles.disabled,\n        !isDisabled && ringShown && ringStylesOf(theme).ring,\n        style,\n      )}\n      suppressHighlighting={suppressHighlighting}\n    />\n  )\n}\n\n// The browser's events, read into the link's two states. Hover counts a mouse\n// or a pen and never a touch, which leaves a tapped link's emulated pointer\n// over it, as React Aria's hover does on web. The ring follows the browser's\n// own `:focus-visible`, the rule web's ring is drawn under, read as focus\n// arrives. Enter clicks the span, which is what a browser does for an\n// anchor and what React Native Web hands to `onPress`; a key held down\n// follows the link once.\nfunction webPropsOf(\n  isDisabled: boolean,\n  setHovered: (hovered: boolean) => void,\n  setRingShown: (shown: boolean) => void,\n): WebProps {\n  return {\n    focusable: !isDisabled,\n    onBlur: () => {\n      setRingShown(false)\n    },\n    onFocus: (event) => {\n      setRingShown(event.currentTarget.matches(':focus-visible'))\n    },\n    onKeyDown: (event) => {\n      if (!isDisabled && event.key === 'Enter' && !event.repeat) {\n        event.currentTarget.click()\n      }\n    },\n    onPointerEnter: (event) => {\n      setHovered(event.pointerType !== 'touch')\n    },\n    onPointerLeave: () => {\n      setHovered(false)\n    },\n  }\n}\n\nexport type { LinkProps, LinkTone, LinkUnderline }\n\nexport { Link }\n"],"mappings":"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"}