@unif/react-native-ui 0.3.6 → 1.0.0

package/src/popover/index.tsx

@@ -1,100 +0,0 @@
-/**
- * Popover 基础组件
- *
- * 锚定定位下拉容器，仅做定位，内容由 children 传入。
- */
-
-import React, { useCallback, useMemo, useState } from 'react';
-import { View, TouchableWithoutFeedback, Modal } from 'react-native';
-import type { LayoutChangeEvent, ViewStyle } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { PopoverSemanticStyles } from './style';
-import { createDefaultStyles } from './style';
-
-export interface PopoverProps {
-  visible: boolean;
-  onClose: () => void;
-  anchorLayout: { x: number; y: number; width: number; height: number };
-  width?: number;
-  placement?: 'bottom' | 'top';
-  children: React.ReactNode;
-  style?: ViewStyle;
-  styles?: Partial<PopoverSemanticStyles>;
-  testID?: string;
-}
-
-const GAP = 4;
-
-const Popover: React.FC<PopoverProps> = ({
-  visible,
-  onClose,
-  anchorLayout,
-  width = 180,
-  placement = 'bottom',
-  children,
-  style,
-  styles: semanticStyles,
-  testID,
-}) => {
-  const tokens = useTokens();
-  const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
-  const [contentHeight, setContentHeight] = useState(0);
-
-  const s = useMemo(
-    () => mergeStyles<PopoverSemanticStyles>(defaultStyles, semanticStyles),
-    [defaultStyles, semanticStyles]
-  );
-
-  const handleLayout = useCallback((e: LayoutChangeEvent) => {
-    setContentHeight(e.nativeEvent.layout.height);
-  }, []);
-
-  if (!visible) {
-    return null;
-  }
-
-  const needsHeight = placement === 'top' && contentHeight === 0;
-
-  const positionStyle: ViewStyle =
-    placement === 'bottom'
-      ? {
-          top: anchorLayout.y + anchorLayout.height + GAP,
-          left: anchorLayout.x,
-        }
-      : {
-          top: anchorLayout.y - contentHeight - GAP,
-          left: anchorLayout.x,
-        };
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="fade"
-      onRequestClose={onClose}
-    >
-      <TouchableWithoutFeedback onPress={onClose}>
-        <View style={s.overlay}>
-          <TouchableWithoutFeedback>
-            <View
-              onLayout={handleLayout}
-              style={[
-                s.content,
-                positionStyle,
-                { width },
-                needsHeight && { opacity: 0 },
-                style,
-              ]}
-              testID={testID}
-            >
-              {children}
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableWithoutFeedback>
-    </Modal>
-  );
-};
-
-export default Popover;

package/src/popover/style/index.tsx

@@ -1,23 +0,0 @@
-import type { ViewStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type PopoverSemanticStyles = {
-  overlay?: ViewStyle;
-  content?: ViewStyle;
-};
-
-export const createDefaultStyles = (t: Tokens): PopoverSemanticStyles => ({
-  overlay: {
-    flex: 1,
-  },
-  content: {
-    position: 'absolute',
-    backgroundColor: t.colorBgElevated,
-    borderRadius: 12,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.08,
-    shadowRadius: 8,
-    elevation: 4,
-  },
-});

package/src/row/index.tsx

@@ -1,47 +0,0 @@
-/**
- * 水平布局容器
- *
- * 默认 flexDirection: 'row' + alignItems: 'center'。
- */
-
-import React from 'react';
-import { View } from 'react-native';
-import type { ViewProps, ViewStyle } from 'react-native';
-import { baseStyle, wrapStyle } from './style';
-
-type AlignItems = ViewStyle['alignItems'];
-type JustifyContent = ViewStyle['justifyContent'];
-
-export interface RowProps extends ViewProps {
-  /** alignItems，默认 'center' */
-  align?: AlignItems;
-  /** justifyContent */
-  justify?: JustifyContent;
-  /** 子元素间距 */
-  gap?: number;
-  /** 是否换行 */
-  wrap?: boolean;
-}
-
-const Row: React.FC<RowProps> = ({
-  align,
-  justify,
-  gap,
-  wrap,
-  style,
-  ...rest
-}: RowProps) => (
-  <View
-    style={[
-      baseStyle,
-      align != null && { alignItems: align },
-      justify != null && { justifyContent: justify },
-      gap != null && { gap },
-      wrap && wrapStyle,
-      style,
-    ]}
-    {...rest}
-  />
-);
-
-export default Row;

package/src/row/style/index.tsx

@@ -1,14 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const baseStyle = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-}).row;
-
-export const wrapStyle = StyleSheet.create({
-  wrap: {
-    flexWrap: 'wrap',
-  },
-}).wrap;

