@unif/react-native-design 0.1.0

package/src/components/ui/Input/Input.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import { TextFieldBase, type TextInputRef } from '../TextField/TextFieldBase';
+import type { InputProps } from './types';
+
+/**
+ * 单行文本输入框(多行内容请用 `<Textarea />`)。
+ *
+ * 视觉状态由 props 隐式驱动:idle / focus / filled / error / disabled。
+ *
+ * 实现层走 `<TextFieldBase multiline={false}>`,本组件是薄 wrap,
+ * 公开 API 跟历史完全一致。
+ *
+ * Ref:forwardRef<TextInput> —— 业务表单调 `inputRef.current?.focus()` 聚焦错误字段。
+ */
+export const Input = forwardRef<TextInputRef, InputProps>(
+  function Input(props, ref) {
+    return <TextFieldBase ref={ref} multiline={false} {...props} />;
+  }
+);
+
+Input.displayName = 'Input';

package/src/components/ui/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './types';

package/src/components/ui/Input/types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextInputProps, ViewStyle } from 'react-native';
+
+/**
+ * 单行文本输入框。多行内容请用 `<Textarea />`。
+ *
+ * 继承除 `style` / `multiline` / `numberOfLines` 之外的全部 RN `TextInputProps`，业务可直接传
+ * `keyboardType` / `autoCapitalize` / `secureTextEntry` 等原生行为。
+ *
+ * `multiline` / `numberOfLines` 故意 omit —— 单行场景这俩属性无意义，多行请用 Textarea。
+ */
+export type InputProps = Omit<
+  TextInputProps,
+  'style' | 'multiline' | 'numberOfLines'
+> & {
+  /** 可选的前置插槽（图标、label 等） */
+  leading?: ReactNode;
+  /** 可选的后置插槽（清除按钮、眼睛切换等） */
+  trailing?: ReactNode;
+  /** 错误信息 —— 容器进入错误态并在下方显示 */
+  error?: string;
+  /** 覆盖单行高度，默认 44（hitTarget） */
+  height?: number;
+  /** 容器外层样式（含 leading/trailing 整个 wrap） */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * 整体禁用：等价于 `editable={false}` + 视觉变灰；优先级高于 RN 原生 `editable`。
+   * 业务表单常用此 prop 而非 editable，命名更直觉。
+   */
+  disabled?: boolean;
+};

package/src/components/ui/Logo/Logo.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Image } from 'react-native';
+import type { LogoProps } from './types';
+
+// Native/Metro:require() 返回 asset 数字 ID;Web/webpack:返回 URL 字符串,
+// 但 RN-Web Image 不解析 webpack URL,所以走 docusaurus 镜像的 `/img/logo.png` 公开路径。
+const RAW_SOURCE = require('../../../assets/logo.png');
+const SOURCE: number | { uri: string } =
+  typeof RAW_SOURCE === 'string' ? { uri: '/img/logo.png' } : RAW_SOURCE;
+
+/**
+ * Unif 主品牌标 —— 1024×1024 RGBA PNG。
+ *
+ * **不要重画 / 改色 / 描边 / 加阴影**,品牌标准图。
+ * 最小尺寸 24×24,更小请改用 `static/img/favicon.svg`。
+ */
+export function Logo({
+  size = 64,
+  borderRadius,
+  label = 'Unif',
+  style,
+  testID,
+}: LogoProps): React.JSX.Element {
+  return (
+    <Image
+      source={SOURCE}
+      accessibilityLabel={label}
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: borderRadius ?? size / 4,
+        },
+        style,
+      ]}
+      resizeMode="cover"
+      testID={testID}
+    />
+  );
+}

package/src/components/ui/Logo/index.ts

@@ -0,0 +1,2 @@
+export { Logo } from './Logo';
+export type { LogoProps } from './types';

package/src/components/ui/Logo/types.ts

