@beppla/tapas-ui 1.5.2 → 1.5.6

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

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}`