package/src/space/index.tsx

@@ -1,26 +0,0 @@
-/**
- * 间距占位组件
- *
- * 在两个元素之间插入固定间距。
- */
-
-import React from 'react';
-import { View } from 'react-native';
-import { verticalStyle, horizontalStyle } from './style';
-
-export interface SpaceProps {
-  /** 间距大小，默认 12 */
-  size?: number;
-  /** 方向，默认 'vertical' */
-  direction?: 'horizontal' | 'vertical';
-}
-
-const Space: React.FC<SpaceProps> = ({ size = 12, direction = 'vertical' }) => (
-  <View
-    style={
-      direction === 'vertical' ? verticalStyle(size) : horizontalStyle(size)
-    }
-  />
-);
-
-export default Space;

package/src/space/style/index.tsx

@@ -1,3 +0,0 @@
-export const verticalStyle = (size: number) => ({ height: size });
-
-export const horizontalStyle = (size: number) => ({ width: size });

package/src/tag/index.tsx

@@ -1,78 +0,0 @@
-/**
- * Tag 标签组件
- *
- * 信息展示标签，支持三种变体：
- * - filled（默认）：浅色底 + 深色字
- * - solid：纯色底 + 白字
- * - outlined：边框 + 深色字
- *
- * color 支持预设语义色（success/processing/warning/error/default）或自定义 hex。
- */
-
-import React, { useMemo } from 'react';
-import { View, Text } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { TagSemanticStyles } from './style';
-import {
-  createDefaultStyles,
-  createSmallStyles,
-  createFilledStyles,
-  createSolidStyles,
-  createOutlinedStyles,
-  resolveColor,
-} from './style';
-
-export interface TagProps {
-  children: React.ReactNode;
-  variant?: 'filled' | 'solid' | 'outlined';
-  color?: string;
-  size?: 'default' | 'small';
-  style?: ViewStyle;
-  styles?: Partial<TagSemanticStyles>;
-  testID?: string;
-}
-
-const Tag: React.FC<TagProps> = ({
-  children,
-  variant = 'filled',
-  color,
-  size = 'default',
-  style,
-  styles: semanticStyles,
-  testID,
-}) => {
-  const tokens = useTokens();
-  const resolved = resolveColor(color);
-
-  const s = useMemo(() => {
-    let variantStyles;
-    if (variant === 'solid') {
-      variantStyles = createSolidStyles(resolved);
-    } else if (variant === 'outlined') {
-      variantStyles = createOutlinedStyles(resolved);
-    } else {
-      variantStyles = createFilledStyles(resolved);
-    }
-
-    return mergeStyles<TagSemanticStyles>(
-      createDefaultStyles(tokens),
-      size === 'small' ? createSmallStyles() : undefined,
-      variantStyles,
-      semanticStyles
-    );
-  }, [variant, resolved, size, tokens, semanticStyles]);
-
-  return (
-    <View style={[s.root, style]} testID={testID}>
-      {typeof children === 'string' ? (
-        <Text style={s.content}>{children}</Text>
-      ) : (
-        children
-      )}
-    </View>
-  );
-};
-
-export default Tag;

package/src/tag/style/index.tsx

