@unif/react-native-design 0.1.0

package/src/components/ui/Switch/Switch.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import { Pressable } from 'react-native-gesture-handler';
+
+import Animated, {
+  cancelAnimation,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { motion, r, useColors, useThemedStyles } from '../../../theme';
+import { INSET, makeStyles, THUMB, TRACK_W } from './styles';
+import type { SwitchProps } from './types';
+
+// ─── 动画派生常量(组件私有,非 style)─────────────────────────────────────
+// 把手 translateX 的 off / on 端点:左右各留 INSET 间距,
+// off = INSET(2),on = trackW - INSET - thumbW(32-2-16=14)。
+// 走 r() 保证多设备缩放跟 track / thumb 物理尺寸一致(否则非设计基准设备会错位)。
+const THUMB_OFF_X = r(INSET);
+const THUMB_ON_X = r(TRACK_W - INSET - THUMB);
+
+/**
+ * 布尔切换。32×20 轨道 + 16×16 白色把手,200ms 缓动。
+ *
+ * 不用 RN 原生 Switch(iOS 上无法精确还原 Unif 尺寸)。
+ * reanimated 4 worklet 全程 UI 线程驱动。
+ */
+export function Switch({
+  value,
+  onChange,
+  disabled,
+  accessibilityLabel,
+  testID,
+}: SwitchProps): React.JSX.Element {
+  const c = useColors();
+  const styles = useThemedStyles(makeStyles);
+  const progress = useSharedValue(value ? 1 : 0);
+
+  useEffect(() => {
+    progress.value = withTiming(value ? 1 : 0, { duration: motion.base });
+    return () => cancelAnimation(progress);
+  }, [value, progress]);
+
+  const trackStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [c.surfaceContainerHighest, c.primary]
+    ),
+  }));
+
+  const thumbStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: interpolate(
+          progress.value,
+          [0, 1],
+          [THUMB_OFF_X, THUMB_ON_X]
+        ),
+      },
+    ],
+  }));
+
+  return (
+    <Pressable
+      onPress={() => !disabled && onChange(!value)}
+      disabled={disabled}
+      hitSlop={6}
+      style={disabled ? styles.pressableDisabled : styles.pressableEnabled}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled: !!disabled }}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+    >
+      <Animated.View style={[styles.track, trackStyle]}>
+        <Animated.View style={[styles.thumb, thumbStyle]} />
+      </Animated.View>
+    </Pressable>
+  );
+}

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

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

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

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { r, radius } from '../../../theme';
+import type { ColorTokens } from '../../../theme';
+
+/** 轨道宽 32 / 高 20、把手 16×16、轨道内边距 2 —— Unif 自有 Switch 物理尺寸。
+ *  导出常量给 Switch.tsx interpolate translateX 复用(走 r() 保证多设备一致缩放)。 */
+export const TRACK_W = 32;
+export const TRACK_H = 20;
+export const THUMB = 16;
+export const INSET = 2;
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    pressableEnabled: {
+      opacity: 1,
+    },
+    pressableDisabled: {
+      opacity: 0.5,
+    },
+    track: {
+      width: r(TRACK_W),
+      height: r(TRACK_H),
+      borderRadius: radius.lg,
+      justifyContent: 'center',
+    },
+    thumb: {
+      width: r(THUMB),
+      height: r(THUMB),
+      borderRadius: radius.md,
+      backgroundColor: c.onPrimary,
+    },
+  });

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

@@ -0,0 +1,8 @@
+export type SwitchProps = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+  /** 用于无障碍 / 测试 */
+  accessibilityLabel?: string;
+  testID?: string;
+};

