@beppla/tapas-ui 1.4.35 → 1.5.2

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/NumericInput.js

@@ -1,222 +0,0 @@
-"use strict";
-
-import React, { useEffect, useMemo, useRef } from 'react';
-import { TextInput, TouchableOpacity, View, Platform, Keyboard } from 'react-native';
-import CustomIcon from '../Icons/TapasIcon';
-import { makeStyles } from '@rneui/themed';
-import { isBridgelessMode } from '../common/bridgelessUtils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyle = makeStyles(theme => {
-  return {
-    container: {
-      backgroundColor: theme.colors.grey4,
-      borderRadius: theme.radius.rounded,
-      paddingHorizontal: 4,
-      minWidth: 136,
-      height: 40,
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    },
-    input: {
-      width: 48,
-      height: 17,
-      fontFamily: theme.fonts.fontFamily,
-      fontSize: theme.fonts.sizeM,
-      fontWeight: theme.fonts.weightM,
-      color: theme.colors.colorTextSecondary,
-      // outlineWidth: 0, // Not supported in React Native
-      textAlign: 'center'
-    },
-    disabled: {
-      color: theme.colors.grey2
-    },
-    iconWrap: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 32,
-      height: 32
-    },
-    iconAddWrap: {
-      backgroundColor: theme.colors.primary,
-      borderRadius: 8
-    },
-    iconAddWrapDisabled: {
-      backgroundColor: theme.colors.colorSurface8,
-      borderRadius: 8
-    },
-    disabledColor: {
-      color: theme.colors.colorTextPlaceholder
-    },
-    iconRemoveWrapDisabled: {
-      backgroundColor: 'transparent'
-    },
-    iconRemove: {
-      color: theme.colors.secondary
-    },
-    iconAdd: {
-      color: theme.colors.white
-    }
-  };
-});
-const NumericInput = ({
-  enableBridgelessFix = true,
-  ...props
-}) => {
-  const styles = useStyle();
-  const [value, setValue] = React.useState(props.value || 0);
-  const inputRef = useRef(null);
-  const blurTimeoutRef = useRef(null);
-  const shouldRefocusRef = useRef(false);
-  const isBridgeless = useRef(isBridgelessMode());
-  const isRemoveDisabled = useMemo(() => {
-    return value <= 0 || value <= props?.min;
-  }, [value, props?.min]);
-  const isAddDisabled = useMemo(() => {
-    return value >= props?.max;
-  }, [value, props?.max]);
-  const removeStyle = isRemoveDisabled ? styles.disabled : {};
-  const addStyle = isAddDisabled ? styles.disabled : {};
-  const handleRemove = () => {
-    props.onReduce && props.onReduce();
-    if (isRemoveDisabled) return;
-    const tempValue = +value - 1;
-    setValue(tempValue);
-    props.onChange && props.onChange(tempValue);
-  };
-  const handleAdd = () => {
-    props.onAdd && props.onAdd();
-    if (isAddDisabled) return;
-    const tempValue = +value + 1;
-    setValue(tempValue);
-    props.onChange && props.onChange(tempValue);
-  };
-  const handleChange = text => {
-    if (props.max && +text > props.max) return;
-    setValue(text);
-  };
-  useEffect(() => {
-    setValue(props.value);
-  }, [props.value]);
-
-  // Android 键盘监听：当键盘显示时，如果输入框失焦，尝试重新聚焦
-  // 这是针对 RN 0.77 Bridgeless 模式的兼容性修复
-  useEffect(() => {
-    if (Platform.OS !== 'android' || !enableBridgelessFix) {
-      return;
-    }
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-      if (shouldRefocusRef.current) {
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            if (shouldRefocusRef.current && inputRef.current) {
-              try {
-                if (typeof inputRef.current.focus === 'function') {
-                  inputRef.current.focus();
-                  shouldRefocusRef.current = false;
-                } else {
-                  shouldRefocusRef.current = false;
-                }
-              } catch (error) {
-                shouldRefocusRef.current = false;
-              }
-            }
-          });
-        });
-      }
-    });
-    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-      shouldRefocusRef.current = false;
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-        blurTimeoutRef.current = null;
-      }
-    });
-    return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-        blurTimeoutRef.current = null;
-      }
-    };
-  }, [enableBridgelessFix]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    testID: props.testID,
-    children: [props.disabled || isRemoveDisabled ? /*#__PURE__*/_jsx(CustomIcon, {
-      name: "remove",
-      size: 20,
-      style: {
-        ...styles.iconWrap,
-        ...styles.disabledColor,
-        ...styles.iconRemoveWrapDisabled,
-        ...removeStyle
-      }
-    }) : /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: styles.iconWrap,
-      onPress: handleRemove,
-      children: /*#__PURE__*/_jsx(CustomIcon, {
-        name: "remove",
-        size: 20,
-        style: {
-          ...styles.iconWrap,
-          ...styles.iconRemove,
-          ...removeStyle
-        }
-      })
-    }), /*#__PURE__*/_jsx(TextInput, {
-      ref: inputRef,
-      style: [styles.input, props.inputStyle, props.disabled && styles.disabledColor],
-      editable: !props.disabled,
-      keyboardType: "numeric",
-      value: (value || 0).toString(),
-      onChangeText: handleChange,
-      onBlur: () => {
-        if (Platform.OS === 'android' && enableBridgelessFix) {
-          shouldRefocusRef.current = true;
-          if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-          }
-          const delay = isBridgeless.current ? 800 : 500;
-          blurTimeoutRef.current = setTimeout(() => {
-            if (!shouldRefocusRef.current) {
-              blurTimeoutRef.current = null;
-              return;
-            }
-            props.onChange && props.onChange(value);
-            shouldRefocusRef.current = false;
-            blurTimeoutRef.current = null;
-          }, delay);
-        } else {
-          props.onChange && props.onChange(value);
-        }
-      },
-      blurOnSubmit: Platform.OS === 'android' ? false : undefined
-    }), isAddDisabled || props.disabled ? /*#__PURE__*/_jsx(CustomIcon, {
-      name: "add",
-      size: 20,
-      style: {
-        ...styles.iconWrap,
-        ...addStyle,
-        ...styles.disabledColor,
-        ...styles.iconAddWrapDisabled
-      }
-    }) : /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: handleAdd,
-      style: [styles.iconWrap, styles.iconAddWrap],
-      children: /*#__PURE__*/_jsx(CustomIcon, {
-        name: "add",
-        size: 20,
-        style: {
-          ...styles.iconAdd,
-          ...addStyle
-        }
-      })
-    })]
-  });
-};
-export default NumericInput;
-//# sourceMappingURL=NumericInput.js.map

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` 属性支持