@@ -1,101 +0,0 @@
-import type { ViewStyle, TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type TagSemanticStyles = {
-  root?: ViewStyle;
-  content?: TextStyle;
-};
-
-/** 预设语义色 → 实际色值映射 */
-const PRESET_COLORS = {
-  success: '#52C41A',
-  processing: '#1677FF',
-  warning: '#FF9500',
-  error: '#FF3B30',
-  default: '#8C8C8C',
-} as const;
-
-type PresetName = keyof typeof PRESET_COLORS;
-
-const isPreset = (c: string): c is PresetName => c in PRESET_COLORS;
-
-/** 解析颜色：支持预设名或自定义 hex */
-export function resolveColor(color: string | undefined): string {
-  if (!color) return PRESET_COLORS.default;
-  if (isPreset(color)) return PRESET_COLORS[color];
-  return color;
-}
-
-/**
- * 十六进制颜色追加透明度
- * '#1677FF' + 0.1 → '#1677FF1A'
- */
-function withAlpha(hex: string, alpha: number): string {
-  const a = Math.round(alpha * 255)
-    .toString(16)
-    .padStart(2, '0');
-  const base = hex.length === 9 ? hex.slice(0, 7) : hex;
-  return `${base}${a}`;
-}
-
-export const createDefaultStyles = (t: Tokens): TagSemanticStyles => ({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'flex-start',
-    borderRadius: t.radiusSm,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-  },
-  content: {
-    fontSize: t.fontSizeXs,
-  },
-});
-
-export const createSmallStyles = (): Partial<TagSemanticStyles> => ({
-  root: {
-    paddingHorizontal: 6,
-    paddingVertical: 1,
-  },
-  content: {
-    fontSize: 10,
-  },
-});
-
-/** filled: 浅色底 + 深色字（默认） */
-export const createFilledStyles = (
-  color: string
-): Partial<TagSemanticStyles> => ({
-  root: {
-    backgroundColor: withAlpha(color, 0.1),
-  },
-  content: {
-    color,
-  },
-});
-
-/** solid: 纯色底 + 白字 */
-export const createSolidStyles = (
-  color: string
-): Partial<TagSemanticStyles> => ({
-  root: {
-    backgroundColor: color,
-  },
-  content: {
-    color: '#FFFFFF',
-  },
-});
-
-/** outlined: 边框 + 深色字 + 透明底 */
-export const createOutlinedStyles = (
-  color: string
-): Partial<TagSemanticStyles> => ({
-  root: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: color,
-  },
-  content: {
-    color,
-  },
-});

package/src/text/index.tsx

@@ -1,56 +0,0 @@
-/**
- * 语义化文字组件
- *
- * variant 驱动样式，支持嵌套 Text。
- */
-
-import React, { useMemo } from 'react';
-import { Text as RNText } from 'react-native';
-import type { TextProps as RNTextProps } from 'react-native';
-import { useTokens } from '../theme/context';
-import type { FontWeight } from './style';
-import {
-  createVariantMap,
-  WEIGHT_MAP,
-  createSecondaryStyle,
-  createPrimaryStyle,
-} from './style';
-
-export interface TextProps extends RNTextProps {
-  variant?: 'title' | 'heading' | 'body' | 'caption' | 'micro';
-  secondary?: boolean;
-  primary?: boolean;
-  color?: string;
-  weight?: FontWeight;
-}
-
-const Text: React.FC<TextProps> = ({
-  variant = 'body',
-  secondary,
-  primary,
-  color,
-  weight,
-  style,
-  ...rest
-}: TextProps) => {
-  const tokens = useTokens();
-  const variantMap = useMemo(() => createVariantMap(tokens), [tokens]);
-  const secondaryStyle = useMemo(() => createSecondaryStyle(tokens), [tokens]);
-  const primaryStyle = useMemo(() => createPrimaryStyle(tokens), [tokens]);
-
-  return (
-    <RNText
-      style={[
-        variantMap[variant],
-        secondary && secondaryStyle,
-        primary && primaryStyle,
-        color != null && { color },
-        weight != null && WEIGHT_MAP[weight],
-        style,
-      ]}
-      {...rest}
-    />
-  );
-};
-
-export default Text;

package/src/text/style/index.tsx

