@unif/react-native-design 0.1.0

package/src/components/ui/Search/Search.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef } from 'react';
+import { Pressable } from 'react-native-gesture-handler';
+
+import { useColors } from '../../../theme';
+import { Icon } from '../Icon';
+import { Input } from '../Input';
+import type { TextInputRef } from '../TextField/TextFieldBase';
+import type { SearchProps } from './types';
+
+/**
+ * 搜索输入框 —— `<Input>` 的预设：前置搜索图标、清除按钮、
+ * 高 36px、键盘 return 键为「搜索」。
+ *
+ * Ref 透传到 Input 内部 TextInput，业务可调 `searchRef.current?.focus()`。
+ */
+export const Search = forwardRef<TextInputRef, SearchProps>(function Search(
+  { onSubmit, placeholder = '搜索…', value, onChangeText, ...rest },
+  ref
+): React.JSX.Element {
+  const c = useColors();
+  const filled = typeof value === 'string' && value.length > 0;
+  return (
+    <Input
+      ref={ref}
+      {...rest}
+      value={value}
+      onChangeText={onChangeText}
+      placeholder={placeholder}
+      height={36}
+      returnKeyType="search"
+      accessibilityRole="search"
+      onSubmitEditing={() => {
+        if (typeof value === 'string') onSubmit?.(value);
+      }}
+      leading={<Icon name="search" size={18} color={c.foregroundSubtle} />}
+      trailing={
+        filled ? (
+          <Pressable
+            onPress={() => onChangeText?.('')}
+            hitSlop={6}
+            accessibilityRole="button"
+            accessibilityLabel="清除"
+          >
+            <Icon name="close" size={14} color={c.foregroundSubtle} />
+          </Pressable>
+        ) : null
+      }
+    />
+  );
+});
+
+Search.displayName = 'Search';

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

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

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

@@ -0,0 +1,8 @@
+import type { TextInputProps } from 'react-native';
+
+export type SearchProps = Omit<TextInputProps, 'style'> & {
+  /** 提交回调（按下 return 键时触发） */
+  onSubmit?: (value: string) => void;
+  /** 覆盖 placeholder（默认：搜索…） */
+  placeholder?: string;
+};

package/src/components/ui/Segmented/Segmented.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+import { fw, useTheme, useThemedStyles } from '../../../theme';
+import { childTestID } from '../../../utils/testID';
+import { makeStyles } from './styles';
+import type { SegmentedProps } from './types';
+
+/**
+ * 局部分段控件 —— 32px pill 在 track 上,激活项是亮色 thumb。
+ *
+ * **active thumb 必须比 track 亮一档** —— shadow 只在亮色态显示,
+ * 暗色态由 surface 明度差表达层级。
+ */
+export function Segmented({
+  value,
+  onChange,
+  items,
+  testID,
+}: SegmentedProps): React.JSX.Element {
+  const { colors: c, scheme, shadow } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const activeBg = scheme === 'dark' ? c.surfaceContainerHighest : c.surface;
+  const activeShadow = scheme === 'dark' ? null : shadow.subtle;
+
+  return (
+    <View style={styles.seg} 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.segItem,
+              on && { backgroundColor: activeBg },
+              on && activeShadow,
+              { opacity: pressed ? 0.85 : 1 },
+            ]}
+          >
+            <Text
+              style={[
+                styles.segLabel,
+                {
+                  color: on ? c.foreground : c.foregroundSubtle,
+                  fontWeight: on ? fw.semi : fw.medium,
+                },
+              ]}
+              numberOfLines={1}
+            >
+              {it.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

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

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

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

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import type { ColorTokens } from '../../../theme';
+import { control, r, radius, space, type as t } from '../../../theme';
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    seg: {
+      flexDirection: 'row',
+      backgroundColor: c.surfaceContainerHigh,
+      borderRadius: radius.md,
+      padding: r(2),
+      alignSelf: 'flex-start',
+    },
+    segItem: {
+      height: control.sm,
+      paddingHorizontal: space[7],
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: radius.sm,
+    },
+    segLabel: {
+      fontSize: t.xs,
+    },
+  });

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

