@idealyst/components 1.1.7 → 1.1.8

package/src/Icon/Icon.web.tsx

@@ -3,14 +3,16 @@ import MdiIcon from '@mdi/react';
 import { IconProps } from './types';
 import { iconStyles } from './Icon.styles';
 import { getWebProps } from 'react-native-unistyles/web';
+import { useUnistyles } from 'react-native-unistyles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getColorFromString, Intent, Color } from '@idealyst/theme';
 
 // Internal props that include the transformed path from Babel plugin
 interface InternalIconProps extends IconProps {
   path?: string; // Added by Babel plugin transformation
 }
 
-const Icon = forwardRef<HTMLDivElement, IconProps>((props: InternalIconProps, ref) => {
+const Icon = forwardRef<HTMLSpanElement, IconProps>((props: InternalIconProps, ref) => {
   const {
     name,
     size = 'md',
@@ -23,26 +25,60 @@ const Icon = forwardRef<HTMLDivElement, IconProps>((props: InternalIconProps, re
     ...restProps
   } = props;
 
+  const { theme } = useUnistyles();
+
   // Check if we have a path prop (from Babel plugin transformation)
   const { path } = restProps as { path?: string };
-  const iconProps = getWebProps(iconStyles.icon({ intent, color, size }));
+
+  // Compute size from theme
+  let iconSize: number;
+  if (typeof size === 'number') {
+    iconSize = size;
+  } else {
+    const themeSize = theme.sizes.icon[size as keyof typeof theme.sizes.icon];
+    iconSize = typeof themeSize === 'number' ? themeSize : (themeSize?.width ?? 24);
+  }
+
+  // Compute color from intent or color prop or default
+  const iconColor = intent
+    ? theme.intents[intent as Intent]?.primary
+    : color
+      ? getColorFromString(theme, color as Color)
+      : theme.colors.text.primary;
+
+  // Use getWebProps for className generation but override with computed values
+  const iconStyle = (iconStyles.icon as any)({ intent, color, size });
+  const iconProps = getWebProps([iconStyle, style]);
 
   const mergedRef = useMergeRefs(ref, iconProps.ref);
 
   // Use MDI React icon when path is provided (transformed by Babel plugin)
   return (
-    <div
+    <span
       {...iconProps}
       ref={mergedRef}
-      id={id}>
+      id={id}
+      style={{
+        ...iconProps.style,
+        fontSize: iconSize,
+        width: '1em',
+        height: '1em',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        lineHeight: 1,
+        color: iconColor,
+      }}
+    >
       <MdiIcon
         path={path}
-        size={'100%'}
-        color={'currentColor'}
+        size="1em"
+        color="currentColor"
         data-testid={testID}
         aria-label={accessibilityLabel || name}
       />
-    </div>
+    </span>
   );
 });
 

package/src/Icon/IconSvg/IconSvg.web.tsx

@@ -19,6 +19,7 @@ interface IconSvgProps {
 
 export const IconSvg: React.FC<IconSvgProps> = ({
   path,
+  size = '1em',
   color = 'currentColor',
   style,
   'aria-label': ariaLabel,
@@ -29,6 +30,7 @@ export const IconSvg: React.FC<IconSvgProps> = ({
     <MdiIcon
       style={style}
       path={path}
+      size={size}
       color={color}
       aria-label={ariaLabel}
       data-testid={testID}

package/src/Image/Image.styles.old.tsx

@@ -0,0 +1,69 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles} from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type ImageVariants = {}
+
+export type ExpandedImageStyles = StylesheetStyles<keyof ImageVariants>;
+
+export type ImageStylesheet = {
+    container: ExpandedImageStyles;
+    image: ExpandedImageStyles;
+    placeholder: ExpandedImageStyles;
+    fallback: ExpandedImageStyles;
+    loadingIndicator: ExpandedImageStyles;
+}
+
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        position: 'relative' as const,
+        overflow: 'hidden' as const,
+        backgroundColor: theme.colors['gray.200'],
+    });
+}
+
+function createImageStyles() {
+    return () => ({
+        width: '100%' as const,
+        height: '100%' as const,
+    });
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const imageStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Image', theme, {container: createContainerStyles(theme),
+        image: createImageStyles(),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        placeholder: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors['gray.200'],
+        },
+        fallback: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors['gray.300'],
+            color: theme.colors['gray.600'],
+        },
+        loadingIndicator: {
+            color: theme.colors['gray.600'],
+        }});
+});

