@beppla/tapas-ui 1.5.2 → 1.5.7

package/module/StatisticCard/README.md

@@ -0,0 +1,129 @@
+# StatisticCard
+
+统计卡片组件，用于展示关键指标和数据，支持趋势指示、前缀/后缀、图标等功能。适用于仪表板、数据大屏和统计报表。
+
+## 功能特性
+
+- ✅ 数值展示，支持前缀（如 $）和后缀（如 %）
+- ✅ 趋势指示器：正向增长绿色（#00B894）、负向下降红色（#D63031）
+- ✅ 趋势百分比自动格式化（1 位小数，带 +/- 符号）
+- ✅ 支持自定义图标（React 节点，显示在右上角）
+- ✅ 支持描述文本
+- ✅ 加载状态（loading），显示 "Loading..." 替代数值
+- ✅ 可点击交互：有 onPress 时自动切换为 TouchableOpacity
+- ✅ 自定义数值颜色
+- ✅ 基于 Card 组件封装，最小高度 120px
+
+## 安装使用
+
+```tsx
+import { StatisticCard } from '@beppla/tapas-ui/components/StatisticCard';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| title | `string` | (必填) | 指标标题 |
+| value | `string \| number` | (必填) | 指标数值 |
+| prefix | `string` | `''` | 数值前缀（如 $、EUR） |
+| suffix | `string` | `''` | 数值后缀（如 %、单） |
+| trend | `{ value: number; isPositive?: boolean }` | - | 趋势数据 |
+| description | `string` | - | 描述文本 |
+| icon | `React.ReactNode` | - | 右上角图标（任意 React 节点） |
+| color | `string` | `'#FF6B00'` | 数值颜色 |
+| onPress | `() => void` | - | 点击回调 |
+| loading | `boolean` | `false` | 是否加载中 |
+| style | `any` | - | 自定义样式 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<StatisticCard title="Total Sales" value="1,234" />
+```
+
+### 带前缀和后缀
+
+```tsx
+<StatisticCard title="Revenue" value="12,345" prefix="$" />
+<StatisticCard title="Growth Rate" value="15.8" suffix="%" />
+```
+
+### 带趋势指示
+
+```tsx
+<StatisticCard
+  title="Monthly Revenue"
+  value="45,678"
+  prefix="$"
+  trend={{ value: 12.5, isPositive: true }}
+  description="Compared to last month"
+/>
+
+<StatisticCard
+  title="Error Rate"
+  value="2.3"
+  suffix="%"
+  trend={{ value: 5.2, isPositive: false }}
+  description="Compared to last week"
+  color="#D63031"
+/>
+```
+
+### 带图标
+
+```tsx
+import TapasIcon from '@beppla/tapas-ui/components/Icons/TapasIcon';
+
+<StatisticCard
+  title="Total Orders"
+  value="8,456"
+  icon={<TapasIcon name="shopping_cart" size={24} color="#FF6B00" />}
+  trend={{ value: 8.3, isPositive: true }}
+/>
+```
+
+### 仪表板组合
+
+```tsx
+<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
+  <StatisticCard
+    title="Total Revenue"
+    value="123,456"
+    prefix="$"
+    trend={{ value: 15.3, isPositive: true }}
+    description="Last 30 days"
+    color="#FF6B00"
+  />
+  <StatisticCard
+    title="New Users"
+    value="1,234"
+    trend={{ value: 8.2, isPositive: true }}
+    color="#0066CC"
+  />
+  <StatisticCard
+    title="Conversion Rate"
+    value="3.45"
+    suffix="%"
+    trend={{ value: 2.1, isPositive: false }}
+    color="#00B894"
+  />
+</View>
+```
+
+### 加载中
+
+```tsx
+<StatisticCard title="Loading Data" value="0" loading />
+```
+
+## 注意事项
+
+- `title` 和 `value` 为必填属性
+- `trend.isPositive` 默认为 `true`（不传或传 `undefined` 时视为正向）
+- 趋势值显示精度为小数点后 1 位（`toFixed(1)`）
+- 加载状态显示 "Loading..." 文本，不渲染数值和趋势
+- 有 `onPress` 时容器变为 TouchableOpacity（activeOpacity=0.7），无 `onPress` 时为 View
+- 默认数值颜色为橙色（#FF6B00），可通过 `color` 自定义

