@kanso-labs/react-native-kanso-ui 0.1.1 → 0.3.0

package/dist/components/button/index.js

@@ -4,9 +4,10 @@ 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 { BUSY, CONCEALED, PendingContent, PendingRing, pendingStyles, usePending } from "../../button/pending.js";
 import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { c } from "react/compiler-runtime";
-import { StyleSheet, Text } from "react-native";
+import { StyleSheet, Text, useWindowDimensions } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Animated from "react-native-reanimated";
 //#region src/components/button/index.tsx
@@ -160,7 +161,7 @@ const outlinedSizesOf = themedStyles((theme) => {
 * `style`, `ref` and `testID` land on the `Pressable`.
 */
 function Button(t0) {
-	const $ = c(58);
+	const $ = c(73);
 	let children;
 	let defaultSelected;
 	let href;
@@ -172,20 +173,24 @@ function Button(t0) {
 	let onHoverIn;
 	let onHoverOut;
 	let onLayout;
+	let onLongPress;
 	let onPress;
 	let onPressIn;
 	let onPressOut;
 	let ownHitSlop;
+	let pendingLabel;
 	let props;
+	let slot;
 	let style;
 	let t1;
 	let t2;
 	let t3;
 	let t4;
 	let t5;
+	let t6;
 	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);
+		({children, defaultSelected, disableRipple: t1, hitSlop: ownHitSlop, href, icon, isDisabled: t2, isPending: t3, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, shape: t4, size: t5, slot, style, type, variant: t6, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = defaultSelected;
@@ -198,18 +203,22 @@ function Button(t0) {
 		$[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;
+		$[12] = onLongPress;
+		$[13] = onPress;
+		$[14] = onPressIn;
+		$[15] = onPressOut;
+		$[16] = ownHitSlop;
+		$[17] = pendingLabel;
+		$[18] = props;
+		$[19] = slot;
+		$[20] = style;
+		$[21] = t1;
+		$[22] = t2;
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t5;
+		$[26] = t6;
+		$[27] = type;
 	} else {
 		children = $[1];
 		defaultSelected = $[2];
@@ -222,48 +231,59 @@ function Button(t0) {
 		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];
+		onLongPress = $[12];
+		onPress = $[13];
+		onPressIn = $[14];
+		onPressOut = $[15];
+		ownHitSlop = $[16];
+		pendingLabel = $[17];
+		props = $[18];
+		slot = $[19];
+		style = $[20];
+		t1 = $[21];
+		t2 = $[22];
+		t3 = $[23];
+		t4 = $[24];
+		t5 = $[25];
+		t6 = $[26];
+		type = $[27];
 	}
 	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 isPending = t3 === void 0 ? false : t3;
+	const shape = t4 === void 0 ? "round" : t4;
+	const size = t5 === void 0 ? "md" : t5;
+	const variant = t6 === void 0 ? "filled" : t6;
 	const theme = useTheme();
 	const role = useTypeRole(ROLES[size]);
+	const { fontScale } = useWindowDimensions();
+	const pending = href === void 0 && isPending;
+	const ringLabel = usePending(pending, pendingLabel);
 	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 = {
+	const t7 = slot ?? "default";
+	let t8;
+	if ($[28] !== defaultSelected || $[29] !== href || $[30] !== isSelected || $[31] !== isToggle || $[32] !== onChange || $[33] !== onPress || $[34] !== t7 || $[35] !== type) {
+		t8 = {
 			defaultSelected,
 			href,
 			isSelected,
 			isToggle,
 			onChange,
 			onPress,
+			slot: t7,
 			type
 		};
-		$[24] = defaultSelected;
-		$[25] = href;
-		$[26] = isSelected;
-		$[27] = isToggle;
-		$[28] = onChange;
-		$[29] = onPress;
-		$[30] = type;
-		$[31] = t6;
-	} else t6 = $[31];
-	const action = useButtonAction(t6);
+		$[28] = defaultSelected;
+		$[29] = href;
+		$[30] = isSelected;
+		$[31] = isToggle;
+		$[32] = onChange;
+		$[33] = onPress;
+		$[34] = t7;
+		$[35] = type;
+		$[36] = t8;
+	} else t8 = $[36];
+	const action = useButtonAction(t8);
 	const colors = palettesOf(theme)[isDisabled ? DISABLED[variant] : variant !== "text" && isToggle ? TOGGLE_PALETTES[variant][action.selected ? "selected" : "unselected"] : variant];
 	const feedback = usePressFeedback({
 		color: colors.content,
@@ -274,90 +294,118 @@ function Button(t0) {
 		onHoverIn,
 		onHoverOut,
 		onPressIn,
-		onPressOut
+		onPressOut,
+		pending
 	});
 	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;
+	const t9 = href === void 0 ? "button" : "link";
 	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,
+	if ($[37] !== action.selected || $[38] !== isToggle) {
+		t10 = isToggle ? toggleState(action.selected) : void 0;
+		$[37] = action.selected;
+		$[38] = isToggle;
+		$[39] = t10;
+	} else t10 = $[39];
+	const t11 = pending ? BUSY : void 0;
+	const t12 = feedback.handlers;
+	let t13;
+	if ($[40] !== ownHitSlop || $[41] !== size || $[42] !== theme.sizing) {
+		t13 = ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]]);
+		$[40] = ownHitSlop;
+		$[41] = size;
+		$[42] = theme.sizing;
+		$[43] = t13;
+	} else t13 = $[43];
+	const t14 = shaped.onLayout;
+	const t15 = pending ? void 0 : onLongPress;
+	const t16 = pending ? void 0 : action.onPress;
+	const t17 = 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 t18;
+	if ($[44] !== shaped.corner) {
+		t18 = composeStyles(buttonStyles.clip, shaped.corner);
+		$[44] = shaped.corner;
+		$[45] = t18;
+	} else t18 = $[45];
+	let t19;
+	if ($[46] !== feedback.layer || $[47] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Animated.View, {
+			style: t18,
 			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
+		$[46] = feedback.layer;
+		$[47] = t18;
+		$[48] = t19;
+	} else t19 = $[48];
+	const t20 = icon === void 0 ? null : /* @__PURE__ */ jsx(PendingContent, {
+		isPending: pending,
+		children: /* @__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),
+	const t21 = children === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+		...pending ? CONCEALED : void 0,
+		style: composeStyles(role, styles.label, colors.label, pending ? pendingStyles.hidden : void 0),
 		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,
+	let t22;
+	if ($[49] !== colors || $[50] !== fontScale || $[51] !== pending || $[52] !== ringLabel || $[53] !== size || $[54] !== theme.typography) {
+		t22 = pending ? /* @__PURE__ */ jsx(PendingRing, {
+			color: colors.content,
+			diameter: theme.typography[`${ROLES[size]}Size`] * fontScale,
+			label: ringLabel
+		}) : null;
+		$[49] = colors;
+		$[50] = fontScale;
+		$[51] = pending;
+		$[52] = ringLabel;
+		$[53] = size;
+		$[54] = theme.typography;
+		$[55] = t22;
+	} else t22 = $[55];
+	let t23;
+	if ($[56] !== T0 || $[57] !== feedback.handlers || $[58] !== isDisabled || $[59] !== props || $[60] !== shaped.onLayout || $[61] !== t10 || $[62] !== t11 || $[63] !== t13 || $[64] !== t15 || $[65] !== t16 || $[66] !== t17 || $[67] !== t19 || $[68] !== t20 || $[69] !== t21 || $[70] !== t22 || $[71] !== t9) {
+		t23 = /* @__PURE__ */ jsxs(T0, {
+			role: t9,
+			...t10,
+			...t11,
 			...props,
-			...t9,
+			...t12,
 			disabled: isDisabled,
-			hitSlop: t10,
-			onLayout: t11,
-			onPress: t12,
-			style: t13,
+			hitSlop: t13,
+			onLayout: t14,
+			onLongPress: t15,
+			onPress: t16,
+			style: t17,
 			children: [
-				t15,
-				t16,
-				t17
+				t19,
+				t20,
+				t21,
+				t22
 			]
 		});
-		$[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;
+		$[56] = T0;
+		$[57] = feedback.handlers;
+		$[58] = isDisabled;
+		$[59] = props;
+		$[60] = shaped.onLayout;
+		$[61] = t10;
+		$[62] = t11;
+		$[63] = t13;
+		$[64] = t15;
+		$[65] = t16;
+		$[66] = t17;
+		$[67] = t19;
+		$[68] = t20;
+		$[69] = t21;
+		$[70] = t22;
+		$[71] = t9;
+		$[72] = t23;
+	} else t23 = $[72];
+	return t23;
 }
 function iconStyleOf(color, size) {
 	return {

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

@@ -1 +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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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","TextStyle","View","ViewStyle","AnimatedStyle","Text","NativeText","StyleSheet","useWindowDimensions","Animated","ButtonLinkForm","ButtonPressForm","ButtonToggleForm","PaletteName","IconStyle","ResolvedTheme","TypeRole","AnimatedPressable","buttonStyles","HEIGHTS","OUTLINE_WIDTHS","PRESSED_CORNERS","toggleState","useButtonAction","useCorner","palettesOf","BUSY","CONCEALED","PendingContent","PendingRing","pendingStyles","usePending","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","onLongPress","onPress","onPressIn","onPressOut","ownHitSlop","pendingLabel","props","slot","t1","t2","t3","t4","t5","t6","type","isPending","undefined","role","fontScale","pending","ringLabel","isToggle","t7","t8","action","colors","feedback","color","content","disabled","radii","resting","pill","shaped","pressed","T0","t9","t10","t11","t12","handlers","t13","t14","t15","t16","t17","container","shadowOf","corner","ring","t18","clip","t19","layer","t20","iconStyleOf","t21","hidden","t22","typography","t23","hovered","lifted","_c","NativeText"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { ComponentRef, 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 {\n  Text as NativeText,\n  StyleSheet,\n  useWindowDimensions,\n} 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 {\n  BUSY,\n  CONCEALED,\n  PendingContent,\n  PendingRing,\n  pendingStyles,\n  usePending,\n} from '../../button/pending'\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// **A pending button keeps its place.** Given `isPending` the label and the\n// icon are hidden where they stand, so the button keeps its width, and an\n// indeterminate ring is drawn over them in the label's colour, at the label's\n// type size times the device's text size, which is what web's `1em` reads.\n// The button keeps its focus and its ring and takes no press, so a double tap\n// cannot run the action twice: neither `onPress` nor `onLongPress` is called,\n// and a toggle keeps its state until it clears. It reports itself busy, and\n// src/button's pending.tsx says the change out loud.\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<ComponentRef<typeof 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  isPending = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onLongPress,\n  onPress,\n  onPressIn,\n  onPressOut,\n  pendingLabel,\n  shape = 'round',\n  size = 'md',\n  slot,\n  style,\n  type,\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  const theme = useTheme()\n  const role = useTypeRole(ROLES[size])\n  const { fontScale } = useWindowDimensions()\n  // A link is never pending, as on web, where its props have no such state.\n  const pending = href === undefined && isPending\n  const ringLabel = usePending(pending, pendingLabel)\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    slot: slot ?? 'default',\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    pending,\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      {...(pending ? BUSY : undefined)}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]])}\n      onLayout={shaped.onLayout}\n      onLongPress={pending ? undefined : onLongPress}\n      onPress={pending ? undefined : 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        <PendingContent isPending={pending}>\n          <IconStyleContext value={iconStyleOf(colors.content, size)}>\n            {icon}\n          </IconStyleContext>\n        </PendingContent>\n      )}\n      {children === undefined ? null : (\n        <NativeText\n          {...(pending ? CONCEALED : undefined)}\n          style={composeStyles<TextStyle>(\n            role,\n            styles.label,\n            colors.label,\n            pending ? pendingStyles.hidden : undefined,\n          )}\n        >\n          {children}\n        </NativeText>\n      )}\n      {pending ? (\n        <PendingRing\n          color={colors.content}\n          diameter={theme.typography[`${ROLES[size]}Size`] * fontScale}\n          label={ringLabel}\n        />\n      ) : null}\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

@@ -1,5 +1,5 @@
 import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
-import { ReactNode, Ref } from "react";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/card/index.d.ts
 type CardBaseProps = {
   readonly children?: ReactNode;
@@ -17,7 +17,7 @@ type CardBaseProps = {
    * @default 'default'
    */
   readonly padding?: 'default' | 'none';
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   readonly style?: StyleProp<ViewStyle>;
   /**
    * How the card separates itself from the page: `elevated` casts a shadow,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Ref","PressableProps","StyleProp","ViewProps","ViewStyle","Pressable","StyleSheet","View","usePressFeedback","useLinkPress","withOpacity","useTheme","composeStyles","themedStyles","CardBaseProps","children","isDisabled","padding","ref","style","variant","CardVariant","CardProps","InteractiveCardForm","StaticCardForm","Omit","href","interactive","onPress","paddings","spacing","create","default","lg","none","stylesOf","colors","radii","shadows","base","borderRadius","md","overflow","elevated","backgroundColor","surfaceContainerLow","filled","surfaceContainerHighest","lifted","boxShadow","elevation2","outlined","surface","borderColor","outlineVariant","borderWidth","resting","elevation1","disabledStylesOf","stateLayerOpacity","content","opacity","disabledContent","outline","disabledContainer","styles","flexGrow","Card","props","$","_c","t0","InteractiveCard","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","t1","t2","t3","t4","t5","_interactive","t6","t7","t8","t9","t10","t11","t12","t13","t14","t15","t16","t17","undefined","theme","press","onSurface","color","disabled","feedback","T0","handlers","hovered","pressed","ring","own","layer","StaticCard","_isDisabled","_c"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Pressable, StyleSheet, View } from 'react-native'\n\nimport { usePressFeedback } from '../../press'\nimport { useLinkPress } from '../../router'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// The cards spec page's three variants, as kanso-ui's Card draws them. They\n// differ only in how they separate themselves from the page: elevated casts\n// the level 1 shadow over the low container, filled sits on the highest\n// container, and outlined draws an outline-variant rule over the surface. The\n// corner is the page's 12dp, the medium shape, and content runs 16dp in from\n// it unless `padding` is `none`.\n//\n// An interactive card draws the state layers, the ripple and the focus ring\n// from src/press, in on-surface, the colour web mixes over its container.\n// They lie over the card's content rather than under it, so a child that\n// fills the card, an image or a row with a fill of its own, still shows the\n// press. Under a pointer the elevated card rises to level 2 and settles back\n// to 1 while pressed, as the page and web have it, and switches at once, since\n// web's runs no transition either; the other two stay flat. A phone has no\n// pointer, so there the press itself is what shows.\n//\n// Disabled is the page's: each container at 38%, the outlined card's rule\n// in the outline role at 12%, what the card holds faded to 38%, and the\n// elevated card flat. A card's content is the call site's, so no colour role\n// reaches all of it, and an opacity is the one fade that does.\n\ntype CardBaseProps = {\n  readonly children?: ReactNode\n  /**\n   * Turns an interactive card off: it fades as the cards page draws a\n   * disabled card, and takes no press. It is still announced, as disabled.\n   * Has no effect on a card that is not `interactive`, which cannot be\n   * pressed to begin with.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges, such as a list of rows separated by rules.\n   * @default 'default'\n   */\n  readonly padding?: 'default' | 'none'\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  readonly variant?: CardVariant\n}\n\ntype CardProps = CardBaseProps & (InteractiveCardForm | StaticCardForm)\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined'\n\n/**\n * A card that presses as a whole: a `Pressable` announced as a button, or as\n * a link given `href`.\n */\ntype InteractiveCardForm = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * Where the card leads. A press opens it through the `RouterProvider`\n   * around the card, or through the platform for a URL with a scheme of its\n   * own, after the call site's own `onPress`, and the card is announced as a\n   * link.\n   */\n  readonly href?: string\n  /**\n   * Makes the card the thing you press: it ripples, draws the state layers,\n   * lifts under a pointer and takes a focus ring. Leave it off for a card\n   * that merely holds content, including one holding buttons of its own.\n   */\n  readonly interactive: true\n}\n\n/** A card that holds content and takes no press: a `View` with no role. */\ntype StaticCardForm = Omit<ViewProps, 'children' | 'style'> & {\n  readonly href?: never\n  readonly interactive?: false\n  readonly onPress?: never\n}\n\nconst paddings = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    default: { padding: spacing.lg },\n    none: { padding: 0 },\n  }),\n)\n\nconst stylesOf = themedStyles(({ colors, radii, shadows }) =>\n  StyleSheet.create({\n    // The corner clips what the card holds, so a child running to the edges\n    // is rounded with it. The shadow and the focus ring are drawn outside the\n    // card and are not clipped.\n    base: {\n      borderRadius: radii.md,\n      overflow: 'hidden',\n    },\n    elevated: {\n      backgroundColor: colors.surfaceContainerLow,\n    },\n    filled: {\n      backgroundColor: colors.surfaceContainerHighest,\n    },\n    // Under a pointer, the elevated card's level 2.\n    lifted: {\n      boxShadow: shadows.elevation2,\n    },\n    outlined: {\n      backgroundColor: colors.surface,\n      borderColor: colors.outlineVariant,\n      borderWidth: 1,\n    },\n    // The elevated card's level 1, which no other variant casts.\n    resting: {\n      boxShadow: shadows.elevation1,\n    },\n  }),\n)\n\nconst disabledStylesOf = themedStyles(({ colors, stateLayerOpacity }) =>\n  StyleSheet.create({\n    content: {\n      opacity: stateLayerOpacity.disabledContent,\n    },\n    elevated: {\n      backgroundColor: withOpacity(\n        colors.surfaceContainerLow,\n        stateLayerOpacity.disabledContent,\n      ),\n    },\n    filled: {\n      backgroundColor: withOpacity(\n        colors.surfaceContainerHighest,\n        stateLayerOpacity.disabledContent,\n      ),\n    },\n    outlined: {\n      borderColor: withOpacity(\n        colors.outline,\n        stateLayerOpacity.disabledContainer,\n      ),\n    },\n  }),\n)\n\nconst styles = StyleSheet.create({\n  // What an interactive card's children sit in, filling a card stretched\n  // taller than them, as a static card's children are laid out in the card\n  // itself. It is what fades while disabled, apart from the container.\n  content: {\n    flexGrow: 1,\n  },\n})\n\n/**\n * A surface holding related content.\n *\n * ```tsx\n * <Card interactive onPress={open}>\n *   <Text variant=\"titleMedium\">Headline</Text>\n * </Card>\n * ```\n *\n * A card is a `View` with no role, unless it is `interactive`: then it is a\n * `Pressable` announced as a button, or as a link given `href`, which presses\n * as a whole. Web's `render` has no counterpart, since native has no element\n * to choose, and `href` is how a card leads somewhere instead. The press\n * props belong to an interactive card alone, so a static card given\n * `onPress` is a compile error rather than a press that never fires.\n *\n * A card fills the column it sits in, as any view in a React Native column\n * does. `style`, `ref` and `testID` land on the card's own view.\n */\nfunction Card(props: CardProps) {\n  return props.interactive === true ? (\n    <InteractiveCard {...props} />\n  ) : (\n    <StaticCard {...props} />\n  )\n}\n\nfunction InteractiveCard({\n  children,\n  href,\n  interactive: _interactive,\n  isDisabled = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPress,\n  onPressIn,\n  onPressOut,\n  padding = 'default',\n  style,\n  variant = 'elevated',\n  ...props\n}: CardBaseProps & InteractiveCardForm) {\n  const theme = useTheme()\n  const press = useLinkPress(href, onPress)\n  const feedback = usePressFeedback({\n    color: theme.colors.onSurface,\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  const own = stylesOf(theme)\n  const disabled = disabledStylesOf(theme)\n  const lifted = feedback.hovered && !feedback.pressed\n\n  return (\n    <Pressable\n      role={href === undefined ? 'button' : 'link'}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      onPress={press}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[variant],\n        paddings(theme)[padding],\n        variant === 'elevated' && !isDisabled\n          ? own[lifted ? 'lifted' : 'resting']\n          : undefined,\n        isDisabled && disabled[variant],\n        feedback.ring,\n        style,\n      )}\n    >\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.content,\n          isDisabled && disabled.content,\n        )}\n      >\n        {children}\n      </View>\n      {feedback.layer}\n    </Pressable>\n  )\n}\n\nfunction StaticCard({\n  interactive: _interactive,\n  isDisabled: _isDisabled,\n  padding = 'default',\n  style,\n  variant = 'elevated',\n  ...props\n}: CardBaseProps & StaticCardForm) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[variant],\n        variant === 'elevated' ? own.resting : undefined,\n        paddings(theme)[padding],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { CardProps, CardVariant }\n\nexport { Card }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","ViewProps","ViewStyle","Pressable","StyleSheet","View","usePressFeedback","useLinkPress","withOpacity","useTheme","composeStyles","themedStyles","CardBaseProps","children","isDisabled","padding","ref","style","variant","CardVariant","CardProps","InteractiveCardForm","StaticCardForm","Omit","href","interactive","onPress","paddings","spacing","create","default","lg","none","stylesOf","colors","radii","shadows","base","borderRadius","md","overflow","elevated","backgroundColor","surfaceContainerLow","filled","surfaceContainerHighest","lifted","boxShadow","elevation2","outlined","surface","borderColor","outlineVariant","borderWidth","resting","elevation1","disabledStylesOf","stateLayerOpacity","content","opacity","disabledContent","outline","disabledContainer","styles","flexGrow","Card","props","$","_c","t0","InteractiveCard","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","t1","t2","t3","t4","t5","_interactive","t6","t7","t8","t9","t10","t11","t12","t13","t14","t15","t16","t17","undefined","theme","press","onSurface","color","disabled","feedback","T0","handlers","hovered","pressed","ring","own","layer","StaticCard","_isDisabled","_c"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Pressable, StyleSheet, View } from 'react-native'\n\nimport { usePressFeedback } from '../../press'\nimport { useLinkPress } from '../../router'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// The cards spec page's three variants, as kanso-ui's Card draws them. They\n// differ only in how they separate themselves from the page: elevated casts\n// the level 1 shadow over the low container, filled sits on the highest\n// container, and outlined draws an outline-variant rule over the surface. The\n// corner is the page's 12dp, the medium shape, and content runs 16dp in from\n// it unless `padding` is `none`.\n//\n// An interactive card draws the state layers, the ripple and the focus ring\n// from src/press, in on-surface, the colour web mixes over its container.\n// They lie over the card's content rather than under it, so a child that\n// fills the card, an image or a row with a fill of its own, still shows the\n// press. Under a pointer the elevated card rises to level 2 and settles back\n// to 1 while pressed, as the page and web have it, and switches at once, since\n// web's runs no transition either; the other two stay flat. A phone has no\n// pointer, so there the press itself is what shows.\n//\n// Disabled is the page's: each container at 38%, the outlined card's rule\n// in the outline role at 12%, what the card holds faded to 38%, and the\n// elevated card flat. A card's content is the call site's, so no colour role\n// reaches all of it, and an opacity is the one fade that does.\n\ntype CardBaseProps = {\n  readonly children?: ReactNode\n  /**\n   * Turns an interactive card off: it fades as the cards page draws a\n   * disabled card, and takes no press. It is still announced, as disabled.\n   * Has no effect on a card that is not `interactive`, which cannot be\n   * pressed to begin with.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges, such as a list of rows separated by rules.\n   * @default 'default'\n   */\n  readonly padding?: 'default' | 'none'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  readonly variant?: CardVariant\n}\n\ntype CardProps = CardBaseProps & (InteractiveCardForm | StaticCardForm)\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined'\n\n/**\n * A card that presses as a whole: a `Pressable` announced as a button, or as\n * a link given `href`.\n */\ntype InteractiveCardForm = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * Where the card leads. A press opens it through the `RouterProvider`\n   * around the card, or through the platform for a URL with a scheme of its\n   * own, after the call site's own `onPress`, and the card is announced as a\n   * link.\n   */\n  readonly href?: string\n  /**\n   * Makes the card the thing you press: it ripples, draws the state layers,\n   * lifts under a pointer and takes a focus ring. Leave it off for a card\n   * that merely holds content, including one holding buttons of its own.\n   */\n  readonly interactive: true\n}\n\n/** A card that holds content and takes no press: a `View` with no role. */\ntype StaticCardForm = Omit<ViewProps, 'children' | 'style'> & {\n  readonly href?: never\n  readonly interactive?: false\n  readonly onPress?: never\n}\n\nconst paddings = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    default: { padding: spacing.lg },\n    none: { padding: 0 },\n  }),\n)\n\nconst stylesOf = themedStyles(({ colors, radii, shadows }) =>\n  StyleSheet.create({\n    // The corner clips what the card holds, so a child running to the edges\n    // is rounded with it. The shadow and the focus ring are drawn outside the\n    // card and are not clipped.\n    base: {\n      borderRadius: radii.md,\n      overflow: 'hidden',\n    },\n    elevated: {\n      backgroundColor: colors.surfaceContainerLow,\n    },\n    filled: {\n      backgroundColor: colors.surfaceContainerHighest,\n    },\n    // Under a pointer, the elevated card's level 2.\n    lifted: {\n      boxShadow: shadows.elevation2,\n    },\n    outlined: {\n      backgroundColor: colors.surface,\n      borderColor: colors.outlineVariant,\n      borderWidth: 1,\n    },\n    // The elevated card's level 1, which no other variant casts.\n    resting: {\n      boxShadow: shadows.elevation1,\n    },\n  }),\n)\n\nconst disabledStylesOf = themedStyles(({ colors, stateLayerOpacity }) =>\n  StyleSheet.create({\n    content: {\n      opacity: stateLayerOpacity.disabledContent,\n    },\n    elevated: {\n      backgroundColor: withOpacity(\n        colors.surfaceContainerLow,\n        stateLayerOpacity.disabledContent,\n      ),\n    },\n    filled: {\n      backgroundColor: withOpacity(\n        colors.surfaceContainerHighest,\n        stateLayerOpacity.disabledContent,\n      ),\n    },\n    outlined: {\n      borderColor: withOpacity(\n        colors.outline,\n        stateLayerOpacity.disabledContainer,\n      ),\n    },\n  }),\n)\n\nconst styles = StyleSheet.create({\n  // What an interactive card's children sit in, filling a card stretched\n  // taller than them, as a static card's children are laid out in the card\n  // itself. It is what fades while disabled, apart from the container.\n  content: {\n    flexGrow: 1,\n  },\n})\n\n/**\n * A surface holding related content.\n *\n * ```tsx\n * <Card interactive onPress={open}>\n *   <Text variant=\"titleMedium\">Headline</Text>\n * </Card>\n * ```\n *\n * A card is a `View` with no role, unless it is `interactive`: then it is a\n * `Pressable` announced as a button, or as a link given `href`, which presses\n * as a whole. Web's `render` has no counterpart, since native has no element\n * to choose, and `href` is how a card leads somewhere instead. The press\n * props belong to an interactive card alone, so a static card given\n * `onPress` is a compile error rather than a press that never fires.\n *\n * A card fills the column it sits in, as any view in a React Native column\n * does. `style`, `ref` and `testID` land on the card's own view.\n */\nfunction Card(props: CardProps) {\n  return props.interactive === true ? (\n    <InteractiveCard {...props} />\n  ) : (\n    <StaticCard {...props} />\n  )\n}\n\nfunction InteractiveCard({\n  children,\n  href,\n  interactive: _interactive,\n  isDisabled = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPress,\n  onPressIn,\n  onPressOut,\n  padding = 'default',\n  style,\n  variant = 'elevated',\n  ...props\n}: CardBaseProps & InteractiveCardForm) {\n  const theme = useTheme()\n  const press = useLinkPress(href, onPress)\n  const feedback = usePressFeedback({\n    color: theme.colors.onSurface,\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  const own = stylesOf(theme)\n  const disabled = disabledStylesOf(theme)\n  const lifted = feedback.hovered && !feedback.pressed\n\n  return (\n    <Pressable\n      role={href === undefined ? 'button' : 'link'}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      onPress={press}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[variant],\n        paddings(theme)[padding],\n        variant === 'elevated' && !isDisabled\n          ? own[lifted ? 'lifted' : 'resting']\n          : undefined,\n        isDisabled && disabled[variant],\n        feedback.ring,\n        style,\n      )}\n    >\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.content,\n          isDisabled && disabled.content,\n        )}\n      >\n        {children}\n      </View>\n      {feedback.layer}\n    </Pressable>\n  )\n}\n\nfunction StaticCard({\n  interactive: _interactive,\n  isDisabled: _isDisabled,\n  padding = 'default',\n  style,\n  variant = 'elevated',\n  ...props\n}: CardBaseProps & StaticCardForm) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[variant],\n        variant === 'elevated' ? own.resting : undefined,\n        paddings(theme)[padding],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { CardProps, CardVariant }\n\nexport { Card }\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
-import { ReactNode, Ref } from "react";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/checkbox/index.d.ts
 type CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {
   /**
@@ -47,7 +47,7 @@ type CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {
   readonly isSelected?: boolean;
   /** Called with the new state whenever a press changes it. */
   readonly onChange?: (isSelected: boolean) => void;
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   readonly style?: StyleProp<ViewStyle>;
 };
 /**