@unif/react-native-ui 0.4.0 → 1.0.1

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import { useControllable } from '../../core';
+import { DialogProvider } from './context';
+import type { DialogProps } from './types';
+
+const Dialog = memo(function Dialog({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: DialogProps) {
+  const [isOpen, setIsOpen] = useControllable({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  return (
+    <DialogProvider value={{ open: isOpen, onOpenChange: setIsOpen }}>
+      {children}
+    </DialogProvider>
+  );
+});
+Dialog.displayName = 'Dialog';
+
+export { Dialog };

package/src/components/Dialog/DialogContent.tsx

@@ -0,0 +1,71 @@
+import { memo } from 'react';
+import { View, Pressable, Modal, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import { useDialogCtx } from './context';
+import type { DialogContentProps } from './types';
+
+const DialogContent = memo(function DialogContent({
+  children,
+  testID,
+  backdropTestID,
+  style,
+}: DialogContentProps) {
+  const { open, onOpenChange } = useDialogCtx();
+  const bg = useTheme((t) => t.background);
+  const border = useTheme((t) => t.border);
+
+  // 未展开时不渲染，减少不必要的 DOM 节点
+  if (!open) return null;
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+    >
+      <View style={styles.overlay}>
+        {/* 半透明遮罩层，点击关闭 Dialog */}
+        <Pressable
+          testID={backdropTestID}
+          style={StyleSheet.absoluteFill}
+          onPress={() => onOpenChange(false)}
+        />
+        <View
+          testID={testID}
+          style={[
+            styles.dialog,
+            { backgroundColor: bg, borderColor: border },
+            style,
+          ]}
+        >
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+});
+DialogContent.displayName = 'DialogContent';
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    padding: 24,
+  },
+  dialog: {
+    width: '100%',
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+});
+
+export { DialogContent };

package/src/components/Dialog/DialogFooter.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { DialogFooterProps } from './types';
+
+const DialogFooter = memo(function DialogFooter({
+  children,
+  testID,
+  style,
+}: DialogFooterProps) {
+  return (
+    <View testID={testID} style={[styles.footer, style]}>
+      {children}
+    </View>
+  );
+});
+DialogFooter.displayName = 'DialogFooter';
+
+const styles = StyleSheet.create({
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 16,
+    gap: 8,
+  },
+});
+
+export { DialogFooter };

package/src/components/Dialog/DialogHeader.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { DialogHeaderProps } from './types';
+
+const DialogHeader = memo(function DialogHeader({
+  title,
+  description,
+  testID,
+}: DialogHeaderProps) {
+  const fg = useTheme((t) => t.foreground);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+  return (
+    <View testID={testID} style={styles.header}>
+      <Text style={[styles.title, { color: fg }]}>{title}</Text>
+      {description ? (
+        <Text style={[styles.description, { color: mutedFg }]}>
+          {description}
+        </Text>
+      ) : null}
+    </View>
+  );
+});
+DialogHeader.displayName = 'DialogHeader';
+
+const styles = StyleSheet.create({
+  header: {
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  description: {
+    fontSize: 14,
+    marginTop: 4,
+  },
+});
+
+export { DialogHeader };

package/src/components/Dialog/DialogTrigger.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import { Pressable } from 'react-native';
+import { useDialogCtx } from './context';
+import type { DialogTriggerProps } from './types';
+
+const DialogTrigger = memo(function DialogTrigger({
+  children,
+  testID,
+}: DialogTriggerProps) {
+  const { onOpenChange } = useDialogCtx();
+  return (
+    <Pressable testID={testID} onPress={() => onOpenChange(true)}>
+      {children}
+    </Pressable>
+  );
+});
+DialogTrigger.displayName = 'DialogTrigger';
+
+export { DialogTrigger };

package/src/components/Dialog/context.ts

@@ -0,0 +1,10 @@
+import { createCompound } from '../../core';
+
+/** Dialog 根组件向 Trigger/Content 共享的状态 */
+export interface DialogCtx {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const [DialogProvider, useDialogCtx] =
+  createCompound<DialogCtx>('Dialog');

package/src/components/Dialog/index.tsx

@@ -0,0 +1,12 @@
+export { Dialog } from './Dialog';
+export { DialogTrigger } from './DialogTrigger';
+export { DialogContent } from './DialogContent';
+export { DialogHeader } from './DialogHeader';
+export { DialogFooter } from './DialogFooter';
+export type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogContentProps,
+  DialogHeaderProps,
+  DialogFooterProps,
+} from './types';

package/src/components/Dialog/types.ts

@@ -0,0 +1,38 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface DialogProps {
+  /** 受控展开状态 */
+  open?: boolean;
+  /** 非受控初始展开状态；默认为 false */
+  defaultOpen?: boolean;
+  /** 展开状态变化时的回调 */
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+}
+
+export interface DialogTriggerProps {
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface DialogContentProps {
+  children?: React.ReactNode;
+  testID?: string;
+  /** 遮罩层的 testID，用于测试点击遮罩关闭行为 */
+  backdropTestID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface DialogHeaderProps {
+  /** 对话框标题（必填） */
+  title: string;
+  /** 对话框说明文字（可选） */
+  description?: string;
+  testID?: string;
+}
+
+export interface DialogFooterProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,34 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { DividerProps } from './types';
+
+const Divider = memo(function Divider({
+  orientation = 'horizontal',
+  style,
+  testID,
+  accessible,
+}: DividerProps) {
+  const borderColor = useTheme((t) => t.border);
+  return (
+    <View
+      accessibilityRole="separator"
+      accessible={accessible ?? true}
+      testID={testID}
+      style={[
+        orientation === 'horizontal' ? styles.horizontal : styles.vertical,
+        { backgroundColor: borderColor },
+        style,
+      ]}
+    />
+  );
+});
+
+Divider.displayName = 'Divider';
+
+const styles = StyleSheet.create({
+  horizontal: { height: 1, width: '100%' },
+  vertical: { width: 1, alignSelf: 'stretch' },
+});
+
+export { Divider };

package/src/components/Divider/index.tsx

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

package/src/components/Divider/types.ts

@@ -0,0 +1,9 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface DividerProps {
+  /** 分割线方向：horizontal=水平（高度 1px，宽度撑满），vertical=垂直（宽度 1px，高度撑满容器）；默认为 'horizontal' */
+  orientation?: 'horizontal' | 'vertical';
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  accessible?: boolean;
+}

package/src/components/Empty/Empty.tsx

@@ -0,0 +1,56 @@
+import { memo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { EmptyProps } from './types';
+
+const Empty = memo(function Empty({
+  description,
+  title,
+  image,
+  children,
+  testID,
+  style,
+}: EmptyProps) {
+  const fg = useTheme((t) => t.foreground);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+
+  return (
+    <View testID={testID} style={[styles.container, style]}>
+      {image ? <View style={styles.image}>{image}</View> : null}
+      {title ? (
+        <Text style={[styles.title, { color: fg }]}>{title}</Text>
+      ) : null}
+      <Text style={[styles.description, { color: mutedFg }]}>
+        {description}
+      </Text>
+      {children ? <View style={styles.extra}>{children}</View> : null}
+    </View>
+  );
+});
+
+Empty.displayName = 'Empty';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  image: {
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  description: {
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  extra: {
+    marginTop: 12,
+  },
+});
+
+export { Empty };

package/src/components/Empty/index.tsx

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

package/src/components/Empty/types.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface EmptyProps {
+  /** 说明文字（必填），居中显示 */
+  description: string;
+  /** 可选标题，字号略大且加粗 */
+  title?: string;
+  /** 可选插图区域（任意 ReactNode） */
+  image?: React.ReactNode;
+  /** 底部可选操作区（如「重新加载」按钮） */
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Form/Form.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import type { FormProps } from './types';
+
+const Form = memo(function Form({
+  onSubmit: _onSubmit,
+  children,
+  testID,
+  style,
+}: FormProps) {
+  return (
+    <View testID={testID} style={style}>
+      {children}
+    </View>
+  );
+});
+Form.displayName = 'Form';
+
+export { Form };

package/src/components/Form/FormField.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { FormFieldCtx } from './context';
+import type { FormFieldProps } from './types';
+
+const FormField = memo(function FormField({
+  name,
+  error,
+  children,
+  testID,
+  style,
+}: FormFieldProps) {
+  return (
+    <FormFieldCtx.Provider value={{ name, error }}>
+      <View testID={testID} style={[styles.field, style]}>
+        {children}
+      </View>
+    </FormFieldCtx.Provider>
+  );
+});
+FormField.displayName = 'FormField';
+
+const styles = StyleSheet.create({
+  field: {
+    marginBottom: 16,
+  },
+});
+
+export { FormField };

package/src/components/Form/FormLabel.tsx

@@ -0,0 +1,35 @@
+import { memo } from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import { useFormFieldCtx } from './context';
+import type { FormLabelProps } from './types';
+
+const FormLabel = memo(function FormLabel({
+  children,
+  testID,
+}: FormLabelProps) {
+  const fg = useTheme((t) => t.foreground);
+  const ctx = useFormFieldCtx();
+  const hasError = !!ctx?.error;
+  const destructive = useTheme((t) => t.destructive);
+
+  return (
+    <Text
+      testID={testID}
+      style={[styles.label, { color: hasError ? destructive : fg }]}
+    >
+      {children}
+    </Text>
+  );
+});
+FormLabel.displayName = 'FormLabel';
+
+const styles = StyleSheet.create({
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 4,
+  },
+});
+
+export { FormLabel };

package/src/components/Form/FormMessage.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import { useFormFieldCtx } from './context';
+import type { FormMessageProps } from './types';
+
+const FormMessage = memo(function FormMessage({ testID }: FormMessageProps) {
+  const ctx = useFormFieldCtx();
+  const destructive = useTheme((t) => t.destructive);
+
+  // 无错误信息时不渲染，避免占用多余空间
+  if (!ctx?.error) return null;
+
+  return (
+    <Text testID={testID} style={[styles.message, { color: destructive }]}>
+      {ctx.error}
+    </Text>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+const styles = StyleSheet.create({
+  message: {
+    fontSize: 12,
+    marginTop: 4,
+  },
+});
+
+export { FormMessage };

package/src/components/Form/context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+/** FormField 向下传递给 FormLabel / FormMessage 的上下文 */
+export interface FormFieldCtx {
+  /** 字段名，用于关联标签与控件 */
+  name: string;
+  /** 校验错误信息；有值时 FormLabel 变红，FormMessage 展示错误文字 */
+  error?: string;
+}
+
+export const FormFieldCtx = createContext<FormFieldCtx | null>(null);
+FormFieldCtx.displayName = 'FormFieldContext';
+
+export function useFormFieldCtx(): FormFieldCtx | null {
+  return useContext(FormFieldCtx);
+}

package/src/components/Form/index.tsx

@@ -0,0 +1,10 @@
+export { Form } from './Form';
+export { FormField } from './FormField';
+export { FormLabel } from './FormLabel';
+export { FormMessage } from './FormMessage';
+export type {
+  FormProps,
+  FormFieldProps,
+  FormLabelProps,
+  FormMessageProps,
+} from './types';

package/src/components/Form/types.ts

@@ -0,0 +1,28 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface FormProps {
+  /** 表单提交回调（在 RN 中通常由 Button 手动触发，此处保留语义一致性） */
+  onSubmit?: () => void;
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface FormFieldProps {
+  /** 字段名，注入到 FormFieldCtx 供 FormLabel / FormMessage 使用 */
+  name: string;
+  /** 校验错误信息；有值时子组件自动进入错误视觉状态 */
+  error?: string;
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface FormLabelProps {
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface FormMessageProps {
+  testID?: string;
+}

package/src/components/Input/Input.tsx

@@ -0,0 +1,82 @@
+import { memo } from 'react';
+import { View, Text, TextInput, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { InputProps, InputSize } from './types';
+
+/** 各尺寸对应的输入框高度（px） */
+const SIZE_HEIGHT: Record<InputSize, number> = { sm: 32, md: 40, lg: 48 };
+/** 各尺寸对应的文字字号 */
+const SIZE_FONT: Record<InputSize, number> = { sm: 13, md: 14, lg: 16 };
+
+const Input = memo(function Input({
+  label,
+  error,
+  hint,
+  size = 'md',
+  disabled = false,
+  testID,
+  style,
+  ...textInputProps
+}: InputProps) {
+  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);
+
+  // error 有值时边框高亮为危险色，否则使用普通 border token
+  const borderColor = error ? destructive : border;
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      {label ? (
+        <Text style={[styles.label, { color: fg }]}>{label}</Text>
+      ) : null}
+      <TextInput
+        testID={testID}
+        editable={!disabled}
+        placeholderTextColor={mutedFg}
+        style={[
+          styles.input,
+          {
+            height: SIZE_HEIGHT[size],
+            fontSize: SIZE_FONT[size],
+            borderColor,
+            backgroundColor: disabled ? muted : bg,
+            color: fg,
+          },
+        ]}
+        {...textInputProps}
+      />
+      {/* error 优先级高于 hint；两者均无时不渲染辅助文字区 */}
+      {error ? (
+        <Text style={[styles.hint, { color: destructive }]}>{error}</Text>
+      ) : hint ? (
+        <Text style={[styles.hint, { color: mutedFg }]}>{hint}</Text>
+      ) : null}
+    </View>
+  );
+});
+
+Input.displayName = 'Input';
+
+const styles = StyleSheet.create({
+  wrapper: {},
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 4,
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+  },
+  hint: {
+    fontSize: 12,
+    marginTop: 4,
+  },
+});
+
+export { Input };

package/src/components/Input/index.tsx

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

package/src/components/Input/types.ts

@@ -0,0 +1,19 @@
+import type { StyleProp, ViewStyle, TextInputProps } from 'react-native';
+
+/** 输入框尺寸：sm=32px，md=40px，lg=48px */
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+  /** 标签文字；显示在输入框上方 */
+  label?: string;
+  /** 校验错误信息；有值时边框变红，显示在输入框下方 */
+  error?: string;
+  /** 提示文字；无 error 时显示在输入框下方（次要颜色） */
+  hint?: string;
+  /** 尺寸；默认为 'md' */
+  size?: InputSize;
+  /** 禁用时背景变灰且不可编辑；默认为 false */
+  disabled?: boolean;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/List/List.tsx

@@ -0,0 +1,14 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import type { ListProps } from './types';
+
+const List = memo(function List({ children, testID, style }: ListProps) {
+  return (
+    <View testID={testID} style={style}>
+      {children}
+    </View>
+  );
+});
+List.displayName = 'List';
+
+export { List };