@unif/react-native-ui 0.2.31 → 0.3.5

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

@@ -0,0 +1,25 @@
+/**
+ * Tag 标签组件
+ *
+ * 信息展示标签，支持三种变体：
+ * - filled（默认）：浅色底 + 深色字
+ * - solid：纯色底 + 白字
+ * - outlined：边框 + 深色字
+ *
+ * color 支持预设语义色（success/processing/warning/error/default）或自定义 hex。
+ */
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+import type { TagSemanticStyles } from './style';
+export interface TagProps {
+    children: React.ReactNode;
+    variant?: 'filled' | 'solid' | 'outlined';
+    color?: string;
+    size?: 'default' | 'small';
+    style?: ViewStyle;
+    styles?: Partial<TagSemanticStyles>;
+    testID?: string;
+}
+declare const Tag: React.FC<TagProps>;
+export default Tag;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tag/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAUjD,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAuC3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

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

@@ -0,0 +1,17 @@
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { Tokens } from '../../theme/tokens';
+export type TagSemanticStyles = {
+    root?: ViewStyle;
+    content?: TextStyle;
+};
+/** 解析颜色：支持预设名或自定义 hex */
+export declare function resolveColor(color: string | undefined): string;
+export declare const createDefaultStyles: (t: Tokens) => TagSemanticStyles;
+export declare const createSmallStyles: () => Partial<TagSemanticStyles>;
+/** filled: 浅色底 + 深色字（默认） */
+export declare const createFilledStyles: (color: string) => Partial<TagSemanticStyles>;
+/** solid: 纯色底 + 白字 */
+export declare const createSolidStyles: (color: string) => Partial<TagSemanticStyles>;
+/** outlined: 边框 + 深色字 + 透明底 */
+export declare const createOutlinedStyles: (color: string) => Partial<TagSemanticStyles>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/tag/style/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAaF,yBAAyB;AACzB,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAI9D;AAcD,eAAO,MAAM,mBAAmB,GAAI,GAAG,MAAM,KAAG,iBAY9C,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAAO,OAAO,CAAC,iBAAiB,CAQ5D,CAAC;AAEH,4BAA4B;AAC5B,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,KACZ,OAAO,CAAC,iBAAiB,CAO1B,CAAC;AAEH,sBAAsB;AACtB,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,KACZ,OAAO,CAAC,iBAAiB,CAO1B,CAAC;AAEH,+BAA+B;AAC/B,eAAO,MAAM,oBAAoB,GAC/B,OAAO,MAAM,KACZ,OAAO,CAAC,iBAAiB,CAS1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-ui",
-  "version": "0.2.31",
+  "version": "0.3.5",
   "description": "UNIF React Native UI Components",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",

package/src/action-sheet/index.tsx

@@ -12,7 +12,7 @@ import {
   TouchableWithoutFeedback,
   Modal,
 } from 'react-native';
