@nexub/react-native 0.0.0-stage → 2.2.0

package/src/components/containers.tsx

@@ -0,0 +1,352 @@
+import * as React from 'react';
+import {
+  Switch as RNSwitch,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import Animated, { LayoutAnimationConfig } from 'react-native-reanimated';
+import { Check, ChevronDown, ChevronRight } from '@nexub/icons/native';
+import { useControllableState } from '../hooks/useControllableState';
+import { Pressable } from '../primitives/Pressable';
+import { Surface, type SurfaceProps } from '../primitives/Surface';
+import { Text } from '../primitives/Text';
+import { useTheme } from '../theme/ThemeProvider';
+import { nxEnter, nxExit, nxLayout } from '../theme/motion';
+import { Divider } from './display';
+import { disabledOpacity } from './shared';
+
+// ─── Card ────────────────────────────────────────────────────────────────────
+
+export interface CardProps extends SurfaceProps {
+  /** Makes the whole card one pressable target (navigates to detail). */
+  onPress?: () => void;
+  /** Accessible name when pressable. */
+  accessibilityLabel?: string;
+}
+
+/** Content container on a tonal tier. Hierarchy through tone, not shadow (elevation for floating cards only). */
+export function Card({
+  onPress,
+  accessibilityLabel,
+  tone = 'surface-container-low',
+  radius = 'container',
+  style,
+  children,
+  ...rest
+}: CardProps) {
+  const { tokens } = useTheme();
+  const surface = (
+    <Surface
+      tone={tone}
+      radius={radius}
+      style={[{ padding: tokens.spacing[4], gap: tokens.spacing[2] }, style]}
+      {...rest}
+    >
+      {children}
+    </Surface>
+  );
+  if (!onPress) return surface;
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      style={{ borderRadius: tokens.shape[radius as 'container'] ?? radius }}
+    >
+      {surface}
+    </Pressable>
+  );
+}
+
+// ─── ListItem ────────────────────────────────────────────────────────────────
+
+export type ListItemVariant =
+  'static' | 'navigation' | 'switch' | 'checkbox' | 'radio' | 'button' | 'value';
+
+export interface ListItemProps {
+  title: string;
+  subtitle?: string;
+  /** Icon, Avatar or flag before the text. */
+  leading?: React.ReactNode;
+  /** Trailing text (variant 'value' or 'navigation'), e.g. "English" or an amount. */
+  value?: string;
+  /** Custom trailing content (overrides the variant's). */
+  trailing?: React.ReactNode;
+  /** @default 'navigation' when onPress is set, else 'static' */
+  variant?: ListItemVariant;
+  /** For switch / checkbox / radio rows. */
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  onPress?: () => void;
+  /** Button rows: red, for destructive actions (Sign out, Delete). */
+  destructive?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * One row of a list (Wise "List Item" model). The whole row is a single
+ * target and a single screen-reader element: "Title, subtitle, value".
+ */
+export function ListItem({
+  title,
+  subtitle,
+  leading,
+  value,
+  trailing,
+  variant: variantProp,
+  checked,
+  onCheckedChange,
+  onPress,
+  destructive,
+  disabled,
+  style,
+}: ListItemProps) {
+  const theme = useTheme();
+  const { roles, tokens, dir } = theme;
+  const variant: ListItemVariant = variantProp ?? (onPress ? 'navigation' : 'static');
+  const toggles = variant === 'switch' || variant === 'checkbox' || variant === 'radio';
+  const press = toggles ? () => onCheckedChange?.(variant === 'radio' ? true : !checked) : onPress;
+  const interactive = !!press && variant !== 'static' && variant !== 'value';
+  const role = (
+    {
+      switch: 'switch',
+      checkbox: 'checkbox',
+      radio: 'radio',
+      navigation: 'button',
+      button: 'button',
+    } as const
+  )[variant as 'switch'];
+
+  const trail =
+    trailing ??
+    (variant === 'switch' ? (
+      <View
+        pointerEvents="none"
+        importantForAccessibility="no-hide-descendants"
+        accessibilityElementsHidden
+      >
+        <RNSwitch
+          value={!!checked}
+          trackColor={{ false: roles['surface-container-highest'], true: roles.primary }}
+          ios_backgroundColor={roles['surface-container-highest']}
+          thumbColor={roles['surface-container-lowest']}
+        />
+      </View>
+    ) : variant === 'checkbox' || variant === 'radio' ? (
+      checked ? (
+        <Check size="md" color={roles.primary} />
+      ) : null
+    ) : variant === 'navigation' ? (
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+        {value && (
+          <Text variant="body-md" color="on-surface-variant" tabular numberOfLines={1}>
+            {value}
+          </Text>
+        )}
+        <ChevronRight
+          size="sm"
+          color={roles['on-surface-muted']}
+          style={dir === 'rtl' ? { transform: [{ scaleX: -1 }] } : undefined}
+        />
+      </View>
+    ) : variant === 'value' && value ? (
+      <Text variant="body-md" color="on-surface-variant" tabular numberOfLines={1}>
+        {value}
+      </Text>
+    ) : null);
+
+  const content = (
+    <View
+      style={[
+        {
+          minHeight: subtitle ? 72 : 56,
+          paddingHorizontal: tokens.spacing[4],
+          paddingVertical: tokens.spacing[3],
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: tokens.spacing[3],
+          opacity: disabled ? disabledOpacity(theme) : 1,
+        },
+        style,
+      ]}
+    >
+      {leading}
+      <View style={{ flex: 1, gap: 2, alignItems: variant === 'button' ? 'center' : 'flex-start' }}>
+        <Text
+          variant="body-lg"
+          color={variant === 'button' ? (destructive ? 'error' : 'primary') : 'on-surface'}
+        >
+          {title}
+        </Text>
+        {subtitle && (
+          <Text variant="body-sm" color="on-surface-variant">
+            {subtitle}
+          </Text>
+        )}
+      </View>
+      {trail}
+    </View>
+  );
+
+  const a11yLabel = [title, subtitle, variant === 'switch' || toggles ? undefined : value]
+    .filter(Boolean)
+    .join(', ');
+  if (!interactive) {
+    return (
+      <View accessible accessibilityLabel={a11yLabel}>
+        {content}
+      </View>
+    );
+  }
+  return (
+    <Pressable
+      accessibilityRole={role}
+      accessibilityLabel={a11yLabel}
+      accessibilityState={{ disabled: !!disabled, checked: toggles ? !!checked : undefined }}
+      disabled={disabled}
+      haptic={
+        variant === 'radio' && !checked
+          ? 'selection'
+          : variant === 'checkbox'
+            ? 'selection'
+            : undefined
+      }
+      onPress={press}
+      pressScale={false}
+    >
+      {content}
+    </Pressable>
+  );
+}
+
+// ─── ListSection ─────────────────────────────────────────────────────────────
+
+export interface ListSectionProps extends ViewProps {
+  /** Section title above the group. */
+  header?: string;
+  /** Helper text below the group. */
+  footer?: string;
+  /** Divider inset: 16 for text rows, 56 when rows have a leading icon. @default 16 */
+  inset?: number;
+  children: React.ReactNode;
+}
+
+/** Inset-grouped rows on a container tier, hairlines between rows only. */
+export function ListSection({
+  header,
+  footer,
+  inset = 16,
+  children,
+  style,
+  ...rest
+}: ListSectionProps) {
+  const { roles, tokens } = useTheme();
+  const rows = React.Children.toArray(children).filter(Boolean);
+  return (
+    <View style={[{ gap: tokens.spacing[2] }, style]} {...rest}>
+      {header && (
+        <Text
+          variant="title-sm"
+          color="on-surface-variant"
+          accessibilityRole="header"
+          style={{ paddingHorizontal: tokens.spacing[4] }}
+        >
+          {header}
+        </Text>
+      )}
+      <View
+        style={{
+          borderRadius: tokens.shape.container,
+          overflow: 'hidden',
+          backgroundColor: roles['surface-container-lowest'],
+        }}
+      >
+        {/* Rows added later grow in, removed rows fade out and the rest glide
+            into place. Rows present on first render don't animate. */}
+        <LayoutAnimationConfig skipEntering>
+          {rows.map((row, i) => (
+            <Animated.View
+              key={React.isValidElement(row) && row.key != null ? row.key : i}
+              entering={nxEnter('fade')}
+              exiting={nxExit('fade')}
+              layout={nxLayout()}
+            >
+              {i > 0 && <Divider inset={inset} />}
+              {row}
+            </Animated.View>
+          ))}
+        </LayoutAnimationConfig>
+      </View>
+      {footer && (
+        <Text
+          variant="body-sm"
+          color="on-surface-variant"
+          style={{ paddingHorizontal: tokens.spacing[4] }}
+        >
+          {footer}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+// ─── Accordion ───────────────────────────────────────────────────────────────
+
+export interface AccordionProps {
+  title: string;
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Disclosure: a header row that shows or hides its content. */
+export function Accordion({
+  title,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  children,
+  style,
+}: AccordionProps) {
+  const { roles, tokens } = useTheme();
+  const [open, setOpen] = useControllableState({
+    value: expanded,
+    defaultValue: defaultExpanded,
+    onChange: onExpandedChange,
+  });
+  return (
+    <View style={style}>
+      <Pressable
+        accessibilityLabel={title}
+        accessibilityState={{ expanded: open }}
+        onPress={() => setOpen(!open)}
+        pressScale={false}
+        style={{
+          minHeight: 56,
+          paddingHorizontal: tokens.spacing[4],
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: tokens.spacing[3],
+        }}
+      >
+        <Text variant="title-md" style={{ flex: 1 }}>
+          {title}
+        </Text>
+        <ChevronDown
+          size="sm"
+          color={roles['on-surface-variant']}
+          style={open ? { transform: [{ rotate: '180deg' }] } : undefined}
+        />
+      </Pressable>
+      {open && (
+        <View style={{ paddingHorizontal: tokens.spacing[4], paddingBottom: tokens.spacing[4] }}>
+          {children}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/display.tsx

@@ -0,0 +1,345 @@
+import * as React from 'react';
+import {
+  Image,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import Animated, { LayoutAnimationConfig } from 'react-native-reanimated';
+import { moneyFormatter, type ToneValue } from '@nexub/core';
+import type { NativeIconProps } from '@nexub/icons/native';
+import { Text } from '../primitives/Text';
+import { useTheme } from '../theme/ThemeProvider';
+import { nxEnter } from '../theme/motion';
+import { TONE_CONTAINERS, TONE_ROLES, TONE_TEXT } from './shared';
+
+// ─── Amount ──────────────────────────────────────────────────────────────────
+
+export interface AmountProps {
+  /**
+   * Animate value changes: the new figure rises in on the spatial spring.
+   * Wraps the text in a view, so leave it off when Amount sits inside other text.
+   * @default false
+   */
+  animate?: boolean;
+  value: number;
+  /** ISO 4217 code, e.g. 'USD', 'EUR', 'INR'. */
+  currency: string;
+  /** BCP 47 locale. @default the provider's */
+  locale?: string;
+  /** `display`: a hero figure in the brand face with a quieter symbol and minor units. @default 'md' */
+  size?: 'sm' | 'md' | 'lg' | 'display';
+  /** `auto` colours gains success and losses error (use with signDisplay). @default 'neutral' */
+  tone?: 'neutral' | 'auto';
+  /** e.g. 'exceptZero' to show "+" on gains. */
+  signDisplay?: Intl.NumberFormatOptions['signDisplay'];
+  style?: StyleProp<ViewStyle>;
+}
+
+const AMOUNT_TYPE = {
+  sm: 'body-sm',
+  md: 'body-md',
+  lg: 'title-lg',
+  display: 'display-sm',
+} as const;
+
+/** Money, formatted by Intl with tabular figures. Same API as web `Amount`. */
+export function Amount({
+  value,
+  currency,
+  locale,
+  size = 'md',
+  tone = 'neutral',
+  signDisplay,
+  animate = false,
+  style,
+}: AmountProps) {
+  const figure = (
+    <AmountFigure value={value} currency={currency} locale={locale} size={size} tone={tone} signDisplay={signDisplay} style={style} />
+  );
+  if (!animate) return figure;
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <Animated.View key={value} entering={nxEnter('up', 'fast')} style={{ alignSelf: 'flex-start' }}>
+        {figure}
+      </Animated.View>
+    </LayoutAnimationConfig>
+  );
+}
+
+function AmountFigure({
+  value,
+  currency,
+  locale,
+  size = 'md',
+  tone = 'neutral',
+  signDisplay,
+  style,
+}: Omit<AmountProps, 'animate'>) {
+  const theme = useTheme();
+  const fmt = moneyFormatter(currency, locale ?? theme.locale, signDisplay ? { signDisplay } : {});
+  const color = tone === 'auto' && value !== 0 ? (value > 0 ? 'success' : 'error') : 'on-surface';
+  const variant = AMOUNT_TYPE[size];
+  // Hermes on iOS has no formatToParts: show the hero figure as one string there.
+  if (size !== 'display' || typeof fmt.formatToParts !== 'function') {
+    return (
+      <Text variant={variant} color={color} tabular style={style as never}>
+        {fmt.format(value)}
+      </Text>
+    );
+  }
+  // Hero figure: symbol and minor units quieter, like web.
+  const minor = (t: string) => t === 'currency' || t === 'decimal' || t === 'fraction';
+  return (
+    <Text
+      variant={variant}
+      color={color}
+      tabular
+      accessibilityLabel={fmt.format(value)}
+      style={style as never}
+    >
+      {fmt.formatToParts(value).map((p, i) =>
+        minor(p.type) ? (
+          <Text key={i} variant="title-lg" color="on-surface-variant">
+            {p.value}
+          </Text>
+        ) : (
+          p.value
+        ),
+      )}
+    </Text>
+  );
+}
+
+// ─── Badge ───────────────────────────────────────────────────────────────────
+
+export interface BadgeProps extends ViewProps {
+  children?: string | number;
+  /** @default 'neutral' */
+  tone?: ToneValue;
+  /** @default 'soft' */
+  variant?: 'solid' | 'soft' | 'outline';
+  /** @default 'md' */
+  size?: 'sm' | 'md';
+  /** A status dot before the label (replaces web StatusPill). */
+  dot?: boolean;
+  leadingIcon?: React.ComponentType<NativeIconProps>;
+}
+
+/** Status, count or category label. Never tappable; use `Chip` for anything a user toggles. */
+export function Badge({
+  children,
+  tone = 'neutral',
+  variant = 'soft',
+  size = 'md',
+  dot,
+  leadingIcon: Lead,
+  style,
+  ...rest
+}: BadgeProps) {
+  const { roles, tokens } = useTheme();
+  const [bg, fg] = variant === 'solid' ? TONE_ROLES[tone] : TONE_CONTAINERS[tone];
+  const fgColor = variant === 'outline' ? TONE_TEXT[tone] : fg;
+  const height = size === 'sm' ? 20 : 24;
+  return (
+    <View
+      style={[
+        {
+          height,
+          minWidth: height,
+          paddingHorizontal: size === 'sm' ? 6 : 8,
+          borderRadius: tokens.shape.control,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 4,
+          alignSelf: 'flex-start',
+          backgroundColor: variant === 'outline' ? 'transparent' : roles[bg],
+        },
+        variant === 'outline' && { borderWidth: 1, borderColor: roles['outline-variant'] },
+        style,
+      ]}
+      {...rest}
+    >
+      {dot && (
+        <View
+          style={{
+            width: 6,
+            height: 6,
+            borderRadius: 3,
+            backgroundColor:
+              roles[TONE_TEXT[tone] === 'on-surface-variant' ? 'outline' : TONE_TEXT[tone]],
+          }}
+        />
+      )}
+      {Lead && <Lead size="xs" color={roles[fgColor]} />}
+      {children !== undefined && (
+        <Text
+          variant={size === 'sm' ? 'label-sm' : 'label-md'}
+          color={fgColor}
+          tabular
+          numberOfLines={1}
+        >
+          {String(children)}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+// ─── Avatar ──────────────────────────────────────────────────────────────────
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarProps extends ViewProps {
+  /** Image URL. Falls back to initials when missing or broken. */
+  src?: string;
+  /** Person or org name: initials and the accessible name. */
+  name?: string;
+  /** @default 'md' */
+  size?: AvatarSize;
+  /** Online/status dot. */
+  badge?: boolean;
+}
+
+const initials = (name = '') =>
+  name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w[0]?.toUpperCase() ?? '')
+    .join('');
+
+export function Avatar({ src, name, size = 'md', badge, style, ...rest }: AvatarProps) {
+  const { roles, tokens } = useTheme();
+  const [broken, setBroken] = React.useState(false);
+  const px = tokens.size.avatar[size];
+  return (
+    <View
+      accessible={!!name}
+      accessibilityRole={name ? 'image' : undefined}
+      accessibilityLabel={name}
+      style={[{ width: px, height: px }, style]}
+      {...rest}
+    >
+      <View
+        style={{
+          width: px,
+          height: px,
+          borderRadius: px / 2,
+          overflow: 'hidden',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: roles['secondary-container'],
+        }}
+      >
+        {src && !broken ? (
+          <Image
+            source={{ uri: src }}
+            style={StyleSheet.absoluteFill}
+            onError={() => setBroken(true)}
+          />
+        ) : (
+          <Text
+            variant={px >= 48 ? 'title-md' : 'label-md'}
+            color="on-secondary-container"
+            style={{ fontSize: px * 0.4, lineHeight: px * 0.5 }}
+            maxFontSizeMultiplier={1}
+          >
+            {initials(name)}
+          </Text>
+        )}
+      </View>
+      {badge && (
+        <View
+          style={{
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            width: px / 4,
+            height: px / 4,
+            borderRadius: px / 8,
+            backgroundColor: roles.success,
+            borderWidth: 2,
+            borderColor: roles.surface,
+          }}
+        />
+      )}
+    </View>
+  );
+}
+
+export interface AvatarGroupProps extends ViewProps {
+  children: React.ReactElement<AvatarProps>[];
+  /** Avatars shown before "+N". @default 4 */
+  max?: number;
+  size?: AvatarSize;
+}
+
+export function AvatarGroup({ children, max = 4, size = 'sm', style, ...rest }: AvatarGroupProps) {
+  const { roles, tokens, messages } = useTheme();
+  const px = tokens.size.avatar[size];
+  const shown = children.slice(0, max);
+  const extra = children.length - shown.length;
+  const ring = { borderWidth: 2, borderColor: roles.surface, borderRadius: px / 2 + 2 };
+  return (
+    <View style={[{ flexDirection: 'row' }, style]} {...rest}>
+      {shown.map((child, i) => (
+        <View key={i} style={[ring, i > 0 && { marginStart: -px / 3 }]}>
+          {React.cloneElement(child, { size })}
+        </View>
+      ))}
+      {extra > 0 && (
+        <View
+          accessible
+          accessibilityLabel={messages.moreCount(extra)}
+          style={[
+            ring,
+            {
+              marginStart: -px / 3,
+              width: px + 4,
+              height: px + 4,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: roles['surface-container-high'],
+            },
+          ]}
+        >
+          <Text variant="label-sm" color="on-surface-variant" tabular>
+            +{extra}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+// ─── Divider ─────────────────────────────────────────────────────────────────
+
+export interface DividerProps extends ViewProps {
+  /** Indent from the start edge (aligns with list text after a leading icon). */
+  inset?: number;
+  /** @default 'horizontal' */
+  orientation?: 'horizontal' | 'vertical';
+}
+
+/** Hairline separator. Prefer spacing and tonal tiers first (Calm Depth: remove dividers before adding them). */
+export function Divider({ inset = 0, orientation = 'horizontal', style, ...rest }: DividerProps) {
+  const { roles } = useTheme();
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={[
+        orientation === 'horizontal'
+          ? { height: StyleSheet.hairlineWidth, marginStart: inset, alignSelf: 'stretch' }
+          : { width: StyleSheet.hairlineWidth, alignSelf: 'stretch' },
+        { backgroundColor: roles['outline-variant'] },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}