react-native-terra-ui 0.13.2 → 0.13.4

package/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx

@@ -5,17 +5,23 @@ import Animated from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
 import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
+import { Text as ThemedText } from "../../../../text";
 import { isTextTitle } from "../../../utils";
 import type { LargeTitleHeaderProps } from "..";
 
 export function LargeTitleContent({
   title,
+  largeTitleVariant = "large-title",
+  largeTitleWeight,
   overline,
   subtitle,
   hasAccessoryBelow,
   onHeightChange,
   animatedStyle,
-}: Pick<LargeTitleHeaderProps, "title" | "overline" | "subtitle"> & {
+}: Pick<
+  LargeTitleHeaderProps,
+  "title" | "largeTitleVariant" | "largeTitleWeight" | "overline" | "subtitle"
+> & {
   /** Reserve a gap before a sticky accessory below this block. */
   hasAccessoryBelow: boolean;
   /** Reports the large-title block's layout height in dp. */
@@ -37,19 +43,16 @@ export function LargeTitleContent({
         </Text>
       )}
       {isTextTitle(title) ? (
-        <Text
-          style={styles.largeTitle}
-          maxFontSizeMultiplier={theme.typography.variants["headline-lg"].maxFontSizeMultiplier}
-        >
+        <ThemedText variant={largeTitleVariant} weight={largeTitleWeight}>
           {title}
-        </Text>
+        </ThemedText>
       ) : (
         title
       )}
       {!!subtitle && (
         <Text
           style={styles.subtitle}
-          maxFontSizeMultiplier={theme.typography.variants["body-lg"].maxFontSizeMultiplier}
+          maxFontSizeMultiplier={theme.typography.variants["body"].maxFontSizeMultiplier}
         >
           {subtitle}
         </Text>
@@ -64,10 +67,7 @@ const styles = StyleSheet.create((theme) => {
   const overlineWeight = theme.typography.variants["label-sm"].fontWeight;
   const overlineFont = theme.typography.fonts[overlineWeight];
   const isSystemOverlineFont = overlineFont === SYSTEM_FONT;
-  const titleWeight = theme.typography.variants["headline-lg"].fontWeight;
-  const titleFont = theme.typography.fonts[titleWeight];
-  const isSystemTitleFont = titleFont === SYSTEM_FONT;
-  const subtitleWeight = theme.typography.variants["body-lg"].fontWeight;
+  const subtitleWeight = theme.typography.variants["body"].fontWeight;
   const subtitleFont = theme.typography.fonts[subtitleWeight];
   const isSystemSubtitleFont = subtitleFont === SYSTEM_FONT;
 
@@ -86,18 +86,10 @@ const styles = StyleSheet.create((theme) => {
       fontWeight: isSystemOverlineFont ? FONT_WEIGHT_VALUE[overlineWeight] : undefined,
       color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
     },
-    largeTitle: {
-      fontSize: theme.typography.variants["headline-lg"].fontSize,
-      lineHeight: theme.typography.variants["headline-lg"].lineHeight,
-      letterSpacing: theme.typography.variants["headline-lg"].letterSpacing,
-      fontFamily: isSystemTitleFont ? undefined : titleFont,
-      fontWeight: isSystemTitleFont ? FONT_WEIGHT_VALUE[titleWeight] : undefined,
-      color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
-    },
     subtitle: {
-      fontSize: theme.typography.variants["body-lg"].fontSize,
-      lineHeight: theme.typography.variants["body-lg"].lineHeight,
-      letterSpacing: theme.typography.variants["body-lg"].letterSpacing,
+      fontSize: theme.typography.variants["body"].fontSize,
+      lineHeight: theme.typography.variants["body"].lineHeight,
+      letterSpacing: theme.typography.variants["body"].letterSpacing,
       fontFamily: isSystemSubtitleFont ? undefined : subtitleFont,
       fontWeight: isSystemSubtitleFont ? FONT_WEIGHT_VALUE[subtitleWeight] : undefined,
       color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",

package/src/components/header/variants/TitleHeader/index.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 
 import { StyleSheet } from "react-native-unistyles";
 
-import type { ColorToken } from "#theme/types";
+import type { ColorToken, FontWeightToken, TextVariant } from "#theme/types";
 import { useHeaderBackground } from "../../../screen/parts/ScreenHeaderAppearance";
 import { ScreenContext } from "../../../screen/ScreenContext";
 import type { HeaderDismissProps } from "../../header-buttons";
@@ -19,6 +19,13 @@ export interface TitleHeaderProps extends HeaderDismissProps {
    * the header only places it according to `titleAlignment`.
    */
   title?: ReactNode;
+  /**
+   * Typography variant for a text title in the compact bar. Defaults to
+   * `'headline'`. Ignored when `title` is a custom node.
+   */
+  titleVariant?: TextVariant;
+  /** Font weight for a text title in the compact bar. Defaults to the variant's weight. */
+  titleWeight?: FontWeightToken;
   /** Optional secondary line shown under the title, in the `label-sm` style. */
   subtitle?: string;
   /**
@@ -58,6 +65,8 @@ export interface TitleHeaderProps extends HeaderDismissProps {
 /** Compact header. Screen owns the safe area when present; standalone headers reserve it here. */
 export function TitleHeader({
   title,
+  titleVariant,
+  titleWeight,
   subtitle,
   leadingActions,
   trailingActions,
@@ -79,6 +88,8 @@ export function TitleHeader({
       <HeaderBar
         {...dismissProps}
         title={title}
+        titleVariant={titleVariant}
+        titleWeight={titleWeight}
         subtitle={subtitle}
         titleAlignment={titleAlignment}
         color={color}

package/src/components/image/Image.tsx

@@ -5,6 +5,7 @@ import { StyleSheet } from "react-native-unistyles";
 import { getImageComponent } from "#theme/registry";
 import type { RadiusKey } from "#theme/types";
 import type { ImageProps } from "./types";
+import { toAspectRatio } from "./utils";
 
 /**
  * Renders the image implementation configured via
@@ -14,8 +15,8 @@ import type { ImageProps } from "./types";
  * ```tsx
  * <Image
  *   source={{ uri: 'https://example.com/photo.jpg' }}
- *   contentFit="cover"
- *   style={{ width: 40, height: 40 }}
+ *   width={320}
+ *   aspect="16:9"
  * />
  * ```
  */
@@ -23,6 +24,7 @@ export function Image({
   contentFit = "cover",
   width,
   height,
+  aspect,
   radius = "none",
   style,
   // Defaults to `contentFit` here (rather than leaving it to each backend's
@@ -34,7 +36,7 @@ export function Image({
   const ImageComponent = getImageComponent();
 
   return (
-    <View style={[styles.container(width, height, radius), style]}>
+    <View style={[styles.container(width, height, toAspectRatio(aspect), radius), style]}>
       <ImageComponent
         contentFit={contentFit}
         placeholderContentFit={placeholderContentFit}
@@ -46,9 +48,10 @@ export function Image({
 }
 
 const styles = StyleSheet.create((_theme) => ({
-  container: (w: number | undefined, h: number | undefined, r: RadiusKey) => ({
+  container: (w: number | undefined, h: number | undefined, ratio: number | undefined, r: RadiusKey) => ({
     ...(w ? { width: w } : {}),
     ...(h ? { height: h } : {}),
+    ...(ratio ? { aspectRatio: ratio } : {}),
     borderRadius: _theme.radius[r],
     overflow: "hidden",
   }),

package/src/components/image/index.ts

@@ -1,2 +1,2 @@
 export { Image } from "./Image";
-export type { ImageProps } from "./types";
+export type { ImageAspect, ImageProps } from "./types";

package/src/components/image/types.ts

@@ -1,7 +1,15 @@
 import type { RadiusKey, TerraImageProps } from "#theme/types";
 
+/** Width-to-height ratio. A number is used as is; `"3:4"` means 3 wide by 4 tall. */
+export type ImageAspect = number | "1:1" | "3:4" | "16:9";
+
 export interface ImageProps extends TerraImageProps {
   width?: number;
   height?: number;
+  /**
+   * Ratio that derives the missing dimension from the one given. Ignored when
+   * both `width` and `height` are set.
+   */
+  aspect?: ImageAspect;
   radius?: RadiusKey;
 }

package/src/components/image/utils.ts

@@ -0,0 +1,11 @@
+import type { ImageAspect } from "./types";
+
+const PRESET_RATIOS: Record<Exclude<ImageAspect, number>, number> = {
+  "1:1": 1,
+  "3:4": 3 / 4,
+  "16:9": 16 / 9,
+};
+
+export function toAspectRatio(aspect: ImageAspect | undefined) {
+  return typeof aspect === "string" ? PRESET_RATIOS[aspect] : aspect;
+}

package/src/components/input/parts/InputField.tsx

@@ -9,10 +9,10 @@ import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
 import type { InputBaseProps, InputSize } from "../types";
 
 /** Typographic role of the text, per size. */
-const TEXT_VARIANT: Record<InputSize, "body-sm" | "body-md" | "body-lg"> = {
-  sm: "body-sm",
-  md: "body-md",
-  lg: "body-lg",
+const TEXT_VARIANT: Record<InputSize, "subheadline" | "callout" | "body"> = {
+  sm: "subheadline",
+  md: "callout",
+  lg: "body",
 };
 
 /**

package/src/components/screen/ScreenContext.tsx

@@ -78,6 +78,14 @@ export interface ScreenContextValue {
    * accessory; zero releases the reserved space.
    */
   setHeaderAccessoryHeight: (height: number) => void;
+  /**
+   * Whether the header renders a large title in the scroll content. The large
+   * title then stands in for the content's top padding: scroll containers start
+   * it directly under the bar, and the padding is paid below it instead.
+   */
+  hasLargeTitle: boolean;
+  /** Reported by the header that renders the large title; false releases it. */
+  setHasLargeTitle: (value: boolean) => void;
   /**
    * Primary scroll container's resolved top padding in dp, including header clearance.
    * Used to position a sticky accessory below the large title at scroll offset zero.
@@ -149,6 +157,7 @@ export function ScreenScrollProvider({
 }: ScreenScrollProviderProps) {
   const scrollY = useSharedValue(0);
   const [headerAccessoryHeight, setAccessoryHeight] = useState(0);
+  const [hasLargeTitle, setHasLargeTitle] = useState(false);
   const [contentTopPadding, setTopPadding] = useState(0);
   const headerCollapseHeight = useSharedValue(0);
   const [headerSnapOffsets, setHeaderSnapOffsets] = useState<number[]>();
@@ -191,6 +200,8 @@ export function ScreenScrollProvider({
       hasHeader,
       headerAccessoryHeight,
       setHeaderAccessoryHeight,
+      hasLargeTitle,
+      setHasLargeTitle,
       contentTopPadding,
       setContentTopPadding,
       scrollY,
@@ -210,6 +221,7 @@ export function ScreenScrollProvider({
       hasHeader,
       headerAccessoryHeight,
       setHeaderAccessoryHeight,
+      hasLargeTitle,
       contentTopPadding,
       setContentTopPadding,
       scrollY,

package/src/components/screen/ScreenList.tsx

@@ -182,6 +182,7 @@ const ScreenListBase = forwardRef(function ScreenList(
     contentPadding: screenPadding,
     hasHeader,
     headerAccessoryHeight,
+    hasLargeTitle,
     setContentTopPadding,
     contentOwnsBottomInset,
     platformAdjustsInsets,
@@ -196,7 +197,7 @@ const ScreenListBase = forwardRef(function ScreenList(
   const { y: paddingY } = resolveScreenPadding(theme, rt.breakpoint);
   const defaultTopPadding =
     (hasHeader ? theme.layout.header.height + headerAccessoryHeight : 0) +
-    (hasVerticalPadding(resolvedPadding) ? paddingY : 0);
+    (hasVerticalPadding(resolvedPadding) && !hasLargeTitle ? paddingY : 0);
   const paddingTopOverride = NativeStyleSheet.flatten(contentContainerStyle)?.paddingTop;
   const contentTopPadding = typeof paddingTopOverride === "number" ? paddingTopOverride : defaultTopPadding;
   // ListHeaderComponent is wrapped by the list, so its local layout.y excludes
@@ -245,7 +246,14 @@ const ScreenListBase = forwardRef(function ScreenList(
       automaticallyAdjustContentInsets={false}
       automaticallyAdjustsScrollIndicatorInsets={false}
       contentContainerStyle={[
-        styles.content(resolvedPadding, hasHeader, bottomInset, extraBottomPadding, headerAccessoryHeight),
+        styles.content(
+          resolvedPadding,
+          hasHeader,
+          hasLargeTitle,
+          bottomInset,
+          extraBottomPadding,
+          headerAccessoryHeight
+        ),
         contentContainerStyle,
       ]}
       ListHeaderComponent={header}
@@ -285,6 +293,7 @@ const styles = StyleSheet.create((theme, runtime) => ({
   content: (
     padding: ScreenContentPadding,
     hasHeader: boolean,
+    hasLargeTitle: boolean,
     bottomInset: number | undefined,
     extraBottomPadding: number,
     accessoryHeight: number
@@ -293,9 +302,11 @@ const styles = StyleSheet.create((theme, runtime) => ({
     return {
       flexGrow: 1,
       // The theme height covers the bar; an accessory pinned under it is extra.
+      // A large title takes the place of the top padding, which the header
+      // content host pays below it instead (see ScreenHeaderContent).
       paddingTop:
         (hasHeader ? theme.layout.header.height + accessoryHeight : 0) +
-        (hasVerticalPadding(padding) ? y : 0),
+        (hasVerticalPadding(padding) && !hasLargeTitle ? y : 0),
       paddingHorizontal: hasHorizontalPadding(padding) ? x : 0,
       paddingBottom: (bottomInset ?? (hasVerticalPadding(padding) ? y : 0)) + extraBottomPadding,
     };

package/src/components/screen/ScreenScrollView.tsx

@@ -79,6 +79,7 @@ export const ScreenScrollView = forwardRef<ComponentRef<typeof ScrollView>, Scre
       contentPadding: screenPadding,
       hasHeader,
       headerAccessoryHeight,
+      hasLargeTitle,
       setContentTopPadding,
       background,
       contentOwnsBottomInset,
@@ -119,7 +120,13 @@ export const ScreenScrollView = forwardRef<ComponentRef<typeof ScrollView>, Scre
         showsVerticalScrollIndicator={false}
         scrollEventThrottle={16}
         contentContainerStyle={[
-          styles.scrollContent(hasHeader, resolvedPadding, extraBottomPadding, headerAccessoryHeight),
+          styles.scrollContent(
+            hasHeader,
+            hasLargeTitle,
+            resolvedPadding,
+            extraBottomPadding,
+            headerAccessoryHeight
+          ),
           contentContainerStyle,
         ]}
         {...rest}
@@ -140,6 +147,7 @@ ScreenScrollView.displayName = "Screen.ScrollView";
 const styles = StyleSheet.create((theme, runtime) => ({
   scrollContent: (
     hasHeader: boolean,
+    hasLargeTitle: boolean,
     padding: ScreenContentPadding,
     extraBottomPadding: number,
     accessoryHeight: number
@@ -148,9 +156,11 @@ const styles = StyleSheet.create((theme, runtime) => ({
     return {
       flexGrow: 1,
       // The theme height covers the bar; an accessory pinned under it is extra.
+      // A large title takes the place of the top padding, which the header
+      // content host pays below it instead (see ScreenHeaderContent).
       paddingTop:
         (hasHeader ? theme.layout.header.height + accessoryHeight : 0) +
-        (hasVerticalPadding(padding) ? y : 0),
+        (hasVerticalPadding(padding) && !hasLargeTitle ? y : 0),
       paddingHorizontal: hasHorizontalPadding(padding) ? x : 0,
       paddingBottom: (hasVerticalPadding(padding) ? y : 0) + extraBottomPadding,
     };

package/src/components/screen/parts/ScreenHeaderContent.tsx

@@ -9,7 +9,11 @@ import { SCREEN_HEADER_PORTAL_HOST } from "../ScreenContext";
 import type { ScreenContentPadding } from "../types";
 import { hasVerticalPadding } from "../utils";
 
-/** Separates the large title and sticky accessory from the screen body. */
+/**
+ * Hosts the large title and sticky accessory at the top of the scroll content.
+ * While it has content it pays the content's vertical padding below itself; the
+ * scroll container skips that padding above it (see `hasLargeTitle`).
+ */
 export function ScreenHeaderContent({ contentPadding }: { contentPadding: ScreenContentPadding }) {
   const [hasContent, setHasContent] = useState(false);
   const handleLayout = useCallback((event: LayoutChangeEvent) => {

package/src/components/surface/Surface.tsx

@@ -64,7 +64,7 @@ const resolveElevation = (variant: SurfaceVariant, elevation?: ElevationKey): El
  * @example
  * ```tsx
  * <Surface variant="raised" elevation="md" p="4" radius="lg">
- *   <Text variant="title-sm">Card title</Text>
+ *   <Text variant="headline">Card title</Text>
  * </Surface>
  * ```
  */

package/src/components/text/Text.tsx

@@ -7,6 +7,7 @@ import type {
   ColorToken,
   FontWeightToken,
   HeadingTextVariant,
+  LegacyTextVariant,
   RoleTextVariant,
   TextVariant,
 } from "#theme/types";
@@ -17,22 +18,40 @@ import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
 export type TextAlign = "left" | "center" | "right" | "justify";
 
 const HEADING_VARIANT_ALIAS: Record<HeadingTextVariant, RoleTextVariant> = {
-  h1: "headline-lg",
-  h2: "headline-md",
-  h3: "headline-sm",
-  h4: "title-lg",
-  h5: "title-md",
-  h6: "title-sm",
+  h1: "large-title",
+  h2: "title-1",
+  h3: "title-2",
+  h4: "title-3",
+  h5: "headline",
+  h6: "callout",
 };
 
+// Pre-0.14 names, mapped to the nearest role on the iOS-style scale. Only the
+// name is aliased; a legacy variant takes the new role's weight and cap.
+const LEGACY_VARIANT_ALIAS: Record<LegacyTextVariant, RoleTextVariant> = {
+  "display-lg": "display",
+  "display-md": "display",
+  "display-sm": "large-title",
+  "headline-lg": "title-1",
+  "headline-md": "title-2",
+  "headline-sm": "title-2",
+  "title-lg": "title-3",
+  "title-md": "headline",
+  "title-sm": "headline",
+  "body-lg": "body",
+  "body-md": "body",
+  "body-sm": "subheadline",
+  caption: "caption-1",
+};
+
+const VARIANT_ALIAS: Record<string, RoleTextVariant> = { ...HEADING_VARIANT_ALIAS, ...LEGACY_VARIANT_ALIAS };
+
 function resolveTextVariant(variant: TextVariant): RoleTextVariant {
-  return variant in HEADING_VARIANT_ALIAS
-    ? HEADING_VARIANT_ALIAS[variant as HeadingTextVariant]
-    : (variant as RoleTextVariant);
+  return VARIANT_ALIAS[variant] ?? (variant as RoleTextVariant);
 }
 
 export interface TextProps extends RNTextProps {
-  /** Typographic role. Defaults to `body-md`. */
+  /** Typographic role. Defaults to `body`. */
   variant?: TextVariant;
   /** Semantic color token (e.g. `text.secondary`, `danger.soft.fg`). */
   color?: ColorToken;
@@ -53,7 +72,7 @@ export interface TextProps extends RNTextProps {
  */
 export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(
   {
-    variant = "body-md",
+    variant = "body",
     color,
     weight,
     align,

package/src/components/toast/Toast.tsx

@@ -187,7 +187,7 @@ const ToastTitle = forwardRef<ComponentRef<typeof Text>, ToastTitleProps>(functi
 export interface ToastDescriptionProps extends TextProps {}
 
 const ToastDescription = forwardRef<ComponentRef<typeof Text>, ToastDescriptionProps>(
-  function ToastDescription({ color, nativeID, variant = "body-sm", ...rest }, ref) {
+  function ToastDescription({ color, nativeID, variant = "subheadline", ...rest }, ref) {
     const { theme } = useUnistyles();
     const { nativeID: rootNativeID, variant: toastVariant } = useToastContext();
     const colors = getToastColors(toastVariant, theme);

package/src/components/toolbar/Toolbar.tsx

@@ -207,14 +207,14 @@ function renderLabel(children: ReactNode, tint: ColorToken): ReactNode {
   return Children.map(children, (child) => {
     if (typeof child === "string") {
       return child.trim().length > 0 ? (
-        <Text variant={LABEL_VARIANT} color={tint} weight="bold">
+        <Text variant={LABEL_VARIANT} color={tint} weight="medium">
           {child}
         </Text>
       ) : null;
     }
     if (typeof child === "number") {
       return (
-        <Text variant={LABEL_VARIANT} color={tint} weight="bold">
+        <Text variant={LABEL_VARIANT} color={tint} weight="medium">
           {child}
         </Text>
       );