@beppla/tapas-ui 1.5.12 → 1.5.13

package/package/module/Navigation/README.md

@@ -1,197 +0,0 @@
-# Navigation
-
-侧边导航栏组件，提供可展开/折叠的垂直导航菜单。支持导航项（navItems）和系统项（systemItems）两层分组，收起时仅显示图标，展开时显示图标和文本。
-
-## 功能特性
-
-- 可展开/折叠的侧边导航（收起 56px，展开 336px）
-- 导航项和系统项两层分组（系统项固定在底部）
-- 点击 Logo 切换展开/折叠状态
-- 选中项高亮显示（展开时背景高亮，收起时图标高亮）
-- 移动端支持背景遮罩层（点击遮罩关闭导航）
-- 可配置权限信息（`permissions` 字段）
-- 支持 `selectedIndex` 受控选中
-- 可选集成 React Navigation 自动路由导航
-- 自定义 Logo 图片
-
-## 安装使用
-
-```tsx
-import { Navigation, NavItem, NavItemType, SelectedItem } from '@beppla/tapas-ui';
-```
-
-## Props
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| navItems | `NavItem[]` | - | 导航项数组 |
-| systemItems | `NavItem[]` | - | 系统项数组（显示在底部） |
-| logoImg | `ImageSourcePropType` | - | Logo 图片资源 |
-| expanded | `boolean` | `false` | 是否展开导航菜单 |
-| onItemPress | `(item: NavItem) => void` | - | 导航项点击回调 |
-| onLogoPress | `() => void` | - | Logo 点击回调 |
-| defaultSelectedItem | `SelectedItem` | - | 默认选中项 |
-| selectedIndex | `number` | - | 选中项索引（受控模式，仅匹配 navItems） |
-| visible | `boolean` | `true` | 导航栏是否可见 |
-| onMaskPress | `() => void` | - | 背景遮罩点击回调（移动端） |
-| navigation | `{ navigate: (routeName: string, params?: any) => void }` | - | React Navigation 对象（可选） |
-
-## 类型定义
-
-### NavItem
-
-```tsx
-interface NavItem {
-  name: string;              // 项目名称（展开时显示）
-  iconName: string;          // TapasIcon 图标名称
-  url?: string;              // 链接 URL（可选）
-  permissions?: Permissions[]; // 权限要求（可选）
-}
-```
-
-### Permissions
-
-```tsx
-interface Permissions {
-  resource: string;  // 资源名
-  action: string;    // 操作名
-}
-```
-
-### NavItemType / SelectedItem
-
-```tsx
-enum NavItemType {
-  Nav = 'nav',       // 导航项
-  System = 'system', // 系统项
-}
-
-interface SelectedItem {
-  type: NavItemType;         // 项目类型
-  selectedItemIndex: number; // 项目索引
-}
-```
-
-## 使用示例
-
-### 基础导航
-
-```tsx
-import { Navigation, NavItem, NavItemType } from '@beppla/tapas-ui';
-
-const navItems: NavItem[] = [
-  { name: 'Dashboard', iconName: 'home' },
-  { name: 'Analytics', iconName: 'vector' },
-  { name: 'Products', iconName: 'product_items' },
-  { name: 'Messages', iconName: 'chat' },
-];
-
-const systemItems: NavItem[] = [
-  { name: 'Settings', iconName: 'settings' },
-  { name: 'Refresh', iconName: 'refresh' },
-];
-
-export default function App() {
-  return (
-    <Navigation
-      navItems={navItems}
-      systemItems={systemItems}
-      logoImg={require('./logo.png')}
-      defaultSelectedItem={{
-        type: NavItemType.Nav,
-        selectedItemIndex: 0,
-      }}
-    />
-  );
-}
-```
-
-### 带点击回调
-
-```tsx
-<Navigation
-  navItems={navItems}
-  systemItems={systemItems}
-  logoImg={require('./logo.png')}
-  onItemPress={(item) => {
-    console.log('Selected:', item.name);
-    setCurrentPage(item.name);
-  }}
-/>
-```
-
-### 受控选中索引
-
-```tsx
-const [selectedIdx, setSelectedIdx] = useState(0);
-
-<Navigation
-  navItems={navItems}
-  systemItems={systemItems}
-  logoImg={require('./logo.png')}
-  selectedIndex={selectedIdx}
-  onItemPress={(item) => {
-    const idx = navItems.findIndex(n => n.name === item.name);
-    if (idx >= 0) setSelectedIdx(idx);
-  }}
-/>
-```
-
-### 与 React Navigation 集成
-
-```tsx
-import { useNavigation } from '@react-navigation/native';
-
-const navigation = useNavigation();
-
-<Navigation
-  navItems={[
-    { name: 'Home', iconName: 'home' },
-    { name: 'Details', iconName: 'info' },
-  ]}
-  logoImg={require('./logo.png')}
-  navigation={navigation}
-/>
-```
-
-### 完整布局示例
-
-```tsx
-import { View, Text } from 'react-native';
-import { Navigation, NavItem } from '@beppla/tapas-ui';
-import { useState } from 'react';
-
-const navItems: NavItem[] = [
-  { name: 'Dashboard', iconName: 'home' },
-  { name: 'Products', iconName: 'product_items' },
-  { name: 'Orders', iconName: 'manufacturing' },
-];
-
-export default function App() {
-  const [page, setPage] = useState('Dashboard');
-
-  return (
-    <View style={{ flexDirection: 'row', height: '100%' }}>
-      <Navigation
-        navItems={navItems}
-        logoImg={require('./logo.png')}
-        onItemPress={(item) => setPage(item.name)}
-      />
-      <View style={{ flex: 1, padding: 16 }}>
-        <Text>{page} Content</Text>
-      </View>
-    </View>
-  );
-}
-```
-
-## 注意事项
-
-- 导航栏默认收起状态（宽度 56px），点击 Logo 切换展开（336px）/折叠
-- 桌面端点击 Logo 触发 `onLogoPress` 并切换展开状态；移动端点击 Logo 触发 `onMaskPress`
-- 展开时会在导航栏外显示半透明遮罩层（`rgba(0,0,0,0.5)`），点击遮罩可关闭
-- `selectedIndex` 仅匹配 `navItems` 数组，不支持直接选中 `systemItems`
-- 设置 `navigation` 属性后，点击导航项会自动调用 `navigation.navigate(item.name)`
-- 导航项图标大小固定 20px，颜色为主题 `white`
-- 选中状态：展开时背景高亮（`secondary` 色），收起时图标容器高亮
-- `visible=false` 时整个导航栏不渲染