@@ -0,0 +1,13 @@
+import type { ImageStyle, StyleProp } from 'react-native';
+
+export type LogoProps = {
+  /** 渲染尺寸（正方形）。默认 64。 */
+  size?: number;
+  /** 覆盖圆角。默认 `size / 4`，呈柔和的 squircle。 */
+  borderRadius?: number;
+  /** 无障碍朗读文本。默认 'Unif';业务侧需要 APP_NAME 时显式传入。 */
+  label?: string;
+  style?: StyleProp<ImageStyle>;
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/NavBar/NavBar.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { useColors, useThemedStyles } from '../../../theme';
+import { IconButton } from '../IconButton';
+import { isSlot } from './isSlot';
+import { makeStyles } from './styles';
+import type { NavBarProps, NavBarSlotConfig } from './types';
+
+/** NavBarSlotConfig → IconButton(variant='ghost' + 外部 tint)。
+ *  accessibilityLabel 必填(IconButton 强制),fallback 到 icon 名。 */
+function renderSlot(slot: NavBarSlotConfig, tint: string) {
+  return (
+    <IconButton
+      icon={slot.icon}
+      onPress={slot.onPress}
+      variant="ghost"
+      color={tint}
+      accessibilityLabel={slot.accessibilityLabel ?? slot.icon}
+    />
+  );
+}
+
+/** left / right slot:NavBarSlotConfig → IconButton,ReactNode → 原样。 */
+function resolveSlot(
+  slot: NavBarProps['left'] | NavBarProps['right'],
+  tint: string
+): React.ReactNode {
+  if (!slot) return null;
+  if (isSlot(slot)) return renderSlot(slot, tint);
+  return slot;
+}
+
+export function NavBar({
+  title,
+  subtitle,
+  left,
+  right,
+  variant = 'default',
+  testID,
+}: NavBarProps) {
+  const c = useColors();
+  const styles = useThemedStyles(makeStyles);
+  const isBrand = variant === 'brand';
+  const isTransparent = variant === 'transparent';
+  // brand 实底白字;default + transparent 都走深字(transparent 用在浅色
+  // hero 渐变之上,白字看不清)。后续若有"相机 / 地图"等深色浮层场景需要
+  // 白字 transparent navbar,再加 'transparentLight' variant。
+  const tint = isBrand ? c.onPrimary : c.foreground;
+  const subtint = isBrand ? c.onPrimaryMuted : c.foregroundSubtle;
+  return (
+    <View
+      style={[
+        styles.bar,
+        isBrand && styles.barBrand,
+        isTransparent && styles.barTransparent,
+      ]}
+      testID={testID}
+    >
+      <View style={styles.side}>{resolveSlot(left, tint)}</View>
+      <View style={styles.center}>
+        <Text style={[styles.title, { color: tint }]} numberOfLines={1}>
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text style={[styles.subtitle, { color: subtint }]} numberOfLines={1}>
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+      <View style={[styles.side, styles.sideRight]}>
+        {resolveSlot(right, tint)}
+      </View>
+    </View>
+  );
+}

package/src/components/ui/NavBar/index.ts

@@ -0,0 +1,2 @@
+export { NavBar } from './NavBar';
+export type { NavBarProps, NavBarSlotConfig } from './types';

package/src/components/ui/NavBar/isSlot.ts

@@ -0,0 +1,9 @@
+import type { NavBarSlotConfig } from './types';
+
+/**
+ * Type guard：判断 left/right 是否为 NavBarSlotConfig 对象（含 icon 字段）。
+ * 不是的话视为 ReactNode 自定义内容。
+ */
+export function isSlot(v: unknown): v is NavBarSlotConfig {
+  return typeof v === 'object' && v !== null && 'icon' in v;
+}

package/src/components/ui/NavBar/styles.ts

@@ -0,0 +1,49 @@
+import { StyleSheet } from 'react-native';
+import { fixed, fw, r, space, type as t } from '../../../theme';
+import type { ColorTokens } from '../../../theme';
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    bar: {
+      height: fixed.navbarH,
+      paddingHorizontal: space[5],
+      backgroundColor: c.surface,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: c.outline,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    barBrand: {
+      backgroundColor: c.primary,
+      borderBottomWidth: 0,
+    },
+    barTransparent: {
+      backgroundColor: 'transparent',
+      borderBottomWidth: 0,
+    },
+    side: {
+      minWidth: fixed.hitTarget,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[3],
+    },
+    sideRight: {
+      justifyContent: 'flex-end',
+    },
+    center: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    title: {
+      // h3=15 是 chat/ui 通用正文标题字号,navbar 标题再大 0.5 / 字距 -0.2
+      // 是品牌印刷级排版微调,无对应 token,保留 inline delta(同 Privacy h1+2)
+      fontSize: t.h3 + 0.5,
+      fontWeight: fw.semi,
+      letterSpacing: -0.2,
+    },
+    subtitle: {
+      fontSize: t.micro,
+      marginTop: r(2),
+    },
+  });

