@unif/react-native-design 0.8.2 → 0.10.0

package/src/components/ui/Grid/Grid.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
-import { useColors, useThemedStyles } from '../../../theme';
+import { pressedOpacity, r, useColors, useThemedStyles } from '../../../theme';
 import { createLogger } from '../../../utils/logger';
 import { childTestID } from '../../../utils/testID';
 import { Icon } from '../Icon';
@@ -10,6 +10,9 @@ import type { GridProps } from './types';
 
 const log = createLogger('Grid');
 
+// 渲染路径去重集合 —— 同一 columns 值只在首次渲染时告警一次,避免长列表重复刷 log。
+const _warnedColumns = new Set<number>();
+
 /**
  * 图标入口宫格 —— 首页 / 分类落地页。1..6 列。
  * 每格：图标 + 小标签，纵向居中。
@@ -21,44 +24,58 @@ export function Grid({
   columns = 4,
   onPress,
   card = true,
+  style,
   testID,
 }: GridProps): React.JSX.Element {
   const c = useColors();
   const styles = useThemedStyles(makeStyles);
-  if (![1, 2, 3, 4, 5, 6].includes(columns)) {
+  if (![1, 2, 3, 4, 5, 6].includes(columns) && !_warnedColumns.has(columns)) {
+    _warnedColumns.add(columns);
     log.warn(`columns 仅支持 1..6，传入 ${columns}，已 fallback 为 4 列`);
   }
   const cellWidth = colWidth(columns);
   return (
-    <View style={[styles.wrap, card && styles.card]} testID={testID}>
+    <View style={[styles.wrap, card && styles.card, style]} testID={testID}>
       <View style={styles.inner}>
         {items.map((item) => {
           const itemTestID = childTestID(testID, item.id, item.testID);
+          const cellContent = (
+            <>
+              <View>
+                {/* 28pt 介于 icon.md(26) / icon.lg(30) 之间的设计稿专定字形尺寸 */}
+                <Icon name={item.icon} size={r(28)} color={c.foregroundMuted} />
+                {item.badge != null ? (
+                  <View style={styles.badge}>
+                    <Text style={styles.badgeText}>{item.badge}</Text>
+                  </View>
+                ) : null}
+              </View>
+              <Text style={styles.label} numberOfLines={1}>
+                {item.label}
+              </Text>
+            </>
+          );
           return (
             <View key={item.id} style={cellWidth}>
-              <Pressable
-                onPress={() => onPress?.(item)}
-                accessibilityRole="button"
-                accessibilityLabel={item.label}
-                testID={itemTestID}
-                style={({ pressed }) => [
-                  styles.cell,
-                  { opacity: pressed ? 0.7 : 1 },
-                ]}
-              >
-                <View>
-                  {/* 28pt 介于 icon.md(26) / icon.lg(30) 之间的设计稿专定字号 */}
-                  <Icon name={item.icon} size={28} color={c.foregroundMuted} />
-                  {item.badge != null ? (
-                    <View style={styles.badge}>
-                      <Text style={styles.badgeText}>{item.badge}</Text>
-                    </View>
-                  ) : null}
+              {onPress ? (
+                // 有 onPress 才挂 Pressable + button 语义,纯展示宫格不播报 button
+                <Pressable
+                  onPress={() => onPress(item)}
+                  accessibilityRole="button"
+                  accessibilityLabel={item.label}
+                  testID={itemTestID}
+                  style={({ pressed }) => [
+                    styles.cell,
+                    { opacity: pressed ? pressedOpacity : 1 },
+                  ]}
+                >
+                  {cellContent}
+                </Pressable>
+              ) : (
+                <View style={styles.cell} testID={itemTestID}>
+                  {cellContent}
                 </View>
-                <Text style={styles.label} numberOfLines={1}>
-                  {item.label}
-                </Text>
-              </Pressable>
+              )}
             </View>
           );
         })}

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

@@ -7,6 +7,7 @@ import {
   type as t,
   type ColorTokens,
 } from '../../../theme';
