@expokit/cli 0.4.3 → 0.4.4

package/registry/grain/files/src/lib/kit.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import { Platform, useColorScheme, type TextStyle } from 'react-native';
+import { Platform, useColorScheme, useWindowDimensions, type TextStyle, type ViewStyle } from 'react-native';
 
 /**
  * ExpoKit design tokens. Every component reads them through useKit(), so one
@@ -8,10 +8,10 @@ import { Platform, useColorScheme, type TextStyle } from 'react-native';
  */
 
 /**
- * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
- * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule,
+ * 3: useLayout / shadow). The CLI won't keep an edited kit.tsx older than the component being added needs.
  */
-export const KIT_VERSION = 2;
+export const KIT_VERSION = 3;
 
 export type ColorScheme = 'light' | 'dark';
 
@@ -58,6 +58,8 @@ export interface Theme {
   };
   /** 4pt spacing scale: space(4) === 16. */
   space: (n: number) => number;
+  /** The same soft shadow on iOS, Android and web: `style={[styles.card, shadow('md')]}`. */
+  shadow: (level: ShadowLevel, color?: string) => ViewStyle;
   font: { family?: string; mono: string };
   text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
 }
@@ -134,6 +136,7 @@ function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
       capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
     },
     space: (n) => n * 4,
