@mrmeg/expo-ui 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,87 @@
 All notable changes to `@mrmeg/expo-ui` are documented here. This project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.16.0]
+
+### Added
+
+- **`setFonts` — font injection, mirroring `setColors`.** A host app can now
+  forward its own bundled faces to the package:
+
+  ```ts
+  useThemeStore.getState().setFonts({
+    families: { sansSerif: { light: "…", regular: "…", medium: "…",
+                             semibold: "…", bold: "…" } },
+    webWeightStrategy: "family",
+  });
+  ```
+
+  Overrides are partial and per-group — pass `sansSerif` alone and `serif`
+  keeps the package default. `setFonts({})` clears back to the defaults.
+  `StyledText` subscribes to the store, so a call after mount re-renders
+  rather than leaving stale families on screen.
+
+- **`webWeightStrategy` — `"numeric" | "family"`.** Declares how a family map
+  expresses weight. `"numeric"` (the package default on web) assumes one
+  multi-weight CSS family where a numeric `fontWeight` selects the
+  `@font-face` variant. `"family"` means each weight is its own
+  separately-registered single-face family, so the family name alone carries
+  the weight and `StyledText` suppresses the numeric `fontWeight`. Native is
+  always `"family"`, unchanged.
+
+  Apps loading per-weight faces through `expo-font` need `"family"` on web:
+  `expo-font` registers each file as its own family there too, so the previous
+  always-numeric behaviour synthesised a second layer of bold on top of an
+  already-bold face.
+
+- Exported `FontFamilyMap`, `FontFamilyWeight`, `FontOverrides`,
+  `FontWeightStrategy`, and `defaultWebWeightStrategy` from `constants/fonts`.
+
+- **`createThemedStyles` — SSR-safe themed style registration**, exported from
+  `lib`. Wraps a `(theme: Theme) => styles` factory so both base themes are
+  registered with react-native-web at module scope — before expo-router
+  snapshots the server-side stylesheet — instead of lazily during render via
+  `useMemo`, which left SSR HTML referencing class names with no rules
+  (unstyled first paint until hydration). Override themes are cached per theme
+  object identity. The package's own components (Badge, Button, Card,
+  EmptyState, InputOTP, Label, Notification, Skeleton, TextInput) now use it.
+
+### Why
+
+`fontFamilies` was a module-level `const` with no injection point, so the only
+way for a consumer to use its own type was to patch `dist/` inside
+`node_modules`. Bun keys `patchedDependencies` on an exact `name@version`, so
+those patches stop applying — silently, with no warning — the moment the
+package version is bumped. Two consumer apps hit exactly that and shipped
+fallback fonts without noticing. Colors already had `setColors` for this
+reason; fonts now match.
+
+Fully backward compatible: with no `setFonts` call, font resolution is
+identical to 0.15.0.
+
+## [0.15.0]
+
+### Added
+
+- **New composition primitives: `SectionHeader`, `StatCard`, and `Item`.**
+  `EmptyState` was also upgraded with richer layout options as part of the
+  same pass.
+- **Typography system.** The package now loads Inter with real weights and a
+  letter-spacing scale via `useResources`, replacing synthetic bolding.
+- Motion tokens, dual-layer shadow tokens, and softer radii in the design
+  tokens.
+
+### Changed
+
+- Interaction sweep across components: press feedback, focus rings, and
+  shadow adoption.
+- Updated all `@rn-primitives/*` dependencies from `~1.4.0` to `~1.5.2`,
+  picking up upstream's native accessibility overhaul: menus, popovers, and
+  dialogs are now usable with VoiceOver/TalkBack (focus moves into opened
+  content, escape gestures dismiss), toggles and switches announce the
+  correct state, and `nativeID` plumbing that broke Reanimated exiting
+  animations was removed.
+
 ## [0.14.0]
 
 ### Changed

package/README.md

@@ -1,6 +1,6 @@
 # @mrmeg/expo-ui
 
