react-native-terra-ui 0.5.0 → 0.6.0

package/src/components/toolbar/Toolbar.tsx

@@ -6,21 +6,15 @@ import {
   type ReactNode,
   useContext,
   useMemo,
-} from 'react';
-import {
-  Pressable,
-  type PressableProps,
-  View,
-  type ViewProps,
-} from 'react-native';
-
-import { StyleSheet } from 'react-native-unistyles';
+} from "react";
+import { Pressable, type PressableProps, View, type ViewProps } from "react-native";
 
-import type { ColorToken, SpacingKey, TerraIconName } from '#theme/types';
-import { resolveThemeColor } from '#utils/resolve-theme-color';
+import { StyleSheet } from "react-native-unistyles";
 
-import { Icon } from '../icon';
-import { Text } from '../text';
+import type { ColorToken, SpacingKey, TerraIconName } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { Icon } from "../icon";
+import { Text } from "../text";
 
 // ─── Context (lets Toolbar.Button inherit the group's paint) ──────────────────
 //
@@ -44,8 +38,8 @@ interface ToolbarGroupContextValue {
 
 /** Non-null default, so a bare `Toolbar.Button` still paints its own circle. */
 const ToolbarGroupContext = createContext<ToolbarGroupContextValue>({
-  background: 'surface.default',
-  tint: 'text.default',
+  background: "surface.default",
+  tint: "text.default",
   isGrouped: false,
 });
 
@@ -56,12 +50,11 @@ const ITEM_SIZE = 40;
 const HIT_SLOP = 8;
 
 /** Typographic role of a text item's label. */
-const LABEL_VARIANT = 'label-md';
+const LABEL_VARIANT = "label-md";
 
 // ─── Button ───────────────────────────────────────────────────────────────────
 
-interface ToolbarButtonBaseProps
-  extends Omit<PressableProps, 'children' | 'style'> {
+interface ToolbarButtonBaseProps extends Omit<PressableProps, "children" | "style"> {
   /** Icon to render, before the label when both are given. */
   icon?: TerraIconName;
   /** Icon size in density-independent pixels. Defaults to `20`. */
@@ -88,7 +81,7 @@ interface ToolbarButtonBaseProps
    * pinned over a hero image) without a wrapper view. Supports `Pressable`'s
    * function form for press-state styling.
    */
-  style?: PressableProps['style'];
+  style?: PressableProps["style"];
 }
 
 /**
@@ -124,17 +117,13 @@ export function ToolbarButton({
   style,
   ...rest
 }: ToolbarButtonProps) {
-  const {
-    background: groupBackground,
-    tint: groupTint,
-    isGrouped,
-  } = useContext(ToolbarGroupContext);
+  const { background: groupBackground, tint: groupTint, isGrouped } = useContext(ToolbarGroupContext);
 
   // Tokens, not resolved values: `Icon` and `Text` each resolve against the
   // live theme, so they keep their own subscriptions.
   const fg = tint ?? groupTint;
   const bg = background ?? groupBackground;
-  const shape = Children.count(children) > 0 ? 'label' : 'icon';
+  const shape = Children.count(children) > 0 ? "label" : "icon";
 
   styles.useVariants({ shape, grouped: isGrouped });
 
@@ -156,7 +145,7 @@ export function ToolbarButton({
       style={(state) => [
         cell,
         styles.fill(bg, state.pressed),
-        typeof style === 'function' ? style(state) : style,
+        typeof style === "function" ? style(state) : style,
       ]}
     >
       {icon !== undefined && <Icon size={iconSize} color={fg} name={icon} />}
@@ -168,14 +157,14 @@ export function ToolbarButton({
 /** Auto-wraps text children in the button's tint, as `Chip` does its label. */
 function renderLabel(children: ReactNode, tint: ColorToken): ReactNode {
   return Children.map(children, (child) => {
-    if (typeof child === 'string') {
+    if (typeof child === "string") {
       return child.trim().length > 0 ? (
         <Text variant={LABEL_VARIANT} color={tint} weight="bold">
           {child}
         </Text>
       ) : null;
     }
-    if (typeof child === 'number') {
+    if (typeof child === "number") {
       return (
         <Text variant={LABEL_VARIANT} color={tint} weight="bold">
           {child}
@@ -216,21 +205,12 @@ export interface ToolbarGroupProps extends ViewProps {
  * </Toolbar.Group>
  * ```
  */
-export const ToolbarGroup = forwardRef<
-  ComponentRef<typeof View>,
-  ToolbarGroupProps
->(function ToolbarGroup(
-  {
-    background = 'surface.default',
-    tint = 'text.default',
-    children,
-    style,
-    ...rest
-  },
+export const ToolbarGroup = forwardRef<ComponentRef<typeof View>, ToolbarGroupProps>(function ToolbarGroup(
+  { background = "surface.default", tint = "text.default", children, style, ...rest },
   ref
 ) {
   const context = useMemo<ToolbarGroupContextValue>(
-    () => ({ background: 'transparent', tint, isGrouped: true }),
+    () => ({ background: "transparent", tint, isGrouped: true }),
     [tint]
   );
 
@@ -271,15 +251,16 @@ export interface ToolbarProps extends ViewProps {
  * </Toolbar>
  * ```
  */
-const ToolbarRoot = forwardRef<ComponentRef<typeof View>, ToolbarProps>(
-  function Toolbar({ gap = '2', children, style, ...rest }, ref) {
-    return (
-      <View ref={ref} style={[styles.row(gap), style]} {...rest}>
-        {children}
-      </View>
-    );
-  }
-);
+const ToolbarRoot = forwardRef<ComponentRef<typeof View>, ToolbarProps>(function Toolbar(
+  { gap = "2", children, style, ...rest },
+  ref
+) {
+  return (
+    <View ref={ref} style={[styles.row(gap), style]} {...rest}>
+      {children}
+    </View>
+  );
+});
 
 type ToolbarComponent = typeof ToolbarRoot & {
   Group: typeof ToolbarGroup;
@@ -294,22 +275,22 @@ Toolbar.Button = ToolbarButton;
 
 const styles = StyleSheet.create((theme) => ({
   row: (gap: SpacingKey) => ({
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     gap: theme.spacing[gap],
   }),
   // `background` is an open `ColorToken` — it accepts raw literals, so it cannot
   // be enumerated as a variant. Resolving inside the factory keeps the fill tied
   // to the live theme.
   capsule: (background: ColorToken) => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.spacing['5'],
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing["5"],
     paddingHorizontal: 10,
     borderRadius: theme.radius.full,
     backgroundColor: resolveThemeColor(background, theme),
     borderWidth: StyleSheet.hairlineWidth,
-    borderColor: theme.color['border.subtle'],
+    borderColor: theme.color["border.subtle"],
     ...theme.elevation.xs,
   }),
   // Geometry is two finite axes, so it belongs in `variants` rather than in
@@ -318,14 +299,14 @@ const styles = StyleSheet.create((theme) => ({
   // supplies it.
   button: {
     height: ITEM_SIZE,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
     borderRadius: theme.radius.full,
     variants: {
       shape: {
         icon: { width: ITEM_SIZE },
-        label: { gap: theme.spacing['1'] },
+        label: { gap: theme.spacing["1"] },
       },
       grouped: {
         true: { paddingHorizontal: 0 },
@@ -333,14 +314,14 @@ const styles = StyleSheet.create((theme) => ({
           minWidth: ITEM_SIZE,
           paddingHorizontal: 10,
           borderWidth: StyleSheet.hairlineWidth,
-          borderColor: theme.color['border.subtle'],
+          borderColor: theme.color["border.subtle"],
           ...theme.elevation.xs,
         },
       },
     },
     compoundVariants: [
       {
-        shape: 'icon',
+        shape: "icon",
         grouped: true,
         styles: { width: undefined },
       },

package/src/components/toolbar/index.ts

@@ -2,5 +2,5 @@ export type {
   ToolbarButtonProps,
   ToolbarGroupProps,
   ToolbarProps,
-} from './Toolbar';
-export { Toolbar } from './Toolbar';
+} from "./Toolbar";
+export { Toolbar } from "./Toolbar";

package/src/context/ThemeProvider.tsx

@@ -1,20 +1,12 @@
-import {
-  createContext,
-  type PropsWithChildren,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { useUnistyles } from 'react-native-unistyles';
-import { bootstrapTerraUI } from '../theme/registry';
-import { applyAccent, applyScheme, getCurrentAccent } from '../theme/runtime';
-import {
-  type ResolvedScreenMargin,
-  resolveScreenMargin,
-} from '../theme/screen-margin';
-import type { Scheme, TerraTheme } from '../theme/types';
+import { createContext, type PropsWithChildren, useCallback, useContext, useMemo, useState } from "react";
+
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { useUnistyles } from "react-native-unistyles";
+
+import { bootstrapTerraUI } from "../theme/registry";
+import { applyAccent, applyScheme, getCurrentAccent } from "../theme/runtime";
+import { type ResolvedScreenMargin, resolveScreenMargin } from "../theme/screen-margin";
+import type { Scheme, TerraTheme } from "../theme/types";
 
 // Ensure the default theme is registered on first import. An app that calls
 // `configureTerraUI` itself still wins, whichever module the bundler evaluates
@@ -37,19 +29,14 @@ const ThemeContext = createContext<ThemeContextValue | null>(null);
  * </TerraUIProvider>
  */
 export const TerraUIProvider = ({ children }: PropsWithChildren) => {
-  const [accent, setAccentState] = useState<string | undefined>(() =>
-    getCurrentAccent()
-  );
+  const [accent, setAccentState] = useState<string | undefined>(() => getCurrentAccent());
 
   const setAccent = useCallback((name: string) => {
     applyAccent(name);
     setAccentState(name);
   }, []);
 
-  const value = useMemo<ThemeContextValue>(
-    () => ({ accent, setAccent }),
-    [accent, setAccent]
-  );
+  const value = useMemo<ThemeContextValue>(() => ({ accent, setAccent }), [accent, setAccent]);
 
   return (
     <ThemeContext.Provider value={value}>
@@ -85,7 +72,7 @@ export function useTheme(): UseThemeResult {
 
   return {
     theme,
-    scheme: (rt.themeName ?? 'light') as Scheme,
+    scheme: (rt.themeName ?? "light") as Scheme,
     setScheme,
     accent: ctx?.accent,
     setAccent: ctx?.setAccent ?? noopSetAccent,
@@ -105,8 +92,6 @@ export function useScreenMargin(): ResolvedScreenMargin {
 
 const noopSetAccent = (_name: string): void => {
   if (__DEV__) {
-    console.warn(
-      '[react-native-terra-ui] setAccent called outside <TerraUIProvider>.'
-    );
+    console.warn("[react-native-terra-ui] setAccent called outside <TerraUIProvider>.");
   }
 };

package/src/context/index.ts

@@ -1,2 +1,2 @@
-export type { UseThemeResult } from './ThemeProvider';
-export { TerraUIProvider, useScreenMargin, useTheme } from './ThemeProvider';
+export type { UseThemeResult } from "./ThemeProvider";
+export { TerraUIProvider, useScreenMargin, useTheme } from "./ThemeProvider";

package/src/index.tsx

@@ -1,6 +1,6 @@
 // biome-ignore-all assist/source/organizeImports: ./context must be first so it
 // configures the default theme before any StyleSheet.create runs.
-export * from './context';
+export * from "./context";
 
-export * from './components';
-export * from './theme';
+export * from "./components";
+export * from "./theme";

package/src/theme/breakpoints.ts

@@ -1,4 +1,4 @@
-import type { UnistylesBreakpoints } from 'react-native-unistyles';
+import type { UnistylesBreakpoints } from "react-native-unistyles";
 
 /**
  * Viewport-width breakpoints (dp), registered with Unistyles via
@@ -16,7 +16,7 @@ export const breakpoints = {
 export type AppBreakpoints = typeof breakpoints;
 export type BreakpointName = keyof AppBreakpoints;
 
-declare module 'react-native-unistyles' {
+declare module "react-native-unistyles" {
   export interface UnistylesBreakpoints extends AppBreakpoints {}
 }
 
@@ -35,7 +35,5 @@ export function resolveBreakpointValue<T>(
   values: Record<BreakpointName, T>,
   breakpoint: keyof UnistylesBreakpoints | undefined
 ): T {
-  return breakpoint !== undefined && breakpoint in values
-    ? values[breakpoint as BreakpointName]
-    : values.xs;
+  return breakpoint !== undefined && breakpoint in values ? values[breakpoint as BreakpointName] : values.xs;
 }

package/src/theme/defaults/icons.tsx

@@ -1,13 +1,9 @@
-import Svg, { Circle, Path } from 'react-native-svg';
+import Svg, { Circle, Path } from "react-native-svg";
 
-import type {
-  TerraIconComponent,
-  TerraIconProps,
-  TerraSemanticIconName,
-} from '../types';
+import type { TerraIconComponent, TerraIconProps, TerraSemanticIconName } from "../types";
 
 const DEFAULT_SIZE = 20;
-const DEFAULT_COLOR = '#000000';
+const DEFAULT_COLOR = "#000000";
 const DEFAULT_STROKE_WIDTH = 2;
 
 const resolveIconProps = ({
@@ -19,17 +15,11 @@ const resolveIconProps = ({
 const strokeProps = (color: string, strokeWidth: number) => ({
   stroke: color,
   strokeWidth,
-  strokeLinecap: 'round' as const,
-  strokeLinejoin: 'round' as const,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
 });
 
-const SvgIcon = ({
-  size,
-  children,
-}: {
-  size: number;
-  children: React.ReactNode;
-}) => (
+const SvgIcon = ({ size, children }: { size: number; children: React.ReactNode }) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     {children}
   </Svg>
@@ -64,9 +54,7 @@ const ForwardIcon: TerraIconComponent = (props) => (
   />
 );
 
-const CloseIcon: TerraIconComponent = (props) => (
-  <PathIcon d="M18 6L6 18M6 6l12 12" {...props} />
-);
+const CloseIcon: TerraIconComponent = (props) => <PathIcon d="M18 6L6 18M6 6l12 12" {...props} />;
 
 const InfoIcon: TerraIconComponent = (props) => {
   const { color, size, strokeWidth } = resolveIconProps(props);
@@ -99,10 +87,7 @@ const WarningIcon: TerraIconComponent = (props) => {
 
   return (
     <SvgIcon size={size}>
-      <Path
-        d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
-        {...stroke}
-      />
+      <Path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" {...stroke} />
       <Path d="M12 9v4" {...stroke} />
       <Path d="M12 17h.01" {...stroke} />
     </SvgIcon>
@@ -136,12 +121,12 @@ export const PersonIcon: TerraIconComponent = (props) => {
 };
 
 export const defaultIcons: Record<TerraSemanticIconName, TerraIconComponent> = {
-  'navigation.back': BackIcon,
-  'navigation.forward': ForwardIcon,
-  'navigation.close': CloseIcon,
-  'status.info': InfoIcon,
-  'status.success': SuccessIcon,
-  'status.warning': WarningIcon,
-  'status.danger': DangerIcon,
+  "navigation.back": BackIcon,
+  "navigation.forward": ForwardIcon,
+  "navigation.close": CloseIcon,
+  "status.info": InfoIcon,
+  "status.success": SuccessIcon,
+  "status.warning": WarningIcon,
+  "status.danger": DangerIcon,
   person: PersonIcon,
 };

package/src/theme/defaults/image.tsx

@@ -1,20 +1,17 @@
-import { createElement } from 'react';
-import { Image, Platform } from 'react-native';
+import { createElement } from "react";
+import { Image, Platform } from "react-native";
 
-import type { TerraImageComponent, TerraImageContentFit } from '../types';
+import type { TerraImageComponent, TerraImageContentFit } from "../types";
 
 const CONTENT_FIT_MAP = {
-  cover: 'cover',
-  contain: 'contain',
-  fill: 'stretch',
-} as const satisfies Record<
-  TerraImageContentFit,
-  'cover' | 'contain' | 'stretch'
->;
+  cover: "cover",
+  contain: "contain",
+  fill: "stretch",
+} as const satisfies Record<TerraImageContentFit, "cover" | "contain" | "stretch">;
 
 /** Default image implementation, backed by React Native's `Image`. */
 export const defaultImage: TerraImageComponent = ({
-  contentFit = 'cover',
+  contentFit = "cover",
   source,
   style,
   accessibilityLabel,
@@ -29,9 +26,7 @@ export const defaultImage: TerraImageComponent = ({
     // `defaultSource` (iOS only) and `loadingIndicatorSource` (Android only).
     // Only one may be set — Android's Image throws outright when it is handed
     // both — so the placeholder goes to whichever this platform reads.
-    ...(Platform.OS === 'android'
-      ? { loadingIndicatorSource: placeholder }
-      : { defaultSource: placeholder }),
+    ...(Platform.OS === "android" ? { loadingIndicatorSource: placeholder } : { defaultSource: placeholder }),
     resizeMode: CONTENT_FIT_MAP[contentFit],
     onError: onError ? () => onError() : undefined,
   });

package/src/theme/index.ts

@@ -6,15 +6,15 @@
 // resolved `defaultLightTheme` / `defaultDarkTheme` are the public surface.
 
 // ─── Utilities (color resolution + accent/merge/typography helpers) ──────────
-export { normalizeAccent } from '#utils/accent-utils';
-export { readableOn, shade, withAlpha } from '#utils/color-utils';
-export type { DeepPartial } from '#utils/deep-merge';
-export { deepMerge } from '#utils/deep-merge';
-export { resolveThemeColor } from '#utils/resolve-theme-color';
-export { FONT_WEIGHT_VALUE, SYSTEM_FONT } from '#utils/typography';
+export { normalizeAccent } from "#utils/accent-utils";
+export { readableOn, shade, withAlpha } from "#utils/color-utils";
+export type { DeepPartial } from "#utils/deep-merge";
+export { deepMerge } from "#utils/deep-merge";
+export { resolveThemeColor } from "#utils/resolve-theme-color";
+export { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
 // ─── Breakpoints ─────────────────────────────────────────────────────────────
-export type { AppBreakpoints, BreakpointName } from './breakpoints';
-export { breakpoints, resolveBreakpointValue } from './breakpoints';
+export type { AppBreakpoints, BreakpointName } from "./breakpoints";
+export { breakpoints, resolveBreakpointValue } from "./breakpoints";
 // ─── Config + runtime ───────────────────────────────────────────────────────
 export {
   configureTerraUI,
@@ -26,12 +26,12 @@ export {
   getRequiredIcon,
   getSurfaceElevation,
   resolveTheme,
-} from './registry';
-export { applyAccent, applyScheme, getCurrentAccent } from './runtime';
-export type { ResolvedScreenMargin } from './screen-margin';
-export { resolveScreenMargin } from './screen-margin';
+} from "./registry";
+export { applyAccent, applyScheme, getCurrentAccent } from "./runtime";
+export type { ResolvedScreenMargin } from "./screen-margin";
+export { resolveScreenMargin } from "./screen-margin";
 // ─── Default themes ───────────────────────────────────────────────────────────
-export { defaultDarkTheme, defaultLightTheme } from './theme';
+export { defaultDarkTheme, defaultLightTheme } from "./theme";
 // ─── Types ────────────────────────────────────────────────────────────────────
 export type {
   Accent,
@@ -74,4 +74,4 @@ export type {
   ThemeRadiusOverride,
   TypeStyle,
   Typography,
-} from './types';
+} from "./types";