@beppla/tapas-ui 1.5.10 → 1.5.12

package/components/TextArea/TextArea.tsx

@@ -0,0 +1,355 @@
+import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  Animated,
+  Platform,
+  Keyboard,
+} from "react-native";
+import { withTheme, makeStyles, useTheme } from "@rneui/themed";
+import TapasIcon from "../Icons/TapasIcon";
+import { isBridgelessMode } from "../common/bridgelessUtils";
+
+export interface TextAreaProps {
+  height?: number;
+  label?: string;
+  showCount?: boolean;
+  showClearBtn?: boolean;
+  value?: string;
+  numberOfLines?: number;
+  maxCount?: number;
+  placeholder?: string;
+  required?: boolean;
+  onChangeText?: (value: string) => void;
+  /** @deprecated Use onChangeText instead */
+  attachChange?: (value: string) => void;
+  backgroundColor?: string;
+  state?: "normal" | "error";
+  stateMsg?: string;
+  disabled?: boolean;
+  /**
+   * 是否启用 RN 0.77 Bridgeless 模式兼容性修复（默认 true）
+   * 当运行在 RN 0.77+ 的 Bridgeless 模式下时，会自动应用焦点管理修复
+   * 如果遇到问题，可以尝试设置为 false
+   */
+  enableBridgelessFix?: boolean;
+  /** Test ID for E2E testing */
+  testID?: string;
+}
+
+const TextArea: React.FC<TextAreaProps> = ({
+  height = 88,
+  numberOfLines = 4,
+  label,
+  value,
+  placeholder,
+  showCount = false,
+  showClearBtn = false,
+  required = false,
+  maxCount = 100,
+  onChangeText,
+  attachChange,
+  backgroundColor,
+  state = "normal",
+  disabled,
+  stateMsg,
+  enableBridgelessFix = true,
+  testID,
+}) => {
+  const theme = useTheme();
+  const styles = useStyles();
+  const [text, setText] = useState(value || "");
+  const [focus, setFocus] = useState(false);
+  const [top, setTop] = useState(18);
+
+  const topAnim = useRef(new Animated.Value(18)).current;
+  const inputRef = useRef<TextInput>(null);
+  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const shouldRefocusRef = useRef(false);
+  const isBridgeless = useRef(isBridgelessMode());
+
+  useEffect(() => {
+    const start = !text && !focus ? 0 : 18;
+    const target = !text && !focus ? 18 : 0;
+    if (top === target) return;
+    setTop(target);
+    topAnim.setValue(start);
+    Animated.timing(topAnim, {
+      toValue: target,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  }, [text, focus, top, topAnim]);
+
+  useEffect(() => {
+    setText(value || "");
+  }, [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]);
+
+  const changeHandler = onChangeText ?? attachChange;
+  const handleChangeText = useCallback((newText: string) => {
+    setText(newText);
+    changeHandler?.(newText);
+  }, [changeHandler]);
+
+  const handleClear = useCallback(() => {
+    handleChangeText("");
+  }, [handleChangeText]);
+
+  const handleFocus = useCallback(() => {
+    // 清除可能存在的 blur 延迟
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+    shouldRefocusRef.current = false;
+    setFocus(true);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    // 在 Android 上延迟处理 blur，避免键盘弹出时立即失焦
+    // React Native 0.77 Bridgeless 模式的已知问题修复
+    if (Platform.OS === 'android' && enableBridgelessFix) {
+      // 标记可能需要重新聚焦
+      shouldRefocusRef.current = true;
+      
+      // 清除之前的延迟
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+      }
+      
+      // 延迟处理 blur，给键盘足够时间显示
+      const delay = isBridgeless.current ? 800 : 500;
+      blurTimeoutRef.current = setTimeout(() => {
+        if (!shouldRefocusRef.current) {
+          blurTimeoutRef.current = null;
+          return;
+        }
+        
+        setFocus(false);
+        shouldRefocusRef.current = false;
+        blurTimeoutRef.current = null;
+      }, delay);
+    } else {
+      setFocus(false);
+    }
+  }, [enableBridgelessFix]);
+
+  const containerHeight = useMemo(() => 
+    Math.max(height, numberOfLines * 22) +
+    (label ? 7 : 0) +
+    (showCount ? 15 : 0)
+  , [height, numberOfLines, label, showCount]);
+
+  const textAreaHeight = useMemo(() => 
+    Math.max(height, numberOfLines * 22)
+  , [height, numberOfLines]);
+
+  const labelStyle = useMemo(() => [
+    styles.label,
+    { top: topAnim },
+    { backgroundColor: backgroundColor || theme.theme.colors.white },
+  ], [styles.label, topAnim, backgroundColor, theme]);
+
+  const labelTextStyle = useMemo(() => [
+    styles.label_text,
+    focus && { color: theme.theme.colors.primary },
+    state === "error" && { color: theme.theme.colors.error },
+    !text && !focus && { fontSize: 14, color: theme.theme.colors.secondary },
+  ], [styles.label_text, focus, state, text, theme]);
+
+  const textAreaStyle = useMemo(() => ({
+    ...styles.textArea,
+    height: textAreaHeight,
+    ...(showClearBtn && text && { paddingRight: 44 }),
+    ...(focus && styles.focus),
+    ...(state === "error" && { borderColor: theme.theme.colors.error }),
+  }), [styles.textArea, styles.focus, textAreaHeight, showClearBtn, text, focus, state, theme]);
+
+  const stateMsgStyle = useMemo(() => [
+    styles.stateMsg,
+    state === "error" && { color: theme.theme.colors.error },
+  ], [styles.stateMsg, state, theme]);
+
+  return (
+    <View testID={testID} style={[styles.con, { height: containerHeight }]}>
+      <Animated.View style={labelStyle}>
+        <Text
+          style={labelTextStyle}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {!text && !focus ? placeholder || label : label}
+        </Text>
+        {required && <Text style={styles.required}>*</Text>}
+      </Animated.View>
+      {showClearBtn && text ? (
+        <Pressable style={styles.clearBtnCon} onPress={handleClear}>
+          <TapasIcon
+            size={20}
+            color={theme.theme.colors.secondary}
+            name="clear-all"
+          />
+        </Pressable>
+      ) : null}
+      <TextInput
+        ref={inputRef}
+        editable={!disabled}
+        style={textAreaStyle}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        value={text}
+        onChangeText={handleChangeText}
+        multiline={true}
+        numberOfLines={numberOfLines}
+        placeholder={!label ? placeholder : undefined}
+        blurOnSubmit={Platform.OS === 'android' ? false : undefined}
+      />
+      <View style={styles.count}>
+        <Text
+          style={stateMsgStyle}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {stateMsg}
+        </Text>
+        {showCount && (
+          <Text style={styles.count_text} numberOfLines={1} ellipsizeMode="tail">
+            {text.length}/{maxCount}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  con: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    width: "100%",
+    position: "relative",
+  },
+  textArea: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 16,
+    paddingRight: 12,
+    marginTop: 7,
+    borderColor: theme?.colors?.grey2,
+    borderWidth: 1,
+    borderRadius: 12,
+    textAlignVertical: "top",
+    width: "100%",
+    ...Platform.select({
+      web: {
+        // outlineWidth: 0, // Not supported in React Native
+      },
+    }),
+  },
+  focus: {
+    borderWidth: 2,
+    borderColor: theme?.colors?.primary,
+  },
+  label: {
+    display: "flex",
+    flexDirection: "row",
+    position: "absolute",
+    left: 16,
+    paddingLeft: 1,
+    paddingRight: 1,
+    zIndex: 1,
+  },
+  label_text: { 
+    fontSize: 12, 
+    color: theme?.colors?.primary 
+  },
+  count: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingLeft: 8,
+    paddingRight: 8,
+    marginTop: 1,
+  },
+  stateMsg: {
+    flexGrow: 1,
+    paddingLeft: 16,
+    marginRight: 8,
+    fontSize: 12,
+    fontWeight: "400",
+    color: theme?.colors?.secondary,
+  },
+  count_text: {
+    fontSize: 12,
+    fontWeight: "400",
+    color: theme?.colors?.secondary,
+  },
+  clearBtnCon: {
+    position: "absolute",
+    top: 18,
+    right: 13,
+    width: 20,
+    height: 20,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 2,
+  },
+  required: {
+    fontSize: 12,
+    fontWeight: "400",
+    color: theme?.colors?.error,
+    marginLeft: 1,
+  },
+}));
+
+export default withTheme(TextArea);

