react-native-terra-ui 0.1.0

package/lib/typescript/src/utils/deep-merge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deep-merge.d.ts","sourceRoot":"","sources":["../../../../src/utils/deep-merge.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAC9C,WAAW,CAAC,CAAC,CAAC,EAAE,GAChB,CAAC,SAAS,MAAM,GACd;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,GACtC,CAAC,CAAC;AAQR;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAiBlE"}

package/lib/typescript/src/utils/resolve-theme-color.d.ts

@@ -0,0 +1,12 @@
+import type { ColorToken, TerraTheme } from '#theme/types';
+/**
+ * Resolves a {@link ColorToken} to a concrete color string using the theme.
+ * Raw literals pass through unchanged.
+ *
+ * @example
+ * resolveThemeColor('text.default', theme)         // → '#020618'
+ * resolveThemeColor('action.bg.primary', theme)    // → '#009966'
+ * resolveThemeColor('#ff0000', theme)              // → '#ff0000'
+ */
+export declare function resolveThemeColor(token: ColorToken | undefined, theme: TerraTheme): string | undefined;
+//# sourceMappingURL=resolve-theme-color.d.ts.map

package/lib/typescript/src/utils/resolve-theme-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-theme-color.d.ts","sourceRoot":"","sources":["../../../../src/utils/resolve-theme-color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAS3D;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,UAAU,GAAG,SAAS,EAC7B,KAAK,EAAE,UAAU,GAChB,MAAM,GAAG,SAAS,CAKpB"}

package/lib/typescript/src/utils/typography.d.ts

@@ -0,0 +1,6 @@
+import type { FontWeightToken } from '#theme/types';
+/** RN's sentinel for the platform default font (SF on iOS, Roboto on Android). */
+export declare const SYSTEM_FONT = "System";
+/** Numeric fontWeight applied when a weight token maps to the system font. */
+export declare const FONT_WEIGHT_VALUE: Record<FontWeightToken, '400' | '500' | '600' | '700'>;
+//# sourceMappingURL=typography.d.ts.map

package/lib/typescript/src/utils/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/utils/typography.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,kFAAkF;AAClF,eAAO,MAAM,WAAW,WAAW,CAAC;AAEpC,8EAA8E;AAC9E,eAAO,MAAM,iBAAiB,EAAE,MAAM,CACpC,eAAe,EACf,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAM9B,CAAC"}

