@unif/react-native-ui 0.3.6 → 1.0.0

package/src/chip/index.tsx

@@ -1,99 +0,0 @@
-/**
- * Chip 基础组件
- *
- * 胶囊标签，支持选中态、禁用态和图标。
- */
-
-import React, { useMemo } from 'react';
-import { View, Text, Pressable } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { ChipSemanticStyles } from './style';
-import {
-  createDefaultStyles,
-  createSelectedStyles,
-  DISABLED_STYLES,
-  createSmallStyles,
-} from './style';
-
-export interface ChipProps {
-  children: React.ReactNode;
-  onPress?: () => void;
-  selected?: boolean;
-  disabled?: boolean;
-  size?: 'default' | 'small';
-  icon?: React.ReactNode;
-  style?: ViewStyle;
-  styles?: Partial<ChipSemanticStyles>;
-  testID?: string;
-}
-
-const PRESSED_STYLE: ViewStyle = { opacity: 0.7 };
-
-const Chip: React.FC<ChipProps> = ({
-  children,
-  onPress,
-  selected,
-  disabled,
-  size = 'default',
-  icon,
-  style,
-  styles: semanticStyles,
-  testID,
-}) => {
-  const tokens = useTokens();
-  const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
-  const selectedStyles = useMemo(() => createSelectedStyles(tokens), [tokens]);
-  const smallStyles = useMemo(() => createSmallStyles(tokens), [tokens]);
-
-  const s = useMemo(
-    () =>
-      mergeStyles<ChipSemanticStyles>(
-        defaultStyles,
-        size === 'small' ? smallStyles : undefined,
-        selected ? selectedStyles : undefined,
-        disabled ? DISABLED_STYLES : undefined,
-        semanticStyles
-      ),
-    [
-      size,
-      selected,
-      disabled,
-      semanticStyles,
-      defaultStyles,
-      selectedStyles,
-      smallStyles,
-    ]
-  );
-
-  const content = (
-    <View style={[s.root, style]}>
-      {icon && <View style={s.iconWrapper}>{icon}</View>}
-      {typeof children === 'string' ? (
-        <Text style={s.content} numberOfLines={1}>
-          {children}
-        </Text>
-      ) : (
-        children
-      )}
-    </View>
-  );
-
-  if (onPress) {
-    return (
-      <Pressable
-        onPress={onPress}
-        disabled={disabled}
-        style={({ pressed }) => pressed && PRESSED_STYLE}
-        testID={testID}
-      >
-        {content}
-      </Pressable>
-    );
-  }
-
-  return content;
-};
-
-export default Chip;

package/src/chip/style/index.tsx

@@ -1,55 +0,0 @@
-import type { ViewStyle, TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type ChipSemanticStyles = {
-  root?: ViewStyle;
-  iconWrapper?: ViewStyle;
-  content?: TextStyle;
-};
-
-export const createDefaultStyles = (t: Tokens): ChipSemanticStyles => ({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#F0F0F5',
-    borderRadius: t.radiusFull,
-    paddingHorizontal: 14,
-    paddingVertical: 7,
-  },
-  iconWrapper: {
-    marginRight: 4,
-  },
-  content: {
-    fontSize: t.fontSizeSm,
-    color: t.colorText,
-  },
-});
-
-export const createSelectedStyles = (
-  t: Tokens
-): Partial<ChipSemanticStyles> => ({
-  root: {
-    borderWidth: 1,
-    borderColor: t.colorPrimary,
-    backgroundColor: '#FFF5EB',
-  },
-  content: {
-    color: t.colorPrimary,
-  },
-});
-
-export const DISABLED_STYLES: Partial<ChipSemanticStyles> = {
-  root: {
-    opacity: 0.5,
-  },
-};
-
-export const createSmallStyles = (t: Tokens): Partial<ChipSemanticStyles> => ({
-  root: {
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-  },
-  content: {
-    fontSize: t.fontSizeXs,
-  },
-});

package/src/column/index.tsx

@@ -1,43 +0,0 @@
-/**
- * 垂直布局容器
- *
- * 语义化的 View，显式 flexDirection: 'column'。
- */
-
-import React from 'react';
-import { View } from 'react-native';
-import type { ViewProps, ViewStyle } from 'react-native';
-import { baseStyle } from './style';
-
-type AlignItems = ViewStyle['alignItems'];
-type JustifyContent = ViewStyle['justifyContent'];
-
-export interface ColumnProps extends ViewProps {
-  /** alignItems */
-  align?: AlignItems;
-  /** justifyContent */
-  justify?: JustifyContent;
-  /** 子元素间距 */
-  gap?: number;
-}
-
-const Column: React.FC<ColumnProps> = ({
-  align,
-  justify,
-  gap,
-  style,
-  ...rest
-}: ColumnProps) => (
-  <View
-    style={[
-      baseStyle,
-      align != null && { alignItems: align },
-      justify != null && { justifyContent: justify },
-      gap != null && { gap },
-      style,
-    ]}
-    {...rest}
-  />
-);
-
-export default Column;