package/src/components/ui/NavBar/types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { IconName } from '../Icon';
+
+export type NavBarSlotConfig = {
+  icon: IconName;
+  onPress?: () => void;
+  /** 屏幕阅读器读出的功能描述（icon-only 必填） */
+  accessibilityLabel?: string;
+};
+
+export type NavBarProps = {
+  /** 主标题 */
+  title: string;
+  /** 副标题（可选，主标题下方一行） */
+  subtitle?: string;
+  /** 左侧槽位：传 NavBarSlotConfig 自动用 IconButton 渲染 / 传 ReactNode 自定义 */
+  left?: ReactNode | NavBarSlotConfig;
+  /** 右侧槽位：同 left */
+  right?: ReactNode | NavBarSlotConfig;
+  /**
+   * 视觉变体，默认 'default'：
+   * - `default`：白底 + hairline 底边
+   * - `brand`：品牌橙底 + 白字（登录 / 启动场景）
+   * - `transparent`：完全透明 + 深字(c.foreground)+ 无 border —— 浮在浅色 hero
+   *   渐变之上的子页(我的名片 / 等)。若需白字深色浮层场景,后续加
+   *   'transparentLight' variant。
+   */
+  variant?: 'default' | 'brand' | 'transparent';
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Pressable } from 'react-native-gesture-handler';
+import { Icon } from '../Icon';
+import { Input } from '../Input';
+import { useColors } from '../../../theme';
+import { styles } from './styles';
+import type { PasswordInputProps } from './types';
+
+/** 密码 Input —— Input + leading lock + trailing eye 切换明文 / 密文。
+ *  showPw 内部 useState,caller 只关心 value/onChangeText。
+ *  a11y:label 已表达"显示/隐藏密码"意图,不再加 accessibilityHint(避免
+ *  SR 朗读 over-hint,见 CLAUDE.md a11y 规范)。 */
+export function PasswordInput({
+  value,
+  onChangeText,
+  placeholder = '请输入密码',
+  testID,
+  inputProps,
+}: PasswordInputProps): React.JSX.Element {
+  const c = useColors();
+  const [showPw, setShowPw] = useState(false);
+
+  return (
+    <Input
+      testID={testID}
+      value={value}
+      onChangeText={onChangeText}
+      placeholder={placeholder}
+      {...inputProps}
+      secureTextEntry={!showPw}
+      leading={<Icon name="lock" size={18} color={c.iconFaint40} />}
+      trailing={
+        <Pressable
+          testID={testID ? `${testID}-toggle` : undefined}
+          style={styles.eyeBtn}
+          onPress={() => setShowPw((v) => !v)}
+          accessibilityRole="button"
+          accessibilityLabel={showPw ? '隐藏密码' : '显示密码'}
+          hitSlop={8}
+        >
+          <Icon
+            name={showPw ? 'eye' : 'eye-off'}
+            size={16}
+            color={c.iconFaint40}
+          />
+        </Pressable>
+      }
+    />
+  );
+}

package/src/components/ui/PasswordInput/index.ts

@@ -0,0 +1,2 @@
+export { PasswordInput } from './PasswordInput';
+export type { PasswordInputProps } from './types';

package/src/components/ui/PasswordInput/styles.ts

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+import { space } from '../../../theme';
+
+/** eye Pressable hit area 微间距,跟 ForgotPassword 同款 4px。 */
+export const styles = StyleSheet.create({
+  eyeBtn: { paddingHorizontal: space['1'] },
+});

package/src/components/ui/PasswordInput/types.ts

@@ -0,0 +1,12 @@
+import type { TextInputProps } from 'react-native';
+
+export type PasswordInputProps = {
+  value: string;
+  onChangeText: (v: string) => void;
+  /** 默认 "请输入密码" */
+  placeholder?: string;
+  testID?: string;
+  /** 透传给底层 Input 的其他 RN TextInput 属性(maxLength / autoFocus 等)。
+   *  ⚠ 不要传 secureTextEntry,组件自管;传了会被组件内部覆盖。 */
+  inputProps?: Partial<TextInputProps>;
+};

