@expokit/cli 0.4.3 → 0.4.4

package/registry/chip-group/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/confetti/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/coupon/files/src/components/ui/coupon.tsx

@@ -234,7 +234,7 @@ function CodeChip({ code, color, ink, fontSize, onCopy, labels, reduce }: { code
           <Rect x={0.75} y={0.75} width={box.w - 1.5} height={box.h - 1.5} rx={8} fill="none" stroke={alpha(color, 0.75)} strokeWidth={1.5} strokeDasharray={[5, 4]} />
         </Svg>
       ) : null}
-      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize, fontWeight: '800', letterSpacing: 1, flexShrink: 1 }, ff]}>
+      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize, fontWeight: '800', letterSpacing: 1, flexShrink: 1, includeFontPadding: false, textAlignVertical: 'center' }, ff]}>
         {code}
       </Text>
       {onCopy ? (
@@ -431,7 +431,7 @@ export function Coupon({
     left !== undefined && left > 0 && !spent ? (
       <View style={[styles.timer, { backgroundColor: timerBg }]}>
         <Icon d={ICON.clock} size={11} color={timerInk} />
-        <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: timerInk, fontSize: 10.5, fontWeight: '800', fontVariant: ['tabular-nums'] }, ff]}>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: timerInk, fontSize: 10.5, fontWeight: '800', fontVariant: ['tabular-nums'], includeFontPadding: false, textAlignVertical: 'center' }, ff]}>
           {labels.endsIn} {formatCountdown(left)}
         </Text>
       </View>
@@ -521,7 +521,7 @@ export function Coupon({
       ]}
     >
       {applied || locked ? <Icon d={applied ? ICON.check : ICON.lock} size={13} color={applied ? '#ffffff' : bodySoft} /> : null}
-      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: applied ? '#ffffff' : locked || spent ? bodySoft : readableOn(accent), fontSize: s.chip - 0.5, fontWeight: '800' }, ff]}>
+      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: applied ? '#ffffff' : locked || spent ? bodySoft : readableOn(accent), fontSize: s.chip - 0.5, fontWeight: '800', includeFontPadding: false, textAlignVertical: 'center' }, ff]}>
         {applied ? labels.applied : locked ? labels.locked : labels.apply}
       </Text>
     </Pressable>
@@ -679,9 +679,8 @@ export function Coupon({
         <View style={{ transform: [{ scale: pressed && !reduce ? 0.985 : 1 }] }}>
           {/* The plate waits for the painted outline (no black flash on mount), and a dimmed (used /
               expired) coupon is see-through, so it gets none. */}
-          {spent || !measured ? null : <View pointerEvents="none" style={[styles.shadow, { top: inset, bottom: inset - 4, left: inset, right: inset, borderRadius: v.r, shadowOpacity: dark ? 0.5 : 0.2 }]} />}
-          {/* Elevation above the shadow plate keeps the coupon on top on Android (no background → no shadow of its own). */}
-          <View style={{ elevation: 7 }}>{card}</View>
+          {spent || !measured ? null : <View pointerEvents="none" style={[styles.shadow, { top: inset, bottom: inset - 4, left: inset, right: inset, borderRadius: v.r, boxShadow: `0px 8px 28px rgba(0,0,0,${dark ? 0.5 : 0.2})` }]} />}
+          <View>{card}</View>
         </View>
       )}
     </Pressable>
@@ -717,9 +716,5 @@ const styles = StyleSheet.create({
   shadow: {
     position: 'absolute',
     backgroundColor: '#000',
-    shadowColor: '#000',
-    shadowRadius: 14,
-    shadowOffset: { width: 0, height: 8 },
-    elevation: 6,
   },
 });

package/registry/coupon/files/src/components/ui/flip-card.tsx

@@ -149,9 +149,7 @@ export function FlipCard({
       ) : null}
       {/* Faces live in their own (non-collapsing) layer: iOS intersects sibling layers in 3D, so a
           turning face next to the flat shadow plate would be sliced by it. */}
-      {/* On Android the wrapper carries the elevation that keeps the faces above the plate; the faces
-          get none, since a face turned in 3D would cast a warped shadow wedge below the card. */}
-      <View collapsable={false} style={{ elevation: shadow ? 23 : 0 }}>
+      <View collapsable={false}>
         {/* The hidden face stays mounted (for the turn) but is hidden from screen readers. */}
         <Animated.View
           style={[styles.face, face(frontTurn, frontOpacity)]}