+import { badgeStyles } from '../shared/badgeStyles';
 
 /**
  * 预生成 1..6 列的宽度规则，避免 render 时创建 `{ width: pct }` 内联对象
@@ -39,8 +40,10 @@ export const colWidth = (columns: number) => {
   }
 };
 
-export const makeStyles = (c: ColorTokens) =>
-  StyleSheet.create({
+export const makeStyles = (c: ColorTokens) => {
+  // Grid 图标容器上边缘偏移 r(-6):图标高 r(28),角标圆心对齐图标右上角
+  const badge = badgeStyles(c, r(-6));
+  return StyleSheet.create({
     wrap: {
       width: '100%',
     },
@@ -67,22 +70,7 @@ export const makeStyles = (c: ColorTokens) =>
       fontWeight: fw.medium,
       color: c.foreground,
     },
-    badge: {
-      position: 'absolute',
-      top: r(-6),
-      right: r(-10),
-      minWidth: r(16),
-      height: r(16),
-      borderRadius: radius.md,
-      backgroundColor: c.error,
-      paddingHorizontal: space[1],
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    badgeText: {
-      color: c.onError,
-      fontSize: t.nano,
-      fontWeight: fw.bold,
-      lineHeight: 12,
-    },
+    badge: badge.badge,
+    badgeText: badge.badgeText,
   });
+};

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

@@ -1,3 +1,4 @@
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 
 export type GridItem = {
@@ -14,12 +15,14 @@ export type GridProps = {
   items: GridItem[];
   /**
    * 列数 1..6；默认 4。
-   * ⚠️ 类型外的值（如 `7`）会**静默**回退到 4 列 — 业务应在传入前自行校验。
+   * ⚠️ 类型外的值（如 `7`）会**告警**（dev log.warn）并回退到 4 列 — 业务应在传入前自行校验。
    */
   columns?: 1 | 2 | 3 | 4 | 5 | 6;
   onPress?: (item: GridItem) => void;
   /** 是否套白色卡片；传 false 则背景透明 */
   card?: boolean;
+  /** 容器附加样式(margin / position 等布局微调)。 */
+  style?: StyleProp<ViewStyle>;
   /** 容器 testID；item testID 会自动派生为 `${testID}-${item.id}` */
   testID?: string;
 };

package/src/components/ui/Icon/Icon.tsx

@@ -2,15 +2,18 @@ import React from 'react';
 import { View } from 'react-native';
 import Svg, { Circle, Path, Rect } from 'react-native-svg';
 import { ICONS, type IconDef } from '../../../icons';
-import { useColors } from '../../../theme';
+import { r, useColors } from '../../../theme';
 import { createLogger } from '../../../utils/logger';
 import type { IconProps } from './types';
 
 const log = createLogger('Icon');
 