package/package/module/Notification/README.md

@@ -1,158 +0,0 @@
-# TapasNotification
-
-A side notification panel component with expand/collapse animation and item selection functionality.
-
-## Features
-
-- **Expandable Side Panel**: Smooth expand/collapse animation
-- **Notification List**: Display multiple notification items with icons
-- **Item Selection**: Highlight selected items with visual feedback
-- **Customizable**: Configurable title, empty state, and animations
-- **Responsive**: Adapts to different screen sizes and orientations
-
-## Usage
-
-```tsx
-import { TapasNotification, NotificationItem } from '@beppla/tapas-ui';
-
-const notifications: NotificationItem[] = [
-  { id: 1, title: 'System Update Available', icon: 'system_update' },
-  { id: 2, title: 'New Message from John', icon: 'message' },
-];
-
-const MyComponent = () => {
-  const [open, setOpen] = useState(false);
-  const [selectedItem, setSelectedItem] = useState<number | string>();
-
-  const handleSelectItem = (item: NotificationItem) => {
-    setSelectedItem(item.id);
-    console.log('Selected:', item);
-  };
-
-  return (
-    <TapasNotification
-      open={open}
-      title="Notifications"
-      items={notifications}
-      selectedItem={selectedItem}
-      onSelectItem={handleSelectItem}
-      onHeaderButtonPress={() => setOpen(!open)}
-    />
-  );
-};
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `open` | `boolean` | `false` | Controls whether the notification panel is expanded |
-| `title` | `string` | `'Notification'` | The title displayed in the header |
-| `emptyText` | `string` | `'No Data'` | Text displayed when there are no notification items |
-| `headerTitleStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the header title |
-| `hideHeaderButton` | `boolean` | `false` | Whether to hide the header action button |
-| `items` | `NotificationItem[]` | `[]` | Array of notification items to display |
-| `selectedItem` | `number \| string` | `undefined` | ID of the currently selected item |
-| `onSelectItem` | `(item: NotificationItem) => void` | `undefined` | Callback when an item is selected |
-| `onHeaderButtonPress` | `() => void` | `undefined` | Callback when header button is pressed |
-| `animationDuration` | `number` | `500` | Duration of expand/collapse animation in milliseconds |
-| `expandedWidth` | `number` | `288` | Width of the expanded notification panel |
-
-## NotificationItem Interface
-
-```tsx
-interface NotificationItem {
-  id: number | string;        // Unique identifier
-  title: string;              // Display text
-  icon?: string;              // Optional icon name
-  [key: string]: any;         // Additional custom properties
-}
-```
-
-## Examples
-
-### Basic Usage
-
-```tsx
-<TapasNotification
-  open={true}
-  title="System Alerts"
-  items={[
-    { id: 1, title: 'Server Maintenance', icon: 'warning' },
-    { id: 2, title: 'Backup Complete', icon: 'check_circle' }
-  ]}
-/>
-```
-
-### With Selection
-
-```tsx
-<TapasNotification
-  open={true}
-  title="Messages"
-  items={messages}
-  selectedItem={selectedMessageId}
-  onSelectItem={handleMessageSelect}
-/>
-```
-
-### Custom Styling
-
-```tsx
-<TapasNotification
-  open={true}
-  title="Custom Title"
-  headerTitleStyle={{ color: '#FF6B6B', fontSize: 18 }}
-  style={{ backgroundColor: '#2C3E50' }}
-/>
-```
-
-### Hidden Header Button
-
-```tsx
-<TapasNotification
-  open={true}
-  title="Read Only"
-  hideHeaderButton={true}
-  items={notifications}
-/>
-```
-
-### Custom Animation
-
-```tsx
-<TapasNotification
-  open={true}
-  animationDuration={300}
-  expandedWidth={400}
-  items={notifications}
-/>
-```
-
-## Styling
-
-The component uses the theme system for consistent styling. Key style properties include:
-
-- **Container**: Uses `theme.colors.colorSurface2` for background
-- **Header Title**: Uses `theme.colors.white` for text color
-- **Selected Row**: Uses `theme.colors.secondary` for background
-- **Empty State**: Uses `theme.colors.colorSurface11` for text color
-
-## Accessibility
-
-- Supports screen readers with proper text labels
-- Keyboard navigation support
-- High contrast mode compatible
-- Scalable text sizes
-
-## Browser Support
-
-- React Native Web compatible
-- Modern browser support (ES6+)
-- Responsive design for mobile and desktop
-
-## Dependencies
-
-- `react-native-gesture-handler` for ScrollView
-- `@rneui/themed` for theming and styling
-- React Native core components