package/src/Image/Image.styles.tsx

@@ -1,73 +1,59 @@
+/**
+ * Image styles using defineStyle.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
 
-type ImageVariants = {}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type ExpandedImageStyles = StylesheetStyles<keyof ImageVariants>;
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ImageStylesheet = {
-    container: ExpandedImageStyles;
-    image: ExpandedImageStyles;
-    placeholder: ExpandedImageStyles;
-    fallback: ExpandedImageStyles;
-    loadingIndicator: ExpandedImageStyles;
-}
+export type ImageDynamicProps = {};
 
-// Style creators for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
+/**
+ * Image styles - simple container and image styles.
+ */
+export const imageStyles = defineStyle('Image', (theme: Theme) => ({
+    container: (_props: ImageDynamicProps) => ({
         position: 'relative' as const,
         overflow: 'hidden' as const,
         backgroundColor: theme.colors['gray.200'],
-    });
-}
+    }),
 
-function createImageStyles() {
-    return () => ({
+    image: (_props: ImageDynamicProps) => ({
         width: '100%' as const,
         height: '100%' as const,
-    });
-}
+    }),
 
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
-// transform on native cannot resolve function calls to extract variant structures.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const imageStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Image', theme, {
-        container: createContainerStyles(theme),
-        image: createImageStyles(),
-    });
+    placeholder: (_props: ImageDynamicProps) => ({
+        position: 'absolute' as const,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        backgroundColor: theme.colors['gray.200'],
+    }),
+
+    fallback: (_props: ImageDynamicProps) => ({
+        position: 'absolute' as const,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        backgroundColor: theme.colors['gray.300'],
+        color: theme.colors['gray.600'],
+    }),
 
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        placeholder: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: theme.colors['gray.200'],
-        },
-        fallback: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: theme.colors['gray.300'],
-            color: theme.colors['gray.600'],
-        },
-        loadingIndicator: {
-            color: theme.colors['gray.600'],
-        },
-    };
-});
+    loadingIndicator: (_props: ImageDynamicProps) => ({
+        color: theme.colors['gray.600'],
+    }),
+}));

package/src/Input/Input.native.tsx

@@ -1,10 +1,55 @@
-import React, { useState, isValidElement, useMemo } from 'react';
-import { View, TextInput, TouchableOpacity } from 'react-native';
+import React, { useState, isValidElement, useMemo, useEffect, useRef, useCallback } from 'react';
+import { View, TextInput, TouchableOpacity, Platform, TextInputProps } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useUnistyles } from 'react-native-unistyles';
 import { InputProps } from './types';
 import { inputStyles } from './Input.styles';
 import { getNativeFormAccessibilityProps } from '../utils/accessibility';
 