+    shadow: (level, color) => shadowFor(level, scheme === 'dark', color),
     font: {
       family: overrides?.fontFamily,
       mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
@@ -181,6 +184,101 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
+export type ShadowLevel = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+const SHADOWS: Record<Exclude<ShadowLevel, 'none'>, [y: number, blur: number, opacity: number]> = {
+  sm: [1, 3, 0.08],
+  md: [4, 14, 0.1],
+  lg: [10, 30, 0.14],
+  xl: [18, 48, 0.2],
+};
+
+/**
+ * A shadow as `boxShadow`, which React Native (0.76+) draws identically on iOS, Android and web —
+ * unlike `elevation`, whose Android shadow looks nothing like the iOS one. Darker in dark mode so
+ * it still reads on near-black. `color` is a #rrggbb tint (default black).
+ */
+export function shadowFor(level: ShadowLevel, dark: boolean, color = '#000000'): ViewStyle {
+  if (level === 'none') return {};
+  const [y, blur, opacity] = SHADOWS[level];
+  const a = Math.min(0.6, dark ? opacity * 2.8 : opacity);
+  const full = color.length === 4 ? '#' + [...color.slice(1)].map((c) => c + c).join('') : color;
+  const n = parseInt(full.slice(1, 7), 16);
+  const [r, g, b] = Number.isNaN(n) ? [0, 0, 0] : [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return { boxShadow: `0px ${y}px ${blur}px rgba(${r},${g},${b},${+a.toFixed(3)})` };
+}
+
+/**
+ * Screen size classes, shared by every component so phones, foldables and tablets all get the
+ * right layout without any work from you. `compact` — phones (any orientation); `medium` — open
+ * foldables (Galaxy Z Fold, Pixel Fold), Surface Duo and small tablets; `expanded` — iPad and
+ * larger. Decided by the screen's short side, so a phone on its side stays a phone.
+ */
+export type SizeClass = 'compact' | 'medium' | 'expanded';
+
+export const breakpoints = { medium: 600, expanded: 840 };
+
+/** Widest a sheet / picker / popover card and a screen's content column get on big screens. */
+export const layoutLimits = { sheet: 560, content: 720, gutter: 24 };
+
+export function sizeClassOf(shortSide: number): SizeClass {
+  if (!(shortSide >= breakpoints.medium)) return 'compact';
+  return shortSide >= breakpoints.expanded ? 'expanded' : 'medium';
+}
+
+export interface Layout {
+  width: number;
+  height: number;
+  size: SizeClass;
+  /** Foldable, tablet or desktop — anything bigger than a phone. */
+  wide: boolean;
+  landscape: boolean;
+  fontScale: number;
+  /** Width for a bottom sheet, picker or action sheet: the full screen on a portrait phone, a centred card on anything wider. */
+  sheetWidth: number;
+  /** Width for a screen's main column (forms, feeds, blocks): full on phones, a readable centred column on tablets. */
+  contentWidth: number;
+  /** Grid columns that fit the current width: 1 phone, 2 foldable / landscape phone, 3 tablet. */
+  columns: number;
+  /** A value per size class; a missing one falls back to the next smaller: `pick({ compact: 16, expanded: 24 })`. */
+  pick: <T>(values: { compact: T; medium?: T; expanded?: T }) => T;
+}
+
+const finite = (n: number) => (Number.isFinite(n) && n > 0 ? n : 0);
+
+/** The layout for a window of `width` × `height` points (the pure part of useLayout). */
+export function layoutFor(rawWidth: number, rawHeight: number, fontScale = 1): Layout {
+  const width = finite(rawWidth);
+  const height = finite(rawHeight);
+  const size = sizeClassOf(Math.min(width, height || width));
+  const roomy = width >= breakpoints.medium;
+  const { sheet, content, gutter } = layoutLimits;
+  return {
+    width,
+    height,
+    size,
+    wide: size !== 'compact',
+    landscape: width > height,
+    fontScale,
+    sheetWidth: roomy ? Math.min(sheet, width - gutter * 2) : width,
+    contentWidth: roomy ? Math.min(content, width - gutter * 2) : width,
+    columns: width >= breakpoints.expanded + 160 ? 3 : roomy ? 2 : 1,
+    pick: (values) =>
+      (size === 'expanded' ? values.expanded ?? values.medium : size === 'medium' ? values.medium : undefined) ??
+      values.compact,
+  };
+}
+
+/**
+ * The current screen's layout; re-renders on rotation, split view, Stage Manager and fold / unfold.
+ * Components use it so they look right on every device; use it in your own screens the same way:
+ * `const { contentWidth } = useLayout()` → `<View style={{ width: '100%', maxWidth: contentWidth, alignSelf: 'center' }}>`.
+ */
+export function useLayout(): Layout {
+  const { width, height, fontScale } = useWindowDimensions();
+  return useMemo(() => layoutFor(width, height, fontScale), [width, height, fontScale]);
+}
+
 /**
  * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
  * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.

package/registry/kit/files/src/lib/kit.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import { Platform, useColorScheme, type TextStyle } from 'react-native';
+import { Platform, useColorScheme, useWindowDimensions, type TextStyle, type ViewStyle } from 'react-native';
 
 /**
  * ExpoKit design tokens. Every component reads them through useKit(), so one
@@ -8,10 +8,10 @@ import { Platform, useColorScheme, type TextStyle } from 'react-native';
  */
 
 /**
- * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
- * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule,
+ * 3: useLayout / shadow). The CLI won't keep an edited kit.tsx older than the component being added needs.
  */
-export const KIT_VERSION = 2;
+export const KIT_VERSION = 3;
 
 export type ColorScheme = 'light' | 'dark';
 
@@ -58,6 +58,8 @@ export interface Theme {
   };
   /** 4pt spacing scale: space(4) === 16. */
   space: (n: number) => number;
+  /** The same soft shadow on iOS, Android and web: `style={[styles.card, shadow('md')]}`. */
+  shadow: (level: ShadowLevel, color?: string) => ViewStyle;
   font: { family?: string; mono: string };
   text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
 }
@@ -134,6 +136,7 @@ function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
       capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
     },
     space: (n) => n * 4,
