@unif/react-native-ui 0.3.6 → 1.0.0

package/lib/typescript/module/src/theme/tokens.d.ts

@@ -1,62 +0,0 @@
-/**
- * Design Tokens — 静态默认值
- */
-export declare const defaultTokens: {
-    colorPrimary: string;
-    colorSuccess: string;
-    colorWarning: string;
-    colorError: string;
-    colorBgPage: string;
-    colorBgElevated: string;
-    colorBgUserMsg: string;
-    colorText: string;
-    colorTextSecondary: string;
-    colorTextPlaceholder: string;
-    colorBorder: string;
-    colorLink: string;
-    colorBgHeader: string;
-    colorHeaderText: string;
-    colorHeaderIcon: string;
-    fontSizeXs: number;
-    fontSizeSm: number;
-    fontSize: number;
-    fontSizeMd: number;
-    fontSizeLg: number;
-    fontSizeXl: number;
-    lineHeight: number;
-    lineHeightLg: number;
-    spaceXs: number;
-    spaceSm: number;
-    space: number;
-    spaceMd: number;
-    spaceLg: number;
-    spaceXl: number;
-    spaceXxl: number;
-    radiusSm: number;
-    radius: number;
-    radiusLg: number;
-    radiusXl: number;
-    radiusFull: number;
-    shadowSm: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-};
-export type Tokens = typeof defaultTokens;
-//# sourceMappingURL=tokens.d.ts.map

package/lib/typescript/module/src/theme/tokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDzB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,OAAO,aAAa,CAAC"}

package/lib/typescript/module/src/touchable/index.d.ts

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

package/lib/typescript/module/src/touchable/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/touchable/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,cAAc,CAAC;AAGzD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqBvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/module/src/touchable/style/index.d.ts

@@ -1,4 +0,0 @@
-export declare const disabledStyle: {
-    opacity: number;
-};
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/touchable/style/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/touchable/style/index.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;CAEtB,CAAC"}

package/lib/typescript/module/src/wave-animation/index.d.ts

@@ -1,20 +0,0 @@
-/**
- * WaveAnimation 原子组件
- *
- * 柱状声波动画，可配置柱数、尺寸和颜色。
- */
-import React from 'react';
-import type { ViewStyle } from 'react-native';
-export interface WaveAnimationProps {
-    active: boolean;
-    color?: string;
-    barCount?: number;
-    barWidth?: number;
-    minHeight?: number;
-    maxHeight?: number;
-    style?: ViewStyle;
-    testID?: string;
-}
-declare const _default: React.NamedExoticComponent<WaveAnimationProps>;
-export default _default;
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/wave-animation/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/wave-animation/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;;AA4ED,wBAAyC"}

package/src/README.md

