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

package/dist/components/button/index.js

@@ -0,0 +1,377 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.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, Text } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Animated from "react-native-reanimated";
+//#region src/components/button/index.tsx
+const DISABLED = {
+	elevated: "filledDisabled",
+	filled: "filledDisabled",
+	outlined: "outlinedDisabled",
+	text: "textDisabled",
+	tonal: "filledDisabled"
+};
+const ICON_SIZES = {
+	lg: 24,
+	md: 20,
+	xl: 32,
+	xs: 20,
+	xxl: 40
+};
+const ROLES = {
+	lg: "titleMedium",
+	md: "labelLarge",
+	xl: "headlineSmall",
+	xs: "labelLarge",
+	xxl: "headlineLarge"
+};
+const SQUARE_CORNERS = {
+	lg: "lg",
+	md: "md",
+	xl: "xl",
+	xs: "md",
+	xxl: "xl"
+};
+const TOGGLE_PALETTES = {
+	elevated: {
+		selected: "elevatedToggleSelected",
+		unselected: "elevated"
+	},
+	filled: {
+		selected: "filledToggleSelected",
+		unselected: "filledToggle"
+	},
+	outlined: {
+		selected: "outlinedToggleSelected",
+		unselected: "outlined"
+	},
+	tonal: {
+		selected: "tonalToggleSelected",
+		unselected: "tonal"
+	}
+};
+const styles = StyleSheet.create({
+	base: {
+		alignItems: "center",
+		flexDirection: "row",
+		justifyContent: "center",
+		maxWidth: "100%"
+	},
+	icon: {
+		alignItems: "center",
+		flexShrink: 0,
+		justifyContent: "center"
+	},
+	label: {
+		flexShrink: 1,
+		textAlign: "center"
+	}
+});
+function inlinePaddings({ spacing }) {
+	return {
+		lg: spacing.xl,
+		md: spacing.lg,
+		xl: 48,
+		xs: spacing.md,
+		xxl: 64
+	};
+}
+const shadowsOf = themedStyles(({ shadows }) => StyleSheet.create({
+	elevation1: { boxShadow: shadows.elevation1 },
+	elevation2: { boxShadow: shadows.elevation2 }
+}));
+const sizesOf = themedStyles((theme) => {
+	const { sizing, spacing } = theme;
+	const inline = inlinePaddings(theme);
+	return StyleSheet.create({
+		lg: {
+			gap: spacing.sm,
+			minHeight: sizing.controlLg,
+			paddingHorizontal: inline.lg,
+			paddingVertical: spacing.md
+		},
+		md: {
+			gap: spacing.sm,
+			minHeight: sizing.controlSm,
+			paddingHorizontal: inline.md,
+			paddingVertical: spacing.sm
+		},
+		xl: {
+			gap: spacing.md,
+			minHeight: sizing.controlXl,
+			paddingHorizontal: inline.xl,
+			paddingVertical: spacing.xl
+		},
+		xs: {
+			gap: spacing.sm,
+			minHeight: sizing.controlXs,
+			paddingHorizontal: inline.xs,
+			paddingVertical: spacing.xs
+		},
+		xxl: {
+			gap: spacing.lg,
+			minHeight: sizing.controlXxl,
+			paddingHorizontal: inline.xxl,
+			paddingVertical: spacing.xxl
+		}
+	});
+});
+const outlinedSizesOf = themedStyles((theme) => {
+	const inline = inlinePaddings(theme);
+	function outlined(size) {
+		return {
+			borderWidth: OUTLINE_WIDTHS[size],
+			paddingHorizontal: inline[size] - OUTLINE_WIDTHS[size]
+		};
+	}
+	return StyleSheet.create({
+		lg: outlined("lg"),
+		md: outlined("md"),
+		xl: outlined("xl"),
+		xs: outlined("xs"),
+		xxl: outlined("xxl")
+	});
+});
+/**
+* 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`.
+*/
+function Button(t0) {
+	const $ = c(58);
+	let children;
+	let defaultSelected;
+	let href;
+	let icon;
+	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 t5;
+	let type;
+	if ($[0] !== t0) {
+		({children, defaultSelected, disableRipple: t1, hitSlop: ownHitSlop, href, icon, isDisabled: t2, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, shape: t3, size: t4, style, type, variant: t5, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultSelected;
+		$[3] = href;
+		$[4] = icon;
+		$[5] = isSelected;
+		$[6] = onBlur;
+		$[7] = onChange;
+		$[8] = onFocus;
+		$[9] = onHoverIn;
+		$[10] = onHoverOut;
+		$[11] = onLayout;
+		$[12] = onPress;
+		$[13] = onPressIn;
+		$[14] = onPressOut;
+		$[15] = ownHitSlop;
+		$[16] = props;
+		$[17] = style;
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = type;
+	} else {
+		children = $[1];
+		defaultSelected = $[2];
+		href = $[3];
+		icon = $[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];
+		t5 = $[22];
+		type = $[23];
+	}
+	const disableRipple = t1 === void 0 ? false : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const shape = t3 === void 0 ? "round" : t3;
+	const size = t4 === void 0 ? "md" : t4;
+	const variant = t5 === void 0 ? "filled" : t5;
+	const theme = useTheme();
+	const role = useTypeRole(ROLES[size]);
+	const isToggle = variant !== "text" && (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0);
+	let t6;
+	if ($[24] !== defaultSelected || $[25] !== href || $[26] !== isSelected || $[27] !== isToggle || $[28] !== onChange || $[29] !== onPress || $[30] !== type) {
+		t6 = {
+			defaultSelected,
+			href,
+			isSelected,
+			isToggle,
+			onChange,
+			onPress,
+			type
+		};
+		$[24] = defaultSelected;
+		$[25] = href;
+		$[26] = isSelected;
+		$[27] = isToggle;
+		$[28] = onChange;
+		$[29] = onPress;
+		$[30] = type;
+		$[31] = t6;
+	} else t6 = $[31];
+	const action = useButtonAction(t6);
+	const colors = palettesOf(theme)[isDisabled ? DISABLED[variant] : variant !== "text" && 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 } = theme;
+	const resting = shape === "square" !== action.selected ? radii[SQUARE_CORNERS[size]] : radii.pill;
+	const shaped = useCorner(feedback.pressed ? radii[PRESSED_CORNERS[size]] : resting, onLayout);
+	const T0 = AnimatedPressable;
+	const t7 = href === void 0 ? "button" : "link";
+	let t8;
+	if ($[32] !== action.selected || $[33] !== isToggle) {
+		t8 = isToggle ? toggleState(action.selected) : void 0;
+		$[32] = action.selected;
+		$[33] = isToggle;
+		$[34] = t8;
+	} else t8 = $[34];
+	const t9 = feedback.handlers;
+	let t10;
+	if ($[35] !== ownHitSlop || $[36] !== size || $[37] !== theme.sizing) {
+		t10 = ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]]);
+		$[35] = ownHitSlop;
+		$[36] = size;
+		$[37] = theme.sizing;
+		$[38] = t10;
+	} else t10 = $[38];
+	const t11 = shaped.onLayout;
+	const t12 = action.onPress;
+	const t13 = composeStyles(styles.base, sizesOf(theme)[size], variant === "outlined" ? outlinedSizesOf(theme)[size] : void 0, colors.container, shadowOf(variant, feedback, isDisabled, theme), shaped.corner, feedback.ring, style);
+	let t14;
+	if ($[39] !== shaped.corner) {
+		t14 = composeStyles(buttonStyles.clip, shaped.corner);
+		$[39] = shaped.corner;
+		$[40] = t14;
+	} else t14 = $[40];
+	let t15;
+	if ($[41] !== feedback.layer || $[42] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Animated.View, {
+			style: t14,
+			children: feedback.layer
+		});
+		$[41] = feedback.layer;
+		$[42] = t14;
+		$[43] = t15;
+	} else t15 = $[43];
+	const t16 = icon === void 0 ? null : /* @__PURE__ */ jsx(IconStyleContext, {
+		value: iconStyleOf(colors.content, size),
+		children: icon
+	});
+	const t17 = children === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+		style: composeStyles(role, styles.label, colors.label),
+		children
+	});
+	let t18;
+	if ($[44] !== T0 || $[45] !== action.onPress || $[46] !== feedback.handlers || $[47] !== isDisabled || $[48] !== props || $[49] !== shaped.onLayout || $[50] !== t10 || $[51] !== t13 || $[52] !== t15 || $[53] !== t16 || $[54] !== t17 || $[55] !== t7 || $[56] !== t8) {
+		t18 = /* @__PURE__ */ jsxs(T0, {
+			role: t7,
+			...t8,
+			...props,
+			...t9,
+			disabled: isDisabled,
+			hitSlop: t10,
+			onLayout: t11,
+			onPress: t12,
+			style: t13,
+			children: [
+				t15,
+				t16,
+				t17
+			]
+		});
+		$[44] = T0;
+		$[45] = action.onPress;
+		$[46] = feedback.handlers;
+		$[47] = isDisabled;
+		$[48] = props;
+		$[49] = shaped.onLayout;
+		$[50] = t10;
+		$[51] = t13;
+		$[52] = t15;
+		$[53] = t16;
+		$[54] = t17;
+		$[55] = t7;
+		$[56] = t8;
+		$[57] = t18;
+	} else t18 = $[57];
+	return t18;
+}
+function iconStyleOf(color, size) {
+	return {
+		color,
+		size: ICON_SIZES[size]
+	};
+}
+function shadowOf(variant, { hovered, pressed }, isDisabled, theme) {
+	const lifted = hovered && !pressed;
+	if (isDisabled) return;
+	if (variant === "elevated") return shadowsOf(theme)[lifted ? "elevation2" : "elevation1"];
+	return (variant === "filled" || variant === "tonal") && lifted ? shadowsOf(theme).elevation1 : void 0;
+}
+//#endregion
+export { Button };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","PressableProps","StyleProp","TextStyle","View","ViewStyle","AnimatedStyle","Text","NativeText","StyleSheet","Animated","ButtonLinkForm","ButtonPressForm","ButtonToggleForm","PaletteName","IconStyle","ResolvedTheme","TypeRole","AnimatedPressable","buttonStyles","HEIGHTS","OUTLINE_WIDTHS","PRESSED_CORNERS","toggleState","useButtonAction","useCorner","palettesOf","IconStyleContext","hitSlop","usePressFeedback","useTheme","composeStyles","themedStyles","useTypeRole","ButtonForm","variant","Exclude","ButtonVariant","ButtonProps","Omit","children","disableRipple","icon","isDisabled","ref","shape","ButtonShape","size","ButtonSize","style","ToggleVariant","DISABLED","Readonly","Record","elevated","filled","outlined","text","tonal","ICON_SIZES","lg","md","xl","xs","xxl","ROLES","SQUARE_CORNERS","const","TOGGLE_PALETTES","selected","unselected","styles","create","base","alignItems","flexDirection","justifyContent","maxWidth","flexShrink","label","textAlign","inlinePaddings","spacing","shadowsOf","shadows","elevation1","boxShadow","elevation2","sizesOf","theme","sizing","inline","gap","sm","minHeight","controlLg","paddingHorizontal","paddingVertical","controlSm","controlXl","controlXs","controlXxl","outlinedSizesOf","borderWidth","Button","t0","$","_c","defaultSelected","href","isSelected","onBlur","onChange","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","ownHitSlop","props","t1","t2","t3","t4","t5","type","undefined","role","isToggle","t6","action","colors","feedback","color","content","disabled","radii","resting","pill","shaped","pressed","T0","t7","t8","t9","handlers","t10","t11","t12","t13","container","shadowOf","corner","ring","t14","clip","t15","layer","t16","iconStyleOf","t17","t18","hovered","lifted","_c","NativeText"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { Text as NativeText, 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'\nimport type { ResolvedTheme } from '../../theme/scope'\nimport type { TypeRole } from '../../typography/roles'\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'\nimport { useTypeRole } from '../../typography/roles'\n\n// The buttons spec page's five colour styles, five sizes and two shapes, as\n// kanso-ui's Button draws them. The variant carries colour and the size\n// carries geometry, so the two never argue: the padding belongs to the size\n// alone, and a text button is as wide as a filled one at the same size.\n//\n// The colour pairs are the page's: filled on primary, tonal on secondary\n// container, outlined with an outline-variant rule and an on-surface-variant\n// label, text on primary, and elevated on surface container low with a\n// primary label. Elevated is the one variant whose shadow is part of it: it\n// rests at elevation 1, rises to 2 under a pointer and settles back while\n// pressed, where filled and tonal rest flat and lift to 1 under a pointer\n// only. The shadow is the theme's `boxShadow` value, which React Native draws\n// on iOS and Android as React Native Web draws it in a browser.\n//\n// The state layers, the ripple and the focus ring are src/press's, drawn in\n// the label's colour over the container, as on web.\n//\n// **Disabled is the page's colour at an opacity, translucent.** A container\n// is on-surface at the `disabledContainer` opacity, and the label on-surface\n// at `disabledContent`, over whatever the button sits on rather than mixed\n// over the surface role as web's are; src/button/palettes.ts gives the\n// reason. Disabled drops the shadow, since a shadow says a control is there\n// to press.\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 label and takes primary once selected, a tonal one moves\n// from the secondary container pair to secondary, an elevated one keeps its\n// low surface until it takes primary, and an outlined one swaps its rule for\n// the inverse surface pair. The page gives text no pair, so a text button\n// given those props stays a plain one.\n//\n// **The corner is a shape the button morphs between.** `round` rests as the\n// pill and `square` at the size's square corner: 12dp up to the page's S,\n// 16dp at M and 28dp above. A press tightens either to the size's pressed\n// corner, 8dp, 12dp or 16dp, and a toggle trades its shape for the other\n// once selected. The corner eases through Reanimated, as src/button's\n// `useCorner` sets out.\n//\n// The forms, the toggle's state, what a press does and the corner's ease are\n// src/button's, shared with IconButton.\n\ntype ButtonForm =\n  | ButtonLinkForm\n  | ButtonPressForm\n  | (ButtonToggleForm & {\n      /**\n       * A toggle takes any variant but `text`, which the page gives no\n       * selected colours.\n       */\n      readonly variant?: Exclude<ButtonVariant, 'text'>\n    })\n\ntype ButtonProps = ButtonForm &\n  Omit<PressableProps, 'children' | 'disabled' | 'style'> & {\n    /** The label. */\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     * An icon before the label, at the page's icon size for the button's\n     * size: 20dp at `xs` and `md`, 24dp at `lg`, 32dp at `xl` and 40dp at\n     * `xxl`. The slot hands it the label's colour and that size through\n     * `useIconStyle()`.\n     */\n    readonly icon?: ReactNode\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     * The corner the button rests at: `round` is the pill, `square` the\n     * page's rounded rectangle, 12dp up to `md`, 16dp at `lg` and 28dp above.\n     * Either tightens while pressed, and a toggle trades one for the other\n     * once selected.\n     * @default 'round'\n     */\n    readonly shape?: ButtonShape\n    /**\n     * Control height: `xs` 32dp, `md` 40dp, `lg` 56dp, `xl` 96dp, `xxl` 136dp,\n     * the buttons spec page's XS, S, M, L and XL, each with its own padding\n     * and type role. `md` is the page's default. The height is a floor, so a\n     * label that wraps, or that the device's text size enlarges, grows the\n     * button rather than running out of it.\n     * @default 'md'\n     */\n    readonly size?: ButtonSize\n    readonly style?: StyleProp<ViewStyle>\n    /**\n     * How much weight the button pulls. `filled` and `tonal` carry a container\n     * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n     * a low surface and lifts off it with a shadow, for a button that has to\n     * separate from a busy background rather than from the page.\n     * @default 'filled'\n     */\n    readonly variant?: ButtonVariant\n  }\n\ntype ButtonShape = 'round' | 'square'\n\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl'\n\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal'\n\ntype ToggleVariant = Exclude<ButtonVariant, 'text'>\n\n// The disabled container each variant draws. Filled, tonal and elevated share\n// one, which is the page's single disabled container for all three.\nconst DISABLED: Readonly<Record<ButtonVariant, PaletteName>> = {\n  elevated: 'filledDisabled',\n  filled: 'filledDisabled',\n  outlined: 'outlinedDisabled',\n  text: 'textDisabled',\n  tonal: 'filledDisabled',\n}\n\n// The icon each size draws, 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<ButtonSize, number>> = {\n  lg: 24,\n  md: 20,\n  xl: 32,\n  xs: 20,\n  xxl: 40,\n}\n\n// The type role each size sets its label in, taken whole: label-large for the\n// two small sizes, then title-medium, headline-small and headline-large.\nconst ROLES: Readonly<Record<ButtonSize, TypeRole>> = {\n  lg: 'titleMedium',\n  md: 'labelLarge',\n  xl: 'headlineSmall',\n  xs: 'labelLarge',\n  xxl: 'headlineLarge',\n}\n\n// The square corner each size rests at, and a round toggle takes once\n// selected.\nconst SQUARE_CORNERS = {\n  lg: 'lg',\n  md: 'md',\n  xl: 'xl',\n  xs: 'md',\n  xxl: 'xl',\n} as const satisfies Record<ButtonSize, keyof ResolvedTheme['radii']>\n\n// Which container a toggle draws, selected and not.\nconst TOGGLE_PALETTES: Readonly<\n  Record<\n    ToggleVariant,\n    Readonly<Record<'selected' | 'unselected', PaletteName>>\n  >\n> = {\n  elevated: { selected: 'elevatedToggleSelected', unselected: 'elevated' },\n  filled: { selected: 'filledToggleSelected', unselected: 'filledToggle' },\n  outlined: { selected: 'outlinedToggleSelected', unselected: 'outlined' },\n  tonal: { selected: 'tonalToggleSelected', unselected: 'tonal' },\n}\n\nconst styles = StyleSheet.create({\n  // The label sits in the middle of a button wider than it, one stretched by\n  // a column or given a width, as the page draws every button, and a button\n  // is never wider than what holds it.\n  base: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'center',\n    maxWidth: '100%',\n  },\n  icon: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n  // A label too long for the row wraps, its lines centred, and grows the\n  // button with it.\n  label: {\n    flexShrink: 1,\n    textAlign: 'center',\n  },\n})\n\n// Each size's inline padding. The two largest are literals: 48 and 64 are not\n// steps of the spacing scale, and the scale should not grow to fit one\n// component. `xs` pads 12 a side, the extra-small token set's leading and\n// trailing space.\nfunction inlinePaddings({\n  spacing,\n}: ResolvedTheme): Readonly<Record<ButtonSize, number>> {\n  return { lg: spacing.xl, md: spacing.lg, xl: 48, xs: spacing.md, xxl: 64 }\n}\n\nconst shadowsOf = themedStyles(({ shadows }) =>\n  StyleSheet.create({\n    elevation1: { boxShadow: shadows.elevation1 },\n    elevation2: { boxShadow: shadows.elevation2 },\n  }),\n)\n\n// The five sizes, from the page's size token sets: the container height, the\n// padding, and the gap before an icon. The height is a floor rather than a\n// fixed size, and the block padding is what keeps a wrapped label off the\n// pill's edge: a step short of a single line's own inset, so a label on one\n// line still draws exactly the page's height.\nconst sizesOf = themedStyles((theme) => {\n  const { sizing, spacing } = theme\n  const inline = inlinePaddings(theme)\n\n  return StyleSheet.create({\n    lg: {\n      gap: spacing.sm,\n      minHeight: sizing.controlLg,\n      paddingHorizontal: inline.lg,\n      paddingVertical: spacing.md,\n    },\n    md: {\n      gap: spacing.sm,\n      minHeight: sizing.controlSm,\n      paddingHorizontal: inline.md,\n      paddingVertical: spacing.sm,\n    },\n    xl: {\n      gap: spacing.md,\n      minHeight: sizing.controlXl,\n      paddingHorizontal: inline.xl,\n      paddingVertical: spacing.xl,\n    },\n    xs: {\n      gap: spacing.sm,\n      minHeight: sizing.controlXs,\n      paddingHorizontal: inline.xs,\n      paddingVertical: spacing.xs,\n    },\n    xxl: {\n      gap: spacing.lg,\n      minHeight: sizing.controlXxl,\n      paddingHorizontal: inline.xxl,\n      paddingVertical: spacing.xxl,\n    },\n  })\n})\n\n// The outlined button draws its rule inside the width the other variants\n// take, as the page's buttons do: the padding gives up what the rule takes,\n// so an outlined and a filled button with one label are one width.\nconst outlinedSizesOf = themedStyles((theme) => {\n  const inline = inlinePaddings(theme)\n\n  function outlined(size: ButtonSize): ViewStyle {\n    return {\n      borderWidth: OUTLINE_WIDTHS[size],\n      paddingHorizontal: inline[size] - OUTLINE_WIDTHS[size],\n    }\n  }\n\n  return StyleSheet.create({\n    lg: outlined('lg'),\n    md: outlined('md'),\n    xl: outlined('xl'),\n    xs: outlined('xs'),\n    xxl: outlined('xxl'),\n  })\n})\n\n/**\n * The design's button, at five emphasis levels and five control heights,\n * round or square, with web's props and values. Given `href` it is a link with\n * the same appearance, and given `isSelected`, `defaultSelected` or\n * `onChange` it is a toggle, which reports its state to a screen reader and\n * draws the page's second pair of colour roles for its variant.\n *\n * ```tsx\n * <Button defaultSelected variant=\"tonal\">\n *   Label\n * </Button>\n * ```\n *\n * A column stretches a button across it, as it does any view, and as a flex\n * column does a button on web; a column that should hold its buttons at their\n * labels' width says so with `alignItems`.\n *\n * The two sizes under 48dp tall, `xs` and `md`, take presses over a 48dp\n * target through `hitSlop`, which a `hitSlop` of the call site's own replaces.\n * `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction Button({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  hitSlop: ownHitSlop,\n  href,\n  icon,\n  isDisabled = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onPress,\n  onPressIn,\n  onPressOut,\n  shape = 'round',\n  size = 'md',\n  style,\n  type,\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  const theme = useTheme()\n  const role = useTypeRole(ROLES[size])\n\n  // The three props that make this a toggle, read as web reads them. The\n  // types keep them off a `text` button; the check here keeps a call site\n  // that slipped past them a plain button.\n  const isToggle =\n    variant !== 'text' &&\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        : variant !== 'text' && 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 } = theme\n  const resting =\n    (shape === 'square') !== action.selected\n      ? radii[SQUARE_CORNERS[size]]\n      : radii.pill\n  const shaped = useCorner(\n    feedback.pressed ? radii[PRESSED_CORNERS[size]] : resting,\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(theme.sizing[HEIGHTS[size]])}\n      onLayout={shaped.onLayout}\n      onPress={action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        styles.base,\n        sizesOf(theme)[size],\n        variant === 'outlined' ? outlinedSizesOf(theme)[size] : undefined,\n        colors.container,\n        shadowOf(variant, feedback, isDisabled, theme),\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      {icon === undefined ? null : (\n        <IconStyleContext value={iconStyleOf(colors.content, size)}>\n          {icon}\n        </IconStyleContext>\n      )}\n      {children === undefined ? null : (\n        <NativeText\n          style={composeStyles<TextStyle>(role, styles.label, colors.label)}\n        >\n          {children}\n        </NativeText>\n      )}\n    </AnimatedPressable>\n  )\n}\n\nfunction iconStyleOf(color: string, size: ButtonSize): IconStyle {\n  return { color, size: ICON_SIZES[size] }\n}\n\n// The shadow a variant draws in its state: elevated rests at 1 and rises to 2\n// under a pointer, filled and tonal rest flat and rise to 1, and a press\n// brings each back to where it rests.\nfunction shadowOf(\n  variant: ButtonVariant,\n  {\n    hovered,\n    pressed,\n  }: { readonly hovered: boolean; readonly pressed: boolean },\n  isDisabled: boolean,\n  theme: ResolvedTheme,\n): undefined | ViewStyle {\n  const lifted = hovered && !pressed\n\n  if (isDisabled) {\n    return undefined\n  }\n\n  if (variant === 'elevated') {\n    return shadowsOf(theme)[lifted ? 'elevation2' : 'elevation1']\n  }\n\n  return (variant === 'filled' || variant === 'tonal') && lifted\n    ? shadowsOf(theme).elevation1\n    : undefined\n}\n\nexport { Button }\nexport type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant }\n"],"mappings":"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"}

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

