react-native-terra-ui 0.5.1 → 0.7.0

package/src/components/empty-state/EmptyState.tsx

@@ -1,15 +1,14 @@
-import { type ComponentRef, forwardRef, type ReactNode } from 'react';
-import { View, type ViewProps } from 'react-native';
+import { type ComponentRef, forwardRef, type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
 
-import { StyleSheet } from 'react-native-unistyles';
+import { StyleSheet } from "react-native-unistyles";
 
-import type { ColorToken, TerraIconName, TextVariant } from '#theme/types';
+import type { ColorToken, TerraIconName, TextVariant } from "#theme/types";
+import { Icon } from "../icon";
+import { Text } from "../text";
+import type { EmptyStateSize } from "./types";
 
-import { Icon } from '../icon';
-import { Text } from '../text';
-import type { EmptyStateSize } from './types';
-
-export interface EmptyStateProps extends Omit<ViewProps, 'children'> {
+export interface EmptyStateProps extends Omit<ViewProps, "children"> {
   /** Icon rendered in the circular badge above the title. */
   icon?: TerraIconName;
   /** Icon tint. Defaults to `text.subtle`. */
@@ -41,13 +40,10 @@ export interface EmptyStateProps extends Omit<ViewProps, 'children'> {
 // they stay plain tables here; everything that is a style is a unistyles
 // variant below.
 
-const TYPOGRAPHY: Record<
-  EmptyStateSize,
-  { title: TextVariant; description: TextVariant }
-> = {
-  sm: { title: 'title-sm', description: 'body-sm' },
-  md: { title: 'title-md', description: 'body-md' },
-  lg: { title: 'title-lg', description: 'body-lg' },
+const TYPOGRAPHY: Record<EmptyStateSize, { title: TextVariant; description: TextVariant }> = {
+  sm: { title: "title-sm", description: "body-sm" },
+  md: { title: "title-md", description: "body-md" },
+  lg: { title: "title-lg", description: "body-lg" },
 };
 
 const ICON_SIZE: Record<EmptyStateSize, number> = {
@@ -57,14 +53,9 @@ const ICON_SIZE: Record<EmptyStateSize, number> = {
 };
 
 /** Wraps a bare string/number in the slot's themed `Text`; elements pass through. */
-function renderSlot(
-  node: ReactNode,
-  wrap: (value: ReactNode) => ReactNode
-): ReactNode {
+function renderSlot(node: ReactNode, wrap: (value: ReactNode) => ReactNode): ReactNode {
   if (node === null || node === undefined || node === false) return null;
-  return typeof node === 'string' || typeof node === 'number'
-    ? wrap(node)
-    : node;
+  return typeof node === "string" || typeof node === "number" ? wrap(node) : node;
 }
 
 /**
@@ -81,18 +72,15 @@ function renderSlot(
  * />
  * ```
  */
-export const EmptyState = forwardRef<
-  ComponentRef<typeof View>,
-  EmptyStateProps
->(function EmptyState(
+export const EmptyState = forwardRef<ComponentRef<typeof View>, EmptyStateProps>(function EmptyState(
   {
     icon,
-    iconColor = 'text.default',
+    iconColor = "text.default",
     media,
     title,
     description,
     action,
-    size = 'md',
+    size = "md",
     fill = false,
     style,
     ...rest
@@ -119,11 +107,7 @@ export const EmptyState = forwardRef<
           </Text>
         ))}
         {renderSlot(description, (value) => (
-          <Text
-            variant={typography.description}
-            color="text.subtle"
-            align="center"
-          >
+          <Text variant={typography.description} color="text.subtle" align="center">
             {value}
           </Text>
         ))}
@@ -143,66 +127,66 @@ export const EmptyState = forwardRef<
 // width/height, which keeps it a perfect circle on the spacing scale.
 const styles = StyleSheet.create((theme) => ({
   root: {
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     variants: {
       // `alignSelf` matters as much as `flex` here: a column parent hands its
       // children the cross-axis size of their content unless they stretch, so
       // without it the state would fill the height and still be pinned to the
       // width of its longest line.
       fill: {
-        true: { flex: 1, alignSelf: 'stretch' },
+        true: { flex: 1, alignSelf: "stretch" },
         false: {},
       },
       size: {
         sm: {
-          gap: theme.spacing['2'],
-          paddingVertical: theme.spacing['4'],
-          paddingHorizontal: theme.spacing['4'],
+          gap: theme.spacing["2"],
+          paddingVertical: theme.spacing["4"],
+          paddingHorizontal: theme.spacing["4"],
         },
         md: {
-          gap: theme.spacing['3'],
-          paddingVertical: theme.spacing['6'],
-          paddingHorizontal: theme.spacing['6'],
+          gap: theme.spacing["3"],
+          paddingVertical: theme.spacing["6"],
+          paddingHorizontal: theme.spacing["6"],
         },
         lg: {
-          gap: theme.spacing['4'],
-          paddingVertical: theme.spacing['8'],
-          paddingHorizontal: theme.spacing['6'],
+          gap: theme.spacing["4"],
+          paddingVertical: theme.spacing["8"],
+          paddingHorizontal: theme.spacing["6"],
         },
       },
     },
   },
   iconBadge: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.color['action.bg.primary.subtle'],
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color["action.bg.primary.subtle"],
     borderRadius: theme.radius.full,
     variants: {
       size: {
-        sm: { padding: theme.spacing['3'] },
-        md: { padding: theme.spacing['4'] },
-        lg: { padding: theme.spacing['5'] },
+        sm: { padding: theme.spacing["3"] },
+        md: { padding: theme.spacing["4"] },
+        lg: { padding: theme.spacing["5"] },
       },
     },
   },
   text: {
-    alignItems: 'center',
+    alignItems: "center",
     variants: {
       size: {
-        sm: { gap: theme.spacing['1'] },
-        md: { gap: theme.spacing['1'] },
-        lg: { gap: theme.spacing['2'] },
+        sm: { gap: theme.spacing["1"] },
+        md: { gap: theme.spacing["1"] },
+        lg: { gap: theme.spacing["2"] },
       },
     },
   },
   actions: {
-    alignItems: 'center',
+    alignItems: "center",
     variants: {
       size: {
-        sm: { gap: theme.spacing['2'], marginTop: theme.spacing['1'] },
-        md: { gap: theme.spacing['3'], marginTop: theme.spacing['2'] },
-        lg: { gap: theme.spacing['3'], marginTop: theme.spacing['2'] },
+        sm: { gap: theme.spacing["2"], marginTop: theme.spacing["1"] },
+        md: { gap: theme.spacing["3"], marginTop: theme.spacing["2"] },
+        lg: { gap: theme.spacing["3"], marginTop: theme.spacing["2"] },
       },
     },
   },

package/src/components/empty-state/index.ts

@@ -1,3 +1,3 @@
-export type { EmptyStateProps } from './EmptyState';
-export { EmptyState } from './EmptyState';
-export type { EmptyStateSize } from './types';
+export type { EmptyStateProps } from "./EmptyState";
+export { EmptyState } from "./EmptyState";
+export type { EmptyStateSize } from "./types";

package/src/components/empty-state/types.ts

@@ -2,4 +2,4 @@
  * Overall scale of an empty state — drives the icon size, the typography of the
  * title/description, and the spacing between them.
  */
-export type EmptyStateSize = 'sm' | 'md' | 'lg';
+export type EmptyStateSize = "sm" | "md" | "lg";

package/src/components/header/Header.ts

@@ -1,5 +1,5 @@
-import { LargeTitleHeader } from './variants/LargeTitleHeader';
-import { TitleHeader } from './variants/TitleHeader';
+import { LargeTitleHeader } from "./variants/LargeTitleHeader";
+import { TitleHeader } from "./variants/TitleHeader";
 
 /**
  * Composite header namespace.

package/src/components/header/header-buttons.tsx

@@ -1,6 +1,5 @@
-import type { TerraSemanticIconName } from '#theme/types';
-
-import { Toolbar, type ToolbarButtonProps } from '../toolbar';
+import type { TerraSemanticIconName } from "#theme/types";
+import { Toolbar, type ToolbarButtonProps } from "../toolbar";
 
 /**
  * @deprecated Use {@link Toolbar.Button}. `HeaderButton` is an alias kept for
@@ -30,7 +29,7 @@ export type HeaderButtonProps = ToolbarButtonProps;
  */
 export const HeaderButton = Toolbar.Button;
 
-export type HeaderDismissAction = 'back' | 'close' | 'none';
+export type HeaderDismissAction = "back" | "close" | "none";
 
 export interface HeaderDismissNavigation {
   canGoBack?: () => boolean;
@@ -47,21 +46,14 @@ export interface HeaderDismissProps {
   navigation?: HeaderDismissNavigation;
 }
 
-const getDismissAccessibilityLabel = (
-  dismissAction: HeaderDismissAction
-): string => (dismissAction === 'close' ? 'Close' : 'Back');
+const getDismissAccessibilityLabel = (dismissAction: HeaderDismissAction): string =>
+  dismissAction === "close" ? "Close" : "Back";
 
-const getDismissIconName = (
-  dismissAction: HeaderDismissAction
-): TerraSemanticIconName =>
-  dismissAction === 'close' ? 'navigation.close' : 'navigation.back';
+const getDismissIconName = (dismissAction: HeaderDismissAction): TerraSemanticIconName =>
+  dismissAction === "close" ? "navigation.close" : "navigation.back";
 
-export function HeaderDismissButton({
-  dismissAction = 'none',
-  navigation,
-  onDismiss,
-}: HeaderDismissProps) {
-  if (dismissAction === 'none') return null;
+export function HeaderDismissButton({ dismissAction = "none", navigation, onDismiss }: HeaderDismissProps) {
+  if (dismissAction === "none") return null;
 
   const handlePress = () => {
     if (onDismiss) {
@@ -69,7 +61,7 @@ export function HeaderDismissButton({
       return;
     }
 
-    if (dismissAction === 'close' && navigation?.dismiss) {
+    if (dismissAction === "close" && navigation?.dismiss) {
       navigation.dismiss();
       return;
     }

package/src/components/header/index.ts

@@ -1,4 +1,4 @@
-export { Header } from './Header';
+export { Header } from "./Header";
 export {
   HeaderButton,
   type HeaderButtonProps,
@@ -6,8 +6,8 @@ export {
   HeaderDismissButton,
   type HeaderDismissNavigation,
   type HeaderDismissProps,
-} from './header-buttons';
-export type { LargeTitleHeaderProps } from './variants/LargeTitleHeader';
-export { LargeTitleHeader } from './variants/LargeTitleHeader';
-export type { TitleHeaderProps } from './variants/TitleHeader';
-export { TitleHeader } from './variants/TitleHeader';
+} from "./header-buttons";
+export type { LargeTitleHeaderProps } from "./variants/LargeTitleHeader";
+export { LargeTitleHeader } from "./variants/LargeTitleHeader";
+export type { TitleHeaderProps } from "./variants/TitleHeader";
+export { TitleHeader } from "./variants/TitleHeader";

package/src/components/header/parts/HeaderGradientOverlay.tsx

@@ -1,17 +1,82 @@
-import { useId } from 'react';
-import Svg, {
-  Defs,
-  Rect,
-  Stop,
-  LinearGradient as SvgLinearGradient,
-} from 'react-native-svg';
+import { useId } from "react";
+
+import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "react-native-svg";
+
+/**
+ * How far the overlay extends below the bar's bottom edge, in dp.
+ *
+ * The fade needs more room than the bar alone can give it: confined to the bar,
+ * the curve has to be steep enough to read as a band. Overhanging lets the tail
+ * finish in open space, so the header releases content instead of cutting it.
+ */
+export const HEADER_FADE_EXTENT = 22;
+
+/**
+ * Where the fade begins, as a fraction of the overlay's height — the bar plus
+ * {@link HEADER_FADE_EXTENT}.
+ *
+ * Sits inside the bar rather than at its bottom edge, so the tint has already
+ * begun thinning before content reaches the boundary. That is the trade this
+ * value makes: a longer, gentler ramp, paid for with content being faintly
+ * visible through the lower part of the bar.
+ */
+const FADE_START = 0.45;
+
+/**
+ * Stops used to approximate the fade curve. Below ~10 the ramp shows as a series
+ * of bands on an 8-bit display; above ~14 the extra stops cost SVG parse time
+ * with nothing visible in return.
+ */
+const FADE_STOPS = 12;
+
+/** Ceiling on the fade's opacity — see {@link alphaAt}. */
+const MAX_FADE_ALPHA = 0.95;
+
+/**
+ * Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
+ * bottom.
+ *
+ * The curve's slope is zero at both ends, so neither the start of the fade nor
+ * its finish leaves a seam. A two-stop linear ramp has a constant slope that
+ * begins and ends abruptly, and those two hard edges are what read as a line
+ * drawn across the content rather than the header letting go of it.
+ *
+ * The cap holds the ramp just short of solid, so the whole overlay reads as one
+ * continuous gradient rather than an opaque plateau with a curve bolted on.
+ */
+const alphaAt = (t: number) => Math.min((1 + Math.cos(Math.PI * t)) / 2, MAX_FADE_ALPHA);
+
+/**
+ * Every input is a module constant, so the ramp is built once at load rather
+ * than rebuilt per render.
+ *
+ * The leading stop belongs to this list rather than being a sibling element:
+ * `LinearGradient` types its children as a flat `ReactElement[]`, so an element
+ * beside a mapped array would nest and fail to type-check.
+ */
+const STOPS = [
+  { offset: 0, opacity: 1 },
+  ...Array.from({ length: FADE_STOPS }, (_, index) => {
+    const t = index / (FADE_STOPS - 1);
+    return { offset: FADE_START + t * (1 - FADE_START), opacity: alphaAt(t) };
+  }),
+];
 
 export interface HeaderGradientOverlayProps {
-  /** Fill color, fading from fully opaque to 90% opacity along the gradient. */
+  /** Fill color, fading to fully transparent along the overlay. */
   color: string;
 }
 
-/** Vertical fade-out overlay behind header content, shared by header variants. */
+/**
+ * Vertical fade-out overlay behind header content, shared by header variants.
+ *
+ * Reaches zero rather than stopping short. An overlay ending at partial opacity
+ * leaves a hard step wherever it is clipped, and that step is far more visible
+ * than the fade it was meant to hide — it is what cuts content off square as it
+ * scrolls under the header.
+ *
+ * Callers size it to overhang the bar by {@link HEADER_FADE_EXTENT}.
+ */
 export function HeaderGradientOverlay({ color }: HeaderGradientOverlayProps) {
   const gradientId = useId();
 
@@ -19,8 +84,9 @@ export function HeaderGradientOverlay({ color }: HeaderGradientOverlayProps) {
     <Svg height="100%" width="100%">
       <Defs>
         <SvgLinearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-          <Stop offset="0" stopColor={color} stopOpacity="1" />
-          <Stop offset="1" stopColor={color} stopOpacity="0.86" />
+          {STOPS.map((stop) => (
+            <Stop key={stop.offset} offset={stop.offset} stopColor={color} stopOpacity={stop.opacity} />
+          ))}
         </SvgLinearGradient>
       </Defs>
       <Rect width="100%" height="100%" fill={`url(#${gradientId})`} />