@@ -0,0 +1,10 @@
+import type { TabItem } from '../Tabs';
+
+/** Segmented 与 Tabs 共用 item 形状；命名独立以表达控件意图差异。 */
+export type SegmentedProps = {
+  value: string;
+  onChange: (id: string) => void;
+  items: TabItem[];
+  /** 容器 testID；item testID 自动派生为 `${testID}-${id}` */
+  testID?: string;
+};

package/src/components/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import Animated from 'react-native-reanimated';
+import { usePulse } from '../Pulse';
+import { useColors } from '../../../theme';
+import type { SkeletonProps } from './types';
+
+/**
+ * 页面级加载占位骨架。3 个形状由 `shape` 切换。
+ *
+ * ```tsx
+ * <Skeleton shape="line" width="60%" />        // 文本占位
+ * <Skeleton shape="rect" width="100%" height={120} />  // 图片 / 卡片占位
+ * <Skeleton shape="circle" size={40} />        // 头像占位
+ * ```
+ *
+ * `usePulse({ from: 0.5 })` 全局共享脉冲(Reanimated 4 worklet 驱动 opacity),
+ * 区别于 chat `Shimmer`(沿 X 横扫高光,流式语义)。 */
+export function Skeleton({
+  shape = 'rect',
+  width,
+  height,
+  size = 40,
+  radius,
+  style,
+  testID,
+}: SkeletonProps): React.JSX.Element {
+  const c = useColors();
+  const animatedStyle = usePulse({ from: 0.5 });
+
+  // 按形状推默认尺寸 + 圆角;caller 显式传 width / height / radius 时 override
+  const dim = (() => {
+    if (shape === 'circle') {
+      return { width: size, height: size, borderRadius: radius ?? size / 2 };
+    }
+    if (shape === 'line') {
+      return {
+        width: width ?? '100%',
+        height: height ?? 11,
+        borderRadius: radius ?? 3,
+      };
+    }
+    return {
+      width: width ?? '100%',
+      height: height ?? 80,
+      borderRadius: radius ?? 8,
+    };
+  })();
+
+  return (
+    <Animated.View
+      style={[
+        { ...dim, backgroundColor: c.surfaceContainerHigh },
+        animatedStyle,
+        style,
+      ]}
+      testID={testID}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    />
+  );
+}

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonShape } from './types';

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