package/src/components/ui/Pulse/Pulse.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Animated from 'react-native-reanimated';
+import { usePulse } from './usePulse';
+import type { PulseProps } from './types';
+
+export function Pulse({
+  children,
+  testID,
+  ...opts
+}: PulseProps & { children: React.ReactNode }): React.JSX.Element {
+  const animatedStyle = usePulse(opts);
+  return (
+    <Animated.View style={animatedStyle} testID={testID}>
+      {children}
+    </Animated.View>
+  );
+}

package/src/components/ui/Pulse/PulseDot.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Animated from 'react-native-reanimated';
+import { useColors } from '../../../theme';
+import { usePulse } from './usePulse';
+import type { PulseDotProps } from './types';
+
+export function PulseDot({
+  size = 6,
+  color,
+  from = 0.5,
+  to = 1,
+  duration = 700,
+  delay = 0,
+  testID,
+}: PulseDotProps = {}): React.JSX.Element {
+  const c = useColors();
+  const fill = color ?? c.primary;
+  const animatedStyle = usePulse({ from, to, duration, delay });
+  return (
+    <Animated.View
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: fill,
+        },
+        animatedStyle,
+      ]}
+      testID={testID}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    />
+  );
+}

package/src/components/ui/Pulse/index.ts

@@ -0,0 +1,4 @@
+export { usePulse } from './usePulse';
+export { Pulse } from './Pulse';
+export { PulseDot } from './PulseDot';
+export type { PulseOptions, PulseProps, PulseDotProps } from './types';

package/src/components/ui/Pulse/types.ts

@@ -0,0 +1,22 @@
+export type PulseOptions = {
+  /** 透明度下界（默认 0.6） */
+  from?: number;
+  /** 透明度上界（默认 1） */
+  to?: number;
+  /** 半周期时长（毫秒，默认 700） */
+  duration?: number;
+  /** 首次周期之前的延迟（默认 0） */
+  delay?: number;
+};
+
+export type PulseDotProps = PulseOptions & {
+  size?: number;
+  color?: string;
+  /** E2E / 测试定位 */
+  testID?: string;
+};
+
+export type PulseProps = PulseOptions & {
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/Pulse/usePulse.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import type { PulseOptions } from './types';
+
+/**
+ * 在两个 opacity 值之间无限循环，返回可直接拼到 Animated.View 上的 style。
+ * 走 reanimated 4 的 worklet，整个动画在 UI 线程跑、不占 JS 桥。
+ */
+export function usePulse({
+  from = 0.6,
+  to = 1,
+  duration = 700,
+  delay = 0,
+}: PulseOptions = {}) {
+  const op = useSharedValue(from);
+
+  useEffect(() => {
+    // from 变化时把 baseline 拉到新值，再启动循环；否则首帧会闪一下旧 baseline。
+    op.value = from;
+    const cycle = withRepeat(
+      withSequence(
+        withTiming(to, { duration }),
+        withTiming(from, { duration })
+      ),
+      -1,
+      false
+    );
+    op.value = delay > 0 ? withDelay(delay, cycle) : cycle;
+    return () => cancelAnimation(op);
+  }, [op, from, to, duration, delay]);
+
+  return useAnimatedStyle(() => ({ opacity: op.value }));
+}

package/src/components/ui/Radio/Radio.tsx

@@ -0,0 +1,55 @@
+import React, { useContext } from 'react';
+import { Text, View } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+import { useColors, useThemedStyles } from '../../../theme';
+import { createLogger } from '../../../utils/logger';
+import { RadioContext } from './RadioContext';
+import { RadioGroup } from './RadioGroup';
+import { makeStyles } from './styles';
+import type { RadioProps } from './types';
+
+const log = createLogger('Radio');
+
+/**
+ * 单个 radio 选项。必须放在 `<Radio.Group>` 里使用。
+ */
+export function Radio({
+  value,
+  label,
+  disabled,
+  testID,
+}: RadioProps): React.JSX.Element {
+  const c = useColors();
+  const styles = useThemedStyles(makeStyles);
+  const ctx = useContext(RadioContext);
+  if (!ctx) {
+    log.warn('<Radio> must be used inside <Radio.Group>');
+    return <View />;
+  }
+  const checked = ctx.value === value;
+  const resolvedTestID =
+    testID ?? (ctx.groupTestID ? `${ctx.groupTestID}-${value}` : undefined);
+
+  return (
+    <Pressable
+      onPress={() => !disabled && ctx.onChange(value)}
+      disabled={disabled}
+      hitSlop={4}
+      accessibilityRole="radio"
+      accessibilityState={{ checked, disabled: !!disabled }}
+      accessibilityLabel={label}
+      testID={resolvedTestID}
+      style={({ pressed }) => [
+        styles.row,
+        { opacity: disabled ? 0.5 : pressed ? 0.7 : 1 },
+      ]}
+    >
+      <View style={[styles.circle, checked && { borderColor: c.primary }]}>
+        {checked ? <View style={styles.dot} /> : null}
+      </View>
+      {label ? <Text style={styles.label}>{label}</Text> : null}
+    </Pressable>
+  );
+}
+
+Radio.Group = RadioGroup;

package/src/components/ui/Radio/RadioContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import type { GroupContext } from './types';
+
+export const RadioContext = createContext<GroupContext | null>(null);

package/src/components/ui/Radio/RadioGroup.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useThemedStyles } from '../../../theme';
+import { RadioContext } from './RadioContext';
+import { makeStyles } from './styles';
+import type { GroupProps } from './types';
+
+/**
+ * Radio 组 —— 单选。把若干 `<Radio>` 作为 children 放进来。
+ *
+ * <Radio.Group value={tier} onChange={setTier}>
+ *   <Radio value="vip"     label="VIP 客户" />
+ *   <Radio value="normal"  label="普通客户" />
+ * </Radio.Group>
+ */
+export function RadioGroup({
+  value,
+  onChange,
+  children,
+  testID,
+}: GroupProps): React.JSX.Element {
+  const styles = useThemedStyles(makeStyles);
+  return (
+    <RadioContext.Provider value={{ value, onChange, groupTestID: testID }}>
+      <View style={styles.group} testID={testID}>
+        {children}
+      </View>
+    </RadioContext.Provider>
+  );
+}