@@ -1,99 +0,0 @@
-# @unif/react-native-ui 基础组件
-
-借鉴 antd v6 语义化设计 + ant-design-mobile-rn 实践，提供基础 UI 组件。
-
-## 组件总览
-
-### 布局
-
-| 组件 | 说明 | 文档 |
-|------|------|------|
-| Row | 水平布局 | [row/index.md](./row/index.md) |
-| Column | 垂直布局 | [column/index.md](./column/index.md) |
-| Center | 居中布局 | [center/index.md](./center/index.md) |
-| Space | 间距占位 | [space/index.md](./space/index.md) |
-
-### 通用
-
-| 组件 | 说明 | 文档 |
-|------|------|------|
-| Text | 语义化文字 | [text/index.md](./text/index.md) |
-| Button | 语义化按钮 | [button/index.md](./button/index.md) |
-| Touchable | 统一触摸反馈 | [touchable/index.md](./touchable/index.md) |
-| Divider | 分割线 | [divider/index.md](./divider/index.md) |
-| ListItem | 列表行 | [list-item/index.md](./list-item/index.md) |
-| mergeStyles | 样式合并工具 | [hooks/index.md](./hooks/index.md) |
-
-## 引入方式
-
-```tsx
-import { Row, Column, Center, Space, Text, Button, Touchable, Divider, ListItem } from '@unif/react-native-ui';
-```
-
-## 目录结构
-
-```
-src/
-├── index.tsx                 # 统一导出
-├── README.md                 # 总览（本文件）
-├── theme/
-│   ├── config.ts             # 主题配置（configure API）
-│   └── tokens.ts             # Design Tokens
-├── hooks/
-│   ├── index.ts
-│   ├── index.md              # mergeStyles 文档
-│   └── useMergeStyles.ts
-├── row/
-│   ├── index.tsx             # Row 组件
-│   ├── index.md
-│   └── style/
-│       └── index.tsx
-├── column/
-│   ├── index.tsx             # Column 组件
-│   ├── index.md
-│   └── style/
-│       └── index.tsx
-├── center/
-│   ├── index.tsx             # Center 组件
-│   ├── index.md
-│   └── style/
-│       └── index.tsx
-├── space/
-│   ├── index.tsx             # Space 组件
-│   ├── index.md
-│   └── style/
-│       └── index.tsx
-├── text/
-│   ├── index.tsx             # Text 组件
-│   ├── index.md
-│   └── style/
-│       └── index.tsx
-├── button/
-│   ├── index.tsx             # Button 组件
-│   ├── index.md
-│   └── style/
-│       └── index.tsx
-├── touchable/
-│   ├── index.tsx             # Touchable 组件
-│   ├── index.md
-│   └── style/
-│       └── index.tsx
-├── divider/
-│   ├── index.tsx             # Divider 组件
-│   ├── index.md
-│   └── style/
-│       └── index.tsx
-└── list-item/
-    ├── index.tsx             # ListItem 组件
-    ├── index.md
-    └── style/
-        └── index.tsx
-```
-
-## 设计原则
-
-1. **语义化** — `variant="caption"` 而非 `fontSize={13}`，意图清晰
-2. **Semantic Styles** — 消费方通过 `styles={{content: {...}}}` 精确覆盖内部 slot，不侵入组件结构
-3. **Token 驱动** — 所有颜色、间距来自 `tokens`，主题可控
-4. **样式数组组合** — `[baseStyle, variantStyle, stateStyle, userStyle]` 优先级叠加
-5. **性能安全** — 样式常量预定义在模块顶层，`mergeStyles` 配合 `useMemo` 使用

package/src/action-sheet/index.tsx

