@unif/react-native-ui 0.4.0 → 1.0.1

package/src/components/Badge/types.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface BadgeProps {
+  /** 视觉风格；默认为 'default'（使用 destructive 色，通常为红色） */
+  visual?: 'default' | 'secondary' | 'destructive' | 'outline' | 'warning';
+  /** 显示数字（正整数）或小圆点（'dot'）；不传则只渲染徽标容器 */
+  count?: number | 'dot';
+  /** 数字上限；超出时显示 max+；默认为 99 */
+  max?: number;
+  /** 为 true 时在 count=0 时也显示；默认为 false */
+  showZero?: boolean;
+  /** 有 children 时，徽标绝对定位叠加在右上角 */
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  accessibilityLabel?: string;
+  accessible?: boolean;
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,102 @@
+import { memo } from 'react';
+import { Pressable, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { useTheme } from '../../core';
+import type { ButtonProps, ButtonSize } from './types';
+
+/** 各尺寸对应的容器高度（px） */
+const SIZE_HEIGHT: Record<ButtonSize, number> = { sm: 32, md: 40, lg: 48 };
+/** 各尺寸对应的文字字号 */
+const SIZE_FONT: Record<ButtonSize, number> = { sm: 13, md: 14, lg: 16 };
+/** 各尺寸对应的水平内边距 */
+const SIZE_PX: Record<ButtonSize, number> = { sm: 12, md: 16, lg: 20 };
+
+const Button = memo(function Button({
+  label,
+  onPress,
+  visual = 'default',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  testID,
+  style,
+}: ButtonProps) {
+  const primary = useTheme((t) => t.primary);
+  const primaryFg = useTheme((t) => t.primaryForeground);
+  const destructive = useTheme((t) => t.destructive);
+  const destructiveFg = useTheme((t) => t.destructiveForeground);
+  const border = useTheme((t) => t.border);
+  const fg = useTheme((t) => t.foreground);
+
+  // disabled 或 loading 时均不可交互
+  const isDisabled = disabled || loading;
+
+  // 根据 visual 计算容器背景色、边框和文字颜色
+  const containerStyle = [
+    styles.base,
+    {
+      height: SIZE_HEIGHT[size],
+      paddingHorizontal: SIZE_PX[size],
+      backgroundColor:
+        visual === 'default'
+          ? primary
+          : visual === 'destructive'
+          ? destructive
+          : visual === 'outline' || visual === 'ghost' || visual === 'link'
+          ? 'transparent'
+          : primary,
+      borderWidth: visual === 'outline' ? 1 : 0,
+      borderColor: visual === 'outline' ? border : 'transparent',
+      opacity: isDisabled ? 0.5 : 1,
+    },
+    style,
+  ];
+
+  const textColor =
+    visual === 'default'
+      ? primaryFg
+      : visual === 'destructive'
+      ? destructiveFg
+      : visual === 'link'
+      ? primary
+      : fg;
+
+  return (
+    <Pressable
+      testID={testID}
+      onPress={!isDisabled ? onPress : undefined}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled }}
+      style={containerStyle}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={textColor} />
+      ) : (
+        <Text
+          style={[
+            styles.label,
+            { fontSize: SIZE_FONT[size], color: textColor },
+          ]}
+        >
+          {label}
+        </Text>
+      )}
+    </Pressable>
+  );
+});
+
+Button.displayName = 'Button';
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 8,
+  },
+  label: {
+    fontWeight: '600',
+  },
+});
+
+export { Button };

package/src/components/Button/index.tsx

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVisual, ButtonSize } from './types';

package/src/components/Button/types.ts