package/src/column/style/index.tsx

@@ -1,7 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const baseStyle = StyleSheet.create({
-  column: {
-    flexDirection: 'column',
-  },
-}).column;

package/src/divider/index.tsx

@@ -1,37 +0,0 @@
-/**
- * 分割线组件
- */
-
-import React, { useMemo } from 'react';
-import { View } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { useTokens } from '../theme/context';
-import { createHairlineStyle, createStandardStyle } from './style';
-
-interface DividerProps {
-  hairline?: boolean;
-  marginHorizontal?: number;
-  style?: ViewStyle;
-}
-
-const Divider: React.FC<DividerProps> = ({
-  hairline = true,
-  marginHorizontal,
-  style,
-}: DividerProps) => {
-  const tokens = useTokens();
-  const hairlineStyle = useMemo(() => createHairlineStyle(tokens), [tokens]);
-  const standardStyle = useMemo(() => createStandardStyle(tokens), [tokens]);
-
-  return (
-    <View
-      style={[
-        hairline ? hairlineStyle : standardStyle,
-        marginHorizontal != null && { marginHorizontal },
-        style,
-      ]}
-    />
-  );
-};
-
-export default Divider;

package/src/divider/style/index.tsx

@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export const createHairlineStyle = (t: Tokens) =>
-  StyleSheet.create({
-    line: {
-      height: StyleSheet.hairlineWidth,
-      backgroundColor: t.colorBorder,
-    },
-  }).line;
-
-export const createStandardStyle = (t: Tokens) =>
-  StyleSheet.create({
-    line: { height: 1, backgroundColor: t.colorBorder },
-  }).line;

package/src/hooks/index.ts

@@ -1 +0,0 @@
-export { mergeStyles } from './useMergeStyles';

package/src/hooks/useMergeStyles.ts

@@ -1,27 +0,0 @@
-/**
- * 语义样式合并
- *
- * 纯函数版本，调用方通过 useMemo 控制缓存策略。
- */
-
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-
-type StyleValue = ViewStyle | TextStyle | ImageStyle;
-
-/**
- * 按 slot 维度合并多来源样式。
- */
-export function mergeStyles<T extends Record<string, StyleValue | undefined>>(
-  ...sources: (Partial<T> | undefined)[]
-): T {
-  const merged = {} as Record<string, StyleValue>;
-  for (const source of sources) {
-    if (!source) {
-      continue;
-    }
-    for (const key of Object.keys(source)) {
-      merged[key] = { ...(merged[key] as object), ...(source[key] as object) };
-    }
-  }
-  return merged as T;
-}

package/src/input/index.tsx

@@ -1,105 +0,0 @@
-/**
- * Input 基础组件
- *
- * TextInput 容器，支持多行、工具栏插槽、自动聚焦。
- */
-
-import React, { useRef, useEffect, useMemo, forwardRef } from 'react';
-import { View, TextInput } from 'react-native';
-import type { ViewStyle, ReturnKeyTypeOptions } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { InputSemanticStyles } from './style';
-import { createDefaultStyles } from './style';
-
-export interface InputProps {
-  value?: string;
-  onChangeText?: (text: string) => void;
-  placeholder?: string;
-  multiline?: boolean;
-  maxLength?: number;
-  maxHeight?: number;
-  autoFocus?: boolean;
-  returnKeyType?: ReturnKeyTypeOptions;
-  onSubmitEditing?: () => void;
-  onBlur?: () => void;
-  onFocus?: () => void;
-  blurOnSubmit?: boolean;
-  disabled?: boolean;
-  toolbar?: React.ReactNode;
-  style?: ViewStyle;
-  styles?: Partial<InputSemanticStyles>;
-  testID?: string;
-}
-
-type InputRef = React.ElementRef<typeof TextInput>;
-
-const Input = forwardRef<InputRef, InputProps>(
-  (
-    {
-      value,
-      onChangeText,
-      placeholder,
-      multiline = false,
-      maxLength,
-      maxHeight,
-      autoFocus,
-      returnKeyType,
-      onSubmitEditing,
-      onBlur,
-      onFocus,
-      blurOnSubmit,
-      disabled,
-      toolbar,
-      style,
-      styles: semanticStyles,
-      testID,
-    },
-    ref
-  ) => {
-    const inputRef = useRef<InputRef>(null);
-    const tokens = useTokens();
-    const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
-
-    React.useImperativeHandle(ref, () => inputRef.current as InputRef);
-
-    const s = useMemo(
-      () => mergeStyles<InputSemanticStyles>(defaultStyles, semanticStyles),
-      [defaultStyles, semanticStyles]
-    );
-
-    useEffect(() => {
-      if (autoFocus) {
-        inputRef.current?.focus();
-      }
-    }, [autoFocus]);
-
-    return (
-      <View style={[s.root, style]}>
-        <TextInput
-          ref={inputRef}
-          testID={testID}
-          style={[s.input, maxHeight ? { maxHeight } : undefined]}
-          value={value}
-          onChangeText={onChangeText}
-          placeholder={placeholder}
-          placeholderTextColor={tokens.colorTextPlaceholder}
-          accessibilityLabel={placeholder}
-          multiline={multiline}
-          maxLength={maxLength}
-          returnKeyType={returnKeyType}
-          onSubmitEditing={onSubmitEditing}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          editable={!disabled}
-          blurOnSubmit={blurOnSubmit ?? !multiline}
-        />
-        {toolbar && <View style={s.toolbar}>{toolbar}</View>}
-      </View>
-    );
-  }
-);
-
-Input.displayName = 'Input';
-
-export default Input;