+// Inner TextInput component that can be memoized to prevent re-renders
+// for Android secure text entry
+type InnerTextInputProps = {
+  inputRef: React.ForwardedRef<TextInput>;
+  value: string | undefined;
+  onChangeText: ((text: string) => void) | undefined;
+  isAndroidSecure: boolean;
+  textInputProps: Omit<TextInputProps, 'value' | 'defaultValue' | 'onChangeText'>;
+  inputStyle: any;
+};
+
+const InnerTextInput = React.memo<InnerTextInputProps>(
+  ({ inputRef, value, onChangeText, isAndroidSecure, textInputProps, inputStyle }) => {
+    return (
+      <TextInput
+        ref={inputRef}
+        // For Android secure text entry, don't pass value prop at all
+        // Let TextInput manage its own state to preserve character reveal animation
+        {...(isAndroidSecure ? {} : { value })}
+        onChangeText={onChangeText}
+        style={inputStyle}
+        {...textInputProps}
+      />
+    );
+  },
+  (prevProps, nextProps) => {
+    // For Android secure text entry, skip re-renders when only value changes
+    if (nextProps.isAndroidSecure) {
+      // Only re-render if non-value props change
+      const valueChanged = prevProps.value !== nextProps.value;
+      const otherPropsChanged =
+        prevProps.onChangeText !== nextProps.onChangeText ||
+        prevProps.isAndroidSecure !== nextProps.isAndroidSecure ||
+        prevProps.textInputProps !== nextProps.textInputProps ||
+        prevProps.inputStyle !== nextProps.inputStyle;
+
+      if (valueChanged && !otherPropsChanged) {
+        return true; // Skip re-render
+      }
+    }
+    return false; // Allow re-render
+  }
+);
+
 const Input = React.forwardRef<TextInput, InputProps>(({
   value,
   onChangeText,
@@ -41,11 +86,30 @@ const Input = React.forwardRef<TextInput, InputProps>(({
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
+  // Track if this is a secure field that needs Android workaround
+  const isSecureField = inputType === 'password' || secureTextEntry;
+  const needsAndroidSecureWorkaround = Platform.OS === 'android' && isSecureField && !isPasswordVisible;
+
+  // For Android secure text entry, we use an internal ref to track value
+  const internalValueRef = useRef(value ?? '');
+
+  // Sync external value changes to internal ref (for programmatic updates)
+  useEffect(() => {
+    if (value !== undefined) {
+      internalValueRef.current = value;
+    }
+  }, [value]);
+
+  // Get theme for icon sizes and colors
+  const { theme } = useUnistyles();
+  const iconSize = theme.sizes.input[size].iconSize;
+  const iconColor = theme.colors.text.secondary;
+
   // Determine if we should show password toggle
   const isPasswordField = inputType === 'password' || secureTextEntry;
   const shouldShowPasswordToggle = isPasswordField && (showPasswordToggle !== false);
 
-  const getKeyboardType = () => {
+  const getKeyboardType = useCallback((): 'default' | 'email-address' | 'numeric' => {
     switch (inputType) {
       case 'email':
         return 'email-address';
@@ -56,42 +120,34 @@ const Input = React.forwardRef<TextInput, InputProps>(({
       default:
         return 'default';
     }
-  };
+  }, [inputType]);
 
-  const handleFocus = () => {
+  const handleFocus = useCallback(() => {
     setIsFocused(true);
-    if (onFocus) {
-      onFocus();
-    }
-  };
+    onFocus?.();
+  }, [onFocus]);
 
-  const handlePress = () => {
-    if (onPress) {
-      onPress();
-    }
-  }
+  const handlePress = useCallback(() => {
+    onPress?.();
+  }, [onPress]);
 
-  const handleBlur = () => {
+  const handleBlur = useCallback(() => {
     setIsFocused(false);
-    if (onBlur) {
-      onBlur();
-    }
-  };
+    onBlur?.();
+  }, [onBlur]);
 
   const togglePasswordVisibility = () => {
     setIsPasswordVisible(!isPasswordVisible);
   };
 
-  // Apply variants to the stylesheet (for size and spacing)
-  inputStyles.useVariants({
-    size,
-    margin,
-    marginVertical,
-    marginHorizontal,
-  });
+  // Memoized change handler for InnerTextInput
+  const handleChangeText = useCallback((text: string) => {
+    internalValueRef.current = text;
+    onChangeText?.(text);
+  }, [onChangeText]);
 
-  // Compute dynamic container styles
-  const containerStyle = (inputStyles.container as any)({ type, focused: isFocused, hasError, disabled });
+  // Memoized input style
+  const inputStyle = useMemo(() => (inputStyles.input as any)({}), []);
 
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
@@ -119,17 +175,55 @@ const Input = React.forwardRef<TextInput, InputProps>(({
     hasError,
   ]);
 
+  // Memoized TextInput props (everything except value/onChangeText)
+  const textInputProps = useMemo(() => ({
+    onPress: handlePress,
+    placeholder,
+    editable: !disabled,
+    keyboardType: getKeyboardType(),
+    secureTextEntry: isSecureField && !isPasswordVisible,
+    autoCapitalize,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    placeholderTextColor: '#999999',
+    ...nativeA11yProps,
+  }), [
+    handlePress,
+    placeholder,
+    disabled,
+    getKeyboardType,
+    isSecureField,
+    isPasswordVisible,
+    autoCapitalize,
+    handleFocus,
+    handleBlur,
+    nativeA11yProps,
+  ]);
+
+  // Apply variants to the stylesheet (for size and spacing)
+  inputStyles.useVariants({
+    size,
+    margin,
+    marginVertical,
+    marginHorizontal,
+  });
+
+  // Compute dynamic styles - call as functions for theme reactivity
+  const containerStyle = (inputStyles.container as any)({ type, focused: isFocused, hasError, disabled });
+  const leftIconContainerStyle = (inputStyles.leftIconContainer as any)({});
+  const rightIconContainerStyle = (inputStyles.rightIconContainer as any)({});
+  const passwordToggleStyle = (inputStyles.passwordToggle as any)({});
+
   // Helper to render left icon
   const renderLeftIcon = () => {
     if (!leftIcon) return null;
 
     if (typeof leftIcon === 'string') {
-      const iconStyle = inputStyles.leftIcon;
       return (
         <MaterialCommunityIcons
           name={leftIcon}
-          size={iconStyle.width}
-          color={iconStyle.color}
+          size={iconSize}
+          color={iconColor}
         />
       );
     } else if (isValidElement(leftIcon)) {
@@ -144,12 +238,11 @@ const Input = React.forwardRef<TextInput, InputProps>(({
     if (!rightIcon) return null;
 
     if (typeof rightIcon === 'string') {
-      const iconStyle = inputStyles.rightIcon;
       return (
         <MaterialCommunityIcons
           name={rightIcon}
-          size={iconStyle.width}
-          color={iconStyle.color}
+          size={iconSize}
+          color={iconColor}
         />
       );
     } else if (isValidElement(rightIcon)) {
@@ -163,45 +256,37 @@ const Input = React.forwardRef<TextInput, InputProps>(({
     <View style={[containerStyle, style]} testID={testID} nativeID={id}>
       {/* Left Icon */}
       {leftIcon && (
-        <View style={inputStyles.leftIconContainer}>
+        <View style={leftIconContainerStyle}>
           {renderLeftIcon()}
         </View>
       )}
 
       {/* Input */}
-      <TextInput
-        onPress={handlePress}
-        ref={ref}
+      <InnerTextInput
+        inputRef={ref}
         value={value}
-        onChangeText={onChangeText}
-        placeholder={placeholder}
-        editable={!disabled}
-        keyboardType={getKeyboardType()}
-        secureTextEntry={(secureTextEntry || inputType === 'password') && !isPasswordVisible}
-        autoCapitalize={autoCapitalize}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        style={(inputStyles.input as any)({})}
-        placeholderTextColor="#999999"
-        {...nativeA11yProps}
+        onChangeText={handleChangeText}
+        isAndroidSecure={needsAndroidSecureWorkaround}
+        inputStyle={inputStyle}
+        textInputProps={textInputProps}
       />
 
       {/* Right Icon or Password Toggle */}
       {shouldShowPasswordToggle ? (
         <TouchableOpacity
-          style={inputStyles.passwordToggle}
+          style={passwordToggleStyle}
           onPress={togglePasswordVisibility}
           disabled={disabled}
           accessibilityLabel={isPasswordVisible ? 'Hide password' : 'Show password'}
         >
           <MaterialCommunityIcons
             name={isPasswordVisible ? 'eye-off' : 'eye'}
-            size={inputStyles.passwordToggleIcon.width}
-            color={inputStyles.passwordToggleIcon.color}
+            size={iconSize}
+            color={iconColor}
           />
         </TouchableOpacity>
       ) : rightIcon ? (
-        <View style={inputStyles.rightIconContainer}>
+        <View style={rightIconContainerStyle}>
           {renderRightIcon()}
         </View>
       ) : null}