@beppla/tapas-ui 1.5.0 → 1.5.6

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` 的间距

package/module/Tag/Tag.js

@@ -62,7 +62,7 @@ const useStyles = makeStyles((theme, ...props) => {
   };
 });
 const Tag = ({
-  // @ts-ignore
+  // @ts-expect-error theme injected by withTheme HOC
   theme,
   ...props
 }) => {
@@ -83,6 +83,8 @@ const Tag = ({
           e.stopPropagation();
           props.onClose && props.onClose();
         },
+        accessibilityRole: "button",
+        accessibilityLabel: `Remove ${typeof props.children === 'string' ? props.children : 'tag'}`,
         children: /*#__PURE__*/_jsx(Icon, {
           name: "close",
           style: styles.closeIcon
@@ -94,5 +96,5 @@ const Tag = ({
     })]
   });
 };
-export default withTheme(Tag);
+export default withTheme(/*#__PURE__*/React.memo(Tag));
 //# sourceMappingURL=Tag.js.map

package/module/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","View","TouchableOpacity","makeStyles","withTheme","Text","RNText","Icon","jsx","_jsx","jsxs","_jsxs","useStyles","theme","props","size","textMaxWidth","disabled","height","fontSize","fonts","sizeM","iconSize","sizeS","tagWrap","marginRight","display","flexDirection","justifyContent","alignItems","borderRadius","paddingHorizontal","paddingVertical","marginBottom","backgroundColor","colors","grey4","textItem","fontFamily","fontWeight","weightR","color","colorTextPrimary","overflow","maxWidth","closeIcon","marginLeft","colorTextPlaceholder","Tag","styles","closable","style","testID","children","onPress","e","stopPropagation","onClose","name"],"sourceRoot":"../../../components","sources":["Tag/Tag.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Fragment","View","TouchableOpacity","makeStyles","withTheme","Text","RNText","Icon","jsx","_jsx","jsxs","_jsxs","useStyles","theme","props","size","textMaxWidth","disabled","height","fontSize","fonts","sizeM","iconSize","sizeS","tagWrap","marginRight","display","flexDirection","justifyContent","alignItems","borderRadius","paddingHorizontal","paddingVertical","marginBottom","backgroundColor","colors","grey4","textItem","fontFamily","fontWeight","weightR","color","colorTextPrimary","overflow","maxWidth","closeIcon","marginLeft","colorTextPlaceholder","Tag","styles","closable","style","testID","children","onPress","e","stopPropagation","onClose","accessibilityRole","accessibilityLabel","name","memo"],"sourceRoot":"../../../components","sources":["Tag/Tag.tsx"],"mappings":"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","ignoreList":[]}

package/module/Task/README.md

@@ -0,0 +1,110 @@
+# Task
+
+任务卡片组件（TaskCard），用于在甘特图或看板中展示任务的详细信息。包含标题、描述、状态标签、完成进度和时间范围，四种状态（Waiting / Ongoing / Delay / Completed）各有对应的颜色和样式。
+
+## 功能特性
+
+- ✅ 四种任务状态：Waiting（等待）、Ongoing（进行中）、Delay（延迟）、Completed（已完成）
+- ✅ 状态自动匹配颜色和背景（绿色/红色/蓝色/灰色）
+- ✅ 进度条背景色覆盖（左侧彩色边框 + 背景填充）
+- ✅ 多条描述文本展示（description 数组）
+- ✅ 完成百分比显示
+- ✅ 时间范围展示（开始时间 - 结束时间）
+- ✅ Completed 状态自动隐藏时间范围和状态标签
+- ✅ 支持自定义状态文本（statusText）和完成文本（completedText）
+- ✅ 卡片阴影效果
+- ✅ 主题色适配
+
+## 安装使用
+
+```tsx
+import { TaskCard } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| title | `string` | - | 任务标题（必填） |
+| description | `string[]` | - | 描述文本数组（必填） |
+| state | `keyof typeof TaskStatus` | - | 任务状态（必填） |
+| timeRange | `string[]` | - | 时间范围 [start, end]（必填） |
+| completion | `number` | - | 完成比例（0-1） |
+| statusText | `Record<keyof typeof TaskStatus, string>` | - | 自定义状态文本映射 |
+| completedText | `string` | - | 完成状态显示文本 |
+| style | `CSSProperties` | `{}` | 自定义外层样式 |
+
+### TaskStatus 枚举
+
+```tsx
+enum TaskStatus {
+  Waiting = 'Waiting',
+  Ongoing = 'Ongoing',
+  Delay = 'Delay',
+  Completed = 'Completed',
+}
+```
+
+## 使用示例
+
+### 进行中的任务
+
+```tsx
+<TaskCard
+  title="Kitchen preparation"
+  description={['Table 5', 'Main course']}
+  state="Ongoing"
+  timeRange={['09:00', '10:30']}
+  completion={0.6}
+/>
+```
+
+### 延迟任务
+
+```tsx
+<TaskCard
+  title="Delivery order #123"
+  description={['Customer: John', 'Priority: High']}
+  state="Delay"
+  timeRange={['14:00', '15:00']}
+  completion={0.3}
+/>
+```
+
+### 已完成任务
+
+```tsx
+<TaskCard
+  title="Inventory check"
+  description={['Warehouse A']}
+  state="Completed"
+  timeRange={['08:00', '09:00']}
+  completedText="Done"
+/>
+```
+
+### 自定义状态文本
+
+```tsx
+<TaskCard
+  title="Task"
+  description={['Info']}
+  state="Waiting"
+  timeRange={['10:00', '11:00']}
+  statusText={{
+    Waiting: 'Pending',
+    Ongoing: 'In Progress',
+    Delay: 'Overdue',
+    Completed: 'Finished',
+  }}
+/>
+```
+
+## 注意事项
+
+- 组件使用 HTML div + span 元素，仅适用于 Web 平台
+- `completion` 值范围 0-1，Completed 状态自动设为 1，Waiting 状态自动设为 0
+- 进度背景宽度通过 CSS calc 计算：`calc(completion * 100% + 28px)`
+- 描述文本超长会自动省略（text-overflow: ellipsis）
+- 卡片使用 @rneui/themed 的 Card 组件，带有 boxShadow 效果
+- 需在 `ThemeProvider` 内使用