package/src/input/style/index.tsx

@@ -1,32 +0,0 @@
-import { Platform } from 'react-native';
-import type { ViewStyle, TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type InputSemanticStyles = {
-  root?: ViewStyle;
-  input?: TextStyle;
-  toolbar?: ViewStyle;
-};
-
-export const createDefaultStyles = (t: Tokens): InputSemanticStyles => ({
-  root: {
-    backgroundColor: t.colorBgElevated,
-    borderRadius: t.radiusXl,
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    paddingBottom: 6,
-    ...t.shadow,
-  },
-  input: {
-    fontSize: t.fontSize,
-    color: t.colorText,
-    lineHeight: t.lineHeight,
-    paddingVertical: Platform.OS === 'ios' ? 4 : 2,
-    paddingHorizontal: 4,
-  },
-  toolbar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingTop: 4,
-  },
-});

package/src/list-item/index.tsx

@@ -1,95 +0,0 @@
-/**
- * 列表行组件
- *
- * 语义 slot：root / content / description / extra。
- */
-
-import React, { useMemo } from 'react';
-import { View, Text, Pressable } from 'react-native';
-import type { ViewStyle, TextStyle } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { ListItemSemanticStyles } from './style';
-import { createDefaultStyles, lineStyle, contentWrapStyle } from './style';
-
-interface ListItemProps {
-  thumb?: React.ReactNode;
-  title: string | React.ReactNode;
-  description?: string;
-  extra?: React.ReactNode | string;
-  arrow?: boolean;
-  arrowIcon?: React.ReactNode;
-  onPress?: () => void;
-  onLongPress?: () => void;
-  disabled?: boolean;
-  style?: ViewStyle;
-  styles?: Partial<ListItemSemanticStyles>;
-  testID?: string;
-}
-
-const ListItem: React.FC<ListItemProps> = ({
-  thumb,
-  title,
-  description,
-  extra,
-  arrow,
-  arrowIcon,
-  style,
-  styles: semanticStyles,
-  ...props
-}: ListItemProps) => {
-  const tokens = useTokens();
-  const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
-  const defaultArrowStyle = useMemo(
-    () => ({ fontSize: 18, color: tokens.colorTextSecondary }),
-    [tokens]
-  );
-
-  const s = useMemo(
-    () => mergeStyles(defaultStyles, semanticStyles),
-    [defaultStyles, semanticStyles]
-  );
-
-  const content = (
-    <View style={[s.root, style]}>
-      {thumb}
-      <View style={lineStyle}>
-        <View style={contentWrapStyle}>
-          {typeof title === 'string' ? (
-            <Text style={s.content}>{title}</Text>
-          ) : (
-            title
-          )}
-          {description != null && (
-            <Text style={s.description} numberOfLines={1}>
-              {description}
-            </Text>
-          )}
-        </View>
-        {extra != null &&
-          (typeof extra === 'string' ? (
-            <Text style={s.extra as TextStyle}>{extra}</Text>
-          ) : (
-            <View style={s.extra as ViewStyle}>{extra}</View>
-          ))}
-        {arrow && (arrowIcon ?? <Text style={defaultArrowStyle}>›</Text>)}
-      </View>
-    </View>
-  );
-
-  if (props.onPress) {
-    return (
-      <Pressable
-        onPress={props.onPress}
-        onLongPress={props.onLongPress}
-        disabled={props.disabled}
-        testID={props.testID}
-      >
-        {content}
-      </Pressable>
-    );
-  }
-  return content;
-};
-
-export default ListItem;

