react-native-terra-ui 0.5.1 → 0.7.0

package/src/components/box/Box.tsx

@@ -1,14 +1,10 @@
-import { type ComponentRef, forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
+import { type ComponentRef, 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 { Slot } from '../slot';
-import {
-  BOX_STYLE_PROP_KEYS,
-  type BoxStyleProps,
-  resolveBoxStyle,
-} from './utils';
+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. */
@@ -35,18 +31,11 @@ export const Box = forwardRef<ComponentRef<typeof View>, BoxProps>(function Box(
     else viewProps[key] = value;
   }
 
-  const mergedStyle = [
-    styles.root,
-    resolveBoxStyle(styleProps as BoxStyleProps, theme),
-    style,
-  ];
+  const mergedStyle = [styles.root, resolveBoxStyle(styleProps as BoxStyleProps, theme), style];
 
   if (asChild) {
     return (
-      <Slot
-        ownerName="Box"
-        slotProps={{ ...viewProps, style: mergedStyle, ref }}
-      >
+      <Slot ownerName="Box" slotProps={{ ...viewProps, style: mergedStyle, ref }}>
         {children}
       </Slot>
     );

package/src/components/box/index.ts

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

package/src/components/box/utils.ts

@@ -1,22 +1,11 @@
-import { StyleSheet, type ViewStyle } from 'react-native';
-import type {
-  ColorToken,
-  ElevationKey,
-  RadiusKey,
-  SpacingKey,
-  TerraTheme,
-} from '#theme/types';
-import { resolveThemeColor } from '#utils/resolve-theme-color';
+import { StyleSheet, type ViewStyle } from "react-native";
 
-export type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-export type Justify =
-  | 'start'
-  | 'center'
-  | 'end'
-  | 'between'
-  | 'around'
-  | 'evenly';
-export type BorderWidthInput = number | 'hairline';
+import type { ColorToken, ElevationKey, 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] };
@@ -48,44 +37,39 @@ export interface BoxStyleProps {
   flex?: number;
   alignSelf?: Align;
   // Visual
-  bg?: ColorToken;
+  background?: ColorToken;
   radius?: RadiusKey;
   borderWidth?: BorderWidthInput;
   borderColor?: ColorToken;
   /**
    * Drop-shadow depth — platform-aware shadow plus Android elevation. A shadow
-   * only renders over a non-transparent `bg`.
+   * only renders over a non-transparent `background`.
    */
   elevation?: ElevationKey;
 }
 
-const ALIGN_MAP: Record<Align, NonNullable<ViewStyle['alignItems']>> = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-  stretch: 'stretch',
-  baseline: 'baseline',
+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 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]);
+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 {
+export function resolveBoxStyle(props: BoxStyleProps, theme: TerraTheme): ViewStyle {
   const style: Mutable<ViewStyle> = {};
 
   // Padding
@@ -125,29 +109,23 @@ export function resolveBoxStyle(
   if (gap !== undefined) style.gap = gap;
 
   // Layout
-  if (props.row !== undefined)
-    style.flexDirection = props.row ? 'row' : 'column';
+  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.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];
+  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.background !== undefined) {
+    const background = resolveThemeColor(props.background, theme);
+    if (background !== undefined) style.backgroundColor = background;
   }
-  if (props.radius !== undefined)
-    style.borderRadius = theme.radius[props.radius];
+  if (props.radius !== undefined) style.borderRadius = theme.radius[props.radius];
   if (props.borderWidth !== undefined) {
-    style.borderWidth =
-      props.borderWidth === 'hairline'
-        ? StyleSheet.hairlineWidth
-        : props.borderWidth;
+    style.borderWidth = props.borderWidth === "hairline" ? StyleSheet.hairlineWidth : props.borderWidth;
   }
   if (props.borderColor !== undefined) {
     const borderColor = resolveThemeColor(props.borderColor, theme);
@@ -162,30 +140,30 @@ export function resolveBoxStyle(
 
 /** 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',
-  'elevation',
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "gap",
+  "row",
+  "align",
+  "justify",
+  "wrap",
+  "flex",
+  "alignSelf",
+  "background",
+  "radius",
+  "borderWidth",
+  "borderColor",
+  "elevation",
 ];

package/src/components/button/Button.tsx

@@ -1,40 +1,22 @@
-import {
-  Children,
-  type ComponentRef,
-  createContext,
-  forwardRef,
-  type ReactNode,
-  useContext,
-} from 'react';
-import type { PressableProps } from 'react-native';
-import { Pressable } from 'react-native';
+import { Children, type ComponentRef, createContext, forwardRef, type ReactNode, useContext } from "react";
+import type { PressableProps } from "react-native";
+import { Pressable } from "react-native";
 
-import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { getDefaultRadius } from '#theme/registry';
-import type {
-  ColorToken,
-  FontWeightToken,
-  TerraIconName,
-  TerraTheme,
-  TextVariant,
-} from '#theme/types';
+import { getDefaultRadius } from "#theme/registry";
+import type { ColorToken, FontWeightToken, TerraIconName, TerraTheme, TextVariant } from "#theme/types";
+import { readableOn } from "#utils/color-utils";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { Icon } from "../icon";
+import { Spinner } from "../spinner";
+import { Text } from "../text";
 
-import { Icon } from '../icon';
-import { Spinner } from '../spinner';
-import { Text } from '../text';
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
 
-export type ButtonVariant =
-  | 'primary'
-  | 'secondary'
-  | 'outline'
-  | 'ghost'
-  | 'danger';
-export type ButtonSize = 'sm' | 'md' | 'lg';
-export type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-
-export interface ButtonProps
-  extends Omit<PressableProps, 'style' | 'children' | 'disabled'> {
+export interface ButtonProps extends Omit<PressableProps, "style" | "children" | "disabled"> {
   variant?: ButtonVariant;
   size?: ButtonSize;
   radius?: ButtonRadius;
@@ -49,6 +31,13 @@ export interface ButtonProps
   fullWidth?: boolean;
   /** Remove the button's built-in horizontal padding. */
   compact?: boolean;
+  /**
+   * Overrides the variant's resolved background color (theme token or raw
+   * CSS color). The label/icon/spinner foreground automatically switches to
+   * whichever of light or dark is legible against it. `border`/`borderWidth`
+   * still come from `variant`.
+   */
+  background?: ColorToken | (string & {});
   children?: ReactNode;
 }
 
@@ -60,12 +49,11 @@ interface ButtonContextValue {
 }
 
 const ButtonContext = createContext<ButtonContextValue>({
-  color: '',
-  size: 'md',
+  color: "",
+  size: "md",
 });
 
-export const useButtonContext = (): ButtonContextValue =>
-  useContext(ButtonContext);
+export const useButtonContext = (): ButtonContextValue => useContext(ButtonContext);
 
 // ─── Colors per variant ───────────────────────────────────────────────────────
 
@@ -78,42 +66,42 @@ interface ButtonColors {
 
 function getColors(variant: ButtonVariant, theme: TerraTheme): ButtonColors {
   const c = theme.color as unknown as Record<string, string | undefined>;
-  const get = (key: string): string => c[key] ?? '';
+  const get = (key: string): string => c[key] ?? "";
   switch (variant) {
-    case 'primary':
+    case "primary":
       return {
-        bg: get('action.bg.primary'),
-        border: get('action.bg.primary'),
+        bg: get("action.bg.primary"),
+        border: get("action.bg.primary"),
         borderWidth: 0,
-        fg: get('action.fg.primary'),
+        fg: get("action.fg.primary"),
       };
-    case 'secondary':
+    case "secondary":
       return {
-        bg: get('action.bg.secondary'),
-        border: get('action.bg.secondary'),
+        bg: get("action.bg.secondary"),
+        border: get("action.bg.secondary"),
         borderWidth: 0,
-        fg: get('action.fg.secondary'),
+        fg: get("action.fg.secondary"),
       };
-    case 'outline':
+    case "outline":
       return {
-        bg: 'transparent',
-        border: get('border.default'),
+        bg: "transparent",
+        border: get("border.default"),
         borderWidth: 1,
-        fg: get('text.default'),
+        fg: get("text.default"),
       };
-    case 'ghost':
+    case "ghost":
       return {
-        bg: 'transparent',
-        border: 'transparent',
+        bg: "transparent",
+        border: "transparent",
         borderWidth: 0,
-        fg: get('text.default'),
+        fg: get("text.default"),
       };
-    case 'danger':
+    case "danger":
       return {
-        bg: get('status.danger.bg'),
-        border: get('status.danger.bg'),
+        bg: get("status.danger.bg"),
+        border: get("status.danger.bg"),
         borderWidth: 0,
-        fg: get('status.danger.fg'),
+        fg: get("status.danger.fg"),
       };
   }
 }
@@ -127,20 +115,16 @@ const LABEL_TYPOGRAPHY: Record<
     weight?: FontWeightToken;
   }
 > = {
-  sm: { variant: 'label-md', weight: 'semibold' },
-  md: { variant: 'label-lg', weight: 'semibold' },
-  lg: { variant: 'label-lg', weight: 'bold' },
+  sm: { variant: "label-md", weight: "semibold" },
+  md: { variant: "label-lg", weight: "semibold" },
+  lg: { variant: "label-lg", weight: "bold" },
 };
 
 const ButtonLabel = ({ children }: { children: ReactNode }) => {
   const { color, size } = useButtonContext();
   const typography = LABEL_TYPOGRAPHY[size];
   return (
-    <Text
-      variant={typography.variant}
-      weight={typography.weight}
-      style={{ color }}
-    >
+    <Text variant={typography.variant} weight={typography.weight} style={{ color }}>
       {children}
     </Text>
   );
@@ -161,12 +145,7 @@ export interface ButtonIconProps {
   strokeWidth?: number;
 }
 
-const ButtonIcon = ({
-  name,
-  size: sizeProp,
-  color: colorProp,
-  strokeWidth,
-}: ButtonIconProps) => {
+const ButtonIcon = ({ name, size: sizeProp, color: colorProp, strokeWidth }: ButtonIconProps) => {
   const { color, size } = useButtonContext();
 
   return (
@@ -181,12 +160,10 @@ const ButtonIcon = ({
 
 function renderChildren(children: ReactNode): ReactNode {
   return Children.map(children, (child) => {
-    if (typeof child === 'string') {
-      return child.trim().length > 0 ? (
-        <ButtonLabel>{child}</ButtonLabel>
-      ) : null;
+    if (typeof child === "string") {
+      return child.trim().length > 0 ? <ButtonLabel>{child}</ButtonLabel> : null;
     }
-    if (typeof child === 'number') {
+    if (typeof child === "number") {
       return <ButtonLabel>{child}</ButtonLabel>;
     }
     return child;
@@ -195,66 +172,64 @@ function renderChildren(children: ReactNode): ReactNode {
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
-const ButtonRoot = forwardRef<ComponentRef<typeof Pressable>, ButtonProps>(
-  function Button(
-    {
-      variant = 'primary',
-      size = 'md',
-      radius = getDefaultRadius('button'),
-      isDisabled = false,
-      isLoading = false,
-      isIconOnly = false,
-      fullWidth = true,
-      compact = false,
-      children,
-      onPress,
-      ...rest
-    },
-    ref
-  ) {
-    const { theme } = useUnistyles();
-    styles.useVariants({
-      size,
-      radius,
-      fullWidth: fullWidth && !isIconOnly,
-      iconOnly: isIconOnly,
-    });
+const ButtonRoot = forwardRef<ComponentRef<typeof Pressable>, ButtonProps>(function Button(
+  {
+    variant = "primary",
+    size = "md",
+    radius = getDefaultRadius("button"),
+    isDisabled = false,
+    isLoading = false,
+    isIconOnly = false,
+    fullWidth = true,
+    compact = false,
+    background,
+    children,
+    onPress,
+    ...rest
+  },
+  ref
+) {
+  const { theme } = useUnistyles();
+  styles.useVariants({
+    size,
+    radius,
+    fullWidth: fullWidth && !isIconOnly,
+    iconOnly: isIconOnly,
+  });
 
-    const { bg, border, borderWidth, fg } = getColors(variant, theme);
-    const blocked = isDisabled || isLoading;
-    const { style: externalStyle, ...pressableRest } = rest as typeof rest & {
-      style?: PressableProps['style'];
-    };
+  const { bg: variantBg, border, borderWidth, fg: variantFg } = getColors(variant, theme);
+  const resolvedBackground = background !== undefined ? resolveThemeColor(background, theme) : undefined;
+  const bg = resolvedBackground ?? variantBg;
+  const fg = resolvedBackground !== undefined ? readableOn(resolvedBackground) : variantFg;
+  const blocked = isDisabled || isLoading;
+  const { style: externalStyle, ...pressableRest } = rest as typeof rest & {
+    style?: PressableProps["style"];
+  };
 
-    return (
-      <ButtonContext.Provider value={{ color: fg, size }}>
-        <Pressable
-          ref={ref}
-          onPress={blocked ? undefined : onPress}
-          disabled={blocked}
-          accessibilityRole="button"
-          accessibilityState={{ disabled: blocked, busy: isLoading }}
-          {...pressableRest}
-          style={(state) => [
-            styles.base,
-            { backgroundColor: bg, borderColor: border, borderWidth },
-            compact ? styles.compact : null,
-            state.pressed && !blocked
-              ? { opacity: theme.opacity.pressed }
-              : null,
-            isDisabled ? { opacity: theme.opacity.disabled } : null,
-            typeof externalStyle === 'function'
-              ? externalStyle(state)
-              : externalStyle,
-          ]}
-        >
-          {isLoading && <Spinner size="sm" color={fg} />}
-          {renderChildren(children)}
-        </Pressable>
-      </ButtonContext.Provider>
-    );
-  }
-);
+  return (
+    <ButtonContext.Provider value={{ color: fg, size }}>
+      <Pressable
+        ref={ref}
+        onPress={blocked ? undefined : onPress}
+        disabled={blocked}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: blocked, busy: isLoading }}
+        {...pressableRest}
+        style={(state) => [
+          styles.base,
+          { backgroundColor: bg, borderColor: border, borderWidth },
+          compact ? styles.compact : null,
+          state.pressed && !blocked ? { opacity: theme.opacity.pressed } : null,
+          isDisabled ? { opacity: theme.opacity.disabled } : null,
+          typeof externalStyle === "function" ? externalStyle(state) : externalStyle,
+        ]}
+      >
+        {isLoading && <Spinner size="sm" color={fg} />}
+        {renderChildren(children)}
+      </Pressable>
+    </ButtonContext.Provider>
+  );
+});
 
 type ButtonComponent = typeof ButtonRoot & {
   Icon: typeof ButtonIcon;
@@ -269,15 +244,15 @@ Button.Label = ButtonLabel;
 
 const styles = StyleSheet.create((theme) => ({
   base: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'flex-start',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start",
     variants: {
       size: {
-        sm: { minHeight: 36, paddingHorizontal: 14, gap: 6 },
-        md: { minHeight: 44, paddingHorizontal: 16, gap: 8 },
-        lg: { minHeight: 52, paddingHorizontal: 20, gap: 8 },
+        sm: { height: 36, paddingHorizontal: 14, gap: 6 },
+        md: { height: 44, paddingHorizontal: 16, gap: 8 },
+        lg: { height: 52, paddingHorizontal: 20, gap: 8 },
       },
       radius: {
         none: { borderRadius: theme.radius.none },
@@ -288,7 +263,7 @@ const styles = StyleSheet.create((theme) => ({
         full: { borderRadius: theme.radius.full },
       },
       fullWidth: {
-        true: { alignSelf: 'stretch' },
+        true: { alignSelf: "stretch" },
         false: {},
       },
       iconOnly: {
@@ -300,6 +275,6 @@ const styles = StyleSheet.create((theme) => ({
   compact: {
     paddingHorizontal: 2,
     paddingVertical: 2,
-    minHeight: 0,
+    height: undefined,
   },
 }));

package/src/components/button/index.ts

@@ -4,5 +4,5 @@ export type {
   ButtonRadius,
   ButtonSize,
   ButtonVariant,
-} from './Button';
-export { Button, useButtonContext } from './Button';
+} from "./Button";
+export { Button, useButtonContext } from "./Button";