@@ -0,0 +1,22 @@
+import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
+
+export type SkeletonShape = 'line' | 'rect' | 'circle';
+
+export type SkeletonProps = {
+  /** 形状,默认 'rect'。
+   *  - 'line' → width 100% / height 11 / radius 3(文本占位)
+   *  - 'rect' → width 100% / height 80 / radius 8(图片或卡片占位)
+   *  - 'circle' → size×size,radius = size/2(头像占位) */
+  shape?: SkeletonShape;
+  /** 宽度(line / rect)。circle 形态忽略,走 size */
+  width?: DimensionValue;
+  /** 高度(line / rect)。circle 形态忽略,走 size */
+  height?: number;
+  /** 直径(circle),默认 40。line / rect 忽略 */
+  size?: number;
+  /** 覆盖圆角:line 默认 3 / rect 默认 8 / circle = size/2 */
+  radius?: number;
+  style?: StyleProp<ViewStyle>;
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/Spinner/Spinner.tsx

@@ -0,0 +1,68 @@
+import { useEffect } from 'react';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { useColors } from '../../../theme';
+import { createLogger } from '../../../utils/logger';
+import type { SpinnerProps } from './types';
+
+const log = createLogger('Spinner');
+
+export function Spinner({
+  size = 18,
+  color,
+  thickness = 2,
+  style,
+  testID,
+}: SpinnerProps) {
+  const c = useColors();
+  const angle = useSharedValue(0);
+  const stroke = color ?? c.primary;
+  if (!Number.isFinite(size) || (size as number) < 8) {
+    log.warn(`size 应为 ≥8 的有限数，传入 ${size}，已钳到 8`);
+  }
+  if (Number.isFinite(thickness) && (thickness as number) <= 0) {
+    log.warn(`thickness 应为正数，传入 ${thickness}，已 fallback 为 2`);
+  }
+  const safeSize = Number.isFinite(size) && size > 8 ? size : 8;
+  const safeThickness =
+    Number.isFinite(thickness) && thickness > 0 ? thickness : 2;
+
+  useEffect(() => {
+    angle.value = withRepeat(
+      withTiming(360, { duration: 900, easing: Easing.linear }),
+      -1,
+      false
+    );
+    return () => cancelAnimation(angle);
+  }, [angle]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${angle.value}deg` }],
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: safeSize,
+          height: safeSize,
+          borderRadius: safeSize / 2,
+          borderWidth: safeThickness,
+          borderColor: c.outline,
+          borderTopColor: stroke,
+        },
+        animatedStyle,
+        style,
+      ]}
+      testID={testID}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    />
+  );
+}

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

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

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

@@ -0,0 +1,14 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type SpinnerProps = {
+  /** 直径（含 stroke），默认 18；非有限或 < 8 会被钳到 8 */
+  size?: number;
+  /** 描边颜色，默认 c.primary 主橙 */
+  color?: string;
+  /** 描边宽度，默认 2 */
+  thickness?: number;
+  /** 额外样式 */
+  style?: StyleProp<ViewStyle>;
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/StatusDot/StatusDot.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useColors } from '../../../theme';
+import { Icon } from '../Icon';
+import { PulseDot } from '../Pulse';
+import { paletteFor, styles } from './styles';
+import type { StatusDotProps } from './types';
+
+/**
+ * 任务列表 / 推理链通用的状态圆点。
+ * done = 绿底 + 白勾；active = 边框 + 内部 PulseDot；pending = 仅边框。
+ */
+export function StatusDot({
+  status,
+  size = 16,
+  tone = 'flat',
+  testID,
+}: StatusDotProps): React.JSX.Element {
+  const c = useColors();
+  const { bg, border } = paletteFor(status, tone, c);
+
+  return (
+    <View
+      style={[
+        styles.dot,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: bg,
+          borderColor: border,
+        },
+      ]}
+      testID={testID}
+    >
+      {status === 'done' ? (
+        <Icon
+          name="check"
+          size={Math.round(size * 0.6)}
+          color={c.onPrimary}
+          strokeWidth={2.5}
+        />
+      ) : status === 'active' ? (
+        <PulseDot />
+      ) : null}
+    </View>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { StatusDot } from './StatusDot';
+export type { StatusDotProps, StatusDotStatus, StatusDotTone } from './types';

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

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { r, type ColorTokens } from '../../../theme';
+import type { StatusDotStatus, StatusDotTone } from './types';
+
+/**
+ * StatusDot 静态样式。
+ * 尺寸 / 圆角 / 颜色都是动态值（按 size + status + tone 计算），inline 注入；
+ * 这里只承载所有 status 共用的静态属性。
+ */
+export const styles = StyleSheet.create({
+  dot: {
+    borderWidth: r(1.5),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+/** StatusDot 颜色推导:status × tone → { bg, border } 二色,全走 ColorTokens。
+ *  签名 `(target, context, tokens)` 与 Tag/Tool 的 paletteFor 一致。
+ *  `flat` = pending/active 底色透明；`soft` = pending 走 surface、active 走 primaryContainer。 */
+export function paletteFor(
+  status: StatusDotStatus,
+  tone: StatusDotTone,
+  c: ColorTokens
+): { bg: string; border: string } {
+  switch (status) {
+    case 'done':
+      return { bg: c.success, border: c.success };
+    case 'active':
+      return {
+        bg: tone === 'soft' ? c.primaryContainer : 'transparent',
+        border: c.primary,
+      };
+    case 'pending':
+      return {
+        bg: tone === 'soft' ? c.surface : 'transparent',
+        border: c.outline,
+      };
+  }
+}

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

@@ -0,0 +1,15 @@
+export type StatusDotStatus = 'pending' | 'active' | 'done';
+
+/**
+ * `flat`：pending/active 底色透明（任务列表风格）。
+ * `soft`：pending = bgCard、active = primary0，常用于推理链。
+ */
+export type StatusDotTone = 'flat' | 'soft';
+
+export type StatusDotProps = {
+  status: StatusDotStatus;
+  size?: number;
+  tone?: StatusDotTone;
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/Stepper/Stepper.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+import { useThemedStyles } from '../../../theme';
+import { createLogger } from '../../../utils/logger';
+import { makeStyles, sizingFor } from './styles';
+import type { StepperProps } from './types';
+
+const log = createLogger('Stepper');
+
+/**
+ * 数字步进器 [−][ N ][+]。
+ * 按钮自动夹到 min/max；越界的按钮透明度变 0.4。
+ *
+ * 健壮性：value 为 NaN/Infinity 时显示为 min；step <=0 或非有限数时回退 1；
+ * min > max 时整体按 min（避免 onChange 写出乱序值）。
+ */
+export function Stepper({
+  value,
+  onChange,
+  min = 0,
+  max = 99,
+  step = 1,
+  size = 'md',
+  disabled = false,
+  testID,
+}: StepperProps): React.JSX.Element {
+  const styles = useThemedStyles(makeStyles);
+  const dims = sizingFor(size);
+
+  if (Number.isFinite(step) && step <= 0) {
+    log.warn(`step 必须是正数，传入 ${step}，已 fallback 为 1`);
+  }
+  if (Number.isFinite(min) && Number.isFinite(max) && min > max) {
+    log.warn(`min(${min}) 不能大于 max(${max})，已按 min 渲染`);
+  }
+  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+  const safeMin = Number.isFinite(min) ? min : 0;
+  const safeMax = Number.isFinite(max) && max >= safeMin ? max : safeMin;
+  // value 处理:NaN → min;±Infinity → 钳到 [min, max];有限数 → 正常 clamp
+  const safeValue = Number.isNaN(value)
+    ? safeMin
+    : Math.min(safeMax, Math.max(safeMin, value));
+  const decDisabled = disabled || safeValue <= safeMin;
+  const incDisabled = disabled || safeValue >= safeMax;
+
+  return (
+    <View style={styles.wrap} testID={testID}>
+      <Pressable
+        onPress={() => onChange(Math.max(safeMin, safeValue - safeStep))}
+        disabled={decDisabled}
+        accessibilityRole="button"
+        accessibilityLabel="减少"
+        accessibilityState={{ disabled: decDisabled }}
+        accessibilityHint={`当前值 ${safeValue}，减 ${safeStep}`}
+        testID={testID ? `${testID}-decrement` : undefined}
+        style={({ pressed }) => [
+          styles.cell,
+          styles.btnLeft,
+          { width: dims.btn, height: dims.h },
+          { opacity: decDisabled ? 0.4 : pressed ? 0.7 : 1 },
+        ]}
+      >
+        <Text style={styles.btnText}>−</Text>
+      </Pressable>
+      <View
+        accessibilityRole="adjustable"
+        accessibilityValue={{ min: safeMin, max: safeMax, now: safeValue }}
+        style={[styles.cell, { minWidth: dims.w, height: dims.h }]}
+        testID={testID ? `${testID}-value` : undefined}
+      >
+        <Text style={[styles.valueText, { fontSize: dims.fs }]}>
+          {safeValue}
+        </Text>
+      </View>
+      <Pressable
+        onPress={() => onChange(Math.min(safeMax, safeValue + safeStep))}
+        disabled={incDisabled}
+        accessibilityRole="button"
+        accessibilityLabel="增加"
+        accessibilityState={{ disabled: incDisabled }}
+        accessibilityHint={`当前值 ${safeValue}，加 ${safeStep}`}
+        testID={testID ? `${testID}-increment` : undefined}
+        style={({ pressed }) => [
+          styles.cell,
+          styles.btnRight,
+          { width: dims.btn, height: dims.h },
+          { opacity: incDisabled ? 0.4 : pressed ? 0.7 : 1 },
+        ]}
+      >
+        <Text style={styles.btnText}>+</Text>
+      </Pressable>
+    </View>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper';
+export type { StepperProps, StepperSize } from './types';

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

@@ -0,0 +1,63 @@
+import { StyleSheet } from 'react-native';
+import { control, fw, r, radius, type as t } from '../../../theme';
+import type { ColorTokens } from '../../../theme';
+import type { StepperSize } from './types';
+
+/** Stepper 静态 + themed base —— btn / value 容器共用 cell 基底,radius / border 走 token。
+ *  尺寸(高 / 宽 / 字号)由 sizingFor 派生,sm 走 control.sm,md 走 r(32)(介于
+ *  control.sm 与 control.md 之间,与 avatar.md / dim.sendBtn 同值但语义独立)。 */
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    wrap: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+    },
+    /** btn / value 共用的 cell 基底 —— 居中 + surface 背景 + 上下边框。
+     *  左右边框 / 圆角由 btnLeft / btnRight 增量补齐;value 中间无侧边框。 */
+    cell: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: c.surface,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderColor: c.outline,
+    },
+    btnLeft: {
+      borderLeftWidth: 1,
+      borderTopLeftRadius: radius.md,
+      borderBottomLeftRadius: radius.md,
+    },
+    btnRight: {
+      borderRightWidth: 1,
+      borderTopRightRadius: radius.md,
+      borderBottomRightRadius: radius.md,
+    },
+    btnText: {
+      fontSize: t.h1,
+      color: c.foreground,
+      fontWeight: fw.medium,
+      lineHeight: t.h1,
+    },
+    valueText: {
+      color: c.foreground,
+      fontWeight: fw.medium,
+    },
+  });
+
+/** Stepper 尺寸推导:sm(control.sm=28 高 / 28 按钮 / 40 值宽 / xs 字)/
+ *  md(r(32) 高 / r(32) 按钮 / r(48) 值宽 / sm 字)。
+ *  新增 size 在 types.ts 加 union + 这里加 case。 */
+export function sizingFor(size: StepperSize): {
+  h: number;
+  btn: number;
+  w: number;
+  fs: number;
+} {
+  switch (size) {
+    case 'sm':
+      return { h: control.sm, btn: control.sm, w: r(40), fs: t.xs };
+    case 'md':
+      return { h: r(32), btn: r(32), w: r(48), fs: t.sm };
+  }
+}

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

@@ -0,0 +1,21 @@
+/** Stepper 尺寸：sm=28px / md=32px */
+export type StepperSize = 'sm' | 'md';
+
+export type StepperProps = {
+  /** 当前值（受控） */
+  value: number;
+  /** 值变化回调（已自动夹到 [min, max] 区间） */
+  onChange: (value: number) => void;
+  /** 最小值，默认 0 */
+  min?: number;
+  /** 最大值，默认 99 */
+  max?: number;
+  /** 增减步长，默认 1；非正数会回退为 1 */
+  step?: number;
+  /** 尺寸，默认 'md' */
+  size?: StepperSize;
+  /** 整体禁用（两个按钮都不可点） */
+  disabled?: boolean;
+  /** E2E / 测试定位 */
+  testID?: string;
+};