package/components/Theme/ThemeProvider.tsx

@@ -0,0 +1,14 @@
+
+import { ThemeProvider } from '@rneui/themed';
+import {defaultTheme} from "./defaultTheme";
+import {View} from "react-native";
+import React from 'react';
+
+const CustomThemeProvider = ({ mode='dark', children, testID }: { mode?: 'light' | 'dark', children: React.ReactNode, testID?: string }) => {
+    // @ts-expect-error defaultTheme returns extended theme with custom colors/fonts not in CreateThemeOptions
+    return <ThemeProvider theme={defaultTheme({ mode })}>
+        <View style={{ flex: 1,  height: '100%' }} testID={testID}>{children}</View>
+    </ThemeProvider>
+}
+
+export  default  CustomThemeProvider;

package/components/Theme/defaultTheme.ts

@@ -0,0 +1,292 @@
+import type { ThemeOptions } from './types';
+export type { ThemeOptions } from './types';
+
+export const defaultTheme = (options?: ThemeOptions) => {
+    const { mode = 'dark' } = options || {};
+    return {
+        mode: mode,
+        // 为了兼容性，同时提供 colors 和 darkColors
+        colors: {
+            primary: 'rgba(0, 0, 0, 0.87)',
+            secondary: 'rgba(0, 0, 0, 0.54)',
+            background: '#F9F2E8',
+            bg1: '#644528',
+            white: '#FFF',
+            black: 'rgba(0, 0, 0, 0.87)',
+            grey0: 'rgba(0, 0, 0, 0.87)',
+            grey1: 'rgba(0, 0, 0, 0.54)',
+            grey2: 'rgba(0, 0, 0, 0.26)',
+            grey3: 'rgba(0, 0, 0, 0.12)',
+            grey4: 'rgba(0, 0, 0, 0.08)',
+            grey5: 'rgba(0, 0, 0, 0.04)',
+            greyOutline: 'rgba(0, 0, 0, 0.12)',
+            searchBg: 'rgba(0, 0, 0, 0.12)',
+            success: '#57B07B',
+            warning: '#B81F1E',
+            warning2: '#BD9509',
+            error: '#B81F1E',
+            info: '#007AFF',
+            disabled: 'rgba(0, 0, 0, 0.26)',
+            divider: '1',
+            divider1: '2',
+            divider2: '4',
+            colorTextPrimary: 'rgba(0, 0, 0, 0.87)',
+            colorTextSecondary: 'rgba(0, 0, 0, 0.54)',
+            colorTextPlaceholder: 'rgba(0, 0, 0, 0.26)',
+            colorTextInvert: '#FFF',
+            colorTextInvert1: 'rgba(255, 255, 255, 0.80)',
+            colorTextInvert2: 'rgba(255, 255, 255, 0.50)',
+            colorTextBrand: '#895F38',
+            colorTextError: '#B81F1E',
+            colorTextAccent: '#F55523',
+            colorSurface: '#F9F2E8',
+            colorSurface1: '#FFF',
+            colorSurface2: '#895F38',
+            colorSurface3: '#46301C',
+            colorSurface4: 'rgba(0, 0, 0, 0.87)',
+            colorSurface5: 'rgba(0, 0, 0, 0.54)',
+            colorSurface6: 'rgba(0, 0, 0, 0.12)',
+            colorSurface7: 'rgba(0, 0, 0, 0.08)',
+            colorSurface8: 'rgba(0, 0, 0, 0.04)',
+            colorSurface9: 'rgba(255, 255, 255, 0.80)',
+            colorSurface10: 'rgba(255, 255, 255, 0.50)',
+            colorSurface11: 'rgba(255, 255, 255, 0.30)',
+            colorPrimaryBorder: 'rgba(0, 0, 0, 0.12)',
+            colorBorder1: 'rgba(0, 0, 0, 0.26)',
+            colorBorder2: 'rgba(0, 0, 0, 0.87)',
+            colorInvertBorder: 'rgba(255, 255, 255, 0.16)',
+            colorInvertBorder1: 'rgba(255, 255, 255, 0.50)',
+            colorErrorBorder: '#B81F1E',
+            colorActiveBorder: '#F55523',
+            colorNormalIcon: 'rgba(0, 0, 0, 0.54)',
+            colorActiveIcon: 'rgba(0, 0, 0, 0.87)',
+            colorDisabledIcon: 'rgba(0, 0, 0, 0.26)',
+            colorInvertNormalIcon: 'rgba(255, 255, 255, 0.80)',
+            colorInvertActiveIcon: '#FFF',
+            colorInvertDisabledIcon: 'rgba(255, 255, 255, 0.30)',
+            colorAccentIcon: '#F55523',
+            colorStatusAvailable: '#57B07B',
+            colorStatusAvailableBg: '#EEF7F2',
+            colorStatusOccupied: '#B81F1E',
+            colorStatusCleaning: '#DCD421',
+            colorStatusReserved: '#3E6DA4',
+            colorStatusCompleted: '#57B07B',
+            colorStatusPromoted: '#F55523',
+            colorStatusAwaiting: '#3E6DA4',
+            colorStatusWarning: '#DCD421',
+            colorStatusError: '#B81F1E',
+            colorStatusErrorBg: '#FFEBEA',
+            colorToastPositive: '#57B07B',
+            colorToastInformative: '#007AFF',
+            colorToastNatural: '#FFF',
+            colorToastNegative: '#FF3B30',
+            // 图表颜色 - Chart colors
+            colorChartCategoryTeal: '#1FBCAD',    // Sales volume by category
+            colorChartProductBrown: '#895F38',    // Sales volume by product
+            colorChartWastageGold: '#F0C05A',     // Wastage quantity by product
+            colorChartWastageOrange: '#FF6F1D',   // Wastage quantity by category
+            colorTableBorder: 'rgba(0, 0, 0, 0.12)',      // Table border
+
+            // Figma Design Tokens - Status tag backgrounds
+            colorStatusPositiveBg: '#CDE7D7',
+            colorStatusWarningBg: '#EBDFB5',
+            colorStatusNegativeBg: '#F4DDDD',
+            colorStatusInformativeBg: '#D8E2ED',
+            colorStatusAccentBg: '#CCE4FF',
+
+            // Figma Design Tokens - Functional text
+            colorTextWarning: '#BC9508',
+
+            // Figma Design Tokens - Brand extensions
+            colorBrandIcon: '#895F38',
+            colorBrandBorder: '#895F38',
+
+            // Figma Design Tokens - Divider
+            colorDivider: '#DDD1B1',
+        },
+        // TODO: darkColors 目前与 colors 完全相同，待设计师确认真正的暗色值后更新
+        darkColors: {
+            primary: 'rgba(0, 0, 0, 0.87)',
+            secondary: 'rgba(0, 0, 0, 0.54)',
+            background: '#F9F2E8',
+            bg1: '#644528',
+            white: '#FFF',
+            black: 'rgba(0, 0, 0, 0.87)',
+            grey0: 'rgba(0, 0, 0, 0.87)',
+            grey1: 'rgba(0, 0, 0, 0.54)',
+            grey2: 'rgba(0, 0, 0, 0.26)',
+            grey3: 'rgba(0, 0, 0, 0.12)',
+            grey4: 'rgba(0, 0, 0, 0.08)',
+            grey5: 'rgba(0, 0, 0, 0.04)',
+            greyOutline: 'rgba(0, 0, 0, 0.12)',
+            searchBg: 'rgba(0, 0, 0, 0.12)',
+            success: '#57B07B',
+            warning: '#B81F1E',
+            warning2: '#BD9509',
+            error: '#B81F1E',
+            info: '#007AFF',
+            disabled: 'rgba(0, 0, 0, 0.26)',
+            divider: '1',
+            divider1: '2',
+            divider2: '4',
+            colorTextPrimary: 'rgba(0, 0, 0, 0.87)',
+            colorTextSecondary: 'rgba(0, 0, 0, 0.54)',
+            colorTextPlaceholder: 'rgba(0, 0, 0, 0.26)',
+            colorTextInvert: '#FFF',
+            colorTextInvert1: 'rgba(255, 255, 255, 0.80)',
+            colorTextInvert2: 'rgba(255, 255, 255, 0.50)',
+            colorTextBrand: '#895F38',
+            colorTextError: '#B81F1E',
+            colorTextAccent: '#F55523',
+            colorSurface: '#F9F2E8',
+            colorSurface1: '#FFF',
+            colorSurface2: '#895F38',
+            colorSurface3: '#46301C',
+            colorSurface4: 'rgba(0, 0, 0, 0.87)',
+            colorSurface5: 'rgba(0, 0, 0, 0.54)',
+            colorSurface6: 'rgba(0, 0, 0, 0.12)',
+            colorSurface7: 'rgba(0, 0, 0, 0.08)',
+            colorSurface8: 'rgba(0, 0, 0, 0.04)',
+            colorSurface9: 'rgba(255, 255, 255, 0.80)',
+            colorSurface10: 'rgba(255, 255, 255, 0.50)',
+            colorSurface11: 'rgba(255, 255, 255, 0.30)',
+            colorPrimaryBorder: 'rgba(0, 0, 0, 0.12)',
+            colorBorder1: 'rgba(0, 0, 0, 0.26)',
+            colorBorder2: 'rgba(0, 0, 0, 0.87)',
+            colorInvertBorder: 'rgba(255, 255, 255, 0.16)',
+            colorInvertBorder1: 'rgba(255, 255, 255, 0.50)',
+            colorErrorBorder: '#B81F1E',
+            colorActiveBorder: '#F55523',
+            colorNormalIcon: 'rgba(0, 0, 0, 0.54)',
+            colorActiveIcon: 'rgba(0, 0, 0, 0.87)',
+            colorDisabledIcon: 'rgba(0, 0, 0, 0.26)',
+            colorInvertNormalIcon: 'rgba(255, 255, 255, 0.80)',
+            colorInvertActiveIcon: '#FFF',
+            colorInvertDisabledIcon: 'rgba(255, 255, 255, 0.30)',
+            colorAccentIcon: '#F55523',
+            colorStatusAvailable: '#57B07B',
+            colorStatusAvailableBg: '#EEF7F2',
+            colorStatusOccupied: '#B81F1E',
+            colorStatusCleaning: '#DCD421',
+            colorStatusReserved: '#3E6DA4',
+            colorStatusCompleted: '#57B07B',
+            colorStatusPromoted: '#F55523',
+            colorStatusAwaiting: '#3E6DA4',
+            colorStatusWarning: '#DCD421',
+            colorStatusError: '#B81F1E',
+            colorStatusErrorBg: '#FFEBEA',
+            colorToastPositive: '#57B07B',
+            colorToastInformative: '#007AFF',
+            colorToastNatural: '#FFF',
+            colorToastNegative: '#FF3B30',
+            // 图表颜色 - Chart colors
+            colorChartCategoryTeal: '#1FBCAD',    // Sales volume by category
+            colorChartProductBrown: '#895F38',    // Sales volume by product
+            colorChartWastageGold: '#F0C05A',     // Wastage quantity by product
+            colorChartWastageOrange: '#FF6F1D',   // Wastage quantity by category
+            colorTableBorder: 'rgba(0, 0, 0, 0.12)',      // Table border
+
+            // Figma Design Tokens - Status tag backgrounds
+            colorStatusPositiveBg: '#CDE7D7',
+            colorStatusWarningBg: '#EBDFB5',
+            colorStatusNegativeBg: '#F4DDDD',
+            colorStatusInformativeBg: '#D8E2ED',
+            colorStatusAccentBg: '#CCE4FF',
+
+            // Figma Design Tokens - Functional text
+            colorTextWarning: '#BC9508',
+
+            // Figma Design Tokens - Brand extensions
+            colorBrandIcon: '#895F38',
+            colorBrandBorder: '#895F38',
+
+            // Figma Design Tokens - Divider
+            colorDivider: '#DDD1B1',
+        },
+        spacing: {
+            sm: 12,
+            tp2xs: 4,
+            tpXs: 8,
+            tpSm: 12,
+            tpRg: 16,
+            tpMd: 24,
+            tpLg: 32,
+            tpXl: 48,
+            tp2xl: 88,
+            tp3xl: 112,
+            // Figma naming aliases (same values, Figma-aligned names)
+            spacingNone: 0,
+            spacing2xs: 4,
+            spacingXs: 8,
+            spacingSm: 12,
+            spacingRg: 16,
+            spacingMd: 24,
+            spacingLg: 32,
+            spacingXl: 48,
+            spacingBlg: 88,
+            spacingBlgger: 112,
+        },
+        radius: {
+            mini: 4,
+            rounded: 12,
+            full: 360
+        },
+        fonts: {
+            fontFamily: 'BricolageGrotesque-Regular',
+            fontFamilyBold: 'BricolageGrotesque-Bold',
+            // Chinese font support (Figma: MiSans VF)
+            fontFamilyCN: 'MiSans VF',
+            fontFamilyCNFallback: 'PingFang SC',
+            h1: 44,
+            h2: 32,
+            h3: 24,
+            h4: 21,
+            sizeL: 16,
+            sizeM: 14,
+            sizeS: 12,
+            sizeXs: 10,
+            // Figma registered text style sizes (for reference alignment)
+            figmaH1: 40,
+            figmaH2: 30,
+            weightL: '700',
+            weightM: '600',
+            weightS: '500',
+            weightR: '400',
+            weightXs: '300',
+            letterSpacingL: -0.88,
+            letterSpacingM: -0.32,
+            letterSpacingS: -0.24,
+            letterSpacingR: -0.21,
+            // Line heights (Figma design tokens — previously missing)
+            lineHeightH1: 48,
+            lineHeightH2: 36,
+            lineHeightH3: 28.8,
+            lineHeightH4: 25.2,
+            lineHeightL: 19.2,
+            lineHeightM: 16.8,
+            lineHeightS: 14.4,
+            lineHeightXs: 12,
+        },
+        // Elevation / shadow tokens (Figma: Elevation 1-4)
+        elevation: {
+            e1: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 3, elevation: 2 },
+            e2: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.12, shadowRadius: 6, elevation: 4 },
+            e3: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.14, shadowRadius: 12, elevation: 8 },
+            e4: { shadowColor: '#000', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.16, shadowRadius: 24, elevation: 16 },
+        },
+        components: {
+            Button: (props: any, theme: any) => {
+                return {
+                    ...props,
+                    buttonStyle: {
+                        borderRadius: theme.radius.full,
+                        paddingVertical: theme.spacing.tpXs,
+                        paddingHorizontal: theme.spacing.tpRg
+                    },
+                }
+            },
+        }
+    }
+}
+
+export  default  defaultTheme

package/components/Theme/makeStyles.ts

@@ -0,0 +1,31 @@
+/**
+ * React 19 compatible makeStyles
+ *
+ * Drop-in replacement for @rneui/themed's makeStyles.
+ * Uses useContext hook (safe in React 19) instead of relying on
+ * ThemeConsumer (Context.Consumer pattern).
+ */
+import { useMemo, useContext } from 'react';
+import { StyleSheet } from 'react-native';
+import { ThemeContext } from '@rneui/themed/dist/config/ThemeProvider';
+
+type StylesFactory<T, P> = (theme: T, props: P) => { [key: string]: any };
+type StaticStyles = { [key: string]: any };
+
+export const makeStyles = <T = any, P = any>(
+  styles: StylesFactory<T, P> | StaticStyles
+) => {
+  return (props: P = {} as P) => {
+    const context = useContext(ThemeContext);
+    const theme = (context as any)?.theme as T;
+
+    return useMemo(() => {
+      const css = typeof styles === 'function'
+        ? (styles as StylesFactory<T, P>)(theme, props)
+        : styles;
+      return StyleSheet.create(css);
+    }, [props, theme]);
+  };
+};
+
+export default makeStyles;