-Reusable Expo and React Native UI primitives shared by the template and consumer apps. The package does not ship font files; web consumers load Lato from Google Fonts and native consumers use platform sans-serif fallbacks.
+Reusable Expo and React Native UI primitives shared by the template and consumer apps. Typography is Inter: native consumers load four static Inter weights via `@expo-google-fonts/inter`, web consumers load Inter from Google Fonts.
 
 This package is public for installability, reuse across MrMeg projects, and
 discoverability. It is a personal reusable Expo / React Native design-system
@@ -163,6 +163,50 @@ import { ThemeColorScope } from "@mrmeg/expo-ui/state";
 </ThemeColorScope>
 ```
 
+### Font overrides
+
+The package bundles Inter (sans) and Georgia (serif). Most apps ship their own
+faces — forward them with `setFonts`, the font counterpart to `setColors`.
+Call it once at startup, after your fonts are registered:
+
+```tsx
+import { useThemeStore } from "@mrmeg/expo-ui/state";
+
+useThemeStore.getState().setFonts({
+  families: {
+    sansSerif: {
+      light: "HankenGrotesk_300Light",
+      regular: "HankenGrotesk_400Regular",
+      medium: "HankenGrotesk_500Medium",
+      semibold: "HankenGrotesk_600SemiBold",
+      bold: "HankenGrotesk_700Bold",
+    },
+  },
+  webWeightStrategy: "family",
+});
+```
+
+Overrides are partial and per-group: pass `sansSerif` alone and `serif` keeps
+the package default. `setFonts({})` clears back to the defaults.
+
+**Pick the right `webWeightStrategy`** — this is the one non-obvious part:
+
+| Strategy | Use when | Effect |
+|---|---|---|
+| `"numeric"` (default) | You ship **one multi-weight CSS family** (a variable font, or Google Fonts' single `"Inter"` family) | A numeric `fontWeight` selects the `@font-face` variant |
+| `"family"` | You load **per-weight faces via `expo-font`** | The family name alone carries the weight; the numeric `fontWeight` is suppressed |
+
+If you load fonts through `expo-font` / `@expo-google-fonts`, choose
+`"family"`. `expo-font` registers each weight as its own single-face family on
+web as well as native, so emitting a numeric weight on top makes the browser
+synthesise a *second* layer of bold over an already-bold face.
+
+Native always behaves as `"family"` regardless of this setting.
+
+> Prefer `setFonts` over patching `node_modules`. Bun keys
+> `patchedDependencies` to an exact `name@version`, so a font patch silently
+> stops applying the next time you bump the package — with no warning.
+
 Use `StyledText` for theme-aware text:
 
 ```tsx