@@ -214,11 +212,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     backgroundColor: '#000',
-    shadowColor: '#000',
-    shadowOpacity: 0.4,
-    shadowRadius: 20,
-    shadowOffset: { width: 0, height: 14 },
-    // High enough that Android's shadow spreads past the inset plate (iOS uses the shadow* props).
-    elevation: 22,
+    // boxShadow, not shadow* / elevation: the same soft shadow on iOS, Android and web.
+    boxShadow: '0px 14px 40px rgba(0,0,0,0.4)',
   },
 });

package/registry/coupon/files/src/components/ui/tilt-card.tsx

@@ -469,9 +469,8 @@ export function TiltCard({
       ) : null}
       {/* The card sits in its own (non-collapsing) layer: iOS intersects sibling layers in 3D, so a
           tilted card next to the flat shadow plate would be sliced by it along a diagonal. */}
-      {/* Android draws siblings by elevation, so the wrapper (not the card inside it) carries the
-          elevation that keeps it above the plate; with no background it casts no shadow itself. */}
-      <View collapsable={false} style={{ elevation: shadow ? 15 : 0 }}>
+      {/* The plate's shadow is a boxShadow (no elevation), so on Android too the card simply paints above it. */}
+      <View collapsable={false}>
         <Animated.View
           ref={viewRef}
           {...responder.panHandlers}
@@ -483,10 +482,8 @@ export function TiltCard({
           onAccessibilityAction={(e) => {
             if (e.nativeEvent.actionName === 'activate') onPressRef.current?.();
           }}
-          // elevation (no background → no extra shadow) keeps the card above its shadow plate on Android.
           style={{
             borderRadius: radius,
-            elevation: shadow ? 15 : 0,
             transform: [{ perspective }, { rotateX }, { rotateY }, { scale }],
           }}
         >
@@ -665,11 +662,8 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     backgroundColor: '#000',
-    shadowColor: '#000',
-    shadowOpacity: 0.45,
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: 16 },
-    elevation: 14,
+    // boxShadow draws the same soft shadow on iOS, Android and web.
+    boxShadow: '0px 16px 48px rgba(0,0,0,0.45)',
   },
   clip: { overflow: 'hidden' },
   window: { position: 'absolute', overflow: 'hidden' },

package/registry/coupon/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/date-picker/files/src/components/ui/calendar.tsx

