@unif/react-native-design 0.33.1 → 0.35.0

package/src/components/ui/ImagePreview/types.ts

@@ -0,0 +1,37 @@
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+
+export interface ImagePreviewItem {
+  id: string;
+  source?: ImageSourcePropType;
+  label?: string;
+  canDelete?: boolean;
+  deleting?: boolean;
+}
+
+export interface ImagePreviewProps {
+  items: readonly ImagePreviewItem[];
+  width: number;
+  height: number;
+  initialId?: string;
+  onCurrentChange?(item: Readonly<ImagePreviewItem>): void;
+  onRequestDelete?(item: Readonly<ImagePreviewItem>): void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface ImagePreviewHandle {
+  scrollTo(id: string, animated?: boolean): void;
+  getCurrent(): Readonly<ImagePreviewItem> | undefined;
+}
+
+export interface ImagePreviewSelection {
+  items: readonly ImagePreviewItem[];
+  index: number;
+  initialized: boolean;
+  carouselRevision: number;
+}
+
+export interface ImagePreviewScrollRequest {
+  id: string;
+  animated: boolean;
+}

package/src/components/ui/Sheet/Sheet.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { useThemedStyles } from '../../../theme';
+import { makeStyles } from './styles';
+import type { SheetProps } from './types';
+
+export function Sheet({
+  children,
+  header,
+  footer,
+  contentMode = 'fixed',
+  contentContainerStyle,
+  style,
+  testID,
+}: SheetProps): React.JSX.Element {
+  const styles = useThemedStyles(makeStyles);
+
+  return (
+    <View style={[styles.root, style]} testID={testID}>
+      {header ?? (
+        <View style={styles.grabberContainer}>
+          <View style={styles.grabber} />
+        </View>
+      )}
+      {contentMode === 'scroll' ? (
+        <ScrollView
+          style={styles.contentRegion}
+          contentContainerStyle={[styles.content, contentContainerStyle]}
+          keyboardShouldPersistTaps="handled"
+        >
+          {children}
+        </ScrollView>
+      ) : (
+        <View
+          style={[styles.contentRegion, styles.content, contentContainerStyle]}
+        >
+          {children}
+        </View>
+      )}
+      {footer ? <View style={styles.footer}>{footer}</View> : null}
+    </View>
+  );
+}

package/src/components/ui/Sheet/index.ts

@@ -0,0 +1,2 @@
+export { Sheet } from './Sheet';
+export type { SheetContentMode, SheetProps } from './types';

package/src/components/ui/Sheet/styles.ts

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { space, type ColorTokens } from '../../../theme';
+
+export const makeStyles = (colors: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      flex: 1,
+      minHeight: 0,
+      backgroundColor: colors.surface,
+    },
+    grabberContainer: {
+      alignItems: 'center',
+      paddingTop: space['3'],
+      paddingBottom: space['2'],
+    },
+    grabber: {
+      width: 36,
+      height: 5,
+      borderRadius: 3,
+      backgroundColor: colors.foregroundMuted,
+    },
+    contentRegion: {
+      flex: 1,
+      minHeight: 0,
+    },
+    content: {
+      paddingHorizontal: space['9'],
+      paddingTop: space['4'],
+      paddingBottom: space['9'],
+      gap: space['5'],
+    },
+    footer: {
+      backgroundColor: colors.surface,
+      paddingHorizontal: space['9'],
+      paddingTop: space['5'],
+      paddingBottom: space['6'],
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderTopColor: colors.outline,
+    },
+  });