package/package/module/NumericInput/README.md

@@ -1,95 +0,0 @@
-# NumericInput
-
-数字输入组件，包含加减按钮和文本输入框，适用于数量选择场景。
-
-## 功能特性
-
-- ✅ 加减按钮控制数值增减
-- ✅ 支持手动键盘输入数字
-- ✅ 可设置最大值和最小值限制
-- ✅ 到达边界时自动禁用对应按钮
-- ✅ 支持整体禁用状态
-- ✅ 加号按钮使用主题色填充背景
-- ✅ 支持 onReduce 和 onAdd 额外回调
-- ✅ 兼容 RN 0.77 Bridgeless 模式（Android 焦点管理修复）
-- ✅ 支持自定义输入框样式
-- ✅ 支持 testID 属性用于测试
-
-## 安装使用
-
-```tsx
-import NumericInput from '@beppla/tapas-ui/components/NumericInput/NumericInput';
-```
-
-## Props
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| value | `number` | - | 当前数值 |
-| max | `number` | - | 最大值 |
-| min | `number` | - | 最小值 |
-| onChange | `(value: number) => void` | - | 数值变化回调 |
-| onReduce | `() => void` | - | 减少按钮点击回调（在数值变化前触发） |
-| onAdd | `() => void` | - | 增加按钮点击回调（在数值变化前触发） |
-| disabled | `boolean` | - | 是否禁用整个组件 |
-| inputStyle | `StyleProp<ViewStyle>` | - | 输入框自定义样式 |
-| testID | `string` | - | 测试标识 |
-| enableBridgelessFix | `boolean` | `true` | 是否启用 RN 0.77 Bridgeless 模式兼容修复 |
-
-## 使用示例
-
-### 基础用法
-
-```tsx
-<NumericInput
-  value={0}
-  min={0}
-  max={99}
-  onChange={(value) => console.log('数量:', value)}
-/>
-```
-
-### 设置范围
-
-```tsx
-<NumericInput
-  value={5}
-  min={1}
-  max={10}
-  onChange={(value) => setQuantity(value)}
-/>
-```
-
-### 禁用状态
-
-```tsx
-<NumericInput
-  value={3}
-  min={0}
-  max={99}
-  disabled
-  onChange={() => {}}
-/>
-```
-
-### 带额外回调
-
-```tsx
-<NumericInput
-  value={count}
-  min={0}
-  max={99}
-  onChange={(value) => setCount(value)}
-  onAdd={() => console.log('点击了增加')}
-  onReduce={() => console.log('点击了减少')}
-/>
-```
-
-## 注意事项
-
-- `onReduce` 和 `onAdd` 在按钮点击时立即触发，即使数值已到边界也会触发
-- `onChange` 只在数值实际变化时触发（边界处不触发）
-- 手动输入时，超过 `max` 的值会被忽略
-- 失焦时会触发 `onChange` 回调，Android 上有延迟处理以兼容 Bridgeless 模式
-- 组件最小宽度 136px，高度 40px
-- 如果 Android 上遇到焦点问题，可设置 `enableBridgelessFix={false}` 尝试