@@ -1,91 +0,0 @@
-/**
- * ActionSheet 基础组件
- *
- * 轻量底部选项面板，Modal + 网格布局。
- */
-
-import React, { useMemo } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  Modal,
-} from 'react-native';
-import type { ViewStyle, DimensionValue } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { ActionSheetSemanticStyles, ActionSheetOption } from './style';
-import { createDefaultStyles } from './style';
-
-export interface ActionSheetProps {
-  visible: boolean;
-  onClose: () => void;
-  title?: string;
-  options: ActionSheetOption[];
-  onSelect: (key: string) => void;
-  columns?: number;
-  style?: ViewStyle;
-  styles?: Partial<ActionSheetSemanticStyles>;
-  testID?: string;
-}
-
-const ActionSheet: React.FC<ActionSheetProps> = ({
-  visible,
-  onClose,
-  title,
-  options,
-  onSelect,
-  columns = 3,
-  style,
-  styles: semanticStyles,
-  testID,
-}) => {
-  const tokens = useTokens();
-  const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
-
-  const s = useMemo(
-    () => mergeStyles<ActionSheetSemanticStyles>(defaultStyles, semanticStyles),
-    [defaultStyles, semanticStyles]
-  );
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="slide"
-      onRequestClose={onClose}
-    >
-      <TouchableWithoutFeedback onPress={onClose}>
-        <View style={s.overlay} />
-      </TouchableWithoutFeedback>
-
-      <View style={[s.panel, style]} testID={testID}>
-        {title ? <Text style={s.title}>{title}</Text> : null}
-        <View style={s.grid}>
-          {options.map((item) => (
-            <TouchableOpacity
-              key={item.key}
-              style={[
-                s.option,
-                { width: `${100 / columns}%` as DimensionValue },
-              ]}
-              onPress={() => onSelect(item.key)}
-              activeOpacity={0.7}
-              testID={testID ? `${testID}-${item.key}` : undefined}
-            >
-              <View style={s.optionIcon}>{item.icon}</View>
-              <Text style={s.optionLabel}>{item.label}</Text>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-export default ActionSheet;

package/src/action-sheet/style/index.tsx

@@ -1,59 +0,0 @@
-import type { ViewStyle, TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type ActionSheetSemanticStyles = {
-  overlay?: ViewStyle;
-  panel?: ViewStyle;
-  title?: TextStyle;
-  grid?: ViewStyle;
-  option?: ViewStyle;
-  optionIcon?: ViewStyle;
-  optionLabel?: TextStyle;
-};
-
-export interface ActionSheetOption {
-  key: string;
-  label: string;
-  icon?: React.ReactNode;
-}
-
-export const createDefaultStyles = (t: Tokens): ActionSheetSemanticStyles => ({
-  overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.3)',
-  },
-  panel: {
-    backgroundColor: t.colorBgElevated,
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 12,
-    paddingTop: 20,
-    paddingBottom: 24,
-    paddingHorizontal: t.spaceMd,
-  },
-  title: {
-    fontSize: t.fontSizeMd,
-    color: t.colorText,
-    textAlign: 'center',
-    paddingBottom: t.spaceMd,
-  },
-  grid: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  option: {
-    alignItems: 'center',
-  },
-  optionIcon: {
-    width: 56,
-    height: 56,
-    borderRadius: 12,
-    backgroundColor: t.colorBgPage,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: t.spaceSm,
-  },
-  optionLabel: {
-    fontSize: 12,
-    color: t.colorTextSecondary,
-  },
-});

package/src/avatar/index.tsx

@@ -1,63 +0,0 @@
-/**
- * Avatar 原子组件
- *
- * 圆形图像/图标容器，支持图片、图标、占位三种模式。
- */
-
-import React, { useMemo } from 'react';
-import { View, Image } from 'react-native';
-import type { ViewStyle, ImageSourcePropType } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { AvatarSemanticStyles } from './style';
-import { createDefaultStyles } from './style';
-
-export interface AvatarProps {
-  size?: number;
-  source?: ImageSourcePropType;
-  icon?: React.ReactNode;
-  style?: ViewStyle;
-  styles?: Partial<AvatarSemanticStyles>;
-  testID?: string;
-}
-
-const Avatar: React.FC<AvatarProps> = ({
-  size = 40,
-  source,
-  icon,
-  style,
-  styles: semanticStyles,
-  testID,
-}) => {
-  const tokens = useTokens();
-  const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
-
-  const s = useMemo(
-    () => mergeStyles<AvatarSemanticStyles>(defaultStyles, semanticStyles),
-    [defaultStyles, semanticStyles]
-  );
-
-  const sizeStyle: ViewStyle = {
-    width: size,
-    height: size,
-    borderRadius: size / 2,
-  };
-
-  return (
-    <View style={[s.root, sizeStyle, style]} testID={testID}>
-      {source ? (
-        <Image
-          source={source}
-          style={[
-            s.image,
-            { width: size, height: size, borderRadius: size / 2 },
-          ]}
-        />
-      ) : icon ? (
-        icon
-      ) : null}
-    </View>
-  );
-};
-
-export default Avatar;

package/src/avatar/style/index.tsx

@@ -1,21 +0,0 @@
-import type { ViewStyle, ImageStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type AvatarSemanticStyles = {
-  root?: ViewStyle;
-  image?: ImageStyle;
-};
-
-export const createDefaultStyles = (t: Tokens): AvatarSemanticStyles => ({
-  root: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: t.colorBgElevated,
-    overflow: 'hidden',
-    ...t.shadowSm,
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
-});

package/src/button/index.tsx

@@ -1,92 +0,0 @@
-/**
- * 按钮组件
- *
- * type + size + semantic styles。
- */
-
-import React, { useMemo } from 'react';
-import { Pressable, Text, View, ActivityIndicator } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { ButtonSemanticStyles } from './style';
-import {
-  DEFAULT_STYLES,
-  SIZE_STYLES,
-  createTypeStyles,
-  DISABLED_STYLES,
-  BLOCK_STYLES,
-  PRESSED_STYLE,
-  loadingStyle,
-} from './style';
-
-export interface ButtonProps {
-  type?: 'primary' | 'outline' | 'ghost' | 'danger';
-  size?: 'default' | 'small';
-  icon?: React.ReactNode;
-  disabled?: boolean;
-  block?: boolean;
-  loading?: boolean;
-  onPress: () => void;
-  style?: ViewStyle;
-  styles?: Partial<ButtonSemanticStyles>;
-  testID?: string;
-  children: React.ReactNode;
-}
-
-const Button: React.FC<ButtonProps> = ({
-  type = 'primary',
-  size = 'default',
-  icon,
-  disabled,
-  block,
-  loading,
-  onPress,
-  style,
-  styles: semanticStyles,
-  testID,
-  children,
-}: ButtonProps) => {
-  const tokens = useTokens();
-  const typeStyles = useMemo(() => createTypeStyles(tokens), [tokens]);
-
-  const s = useMemo(
-    () =>
-      mergeStyles<ButtonSemanticStyles>(
-        DEFAULT_STYLES,
-        SIZE_STYLES[size],
-        typeStyles[type],
-        disabled ? DISABLED_STYLES : undefined,
-        block ? BLOCK_STYLES : undefined,
-        semanticStyles
-      ),
-    [type, size, disabled, block, semanticStyles, typeStyles]
-  );
-
-  return (
-    <Pressable
-      style={({ pressed }) => [s.root, pressed && PRESSED_STYLE, style]}
-      onPress={onPress}
-      disabled={disabled || loading}
-      accessibilityRole="button"
-      accessibilityState={{ disabled: !!disabled || !!loading }}
-      testID={testID}
-    >
-      {icon && <View style={s.icon}>{icon}</View>}
-      {loading && (
-        <ActivityIndicator
-          color={(s.content?.color as string) ?? tokens.colorTextSecondary}
-          size="small"
-          style={loadingStyle}
-        />
-      )}
-      {typeof children === 'string' ? (
-        <Text style={s.content}>{children}</Text>
-      ) : (
-        children
-      )}
-    </Pressable>
-  );
-};
-
-export default Button;

package/src/button/style/index.tsx

@@ -1,75 +0,0 @@
-import { StyleSheet } from 'react-native';
-import type { ViewStyle, TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type ButtonSemanticStyles = {
-  root?: ViewStyle;
-  icon?: ViewStyle;
-  content?: TextStyle;
-};
-
-export const DEFAULT_STYLES: ButtonSemanticStyles = {
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    marginRight: 6,
-  },
-  content: {
-    fontSize: 14,
-  },
-};
-
-export const SIZE_STYLES: Record<
-  'default' | 'small',
-  Partial<ButtonSemanticStyles>
-> = {
-  default: {
-    root: { paddingVertical: 10, borderRadius: 8 },
-    content: { fontSize: 14 },
-  },
-  small: {
-    root: { paddingVertical: 6, borderRadius: 6 },
-    content: { fontSize: 12 },
-  },
-};
-
-export const createTypeStyles = (
-  t: Tokens
-): Record<
-  'primary' | 'outline' | 'ghost' | 'danger',
-  Partial<ButtonSemanticStyles>
-> => ({
-  primary: {
-    root: { backgroundColor: t.colorPrimary },
-    content: { color: '#FFF', fontWeight: '600' },
-  },
-  outline: {
-    root: { borderWidth: 1, borderColor: t.colorBorder },
-    content: { color: t.colorTextSecondary },
-  },
-  ghost: {
-    root: { borderWidth: 1, borderColor: t.colorPrimary },
-    content: { color: t.colorPrimary },
-  },
-  danger: {
-    root: { backgroundColor: t.colorError },
-    content: { color: '#FFF', fontWeight: '600' },
-  },
-});
-
-export const DISABLED_STYLES: Partial<ButtonSemanticStyles> = {
-  root: { opacity: 0.5 },
-};
-
-export const BLOCK_STYLES: Partial<ButtonSemanticStyles> = {
-  root: { flex: 1 },
-};
-
-export const PRESSED_STYLE: ViewStyle = { opacity: 0.7 };
-
-export const loadingStyle = StyleSheet.create({
-  s: { marginRight: 6 },
-}).s;

package/src/center/index.tsx

@@ -1,18 +0,0 @@
-/**
- * 居中布局容器
- *
- * justifyContent + alignItems 均为 'center'。
- */
-
-import React from 'react';
-import { View } from 'react-native';
-import type { ViewProps } from 'react-native';
-import { baseStyle } from './style';
-
-export type CenterProps = ViewProps;
-
-const Center: React.FC<CenterProps> = ({ style, ...rest }) => (
-  <View style={[baseStyle, style]} {...rest} />
-);
-
-export default Center;

package/src/center/style/index.tsx

@@ -1,8 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const baseStyle = StyleSheet.create({
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-}).center;