package/module/Status/README.md

@@ -0,0 +1,75 @@
+# Status
+
+状态标签组件，用于展示不同类型的状态信息。支持 point（圆点）和 solid（填充）两种显示模式。
+
+## 功能特性
+
+- ✅ 支持 6 种状态类型：success、error、warning、waiting、unavailable、disabled
+- ✅ 支持 point 模式（圆点 + 文字）和 solid 模式（带边框文字）
+- ✅ 自动首字母大写显示
+- ✅ 各状态类型使用主题色渲染
+- ✅ 空标签自动返回 null，不渲染
+- ✅ 支持自定义样式覆盖
+- ✅ 支持 testID 属性用于测试
+- ✅ 使用 React.memo 优化渲染性能
+
+## 安装使用
+
+```tsx
+import Status from '@beppla/tapas-ui/components/Status/Status';
+// 或具名导出
+import { StatusTag } from '@beppla/tapas-ui/components/Status/Status';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| tag | `string` | - | 状态文字 |
+| type | `STATUS_TYPE` | - | 状态类型 |
+| mode | `'point' \| 'solid'` | `'point'` | 显示模式 |
+| testID | `string` | - | 测试标识 |
+| styles | `StyleProp<ViewStyle>` | - | 自定义容器样式 |
+
+### STATUS_TYPE
+
+```ts
+type STATUS_TYPE = 'success' | 'error' | 'warning' | 'waiting' | 'unavailable' | 'disabled';
+```
+
+## 使用示例
+
+### Point 模式（圆点 + 文字）
+
+```tsx
+<Status tag="Active" type="success" mode="point" />
+<Status tag="Error" type="error" mode="point" />
+<Status tag="Warning" type="warning" mode="point" />
+<Status tag="Waiting" type="waiting" mode="point" />
+```
+
+### Solid 模式（带边框文字）
+
+```tsx
+<Status tag="Available" type="success" mode="solid" />
+<Status tag="Cancelled" type="error" mode="solid" />
+<Status tag="Pending" type="warning" mode="solid" />
+```
+
+### 全部状态类型
+
+```tsx
+{(['success', 'error', 'warning', 'waiting', 'unavailable', 'disabled'] as STATUS_TYPE[]).map(
+  (type) => (
+    <Status key={type} type={type} tag={type} mode="point" />
+  )
+)}
+```
+
+## 注意事项
+
+- `tag` 为空字符串时组件不渲染（返回 null）
+- 标签文字会自动首字母大写（通过 `capitalizeFirstLetter` 处理）
+- point 模式下圆点为 8x8 像素，带圆角
+- solid 模式使用边框 + 文字颜色，不填充背景
+- waiting 状态在 point 模式下有特殊样式（使用边框而非背景色）

package/module/Steps/README.md

@@ -0,0 +1,76 @@
+# Steps
+
+步骤条组件，用于展示多步骤流程的当前进度。步骤编号以圆形展示，已完成步骤显示对勾图标，步骤之间以连接线相连，支持点击已完成和当前步骤进行导航。
+
+## 功能特性
+
+- ✅ 多步骤流程展示
+- ✅ 三种步骤状态：完成（对勾图标）、当前（高亮）、待完成（灰色编号）
+- ✅ 步骤间连接线颜色跟随状态变化
+- ✅ 支持点击已完成/当前步骤进行导航
+- ✅ 待完成步骤不可点击
+- ✅ 横向排列布局
+- ✅ 主题色适配（品牌色高亮）
+- ✅ React.memo 优化性能
+
+## 安装使用
+
+```tsx
+import { Steps } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| steps | `{ title: string; description?: string }[]` | `[]` | 步骤配置数组（必填） |
+| currentStep | `number` | - | 当前步骤索引，从 0 开始（必填） |
+| onPressStep | `(step: number) => void` | - | 步骤点击回调，参数为步骤编号（从 1 开始）（必填） |
+| testID | `string` | - | 测试标识 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+const steps = [
+  { title: 'Step 1' },
+  { title: 'Step 2' },
+  { title: 'Step 3' },
+];
+
+<Steps
+  steps={steps}
+  currentStep={1}
+  onPressStep={(step) => console.log('Navigate to step:', step)}
+/>
+```
+
+### 全部完成
+
+```tsx
+<Steps
+  steps={[{ title: 'Info' }, { title: 'Payment' }, { title: 'Done' }]}
+  currentStep={3}
+  onPressStep={handleStepPress}
+/>
+```
+
+### 第一步
+
+```tsx
+<Steps
+  steps={[{ title: 'Cart' }, { title: 'Checkout' }, { title: 'Confirm' }]}
+  currentStep={0}
+  onPressStep={handleStepPress}
+/>
+```
+
+## 注意事项
+
+- `currentStep` 从 0 开始索引，0 表示第一步为当前步骤
+- `onPressStep` 回调参数为步骤编号（从 1 开始），与界面展示一致
+- 仅已完成和当前步骤可点击，待完成步骤点击无响应
+- 步骤圆形尺寸固定 28x28，连接线宽度 76px
+- `title` 和 `description` 在当前实现中仅用于数据传递，界面展示为编号/对勾
+- 需在 `ThemeProvider` 内使用

package/module/Switch/Switch.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import React, { useEffect, useRef } from 'react';
+import { View, TouchableOpacity, Animated } from 'react-native';
+import { makeStyles, withTheme } from '@rneui/themed';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TapasSwitch = ({
+  trackColor,
+  thumbColor,
+  width = 56,
+  height = 32,
+  onValueChange,
+  value,
+  disabled,
+  testID,
+  containerStyle
+}) => {
+  const styles = useStyles();
+  const leftAnim = useRef(new Animated.Value(value ? width - height - 1 : 3)).current;
+  useEffect(() => {
+    Animated.timing(leftAnim, {
+      toValue: value ? width - height - 1 : 3,
+      duration: 200,
+      useNativeDriver: false
+    }).start();
+  }, [value, width, height, leftAnim]);
+  const thumbSize = height - 6;
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, containerStyle],
+    children: /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: testID,
+      activeOpacity: 0.8,
+      onPress: () => {
+        if (!disabled && onValueChange) {
+          onValueChange(!value);
+        }
+      },
+      style: [styles.track, {
+        width,
+        height,
+        borderRadius: height / 2,
+        backgroundColor: value ? trackColor?.true ?? (disabled ? styles.disabledOnBg.backgroundColor : styles.onBg.backgroundColor) : trackColor?.false ?? (disabled ? styles.disabledOffBg.backgroundColor : styles.offBg.backgroundColor),
+        opacity: disabled ? 0.6 : 1
+      }],
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [{
+          width: thumbSize,
+          height: thumbSize,
+          borderRadius: thumbSize / 2,
+          backgroundColor: thumbColor ?? styles.thumb.backgroundColor,
+          transform: [{
+            translateX: leftAnim
+          }]
+        }, !disabled && styles.shadow]
+      })
+    })
+  });
+};
+const useStyles = makeStyles(theme => ({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  track: {
+    padding: 3,
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  onBg: {
+    backgroundColor: theme.colors.success
+  },
+  offBg: {
+    backgroundColor: theme.colors.grey3
+  },
+  disabledOnBg: {
+    backgroundColor: theme.colors.grey3
+  },
+  disabledOffBg: {
+    backgroundColor: theme.colors.grey4
+  },
+  thumb: {
+    backgroundColor: theme.colors.white
+  },
+  shadow: {
+    shadowColor: 'rgba(0, 0, 0, 0.12)',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    elevation: 8
+  }
+}));
+export default withTheme(/*#__PURE__*/React.memo(TapasSwitch));
+//# sourceMappingURL=Switch.js.map

package/module/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","View","TouchableOpacity","Animated","makeStyles","withTheme","jsx","_jsx","TapasSwitch","trackColor","thumbColor","width","height","onValueChange","value","disabled","testID","containerStyle","styles","useStyles","leftAnim","Value","current","timing","toValue","duration","useNativeDriver","start","thumbSize","style","container","children","activeOpacity","onPress","track","borderRadius","backgroundColor","true","disabledOnBg","onBg","false","disabledOffBg","offBg","opacity","thumb","transform","translateX","shadow","theme","justifyContent","alignItems","padding","position","colors","success","grey3","grey4","white","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","memo"],"sourceRoot":"../../../components","sources":["Switch/Switch.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SACEC,IAAI,EACJC,gBAAgB,EAChBC,QAAQ,QAIH,cAAc;AACrB,SAASC,UAAU,EAAEC,SAAS,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAatD,MAAMC,WAAuC,GAAGA,CAAC;EAC/CC,UAAU;EACVC,UAAU;EACVC,KAAK,GAAG,EAAE;EACVC,MAAM,GAAG,EAAE;EACXC,aAAa;EACbC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC;AACF,CAAC,KAAK;EACJ,MAAMC,MAAM,GAAGC,SAAS,CAAC,CAAC;EAC1B,MAAMC,QAAQ,GAAGpB,MAAM,CAAC,IAAIG,QAAQ,CAACkB,KAAK,CAACP,KAAK,GAAGH,KAAK,GAAGC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAACU,OAAO;EAEnFvB,SAAS,CAAC,MAAM;IACdI,QAAQ,CAACoB,MAAM,CAACH,QAAQ,EAAE;MACxBI,OAAO,EAAEV,KAAK,GAAGH,KAAK,GAAGC,MAAM,GAAG,CAAC,GAAG,CAAC;MACvCa,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ,CAAC,EAAE,CAACb,KAAK,EAAEH,KAAK,EAAEC,MAAM,EAAEQ,QAAQ,CAAC,CAAC;EAEpC,MAAMQ,SAAS,GAAGhB,MAAM,GAAG,CAAC;EAE5B,oBACEL,IAAA,CAACN,IAAI;IAAC4B,KAAK,EAAE,CAACX,MAAM,CAACY,SAAS,EAAEb,cAAc,CAAE;IAAAc,QAAA,eAC9CxB,IAAA,CAACL,gBAAgB;MACfc,MAAM,EAAEA,MAAO;MACfgB,aAAa,EAAE,GAAI;MACnBC,OAAO,EAAEA,CAAA,KAAM;QACb,IAAI,CAAClB,QAAQ,IAAIF,aAAa,EAAE;UAC9BA,aAAa,CAAC,CAACC,KAAK,CAAC;QACvB;MACF,CAAE;MACFe,KAAK,EAAE,CACLX,MAAM,CAACgB,KAAK,EACZ;QACEvB,KAAK;QACLC,MAAM;QACNuB,YAAY,EAAEvB,MAAM,GAAG,CAAC;QACxBwB,eAAe,EAAEtB,KAAK,GAClBL,UAAU,EAAE4B,IAAI,KAAKtB,QAAQ,GAAGG,MAAM,CAACoB,YAAY,CAACF,eAAe,GAAGlB,MAAM,CAACqB,IAAI,CAACH,eAAe,CAAC,GAClG3B,UAAU,EAAE+B,KAAK,KAAKzB,QAAQ,GAAGG,MAAM,CAACuB,aAAa,CAACL,eAAe,GAAGlB,MAAM,CAACwB,KAAK,CAACN,eAAe,CAAC;QACzGO,OAAO,EAAE5B,QAAQ,GAAG,GAAG,GAAG;MAC5B,CAAC,CACD;MAAAgB,QAAA,eAEFxB,IAAA,CAACJ,QAAQ,CAACF,IAAI;QACZ4B,KAAK,EAAE,CACL;UACElB,KAAK,EAAEiB,SAAS;UAChBhB,MAAM,EAAEgB,SAAS;UACjBO,YAAY,EAAEP,SAAS,GAAG,CAAC;UAC3BQ,eAAe,EAAE1B,UAAU,IAAIQ,MAAM,CAAC0B,KAAK,CAACR,eAAe;UAC3DS,SAAS,EAAE,CAAC;YAAEC,UAAU,EAAE1B;UAAS,CAAC;QACtC,CAAC,EACD,CAACL,QAAQ,IAAIG,MAAM,CAAC6B,MAAM;MAC1B,CACH;IAAC,CACc;EAAC,CACf,CAAC;AAEX,CAAC;AAED,MAAM5B,SAAS,GAAGf,UAAU,CAAE4C,KAAK,KAAM;EACvClB,SAAS,EAAE;IACTmB,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDhB,KAAK,EAAE;IACLiB,OAAO,EAAE,CAAC;IACVF,cAAc,EAAE,QAAQ;IACxBG,QAAQ,EAAE;EACZ,CAAC;EACDb,IAAI,EAAE;IACJH,eAAe,EAAEY,KAAK,CAACK,MAAM,CAACC;EAChC,CAAC;EACDZ,KAAK,EAAE;IACLN,eAAe,EAAEY,KAAK,CAACK,MAAM,CAACE;EAChC,CAAC;EACDjB,YAAY,EAAE;IACZF,eAAe,EAAEY,KAAK,CAACK,MAAM,CAACE;EAChC,CAAC;EACDd,aAAa,EAAE;IACbL,eAAe,EAAEY,KAAK,CAACK,MAAM,CAACG;EAChC,CAAC;EACDZ,KAAK,EAAE;IACLR,eAAe,EAAEY,KAAK,CAACK,MAAM,CAACI;EAChC,CAAC;EACDV,MAAM,EAAE;IACNW,WAAW,EAAE,qBAAqB;IAClCC,YAAY,EAAE;MAAEhD,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE,CAAC;IACrCgD,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE,EAAE;IAChBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC,CAAC;AAEH,eAAezD,SAAS,cAACP,KAAK,CAACiE,IAAI,CAACvD,WAAW,CAAC,CAAC","ignoreList":[]}

package/module/Tab/README.md

@@ -0,0 +1,161 @@
+# TapasTab
+
+Tab 标签页组件，扩展 `@rneui/themed` 的 Tab 组件，新增 `content` 宽度模式，支持根据标签文本内容自适应宽度，而非默认的平分容器宽度。
+
+## 功能特性
+
+- 两种宽度模式：`fill`（平分容器宽度）和 `content`（内容自适应宽度）
+- `content` 模式下自动启用水平滚动（`scrollable`）
+- 可配置标签最小宽度（`minTabWidth`）和最大宽度（`maxTabWidth`）
+- 可配置内容模式下的水平内边距（`contentPadding`）
+- 底部分隔线显示控制和颜色自定义
+- 文本超出时自动省略号处理（Web 端 `text-overflow: ellipsis`）
+- 完全兼容 `@rneui/themed` Tab 的所有原生属性
+- `TapasTab.Item` 直接复用 `@rneui Tab.Item`
+
+## 安装使用
+
+```tsx
+import { TapasTab } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| value | `number` | - | 当前选中标签索引（受控，必填） |
+| onChange | `(value: number) => void` | - | 标签切换回调（必填） |
+| widthMode | `'fill' \| 'content'` | `'fill'` | 宽度模式 |
+| minTabWidth | `number` | - | content 模式下标签最小宽度（像素） |
+| maxTabWidth | `number` | - | content 模式下标签最大宽度（像素） |
+| contentPadding | `number` | `16` | content 模式下标签水平内边距 |
+| showDivider | `boolean` | `true` | 是否显示底部分隔线（仅 content 模式） |
+| dividerColor | `string` | `'#e0e0e0'` | 底部分隔线颜色 |
+| containerStyle | `StyleProp<ViewStyle>` | - | 容器自定义样式 |
+| buttonStyle | `StyleProp<ViewStyle>` | - | 按钮自定义样式 |
+| indicatorStyle | `StyleProp<ViewStyle>` | - | 指示器自定义样式 |
+| titleStyle | `StyleProp<TextStyle>` | - | 标题文本自定义样式 |
+| children | `React.ReactElement<TabItemProps>[]` | - | TapasTab.Item 子组件 |
+
+## 使用示例
+
+### 基础平分模式（默认）
+
+```tsx
+import { TapasTab } from '@beppla/tapas-ui';
+import { useState } from 'react';
+
+export default function App() {
+  const [index, setIndex] = useState(0);
+
+  return (
+    <TapasTab value={index} onChange={setIndex}>
+      <TapasTab.Item title="Tab 1" />
+      <TapasTab.Item title="Tab 2" />
+      <TapasTab.Item title="Tab 3" />
+    </TapasTab>
+  );
+}
+```
+
+### 内容自适应模式
+
+```tsx
+<TapasTab value={index} onChange={setIndex} widthMode="content">
+  <TapasTab.Item title="Short" />
+  <TapasTab.Item title="Medium Length" />
+  <TapasTab.Item title="This is a very long tab label" />
+</TapasTab>
+```
+
+### 带最小/最大宽度控制
+
+```tsx
+<TapasTab
+  value={index}
+  onChange={setIndex}
+  widthMode="content"
+  minTabWidth={80}
+  maxTabWidth={180}
+>
+  <TapasTab.Item title="Short" />
+  <TapasTab.Item title="Medium" />
+  <TapasTab.Item title="Very long label text here" />
+</TapasTab>
+```
+
+### 自定义内边距
+
+```tsx
+<TapasTab
+  value={index}
+  onChange={setIndex}
+  widthMode="content"
+  contentPadding={30}
+>
+  <TapasTab.Item title="Home" />
+  <TapasTab.Item title="Products" />
+  <TapasTab.Item title="Orders" />
+</TapasTab>
+```
+
+### 实际应用场景（商品管理导航）
+
+```tsx
+import { TapasTab } from '@beppla/tapas-ui';
+import { useState } from 'react';
+import { View, Text } from 'react-native';
+
+const tabs = ['All', 'Pending', 'Published', 'Unpublished', 'Low Stock'];
+
+export default function ProductTabs() {
+  const [index, setIndex] = useState(0);
+
+  return (
+    <View>
+      <TapasTab
+        value={index}
+        onChange={setIndex}
+        widthMode="content"
+        minTabWidth={60}
+        contentPadding={20}
+      >
+        {tabs.map((tab, i) => (
+          <TapasTab.Item key={i} title={tab} />
+        ))}
+      </TapasTab>
+      <View style={{ padding: 16 }}>
+        <Text>{tabs[index]} content here</Text>
+      </View>
+    </View>
+  );
+}
+```
+
+### 自定义样式
+
+```tsx
+<TapasTab
+  value={index}
+  onChange={setIndex}
+  widthMode="fill"
+  containerStyle={{ backgroundColor: '#f5f5f5' }}
+  buttonStyle={{ paddingVertical: 12 }}
+  titleStyle={{ fontSize: 14, fontWeight: '600' }}
+  indicatorStyle={{ backgroundColor: '#1976d2', height: 3 }}
+>
+  <TapasTab.Item title="Tab 1" />
+  <TapasTab.Item title="Tab 2" />
+</TapasTab>
+```
+
+## 注意事项
+
+- `fill` 模式（默认）将标签平均分配容器宽度，与原生 `@rneui Tab` 行为一致
+- `content` 模式根据文本内容动态调整每个标签宽度，自动启用水平滚动
+- `minTabWidth` 和 `maxTabWidth` 仅在 `widthMode='content'` 时生效
+- `content` 模式下，`buttonStyle` 和 `titleStyle` 会自动注入到每个 `TapasTab.Item`
+- `showDivider` 仅在 `content` 模式下生效，通过外层 View 的 `borderBottomWidth` 实现
+- 在 `content` 模式下，文本自动设置为不换行（Web `whiteSpace: nowrap`）并显示省略号
+- `TapasTab.Item` 是 `@rneui Tab.Item` 的直接引用，支持所有 `TabItemProps`
+- `containerStyle` 在 `content` 模式下会自动追加 `width: '100%'`