package/package/module/Overlay/README.md

@@ -1,84 +0,0 @@
-# Overlay
-
-覆盖层组件，基于 `@rneui/themed` 的 Overlay 封装，用于显示底部弹出的模态内容面板。预设从底部弹出、占屏幕 80% 高度的样式，适合底部 Sheet 和弹出菜单场景。
-
-## 功能特性
-
-- ✅ 继承 @rneui/themed OverlayProps 的全部能力
-- ✅ 预设底部弹出样式（absolute + bottom: 0）
-- ✅ 半透明遮罩背景（backdropStyle）
-- ✅ 支持点击遮罩关闭（onBackdropPress）
-- ✅ 自定义 overlayStyle 和 backdropStyle 覆盖默认样式
-- ✅ 主题色适配
-
-## 安装使用
-
-```tsx
-import { Overlay } from '@beppla/tapas-ui';
-```
-
-## Props
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| isVisible | `boolean` | - | 是否显示覆盖层（必填） |
-| onBackdropPress | `() => void` | - | 点击遮罩回调 |
-| overlayStyle | `StyleProp<ViewStyle>` | 底部弹出，宽100%，高80% | 覆盖层样式 |
-| backdropStyle | `StyleProp<ViewStyle>` | 半透明灰色 | 遮罩样式 |
-| children | `React.ReactNode` | - | 覆盖层内容 |
-
-> 继承 `@rneui/themed` OverlayProps 的所有属性
-
-## 使用示例
-
-### 基础用法
-
-```tsx
-const [isVisible, setIsVisible] = useState(false);
-
-<Button onPress={() => setIsVisible(true)}>Open Overlay</Button>
-<Overlay
-  isVisible={isVisible}
-  onBackdropPress={() => setIsVisible(false)}
->
-  <View>
-    <Text>Overlay Content</Text>
-  </View>
-</Overlay>
-```
-
-### 自定义高度
-
-```tsx
-<Overlay
-  isVisible={isVisible}
-  onBackdropPress={() => setIsVisible(false)}
-  overlayStyle={{ height: '50%' }}
->
-  <Text>Half screen overlay</Text>
-</Overlay>
-```
-
-### 居中弹出
-
-```tsx
-<Overlay
-  isVisible={isVisible}
-  onBackdropPress={() => setIsVisible(false)}
-  overlayStyle={{
-    width: '80%',
-    height: 'auto',
-    position: 'relative',
-    borderRadius: 12,
-  }}
->
-  <Text>Centered modal content</Text>
-</Overlay>
-```
-
-## 注意事项
-
-- 默认样式为底部弹出面板（`position: absolute, bottom: 0, width: 100%, height: 80%`）
-- 传入 `overlayStyle` 会与默认样式合并（数组形式），后者优先级更高
-- 组件需在 `ThemeProvider` 内使用
-- 遮罩背景色使用主题的 `grey4` 颜色

package/package/module/Pagination/BACKGROUND_COLOR.md