@@ -394,21 +438,21 @@ export default function RootLayout() {
 
 ## Fonts
 
-This package does not ship Lato `.ttf` files or other font binaries.
+Typography is Inter across every platform, in four static weights (`Inter_400Regular`, `Inter_500Medium`, `Inter_600SemiBold`, `Inter_700Bold`) from `@expo-google-fonts/inter` — a package dependency, so consumers get it automatically.
 
-On web, `useResources()` injects the Google Fonts Lato stylesheet after hydration if the app has not already added it. For better first paint in Expo Router web apps, add the links in app-owned `app/+html.tsx`:
+On native, `useResources()` loads the four static weights so `StyledText`'s `light`–`bold` range resolves to real font files instead of a faked OS bold. On web, `useResources()` injects a single Google Fonts Inter stylesheet (covering all four weights) after hydration if the app has not already added it; weight differentiation on web comes from a numeric `fontWeight` alongside the shared `"Inter"` CSS family. For better first paint in Expo Router web apps, add the links in app-owned `app/+html.tsx`:
 
 ```tsx
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
 <link
-  id="mrmeg-expo-ui-lato"
+  id="mrmeg-expo-ui-inter"
   rel="stylesheet"
-  href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
 />
 ```
 
-On native, the package uses platform sans-serif fallbacks. `useResources()` still loads `Feather.font` from the package-managed `@expo/vector-icons` dependency for icon rendering.
+`useResources()` also loads `Feather.font` from the package-managed `@expo/vector-icons` dependency for icon rendering.
 
 ## Package Checks
 

package/dist/components/Accordion.d.ts

@@ -43,7 +43,7 @@ declare function AccordionItem({ children, value, style: styleOverride, ...props
  * Clickable header that expands/collapses the content
  * Includes animated chevron icon
  */
-declare function AccordionTrigger({ children, style: styleOverride, ...props }: AccordionPrimitive.TriggerProps & {
+declare function AccordionTrigger({ children, style: styleOverride, disabled, ...props }: AccordionPrimitive.TriggerProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<AccordionPrimitive.TriggerRef>): import("react").JSX.Element;
 /**

package/dist/components/Accordion.js

@@ -5,6 +5,7 @@ import { Icon } from "./Icon.js";
 import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import { spacing } from "../constants/spacing.js";
 import * as AccordionPrimitive from "@rn-primitives/accordion";
 function normalizeSingleValue(value) {
@@ -96,11 +97,16 @@ const Trigger = Platform.OS === "web" ? View : Pressable;
  * Clickable header that expands/collapses the content
  * Includes animated chevron icon
  */
-function AccordionTrigger({ children, style: styleOverride, ...props }) {
+function AccordionTrigger({ children, style: styleOverride, disabled, ...props }) {
     const { theme } = useTheme();
     const reduceMotion = useReducedMotion();
     const { isExpanded } = AccordionPrimitive.useItemContext();
     const rotation = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
     useEffect(() => {
         const target = isExpanded ? 1 : 0;
         Animated.timing(rotation, {
@@ -119,24 +125,24 @@ function AccordionTrigger({ children, style: styleOverride, ...props }) {
             },
         ],
     };
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(AccordionPrimitive.Header, { children: _jsx(AccordionPrimitive.Trigger, { ...props, asChild: true, children: _jsxs(Trigger, { style: [
-                            {
-                                flexDirection: "row",
-                                alignItems: "center",
-                                justifyContent: "space-between",
-                                gap: spacing.md,
-                                borderRadius: spacing.radiusMd,
-                                paddingVertical: spacing.md,
-                                ...(Platform.OS === "web" && {
-                                    cursor: "pointer",
-                                    userSelect: "none",
-                                }),
-                            },
-                            // Spread array styles from primitives to prevent nested arrays on web
-                            ...(styleOverride && typeof styleOverride !== "function"
-                                ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
-                                : []),
-                        ], children: [_jsx(_Fragment, { children: children }), _jsx(Animated.View, { style: chevronStyle, children: _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.textDim, decorative: true }) })] }) }) }) }) }));
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(AccordionPrimitive.Header, { children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(AccordionPrimitive.Trigger, { ...props, disabled: disabled, asChild: true, children: _jsxs(Trigger, { onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: [
+                                {
+                                    flexDirection: "row",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    gap: spacing.md,
+                                    borderRadius: spacing.radiusMd,
+                                    paddingVertical: spacing.md,
+                                    ...(Platform.OS === "web" && {
+                                        cursor: "pointer",
+                                        userSelect: "none",
+                                    }),
+                                },
+                                // Spread array styles from primitives to prevent nested arrays on web
+                                ...(styleOverride && typeof styleOverride !== "function"
+                                    ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
+                                    : []),
+                            ], children: [_jsx(_Fragment, { children: children }), _jsx(Animated.View, { style: chevronStyle, children: _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.textDim, decorative: true }) })] }) }) }) }) }) }));
 }
 /**
  * Accordion Content Component

package/dist/components/Badge.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useMemo } from "react";
+import React from "react";
 import { View, StyleSheet } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 /**
  * Badge Component
  *
@@ -19,7 +20,7 @@ import { StyledText } from "./StyledText.js";
  */
 function Badge({ children, text, variant = "default", style: styleOverride }) {
     const { theme } = useTheme();
-    const styles = useMemo(() => createStyles(theme), [theme]);
+    const styles = themedStyles(theme);
     const badgeContent = text ?? children;
     const textStyle = [
         styles.text,
@@ -30,9 +31,13 @@ function Badge({ children, text, variant = "default", style: styleOverride }) {
     ];
     const normalizedChildren = React.Children.toArray(badgeContent);
     const hasOnlyTextChildren = normalizedChildren.every((child) => typeof child === "string" || typeof child === "number");
-    const content = hasOnlyTextChildren ? (_jsx(StyledText, { selectable: false, style: textStyle, children: normalizedChildren.join("") })) : (React.Children.map(badgeContent, (child) => {
+    // size="sm" + fontWeight="medium" match this badge's fontSize/lineHeight/weight
+    // (12/18/500) via the shared StyledText scale — including its "sm" letter
+    // spacing and correct native weight-file resolution — instead of a hand-rolled
+    // fontSize/fontWeight pair.
+    const content = hasOnlyTextChildren ? (_jsx(StyledText, { selectable: false, size: "sm", fontWeight: "medium", style: textStyle, children: normalizedChildren.join("") })) : (React.Children.map(badgeContent, (child) => {
         if (typeof child === "string" || typeof child === "number") {
-            return _jsx(StyledText, { selectable: false, style: textStyle, children: child });
+            return _jsx(StyledText, { selectable: false, size: "sm", fontWeight: "medium", style: textStyle, children: child });
         }
         return child;
     }));
@@ -67,10 +72,8 @@ const createStyles = (theme) => StyleSheet.create({
         backgroundColor: theme.colors.destructive,
     },
     text: {
-        fontSize: 12,
-        fontWeight: "500",
-        lineHeight: 18,
         userSelect: "none",
     },
 });
+const themedStyles = createThemedStyles(createStyles);
 export { Badge };

package/dist/components/BottomSheet.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, use, useCallback, useEffect, useMemo, useReducer, useRef, useSyncExternalStore } from "react";
-import { View, Pressable, StyleSheet, ScrollView, Platform, useWindowDimensions, } from "react-native";
+import { View, Pressable, StyleSheet, ScrollView, Platform, Animated, useWindowDimensions, } from "react-native";
 import { BottomSheet as NativeBottomSheet } from "@expo/ui/community/bottom-sheet";
 import { KeyboardController } from "react-native-keyboard-controller";
 import { useSafeAreaInsets, initialWindowMetrics } from "react-native-safe-area-context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import { TextColorContext, TextClassContext } from "./StyledText.context";
 import { Icon } from "./Icon.js";
 import { dismissKeyboardFocusedInput, hasKeyboardFocusedInput, subscribeKeyboardFocus, } from "./keyboardFocusRegistry.js";
@@ -140,24 +141,25 @@ function useShowClose() {
 function SheetCloseButton({ style }) {
     const { onOpenChange } = useBottomSheetContext();
     const { theme } = useTheme();
-    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close", onPress: () => onOpenChange(false), hitSlop: spacing.sm, style: ({ pressed }) => [
-            {
-                width: spacing.xl,
-                height: spacing.xl,
-                borderRadius: spacing.xl / 2,
-                alignItems: "center",
-                justifyContent: "center",
-                // Higher-contrast than `muted`: a solid `secondary` fill with a
-                // bordered edge so the control reads clearly against the card, and a
-                // full-strength `foreground` glyph instead of the faint muted one.
-                backgroundColor: theme.colors.secondary,
-                borderWidth: 1,
-                borderColor: theme.colors.border,
-                opacity: pressed ? 0.7 : 1,
-            },
-            Platform.OS === "web" && { cursor: "pointer" },
-            style,
-        ], children: _jsx(Icon, { name: "x", size: 22, color: "text" }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        scaleTo: 0.96,
+    });
+    return (_jsx(Animated.View, { style: [style, scaleStyle], children: _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close", onPress: () => onOpenChange(false), onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, hitSlop: spacing.sm, style: [
+                {
+                    width: spacing.xl,
+                    height: spacing.xl,
+                    borderRadius: spacing.xl / 2,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    // Higher-contrast than `muted`: a solid `secondary` fill with a
+                    // bordered edge so the control reads clearly against the card, and a
+                    // full-strength `foreground` glyph instead of the faint muted one.
+                    backgroundColor: theme.colors.secondary,
+                    borderWidth: 1,
+                    borderColor: theme.colors.border,
+                },
+                Platform.OS === "web" && { cursor: "pointer" },
+            ], children: _jsx(Icon, { name: "x", size: 22, color: "text" }) }) }));
 }
 // ============================================================================
 // Keyboard dismiss overlay — tap-away dismissal inside the sheet