-import type { ViewStyle } 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';
@@ -33,6 +33,7 @@ export interface ActionSheetProps {
 const ActionSheet: React.FC<ActionSheetProps> = ({
   visible,
   onClose,
+  title,
   options,
   onSelect,
   columns = 3,
@@ -64,13 +65,14 @@ const ActionSheet: React.FC<ActionSheetProps> = ({
       </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: `${Math.floor(100 / columns)}%` as any },
+                { width: `${Math.floor(100 / columns)}%` as DimensionValue },
               ]}
               onPress={() => onSelect(item.key)}
               activeOpacity={0.7}

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

@@ -4,6 +4,7 @@ import type { Tokens } from '../../theme/tokens';
 export type ActionSheetSemanticStyles = {
   overlay?: ViewStyle;
   panel?: ViewStyle;
+  title?: TextStyle;
   grid?: ViewStyle;
   option?: ViewStyle;
   optionIcon?: ViewStyle;
@@ -29,6 +30,12 @@ export const createDefaultStyles = (t: Tokens): ActionSheetSemanticStyles => ({
     paddingBottom: 24,
     paddingHorizontal: t.spaceMd,
   },
+  title: {
+    fontSize: t.fontSizeMd,
+    color: t.colorText,
+    textAlign: 'center',
+    paddingBottom: t.spaceMd,
+  },
   grid: {
     flexDirection: 'row',
     justifyContent: 'space-around',

package/src/avatar/style/index.tsx

@@ -15,7 +15,7 @@ export const createDefaultStyles = (t: Tokens): AvatarSemanticStyles => ({
     ...t.shadowSm,
   },
   image: {
-    width: '100%' as any,
-    height: '100%' as any,
+    width: '100%',
+    height: '100%',
   },
 });

package/src/button/index.tsx

@@ -68,6 +68,8 @@ const Button: React.FC<ButtonProps> = ({
       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>}
@@ -81,7 +83,7 @@ const Button: React.FC<ButtonProps> = ({
       {typeof children === 'string' ? (
         <Text style={s.content}>{children}</Text>
       ) : (
-        <View style={s.content as ViewStyle}>{children}</View>
+        children
       )}
     </Pressable>
   );

package/src/button/style/index.tsx

@@ -22,7 +22,10 @@ export const DEFAULT_STYLES: ButtonSemanticStyles = {
   },
 };
 
-export const SIZE_STYLES: Record<string, Partial<ButtonSemanticStyles>> = {
+export const SIZE_STYLES: Record<
+  'default' | 'small',
+  Partial<ButtonSemanticStyles>
+> = {
   default: {
     root: { paddingVertical: 10, borderRadius: 8 },
     content: { fontSize: 14 },
@@ -35,7 +38,10 @@ export const SIZE_STYLES: Record<string, Partial<ButtonSemanticStyles>> = {
 
 export const createTypeStyles = (
   t: Tokens
-): Record<string, Partial<ButtonSemanticStyles>> => ({
+): Record<
+  'primary' | 'outline' | 'ghost' | 'danger',
+  Partial<ButtonSemanticStyles>
+> => ({
   primary: {
     root: { backgroundColor: t.colorPrimary },
     content: { color: '#FFF', fontWeight: '600' },

package/src/index.tsx

@@ -42,6 +42,9 @@ export type { InputSemanticStyles } from './input/style';
 export { default as Chip } from './chip';
 export type { ChipProps } from './chip';
 export type { ChipSemanticStyles } from './chip/style';
+export { default as Tag } from './tag';
+export type { TagProps } from './tag';
+export type { TagSemanticStyles } from './tag/style';
 export { default as ActionSheet } from './action-sheet';
 export type { ActionSheetProps } from './action-sheet';
 export type {

package/src/input/index.tsx

@@ -82,6 +82,7 @@ const Input = forwardRef<InputRef, InputProps>(
           onChangeText={onChangeText}
           placeholder={placeholder}
           placeholderTextColor={tokens.colorTextPlaceholder}
+          accessibilityLabel={placeholder}
           multiline={multiline}
           maxLength={maxLength}
           returnKeyType={returnKeyType}

package/src/menu/index.tsx

@@ -71,6 +71,7 @@ const Menu: React.FC<MenuProps> = ({
               }
             }}
             disabled={action.disabled}
+            accessibilityRole="button"
             testID={testID ? `${testID}-${action.key}` : undefined}
           >
             {action.icon && (

package/src/popover/index.tsx

@@ -4,9 +4,9 @@
  * 锚定定位下拉容器，仅做定位，内容由 children 传入。
  */
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { View, TouchableWithoutFeedback, Modal } from 'react-native';
-import type { ViewStyle } from 'react-native';
+import type { LayoutChangeEvent, ViewStyle } from 'react-native';
 import { mergeStyles } from '../hooks';
 import { useTokens } from '../theme/context';
 import type { PopoverSemanticStyles } from './style';
@@ -39,23 +39,33 @@ const Popover: React.FC<PopoverProps> = ({
 }) => {
   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,
         }
-      : { bottom: anchorLayout.y - GAP, left: anchorLayout.x };
+      : {
+          top: anchorLayout.y - contentHeight - GAP,
+          left: anchorLayout.x,
+        };
 
   return (
     <Modal
@@ -68,7 +78,14 @@ const Popover: React.FC<PopoverProps> = ({
         <View style={s.overlay}>
           <TouchableWithoutFeedback>
             <View
-              style={[s.content, positionStyle, { width }, style]}
+              onLayout={handleLayout}
+              style={[
+                s.content,
+                positionStyle,
+                { width },
+                needsHeight && { opacity: 0 },
+                style,
+              ]}
               testID={testID}
             >
               {children}

package/src/tag/index.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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

@@ -0,0 +1,99 @@
+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;
+
+/** 解析颜色：支持预设名或自定义 hex */
+export function resolveColor(color: string | undefined): string {
+  if (!color) return PRESET_COLORS.default;
+  if (color in PRESET_COLORS) return PRESET_COLORS[color as PresetName];
+  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,
+  },
+});