@beppla/tapas-ui 1.5.2 → 1.5.6

package/commonjs/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/commonjs/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/commonjs/Switch/Switch.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _themed = require("@rneui/themed");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const TapasSwitch = ({
+  trackColor,
+  thumbColor,
+  width = 56,
+  height = 32,
+  onValueChange,
+  value,
+  disabled,
+  testID,
+  containerStyle
+}) => {
+  const styles = useStyles();
+  const leftAnim = (0, _react.useRef)(new _reactNative.Animated.Value(value ? width - height - 1 : 3)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(leftAnim, {
+      toValue: value ? width - height - 1 : 3,
+      duration: 200,
+      useNativeDriver: false
+    }).start();
+  }, [value, width, height, leftAnim]);
+  const thumbSize = height - 6;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, containerStyle],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [{
+          width: thumbSize,
+          height: thumbSize,
+          borderRadius: thumbSize / 2,
+          backgroundColor: thumbColor ?? styles.thumb.backgroundColor,
+          transform: [{
+            translateX: leftAnim
+          }]
+        }, !disabled && styles.shadow]
+      })
+    })
+  });
+};
+const useStyles = (0, _themed.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
+  }
+}));
+var _default = exports.default = (0, _themed.withTheme)(/*#__PURE__*/_react.default.memo(TapasSwitch));
+//# sourceMappingURL=Switch.js.map

package/commonjs/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_themed","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TapasSwitch","trackColor","thumbColor","width","height","onValueChange","value","disabled","testID","containerStyle","styles","useStyles","leftAnim","useRef","Animated","Value","current","useEffect","timing","toValue","duration","useNativeDriver","start","thumbSize","jsx","View","style","container","children","TouchableOpacity","activeOpacity","onPress","track","borderRadius","backgroundColor","true","disabledOnBg","onBg","false","disabledOffBg","offBg","opacity","thumb","transform","translateX","shadow","makeStyles","theme","justifyContent","alignItems","padding","position","colors","success","grey3","grey4","white","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","_default","exports","withTheme","React","memo"],"sourceRoot":"../../../components","sources":["Switch/Switch.tsx"],"mappings":"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","ignoreList":[]}

package/commonjs/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/commonjs/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/commonjs/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` 内使用