package/src/components/ui/Sheet/types.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type SheetContentMode = 'fixed' | 'scroll' | 'external-scroll';
+
+export interface SheetProps {
+  children: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  contentMode?: SheetContentMode;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/components/ui/SmsField/SmsField.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useColors } from '../../../theme';
+import { Input } from '../Input';
+import type { SmsFieldProps } from './types';
+
+export function SmsField({
+  value,
+  onChangeText,
+  remainingSeconds,
+  sendDisabled,
+  onSend,
+  sendLabel,
+  sendAccessibilityLabel,
+  ...inputProps
+}: SmsFieldProps): React.JSX.Element {
+  const colors = useColors();
+  return (
+    <Input
+      {...inputProps}
+      value={value}
+      onChangeText={onChangeText}
+      keyboardType="number-pad"
+      autoComplete="sms-otp"
+      textContentType="oneTimeCode"
+      leading={{
+        kind: 'icon',
+        icon: 'mail',
+        size: 18,
+        color: colors.iconFaint40,
+      }}
+      trailing={{
+        kind: 'action',
+        label: sendLabel,
+        accessibilityLabel: sendAccessibilityLabel ?? sendLabel,
+        disabled: sendDisabled || remainingSeconds > 0,
+        onPress: onSend,
+      }}
+    />
+  );
+}

package/src/components/ui/SmsField/index.ts

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

package/src/components/ui/SmsField/types.ts

@@ -0,0 +1,15 @@
+import type { InputProps } from '../Input';
+
+/** 长度、提示及发送文案由调用方提供；remainingSeconds 只控制冷却禁用。 */
+export interface SmsFieldProps extends Pick<
+  InputProps,
+  'maxLength' | 'placeholder' | 'editable' | 'accessibilityLabel' | 'testID'
+> {
+  value: string;
+  onChangeText(value: string): void;
+  remainingSeconds: number;
+  sendLabel: string;
+  sendAccessibilityLabel?: string;
+  sendDisabled?: boolean;
+  onSend(): void;
+}

package/src/components/ui/TextEntryContent/TextEntryContent.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { useThemedStyles } from '../../../theme';
+import { Button } from '../Button';
+import { Textarea } from '../Textarea';
+import { makeStyles } from './styles';
+import type { TextEntryContentProps } from './types';
+
+export function TextEntryContent({
+  title,
+  value,
+  onChangeText,
+  onSubmit,
+  onCancel,
+  message,
+  busy = false,
+  maxLength,
+  confirmLabel = '确认',
+  cancelLabel = '取消',
+  autoFocus = true,
+  style,
+  testID,
+}: TextEntryContentProps): React.JSX.Element {
+  const styles = useThemedStyles(makeStyles);
+  return (
+    <View style={[styles.root, style]} testID={testID}>
+      <Text style={styles.title} accessibilityRole="header">
+        {title}
+      </Text>
+      {message ? <Text style={styles.message}>{message}</Text> : null}
+      <Textarea
+        value={value}
+        onChangeText={onChangeText}
+        maxLength={maxLength}
+        editable={!busy}
+        autoFocus={autoFocus}
+        accessibilityLabel={title}
+      />
+      <View style={styles.actions}>
+        <Button
+          label={confirmLabel}
+          size="sm"
+          loading={busy}
+          onPress={() => onSubmit(value)}
+        />
+        <Button
+          label={cancelLabel}
+          size="sm"
+          variant="outline"
+          disabled={busy}
+          onPress={onCancel}
+        />
+      </View>
+    </View>
+  );
+}

package/src/components/ui/TextEntryContent/index.ts

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

package/src/components/ui/TextEntryContent/styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+import { fw, radius, space, type, type ColorTokens } from '../../../theme';
+
+export const makeStyles = (colors: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      gap: space[4],
+      padding: space[5],
+      borderWidth: 1,
+      borderColor: colors.outline,
+      borderRadius: radius.xl,
+      backgroundColor: colors.surface,
+    },
+    title: { color: colors.foreground, fontSize: type.h3, fontWeight: fw.semi },
+    message: { color: colors.foregroundMuted, fontSize: type.sm },
+    actions: { flexDirection: 'row', flexWrap: 'wrap', gap: space[3] },
+  });

package/src/components/ui/TextEntryContent/types.ts