@@ -839,7 +839,7 @@ const styles = StyleSheet.create({
   navs: { flexDirection: 'row', alignItems: 'center', gap: 6 },
   nav: { width: 32, height: 32, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
   todayBtn: { minHeight: 32, paddingHorizontal: 12, alignItems: 'center', justifyContent: 'center' },
-  todayText: { fontSize: 13, fontWeight: '400' },
+  todayText: { fontSize: 13, fontWeight: '400', includeFontPadding: false, textAlignVertical: 'center' },
   weekRow: { flexDirection: 'row', marginBottom: 6 },
   weekday: { flex: 1, textAlign: 'center', fontSize: 13, fontWeight: '400', letterSpacing: 0.2 },
   gridClip: { overflow: 'hidden' },
@@ -858,7 +858,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   fill: { borderWidth: 0 },
-  day: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },
+  day: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'], includeFontPadding: false, textAlignVertical: 'center' },
   dayStrong: { fontWeight: '400' },
   outside: { opacity: 0.4 },
   disabledText: { opacity: 0.35 },
@@ -867,5 +867,5 @@ const styles = StyleSheet.create({
   pickGrid: { flexDirection: 'row', flexWrap: 'wrap', alignContent: 'center', paddingTop: 4 },
   pickCell: { width: '33.333%', height: 56, alignItems: 'center', justifyContent: 'center' },
   pickInner: { minWidth: 76, minHeight: 40, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center', borderWidth: 1.5 },
-  pickText: { fontSize: 15, fontWeight: '400' },
+  pickText: { fontSize: 15, fontWeight: '400', includeFontPadding: false, textAlignVertical: 'center' },
 });

package/registry/date-picker/files/src/components/ui/date-picker.tsx

@@ -26,7 +26,7 @@ import {
   type CalendarProps,
   type DateRange,
 } from '@/components/ui/calendar';
-import { alpha, motion, readableOn, useKit } from '@/lib/kit';
+import { alpha, motion, readableOn, useKit, useLayout } from '@/lib/kit';
 
 export type { DateRange } from '@/components/ui/calendar';
 export type DatePickerSize = 'sm' | 'md' | 'lg';
@@ -244,6 +244,7 @@ export function DatePicker(props: DatePickerProps) {
     typeof userField.borderRadius === 'number' ? userField.borderRadius : size === 'sm' ? radius.md - 2 : size === 'lg' ? radius.lg : radius.md;
   const restIcon = iconColor ?? colors.mutedForeground;
   const { width: winW, height: winH } = useWindowDimensions();
+  const layout = useLayout();
   const ranged = mode === 'range';
   const reduce = useReduceMotion();
   // The pan responder is built once; it reads Reduce Motion through this ref.
@@ -273,8 +274,8 @@ export function DatePicker(props: DatePickerProps) {
   const check = useRef(new Animated.Value(ok ? 1 : 0)).current; // native
 
   const asSheet = presentation !== 'popover';
-  // Centred dialog instead of a bottom sheet.
-  const wide = presentation === 'dialog' || (presentation === 'auto' && winW >= 640);
+  // Centred dialog instead of a bottom sheet: on foldables, tablets and landscape phones.
+  const wide = presentation === 'dialog' || (presentation === 'auto' && (layout.wide || layout.landscape));
 
   useEffect(() => {
     if (reduce) {
@@ -661,7 +662,7 @@ export function DatePicker(props: DatePickerProps) {
                 { backgroundColor: colors.popover, borderColor: colors.border, maxHeight: winH * 0.92 },
                 wide
                   ? { width: Math.min(420, winW - 48), borderRadius: radius.xl, paddingBottom: 14 }
-                  : { alignSelf: 'stretch', borderTopLeftRadius: radius.xl + 4, borderTopRightRadius: radius.xl + 4, paddingBottom: 30 },
+                  : { width: layout.sheetWidth, alignSelf: 'center', borderTopLeftRadius: radius.xl + 4, borderTopRightRadius: radius.xl + 4, paddingBottom: 30 },
                 menuStyle,
                 wide
                   ? {
@@ -816,11 +817,8 @@ const styles = StyleSheet.create({
   centered: { justifyContent: 'center', alignItems: 'center' },
   sheet: {
     borderWidth: StyleSheet.hairlineWidth,
-    shadowColor: '#000',
-    shadowOpacity: 0.18,
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: -4 },
-    elevation: 16,
+    // boxShadow, not shadow* / elevation: the same soft shadow on iOS, Android and web.
+    boxShadow: '0px -4px 48px rgba(0,0,0,0.18)',
   },
   sheetHeader: { alignItems: 'center', flexShrink: 0, paddingTop: 10, paddingBottom: 8, paddingHorizontal: 16 },
   grabber: { width: 40, height: 5, borderRadius: 3, marginBottom: 12 },
@@ -830,21 +828,17 @@ const styles = StyleSheet.create({
   calendarScroll: { flexGrow: 0, flexShrink: 1 },
   presets: { gap: 8, paddingHorizontal: 16, paddingVertical: 8 },
   preset: { minHeight: 34, paddingHorizontal: 14, borderWidth: 1, alignItems: 'center', justifyContent: 'center' },
-  presetText: { fontSize: 13.5, fontWeight: '400' },
+  presetText: { fontSize: 13.5, fontWeight: '400', includeFontPadding: false, textAlignVertical: 'center' },
   calendar: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 6 },
   footer: { flexDirection: 'row', flexShrink: 0, gap: 8, paddingTop: 12, paddingHorizontal: 16, borderTopWidth: StyleSheet.hairlineWidth },
   footBtn: { minHeight: 46, paddingHorizontal: 20, alignItems: 'center', justifyContent: 'center' },
   footMain: { flex: 1 },
-  footText: { fontSize: 15, fontWeight: '400' },
+  footText: { fontSize: 15, fontWeight: '400', includeFontPadding: false, textAlignVertical: 'center' },
   popover: {
     position: 'absolute',
     paddingTop: 10,
     paddingBottom: 10,
     borderWidth: StyleSheet.hairlineWidth,
-    shadowColor: '#000',
-    shadowOpacity: 0.16,
-    shadowRadius: 20,
-    shadowOffset: { width: 0, height: 10 },
-    elevation: 14,
+    boxShadow: '0px 10px 40px rgba(0,0,0,0.16)',
   },
 });