+    shadow: (level, color) => shadowFor(level, scheme === 'dark', color),
     font: {
       family: overrides?.fontFamily,
       mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
@@ -181,6 +184,101 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
+export type ShadowLevel = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+const SHADOWS: Record<Exclude<ShadowLevel, 'none'>, [y: number, blur: number, opacity: number]> = {
+  sm: [1, 3, 0.08],
+  md: [4, 14, 0.1],
+  lg: [10, 30, 0.14],
+  xl: [18, 48, 0.2],
+};
+
+/**
+ * A shadow as `boxShadow`, which React Native (0.76+) draws identically on iOS, Android and web —
+ * unlike `elevation`, whose Android shadow looks nothing like the iOS one. Darker in dark mode so
+ * it still reads on near-black. `color` is a #rrggbb tint (default black).
+ */
+export function shadowFor(level: ShadowLevel, dark: boolean, color = '#000000'): ViewStyle {
+  if (level === 'none') return {};
+  const [y, blur, opacity] = SHADOWS[level];
+  const a = Math.min(0.6, dark ? opacity * 2.8 : opacity);
+  const full = color.length === 4 ? '#' + [...color.slice(1)].map((c) => c + c).join('') : color;
+  const n = parseInt(full.slice(1, 7), 16);
+  const [r, g, b] = Number.isNaN(n) ? [0, 0, 0] : [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return { boxShadow: `0px ${y}px ${blur}px rgba(${r},${g},${b},${+a.toFixed(3)})` };
+}
+
+/**
+ * Screen size classes, shared by every component so phones, foldables and tablets all get the
+ * right layout without any work from you. `compact` — phones (any orientation); `medium` — open
+ * foldables (Galaxy Z Fold, Pixel Fold), Surface Duo and small tablets; `expanded` — iPad and
+ * larger. Decided by the screen's short side, so a phone on its side stays a phone.
+ */
+export type SizeClass = 'compact' | 'medium' | 'expanded';
+
+export const breakpoints = { medium: 600, expanded: 840 };
+
+/** Widest a sheet / picker / popover card and a screen's content column get on big screens. */
+export const layoutLimits = { sheet: 560, content: 720, gutter: 24 };
+
+export function sizeClassOf(shortSide: number): SizeClass {
+  if (!(shortSide >= breakpoints.medium)) return 'compact';
+  return shortSide >= breakpoints.expanded ? 'expanded' : 'medium';
+}
+
+export interface Layout {
+  width: number;
+  height: number;
+  size: SizeClass;
+  /** Foldable, tablet or desktop — anything bigger than a phone. */
+  wide: boolean;
+  landscape: boolean;
+  fontScale: number;
+  /** Width for a bottom sheet, picker or action sheet: the full screen on a portrait phone, a centred card on anything wider. */
+  sheetWidth: number;
+  /** Width for a screen's main column (forms, feeds, blocks): full on phones, a readable centred column on tablets. */
+  contentWidth: number;
+  /** Grid columns that fit the current width: 1 phone, 2 foldable / landscape phone, 3 tablet. */
+  columns: number;
+  /** A value per size class; a missing one falls back to the next smaller: `pick({ compact: 16, expanded: 24 })`. */
+  pick: <T>(values: { compact: T; medium?: T; expanded?: T }) => T;
+}
+
+const finite = (n: number) => (Number.isFinite(n) && n > 0 ? n : 0);
+
+/** The layout for a window of `width` × `height` points (the pure part of useLayout). */
+export function layoutFor(rawWidth: number, rawHeight: number, fontScale = 1): Layout {
+  const width = finite(rawWidth);
+  const height = finite(rawHeight);
+  const size = sizeClassOf(Math.min(width, height || width));
+  const roomy = width >= breakpoints.medium;
+  const { sheet, content, gutter } = layoutLimits;
+  return {
+    width,
+    height,
+    size,
+    wide: size !== 'compact',
+    landscape: width > height,
+    fontScale,
+    sheetWidth: roomy ? Math.min(sheet, width - gutter * 2) : width,
+    contentWidth: roomy ? Math.min(content, width - gutter * 2) : width,
+    columns: width >= breakpoints.expanded + 160 ? 3 : roomy ? 2 : 1,
+    pick: (values) =>
+      (size === 'expanded' ? values.expanded ?? values.medium : size === 'medium' ? values.medium : undefined) ??
+      values.compact,
+  };
+}
+
+/**
+ * The current screen's layout; re-renders on rotation, split view, Stage Manager and fold / unfold.
+ * Components use it so they look right on every device; use it in your own screens the same way:
+ * `const { contentWidth } = useLayout()` → `<View style={{ width: '100%', maxWidth: contentWidth, alignSelf: 'center' }}>`.
+ */
+export function useLayout(): Layout {
+  const { width, height, fontScale } = useWindowDimensions();
+  return useMemo(() => layoutFor(width, height, fontScale), [width, height, fontScale]);
+}
+
 /**
  * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
  * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.

package/registry/liquidglass-tab/files/src/components/GlassTabBar.tsx

@@ -37,6 +37,8 @@ export function GlassTabBar({ state, navigation, insets }: BottomTabBarProps) {
   const activeTab = getTab(routes[activeIndex]?.name ?? '');
 
   const fullW = Math.min(screenW - 32, 520);
+  // Centre the capped bar on tablets and open foldables (phones keep the 16pt sides).
+  const side = Math.max(16, (screenW - fullW) / 2);
   const itemW = fullW / Math.max(routes.length, 1);
   const bubbleX = useRef(new Animated.Value(activeIndex * itemW)).current;
   const [collapsed, setCollapsed] = useState(false);
@@ -63,7 +65,7 @@ export function GlassTabBar({ state, navigation, insets }: BottomTabBarProps) {
   const dotScale = tabBarCollapse.interpolate({ inputRange: [0.55, 1], outputRange: [0.6, 1], extrapolate: 'clamp' });
 
   return (
-    <View pointerEvents="box-none" style={[styles.host, { bottom: Math.max(insets.bottom, 12) }]}>
+    <View pointerEvents="box-none" style={[styles.host, { left: side, right: side, bottom: Math.max(insets.bottom, 12) }]}>
       <Animated.View style={[styles.shadow, { width }]}>
         <View style={[styles.glass, { borderColor: isDark ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.7)' }]}>
           <BlurView
@@ -225,11 +227,8 @@ const styles = StyleSheet.create({
   shadow: {
     height: GLASS_BAR_HEIGHT,
     borderRadius: GLASS_BAR_HEIGHT / 2,
-    shadowColor: '#000',
-    shadowOpacity: 0.18,
-    shadowRadius: 22,
-    shadowOffset: { width: 0, height: 10 },
-    elevation: 12,
+    // boxShadow renders the same on iOS, Android (new arch) and web; elevation drew a grey Android shadow.
+    boxShadow: '0px 10px 22px rgba(0,0,0,0.18)',
   },
   glass: {
     flex: 1,
@@ -254,7 +253,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  badgeText: { color: '#fff', fontSize: 10, fontWeight: '400' },
+  badgeText: { color: '#fff', fontSize: 10, fontWeight: '400', includeFontPadding: false, textAlignVertical: 'center' },
   dot: { position: 'absolute', top: 0, left: 0, width: GLASS_BAR_HEIGHT, height: GLASS_BAR_HEIGHT },
   dotPress: { flex: 1, alignItems: 'center', justifyContent: 'center' },
 });

package/registry/liquidglass-tab/files/src/components/TabScreen.tsx

@@ -6,6 +6,7 @@ import {
   Text,
   View,
   useColorScheme,
+  useWindowDimensions,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -27,6 +28,12 @@ export function TabScreen({ title, description, accent, action }: TabScreenProps
   const bottomInset = useTabBarInset(24);
   // Bottom-anchored UI sits on top of the bar's footprint, not on the screen edge.
   const actionBottom = useTabBarInset(12);
+  // Phones: full width, one card per row. Tablets and open foldables: a centred column, two cards per row.
+  const { width } = useWindowDimensions();
+  const columnW = Math.min(width, COLUMN_MAX);
+  const side = Math.max(0, (width - columnW) / 2) + 20;
+  const columns = width >= 600 ? 2 : 1;
+  const cardW = columns > 1 ? (columnW - 40 - CARD_GAP * (columns - 1)) / columns : undefined;
   const bg = isDark ? '#0f0f1a' : '#f2f2f7';
   const text = isDark ? '#fff' : '#1c1c1e';
   const sub = isDark ? '#9898a8' : '#6c6c70';
@@ -38,6 +45,7 @@ export function TabScreen({ title, description, accent, action }: TabScreenProps
         contentContainerStyle={[
           styles.scroll,
           { paddingTop: insets.top + 12, paddingBottom: bottomInset },
+          { width: '100%', maxWidth: COLUMN_MAX, alignSelf: 'center' },
         ]}
         showsVerticalScrollIndicator={false}
         // Pad by hand on every bar: useTabBarInset() already counts the floating bar and home indicator.
@@ -54,27 +62,29 @@ export function TabScreen({ title, description, accent, action }: TabScreenProps
         <Text style={[styles.title, { color: text }]}>{title}</Text>
         <Text style={[styles.subtitle, { color: sub }]}>{description}</Text>
 
-        {SECTIONS.map((n) => (
-          <View
-            key={n}
-            style={[
-              styles.card,
-              { backgroundColor: isDark ? '#1c1c2e' : '#ffffff' },
-            ]}
-          >
-            <Text style={[styles.cardTitle, { color: text }]}>Section {n}</Text>
-            <Text style={[styles.cardSub, { color: sub }]}>
-              iOS 26+ gets the system Liquid Glass bar. Older iOS, Android and web get the
-              blur glass fallback — both merge into a glass circle when you scroll down.
-            </Text>
-          </View>
-        ))}
+        <View style={columns > 1 ? styles.grid : undefined}>
+          {SECTIONS.map((n) => (
+            <View
+              key={n}
+              style={[
+                styles.card,
+                { width: cardW, backgroundColor: isDark ? '#1c1c2e' : '#ffffff' },
+              ]}
+            >
+              <Text style={[styles.cardTitle, { color: text }]}>Section {n}</Text>
+              <Text style={[styles.cardSub, { color: sub }]}>
+                iOS 26+ gets the system Liquid Glass bar. Older iOS, Android and web get the
+                blur glass fallback — both merge into a glass circle when you scroll down.
+              </Text>
+            </View>
+          ))}
+        </View>
         {action ? <View style={{ height: 64 }} /> : null}
       </ScrollView>
       {action ? (
         <Pressable
           accessibilityRole="button"
-          style={({ pressed }) => [styles.action, { bottom: actionBottom, backgroundColor: accent, opacity: pressed ? 0.85 : 1 }]}
+          style={({ pressed }) => [styles.action, { left: side, right: side, bottom: actionBottom, backgroundColor: accent, opacity: pressed ? 0.85 : 1 }]}
         >
           <Text style={styles.actionText}>{action}</Text>
         </Pressable>
@@ -103,6 +113,9 @@ export function TabScreenFromConfig({ tabName, action }: { tabName: string; acti
 }
 
 const SECTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+/** Widest the screen's column gets on tablets. */
+const COLUMN_MAX = 720;
+const CARD_GAP = 10;
 
 const styles = StyleSheet.create({
   root: { flex: 1 },
@@ -127,6 +140,7 @@ const styles = StyleSheet.create({
   },
   title: { fontSize: 34, fontWeight: '400', letterSpacing: -0.5 },
   subtitle: { fontSize: 15, marginTop: 8, marginBottom: 20, lineHeight: 22 },
+  grid: { flexDirection: 'row', flexWrap: 'wrap', columnGap: CARD_GAP },
   card: {
     borderRadius: 14,
     padding: 16,
@@ -143,5 +157,5 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  actionText: { color: '#fff', fontSize: 16, fontWeight: '500' },
+  actionText: { color: '#fff', fontSize: 16, fontWeight: '500', includeFontPadding: false, textAlignVertical: 'center' },
 });

package/registry/list-item/files/src/components/ui/list-item.tsx

@@ -507,7 +507,7 @@ const styles = StyleSheet.create({
   value: { fontSize: 15, flexShrink: 1 },
   dot: { width: 9, height: 9, borderRadius: 5 },
   badge: { minWidth: 22, minHeight: 22, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center' },
-  badgeText: { fontSize: 12, fontWeight: '400', fontVariant: ['tabular-nums'] },
+  badgeText: { fontSize: 12, fontWeight: '400', fontVariant: ['tabular-nums'], includeFontPadding: false, textAlignVertical: 'center' },
   divider: { position: 'absolute', right: 0, bottom: 0, height: StyleSheet.hairlineWidth },
   avatar: { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
   online: { position: 'absolute', right: -1, bottom: -1, borderWidth: 2 },

package/registry/list-item/files/src/lib/kit.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import { Platform, useColorScheme, type TextStyle } from 'react-native';
+import { Platform, useColorScheme, useWindowDimensions, type TextStyle, type ViewStyle } from 'react-native';
 
 /**
  * ExpoKit design tokens. Every component reads them through useKit(), so one
@@ -8,10 +8,10 @@ import { Platform, useColorScheme, type TextStyle } from 'react-native';
  */
 
 /**
- * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
- * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule,
+ * 3: useLayout / shadow). The CLI won't keep an edited kit.tsx older than the component being added needs.
  */
-export const KIT_VERSION = 2;
+export const KIT_VERSION = 3;
 
 export type ColorScheme = 'light' | 'dark';
 
@@ -58,6 +58,8 @@ export interface Theme {
   };
   /** 4pt spacing scale: space(4) === 16. */
   space: (n: number) => number;
+  /** The same soft shadow on iOS, Android and web: `style={[styles.card, shadow('md')]}`. */
+  shadow: (level: ShadowLevel, color?: string) => ViewStyle;
   font: { family?: string; mono: string };
   text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
 }
@@ -134,6 +136,7 @@ function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
       capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
     },
     space: (n) => n * 4,
+    shadow: (level, color) => shadowFor(level, scheme === 'dark', color),
     font: {
       family: overrides?.fontFamily,
       mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
@@ -181,6 +184,101 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
+export type ShadowLevel = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+const SHADOWS: Record<Exclude<ShadowLevel, 'none'>, [y: number, blur: number, opacity: number]> = {
+  sm: [1, 3, 0.08],
+  md: [4, 14, 0.1],
+  lg: [10, 30, 0.14],
+  xl: [18, 48, 0.2],
+};
+
+/**
+ * A shadow as `boxShadow`, which React Native (0.76+) draws identically on iOS, Android and web —
+ * unlike `elevation`, whose Android shadow looks nothing like the iOS one. Darker in dark mode so
+ * it still reads on near-black. `color` is a #rrggbb tint (default black).
+ */
+export function shadowFor(level: ShadowLevel, dark: boolean, color = '#000000'): ViewStyle {
+  if (level === 'none') return {};
+  const [y, blur, opacity] = SHADOWS[level];
+  const a = Math.min(0.6, dark ? opacity * 2.8 : opacity);
+  const full = color.length === 4 ? '#' + [...color.slice(1)].map((c) => c + c).join('') : color;
+  const n = parseInt(full.slice(1, 7), 16);
+  const [r, g, b] = Number.isNaN(n) ? [0, 0, 0] : [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return { boxShadow: `0px ${y}px ${blur}px rgba(${r},${g},${b},${+a.toFixed(3)})` };
+}
+
+/**
+ * Screen size classes, shared by every component so phones, foldables and tablets all get the
+ * right layout without any work from you. `compact` — phones (any orientation); `medium` — open
+ * foldables (Galaxy Z Fold, Pixel Fold), Surface Duo and small tablets; `expanded` — iPad and
+ * larger. Decided by the screen's short side, so a phone on its side stays a phone.
+ */
+export type SizeClass = 'compact' | 'medium' | 'expanded';
+
+export const breakpoints = { medium: 600, expanded: 840 };
+
+/** Widest a sheet / picker / popover card and a screen's content column get on big screens. */
+export const layoutLimits = { sheet: 560, content: 720, gutter: 24 };
+
+export function sizeClassOf(shortSide: number): SizeClass {
+  if (!(shortSide >= breakpoints.medium)) return 'compact';
+  return shortSide >= breakpoints.expanded ? 'expanded' : 'medium';
+}
+
+export interface Layout {
+  width: number;
+  height: number;
+  size: SizeClass;
+  /** Foldable, tablet or desktop — anything bigger than a phone. */
+  wide: boolean;
+  landscape: boolean;
+  fontScale: number;
+  /** Width for a bottom sheet, picker or action sheet: the full screen on a portrait phone, a centred card on anything wider. */
+  sheetWidth: number;
+  /** Width for a screen's main column (forms, feeds, blocks): full on phones, a readable centred column on tablets. */
+  contentWidth: number;
+  /** Grid columns that fit the current width: 1 phone, 2 foldable / landscape phone, 3 tablet. */
+  columns: number;
+  /** A value per size class; a missing one falls back to the next smaller: `pick({ compact: 16, expanded: 24 })`. */
+  pick: <T>(values: { compact: T; medium?: T; expanded?: T }) => T;
+}
+
+const finite = (n: number) => (Number.isFinite(n) && n > 0 ? n : 0);
+
+/** The layout for a window of `width` × `height` points (the pure part of useLayout). */
+export function layoutFor(rawWidth: number, rawHeight: number, fontScale = 1): Layout {
+  const width = finite(rawWidth);
+  const height = finite(rawHeight);
+  const size = sizeClassOf(Math.min(width, height || width));
+  const roomy = width >= breakpoints.medium;
+  const { sheet, content, gutter } = layoutLimits;
+  return {
+    width,
+    height,
+    size,
+    wide: size !== 'compact',
+    landscape: width > height,
+    fontScale,
+    sheetWidth: roomy ? Math.min(sheet, width - gutter * 2) : width,
+    contentWidth: roomy ? Math.min(content, width - gutter * 2) : width,
+    columns: width >= breakpoints.expanded + 160 ? 3 : roomy ? 2 : 1,
+    pick: (values) =>
+      (size === 'expanded' ? values.expanded ?? values.medium : size === 'medium' ? values.medium : undefined) ??
+      values.compact,
+  };
+}
+
+/**
+ * The current screen's layout; re-renders on rotation, split view, Stage Manager and fold / unfold.
+ * Components use it so they look right on every device; use it in your own screens the same way:
+ * `const { contentWidth } = useLayout()` → `<View style={{ width: '100%', maxWidth: contentWidth, alignSelf: 'center' }}>`.
+ */
+export function useLayout(): Layout {
+  const { width, height, fontScale } = useWindowDimensions();
+  return useMemo(() => layoutFor(width, height, fontScale), [width, height, fontScale]);
+}
+
 /**
  * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
  * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.

package/registry/otp-input/files/src/components/ui/otp-input.tsx

@@ -403,7 +403,7 @@ const styles = StyleSheet.create({
   row: { flexDirection: 'row', gap: GAP, paddingHorizontal: 4, paddingVertical: 4, justifyContent: 'center', alignItems: 'center' },
   halo: { position: 'absolute', top: -4, left: -4, right: -4, bottom: -4 },
   cell: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-  char: { fontWeight: '400', fontVariant: ['tabular-nums'], textAlign: 'center' },
+  char: { fontWeight: '400', fontVariant: ['tabular-nums'], textAlign: 'center', includeFontPadding: false, textAlignVertical: 'center' },
   caret: { width: 2, borderRadius: 1 },
   sep: { alignItems: 'center', justifyContent: 'center' },
   dash: { width: 10, height: 2, borderRadius: 1, opacity: 0.6 },