@idealyst/components 1.2.29 → 1.2.31

package/src/Switch/Switch.styles.tsx

@@ -48,6 +48,12 @@ export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
 
     switchContainer: (_props: SwitchDynamicProps) => ({
         justifyContent: 'center' as const,
+        variants: {
+            disabled: {
+                true: { _web: { cursor: 'not-allowed' } },
+                false: { _web: { cursor: 'pointer' } },
+            },
+        },
         _web: {
             border: 'none',
             padding: 0,
@@ -56,29 +62,41 @@ export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
         },
     }),
 
-    switchTrack: ({ intent = 'primary', checked = false, disabled = false }: SwitchDynamicProps) => ({
+    switchTrack: (_props: SwitchDynamicProps) => ({
         borderRadius: 9999,
         position: 'relative' as const,
-        backgroundColor: checked
-            ? theme.intents[intent].primary
-            : theme.colors.border.secondary,
-        opacity: disabled ? 0.5 : 1,
+        pointerEvents: 'none' as const,
         variants: {
             size: {
                 width: theme.sizes.$switch.trackWidth,
                 height: theme.sizes.$switch.trackHeight,
             },
+            checked: {
+                false: {
+                    backgroundColor: theme.colors.border.secondary,
+                },
+            },
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
         },
+        compoundVariants: [
+            {
+                checked: true,
+                styles: {
+                    backgroundColor: theme.$intents.primary,
+                },
+            },
+        ],
         _web: {
             transition: 'background-color 0.2s ease',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            _hover: disabled ? {} : { opacity: 0.9 },
-            _active: disabled ? {} : { opacity: 0.8 },
         },
     }),
 
     switchThumb: ({ size = 'md', checked = false }: SwitchDynamicProps) => {
-        const sizeValue = theme.sizes.switch[size];
+        // translateX needs runtime calculation based on size
+        const sizeValue = theme.sizes.switch[size] ?? theme.sizes.switch.md;
         const translateX = checked ? sizeValue.translateX : 0;
 
         return {
@@ -109,26 +127,43 @@ export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
         } as const;
     },
 
-    thumbIcon: ({ intent = 'primary', checked = false }: SwitchDynamicProps) => ({
+    thumbIcon: (_props: SwitchDynamicProps) => ({
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-        color: checked
-            ? theme.intents[intent].primary
-            : theme.colors.border.secondary,
         variants: {
             size: {
                 width: theme.sizes.$switch.thumbIconSize,
                 height: theme.sizes.$switch.thumbIconSize,
             },
+            checked: {
+                false: {
+                    color: theme.colors.border.secondary,
+                },
+            },
         },
+        compoundVariants: [
+            {
+                checked: true,
+                styles: {
+                    color: theme.$intents.primary,
+                },
+            },
+        ],
     }),
 
-    label: ({ disabled = false, labelPosition = 'right' }: SwitchDynamicProps) => ({
+    label: (_props: SwitchDynamicProps) => ({
         fontSize: 14,
         color: theme.colors.text.primary,
-        opacity: disabled ? 0.5 : 1,
-        marginRight: labelPosition === 'left' ? 8 : 0,
-        marginLeft: labelPosition === 'right' ? 8 : 0,
+        variants: {
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+            labelPosition: {
+                left: { marginRight: 8, marginLeft: 0 },
+                right: { marginLeft: 8, marginRight: 0 },
+            },
+        },
     }),
 }));

package/src/Switch/Switch.web.tsx

@@ -6,21 +6,22 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebSelectionAriaProps, generateAccessibilityId } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Toggle switch for binary on/off states with optional label and icons.
  * Supports custom enabled/disabled icons and multiple sizes.
  */
-const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
+const Switch = forwardRef<IdealystElement, SwitchProps>(({
   checked = false,
-  onCheckedChange,
+  onChange,
   disabled = false,
   label,
   labelPosition = 'right',
   intent = 'primary',
   size = 'md',
-  enabledIcon,
-  disabledIcon,
+  onIcon,
+  offIcon,
   // Spacing variants from FormInputStyleProps
   margin,
   marginVertical,
@@ -39,8 +40,8 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
   accessibilityChecked,
 }, ref) => {
   const handleClick = () => {
-    if (!disabled && onCheckedChange) {
-      onCheckedChange(!checked);
+    if (!disabled && onChange) {
+      onChange(!checked);
     }
   };
 
@@ -76,12 +77,15 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
     checked,
   ]);
 
+  
   // Apply variants using the correct Unistyles v3 pattern
   switchStyles.useVariants({
-    size: size as 'sm' | 'md' | 'lg',
+    size,
+    checked,
     disabled: disabled as boolean,
-    position: labelPosition as 'left' | 'right',
+    labelPosition,
     margin,
+    intent,
     marginVertical,
     marginHorizontal,
   });
@@ -93,7 +97,7 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
 
   // Helper to render icon
   const renderIcon = () => {
-    const iconToRender = checked ? enabledIcon : disabledIcon;
+    const iconToRender = checked ? onIcon : offIcon;
     if (!iconToRender) return null;
 
     if (isIconName(iconToRender)) {
@@ -118,13 +122,7 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
 
   // Computed container props with dynamic styles (for when label exists)
   const computedContainerProps = getWebProps([
-    (switchStyles.container as any)({}),
-    style as any,
-    {
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      display: 'inline-flex',
-      alignItems: 'center',
-    }
+    (switchStyles.container as any)({ disabled }),
   ]);
 
   const mergedButtonRef = useMergeRefs(ref as React.Ref<HTMLButtonElement>, computedButtonProps.ref);
@@ -134,6 +132,7 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
     <button
       {...computedButtonProps}
       {...ariaProps}
+      style={style as any}
       ref={mergedButtonRef}
       onClick={handleClick}
       disabled={disabled}

package/src/Switch/types.ts

@@ -10,21 +10,61 @@ export type SwitchSizeVariant = Size;
 
 /**
  * Toggle switch component for binary on/off states.
- * Supports custom icons for enabled/disabled states and optional label positioning.
+ * Supports custom icons for on/off states and optional label positioning.
  */
 export interface SwitchProps extends FormInputStyleProps, SelectionAccessibilityProps {
   /**
    * Whether the switch is on
    */
   checked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
+
+  /**
+   * Called when the switch state changes
+   */
+  onChange?: (checked: boolean) => void;
+
+  /**
+   * Whether the switch is disabled
+   */
   disabled?: boolean;
+
+  /**
+   * Label text to display next to the switch
+   */
   label?: string;
+
+  /**
+   * Position of the label relative to the switch
+   */
   labelPosition?: 'left' | 'right';
+
+  /**
+   * The intent/color scheme of the switch
+   */
   intent?: SwitchIntentVariant;
+
+  /**
+   * Size of the switch
+   */
   size?: SwitchSizeVariant;
-  enabledIcon?: IconName | React.ReactNode;
-  disabledIcon?: IconName | React.ReactNode;
+
+  /**
+   * Icon to display in the thumb when the switch is ON
+   */
+  onIcon?: IconName | React.ReactNode;
+
+  /**
+   * Icon to display in the thumb when the switch is OFF
+   */
+  offIcon?: IconName | React.ReactNode;
+
+  /**
+   * Additional styles (platform-specific)
+   */
   style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
   testID?: string;
 }

package/src/TabBar/TabBar.native.tsx

@@ -10,6 +10,7 @@ import {
 } from './TabBar.styles';
 import type { TabBarProps, TabBarItem } from './types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 // Icon size mapping based on size variant
 const ICON_SIZES: Record<string, number> = {
@@ -33,7 +34,7 @@ function renderIcon(
   return icon;
 }
 
-const TabBar = forwardRef<View, TabBarProps>(({
+const TabBar = forwardRef<IdealystElement, TabBarProps>(({
   items,
   value: controlledValue,
   defaultValue,
@@ -154,7 +155,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
       }}
       style={{ width: '100%' }}
     >
-      <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
+      <View ref={ref as any} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
         {/* Animated indicator - render first so it's behind */}
         <Animated.View
           style={[

package/src/Text/Text.native.tsx

@@ -2,8 +2,9 @@ import { forwardRef } from 'react';
 import { Text as RNText } from 'react-native';
 import { TextProps } from './types';
 import { textStyles } from './Text.styles';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Text = forwardRef<RNText, TextProps>(({
+const Text = forwardRef<IdealystElement, TextProps>(({
   children,
   typography = 'body1',
   weight,
@@ -30,7 +31,7 @@ const Text = forwardRef<RNText, TextProps>(({
 
   return (
     <RNText
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       style={[textStyles.text({ color, typography, weight, align }), style]}
       testID={testID}

package/src/Text/Text.web.tsx

@@ -3,12 +3,13 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { TextProps } from './types';
 import { textStyles } from './Text.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Typography component for displaying text with predefined styles and semantic variants.
  * Supports multiple typography scales, colors, weights, and alignments.
  */
-const Text = forwardRef<HTMLSpanElement, TextProps>(({
+const Text = forwardRef<IdealystElement, TextProps>(({
   children,
   typography,
   weight,

package/src/TextArea/TextArea.native.tsx

@@ -4,8 +4,9 @@ import { textAreaStyles } from './TextArea.styles';
 import Text from '../Text';
 import type { TextAreaProps } from './types';
 import { getNativeFormAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const TextArea = forwardRef<TextInput, TextAreaProps>(({
+const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   value: controlledValue,
   defaultValue = '',
   onChange,
@@ -149,7 +150,7 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
 
       <View style={textareaContainerStyleComputed}>
         <TextInput
-          ref={ref}
+          ref={ref as any}
           {...nativeA11yProps}
           style={[
             textareaStyleComputed,

package/src/TextArea/TextArea.styles.tsx

@@ -117,7 +117,7 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
         fontSize: 12,
         variants: {
             hasError: {
-                true: { color: theme.intents.error.primary },
+                true: { color: theme.intents.danger.primary },
                 false: { color: theme.colors.text.secondary },
             },
         },
@@ -136,7 +136,7 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
         color: theme.colors.text.secondary,
         variants: {
             isAtLimit: {
-                true: { color: theme.intents.error.primary },
+                true: { color: theme.intents.danger.primary },
                 false: {},
             },
             isNearLimit: {

package/src/TextArea/TextArea.web.tsx

@@ -4,12 +4,13 @@ import { textAreaStyles } from './TextArea.styles';
 import type { TextAreaProps } from './types';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebFormAriaProps, combineIds, generateAccessibilityId } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Multi-line text input with auto-grow, character counting, and validation support.
  * Includes label, helper text, and error message display.
  */
-const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
+const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   value: controlledValue,
   defaultValue = '',
   onChange,

package/src/TextInput/TextInput.native.tsx

@@ -0,0 +1,300 @@
+import React, { useState, isValidElement, useMemo, useEffect, useRef, useCallback } from 'react';
+import { View, TextInput as RNTextInput, TouchableOpacity, Platform, TextInputProps as RNTextInputProps } from 'react-native';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
+import { useUnistyles } from 'react-native-unistyles';
+import { TextInputProps } from './types';
+import { textInputStyles } from './TextInput.styles';
+import { getNativeFormAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
+
+// Inner TextInput component that can be memoized to prevent re-renders
+// for Android secure text entry
+type InnerTextInputProps = {
+  inputRef: React.ForwardedRef<RNTextInput>;
+  value: string | undefined;
+  onChangeText: ((text: string) => void) | undefined;
+  isAndroidSecure: boolean;
+  textInputProps: Omit<RNTextInputProps, 'value' | 'defaultValue' | 'onChangeText'>;
+  inputStyle: any;
+};
+
+const InnerRNTextInput = React.memo<InnerTextInputProps>(
+  ({ inputRef, value, onChangeText, isAndroidSecure, textInputProps, inputStyle }) => {
+    return (
+      <RNTextInput
+        ref={inputRef as any}
+        // 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 TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
+  value,
+  onChangeText,
+  onFocus,
+  onBlur,
+  onPress,
+  placeholder,
+  disabled = false,
+  inputMode = 'text',
+  secureTextEntry = false,
+  leftIcon,
+  rightIcon,
+  showPasswordToggle,
+  autoCapitalize = 'sentences',
+  size = 'md',
+  type = 'outlined',
+  hasError = false,
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
+  style,
+  testID,
+  id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityRequired,
+  accessibilityInvalid,
+}, ref) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  // Track if this is a secure field that needs Android workaround
+  const isSecureField = inputMode === '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 = inputMode === 'password' || secureTextEntry;
+  const shouldShowPasswordToggle = isPasswordField && (showPasswordToggle !== false);
+
+  const getKeyboardType = useCallback((): 'default' | 'email-address' | 'numeric' => {
+    switch (inputMode) {
+      case 'email':
+        return 'email-address';
+      case 'number':
+        return 'numeric';
+      case 'password':
+      case 'text':
+      default:
+        return 'default';
+    }
+  }, [inputMode]);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    onFocus?.();
+  }, [onFocus]);
+
+  const handlePress = useCallback(() => {
+    onPress?.();
+  }, [onPress]);
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    onBlur?.();
+  }, [onBlur]);
+
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
+  // Memoized change handler for InnerTextInput
+  const handleChangeText = useCallback((text: string) => {
+    internalValueRef.current = text;
+    onChangeText?.(text);
+  }, [onChangeText]);
+
+  // Memoized input style
+  const inputStyle = useMemo(() => (textInputStyles.input as any)({}), []);
+
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    // Derive invalid state from hasError or explicit accessibilityInvalid
+    const isInvalid = accessibilityInvalid ?? hasError;
+
+    return getNativeFormAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'textbox',
+      accessibilityRequired,
+      accessibilityInvalid: isInvalid,
+    });
+  }, [
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityRequired,
+    accessibilityInvalid,
+    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)
+  textInputStyles.useVariants({
+    size,
+    margin,
+    marginVertical,
+    marginHorizontal,
+  });
+
+  // Compute dynamic styles - call as functions for theme reactivity
+  const containerStyle = (textInputStyles.container as any)({ type, focused: isFocused, hasError, disabled });
+  const leftIconContainerStyle = (textInputStyles.leftIconContainer as any)({});
+  const rightIconContainerStyle = (textInputStyles.rightIconContainer as any)({});
+  const passwordToggleStyle = (textInputStyles.passwordToggle as any)({});
+
+  // Helper to render left icon
+  const renderLeftIcon = () => {
+    if (!leftIcon) return null;
+
+    if (typeof leftIcon === 'string') {
+      return (
+        <MaterialDesignIcons
+          name={leftIcon}
+          size={iconSize}
+          color={iconColor}
+        />
+      );
+    } else if (isValidElement(leftIcon)) {
+      return leftIcon;
+    }
+
+    return null;
+  };
+
+  // Helper to render right icon (not password toggle)
+  const renderRightIcon = () => {
+    if (!rightIcon) return null;
+
+    if (typeof rightIcon === 'string') {
+      return (
+        <MaterialDesignIcons
+          name={rightIcon}
+          size={iconSize}
+          color={iconColor}
+        />
+      );
+    } else if (isValidElement(rightIcon)) {
+      return rightIcon;
+    }
+
+    return null;
+  };
+
+  return (
+    <View style={[containerStyle, style]} testID={testID} nativeID={id}>
+      {/* Left Icon */}
+      {leftIcon && (
+        <View style={leftIconContainerStyle}>
+          {renderLeftIcon()}
+        </View>
+      )}
+
+      {/* Input */}
+      <InnerRNTextInput
+        inputRef={ref}
+        value={value}
+        onChangeText={handleChangeText}
+        isAndroidSecure={needsAndroidSecureWorkaround}
+        inputStyle={inputStyle}
+        textInputProps={textInputProps}
+      />
+
+      {/* Right Icon or Password Toggle */}
+      {shouldShowPasswordToggle ? (
+        <TouchableOpacity
+          style={passwordToggleStyle}
+          onPress={togglePasswordVisibility}
+          disabled={disabled}
+          accessibilityLabel={isPasswordVisible ? 'Hide password' : 'Show password'}
+        >
+          <MaterialDesignIcons
+            name={isPasswordVisible ? 'eye-off' : 'eye'}
+            size={iconSize}
+            color={iconColor}
+          />
+        </TouchableOpacity>
+      ) : rightIcon ? (
+        <View style={rightIconContainerStyle}>
+          {renderRightIcon()}
+        </View>
+      ) : null}
+    </View>
+  );
+});
+
+TextInput.displayName = 'TextInput';
+
+export default TextInput;