package/module/Tag/README.md

@@ -0,0 +1,93 @@
+# Tag
+
+标签组件，用于标记和分类信息。支持关闭按钮、多种尺寸和禁用状态。
+
+## 功能特性
+
+- ✅ 支持三种尺寸：small（32px）、middle（36px）、large（40px）
+- ✅ 可选的关闭按钮，支持点击关闭回调
+- ✅ 支持禁用状态，禁用时关闭按钮不可点击
+- ✅ 文字超出宽度自动省略（可设置最大宽度）
+- ✅ 胶囊形圆角样式
+- ✅ 灰色背景，主题色文字
+- ✅ 使用 React.memo 优化渲染性能
+- ✅ 支持无障碍标签（accessibilityRole="button"）
+
+## 安装使用
+
+```tsx
+import Tag from '@beppla/tapas-ui/components/Tag/Tag';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| children | `React.ReactNode` | - | 标签内容 |
+| closable | `boolean` | `true` | 是否显示关闭按钮 |
+| onClose | `() => void` | - | 关闭按钮点击回调 |
+| style | `StyleProp<ViewStyle>` | - | 自定义容器样式 |
+| size | `'small' \| 'middle' \| 'large'` | `'large'` | 标签尺寸 |
+| textMaxWidth | `number` | `226` | 文字最大宽度 |
+| disabled | `boolean` | `false` | 是否禁用 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<Tag>标签文字</Tag>
+```
+
+### 可关闭标签
+
+```tsx
+<Tag closable onClose={() => console.log('closed')}>
+  可关闭
+</Tag>
+```
+
+### 不同尺寸
+
+```tsx
+<Tag size="small">Small</Tag>
+<Tag size="middle">Middle</Tag>
+<Tag size="large">Large</Tag>
+```
+
+### 禁用状态
+
+```tsx
+<Tag disabled>禁用标签</Tag>
+```
+
+### 标签列表（可删除）
+
+```tsx
+const [list, setList] = useState([
+  { name: '标签1', value: '1' },
+  { name: '标签2', value: '2' },
+]);
+
+<View style={{ flexDirection: 'row' }}>
+  {list.map((item, idx) => (
+    <Tag
+      key={item.value}
+      onClose={() => {
+        const newList = [...list];
+        newList.splice(idx, 1);
+        setList(newList);
+      }}
+    >
+      {item.name}
+    </Tag>
+  ))}
+</View>
+```
+
+## 注意事项
+
+- 默认 `closable` 为 `true`，如不需要关闭按钮请显式设置为 `false`
+- 禁用状态下关闭图标仍然显示，但不可点击
+- `textMaxWidth` 默认为 226，超出文字会被裁剪（overflow: hidden）
+- 标签之间默认有 `marginRight: 8` 和 `marginBottom: 8` 的间距