react-native-terra-ui 0.5.0 → 0.6.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,10 +1,6 @@
-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";
 
 export interface HeaderGradientOverlayProps {
   /** Fill color, fading from fully opaque to 90% opacity along the gradient. */