package/src/list-item/style/index.tsx

@@ -1,41 +0,0 @@
-import { StyleSheet } from 'react-native';
-import type { ViewStyle, TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type ListItemSemanticStyles = {
-  root?: ViewStyle;
-  content?: TextStyle;
-  description?: TextStyle;
-  extra?: ViewStyle & TextStyle;
-};
-
-export const createDefaultStyles = (t: Tokens): ListItemSemanticStyles => ({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-  },
-  content: {
-    fontSize: 15,
-    color: t.colorText,
-    flex: 1,
-  },
-  description: {
-    fontSize: 12,
-    color: t.colorTextSecondary,
-    marginTop: 2,
-  },
-  extra: {
-    color: t.colorTextSecondary,
-    fontSize: 14,
-  },
-});
-
-export const lineStyle = StyleSheet.create({
-  s: { flex: 1, flexDirection: 'row', alignItems: 'center' },
-}).s;
-
-export const contentWrapStyle = StyleSheet.create({
-  s: { flex: 1 },
-}).s;

package/src/menu/index.tsx

@@ -1,97 +0,0 @@
-/**
- * Menu 独立组件
- *
- * 基于 Popover 实现的菜单列表，支持 danger、icon、disabled。
- */
-
-import React, { useMemo } from 'react';
-import { View, Text, Pressable } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import Popover from '../popover';
-import { useTokens } from '../theme/context';
-import type { MenuSemanticStyles } from './style';
-import { createDefaultStyles } from './style';
-
-export type { MenuSemanticStyles } from './style';
-
-export type Action = {
-  key: string;
-  text: string;
-  icon?: React.ReactNode;
-  disabled?: boolean;
-  danger?: boolean;
-};
-
-export interface MenuProps {
-  visible: boolean;
-  onClose: () => void;
-  anchorLayout: { x: number; y: number; width: number; height: number };
-  actions: Action[];
-  onAction?: (item: Action) => void;
-  placement?: 'bottom' | 'top';
-  width?: number;
-  style?: ViewStyle;
-  styles?: Partial<MenuSemanticStyles>;
-  testID?: string;
-}
-
-const Menu: React.FC<MenuProps> = ({
-  visible,
-  onClose,
-  anchorLayout,
-  actions,
-  onAction,
-  placement = 'bottom',
-  width = 160,
-  style,
-  styles: semanticStyles,
-  testID,
-}) => {
-  const tokens = useTokens();
-  const ds = useMemo(() => createDefaultStyles(tokens), [tokens]);
-
-  return (
-    <Popover
-      visible={visible}
-      onClose={onClose}
-      anchorLayout={anchorLayout}
-      placement={placement}
-      width={width}
-      style={style}
-      testID={testID}
-    >
-      {actions.map((action) => (
-        <React.Fragment key={action.key}>
-          <Pressable
-            style={[ds.item, semanticStyles?.item]}
-            onPress={() => {
-              if (!action.disabled) {
-                onAction?.(action);
-                onClose();
-              }
-            }}
-            disabled={action.disabled}
-            accessibilityRole="button"
-            testID={testID ? `${testID}-${action.key}` : undefined}
-          >
-            {action.icon && (
-              <View style={[ds.itemIcon, semanticStyles?.itemIcon]}>
-                {action.icon}
-              </View>
-            )}
-            <Text
-              style={[
-                action.danger ? ds.itemLabelDanger : ds.itemLabel,
-                semanticStyles?.itemLabel,
-              ]}
-            >
-              {action.text}
-            </Text>
-          </Pressable>
-        </React.Fragment>
-      ))}
-    </Popover>
-  );
-};
-
-export default Menu;

package/src/menu/style/index.tsx

@@ -1,34 +0,0 @@
-import { StyleSheet } from 'react-native';
-import type { ViewStyle, TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type MenuSemanticStyles = {
-  item?: ViewStyle;
-  itemLabel?: TextStyle;
-  itemIcon?: ViewStyle;
-  divider?: ViewStyle;
-};
-
-export const createDefaultStyles = (t: Tokens) => ({
-  item: {
-    flexDirection: 'row' as const,
-    alignItems: 'center' as const,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-  },
-  itemLabel: {
-    fontSize: 14,
-    color: t.colorText,
-  },
-  itemLabelDanger: {
-    fontSize: 14,
-    color: t.colorError,
-  },
-  itemIcon: {
-    marginRight: 8,
-  },
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: t.colorBorder,
-  },
-});