@@ -0,0 +1,78 @@
+import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+//#region src/components/card/index.d.ts
+type CardBaseProps = {
+  readonly children?: ReactNode;
+  /**
+   * Turns an interactive card off: it fades as the cards page draws a
+   * disabled card, and takes no press. It is still announced, as disabled.
+   * Has no effect on a card that is not `interactive`, which cannot be
+   * pressed to begin with.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * `none` removes the card's own padding, for a card whose children run to
+   * its edges, such as a list of rows separated by rules.
+   * @default 'default'
+   */
+  readonly padding?: 'default' | 'none';
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * How the card separates itself from the page: `elevated` casts a shadow,
+   * `filled` sits on a darker surface, `outlined` draws a border.
+   * @default 'elevated'
+   */
+  readonly variant?: CardVariant;
+};
+type CardProps = CardBaseProps & (InteractiveCardForm | StaticCardForm);
+type CardVariant = 'elevated' | 'filled' | 'outlined';
+/**
+ * A card that presses as a whole: a `Pressable` announced as a button, or as
+ * a link given `href`.
+ */
+type InteractiveCardForm = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {
+  /**
+   * Where the card leads. A press opens it through the `RouterProvider`
+   * around the card, or through the platform for a URL with a scheme of its
+   * own, after the call site's own `onPress`, and the card is announced as a
+   * link.
+   */
+  readonly href?: string;
+  /**
+   * Makes the card the thing you press: it ripples, draws the state layers,
+   * lifts under a pointer and takes a focus ring. Leave it off for a card
+   * that merely holds content, including one holding buttons of its own.
+   */
+  readonly interactive: true;
+};
+/** A card that holds content and takes no press: a `View` with no role. */
+type StaticCardForm = Omit<ViewProps, 'children' | 'style'> & {
+  readonly href?: never;
+  readonly interactive?: false;
+  readonly onPress?: never;
+};
+/**
+ * A surface holding related content.
+ *
+ * ```tsx
+ * <Card interactive onPress={open}>
+ *   <Text variant="titleMedium">Headline</Text>
+ * </Card>
+ * ```
+ *
+ * A card is a `View` with no role, unless it is `interactive`: then it is a
+ * `Pressable` announced as a button, or as a link given `href`, which presses
+ * as a whole. Web's `render` has no counterpart, since native has no element
+ * to choose, and `href` is how a card leads somewhere instead. The press
+ * props belong to an interactive card alone, so a static card given
+ * `onPress` is a compile error rather than a press that never fires.
+ *
+ * A card fills the column it sits in, as any view in a React Native column
+ * does. `style`, `ref` and `testID` land on the card's own view.
+ */
+declare function Card(props: CardProps): import("react").JSX.Element;
+//#endregion
+export { Card, type CardProps, type CardVariant };
+//# sourceMappingURL=index.d.ts.map