@@ -1,36 +0,0 @@
-import type { TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type FontWeight = 'medium' | 'semibold' | 'bold';
-
-export const createVariantMap = (t: Tokens) => ({
-  title: {
-    fontSize: 20,
-    lineHeight: 26,
-    fontWeight: '600' as const,
-    color: t.colorText,
-  },
-  heading: {
-    fontSize: 16,
-    lineHeight: 22,
-    fontWeight: '600' as const,
-    color: t.colorText,
-  },
-  body: { fontSize: 15, lineHeight: 22, color: t.colorText },
-  caption: { fontSize: 13, lineHeight: 18, color: t.colorText },
-  micro: { fontSize: 12, lineHeight: 18, color: t.colorText },
-});
-
-export const WEIGHT_MAP: Record<FontWeight, TextStyle> = {
-  medium: { fontWeight: '500' },
-  semibold: { fontWeight: '600' },
-  bold: { fontWeight: '700' },
-};
-
-export const createSecondaryStyle = (t: Tokens): TextStyle => ({
-  color: t.colorTextSecondary,
-});
-
-export const createPrimaryStyle = (t: Tokens): TextStyle => ({
-  color: t.colorPrimary,
-});

package/src/theme/context.tsx

@@ -1,38 +0,0 @@
-/**
- * ConfigProvider — 声明式主题系统
- *
- * 通过 React Context 注入 token，支持嵌套覆盖。
- */
-
-import React, { createContext, useContext, useMemo } from 'react';
-import { defaultTokens } from './tokens';
-import type { Tokens } from './tokens';
-
-export type TokenOverrides = Partial<Tokens>;
-
-const ThemeContext = createContext<Tokens>(defaultTokens);
-
-export interface ConfigProviderProps {
-  theme?: { token?: TokenOverrides };
-  children: React.ReactNode;
-}
-
-export const ConfigProvider: React.FC<ConfigProviderProps> = ({
-  theme,
-  children,
-}) => {
-  const parent = useContext(ThemeContext);
-
-  const merged = useMemo<Tokens>(() => {
-    if (!theme?.token) return parent;
-    return { ...parent, ...theme.token } as Tokens;
-  }, [parent, theme?.token]);
-
-  return (
-    <ThemeContext.Provider value={merged}>{children}</ThemeContext.Provider>
-  );
-};
-
-export function useTokens(): Tokens {
-  return useContext(ThemeContext);
-}

package/src/theme/tokens.ts

@@ -1,64 +0,0 @@
-/**
- * Design Tokens — 静态默认值
- */
-
-export const defaultTokens = {
-  colorPrimary: '#EB6E00',
-  colorSuccess: '#34C759',
-  colorWarning: '#FF9500',
-  colorError: '#FF3B30',
-
-  colorBgPage: '#F7F7F8',
-  colorBgElevated: '#FFFFFF',
-  colorBgUserMsg: '#F0F0F0',
-
-  colorText: '#1D1D1F',
-  colorTextSecondary: '#8E8E93',
-  colorTextPlaceholder: '#C7C7CC',
-  colorBorder: '#E5E5EA',
-  colorLink: '#007AFF',
-
-  colorBgHeader: '#FFFFFF',
-  colorHeaderText: '#1D1D1F',
-  colorHeaderIcon: '#8E8E93',
-
-  fontSizeXs: 11,
-  fontSizeSm: 13,
-  fontSize: 15,
-  fontSizeMd: 16,
-  fontSizeLg: 17,
-  fontSizeXl: 20,
-  lineHeight: 22,
-  lineHeightLg: 26,
-
-  spaceXs: 4,
-  spaceSm: 8,
-  space: 12,
-  spaceMd: 16,
-  spaceLg: 20,
-  spaceXl: 24,
-  spaceXxl: 32,
-
-  radiusSm: 6,
-  radius: 10,
-  radiusLg: 16,
-  radiusXl: 20,
-  radiusFull: 999,
-
-  shadowSm: {
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.04,
-    shadowRadius: 2,
-    elevation: 1,
-  },
-  shadow: {
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.06,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-};
-
-export type Tokens = typeof defaultTokens;

package/src/touchable/index.tsx

@@ -1,45 +0,0 @@
-/**
- * 统一触摸反馈组件
- *
- * 基于 Pressable，替代 TouchableOpacity。
- * 按下时透明度降低，支持 activeOpacity 自定义。
- */
-
-import React from 'react';
-import { Pressable } from 'react-native';
-import type { ViewProps, ViewStyle } from 'react-native';
-import { disabledStyle } from './style';
-
-export interface TouchableProps extends ViewProps {
-  onPress?: () => void;
-  onLongPress?: () => void;
-  disabled?: boolean;
-  /** 按下态透明度，默认 0.7 */
-  activeOpacity?: number;
-  testID?: string;
-}
-
-const Touchable: React.FC<TouchableProps> = ({
-  onPress,
-  onLongPress,
-  disabled,
-  activeOpacity = 0.7,
-  style,
-  testID,
-  ...rest
-}: TouchableProps) => (
-  <Pressable
-    onPress={onPress}
-    onLongPress={onLongPress}
-    disabled={disabled}
-    testID={testID}
-    style={({ pressed }) => [
-      style as ViewStyle,
-      pressed && { opacity: activeOpacity },
-      disabled && disabledStyle,
-    ]}
-    {...rest}
-  />
-);
-
-export default Touchable;

package/src/touchable/style/index.tsx

@@ -1,5 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const disabledStyle = StyleSheet.create({
-  s: { opacity: 0.4 },
-}).s;