react-native-terra-ui 0.5.1 → 0.7.0

package/src/components/icon/Icon.tsx

@@ -1,14 +1,14 @@
-import type { ComponentRef } from 'react';
-import { forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
+import type { ComponentRef } from "react";
+import { forwardRef } from "react";
+import { View, type ViewProps } from "react-native";
 
-import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { getIcon } from '#theme/registry';
-import type { ColorToken, TerraIconName } from '#theme/types';
-import { resolveThemeColor } from '#utils/resolve-theme-color';
+import { getIcon } from "#theme/registry";
+import type { ColorToken, TerraIconName } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
 
-export interface IconProps extends Omit<ViewProps, 'children'> {
+export interface IconProps extends Omit<ViewProps, "children"> {
   /** Semantic or configured icon name from the theme registry. */
   name: TerraIconName;
   /** Icon size in density-independent pixels. Defaults to `20`. */
@@ -27,39 +27,31 @@ export interface IconProps extends Omit<ViewProps, 'children'> {
  * <Icon name="navigation.close" size={24} color="text.default" />
  * ```
  */
-export const Icon = forwardRef<ComponentRef<typeof View>, IconProps>(
-  function Icon(
-    { name, size = 20, color = 'text.default', strokeWidth, style, ...rest },
-    ref
-  ) {
-    const { theme } = useUnistyles();
-    const IconComponent = getIcon(name);
+export const Icon = forwardRef<ComponentRef<typeof View>, IconProps>(function Icon(
+  { name, size = 20, color = "text.default", strokeWidth, style, ...rest },
+  ref
+) {
+  const { theme } = useUnistyles();
+  const IconComponent = getIcon(name);
 
-    if (!IconComponent) {
-      if (__DEV__) {
-        console.warn(`[react-native-terra-ui] Unknown icon "${name}".`);
-      }
-      return null;
+  if (!IconComponent) {
+    if (__DEV__) {
+      console.warn(`[react-native-terra-ui] Unknown icon "${name}".`);
     }
+    return null;
+  }
 
-    const resolvedColor =
-      resolveThemeColor(color, theme) ??
-      (theme.color as unknown as Record<string, string | undefined>)[
-        'text.default'
-      ] ??
-      '';
+  const resolvedColor =
+    resolveThemeColor(color, theme) ??
+    (theme.color as unknown as Record<string, string | undefined>)["text.default"] ??
+    "";
 
-    return (
-      <View ref={ref} style={[styles.container(size), style]} {...rest}>
-        <IconComponent
-          color={resolvedColor}
-          size={size}
-          strokeWidth={strokeWidth}
-        />
-      </View>
-    );
-  }
-);
+  return (
+    <View ref={ref} style={[styles.container(size), style]} {...rest}>
+      <IconComponent color={resolvedColor} size={size} strokeWidth={strokeWidth} />
+    </View>
+  );
+});
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 //
@@ -73,7 +65,7 @@ const styles = StyleSheet.create(() => ({
   container: (size: number) => ({
     width: size,
     height: size,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
   }),
 }));

package/src/components/icon/index.ts

@@ -1,2 +1,2 @@
-export type { IconProps } from './Icon';
-export { Icon } from './Icon';
+export type { IconProps } from "./Icon";
+export { Icon } from "./Icon";

package/src/components/image/Image.tsx

@@ -1,8 +1,10 @@
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { getImageComponent } from '#theme/registry';
-import type { RadiusKey } from '#theme/types';
-import type { ImageProps } from './types';
+import { View } from "react-native";
+
+import { StyleSheet } from "react-native-unistyles";
+
+import { getImageComponent } from "#theme/registry";
+import type { RadiusKey } from "#theme/types";
+import type { ImageProps } from "./types";
 
 /**
  * Renders the image implementation configured via
@@ -18,10 +20,10 @@ import type { ImageProps } from './types';
  * ```
  */
 export function Image({
-  contentFit = 'cover',
+  contentFit = "cover",
   width,
   height,
-  radius = 'none',
+  radius = "none",
   style,
   // Defaults to `contentFit` here (rather than leaving it to each backend's
   // own default) so a same-resolution placeholder never renders smaller than
@@ -48,10 +50,10 @@ const styles = StyleSheet.create((_theme) => ({
     ...(w ? { width: w } : {}),
     ...(h ? { height: h } : {}),
     borderRadius: _theme.radius[r],
-    overflow: 'hidden',
+    overflow: "hidden",
   }),
   image: {
-    width: '100%',
-    height: '100%',
+    width: "100%",
+    height: "100%",
   },
 }));

package/src/components/image/index.ts

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

package/src/components/image/types.ts

@@ -1,4 +1,4 @@
-import type { RadiusKey, TerraImageProps } from '#theme/types';
+import type { RadiusKey, TerraImageProps } from "#theme/types";
 
 export interface ImageProps extends TerraImageProps {
   width?: number;

package/src/components/index.ts

@@ -1,17 +1,17 @@
-export * from './avatar';
-export * from './box';
-export * from './button';
-export * from './chip';
-export * from './empty-state';
-export * from './header';
-export * from './icon';
-export * from './image';
-export * from './page-indicator';
-export * from './portal';
-export * from './screen';
-export * from './slot';
-export * from './spinner';
-export * from './surface';
-export * from './text';
-export * from './toast';
-export * from './toolbar';
+export * from "./avatar";
+export * from "./box";
+export * from "./button";
+export * from "./chip";
+export * from "./empty-state";
+export * from "./header";
+export * from "./icon";
+export * from "./image";
+export * from "./page-indicator";
+export * from "./portal";
+export * from "./screen";
+export * from "./slot";
+export * from "./spinner";
+export * from "./surface";
+export * from "./text";
+export * from "./toast";
+export * from "./toolbar";

package/src/components/page-indicator/PageIndicator.tsx

@@ -1,13 +1,13 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from "react-native";
 
-import type { SharedValue } from 'react-native-reanimated';
+import type { SharedValue } from "react-native-reanimated";
 
-import type { ColorToken } from '#theme/types';
-import { DEFAULT_PAGE_INDICATOR_MAX_VISIBLE } from './utils';
-import { DotIndicator } from './variants/DotIndicator';
-import { PillIndicator } from './variants/PillIndicator';
+import type { ColorToken } from "#theme/types";
+import { DEFAULT_PAGE_INDICATOR_MAX_VISIBLE } from "./utils";
+import { DotIndicator } from "./variants/DotIndicator";
+import { PillIndicator } from "./variants/PillIndicator";
 
-export type PageIndicatorVariant = 'pill' | 'dot';
+export type PageIndicatorVariant = "pill" | "dot";
 
 type PageIndicatorCoreProps = {
   /** Number of pages represented by the indicator. */
@@ -35,14 +35,14 @@ type PageIndicatorCoreProps = {
 
 /** Pill indicator — active page widens into a pill. Default when `variant` is omitted. */
 export type PageIndicatorPillProps = PageIndicatorCoreProps & {
-  variant?: 'pill';
+  variant?: "pill";
   loading?: never;
   loadingColor?: never;
 };
 
 /** Dot indicator — traveling dot with optional loading ring on the active page. */
 export type PageIndicatorDotProps = PageIndicatorCoreProps & {
-  variant: 'dot';
+  variant: "dot";
   /** Loading ring color token. */
   loadingColor?: ColorToken;
   /** Renders a ring around the active dot while loading. */
@@ -63,7 +63,7 @@ export function PageIndicator(props: PageIndicatorProps) {
     style,
   } = props;
 
-  if (props.variant === 'dot') {
+  if (props.variant === "dot") {
     return (
       <DotIndicator
         count={count}
@@ -94,7 +94,7 @@ export function PageIndicator(props: PageIndicatorProps) {
   );
 }
 
-export type { DotIndicatorProps } from './variants/DotIndicator';
-export { DotIndicator } from './variants/DotIndicator';
-export type { PillIndicatorProps } from './variants/PillIndicator';
-export { PillIndicator } from './variants/PillIndicator';
+export type { DotIndicatorProps } from "./variants/DotIndicator";
+export { DotIndicator } from "./variants/DotIndicator";
+export type { PillIndicatorProps } from "./variants/PillIndicator";
+export { PillIndicator } from "./variants/PillIndicator";

package/src/components/page-indicator/PageIndicatorRoot.tsx

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
-import { type StyleProp, View, type ViewStyle } from 'react-native';
+import type { ReactNode } from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
 
-import { pageIndicatorViewportClipStyle } from './utils';
+import { pageIndicatorViewportClipStyle } from "./utils";
 
 export type PageIndicatorRootProps = {
   children: ReactNode;
@@ -24,15 +24,7 @@ export function PageIndicatorRoot({
   return (
     <View pointerEvents="none" style={style}>
       {overflows ? (
-        <View
-          style={pageIndicatorViewportClipStyle(
-            vertical,
-            viewportMainSize,
-            crossSize
-          )}
-        >
-          {children}
-        </View>
+        <View style={pageIndicatorViewportClipStyle(vertical, viewportMainSize, crossSize)}>{children}</View>
       ) : (
         children
       )}

package/src/components/page-indicator/hooks/use-page-indicator-colors.ts

@@ -1,10 +1,9 @@
-import { useMemo } from 'react';
+import { useMemo } from "react";
 
-import { useUnistyles } from 'react-native-unistyles';
+import { useUnistyles } from "react-native-unistyles";
 
-import type { ColorToken } from '#theme/types';
-
-import { resolveThemeColor } from '#utils/resolve-theme-color';
+import type { ColorToken } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
 
 /** Resolved color strings for Reanimated and SVG (worklets cannot use theme tokens). */
 export interface ResolvedColors {
@@ -20,45 +19,28 @@ export type PageIndicatorColorInput = {
 };
 
 const DEFAULT_COLOR_TOKENS: Required<PageIndicatorColorInput> = {
-  activeColor: 'text.default',
-  inactiveColor: 'text.disabled',
-  loadingColor: 'text.disabled',
+  activeColor: "text.default",
+  inactiveColor: "text.disabled",
+  loadingColor: "text.disabled",
 };
 
-export function usePageIndicatorColors(
-  colors: PageIndicatorColorInput = {}
-): ResolvedColors {
+export function usePageIndicatorColors(colors: PageIndicatorColorInput = {}): ResolvedColors {
   const { theme } = useUnistyles();
 
   return useMemo(
     () => ({
       activeColor:
-        resolveThemeColor(
-          colors.activeColor ?? DEFAULT_COLOR_TOKENS.activeColor,
-          theme
-        ) ??
-        (theme.color as unknown as Record<string, string | undefined>)[
-          'text.default'
-        ] ??
-        '',
+        resolveThemeColor(colors.activeColor ?? DEFAULT_COLOR_TOKENS.activeColor, theme) ??
+        (theme.color as unknown as Record<string, string | undefined>)["text.default"] ??
+        "",
       inactiveColor:
-        resolveThemeColor(
-          colors.inactiveColor ?? DEFAULT_COLOR_TOKENS.inactiveColor,
-          theme
-        ) ??
-        (theme.color as unknown as Record<string, string | undefined>)[
-          'text.disabled'
-        ] ??
-        '',
+        resolveThemeColor(colors.inactiveColor ?? DEFAULT_COLOR_TOKENS.inactiveColor, theme) ??
+        (theme.color as unknown as Record<string, string | undefined>)["text.disabled"] ??
+        "",
       loadingColor:
-        resolveThemeColor(
-          colors.loadingColor ?? DEFAULT_COLOR_TOKENS.loadingColor,
-          theme
-        ) ??
-        (theme.color as unknown as Record<string, string | undefined>)[
-          'text.disabled'
-        ] ??
-        '',
+        resolveThemeColor(colors.loadingColor ?? DEFAULT_COLOR_TOKENS.loadingColor, theme) ??
+        (theme.color as unknown as Record<string, string | undefined>)["text.disabled"] ??
+        "",
     }),
     [colors.activeColor, colors.inactiveColor, colors.loadingColor, theme]
   );

package/src/components/page-indicator/hooks/use-page-indicator-core.ts

@@ -1,12 +1,10 @@
-import type { SharedValue } from 'react-native-reanimated';
-import { isPageIndicatorSharedValue } from '../utils';
-import {
-  type PageIndicatorColorInput,
-  usePageIndicatorColors,
-} from './use-page-indicator-colors';
-import { usePageIndicatorProgress } from './use-page-indicator-progress';
+import type { SharedValue } from "react-native-reanimated";
 
-type PageIndicatorVariant = 'pill' | 'dot';
+import { isPageIndicatorSharedValue } from "../utils";
+import { type PageIndicatorColorInput, usePageIndicatorColors } from "./use-page-indicator-colors";
+import { usePageIndicatorProgress } from "./use-page-indicator-progress";
+
+type PageIndicatorVariant = "pill" | "dot";
 
 export function usePageIndicatorCore(
   count: number,

package/src/components/page-indicator/hooks/use-page-indicator-progress.ts

@@ -1,18 +1,13 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from "react";
 
-import type { SharedValue } from 'react-native-reanimated';
-import {
-  cancelAnimation,
-  Easing,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import type { SharedValue } from "react-native-reanimated";
+import { cancelAnimation, Easing, useSharedValue, withTiming } from "react-native-reanimated";
 
 import {
   PAGE_INDICATOR_SINGLE_PAGE_DURATION,
   pageIndicatorPageJumpDistance,
   pageIndicatorPageJumpDuration,
-} from '../utils';
+} from "../utils";
 
 function clampPageIndex(page: number, count: number): number {
   if (count <= 0) return 0;
@@ -37,12 +32,10 @@ export function usePageIndicatorProgress(
   count: number,
   progress: SharedValue<number> | undefined,
   page: number | undefined,
-  variant: 'pill' | 'dot' = 'pill',
+  variant: "pill" | "dot" = "pill",
   duration = PAGE_INDICATOR_SINGLE_PAGE_DURATION
 ): { progress: SharedValue<number>; pillJump: PillJumpState } {
-  const internalProgress = useSharedValue(
-    page !== undefined ? clampPageIndex(page, count) : 0
-  );
+  const internalProgress = useSharedValue(page !== undefined ? clampPageIndex(page, count) : 0);
   const pillJumpActive = useSharedValue(false);
   const pillJumpFrom = useSharedValue(0);
   const pillJumpTo = useSharedValue(0);
@@ -71,7 +64,7 @@ export function usePageIndicatorProgress(
     cancelAnimation(pillJumpT);
     pillJumpActive.value = false;
 
-    if (variant === 'pill' && distance > 1) {
+    if (variant === "pill" && distance > 1) {
       const jumpDuration = pageIndicatorPageJumpDuration(from, target);
 
       internalProgress.value = from;
@@ -86,7 +79,7 @@ export function usePageIndicatorProgress(
           easing: Easing.bezier(0.33, 0, 0.15, 1),
         },
         (finished) => {
-          'worklet';
+          "worklet";
           if (finished) {
             internalProgress.value = target;
             pillJumpActive.value = false;
@@ -97,23 +90,10 @@ export function usePageIndicatorProgress(
     }
 
     internalProgress.value = withTiming(target, {
-      duration:
-        variant === 'dot'
-          ? duration
-          : pageIndicatorPageJumpDuration(from, target),
+      duration: variant === "dot" ? duration : pageIndicatorPageJumpDuration(from, target),
       easing: Easing.bezier(0.33, 0, 0.15, 1),
     });
-  }, [
-    count,
-    duration,
-    internalProgress,
-    page,
-    pillJumpActive,
-    pillJumpFrom,
-    pillJumpT,
-    pillJumpTo,
-    variant,
-  ]);
+  }, [count, duration, internalProgress, page, pillJumpActive, pillJumpFrom, pillJumpT, pillJumpTo, variant]);
 
   return {
     progress: progress ?? internalProgress,

package/src/components/page-indicator/index.ts

@@ -5,9 +5,9 @@ export type {
   PageIndicatorProps,
   PageIndicatorVariant,
   PillIndicatorProps,
-} from './PageIndicator';
-export { DotIndicator, PageIndicator, PillIndicator } from './PageIndicator';
+} from "./PageIndicator";
+export { DotIndicator, PageIndicator, PillIndicator } from "./PageIndicator";
 export {
   DEFAULT_PAGE_INDICATOR_MAX_VISIBLE,
   PAGE_INDICATOR_SINGLE_PAGE_DURATION,
-} from './utils';
+} from "./utils";

package/src/components/page-indicator/utils.ts

@@ -1,6 +1,6 @@
-import type { ViewStyle } from 'react-native';
+import type { ViewStyle } from "react-native";
 
-import type { SharedValue } from 'react-native-reanimated';
+import type { SharedValue } from "react-native-reanimated";
 
 /** Duration for a single-page `current` transition. */
 export const PAGE_INDICATOR_SINGLE_PAGE_DURATION = 600;
@@ -19,10 +19,7 @@ const CENTERED_SCALE = [1, 0.9, 0.65, 0.5] as const;
 const WINDOW_TAIL_SCALE = 0.5;
 
 /** Absolute page delta between two indices. */
-export function pageIndicatorPageJumpDistance(
-  from: number,
-  to: number
-): number {
+export function pageIndicatorPageJumpDistance(from: number, to: number): number {
   return Math.abs(to - from);
 }
 
@@ -31,16 +28,12 @@ export function pageIndicatorPageJumpDistance(
  * snappy; longer jumps get more time (capped) so the pill does not blur
  * through intermediate dots.
  */
-export function pageIndicatorPageJumpDuration(
-  from: number,
-  to: number
-): number {
+export function pageIndicatorPageJumpDuration(from: number, to: number): number {
   const distance = pageIndicatorPageJumpDistance(from, to);
   if (distance <= 1) return PAGE_INDICATOR_SINGLE_PAGE_DURATION;
 
   return Math.min(
-    PAGE_INDICATOR_SINGLE_PAGE_DURATION +
-      PAGE_INDICATOR_MULTI_PAGE_DURATION_STEP * (distance - 1),
+    PAGE_INDICATOR_SINGLE_PAGE_DURATION + PAGE_INDICATOR_MULTI_PAGE_DURATION_STEP * (distance - 1),
     PAGE_INDICATOR_MULTI_PAGE_DURATION_MAX
   );
 }
@@ -48,19 +41,14 @@ export function pageIndicatorPageJumpDuration(
 export function isPageIndicatorSharedValue(
   value: number | SharedValue<number>
 ): value is SharedValue<number> {
-  return typeof value === 'object' && value !== null && 'value' in value;
+  return typeof value === "object" && value !== null && "value" in value;
 }
 
 /** Transform style for overflow track scrolling along the main axis. */
-export function pageIndicatorAxisTranslateStyle(
-  vertical: boolean,
-  translate: number
-) {
-  'worklet';
+export function pageIndicatorAxisTranslateStyle(vertical: boolean, translate: number) {
+  "worklet";
   return {
-    transform: vertical
-      ? [{ translateY: translate }]
-      : [{ translateX: translate }],
+    transform: vertical ? [{ translateY: translate }] : [{ translateX: translate }],
   };
 }
 
@@ -74,23 +62,19 @@ export function pageIndicatorViewportClipStyle(
     return {
       height: viewportMainSize,
       ...(crossSize !== undefined ? { width: crossSize } : {}),
-      overflow: 'hidden',
+      overflow: "hidden",
     };
   }
 
   return {
     width: viewportMainSize,
     ...(crossSize !== undefined ? { height: crossSize } : {}),
-    overflow: 'hidden',
+    overflow: "hidden",
   };
 }
 
-function scaleCurveValue(
-  curve: readonly number[],
-  distance: number,
-  tailScale: number
-): number {
-  'worklet';
+function scaleCurveValue(curve: readonly number[], distance: number, tailScale: number): number {
+  "worklet";
   if (distance < curve.length) return curve[distance] ?? tailScale;
   return tailScale;
 }
@@ -101,7 +85,7 @@ export function pageIndicatorWindowSlotScale(
   activeSlot: number,
   maxVisible: number
 ): number {
-  'worklet';
+  "worklet";
   if (positionInWindow === activeSlot) return 1;
 
   const dist = Math.abs(positionInWindow - activeSlot);
@@ -157,19 +141,13 @@ export function computePageIndicatorWindowTranslate(
   maxVisible: number,
   activeMainSize = dotSize
 ): number {
-  'worklet';
+  "worklet";
   if (count <= maxVisible) return 0;
 
-  const viewportMainSize = Math.max(
-    dotSize,
-    (maxVisible - 1) * slot + activeMainSize
-  );
+  const viewportMainSize = Math.max(dotSize, (maxVisible - 1) * slot + activeMainSize);
   const trackMainSize = Math.max(dotSize, (count - 1) * slot + activeMainSize);
   const activeCenter = progress * slot + activeMainSize / 2;
-  const offset = Math.min(
-    Math.max(activeCenter - viewportMainSize / 2, 0),
-    trackMainSize - viewportMainSize
-  );
+  const offset = Math.min(Math.max(activeCenter - viewportMainSize / 2, 0), trackMainSize - viewportMainSize);
 
   return -offset;
 }
@@ -183,7 +161,7 @@ export function pageIndicatorWindowScale(
   maxVisible: number,
   activeMainSize = dotSize
 ): number {
-  'worklet';
+  "worklet";
   if (count <= maxVisible) return 1;
 
   const translate = computePageIndicatorWindowTranslate(
@@ -195,14 +173,8 @@ export function pageIndicatorWindowScale(
     activeMainSize
   );
   const visibleStart = -translate / slot;
-  const activeSlot = Math.min(
-    Math.max(Math.round(displayProgress - visibleStart), 0),
-    maxVisible - 1
-  );
-  const positionInWindow = Math.min(
-    Math.max(Math.round(index - visibleStart), 0),
-    maxVisible - 1
-  );
+  const activeSlot = Math.min(Math.max(Math.round(displayProgress - visibleStart), 0), maxVisible - 1);
+  const positionInWindow = Math.min(Math.max(Math.round(index - visibleStart), 0), maxVisible - 1);
 
   return pageIndicatorWindowSlotScale(positionInWindow, activeSlot, maxVisible);
 }

package/src/components/page-indicator/variants/DotIndicator/InactiveDot.tsx

@@ -1,11 +1,7 @@
-import Animated, {
-  type SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { type SharedValue, useAnimatedStyle } from "react-native-reanimated";
 
-import { pageIndicatorWindowScale } from '../../utils';
-
-import { DOT_INDICATOR_GEOMETRY, pageIndicatorDotCenter } from './utils';
+import { pageIndicatorWindowScale } from "../../utils";
+import { DOT_INDICATOR_GEOMETRY, pageIndicatorDotCenter } from "./utils";
 
 interface InactiveDotProps {
   color: string;
@@ -34,14 +30,7 @@ export function InactiveDot({
   const animatedStyle = useAnimatedStyle(() => {
     const center = pageIndicatorDotCenter(index, slot, dotSize);
     const windowScale = overflows
-      ? pageIndicatorWindowScale(
-          index,
-          progress.value,
-          count,
-          slot,
-          dotSize,
-          maxVisible
-        )
+      ? pageIndicatorWindowScale(index, progress.value, count, slot, dotSize, maxVisible)
       : 1;
 
     return {
@@ -56,7 +45,7 @@ export function InactiveDot({
     <Animated.View
       style={[
         {
-          position: 'absolute',
+          position: "absolute",
           width: dotSize,
           height: dotSize,
           borderRadius: 999,