package/module/Text/README.md

@@ -0,0 +1,97 @@
+# Text
+
+可交互的文本标签组件，支持选中状态、悬停效果、多种尺寸和两种视觉类型。适用于筛选标签、价格区间选择、分类标签等场景，非通用 Text 组件。
+
+## 功能特性
+
+- ✅ 两种视觉类型：primary（填充灰色背景）和 secondary（边框样式）
+- ✅ 三种尺寸模式：standard (40px) / medium (36px) / small (32px)
+- ✅ 选中状态：primary 变为主题色背景+白字，secondary 显示主题色边框
+- ✅ 鼠标悬停效果（仅 Web 端，Hoverable 实现）
+- ✅ 禁用状态，颜色置灰，渲染为不可交互的 Text
+- ✅ 支持点击事件
+- ✅ 文本单行截断（numberOfLines=1）
+- ✅ 继承 @rneui/themed TextProps
+- ✅ 圆角样式（theme.radius.rounded）
+
+## 安装使用
+
+```tsx
+import Text from '@beppla/tapas-ui/components/Text/Text';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| children | `React.ReactNode` | - | 文本内容 |
+| mode | `'standard' \| 'medium' \| 'small'` | - | 尺寸模式，影响高度和字号 |
+| type | `'primary' \| 'secondary'` | `'primary'` | 视觉类型 |
+| selected | `boolean` | `false` | 是否选中 |
+| disabled | `boolean` | - | 是否禁用 |
+| onPress | `() => void` | - | 点击回调 |
+| hoverStyle | `StyleProp<ViewStyle>` | - | 自定义悬停样式 |
+| style | 继承自 TextProps | - | 自定义样式 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<Text mode="standard">Hello World</Text>
+```
+
+### 不同尺寸
+
+```tsx
+<Text mode="standard" style={{ width: 200 }}>Standard (40px)</Text>
+<Text mode="medium" style={{ width: 160 }}>Medium (36px)</Text>
+<Text mode="small" style={{ width: 100 }}>Small (32px)</Text>
+```
+
+### Secondary 类型
+
+```tsx
+<Text mode="standard" type="secondary">边框样式</Text>
+<Text mode="medium" type="secondary" selected>选中状态</Text>
+```
+
+### 选中与禁用
+
+```tsx
+<Text mode="small" selected>已选中（Primary）</Text>
+<Text mode="medium" disabled>已禁用</Text>
+<Text mode="small" type="secondary" disabled>禁用边框</Text>
+```
+
+### 带点击事件
+
+```tsx
+<Text mode="standard" onPress={() => console.log('Clicked')}>
+  可点击标签
+</Text>
+```
+
+### 动态选择
+
+```tsx
+const [selected, setSelected] = useState(false);
+
+<Text
+  mode="standard"
+  selected={selected}
+  onPress={() => setSelected(!selected)}
+>
+  切换选择状态
+</Text>
+```
+
+## 注意事项
+
+- 该组件是专用的**标签/筛选按钮组件**，非通用文本渲染组件
+- 禁用状态下不渲染 TouchableOpacity，直接渲染为普通 RNText
+- Web 端通过 Hoverable 实现悬停效果，Native 端无悬停
+- `selected` 状态受外部控制，内部通过 `useEffect` 同步
+- `mode` 属性决定高度和字号：standard=40px、medium=36px、small=32px（small 字号也更小）
+- primary 类型选中时背景变为主色+白字，secondary 类型选中时添加主色边框
+- 组件使用 `@rneui/themed` 主题系统，需在 ThemeProvider 内使用