package/src/components/ui/TabBar/TabBar.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+import { icon, useColors, useThemedStyles } from '../../../theme';
+import { childTestID } from '../../../utils/testID';
+import { Icon } from '../Icon';
+import { makeStyles } from './styles';
+import type { TabBarProps } from './types';
+
+/**
+ * 固定底部 tab bar —— App 主导航。
+ * 高 50px，顶部一条细线边框。激活色：primary-300。
+ * 想留 home indicator 的安全区，请外面包一层 `<SafeAreaView edges={['bottom']}>`。
+ */
+export function TabBar({
+  active,
+  onChange,
+  items,
+  testID,
+}: TabBarProps): React.JSX.Element {
+  const c = useColors();
+  const styles = useThemedStyles(makeStyles);
+  return (
+    <View style={styles.bar} testID={testID}>
+      {items.map((item) => {
+        const on = item.id === active;
+        const tint = on ? c.primary : c.foregroundSubtle;
+        const itemTestID = childTestID(testID, item.id, item.testID);
+        return (
+          <Pressable
+            key={item.id}
+            onPress={() => onChange(item.id)}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: on }}
+            accessibilityLabel={item.label}
+            testID={itemTestID}
+            style={({ pressed }) => [
+              styles.tab,
+              { opacity: pressed ? 0.7 : 1 },
+            ]}
+          >
+            <View>
+              <Icon name={item.icon} size={icon.sm} color={tint} />
+              {item.badge != null ? (
+                <View style={styles.badge}>
+                  <Text style={styles.badgeText}>{item.badge}</Text>
+                </View>
+              ) : null}
+            </View>
+            <Text style={[styles.label, { color: tint }]} numberOfLines={1}>
+              {item.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { TabBar } from './TabBar';
+export type { TabBarItem, TabBarProps } from './types';

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

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+import type { ColorTokens } from '../../../theme';
+import { fixed, fw, r, radius, space, type as t } from '../../../theme';
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    bar: {
+      height: fixed.tabbarH,
+      flexDirection: 'row',
+      backgroundColor: c.surface,
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderTopColor: c.outline,
+    },
+    tab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: r(2),
+    },
+    label: {
+      fontSize: t.nano,
+      fontWeight: fw.medium,
+      lineHeight: 12,
+    },
+    badge: {
+      position: 'absolute',
+      top: r(-3),
+      right: r(-10),
+      minWidth: r(16),
+      height: r(16),
+      borderRadius: radius.md,
+      backgroundColor: c.error,
+      paddingHorizontal: space[1],
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    badgeText: {
+      color: c.onError,
+      fontSize: t.nano,
+      fontWeight: fw.bold,
+      lineHeight: 12,
+    },
+  });

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

@@ -0,0 +1,19 @@
+import type { IconName } from '../Icon';
+
+export type TabBarItem = {
+  id: string;
+  icon: IconName;
+  label: string;
+  /** 图标右上角的数字角标（用 string 才能写 '99+'） */
+  badge?: number | string;
+  /** 单 tab 的 testID（不传则用 `${barTestID}-${id}`） */
+  testID?: string;
+};
+
+export type TabBarProps = {
+  active: string;
+  onChange: (id: string) => void;
+  items: TabBarItem[];
+  /** 容器 testID；item testID 自动派生为 `${testID}-${id}` */
+  testID?: string;
+};

package/src/components/ui/Tabs/Tabs.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+import { useColors, useThemedStyles, fw } from '../../../theme';
+import { childTestID } from '../../../utils/testID';
+import { makeStyles } from './styles';
+import type { TabsProps } from './types';
+
+/**
+ * 页面级下划线 tabs。
+ * 占满宽度，高 44px，激活项下方有 2px 主色下划线。
+ */
+export function Tabs({
+  value,
+  onChange,
+  items,
+  testID,
+}: TabsProps): React.JSX.Element {
+  const c = useColors();
+  const styles = useThemedStyles(makeStyles);
+  return (
+    <View style={styles.under} testID={testID}>
+      {items.map((it) => {
+        const on = it.id === value;
+        const itemTestID = childTestID(testID, it.id, it.testID);
+        return (
+          <Pressable
+            key={it.id}
+            onPress={() => onChange(it.id)}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: on }}
+            accessibilityLabel={it.label}
+            testID={itemTestID}
+            style={({ pressed }) => [
+              styles.underTab,
+              { opacity: pressed ? 0.7 : 1 },
+            ]}
+          >
+            <Text
+              style={[
+                styles.underLabel,
+                {
+                  color: on ? c.primary : c.foregroundMuted,
+                  fontWeight: on ? fw.semi : fw.medium,
+                },
+              ]}
+              numberOfLines={1}
+            >
+              {it.label}
+            </Text>
+            {on ? <View style={styles.underBar} /> : null}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabItem, TabsProps } from './types';

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

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import type { ColorTokens } from '../../../theme';
+import { fixed, icon, r, type as t } from '../../../theme';
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    under: {
+      flexDirection: 'row',
+      backgroundColor: c.surface,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: c.outline,
+    },
+    underTab: {
+      flex: 1,
+      height: fixed.hitTarget,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    underLabel: {
+      fontSize: t.sm,
+    },
+    underBar: {
+      position: 'absolute',
+      bottom: 0,
+      height: r(2),
+      width: icon.xl,
+      backgroundColor: c.primary,
+      borderRadius: r(1),
+    },
+  });

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

@@ -0,0 +1,19 @@
+export type TabItem = {
+  /** 唯一 id，用作 key 跟选中标识 */
+  id: string;
+  /** 显示文本 */
+  label: string;
+  /** 单 item testID（不传则自动用 `${tabsTestID}-${id}`） */
+  testID?: string;
+};
+
+export type TabsProps = {
+  /** 当前选中 tab 的 id */
+  value: string;
+  /** 切换 tab 回调 */
+  onChange: (id: string) => void;
+  /** tab 列表（≥2 项才显示） */
+  items: TabItem[];
+  /** 容器 testID；item testID 自动派生为 `${testID}-${id}` */
+  testID?: string;
+};

package/src/components/ui/Tag/Tag.tsx

@@ -0,0 +1,37 @@
+import { Text, View } from 'react-native';
+import { useColors } from '../../../theme';
+import { paletteFor, sizingFor, styles } from './styles';
+import type { TagProps } from './types';
+
+export function Tag({
+  label,
+  variant = 'neutral',
+  size = 'md',
+  style,
+  numberOfLines = 1,
+  testID,
+}: TagProps) {
+  const c = useColors();
+  const palette = paletteFor(variant, c);
+  const sizing = sizingFor(size);
+
+  const dynamicStyle = {
+    height: sizing.h,
+    paddingHorizontal: sizing.px,
+    backgroundColor: palette.bg,
+    borderColor: palette.border ?? 'transparent',
+    borderWidth: palette.border ? 1 : 0,
+  };
+  const dynamicTextStyle = { color: palette.fg, fontSize: sizing.fs };
+
+  return (
+    <View style={[styles.base, dynamicStyle, style]} testID={testID}>
+      <Text
+        style={[styles.text, dynamicTextStyle]}
+        numberOfLines={numberOfLines}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+export type { TagProps, TagSize, TagVariant } from './types';

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

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+import { fw, radius, type ColorTokens } from '../../../theme';
+import type { TagSize, TagVariant } from './types';
+
+/** Tag 静态 base —— alignSelf 防 flex 父容器拉伸,radius 走 token。 */
+export const styles = StyleSheet.create({
+  base: {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: radius.sm,
+  },
+  text: {
+    fontWeight: fw.medium,
+  },
+});
+
+/** Tag 尺寸推导:md(22h / 8px / 12fs)/ lg(26h / 10px / 13fs)。
+ *  新增 size 在 types.ts 加 union + 这里加 case。 */
+export function sizingFor(size: TagSize): {
+  h: number;
+  px: number;
+  fs: number;
+} {
+  switch (size) {
+    case 'md':
+      return { h: 22, px: 8, fs: 12 };
+    case 'lg':
+      return { h: 26, px: 10, fs: 13 };
+  }
+}
+
+/** Tag 颜色推导:variant → { bg, fg, border } 三色,全走 ColorTokens。
+ *  签名 `(target, context)` 与 chat/Tool 的 tintFor / variantFor / labelFor 一致。 */
+export function paletteFor(variant: TagVariant, c: ColorTokens) {
+  switch (variant) {
+    case 'brand':
+      return { bg: c.primaryContainer, fg: c.primary, border: undefined };
+    case 'success':
+      return { bg: c.successContainer, fg: c.success, border: undefined };
+    case 'error':
+      return { bg: c.errorContainer, fg: c.error, border: undefined };
+    case 'info':
+      return { bg: c.infoContainer, fg: c.info, border: undefined };
+    case 'outline':
+      return {
+        bg: 'transparent' as const,
+        fg: c.foregroundMuted,
+        border: c.outline,
+      };
+    default:
+      return {
+        bg: c.surfaceContainerHigh,
+        fg: c.foregroundMuted,
+        border: undefined,
+      };
+  }
+}

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

@@ -0,0 +1,33 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * Tag 配色变体：
+ * - `neutral` 灰底（默认） / `brand` 橙底（活动标签）
+ * - `success` 绿底 / `error` 红底 / `info` 蓝底（语义标签）
+ * - `outline` 仅描边（不填底，承载更轻）
+ */
+export type TagVariant =
+  | 'neutral'
+  | 'brand'
+  | 'success'
+  | 'error'
+  | 'info'
+  | 'outline';
+
+/** Tag 尺寸：md=22 (h) / lg=26 (h) */
+export type TagSize = 'md' | 'lg';
+
+export type TagProps = {
+  /** 标签文字 */
+  label: string;
+  /** 配色变体，默认 'neutral' */
+  variant?: TagVariant;
+  /** 尺寸，默认 'md' */
+  size?: TagSize;
+  /** 额外样式覆盖 */
+  style?: StyleProp<ViewStyle>;
+  /** 文本 numberOfLines，默认 1（超长 ellipsis） */
+  numberOfLines?: number;
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/TextField/TextFieldBase.tsx

@@ -0,0 +1,111 @@
+import React, { type ComponentRef, forwardRef, useState } from 'react';
+import { Text, TextInput, View } from 'react-native';
+import { control, space, useColors, useThemedStyles } from '../../../theme';
+import { makeStyles } from './styles';
+import type { TextFieldBaseProps } from './types';
+
+/** `TextInput` 在 react-native-strict-api 下是组件类型(`TextInputType`),
+ *  ref 实例类型走 `ComponentRef<typeof TextInput>`(对应内部 `_TextInputInstance`)。 */
+export type TextInputRef = ComponentRef<typeof TextInput>;
+
+/**
+ * Input / Textarea 共享 primitive —— internal,不在主 barrel 导出。
+ *
+ * 行为:
+ * - 视觉 4 态:idle(浅灰)/ focus(白底 brand 边)/ filled(白底 outline 边)/ error
+ * - leading / trailing 左右 slot
+ * - disabled 优先于 editable
+ * - multiline=false → 单行 fixed height(默认 control.lg)
+ * - multiline=true → 多行 minHeight/maxHeight,文字顶对齐,wrap 上下加 padding
+ * - forwardRef<TextInput> —— 业务表单 inputRef.current?.focus() 聚焦
+ *
+ * 公开 API 是 Input / Textarea(本组件不直接给业务用)。
+ */
+export const TextFieldBase = forwardRef<TextInputRef, TextFieldBaseProps>(
+  function TextFieldBase(
+    {
+      multiline = false,
+      height = control.lg,
+      minHeight = 96,
+      maxHeight,
+      leading,
+      trailing,
+      error,
+      disabled,
+      editable,
+      containerStyle,
+      value,
+      onFocus,
+      onBlur,
+      testID,
+      ...rest
+    },
+    ref
+  ): React.JSX.Element {
+    const c = useColors();
+    const styles = useThemedStyles(makeStyles);
+    const [focused, setFocused] = useState(false);
+    const filled = value != null && String(value).length > 0;
+    const isEditable = disabled ? false : editable;
+
+    // 视觉态优先级:error > focused > filled > idle。
+    // active 三态(focus/filled/error)共享 wrapActive 白底,各自只覆 borderColor 差量。
+    const wrapStateStyles = error
+      ? [styles.wrapActive, styles.wrapError]
+      : focused
+        ? [styles.wrapActive, styles.wrapFocus]
+        : filled
+          ? [styles.wrapActive, styles.wrapFilled]
+          : [styles.wrapIdle];
+
+    return (
+      <View
+        style={[containerStyle, disabled && styles.containerDisabled]}
+        testID={testID}
+      >
+        <View
+          style={[
+            styles.wrap,
+            multiline && styles.wrapMultiline,
+            ...wrapStateStyles,
+            multiline
+              ? { minHeight, ...(maxHeight != null && { maxHeight }) }
+              : { height },
+          ]}
+        >
+          {leading != null ? <View>{leading}</View> : null}
+          <TextInput
+            ref={ref}
+            {...rest}
+            editable={isEditable}
+            value={value}
+            multiline={multiline}
+            onFocus={(e) => {
+              setFocused(true);
+              onFocus?.(e);
+            }}
+            onBlur={(e) => {
+              setFocused(false);
+              onBlur?.(e);
+            }}
+            style={[
+              styles.input,
+              multiline && styles.inputMultiline,
+              // multiline:wrap 上下 padding 为 space[4]*2=20,input 内部 minHeight 减掉避免溢出
+              multiline && {
+                minHeight: Math.max(0, minHeight - space[4] * 2),
+              },
+            ]}
+            placeholderTextColor={c.foregroundSubtle}
+            accessibilityState={disabled ? { disabled: true } : undefined}
+            testID={testID ? `${testID}-input` : undefined}
+          />
+          {trailing != null ? <View>{trailing}</View> : null}
+        </View>
+        {error ? <Text style={styles.errorMsg}>{error}</Text> : null}
+      </View>
+    );
+  }
+);
+
+TextFieldBase.displayName = 'TextFieldBase';

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

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+import { fw, radius, space, type as t } from '../../../theme';
+import type { ColorTokens } from '../../../theme';
+
+/** TextField primitive styles —— Input + Textarea 共享。 */
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    wrap: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[3],
+      paddingHorizontal: space[5],
+      borderRadius: radius.md,
+      borderWidth: 1,
+    },
+    wrapMultiline: {
+      paddingVertical: space[4],
+      alignItems: 'flex-start',
+    },
+    wrapIdle: {
+      backgroundColor: c.surfaceContainerHigh,
+      borderColor: 'transparent',
+    },
+    /** focus/filled/error 三态共享的"激活"白底 base —— 配合各 variant border 差量使用 */
+    wrapActive: {
+      backgroundColor: c.surface,
+    },
+    wrapFocus: {
+      borderColor: c.primary,
+    },
+    wrapFilled: {
+      borderColor: c.outline,
+    },
+    wrapError: {
+      borderColor: c.error,
+    },
+    input: {
+      flex: 1,
+      minWidth: 0,
+      fontSize: t.body,
+      color: c.foreground,
+      padding: 0,
+      margin: 0,
+      // react-native-web: 抑制浏览器默认 focus outline,让 wrapFocus 的 brand 边框接管
+      outlineWidth: 0,
+    },
+    /** multiline 覆盖:Android 默认居中,需要顶对齐 */
+    inputMultiline: {
+      textAlignVertical: 'top' as const,
+    },
+    errorMsg: {
+      fontSize: t.micro,
+      color: c.error,
+      marginTop: space[1],
+      paddingHorizontal: space[1],
+      fontWeight: fw.regular,
+    },
+    containerDisabled: {
+      opacity: 0.5,
+    },
+  });