package/dist/components/Button.d.ts

@@ -90,7 +90,8 @@ export interface ButtonProps extends PressableProps {
      */
     disabledStyle?: StyleProp<ViewStyle>;
     /**
-     * Whether to show shadow
+     * Whether to show shadow.
+     * @default true for the `default` preset, `false` for every other preset.
      */
     withShadow?: boolean;
     /**

package/dist/components/Button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { use, useCallback, useMemo, useState } from "react";
+import { use, useCallback, useState } from "react";
 import { Pressable, StyleSheet, View, Platform, ActivityIndicator, Animated, } from "react-native";
 import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
@@ -9,6 +9,7 @@ import { fontFamilies } from "../constants/fonts.js";
 import { palette } from "../constants/colors.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 const SIZE_CONFIGS = {
     sm: {
         paddingVertical: spacing.xxs,
@@ -70,11 +71,15 @@ const getNativeHitSlop = (sizeConfig) => Math.ceil(Math.max(0, spacing.touchTarg
  * ```
  */
 function ButtonRoot(props) {
-    const { tx, text, txOptions, style: styleOverride, pressedStyle: pressedStyleOverride, textStyle: textStyleOverride, pressedTextStyle: pressedTextStyleOverride, disabledTextStyle: disabledTextStyleOverride, children, RightAccessory, LeftAccessory, disabled, disabledStyle: disabledStyleOverride, withShadow = false, preset = "default", size = "md", loading = false, fullWidth = false, onFocus, onBlur, onPressIn, onPressOut, ...rest } = props;
+    const { tx, text, txOptions, style: styleOverride, pressedStyle: pressedStyleOverride, textStyle: textStyleOverride, pressedTextStyle: pressedTextStyleOverride, disabledTextStyle: disabledTextStyleOverride, children, RightAccessory, LeftAccessory, disabled, disabledStyle: disabledStyleOverride, withShadow: withShadowProp, preset = "default", size = "md", loading = false, fullWidth = false, onFocus, onBlur, onPressIn, onPressOut, ...rest } = props;
     const { theme, getContrastingColor, getFocusRingStyle, getShadowStyle } = useTheme();
-    const styles = useMemo(() => createStyles(theme, size), [theme, size]);
-    const shadowStyle = getShadowStyle("base");
+    const styles = themedStyles(theme)[size];
+    const shadowStyle = getShadowStyle("subtle");
     const sizeConfig = SIZE_CONFIGS[size];
+    // Filled (`default`) buttons float by default; ghost/outline/link stay flat
+    // (transparent background reads oddly with a shadow), and destructive/secondary
+    // keep the old opt-in behavior. Callers can still override via `withShadow`.
+    const withShadow = withShadowProp ?? preset === "default";
     const focusRingStyle = getFocusRingStyle();
     // Pre-compute background color for contrast calculation
     // Always flatten to handle both array styles (from Slot) and RegisteredStyle
@@ -278,9 +283,15 @@ const createStyles = (theme, size) => {
             width: "100%",
         },
         text: {
-            fontFamily: fontFamilies.sansSerif.regular,
+            // Button labels render at medium weight. On native, the family itself
+            // carries the weight (a real static Inter_500Medium file) — pairing it
+            // with a numeric fontWeight would faux-bold on top of that file. Web
+            // shares one "Inter" family across weights, so it needs the numeric
+            // fontWeight to pick the right @font-face variant. (Same rule as
+            // StyledText's getFontFamilyWeight / WEB_FONT_WEIGHTS.)
+            fontFamily: fontFamilies.sansSerif.medium,
             fontSize: sizeConfig.fontSize,
-            fontWeight: "500",
+            ...(Platform.OS === "web" && { fontWeight: "500" }),
             textAlign: "center",
             lineHeight: sizeConfig.fontSize * 1.4,
             flexShrink: 0,
@@ -311,6 +322,11 @@ const createStyles = (theme, size) => {
         },
     });
 };