package/module/TextArea/README.md

@@ -0,0 +1,127 @@
+# TextArea
+
+多行文本输入组件，支持浮动标签、字符计数、清空按钮和错误状态等功能。
+
+## 功能特性
+
+- ✅ 支持多行文本输入
+- ✅ 浮动标签动画（聚焦/有内容时标签上移）
+- ✅ 字符计数功能（显示当前字数/最大字数）
+- ✅ 一键清空按钮
+- ✅ 必填标识（红色星号）
+- ✅ 错误状态（红色边框 + 错误提示文字）
+- ✅ 聚焦时边框变粗并使用主题色
+- ✅ 可自定义高度、行数和背景色
+- ✅ 支持禁用状态
+- ✅ 兼容 RN 0.77 Bridgeless 模式（Android 焦点管理修复）
+
+## 安装使用
+
+```tsx
+import TextArea from '@beppla/tapas-ui/components/TextArea/TextArea';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| height | `number` | `88` | 输入框高度 |
+| label | `string` | - | 浮动标签文字 |
+| showCount | `boolean` | `false` | 是否显示字符计数 |
+| showClearBtn | `boolean` | `false` | 是否显示清空按钮 |
+| value | `string` | - | 输入框内容 |
+| numberOfLines | `number` | `4` | 显示行数 |
+| maxCount | `number` | `100` | 最大字符数（仅用于计数显示） |
+| placeholder | `string` | - | 占位文字 |
+| required | `boolean` | `false` | 是否必填（显示红色星号） |
+| onChangeText | `(value: string) => void` | - | 内容变化回调 |
+| backgroundColor | `string` | - | 标签背景色 |
+| state | `'normal' \| 'error'` | `'normal'` | 状态 |
+| stateMsg | `string` | - | 状态提示信息 |
+| disabled | `boolean` | - | 是否禁用 |
+| enableBridgelessFix | `boolean` | `true` | 是否启用 RN 0.77 Bridgeless 模式兼容修复 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<TextArea
+  label="描述"
+  placeholder="请输入详细描述..."
+/>
+```
+
+### 带字符计数
+
+```tsx
+<TextArea
+  label="产品描述"
+  placeholder="请详细描述产品特性..."
+  showCount={true}
+  maxCount={150}
+  required={true}
+/>
+```
+
+### 带清空按钮
+
+```tsx
+<TextArea
+  label="备注信息"
+  placeholder="请输入备注..."
+  showClearBtn={true}
+  value="示例文本"
+/>
+```
+
+### 错误状态
+
+```tsx
+<TextArea
+  label="必填字段"
+  placeholder="此字段不能为空"
+  required={true}
+  state="error"
+  stateMsg="请输入有效的内容"
+  showCount={true}
+  maxCount={100}
+/>
+```
+
+### 完整功能
+
+```tsx
+const [value, setValue] = useState('');
+
+<TextArea
+  label="用户反馈"
+  placeholder="请详细描述您遇到的问题..."
+  required={true}
+  showCount={true}
+  showClearBtn={true}
+  maxCount={300}
+  numberOfLines={6}
+  height={120}
+  value={value}
+  onChangeText={setValue}
+/>
+```
+
+### 禁用状态
+
+```tsx
+<TextArea
+  label="只读内容"
+  value="这是只读的文本内容"
+  disabled={true}
+/>
+```
+
+## 注意事项
+
+- `maxCount` 仅用于计数显示，不会限制实际输入字数
+- 当设置 `label` 时，`placeholder` 会在未聚焦且无内容时作为标签文字显示
+- 不设置 `label` 时，`placeholder` 作为普通占位符显示
+- 容器高度会根据 `height`、`numberOfLines`、`label` 和 `showCount` 自动计算
+- Android 上启用了 Bridgeless 模式兼容修复，如遇焦点异常可设置 `enableBridgelessFix={false}`

package/module/TextArea/TextArea.js

@@ -17,6 +17,7 @@ const TextArea = ({
   required = false,
   maxCount = 100,
   onChangeText,
+  attachChange,
   backgroundColor,
   state = "normal",
   disabled,
@@ -91,10 +92,11 @@ const TextArea = ({
       }
     };
   }, [enableBridgelessFix]);
+  const changeHandler = onChangeText ?? attachChange;
   const handleChangeText = useCallback(newText => {
     setText(newText);
-    onChangeText?.(newText);
-  }, [onChangeText]);
+    changeHandler?.(newText);
+  }, [changeHandler]);
   const handleClear = useCallback(() => {
     handleChangeText("");
   }, [handleChangeText]);