@@ -0,0 +1,18 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** 受控文字编辑内容；弹层、键盘和业务提交结果由宿主负责。 */
+export interface TextEntryContentProps {
+  title: string;
+  value: string;
+  onChangeText(value: string): void;
+  onSubmit(value: string): void;
+  onCancel(): void;
+  message?: string;
+  busy?: boolean;
+  maxLength?: number;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  autoFocus?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/components/ui/index.ts

@@ -7,10 +7,8 @@ export type {
 } from './Avatar';
 export { AvatarGroup } from './AvatarGroup';
 export type { AvatarGroupItem, AvatarGroupProps } from './AvatarGroup';
-export { BlurLayer } from './BlurLayer';
-export type { BlurLayerProps } from './BlurLayer';
-export { BorderBeam } from './BorderBeam';
-export type { BorderBeamProps } from './BorderBeam';
+export { GlassLayer } from './GlassLayer';
+export type { GlassEffect, GlassLayerProps } from './GlassLayer';
 export { Button } from './Button';
 export type { ButtonProps, ButtonSize, ButtonVariant } from './Button';
 export { Card } from './Card';
@@ -109,3 +107,21 @@ export type {
   ToastKind,
   ToastPosition,
 } from './Toast';
+export { ActionMenuContent } from './ActionMenuContent';
+export type {
+  ActionMenuAction,
+  ActionMenuConfirmation,
+  ActionMenuContentProps,
+} from './ActionMenuContent';
+export { ImagePreview } from './ImagePreview';
+export type {
+  ImagePreviewItem,
+  ImagePreviewProps,
+  ImagePreviewHandle,
+} from './ImagePreview';
+export { Sheet } from './Sheet';
+export type { SheetContentMode, SheetProps } from './Sheet';
+export { SmsField } from './SmsField';
+export type { SmsFieldProps } from './SmsField';
+export { TextEntryContent } from './TextEntryContent';
+export type { TextEntryContentProps } from './TextEntryContent';

package/src/icons/data.ts

@@ -15,6 +15,8 @@ export type IconName =
   | 'aspect-4-3'
   | 'attachment'
   | 'bag-check'
+  | 'bank'
+  | 'bed'
   | 'bell'
   | 'bluetooth'
   | 'bot'
@@ -41,8 +43,10 @@ export type IconName =
   | 'clipboard-user'
   | 'clipboard'
   | 'close'
+  | 'coffee'
   | 'coin'
   | 'copy'
+  | 'crosshair'
   | 'dashboard-megaphone'
   | 'dashboard-star'
   | 'download'
@@ -58,6 +62,7 @@ export type IconName =
   | 'flash-auto'
   | 'flash-off'
   | 'flash-on'
+  | 'fuel'
   | 'grid'
   | 'hand'
   | 'heart'
@@ -73,12 +78,15 @@ export type IconName =
   | 'logout'
   | 'mail'
   | 'maximize'
+  | 'medical-cross'
   | 'menu'
   | 'mic-on'
   | 'mic'
   | 'minimize'
+  | 'minus'
   | 'more-h'
   | 'more-v'
+  | 'navigation-pointer'
   | 'order'
   | 'package'
   | 'paperclip'
@@ -100,6 +108,7 @@ export type IconName =
   | 'share'
   | 'shelf-pay'
   | 'shield-check'
+  | 'shopping-bag'
   | 'shutter-recording'
   | 'shutter'
   | 'sidebar'
@@ -107,8 +116,10 @@ export type IconName =
   | 'sound-off'
   | 'sound'
   | 'spark'
+  | 'star-filled'
   | 'star'
   | 'stop'
+  | 'store'
   | 'storefront-ai'
   | 'storefront-arrow'
   | 'storefront-check'
@@ -122,6 +133,7 @@ export type IconName =
   | 'upload'
   | 'user'
   | 'users-search'
+  | 'utensils'
   | 'visit'
   | 'warning';
 
@@ -290,6 +302,24 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'bank': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M3 9l9-5 9 5 M5 9v8 M9 9v8 M15 9v8 M19 9v8 M3 21h18 M4 17h16',
+      },
+    ],
+  },
+  'bed': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M3 6v12 M3 11h18v7 M21 18v-3 M7 11V9a1 1 0 0 1 1-1h9a3 3 0 0 1 3 3',
+      },
+    ],
+  },
   'bell': {
     strokeWidth: 1.75,
     elements: [
@@ -858,6 +888,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'coffee': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M4 8h13v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V8z M17 9h2a2 2 0 0 1 0 6h-2 M8 3v2 M12 3v2',
+      },
+    ],
+  },
   'coin': {
     strokeWidth: 1.75,
     elements: [
@@ -902,6 +941,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'crosshair': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M16 12a4 4 0 1 1-8 0a4 4 0 1 1 8 0 M12 2v3 M12 19v3 M2 12h3 M19 12h3',
+      },
+    ],
+  },
   'dashboard-megaphone': {
     strokeWidth: 1.75,
     elements: [
@@ -1160,6 +1208,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'fuel': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M5 21V5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v16 M4 21h11 M7 9h5 M14 8l3 3v6a2 2 0 0 0 2 2 2 2 0 0 0 2-2v-7l-3-3',
+      },
+    ],
+  },
   'grid': {
     strokeWidth: 1.75,
     elements: [
@@ -1459,6 +1516,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'medical-cross': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M7 4h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z M12 8v8 M8 12h8',
+      },
+    ],
+  },
   'menu': {
     strokeWidth: 1.75,
     elements: [
@@ -1519,6 +1585,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'minus': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M5 12h14',
+      },
+    ],
+  },
   'more-h': {
     strokeWidth: 1.75,
     elements: [
@@ -1571,6 +1646,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'navigation-pointer': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M21 4L3 11l7 2 2 7 9-16z',
+      },
+    ],
+  },
   'order': {
     strokeWidth: 1.75,
     elements: [
@@ -1994,6 +2078,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'shopping-bag': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M5 8h14l-1 12H6L5 8z M9 8V6a3 3 0 0 1 6 0v2',
+      },
+    ],
+  },
   'shutter-recording': {
     strokeWidth: 1.75,
     elements: [
@@ -2127,6 +2220,17 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'star-filled': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M12 3.2l2.5 5.1 5.6.8-4.05 3.95.96 5.6L12 16.9 6.99 18.65l.96-5.6L3.9 9.1l5.6-.8L12 3.2z',
+        fill: 'currentColor',
+        stroke: 'none',
+      },
+    ],
+  },
   'star': {
     strokeWidth: 1.75,
     elements: [
@@ -2151,6 +2255,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'store': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M4 9l1.2-4h13.6L20 9 M5 9.5V20h14V9.5 M4 9c0 1.4 1 2.3 2.2 2.3S8.4 10.4 8.4 9 M8.4 9c0 1.4 1 2.3 2.2 2.3S12.8 10.4 12.8 9 M12.8 9c0 1.4 1 2.3 2.2 2.3S17.2 10.4 17.2 9 M17.2 9c0 1.4 1 2.3 2.2 2.3 M9.5 20v-5h5v5',
+      },
+    ],
+  },
   'storefront-ai': {
     strokeWidth: 1.75,
     elements: [
@@ -2461,6 +2574,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'utensils': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M7 3v7 M5 3v4a2 2 0 0 0 2 2 M9 3v4a2 2 0 0 1-2 2 M7 11v10 M16 3c-1.5 0-2.5 2-2.5 5s1 4 2.5 4 M16 3v18',
+      },
+    ],
+  },
   'visit': {
     strokeWidth: 1.75,
     elements: [
@@ -2515,6 +2637,8 @@ export const ICON_NAMES: IconName[] = [
   'aspect-4-3',
   'attachment',
   'bag-check',
+  'bank',
+  'bed',
   'bell',
   'bluetooth',
   'bot',
@@ -2541,8 +2665,10 @@ export const ICON_NAMES: IconName[] = [
   'clipboard-user',
   'clipboard',
   'close',
+  'coffee',
   'coin',
   'copy',
+  'crosshair',
   'dashboard-megaphone',
   'dashboard-star',
   'download',
@@ -2558,6 +2684,7 @@ export const ICON_NAMES: IconName[] = [
   'flash-auto',
   'flash-off',
   'flash-on',
+  'fuel',
   'grid',
   'hand',
   'heart',
@@ -2573,12 +2700,15 @@ export const ICON_NAMES: IconName[] = [
   'logout',
   'mail',
   'maximize',
+  'medical-cross',
   'menu',
   'mic-on',
   'mic',
   'minimize',
+  'minus',
   'more-h',
   'more-v',
+  'navigation-pointer',
   'order',
   'package',
   'paperclip',
@@ -2600,6 +2730,7 @@ export const ICON_NAMES: IconName[] = [
   'share',
   'shelf-pay',
   'shield-check',
+  'shopping-bag',
   'shutter-recording',
   'shutter',
   'sidebar',
@@ -2607,8 +2738,10 @@ export const ICON_NAMES: IconName[] = [
   'sound-off',
   'sound',
   'spark',
+  'star-filled',
   'star',
   'stop',
+  'store',
   'storefront-ai',
   'storefront-arrow',
   'storefront-check',
@@ -2622,6 +2755,7 @@ export const ICON_NAMES: IconName[] = [
   'upload',
   'user',
   'users-search',
+  'utensils',
   'visit',
   'warning',
 ];

package/src/theme/colors.ts

@@ -61,12 +61,9 @@ export const lightColors = {
   glassTintLight: 'rgba(255,255,255,0.55)',
   /** 玻璃容器内部分隔线 —— 暗色翻成对应低透白,保证暗底可见。 */
   glassSeparator: 'rgba(0,0,0,0.08)',
-  /** 浮动玻璃胶囊外区 tint(TabBar 滚动玻璃门)。
-   *  数值配合 blur.strong(blurAmount=40) 让"玻璃门外区滚动内容透过模糊显示"达成。
-   *  跟 glassTintLight 区分:此 token 给"玻璃门外区"语义。 */
+  /** 玻璃容器的半透明背景，与轻薄染色 glassTintLight 分别表达表面与覆盖层。 */
   glassSurface: 'rgba(255,255,255,0.20)',
-  /** TabBar 玻璃门 tint —— 跟 glassSurface 区分,真机实测 0.20 太厚看不清滚动内容,
-   *  TabBar 场景配合 blur.soft(blurAmount=10) 主导,语义不同不可复用同一个 alpha。 */
+  /** TabBar 的轻薄主题背景；只表达颜色，不定义原生玻璃材质或模糊半径。 */
   tabBarGlassTint: 'rgba(255,255,255,0.10)',
   /** 玻璃胶囊边框(亮 0.18 / 暗 0.14 白透)。 */
   glassBorder: 'rgba(255,255,255,0.18)',
@@ -170,9 +167,9 @@ export const darkColors: ColorTokens = {
   // 暗色 0.06 白透,凸起感由 glassBar 暗色黑 0.35 shadow 补
   glassTintLight: 'rgba(255,255,255,0.06)',
   glassSeparator: 'rgba(255,255,255,0.10)',
-  // 深灰半透 0.30,配合 blur.strong(blurAmount=40) 让"玻璃门"语义达成
+  // 暗色玻璃容器沿用深灰半透明背景。
   glassSurface: 'rgba(28,28,30,0.30)',
-  // 配合 blur.soft(blurAmount=10) 让内容透过模糊带 alpha 染色
+  // TabBar 沿用独立的轻薄染色。
   tabBarGlassTint: 'rgba(28,28,30,0.18)',
   glassBorder: 'rgba(255,255,255,0.14)',
   glassHighlight: 'rgba(255,255,255,0.24)',

package/src/theme/index.ts

@@ -35,7 +35,4 @@ export {
   pressedOpacity,
 } from './tokens';
 
-export { blur } from './blur';
-export type { BlurIntensity } from './blur';
-
 export { r, rf } from './scale';