+// 模块级去重集合:同一未知 name 只警一次,避免列表场景告警风暴。
+const warnedNames = new Set<string>();
+
 export function Icon({
   name,
-  size = 18,
+  size = r(18),
   color,
   strokeWidth,
   style,
@@ -20,7 +23,10 @@ export function Icon({
   const stroke = color ?? c.foregroundMuted;
   const def: IconDef | undefined = ICONS[name];
   if (!def) {
-    log.warn(`unknown icon: ${name}`);
+    if (!warnedNames.has(name)) {
+      warnedNames.add(name);
+      log.warn(`unknown icon: ${name}`);
+    }
     return (
       <View
         style={[{ width: size, height: size }, style]}
@@ -50,31 +56,40 @@ export function Icon({
         strokeLinejoin="round"
       >
         {def.elements.map((el, i) => {
-          const fill =
-            el.fill === 'currentColor' ? stroke : (el.fill ?? 'none');
-          if (el.kind === 'path') {
-            return <Path key={i} d={el.d} fill={fill} />;
-          }
-          if (el.kind === 'circle') {
-            return (
-              <Circle key={i} cx={el.cx} cy={el.cy} r={el.r} fill={fill} />
-            );
-          }
-          if (el.kind === 'rect') {
-            return (
-              <Rect
-                key={i}
-                x={el.x}
-                y={el.y}
-                width={el.width}
-                height={el.height}
-                rx={el.rx}
-                ry={el.ry}
-                fill={fill}
-              />
-            );
+          // fill:currentColor → 主题 stroke 色;其余原样;缺省继承根 fill="none"。
+          // opacity / stroke:透传源 svg 的元素级覆盖(stroke="none" = 纯 fill 不继承根描边)。
+          const elProps = {
+            fill: el.fill === 'currentColor' ? stroke : (el.fill ?? 'none'),
+            opacity: el.opacity,
+            stroke: el.stroke,
+          };
+          switch (el.kind) {
+            case 'path':
+              return <Path key={i} d={el.d} {...elProps} />;
+            case 'circle':
+              return (
+                <Circle key={i} cx={el.cx} cy={el.cy} r={el.r} {...elProps} />
+              );
+            case 'rect':
+              // ry 不被 build-icons.js 抽取,不在 IconElement 类型中 —— 此处不传。
+              return (
+                <Rect
+                  key={i}
+                  x={el.x}
+                  y={el.y}
+                  width={el.width}
+                  height={el.height}
+                  rx={el.rx}
+                  {...elProps}
+                />
+              );
+            default: {
+              // 穷尽兜底:未来若 build-icons.js 新增 kind(如 line/ellipse),
+              // TypeScript 会在此行报错提示渲染端同步处理,防静默渲染空。
+              const _exhaustive: never = el;
+              return _exhaustive;
+            }
           }
-          return null;
         })}
       </Svg>
     </View>

package/src/components/ui/IconButton/IconButton.tsx

@@ -19,6 +19,7 @@ export function IconButton({
   variant = 'ghost',
   color,
   disabled,
+  loading,
   accessibilityLabel,
   accessibilityHint,
   style,
@@ -30,6 +31,7 @@ export function IconButton({
       onPress={onPress}
       size={size}
       variant={variant}
+      loading={loading}
       disabled={disabled}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}

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

@@ -2,6 +2,9 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import type { ButtonSize, ButtonVariant } from '../Button/types';
 
+/** IconButton 支持的视觉变体:排除 'text'——text 撕除高度,与 square 方形布局语义冲突。 */
+export type IconButtonVariant = Exclude<ButtonVariant, 'text'>;
+
 export type IconButtonProps = {
   /** 图标名 */
   icon: IconName;
@@ -9,14 +12,17 @@ export type IconButtonProps = {
   onPress?: () => void;
   /** 尺寸,默认 'md'(28 / 36 / 44 方形) */
   size?: ButtonSize;
-  /** 视觉变体,默认 'ghost'(透明底,适合 header right-tray 场景) */
-  variant?: ButtonVariant;
+  /** 视觉变体,默认 'ghost'(透明底,适合 header right-tray 场景)。
+   *  不支持 'text'——text variant 撕除高度,与 square 方形布局冲突。 */
+  variant?: IconButtonVariant;
   /** Icon 颜色 override —— 不传走 variant.palette.fg(品牌一致默认);
    *  caller 显式控制 icon 色场景(eg NavBar 内部按 variant 推导出 foreground /
    *  onPrimary)。仅影响 icon 色,bg/border 仍由 variant palette 决定。 */
   color?: string;
   /** 整体禁用:opacity 0.5 + 不响应 */
   disabled?: boolean;
+  /** 加载态:显示 ActivityIndicator 替代 icon,自动 disabled */
+  loading?: boolean;
   /** **必填** — 无文本提示语义,SR 需要 */
   accessibilityLabel: string;
   /** SR 朗读 label 后的行为说明 hint。仅在"行为不显然"时加。 */

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

@@ -17,9 +17,10 @@ export type InputProps = Omit<
   leading?: ReactNode;
   /** 可选的后置插槽（清除按钮、眼睛切换等） */
   trailing?: ReactNode;
-  /** 错误信息 —— 容器进入错误态并在下方显示 */
+  /** 错误信息 —— 容器进入错误态并在下方显示。
+   *  空串 `""` / undefined 都不进 error 态(truthy 判定),与 TextFieldBase 保持一致。[L-96] */
   error?: string;
-  /** 覆盖单行高度，默认 44（hitTarget） */
+  /** 覆盖单行高度，默认 control.lg(r(44),随设备缩放) */
   height?: number;
   /** 容器外层样式（含 leading/trailing 整个 wrap） */
   containerStyle?: StyleProp<ViewStyle>;

package/src/components/ui/Logo/Logo.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Image } from 'react-native';
+import { r } from '../../../theme';
 import type { LogoProps } from './types';
 
 /**
@@ -13,7 +14,7 @@ import type { LogoProps } from './types';
  */
 export function Logo({
   source,
-  size = 64,
+  size = r(64),
   borderRadius,
   label = 'Logo',
   style,

package/src/components/ui/NavBar/NavBar.tsx

@@ -6,9 +6,14 @@ import { isSlot } from './isSlot';
 import { makeStyles } from './styles';
 import type { NavBarProps, NavBarSlotConfig } from './types';
 
-/** NavBarSlotConfig → IconButton(variant='ghost' + 外部 tint)。
- *  accessibilityLabel 必填(IconButton 强制),fallback 到 icon 名。 */
+/** NavBarSlotConfig → IconButton(variant='ghost' + 外部 tint)。 */
 function renderSlot(slot: NavBarSlotConfig, tint: string) {
+  // [L-50] 缺 accessibilityLabel 时 dev 告警 —— 回退读英文 icon 名(如 "menu")体验不佳。
+  if (!slot.accessibilityLabel && typeof __DEV__ !== 'undefined' && __DEV__) {
+    console.warn(
+      `NavBar slot(icon="${slot.icon}")未传 accessibilityLabel,SR 将读出 icon 名,请传人类可读短语。`
+    );
+  }
   return (
     <IconButton
       icon={slot.icon}
@@ -30,12 +35,20 @@ function resolveSlot(
   return slot;
 }
 
+/**
+ * 安全区归属：NavBar **不**内置 top safe-area inset。
+ * 宿主页面负责处理（推荐做法：在屏幕根容器或 Stack.Screen header 里
+ * 用 `<SafeAreaView edges={['top']}>` 包住 NavBar，或配合
+ * `react-navigation` 的 `headerStatusBarHeight` 选项）。
+ * 这样 NavBar 可在任何场景复用（modal、底部抽屉 header 等不需要 top inset）。
+ */
 export function NavBar({
   title,
   subtitle,
   left,
   right,
   variant = 'default',
+  style,
   testID,
 }: NavBarProps) {
   const c = useColors();
@@ -53,6 +66,7 @@ export function NavBar({
         styles.bar,
         isBrand && styles.barBrand,
         isTransparent && styles.barTransparent,
+        style,
       ]}
       testID={testID}
     >

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

@@ -1,10 +1,12 @@
 import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 
 export type NavBarSlotConfig = {
   icon: IconName;
   onPress?: () => void;
-  /** 屏幕阅读器读出的功能描述（icon-only 必填） */
+  /** 屏幕阅读器读出的功能描述。强烈建议传 —— icon-only 按钮无文字,缺省时 SR 回退
+   *  读英文 icon 名(如 "menu")且 dev 下告警。请传人类可读短语(如「返回」「更多」)。 */
   accessibilityLabel?: string;
 };
 
@@ -26,6 +28,8 @@ export type NavBarProps = {
    *   'transparentLight' variant。
    */
   variant?: 'default' | 'brand' | 'transparent';
+  /** 容器附加样式(margin / position 等布局微调)。 */
+  style?: StyleProp<ViewStyle>;
   /** E2E / 测试定位 */
   testID?: string;
 };

package/src/components/ui/PasswordInput/PasswordInput.tsx

@@ -1,50 +1,84 @@
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { Pressable } from 'react-native-gesture-handler';
 import { Icon } from '../Icon';
 import { Input } from '../Input';
-import { useColors } from '../../../theme';
+import { control, fixed, r, useColors } from '../../../theme';
+import { childTestID } from '../../../utils/testID';
 import { styles } from './styles';
+import type { TextInputRef } from '../TextField/TextFieldBase';
 import type { PasswordInputProps } from './types';
 
-/** 密码 Input —— Input + leading lock + trailing eye 切换明文 / 密文。
- *  showPw 内部 useState,caller 只关心 value/onChangeText。
- *  a11y:label 已表达"显示/隐藏密码"意图,不再加 accessibilityHint(避免
- *  SR 朗读 over-hint,见 CLAUDE.md a11y 规范)。 */
-export function PasswordInput({
-  value,
-  onChangeText,
-  placeholder = '请输入密码',
-  testID,
-  inputProps,
-}: PasswordInputProps): React.JSX.Element {
-  const c = useColors();
-  const [showPw, setShowPw] = useState(false);
+/**
+ * 密码 Input —— Input + leading lock + trailing eye 切换明文 / 密文。
+ *
+ * [L-32] 增强:
+ * - forwardRef<TextInput> —— 业务表单 focus() 聚焦
+ * - inputProps 类型改为 Omit<TextInputProps,'secureTextEntry'>
+ * - 补 textContentType='password' / autoComplete='current-password' / autoCapitalize='none' 默认值
+ * - 暴露 error / disabled 透传给底层 Input
+ *
+ * showPw 内部 useState,caller 只关心 value/onChangeText。
+ * a11y:label 已表达"显示/隐藏密码"意图,不再加 accessibilityHint(避免 SR 朗读 over-hint)。
+ */
+export const PasswordInput = forwardRef<TextInputRef, PasswordInputProps>(
+  function PasswordInput(
+    {
+      value,
+      onChangeText,
+      placeholder = '请输入密码',
+      testID,
+      error,
+      disabled,
+      inputProps,
+    },
+    ref
+  ): React.JSX.Element {
+    const c = useColors();
+    const [showPw, setShowPw] = useState(false);
 
-  return (
-    <Input
-      testID={testID}
-      value={value}
-      onChangeText={onChangeText}
-      placeholder={placeholder}
-      {...inputProps}
-      secureTextEntry={!showPw}
-      leading={<Icon name="lock" size={18} color={c.iconFaint40} />}
-      trailing={
-        <Pressable
-          testID={testID ? `${testID}-toggle` : undefined}
-          style={styles.eyeBtn}
-          onPress={() => setShowPw((v) => !v)}
-          accessibilityRole="button"
-          accessibilityLabel={showPw ? '隐藏密码' : '显示密码'}
-          hitSlop={8}
-        >
-          <Icon
-            name={showPw ? 'eye' : 'eye-off'}
-            size={16}
-            color={c.iconFaint40}
-          />
-        </Pressable>
-      }
-    />
-  );
-}
+    return (
+      <Input
+        ref={ref}
+        testID={testID}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        error={error}
+        disabled={disabled}
+        // [L-32] 补 textContentType / autoComplete / autoCapitalize 默认值 —— 提升密码自动填充体验
+        textContentType="password"
+        autoComplete="current-password"
+        autoCapitalize="none"
+        {...inputProps}
+        // secureTextEntry 在 inputProps spread 之后覆盖,确保组件自管不被 caller 干扰
+        secureTextEntry={!showPw}
+        leading={<Icon name="lock" size={r(18)} color={c.iconFaint40} />}
+        trailing={
+          <Pressable
+            testID={childTestID(testID, 'toggle')}
+            style={styles.eyeBtn}
+            onPress={() => setShowPw((v) => !v)}
+            accessibilityRole="button"
+            accessibilityLabel={showPw ? '隐藏密码' : '显示密码'}
+            // [M-7] eye icon r(16)≈16pt;Input 高 control.md≈36pt 限制垂直扩展
+            // vertical 走 (44-control.md)/2≈4;horizontal 走 (44-16)/2=14
+            hitSlop={{
+              top: Math.round((fixed.hitTarget - control.md) / 2),
+              bottom: Math.round((fixed.hitTarget - control.md) / 2),
+              left: Math.round((fixed.hitTarget - r(16)) / 2),
+              right: Math.round((fixed.hitTarget - r(16)) / 2),
+            }}
+          >
+            <Icon
+              name={showPw ? 'eye' : 'eye-off'}
+              size={r(16)}
+              color={c.iconFaint40}
+            />
+          </Pressable>
+        }
+      />
+    );
+  }
+);
+
+PasswordInput.displayName = 'PasswordInput';

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

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { space } from '../../../theme';
 
-/** eye Pressable hit area 微间距,跟 ForgotPassword 同款 4px。 */
+/** eye Pressable hit area 微间距 4px。 */
 export const styles = StyleSheet.create({
   eyeBtn: { paddingHorizontal: space['1'] },
 });

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

@@ -6,7 +6,12 @@ export type PasswordInputProps = {
   /** 默认 "请输入密码" */
   placeholder?: string;
   testID?: string;
+  /** 错误信息 —— 传入时 Input 进入 error 态并在下方显示 */
+  error?: string;
+  /** 整体禁用:等价于 editable=false + 视觉变灰 */
+  disabled?: boolean;
   /** 透传给底层 Input 的其他 RN TextInput 属性(maxLength / autoFocus 等)。
-   *  ⚠ 不要传 secureTextEntry,组件自管;传了会被组件内部覆盖。 */
-  inputProps?: Partial<TextInputProps>;
+   *  ⚠ 不要传 secureTextEntry,组件自管;传了会被组件内部覆盖。
+   *  [L-32] 类型显式 Omit<TextInputProps,'secureTextEntry'> 封堵传入歧义 */
+  inputProps?: Omit<TextInputProps, 'secureTextEntry'>;
 };

package/src/components/ui/Pulse/Pulse.tsx

@@ -5,12 +5,13 @@ import type { PulseProps } from './types';
 
 export function Pulse({
   children,
+  style,
   testID,
   ...opts
 }: PulseProps & { children: React.ReactNode }): React.JSX.Element {
   const animatedStyle = usePulse(opts);
   return (
-    <Animated.View style={animatedStyle} testID={testID}>
+    <Animated.View style={[animatedStyle, style]} testID={testID}>
       {children}
     </Animated.View>
   );

package/src/components/ui/Pulse/PulseDot.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import Animated from 'react-native-reanimated';
-import { useColors } from '../../../theme';
+import { r, useColors } from '../../../theme';
 import { usePulse } from './usePulse';
 import type { PulseDotProps } from './types';
 
 export function PulseDot({
-  size = 6,
+  size = r(6),
   color,
   from = 0.5,
-  to = 1,
-  duration = 700,
-  delay = 0,
+  style,
   testID,
+  ...opts
 }: PulseDotProps = {}): React.JSX.Element {
   const c = useColors();
   const fill = color ?? c.primary;
-  const animatedStyle = usePulse({ from, to, duration, delay });
+  // [L-93] 只显式覆盖 from(默认 0.5 与 usePulse 的 0.6 不同),其余 opts 透传 usePulse。
+  const animatedStyle = usePulse({ from, ...opts });
   return (
     <Animated.View
       style={[
@@ -26,6 +26,7 @@ export function PulseDot({
           backgroundColor: fill,
         },
         animatedStyle,
+        style,
       ]}
       testID={testID}
       accessibilityElementsHidden

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

@@ -1,3 +1,5 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
 export type PulseOptions = {
   /** 透明度下界（默认 0.6） */
   from?: number;
@@ -12,11 +14,15 @@ export type PulseOptions = {
 export type PulseDotProps = PulseOptions & {
   size?: number;
   color?: string;
+  /** 容器附加样式(margin / position 等布局微调)。 */
+  style?: StyleProp<ViewStyle>;
   /** E2E / 测试定位 */
   testID?: string;
 };
 
 export type PulseProps = PulseOptions & {
+  /** 容器附加样式(margin / position 等布局微调)。 */
+  style?: StyleProp<ViewStyle>;
   /** E2E / 测试定位 */
   testID?: string;
 };