+const themedStyles = createThemedStyles((theme) => ({
+    sm: createStyles(theme, "sm"),
+    md: createStyles(theme, "md"),
+    lg: createStyles(theme, "lg"),
+}));
 /**
  * Button with explicit subcomponents.
  * - `Button.Text` for label text (inherits control typography)

package/dist/components/Card.js

@@ -5,6 +5,7 @@ import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 import { spacing } from "../constants/spacing.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 /**
  * Card Component
  *
@@ -30,15 +31,15 @@ import { spacing } from "../constants/spacing.js";
 const CardContext = createContext(null);
 function useCardContext() {
     const ctx = use(CardContext);
-    // useTheme must run unconditionally (Rules of Hooks); createCardStyles is a
+    // useTheme must run unconditionally (Rules of Hooks); themedStyles is a
     // plain function, so the `??` keeps the fallback styles lazy.
     const { theme } = useTheme();
     // Fallback for standalone usage without a Card parent.
-    return ctx ?? { theme, styles: createCardStyles(theme) };
+    return ctx ?? { theme, styles: themedStyles(theme) };
 }
 function Card({ children, style: styleOverride, variant = "default", onPress, disabled }) {
     const { theme, getShadowStyle } = useTheme();
-    const styles = createCardStyles(theme);
+    const styles = themedStyles(theme);
     const shadowStyle = getShadowStyle("subtle");
     const ctx = { theme, styles };
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
@@ -122,4 +123,5 @@ const createCardStyles = (theme) => StyleSheet.create({
         lineHeight: 20,
     },
 });
+const themedStyles = createThemedStyles(createCardStyles);
 export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription };

package/dist/components/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { Icon } from "./Icon.js";
 import { StyledText } from "./StyledText.js";
@@ -7,6 +7,7 @@ import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { hapticLight } from "../lib/haptics.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as CheckboxPrimitive from "@rn-primitives/checkbox";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
@@ -15,9 +16,34 @@ const SIZE_CONFIGS = {
     lg: { size: 24, iconSize: 20, strokeWidth: 3.5 },
 };
 function Checkbox({ size = "md", label, indeterminate = false, error = false, style: styleOverride, labelStyle, required = false, checked, onCheckedChange, disabled, ...props }) {
-    const { theme, getContrastingColor } = useTheme();
+    const { theme, getContrastingColor, getFocusRingStyle } = useTheme();
     const reduceMotion = useReducedMotion();
     const sizeConfig = SIZE_CONFIGS[size];
+    const focusRingStyle = getFocusRingStyle();
+    const [focused, setFocused] = useState(false);
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.92,
+        haptic: false,
+    });
+    const showFocusRing = (event) => {
+        let ringVisible = true;
+        if (Platform.OS === "web") {
+            const target = event?.nativeEvent?.target;
+            if (target && typeof target.matches === "function") {
+                try {
+                    ringVisible = target.matches(":focus-visible");
+                }
+                catch {
+                    ringVisible = true;
+                }
+            }
+        }
+        setFocused(ringVisible);
+    };
+    const hideFocusRing = () => {
+        setFocused(false);
+    };
     // Simple fast opacity for the checkmark icon
     const checkOpacity = useRef(new Animated.Value(checked || indeterminate ? 1 : 0)).current;
     const isVisuallyChecked = !!checked || indeterminate;
@@ -45,22 +71,23 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
     // Flatten style override for web compatibility
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    const checkboxElement = (_jsx(CheckboxPrimitive.Root, { ...props, checked: checked, onCheckedChange: wrappedOnCheckedChange, disabled: disabled, style: {
-            ...styles.box,
-            borderColor,
-            backgroundColor: isVisuallyChecked ? theme.colors.primary : theme.colors.background,
-            width: sizeConfig.size,
-            height: sizeConfig.size,
-            opacity: disabled ? 0.5 : 1,
-            ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
-            ...(flattenedStyle || {}),
-        }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "checkbox", accessibilityState: {
-            checked: indeterminate ? "mixed" : checked,
-            disabled: !!disabled,
-        }, accessibilityLabel: label, children: _jsx(CheckboxPrimitive.Indicator, { style: {
-                justifyContent: "center",
-                alignItems: "center",
-            }, children: _jsx(Animated.View, { style: { opacity: checkOpacity }, children: indeterminate ? (_jsx(Icon, { name: "minus", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) : (_jsx(Icon, { name: "check", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) }) }) }));
+    const checkboxElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(CheckboxPrimitive.Root, { ...props, checked: checked, onCheckedChange: wrappedOnCheckedChange, disabled: disabled, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                ...styles.box,
+                borderColor,
+                backgroundColor: isVisuallyChecked ? theme.colors.primary : theme.colors.background,
+                width: sizeConfig.size,
+                height: sizeConfig.size,
+                opacity: disabled ? 0.5 : 1,
+                ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
+                ...(focused && !disabled ? focusRingStyle : null),
+                ...(flattenedStyle || {}),
+            }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "checkbox", accessibilityState: {
+                checked: indeterminate ? "mixed" : checked,
+                disabled: !!disabled,
+            }, accessibilityLabel: label, children: _jsx(CheckboxPrimitive.Indicator, { style: {
+                    justifyContent: "center",
+                    alignItems: "center",
+                }, children: _jsx(Animated.View, { style: { opacity: checkOpacity }, children: indeterminate ? (_jsx(Icon, { name: "minus", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) : (_jsx(Icon, { name: "check", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) }) }) }) }));
     // If no label, return just the checkbox
     if (!label) {
         return checkboxElement;
@@ -78,7 +105,10 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
 }
 const styles = StyleSheet.create({
     box: {
-        borderRadius: spacing.radiusSm,
+        // radiusXs (not radiusSm) — at the checkbox's 16-24px sizes, radiusSm
+        // post-rebase (8px) reads as over-rounded; radiusXs keeps the same
+        // proportion the box had before the radius rebase.
+        borderRadius: spacing.radiusXs,
         borderWidth: 1,
         justifyContent: "center",
         alignItems: "center",

package/dist/components/Collapsible.d.ts

@@ -41,7 +41,7 @@ declare function Collapsible({ children, ...props }: CollapsibleProps): React.JS
  * ```
  */
 type CollapsibleTriggerProps = CollapsiblePrimitive.TriggerProps;