@@ -0,0 +1,28 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** 按钮视觉风格：default=主色填充，outline=描边，ghost=透明，destructive=危险色，link=文字链接 */
+export type ButtonVisual =
+  | 'default'
+  | 'outline'
+  | 'ghost'
+  | 'destructive'
+  | 'link';
+/** 按钮尺寸：sm=32px，md=40px，lg=48px */
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps {
+  /** 按钮文字标签（必填） */
+  label: string;
+  /** 点击回调 */
+  onPress?: () => void;
+  /** 视觉风格；默认为 'default' */
+  visual?: ButtonVisual;
+  /** 尺寸；默认为 'md' */
+  size?: ButtonSize;
+  /** 是否禁用；默认为 false */
+  disabled?: boolean;
+  /** 是否显示加载状态（同时禁用点击）；默认为 false */
+  loading?: boolean;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { CardProps } from './types';
+
+const Card = memo(function Card({ style, children, testID }: CardProps) {
+  const bg = useTheme((t) => t.card);
+  const border = useTheme((t) => t.border);
+  const shadow = useTheme((t) => t.shadow);
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.card,
+        { backgroundColor: bg, borderColor: border },
+        // shadow token 为 null 时不附加阴影样式（Android elevation 已由 styles.card 控制）
+        shadow ? ({ boxShadow: shadow.boxShadow } as any) : undefined,
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+});
+Card.displayName = 'Card';
+
+const styles = StyleSheet.create({
+  card: { borderRadius: 8, borderWidth: 1, overflow: 'hidden' },
+});
+
+export { Card };

package/src/components/Card/CardContent.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { CardContentProps } from './types';
+
+const CardContent = memo(function CardContent({
+  style,
+  children,
+  testID,
+}: CardContentProps) {
+  return (
+    <View testID={testID} style={[styles.content, style]}>
+      {children}
+    </View>
+  );
+});
+CardContent.displayName = 'CardContent';
+
+const styles = StyleSheet.create({
+  content: { padding: 16 },
+});
+
+export { CardContent };

package/src/components/Card/CardDescription.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { Text } from 'react-native';
+import { useTheme } from '../../core';
+import type { CardDescriptionProps } from './types';
+
+const CardDescription = memo(function CardDescription({
+  style,
+  children,
+  testID,
+}: CardDescriptionProps) {
+  // 使用 body 排版规格，颜色取 mutedForeground token（次要文字）
+  const typography = useTheme((t) => t.typography.body);
+  const color = useTheme((t) => t.mutedForeground);
+  return (
+    <Text testID={testID} style={[typography, { color }, style]}>
+      {children}
+    </Text>
+  );
+});
+CardDescription.displayName = 'CardDescription';
+
+export { CardDescription };

package/src/components/Card/CardFooter.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { CardFooterProps } from './types';
+
+const CardFooter = memo(function CardFooter({
+  style,
+  children,
+  testID,
+}: CardFooterProps) {
+  return (
+    <View testID={testID} style={[styles.footer, style]}>
+      {children}
+    </View>
+  );
+});
+CardFooter.displayName = 'CardFooter';
+
+const styles = StyleSheet.create({
+  footer: {
+    padding: 16,
+    paddingTop: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export { CardFooter };

package/src/components/Card/CardHeader.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { CardHeaderProps } from './types';
+
+const CardHeader = memo(function CardHeader({
+  style,
+  children,
+  testID,
+}: CardHeaderProps) {
+  return (
+    <View testID={testID} style={[styles.header, style]}>
+      {children}
+    </View>
+  );
+});
+CardHeader.displayName = 'CardHeader';
+
+const styles = StyleSheet.create({
+  header: { padding: 16, paddingBottom: 0 },
+});
+
+export { CardHeader };

package/src/components/Card/CardTitle.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { Text } from 'react-native';
+import { useTheme } from '../../core';
+import type { CardTitleProps } from './types';
+
+const CardTitle = memo(function CardTitle({
+  style,
+  children,
+  testID,
+}: CardTitleProps) {
+  // 使用 headingSm 排版规格，颜色取 cardForeground token
+  const typography = useTheme((t) => t.typography.headingSm);
+  const color = useTheme((t) => t.cardForeground);
+  return (
+    <Text testID={testID} style={[typography, { color }, style]}>
+      {children}
+    </Text>
+  );
+});
+CardTitle.displayName = 'CardTitle';
+
+export { CardTitle };

package/src/components/Card/index.tsx

@@ -0,0 +1,14 @@
+export { Card } from './Card';
+export { CardHeader } from './CardHeader';
+export { CardTitle } from './CardTitle';
+export { CardDescription } from './CardDescription';
+export { CardContent } from './CardContent';
+export { CardFooter } from './CardFooter';
+export type {
+  CardProps,
+  CardHeaderProps,
+  CardTitleProps,
+  CardDescriptionProps,
+  CardContentProps,
+  CardFooterProps,
+} from './types';

package/src/components/Card/types.ts

@@ -0,0 +1,37 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export interface CardProps {
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface CardHeaderProps {
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface CardTitleProps {
+  style?: StyleProp<TextStyle>;
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface CardDescriptionProps {
+  style?: StyleProp<TextStyle>;
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface CardContentProps {
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface CardFooterProps {
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  testID?: string;
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,98 @@
+import { memo } from 'react';
+import { Pressable, View, Text, StyleSheet } from 'react-native';
+import { useControllable, useTheme, warning } from '../../core';
+import type { CheckboxProps } from './types';
+
+const Checkbox = memo(function Checkbox({
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  indeterminate = false,
+  disabled = false,
+  label,
+  accessibilityLabel,
+  testID,
+  accessible,
+}: CheckboxProps) {
+  const tokens = useTheme();
+
+  warning(
+    !!(label || accessibilityLabel),
+    'Checkbox: either "label" or "accessibilityLabel" prop must be provided for screen reader users.'
+  );
+
+  const [checkedValue, setChecked] = useControllable({
+    value: checked,
+    defaultValue: defaultChecked ?? false,
+    onChange: onCheckedChange,
+  });
+
+  const resolvedLabel = accessibilityLabel ?? label;
+
+  // indeterminate 优先级高于 checked：'mixed' 对应 WAI-ARIA 规范中的混合选中状态
+  const a11yChecked: boolean | 'mixed' = indeterminate ? 'mixed' : checkedValue;
+
+  // isFilled：选中或半选时使用主色填充方框
+  const isFilled = indeterminate || checkedValue;
+  const bgColor = isFilled ? tokens.primary : 'transparent';
+  const borderColor = isFilled ? tokens.primary : tokens.border;
+
+  // 半选显示横线，选中显示对勾，未选不渲染图标
+  let iconText: string | null = null;
+  if (indeterminate) {
+    iconText = '—';
+  } else if (checkedValue) {
+    iconText = '✓';
+  }
+
+  return (
+    <Pressable
+      testID={testID}
+      accessible={accessible}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: a11yChecked, disabled }}
+      accessibilityLabel={resolvedLabel}
+      onPress={() => {
+        if (!disabled) {
+          setChecked(!checkedValue);
+        }
+      }}
+      style={[disabled && styles.disabled]}
+    >
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: bgColor,
+            borderColor,
+          },
+        ]}
+      >
+        {iconText !== null && <Text style={styles.icon}>{iconText}</Text>}
+      </View>
+    </Pressable>
+  );
+});
+
+Checkbox.displayName = 'Checkbox';
+
+const styles = StyleSheet.create({
+  box: {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    fontSize: 12,
+    color: 'white',
+    lineHeight: 16,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
+export { Checkbox };

package/src/components/Checkbox/index.tsx

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

package/src/components/Checkbox/types.ts

@@ -0,0 +1,20 @@
+export interface CheckboxProps {
+  /** 受控选中值 */
+  checked?: boolean;
+  /** 非受控初始值；默认为 false */
+  defaultChecked?: boolean;
+  /** 选中状态变化时的回调 */
+  onCheckedChange?: (checked: boolean) => void;
+  /** 为 true 时显示横线指示器；优先级高于 checked；默认为 false */
+  indeterminate?: boolean;
+  /** 是否禁用；默认为 false */
+  disabled?: boolean;
+  /** 文字标签——在未设置 accessibilityLabel 时同时用作无障碍标签 */
+  label?: string;
+  /** 显式无障碍标签；优先级高于 label */
+  accessibilityLabel?: string;
+  /** 用于测试的 testID */
+  testID?: string;
+  /** 元素是否可被无障碍访问 */
+  accessible?: boolean;
+}

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,34 @@
+import { memo, useCallback } from 'react';
+import { View } from 'react-native';
+import { useControllable } from '../../core';
+import { CollapsibleProvider } from './context';
+import type { CollapsibleProps } from './types';
+
+const Collapsible = memo(function Collapsible({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  children,
+  testID,
+}: CollapsibleProps) {
+  const [isOpen, setIsOpen] = useControllable({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+  }, [disabled, isOpen, setIsOpen]);
+
+  return (
+    <CollapsibleProvider value={{ open: isOpen, toggle, disabled }}>
+      <View testID={testID}>{children}</View>
+    </CollapsibleProvider>
+  );
+});
+Collapsible.displayName = 'Collapsible';
+
+export { Collapsible };

package/src/components/Collapsible/CollapsibleContent.tsx

@@ -0,0 +1,62 @@
+import { memo, useCallback } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import { useCollapsibleCtx } from './context';
+import type { CollapsibleContentProps } from './types';
+
+const CollapsibleContent = memo(function CollapsibleContent({
+  children,
+  testID,
+  style,
+}: CollapsibleContentProps) {
+  const { open } = useCollapsibleCtx();
+
+  // contentHeight：内容区域的实际高度，首次 onLayout 后确定
+  const contentHeight = useSharedValue(0);
+  // measured：标记首次测量是否完成，避免在高度未知时播放动画
+  const measured = useSharedValue(0);
+
+  const animStyle = useAnimatedStyle(() => {
+    if (measured.value === 0)
+      return { height: 0, overflow: 'hidden' as const, opacity: 0 };
+    return {
+      height: open ? contentHeight.value : withTiming(0, { duration: 250 }),
+      overflow: 'hidden' as const,
+      opacity: open ? 1 : 0,
+    };
+  });
+
+  const onLayout = useCallback(
+    (e: { nativeEvent: { layout: { height: number } } }) => {
+      const h = e.nativeEvent.layout.height;
+      if (measured.value === 0) {
+        // 首次测量：直接设置，不播放动画
+        contentHeight.value = h;
+        measured.value = 1;
+        return;
+      }
+      // 内容高度动态变化时平滑过渡
+      if (contentHeight.value !== h) {
+        cancelAnimation(contentHeight);
+        contentHeight.value = withTiming(h, { duration: 200 });
+      }
+    },
+    [contentHeight, measured]
+  );
+
+  return (
+    <Animated.View style={[animStyle, style]}>
+      <View testID={testID} onLayout={onLayout}>
+        {children}
+      </View>
+    </Animated.View>
+  );
+});
+CollapsibleContent.displayName = 'CollapsibleContent';
+
+export { CollapsibleContent };

package/src/components/Collapsible/CollapsibleTrigger.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+import { Pressable } from 'react-native';
+import { useCollapsibleCtx } from './context';
+import type { CollapsibleTriggerProps } from './types';
+
+const CollapsibleTrigger = memo(function CollapsibleTrigger({
+  children,
+  testID,
+  style,
+}: CollapsibleTriggerProps) {
+  const { open, toggle, disabled } = useCollapsibleCtx();
+
+  return (
+    <Pressable
+      testID={testID}
+      onPress={toggle}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: open, disabled }}
+      style={style}
+    >
+      {children}
+    </Pressable>
+  );
+});
+CollapsibleTrigger.displayName = 'CollapsibleTrigger';
+
+export { CollapsibleTrigger };

package/src/components/Collapsible/context.ts

@@ -0,0 +1,13 @@
+import { createCompound } from '../../core';
+
+// ─── Collapsible Context ──────────────────────────────────────────────────────
+
+/** Collapsible 根组件向 Trigger/Content 共享的状态 */
+export interface CollapsibleCtx {
+  open: boolean;
+  toggle: () => void;
+  disabled: boolean;
+}
+
+export const [CollapsibleProvider, useCollapsibleCtx] =
+  createCompound<CollapsibleCtx>('Collapsible');

package/src/components/Collapsible/index.tsx

@@ -0,0 +1,8 @@
+export { Collapsible } from './Collapsible';
+export { CollapsibleTrigger } from './CollapsibleTrigger';
+export { CollapsibleContent } from './CollapsibleContent';
+export type {
+  CollapsibleProps,
+  CollapsibleTriggerProps,
+  CollapsibleContentProps,
+} from './types';

package/src/components/Collapsible/types.ts

@@ -0,0 +1,26 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface CollapsibleProps {
+  /** 受控展开状态 */
+  open?: boolean;
+  /** 非受控初始展开状态；默认为 false */
+  defaultOpen?: boolean;
+  /** 展开状态变化时的回调 */
+  onOpenChange?: (open: boolean) => void;
+  /** 禁用时点击 Trigger 无效；默认为 false */
+  disabled?: boolean;
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface CollapsibleTriggerProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CollapsibleContentProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}