@unif/react-native-ui 0.4.0 → 1.0.1

package/src/components/Table/TableCell.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { TableCellProps } from './types';
+
+const TableCell = memo(function TableCell({
+  children,
+  testID,
+  style,
+}: TableCellProps) {
+  const fg = useTheme((t) => t.foreground);
+  return (
+    <View testID={testID} style={[styles.cell, style]}>
+      <Text style={[styles.cellText, { color: fg }]}>{children}</Text>
+    </View>
+  );
+});
+TableCell.displayName = 'TableCell';
+
+const styles = StyleSheet.create({
+  cell: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    minWidth: 80,
+  },
+  cellText: {
+    fontSize: 14,
+  },
+});
+
+export { TableCell };

package/src/components/Table/TableHead.tsx

@@ -0,0 +1,32 @@
+import { memo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { TableHeadProps } from './types';
+
+const TableHead = memo(function TableHead({
+  children,
+  testID,
+  style,
+}: TableHeadProps) {
+  const fg = useTheme((t) => t.foreground);
+  return (
+    <View testID={testID} style={[styles.cell, style]}>
+      <Text style={[styles.headText, { color: fg }]}>{children}</Text>
+    </View>
+  );
+});
+TableHead.displayName = 'TableHead';
+
+const styles = StyleSheet.create({
+  cell: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    minWidth: 80,
+  },
+  headText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+});
+
+export { TableHead };

package/src/components/Table/TableHeader.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../../core';
+import type { TableHeaderProps } from './types';
+
+const TableHeader = memo(function TableHeader({
+  children,
+  testID,
+}: TableHeaderProps) {
+  const muted = useTheme((t) => t.muted);
+  return (
+    <View testID={testID} style={{ backgroundColor: muted }}>
+      {children}
+    </View>
+  );
+});
+TableHeader.displayName = 'TableHeader';
+
+export { TableHeader };

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { TableRowProps } from './types';
+
+const TableRow = memo(function TableRow({
+  children,
+  testID,
+  style,
+}: TableRowProps) {
+  const border = useTheme((t) => t.border);
+  return (
+    <View
+      testID={testID}
+      style={[styles.row, { borderBottomColor: border }, style]}
+    >
+      {children}
+    </View>
+  );
+});
+TableRow.displayName = 'TableRow';
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+});
+
+export { TableRow };

package/src/components/Table/index.tsx

@@ -0,0 +1,14 @@
+export { Table } from './Table';
+export { TableHeader } from './TableHeader';
+export { TableBody } from './TableBody';
+export { TableRow } from './TableRow';
+export { TableHead } from './TableHead';
+export { TableCell } from './TableCell';
+export type {
+  TableProps,
+  TableHeaderProps,
+  TableBodyProps,
+  TableRowProps,
+  TableHeadProps,
+  TableCellProps,
+} from './types';

package/src/components/Table/types.ts