package/src/components/ui/Radio/index.ts

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export type { GroupProps, RadioProps, Value } from './types';

package/src/components/ui/Radio/styles.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import { fw, r, radius, space, type as t } from '../../../theme';
+import type { ColorTokens } from '../../../theme';
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    group: {
+      gap: space[1],
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[4],
+      paddingVertical: space[2],
+    },
+    circle: {
+      width: r(20),
+      height: r(20),
+      borderRadius: radius.lg,
+      borderWidth: r(1.5),
+      borderColor: c.outline,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    dot: {
+      width: r(8),
+      height: r(8),
+      borderRadius: radius.xs,
+      backgroundColor: c.primary,
+    },
+    label: {
+      fontSize: t.sm,
+      color: c.foreground,
+      fontWeight: fw.regular,
+    },
+  });

package/src/components/ui/Radio/types.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+
+/** Radio 选项值类型 */
+export type Value = string | number;
+
+export type GroupContext = {
+  /** 当前选中值 */
+  value: Value;
+  /** 选中变化回调 */
+  onChange: (value: Value) => void;
+  /** 父组 testID（让 Radio 自动派生 `${groupTestID}-${value}`，业务可不必每个 Radio 单独传） */
+  groupTestID?: string;
+};
+
+export type GroupProps = {
+  /** 当前选中值（受控） */
+  value: Value;
+  /** 选中变化回调 */
+  onChange: (value: Value) => void;
+  /** 若干个 Radio 子项 */
+  children: ReactNode;
+  /** E2E / 测试定位 */
+  testID?: string;
+};
+
+export type RadioProps = {
+  /** 此项的值 */
+  value: Value;
+  /** 此项右侧文字 */
+  label?: string;
+  /** 禁用 */
+  disabled?: boolean;
+  /**
+   * E2E / 测试定位。不传时会自动从父 Radio.Group 的 testID 派生为
+   * `${groupTestID}-${value}`，业务通常只需在 Radio.Group 上传一次 testID。
+   */
+  testID?: string;
+};