@beppla/tapas-ui 1.5.13 → 1.5.15

package/package/module/SheetTitle/README.md

@@ -0,0 +1,89 @@
+# SheetTitle
+
+底部 Sheet 标题栏组件，用于底部弹窗或模态框的顶部区域。包含标题文本、关闭按钮和可选的清空按钮，适合筛选面板、选择器等场景的标题栏。
+
+## 功能特性
+
+- ✅ 标题文本展示，超长自动截断
+- ✅ 关闭按钮（默认显示，可隐藏）
+- ✅ 可选清空按钮（showClear）
+- ✅ 自定义关闭图标（字符串图标名或 ReactNode）
+- ✅ 自定义清空按钮文本
+- ✅ 底部分割线
+- ✅ 全面的样式自定义（标题栏、标题文本、清空按钮、关闭按钮）
+- ✅ React.memo 优化性能
+
+## 安装使用
+
+```tsx
+import { SheetTitle } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| title | `string` | - | 标题文本 |
+| icon | `React.ReactNode \| string` | `'close'` | 关闭按钮图标 |
+| showClear | `Boolean` | - | 是否显示清空按钮 |
+| showClose | `Boolean` | `true` | 是否显示关闭按钮 |
+| clearText | `string` | `'Clear'` | 清空按钮文本 |
+| onClear | `() => void` | - | 清空按钮回调 |
+| onClose | `() => void` | - | 关闭按钮回调 |
+| titleContainerStyle | `StyleProp<ViewStyle>` | - | 标题栏容器样式 |
+| titleStyle | `StyleProp<ViewStyle>` | - | 标题文本样式 |
+| clearStyle | `StyleProp<ViewStyle>` | - | 清空按钮样式 |
+| closeStyle | `StyleProp<ViewStyle>` | - | 关闭按钮样式 |
+| testID | `string` | - | 测试标识 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<SheetTitle
+  title="Filter Options"
+  onClose={() => setVisible(false)}
+/>
+```
+
+### 带清空按钮
+
+```tsx
+<SheetTitle
+  title="Select Category"
+  showClear
+  clearText="Reset"
+  onClear={() => handleReset()}
+  onClose={() => setVisible(false)}
+/>
+```
+
+### 自定义图标
+
+```tsx
+<SheetTitle
+  title="Settings"
+  icon="arrow_back"
+  onClose={() => navigation.goBack()}
+/>
+```
+
+### 自定义 ReactNode 图标
+
+```tsx
+<SheetTitle
+  title="Details"
+  icon={<CustomCloseIcon />}
+  onClose={() => setVisible(false)}
+/>
+```
+
+## 注意事项
+
+- 标题栏固定高度 40px，宽度 100%
+- 标题文本使用 `flex: 1` 自动撑满可用空间，超长文本截断
+- `icon` 为字符串时渲染 TapasIcon，为 ReactNode 时直接渲染
+- 清空按钮使用 Button 组件的 clear 类型
+- 底部有 1px 分割线（borderBottomColor: greyOutline）
+- 需在 `ThemeProvider` 内使用

package/package/module/Shell/README.md