@@ -0,0 +1,35 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface TableProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface TableHeaderProps {
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface TableBodyProps {
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface TableRowProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface TableHeadProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface TableCellProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import { useControllable } from '../../core';
+import { TabsProvider } from './context';
+import type { TabsProps } from './types';
+
+const Tabs = memo(function Tabs({
+  value,
+  defaultValue = '',
+  onValueChange,
+  children,
+  testID,
+  style,
+}: TabsProps) {
+  const [current, setCurrent] = useControllable({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+
+  return (
+    <TabsProvider value={{ value: current ?? '', onValueChange: setCurrent }}>
+      <View testID={testID} style={style}>
+        {children}
+      </View>
+    </TabsProvider>
+  );
+});
+Tabs.displayName = 'Tabs';
+
+export { Tabs };

package/src/components/Tabs/TabsContent.tsx

@@ -0,0 +1,23 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import { useTabsCtx } from './context';
+import type { TabsContentProps } from './types';
+
+const TabsContent = memo(function TabsContent({
+  value,
+  children,
+  testID,
+  style,
+}: TabsContentProps) {
+  const { value: current } = useTabsCtx();
+  // 仅激活项渲染，其余直接返回 null（不保持挂载）
+  if (current !== value) return null;
+  return (
+    <View testID={testID} style={style}>
+      {children}
+    </View>
+  );
+});
+TabsContent.displayName = 'TabsContent';
+
+export { TabsContent };

package/src/components/Tabs/TabsList.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { TabsListProps } from './types';
+
+const TabsList = memo(function TabsList({
+  children,
+  testID,
+  style,
+}: TabsListProps) {
+  const muted = useTheme((t) => t.muted);
+  return (
+    <View
+      testID={testID}
+      style={[styles.list, { backgroundColor: muted }, style]}
+    >
+      {children}
+    </View>
+  );
+});
+TabsList.displayName = 'TabsList';
+
+const styles = StyleSheet.create({
+  list: {
+    flexDirection: 'row',
+    borderRadius: 8,
+    padding: 3,
+  },
+});
+
+export { TabsList };

package/src/components/Tabs/TabsTrigger.tsx

@@ -0,0 +1,63 @@
+import { memo } from 'react';
+import { Text, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import { useTabsCtx } from './context';
+import type { TabsTriggerProps } from './types';
+
+const TabsTrigger = memo(function TabsTrigger({
+  value,
+  children,
+  disabled = false,
+  testID,
+  style,
+}: TabsTriggerProps) {
+  const { value: current, onValueChange } = useTabsCtx();
+  const isSelected = current === value;
+  const bg = useTheme((t) => t.background);
+  const fg = useTheme((t) => t.foreground);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+
+  return (
+    <Pressable
+      testID={testID}
+      disabled={disabled}
+      onPress={() => onValueChange(value)}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isSelected, disabled }}
+      style={[styles.trigger, isSelected && { backgroundColor: bg }, style]}
+    >
+      <Text
+        style={[
+          styles.triggerLabel,
+          { color: isSelected ? fg : mutedFg },
+          isSelected && styles.selectedLabel,
+          disabled && styles.disabledOpacity,
+        ]}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+});
+TabsTrigger.displayName = 'TabsTrigger';
+
+const styles = StyleSheet.create({
+  trigger: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 6,
+    borderRadius: 6,
+  },
+  triggerLabel: {
+    fontSize: 14,
+  },
+  selectedLabel: {
+    fontWeight: '600',
+  },
+  disabledOpacity: {
+    opacity: 0.5,
+  },
+});
+
+export { TabsTrigger };

package/src/components/Tabs/context.ts

@@ -0,0 +1,12 @@
+import { createCompound } from '../../core';
+
+// ─── Tabs Context ─────────────────────────────────────────────────────────────
+
+/** Tabs 向 TabsTrigger / TabsContent 共享的选中状态 */
+export interface TabsCtx {
+  /** 当前激活的 Tab 的 value */
+  value: string;
+  onValueChange: (v: string) => void;
+}
+
+export const [TabsProvider, useTabsCtx] = createCompound<TabsCtx>('Tabs');

package/src/components/Tabs/index.tsx

@@ -0,0 +1,10 @@
+export { Tabs } from './Tabs';
+export { TabsList } from './TabsList';
+export { TabsTrigger } from './TabsTrigger';
+export { TabsContent } from './TabsContent';
+export type {
+  TabsProps,
+  TabsListProps,
+  TabsTriggerProps,
+  TabsContentProps,
+} from './types';

package/src/components/Tabs/types.ts

@@ -0,0 +1,37 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface TabsProps {
+  /** 受控选中值 */
+  value?: string;
+  /** 非受控初始选中值；默认为空字符串 */
+  defaultValue?: string;
+  /** 选中值变化时的回调 */
+  onValueChange?: (value: string) => void;
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface TabsListProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface TabsTriggerProps {
+  /** 此 Trigger 对应的 Tab 值；与 TabsContent 的 value 对应 */
+  value: string;
+  children?: React.ReactNode;
+  /** 禁用此标签页；默认为 false */
+  disabled?: boolean;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface TabsContentProps {
+  /** 此内容面板对应的 Tab 值；仅当 Tabs.value === value 时渲染 */
+  value: string;
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Text/Text.tsx

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+import { Text as RNText } from 'react-native';
+import { useTheme } from '../../core';
+import type { TextProps } from './types';
+
+const Text = memo(function Text({
+  visual = 'body',
+  style,
+  ...rest
+}: TextProps) {
+  const typographyStyle = useTheme((t) => t.typography[visual]);
+  return <RNText style={[typographyStyle, style]} {...rest} />;
+});
+
+Text.displayName = 'Text';
+
+export { Text };

package/src/components/Text/index.tsx

@@ -0,0 +1,2 @@
+export { Text } from './Text';
+export type { TextProps, VisualPreset } from './types';

package/src/components/Text/types.ts

@@ -0,0 +1,21 @@
+import type { TextProps as RNTextProps } from 'react-native';
+import React from 'react';
+
+/** 文字视觉预设，映射到 tokens.typography 中的同名样式规格 */
+export type VisualPreset =
+  | 'displayLg'
+  | 'displaySm'
+  | 'headingLg'
+  | 'headingSm'
+  | 'bodyLg'
+  | 'body'
+  | 'bodySm'
+  | 'label'
+  | 'labelSm'
+  | 'mono';
+
+export interface TextProps extends RNTextProps {
+  /** 排版预设；默认为 'body' */
+  visual?: VisualPreset;
+  children?: React.ReactNode;
+}

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,77 @@
+import { memo } from 'react';
+import { View, Text, TextInput, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { TextareaProps } from './types';
+
+const Textarea = memo(function Textarea({
+  label,
+  error,
+  hint,
+  disabled = false,
+  rows = 4,
+  testID,
+  style,
+  ...textInputProps
+}: TextareaProps) {
+  const fg = useTheme((t) => t.foreground);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+  const border = useTheme((t) => t.border);
+  const destructive = useTheme((t) => t.destructive);
+  const bg = useTheme((t) => t.background);
+  const muted = useTheme((t) => t.muted);
+
+  const borderColor = error ? destructive : border;
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      {label ? (
+        <Text style={[styles.label, { color: fg }]}>{label}</Text>
+      ) : null}
+      <TextInput
+        testID={testID}
+        multiline
+        editable={!disabled}
+        placeholderTextColor={mutedFg}
+        style={[
+          styles.input,
+          {
+            minHeight: rows * 22,
+            borderColor,
+            backgroundColor: disabled ? muted : bg,
+            color: fg,
+          },
+        ]}
+        {...textInputProps}
+      />
+      {error ? (
+        <Text style={[styles.hint, { color: destructive }]}>{error}</Text>
+      ) : hint ? (
+        <Text style={[styles.hint, { color: mutedFg }]}>{hint}</Text>
+      ) : null}
+    </View>
+  );
+});
+
+Textarea.displayName = 'Textarea';
+
+const styles = StyleSheet.create({
+  wrapper: {},
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 4,
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 14,
+  },
+  hint: {
+    fontSize: 12,
+    marginTop: 4,
+  },
+});
+
+export { Textarea };

package/src/components/Textarea/index.tsx

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

package/src/components/Textarea/types.ts

@@ -0,0 +1,17 @@
+import type { StyleProp, ViewStyle, TextInputProps } from 'react-native';
+
+export interface TextareaProps
+  extends Omit<TextInputProps, 'style' | 'multiline'> {
+  /** 标签文字；显示在输入框上方 */
+  label?: string;
+  /** 校验错误信息；有值时边框变红，显示在输入框下方 */
+  error?: string;
+  /** 提示文字；无 error 时显示在输入框下方（次要颜色） */
+  hint?: string;
+  /** 禁用时背景变灰且不可编辑；默认为 false */
+  disabled?: boolean;
+  /** 最小显示行数（每行约 22px）；默认为 4 */
+  rows?: number;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Toast/ToastProvider.tsx

@@ -0,0 +1,121 @@
+import { useCallback, useRef, useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import { ToastCtxProvider } from './context';
+import type { ToastOptions, ToastProviderProps } from './types';
+
+/** Toast 队列中的单条记录（带唯一 id） */
+interface ToastEntry extends ToastOptions {
+  id: number;
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<ToastEntry[]>([]);
+  // idRef：自增计数器，保证每条 Toast 有唯一 id
+  const idRef = useRef(0);
+
+  const show = useCallback((options: ToastOptions) => {
+    const id = ++idRef.current;
+    setToasts((prev) => [...prev, { ...options, id }]);
+    const duration = options.duration ?? 3000;
+    // duration 后从队列中移除该 Toast
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, duration);
+  }, []);
+
+  return (
+    <ToastCtxProvider value={{ show }}>
+      {children}
+      <ToastList toasts={toasts} />
+    </ToastCtxProvider>
+  );
+}
+
+// ─── ToastList ────────────────────────────────────────────────────────────────
+
+function ToastList({ toasts }: { toasts: ToastEntry[] }) {
+  if (toasts.length === 0) return null;
+  return (
+    <View style={styles.container} pointerEvents="box-none">
+      {toasts.map((t) => (
+        <ToastItem key={t.id} toast={t} />
+      ))}
+    </View>
+  );
+}
+
+// ─── ToastItem ────────────────────────────────────────────────────────────────
+
+function ToastItem({ toast }: { toast: ToastEntry }) {
+  const bg = useTheme((t) => t.background);
+  const fg = useTheme((t) => t.foreground);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+  const border = useTheme((t) => t.border);
+  const primary = useTheme((t) => t.primary);
+  const destructive = useTheme((t) => t.destructive);
+  const success = useTheme((t) => t.success);
+  const warning = useTheme((t) => t.warning);
+
+  // 根据 visual 确定左侧强调边框颜色（与 Alert 一致）
+  const accentColor =
+    toast.visual === 'destructive'
+      ? destructive
+      : toast.visual === 'success'
+      ? success
+      : toast.visual === 'warning'
+      ? warning
+      : primary;
+
+  return (
+    <View
+      style={[
+        styles.toast,
+        {
+          backgroundColor: bg,
+          borderColor: border,
+          borderLeftColor: accentColor,
+        },
+      ]}
+    >
+      <Text style={[styles.title, { color: fg }]}>{toast.title}</Text>
+      {toast.description ? (
+        <Text style={[styles.description, { color: mutedFg }]}>
+          {toast.description}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 32,
+    left: 16,
+    right: 16,
+    zIndex: 9999,
+  },
+  toast: {
+    borderWidth: 1,
+    borderLeftWidth: 4,
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  description: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+});

package/src/components/Toast/context.ts

@@ -0,0 +1,6 @@
+import { createCompound } from '../../core';
+import type { ToastCtxValue } from './types';
+
+const [ToastCtxProvider, useToast] = createCompound<ToastCtxValue>('Toast');
+
+export { ToastCtxProvider, useToast };

package/src/components/Toast/index.tsx

@@ -0,0 +1,8 @@
+export { ToastProvider } from './ToastProvider';
+export { useToast } from './context';
+export type {
+  ToastProviderProps,
+  ToastOptions,
+  ToastVisual,
+  ToastCtxValue,
+} from './types';

package/src/components/Toast/types.ts

@@ -0,0 +1,23 @@
+/** Toast 视觉风格：决定左侧高亮边框颜色 */
+export type ToastVisual = 'default' | 'success' | 'warning' | 'destructive';
+
+export interface ToastOptions {
+  /** Toast 主标题（必填） */
+  title: string;
+  /** 可选补充描述 */
+  description?: string;
+  /** 视觉风格；默认为 'default'（使用主色） */
+  visual?: ToastVisual;
+  /** 自动消失时长（ms）；默认为 3000ms */
+  duration?: number;
+}
+
+/** useToast hook 返回的 context 值 */
+export interface ToastCtxValue {
+  /** 显示一条 Toast */
+  show: (options: ToastOptions) => void;
+}
+
+export interface ToastProviderProps {
+  children: React.ReactNode;
+}