package/lib/typescript/src/utils/unflatten.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Rebuilds a nested object from a flat map of dotted-path keys.
+ *
+ * @example
+ * unflatten({ 'a.b.c': 1, 'a.b.d': 2 }) // → { a: { b: { c: 1, d: 2 } } }
+ *
+ * Used to turn the flat, Figma-style token data (tokens/*.ts) back into the
+ * nested runtime theme shape that components and Unistyles consume. The caller
+ * is responsible for asserting the resulting shape (e.g. `as TerraTheme`).
+ */
+export declare function unflatten<T = unknown>(flat: Record<string, unknown>): T;
+//# sourceMappingURL=unflatten.d.ts.map

package/lib/typescript/src/utils/unflatten.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unflatten.d.ts","sourceRoot":"","sources":["../../../../src/utils/unflatten.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAyBvE"}

package/package.json

@@ -0,0 +1,137 @@
+{
+  "name": "react-native-terra-ui",
+  "version": "0.1.0",
+  "description": "Themeable React Native UI components built on react-native-unistyles",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "imports": {
+    "#*": "./src/*"
+  },
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./theme": {
+      "source": "./src/theme/index.ts",
+      "types": "./lib/typescript/src/theme/index.d.ts",
+      "default": "./lib/module/theme/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "biome check .",
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/earthling-std/react-native-terra-ui.git",
+    "directory": "packages/ui"
+  },
+  "author": "Hai Le <hai.le@elmosoftware.com.au> (https://github.com/earthling-std)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/earthling-std/react-native-terra-ui/issues"
+  },
+  "homepage": "https://github.com/earthling-std/react-native-terra-ui#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/jest-preset": "0.85.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/react": "^19.2.0",
+    "babel-plugin-module-resolver": "^5.0.3",
+    "del-cli": "^7.0.0",
+    "jest": "^29.7.0",
+    "react": "19.2.0",
+    "react-native": "0.83.6",
+    "react-native-builder-bob": "^0.42.1",
+    "react-native-edge-to-edge": "1.8.1",
+    "react-native-nitro-modules": "0.35.9",
+    "react-native-reanimated": "^4.4.1",
+    "react-native-safe-area-context": "^5.8.0",
+    "react-native-svg": "15.15.4",
+    "react-native-unistyles": "^3.2.5",
+    "react-test-renderer": "19.2.0",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=15.0.0",
+    "react-native-unistyles": ">=3.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.ts"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ],
+    "collectCoverageFrom": [
+      "src/theme/**/*.ts",
+      "src/utils/**/*.ts",
+      "src/components/**/*.{ts,tsx}",
+      "!src/**/__tests__/**"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 5,
+        "functions": 5,
+        "lines": 5,
+        "statements": 5
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "biome",
+      "jest"
+    ],
+    "version": "0.62.2"
+  }
+}

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,146 @@
+import { useState } from 'react';
+import { Text, View } from 'react-native';
+
+import { useUnistyles } from 'react-native-unistyles';
+
+import { getImageComponent } from '#theme/configure';
+import type { TerraTheme } from '#theme/types';
+
+import { Icon } from '../icon';
+import type {
+  AvatarColor,
+  AvatarProps,
+  AvatarShape,
+  AvatarSize,
+  AvatarVariant,
+} from './types';
+
+const SIZE_PX: Record<AvatarSize, number> = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64,
+};
+
+const INITIALS_FONT_SIZE: Record<AvatarSize, number> = {
+  xs: 9,
+  sm: 12,
+  md: 15,
+  lg: 18,
+  xl: 24,
+};
+
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  const first = parts[0]?.[0] ?? '';
+  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : '';
+  return (first + last).toUpperCase();
+}
+
+function getBorderRadius(
+  shape: AvatarShape,
+  sizePx: number,
+  radiusMd: number
+): number {
+  if (shape === 'circle') return sizePx / 2;
+  if (shape === 'rounded') return radiusMd;
+  return 0;
+}
+
+function resolveAvatarColors(
+  color: AvatarColor,
+  variant: AvatarVariant,
+  theme: TerraTheme
+): { bg: string; fg: string } {
+  const c = theme.color;
+  const get = (key: string): string =>
+    (c as unknown as Record<string, string | undefined>)[key] ?? '';
+  if (color === 'default') {
+    return { bg: c['surface.sunken'], fg: c['text.muted'] };
+  }
+  if (color === 'accent') {
+    return variant === 'soft'
+      ? { bg: c['action.bg.subtle'], fg: c['action.fg.subtle'] }
+      : { bg: c['action.bg.primary'], fg: c['action.fg.primary'] };
+  }
+  return variant === 'soft'
+    ? {
+        bg: get(`status.bg.${color}.subtle`),
+        fg: get(`status.fg.${color}.subtle`),
+      }
+    : { bg: get(`status.bg.${color}`), fg: get(`status.fg.${color}`) };
+}
+
+export function Avatar({
+  size = 'md',
+  shape = 'circle',
+  source,
+  name,
+  fallback,
+  contentFit = 'cover',
+  color = 'default',
+  variant = 'default',
+  style,
+  ...rest
+}: AvatarProps) {
+  const { theme } = useUnistyles();
+  const [hasError, setHasError] = useState(false);
+
+  const sizePx = SIZE_PX[size];
+  const borderRadius = getBorderRadius(shape, sizePx, theme.radius.md);
+  const showFallback = !source || hasError;
+
+  const { bg, fg } = resolveAvatarColors(color, variant, theme);
+
+  const fallbackContent =
+    fallback !== undefined ? (
+      fallback
+    ) : name ? (
+      <Text
+        style={{
+          fontSize: INITIALS_FONT_SIZE[size],
+          fontWeight: '600',
+          color: fg,
+          includeFontPadding: false,
+        }}
+        numberOfLines={1}
+      >
+        {getInitials(name)}
+      </Text>
+    ) : (
+      <Icon name="person" size={sizePx} color={fg} />
+    );
+
+  const ImageComponent = getImageComponent();
+
+  return (
+    <View
+      {...rest}
+      style={[
+        {
+          width: sizePx,
+          height: sizePx,
+          borderRadius,
+          backgroundColor: bg,
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      {showFallback ? (
+        fallbackContent
+      ) : (
+        <ImageComponent
+          source={source}
+          style={{ width: sizePx, height: sizePx }}
+          contentFit={contentFit}
+          accessibilityLabel={name}
+          onError={() => setHasError(true)}
+        />
+      )}
+    </View>
+  );
+}

package/src/components/avatar/index.ts

@@ -0,0 +1,8 @@
+export { Avatar } from './Avatar';
+export type {
+  AvatarColor,
+  AvatarProps,
+  AvatarShape,
+  AvatarSize,
+  AvatarVariant,
+} from './types';

package/src/components/avatar/types.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+import type { TerraImageContentFit } from '#theme/types';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'rounded' | 'square';
+/** Semantic color scheme for the fallback state (initials / placeholder icon). */
+export type AvatarColor =
+  | 'default'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'danger';
+/** Visual weight of the fallback background. */
+export type AvatarVariant = 'default' | 'soft';
+
+export interface AvatarProps extends ViewProps {
+  /** Predefined size token. Defaults to `'md'`. */
+  size?: AvatarSize;
+  /** Corner shape. Defaults to `'circle'`. */
+  shape?: AvatarShape;
+  /** Remote URL or local asset. When omitted or on load error, the fallback is shown. */
+  source?: { uri: string } | number;
+  /** Used to derive initials when no `source` or `fallback` is provided. */
+  name?: string;
+  /** Custom fallback content — takes priority over initials and the built-in placeholder. */
+  fallback?: ReactNode;
+  /** How the image fills its container. Defaults to `'cover'`. */
+  contentFit?: TerraImageContentFit;
+  /** Fallback color theme. Defaults to `'default'`. */
+  color?: AvatarColor;
+  /** Visual style variant. Defaults to `'default'`. */
+  variant?: AvatarVariant;
+}

package/src/components/box/Box.tsx

@@ -0,0 +1,59 @@
+import { type ComponentRef, forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { useUnistyles } from 'react-native-unistyles';
+
+import { Slot } from '../slot';
+import {
+  BOX_STYLE_PROP_KEYS,
+  type BoxStyleProps,
+  resolveBoxStyle,
+} from './utils';
+
+export interface BoxProps extends ViewProps, BoxStyleProps {
+  /** Merge Box's style/props onto a single child instead of rendering a View. */
+  asChild?: boolean;
+}
+
+const STYLE_KEYS = new Set<string>(BOX_STYLE_PROP_KEYS as readonly string[]);
+
+/**
+ * Base layout primitive: a `View` styled through theme-token props.
+ * The only component family exposing token style-props.
+ */
+export const Box = forwardRef<ComponentRef<typeof View>, BoxProps>(function Box(
+  { asChild, style, children, ...rest },
+  ref
+) {
+  const { theme } = useUnistyles();
+
+  const styleProps: Record<string, unknown> = {};
+  const viewProps: Record<string, unknown> = {};
+  for (const key of Object.keys(rest)) {
+    const value = (rest as Record<string, unknown>)[key];
+    if (STYLE_KEYS.has(key)) styleProps[key] = value;
+    else viewProps[key] = value;
+  }
+
+  const mergedStyle = [
+    resolveBoxStyle(styleProps as BoxStyleProps, theme),
+    style,
+  ];
+
+  if (asChild) {
+    return (
+      <Slot
+        ownerName="Box"
+        slotProps={{ ...viewProps, style: mergedStyle, ref }}
+      >
+        {children}
+      </Slot>
+    );
+  }
+
+  return (
+    <View ref={ref} style={mergedStyle} {...(viewProps as ViewProps)}>
+      {children}
+    </View>
+  );
+});

package/src/components/box/index.ts

@@ -0,0 +1,8 @@
+export type { BoxProps } from './Box';
+export { Box } from './Box';
+export type {
+  Align,
+  BorderWidthInput,
+  BoxStyleProps,
+  Justify,
+} from './utils';

package/src/components/box/utils.ts

@@ -0,0 +1,181 @@
+import { StyleSheet, type ViewStyle } from 'react-native';
+import type {
+  ColorToken,
+  RadiusKey,
+  SpacingKey,
+  TerraTheme,
+} from '#theme/types';
+import { resolveThemeColor } from '#utils/resolve-theme-color';
+
+export type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type Justify =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'between'
+  | 'around'
+  | 'evenly';
+export type BorderWidthInput = number | 'hairline';
+
+/** Strips `readonly` so the style object can be built by mutation. */
+type Mutable<T> = { -readonly [K in keyof T]: T[K] };
+
+/** Token-driven style props accepted by `Box`. */
+export interface BoxStyleProps {
+  // Spacing
+  p?: SpacingKey;
+  px?: SpacingKey;
+  py?: SpacingKey;
+  pt?: SpacingKey;
+  pr?: SpacingKey;
+  pb?: SpacingKey;
+  pl?: SpacingKey;
+  m?: SpacingKey;
+  mx?: SpacingKey;
+  my?: SpacingKey;
+  mt?: SpacingKey;
+  mr?: SpacingKey;
+  mb?: SpacingKey;
+  ml?: SpacingKey;
+  gap?: SpacingKey;
+  // Layout
+  /** Horizontal layout (`flexDirection: 'row'`). Defaults to column. */
+  row?: boolean;
+  align?: Align;
+  justify?: Justify;
+  wrap?: boolean;
+  flex?: number;
+  alignSelf?: Align;
+  // Visual
+  bg?: ColorToken;
+  radius?: RadiusKey;
+  borderWidth?: BorderWidthInput;
+  borderColor?: ColorToken;
+}
+
+const ALIGN_MAP: Record<Align, NonNullable<ViewStyle['alignItems']>> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
+  baseline: 'baseline',
+};
+
+const JUSTIFY_MAP: Record<Justify, NonNullable<ViewStyle['justifyContent']>> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  between: 'space-between',
+  around: 'space-around',
+  evenly: 'space-evenly',
+};
+
+const space = (
+  theme: TerraTheme,
+  key: SpacingKey | undefined
+): number | undefined => (key === undefined ? undefined : theme.spacing[key]);
+
+/** Builds a `ViewStyle` from token-driven props using the active theme. */
+export function resolveBoxStyle(
+  props: BoxStyleProps,
+  theme: TerraTheme
+): ViewStyle {
+  const style: Mutable<ViewStyle> = {};
+
+  // Padding
+  const p = space(theme, props.p);
+  const px = space(theme, props.px);
+  const py = space(theme, props.py);
+  if (p !== undefined) style.padding = p;
+  if (px !== undefined) style.paddingHorizontal = px;
+  if (py !== undefined) style.paddingVertical = py;
+  const pt = space(theme, props.pt);
+  const pr = space(theme, props.pr);
+  const pb = space(theme, props.pb);
+  const pl = space(theme, props.pl);
+  if (pt !== undefined) style.paddingTop = pt;
+  if (pr !== undefined) style.paddingRight = pr;
+  if (pb !== undefined) style.paddingBottom = pb;
+  if (pl !== undefined) style.paddingLeft = pl;
+
+  // Margin
+  const m = space(theme, props.m);
+  const mx = space(theme, props.mx);
+  const my = space(theme, props.my);
+  if (m !== undefined) style.margin = m;
+  if (mx !== undefined) style.marginHorizontal = mx;
+  if (my !== undefined) style.marginVertical = my;
+  const mt = space(theme, props.mt);
+  const mr = space(theme, props.mr);
+  const mb = space(theme, props.mb);
+  const ml = space(theme, props.ml);
+  if (mt !== undefined) style.marginTop = mt;
+  if (mr !== undefined) style.marginRight = mr;
+  if (mb !== undefined) style.marginBottom = mb;
+  if (ml !== undefined) style.marginLeft = ml;
+
+  // Gap
+  const gap = space(theme, props.gap);
+  if (gap !== undefined) style.gap = gap;
+
+  // Layout
+  if (props.row !== undefined)
+    style.flexDirection = props.row ? 'row' : 'column';
+  if (props.align !== undefined) style.alignItems = ALIGN_MAP[props.align];
+  if (props.justify !== undefined) {
+    style.justifyContent = JUSTIFY_MAP[props.justify];
+  }
+  if (props.wrap !== undefined) style.flexWrap = props.wrap ? 'wrap' : 'nowrap';
+  if (props.flex !== undefined) style.flex = props.flex;
+  if (props.alignSelf !== undefined)
+    style.alignSelf = ALIGN_MAP[props.alignSelf];
+
+  // Visual
+  if (props.bg !== undefined) {
+    const bg = resolveThemeColor(props.bg, theme);
+    if (bg !== undefined) style.backgroundColor = bg;
+  }
+  if (props.radius !== undefined)
+    style.borderRadius = theme.radius[props.radius];
+  if (props.borderWidth !== undefined) {
+    style.borderWidth =
+      props.borderWidth === 'hairline'
+        ? StyleSheet.hairlineWidth
+        : props.borderWidth;
+  }
+  if (props.borderColor !== undefined) {
+    const borderColor = resolveThemeColor(props.borderColor, theme);
+    if (borderColor !== undefined) style.borderColor = borderColor;
+  }
+
+  return style;
+}
+
+/** Keys of {@link BoxStyleProps}, used to split style props from view props. */
+export const BOX_STYLE_PROP_KEYS: readonly (keyof BoxStyleProps)[] = [
+  'p',
+  'px',
+  'py',
+  'pt',
+  'pr',
+  'pb',
+  'pl',
+  'm',
+  'mx',
+  'my',
+  'mt',
+  'mr',
+  'mb',
+  'ml',
+  'gap',
+  'row',
+  'align',
+  'justify',
+  'wrap',
+  'flex',
+  'alignSelf',
+  'bg',
+  'radius',
+  'borderWidth',
+  'borderColor',
+];