-declare function CollapsibleTrigger({ style: styleOverride, ...props }: CollapsibleTriggerProps): React.JSX.Element;
+declare function CollapsibleTrigger({ style: styleOverride, disabled, ...props }: CollapsibleTriggerProps): React.JSX.Element;
 /**
  * CollapsibleContent Component
  * The content that expands and collapses

package/dist/components/Collapsible.js

@@ -1,28 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Platform, StyleSheet, View } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
 function Collapsible({ children, ...props }) {
     return (_jsx(CollapsiblePrimitive.Root, { ...props, asChild: Platform.OS !== "web", children: _jsx(View, { children: children }) }));
 }
-function CollapsibleTrigger({ style: styleOverride, ...props }) {
+function CollapsibleTrigger({ style: styleOverride, disabled, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(CollapsiblePrimitive.Trigger, { ...props, style: {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    paddingVertical: spacing.sm,
-                    ...(Platform.OS === "web" && {
-                        cursor: "pointer",
-                        outlineStyle: "none",
-                        userSelect: "none",
-                    }),
-                    ...(styleOverride && typeof styleOverride !== "function"
-                        ? StyleSheet.flatten(styleOverride)
-                        : {}),
-                } }) }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(CollapsiblePrimitive.Trigger, { disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        paddingVertical: spacing.sm,
+                        ...(Platform.OS === "web" && {
+                            cursor: "pointer",
+                            outlineStyle: "none",
+                            userSelect: "none",
+                        }),
+                        ...(styleOverride && typeof styleOverride !== "function"
+                            ? StyleSheet.flatten(styleOverride)
+                            : {}),
+                    } }) }) }) }));
 }
 function CollapsibleContent({ forceMount, style: styleOverride, children, ...props }) {
     return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(CollapsiblePrimitive.Content, { ...props, forceMount: forceMount, children: _jsx(View, { style: {