@@ -0,0 +1,152 @@
+# Shell
+
+外壳布局组件，提供主内容区域和侧边抽屉的两栏布局，使用复合组件模式（Shell.Main + Shell.Drawer），抽屉支持弹簧动画展开/折叠。
+
+## 功能特性
+
+- 两栏布局：主内容区（Shell.Main）+ 侧边抽屉（Shell.Drawer）
+- 复合组件模式，声明式使用 Shell.Main 和 Shell.Drawer
+- 抽屉展开/折叠使用 `Animated.spring` 弹簧动画
+- 可自定义抽屉宽度（默认 150px）
+- 可选的顶部和左侧边框线
+- 支持受控模式（`openDrawer` 属性）
+- 支持自定义容器样式
+
+## 安装使用
+
+```tsx
+import { Shell } from '@beppla/tapas-ui';
+```
+
+## Props
+
+### Shell
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| children | `React.ReactNode` | - | 必须包含 Shell.Main 和 Shell.Drawer 子组件 |
+| openDrawer | `boolean` | `false` | 抽屉是否展开 |
+| drawerWidth | `number` | `150` | 抽屉展开时的宽度（像素） |
+| border | `boolean` | `true` | 是否显示边框线（顶部和左侧） |
+| style | `any` | - | 容器自定义样式 |
+| testID | `string` | - | 测试 ID |
+| theme | `any` | - | 主题对象（自动注入） |
+
+### Shell.Main
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| children | `React.ReactNode` | - | 主内容区域 |
+| style | `any` | - | 自定义样式 |
+| theme | `any` | - | 主题对象（自动注入） |
+
+### Shell.Drawer
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| children | `React.ReactNode` | - | 侧边抽屉内容 |
+| style | `any` | - | 自定义样式 |
+| theme | `any` | - | 主题对象（自动注入） |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+import Shell from '@beppla/tapas-ui/components/Shell/Shell';
+import { useState } from 'react';
+import { View, Text, Button } from 'react-native';
+
+export default function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Shell openDrawer={open}>
+      <Shell.Main>
+        <View style={{ padding: 16 }}>
+          <Text>Main Content</Text>
+          <Button title="Toggle Drawer" onPress={() => setOpen(!open)} />
+        </View>
+      </Shell.Main>
+      <Shell.Drawer>
+        <View style={{ padding: 16 }}>
+          <Text>Drawer Content</Text>
+        </View>
+      </Shell.Drawer>
+    </Shell>
+  );
+}
+```
+
+### 自定义抽屉宽度
+
+```tsx
+<Shell openDrawer={open} drawerWidth={280}>
+  <Shell.Main>
+    <Text>Main content with wider drawer</Text>
+  </Shell.Main>
+  <Shell.Drawer>
+    <Text>280px wide drawer</Text>
+  </Shell.Drawer>
+</Shell>
+```
+
+### 无边框模式
+
+```tsx
+<Shell openDrawer={open} border={false} drawerWidth={200}>
+  <Shell.Main>
+    <Text>No border content</Text>
+  </Shell.Main>
+  <Shell.Drawer>
+    <Text>No border drawer</Text>
+  </Shell.Drawer>
+</Shell>
+```
+
+### POS 订单详情场景
+
+```tsx
+import Shell from '@beppla/tapas-ui/components/Shell/Shell';
+import { useState } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+
+export default function OrderPage() {
+  const [showDetail, setShowDetail] = useState(false);
+
+  return (
+    <View style={{ height: 600 }}>
+      <Shell openDrawer={showDetail} drawerWidth={320}>
+        <Shell.Main>
+          <ScrollView style={{ padding: 16 }}>
+            <Text>Order List</Text>
+            <Button
+              title="View Details"
+              onPress={() => setShowDetail(true)}
+            />
+          </ScrollView>
+        </Shell.Main>
+        <Shell.Drawer>
+          <View style={{ padding: 16 }}>
+            <Text>Order #12345 Details</Text>
+            <Button
+              title="Close"
+              onPress={() => setShowDetail(false)}
+            />
+          </View>
+        </Shell.Drawer>
+      </Shell>
+    </View>
+  );
+}
+```
+
+## 注意事项
+
+- Shell 必须包含 `Shell.Main` 和 `Shell.Drawer` 作为直接子组件，组件通过 `React.Children.forEach` 匹配子组件类型
+- 抽屉动画使用 `Animated.spring`（tension: 300, friction: 20），关闭时宽度动画至 0
+- `openDrawer` 为受控属性，外部状态变化会触发动画
+- 默认抽屉宽度为 150px（`defaultDrawerWidth` 常量）
+- `border=true` 时，主内容区顶部有边框线，抽屉区顶部和左侧有边框线
+- 边框颜色使用主题的 `greyOutline` 色值，默认为 `rgba(0, 0, 0, 0.12)`
+- `ShellPorps` 为已废弃的拼写错误别名，请使用 `ShellProps`

package/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/package/module/StatisticCard/StatisticCard.js

@@ -0,0 +1,123 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import Text from '../Text/Text';
+import Card from '../Card/Card';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StatisticCardComponent = ({
+  title,
+  value,
+  prefix = '',
+  suffix = '',
+  trend,
+  description,
+  icon,
+  color = '#FF6B00',
+  onPress,
+  loading = false,
+  style
+}) => {
+  const Container = onPress ? TouchableOpacity : View;
+  const getTrendColor = () => {
+    if (!trend) return undefined;
+    return trend.isPositive !== false ? '#00B894' : '#D63031';
+  };
+  const getTrendSymbol = () => {
+    if (!trend) return '';
+    return trend.isPositive !== false ? '+' : '';
+  };
+  return /*#__PURE__*/_jsx(Container, {
+    onPress: onPress,
+    disabled: !onPress,
+    activeOpacity: 0.7,
+    children: /*#__PURE__*/_jsxs(Card, {
+      cardId: "statistic-card",
+      style: [styles.container, style],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.header,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          children: title
+        }), icon && /*#__PURE__*/_jsx(View, {
+          style: styles.iconContainer,
+          children: icon
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.content,
+        children: loading ? /*#__PURE__*/_jsx(Text, {
+          style: styles.loading,
+          children: "Loading..."
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: [styles.value, {
+              color
+            }],
+            children: [prefix, value, suffix]
+          }), trend && /*#__PURE__*/_jsx(View, {
+            style: styles.trendContainer,
+            children: /*#__PURE__*/_jsxs(Text, {
+              style: [styles.trend, {
+                color: getTrendColor()
+              }],
+              children: [getTrendSymbol(), trend.value.toFixed(1), "%"]
+            })
+          }), description && /*#__PURE__*/_jsx(Text, {
+            style: styles.description,
+            children: description
+          })]
+        })
+      })]
+    })
+  });
+};
+export const StatisticCard = /*#__PURE__*/React.memo(StatisticCardComponent);
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    minHeight: 120
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12
+  },
+  title: {
+    fontSize: 14,
+    color: '#7F8C8D',
+    fontWeight: '500'
+  },
+  iconContainer: {
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  content: {
+    flex: 1
+  },
+  value: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    marginBottom: 4
+  },
+  loading: {
+    fontSize: 16,
+    color: '#999'
+  },
+  trendContainer: {
+    marginTop: 4,
+    marginBottom: 8
+  },
+  trend: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  description: {
+    fontSize: 12,
+    color: '#95A5A6',
+    marginTop: 4
+  }
+});
+//# sourceMappingURL=StatisticCard.js.map

package/package/module/StatisticCard/StatisticCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","TouchableOpacity","Text","Card","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StatisticCardComponent","title","value","prefix","suffix","trend","description","icon","color","onPress","loading","style","Container","getTrendColor","undefined","isPositive","getTrendSymbol","disabled","activeOpacity","children","cardId","styles","container","header","iconContainer","content","trendContainer","toFixed","StatisticCard","memo","create","padding","minHeight","flexDirection","justifyContent","alignItems","marginBottom","fontSize","fontWeight","width","height","flex","marginTop"],"sourceRoot":"../../../components","sources":["StatisticCard/StatisticCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,EAAEC,gBAAgB,QAAQ,cAAc;AACjE,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,IAAI,MAAM,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAmBhC,MAAMC,sBAAoD,GAAGA,CAAC;EAC5DC,KAAK;EACLC,KAAK;EACLC,MAAM,GAAG,EAAE;EACXC,MAAM,GAAG,EAAE;EACXC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,KAAK,GAAG,SAAS;EACjBC,OAAO;EACPC,OAAO,GAAG,KAAK;EACfC;AACF,CAAC,KAAK;EACJ,MAAMC,SAAc,GAAGH,OAAO,GAAGlB,gBAAgB,GAAGF,IAAI;EAExD,MAAMwB,aAAa,GAAGA,CAAA,KAAM;IAC1B,IAAI,CAACR,KAAK,EAAE,OAAOS,SAAS;IAC5B,OAAOT,KAAK,CAACU,UAAU,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS;EAC3D,CAAC;EAED,MAAMC,cAAc,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACX,KAAK,EAAE,OAAO,EAAE;IACrB,OAAOA,KAAK,CAACU,UAAU,KAAK,KAAK,GAAG,GAAG,GAAG,EAAE;EAC9C,CAAC;EAED,oBACEpB,IAAA,CAACiB,SAAS;IAACH,OAAO,EAAEA,OAAQ;IAACQ,QAAQ,EAAE,CAACR,OAAQ;IAACS,aAAa,EAAE,GAAI;IAAAC,QAAA,eAClEtB,KAAA,CAACJ,IAAI;MAAC2B,MAAM,EAAC,gBAAgB;MAACT,KAAK,EAAE,CAACU,MAAM,CAACC,SAAS,EAAEX,KAAK,CAAE;MAAAQ,QAAA,gBAC7DtB,KAAA,CAACR,IAAI;QAACsB,KAAK,EAAEU,MAAM,CAACE,MAAO;QAAAJ,QAAA,gBACzBxB,IAAA,CAACH,IAAI;UAACmB,KAAK,EAAEU,MAAM,CAACpB,KAAM;UAAAkB,QAAA,EAAElB;QAAK,CAAO,CAAC,EACxCM,IAAI,iBAAIZ,IAAA,CAACN,IAAI;UAACsB,KAAK,EAAEU,MAAM,CAACG,aAAc;UAAAL,QAAA,EAAEZ;QAAI,CAAO,CAAC;MAAA,CACrD,CAAC,eAEPZ,IAAA,CAACN,IAAI;QAACsB,KAAK,EAAEU,MAAM,CAACI,OAAQ;QAAAN,QAAA,EACzBT,OAAO,gBACNf,IAAA,CAACH,IAAI;UAACmB,KAAK,EAAEU,MAAM,CAACX,OAAQ;UAAAS,QAAA,EAAC;QAAU,CAAM,CAAC,gBAE9CtB,KAAA,CAAAE,SAAA;UAAAoB,QAAA,gBACEtB,KAAA,CAACL,IAAI;YAACmB,KAAK,EAAE,CAACU,MAAM,CAACnB,KAAK,EAAE;cAAEM;YAAM,CAAC,CAAE;YAAAW,QAAA,GACpChB,MAAM,EAAED,KAAK,EAAEE,MAAM;UAAA,CAClB,CAAC,EAENC,KAAK,iBACJV,IAAA,CAACN,IAAI;YAACsB,KAAK,EAAEU,MAAM,CAACK,cAAe;YAAAP,QAAA,eACjCtB,KAAA,CAACL,IAAI;cAACmB,KAAK,EAAE,CAACU,MAAM,CAAChB,KAAK,EAAE;gBAAEG,KAAK,EAAEK,aAAa,CAAC;cAAE,CAAC,CAAE;cAAAM,QAAA,GACrDH,cAAc,CAAC,CAAC,EAAEX,KAAK,CAACH,KAAK,CAACyB,OAAO,CAAC,CAAC,CAAC,EAAC,GAC5C;YAAA,CAAM;UAAC,CACH,CACP,EAEArB,WAAW,iBACVX,IAAA,CAACH,IAAI;YAACmB,KAAK,EAAEU,MAAM,CAACf,WAAY;YAAAa,QAAA,EAAEb;UAAW,CAAO,CACrD;QAAA,CACD;MACH,CACG,CAAC;IAAA,CACH;EAAC,CACE,CAAC;AAEhB,CAAC;AAED,OAAO,MAAMsB,aAAa,gBAAGxC,KAAK,CAACyC,IAAI,CAAC7B,sBAAsB,CAAC;AAE/D,MAAMqB,MAAM,GAAG/B,UAAU,CAACwC,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,OAAO,EAAE,EAAE;IACXC,SAAS,EAAE;EACb,CAAC;EACDT,MAAM,EAAE;IACNU,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BC,UAAU,EAAE,QAAQ;IACpBC,YAAY,EAAE;EAChB,CAAC;EACDnC,KAAK,EAAE;IACLoC,QAAQ,EAAE,EAAE;IACZ7B,KAAK,EAAE,SAAS;IAChB8B,UAAU,EAAE;EACd,CAAC;EACDd,aAAa,EAAE;IACbe,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVN,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDV,OAAO,EAAE;IACPgB,IAAI,EAAE;EACR,CAAC;EACDvC,KAAK,EAAE;IACLmC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBF,YAAY,EAAE;EAChB,CAAC;EACD1B,OAAO,EAAE;IACP2B,QAAQ,EAAE,EAAE;IACZ7B,KAAK,EAAE;EACT,CAAC;EACDkB,cAAc,EAAE;IACdgB,SAAS,EAAE,CAAC;IACZN,YAAY,EAAE;EAChB,CAAC;EACD/B,KAAK,EAAE;IACLgC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE;EACd,CAAC;EACDhC,WAAW,EAAE;IACX+B,QAAQ,EAAE,EAAE;IACZ7B,KAAK,EAAE,SAAS;IAChBkC,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}