@@ -1,173 +0,0 @@
-# Pagination 背景色自定义
-
-## 概述
-
-TapasPagination 组件现在支持自定义背景色，允许您根据应用的设计需求灵活调整分页器的外观。
-
-## 新增属性
-
-### `backgroundColor`
-
-自定义分页器的背景色。
-
-```typescript
-backgroundColor?: string;
-```
-
-**类型**: `string` (可选)  
-**默认值**: 使用主题的 `theme.colors.background`  
-**支持格式**: 
-- 十六进制颜色：`#FFFFFF`、`#FFF`
-- RGB/RGBA：`rgb(255, 255, 255)`、`rgba(255, 255, 255, 0.5)`
-- 颜色名称：`white`、`blue` 等
-
-## 使用示例
-
-### 基础用法
-
-```typescript
-import Pagination from '@beppla/tapas-ui';
-
-<Pagination
-  totalCount="Total: 20"
-  pageParams={{
-    page: 1,
-    pageSize: 10,
-    totalItems: 60,
-    totalPage: 6,
-  }}
-  backgroundColor="#E3F2FD"  // 浅蓝色背景
-  onPageChange={(page) => console.log('Page:', page)}
-/>
-```
-
-### 不同场景的颜色示例
-
-```typescript
-// 浅色背景（适合深色文字）
-<Pagination
-  totalCount="Total: 100"
-  pageParams={pageParams}
-  backgroundColor="#F5F5F5"  // 浅灰色
-/>
-
-// 品牌色背景
-<Pagination
-  totalCount="Total: 100"
-  pageParams={pageParams}
-  backgroundColor="#E8F5E9"  // 浅绿色
-/>
-
-// 透明背景
-<Pagination
-  totalCount="Total: 100"
-  pageParams={pageParams}
-  backgroundColor="transparent"
-/>
-
-// 使用主题默认背景（不设置 backgroundColor）
-<Pagination
-  totalCount="Total: 100"
-  pageParams={pageParams}
-  // backgroundColor 未设置时自动使用主题背景色
-/>
-```
-
-### 与其他样式组合
-
-```typescript
-<Pagination
-  totalCount="Total: 50"
-  pageParams={pageParams}
-  backgroundColor="#FFF9C4"  // 自定义背景色
-  paginationContainerStyle={{
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#E0E0E0',
-    paddingHorizontal: 32,
-  }}
-/>
-```
-
-## 推荐颜色方案
-
-### 浅色主题推荐
-
-```typescript
-const lightThemeColors = {
-  default: '#FFFFFF',      // 纯白
-  subtle: '#F5F5F5',       // 浅灰
-  info: '#E3F2FD',         // 浅蓝
-  success: '#E8F5E9',      // 浅绿
-  warning: '#FFF9C4',      // 浅黄
-  error: '#FFEBEE',        // 浅红
-};
-```
-
-### 深色主题推荐
-
-```typescript
-const darkThemeColors = {
-  default: '#1E1E1E',      // 深灰
-  subtle: '#2C2C2C',       // 较浅深灰
-  info: '#1A237E',         // 深蓝
-  success: '#1B5E20',      // 深绿
-  warning: '#F57F17',      // 深黄
-};
-```
-
-## 注意事项
-
-1. **文字对比度**: 确保背景色与文字颜色有足够的对比度，以保证可读性
-2. **品牌一致性**: 建议使用与应用整体设计语言一致的颜色
-3. **可访问性**: 遵循 WCAG 2.1 标准，确保颜色对比度至少为 4.5:1
-4. **主题集成**: 如果不设置 `backgroundColor`，组件会自动使用主题的背景色
-
-## 完整 Props
-
-```typescript
-interface Props {
-  totalCount: string;
-  pageSizeOptions?: ItemProps[];
-  visibleTotalCount?: boolean;
-  visiblePageSizeOptions?: boolean;
-  pageParams?: TPageParams;
-  onPageChange?: (page: TPageParams) => void;
-  onPageSizeChange?: (item: ItemProps) => void;
-  paginationContainerStyle?: StyleProp<ViewStyle>;
-  pageSizePosition?: TDropdownPosition;
-  backgroundColor?: string;  // ✨ 新增
-}
-```
-
-## Storybook 示例
-
-在 Storybook 中查看以下示例：
-
-- **Basic**: 默认样式
-- **CustomBackgroundColor**: 单一自定义背景色示例
-- **DifferentBackgroundColors**: 多种背景色对比展示
-
-## 常见问题
-
-### Q: 为什么我设置的背景色不生效？
-
-A: 请检查：
-1. `backgroundColor` 属性是否正确传递
-2. `paginationContainerStyle` 中是否有覆盖性的背景色设置
-3. 颜色值格式是否正确
-
-### Q: 可以使用渐变背景吗？
-
-A: 原生 `backgroundColor` 不支持渐变。如需渐变背景，请使用 `paginationContainerStyle` 配合其他库实现。
-
-### Q: 如何实现半透明背景？
-
-A: 使用 RGBA 格式：
-```typescript
-backgroundColor="rgba(255, 255, 255, 0.8)"  // 80% 不透明度
-```
-
-## 版本历史
-
-- **v1.4.17**: 新增 `backgroundColor` 属性支持