@idealyst/components 1.2.29 → 1.2.31

package/src/TextInput/TextInput.styles.tsx

@@ -0,0 +1,207 @@
+/**
+ * TextInput styles using defineStyle with $iterator expansion.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+type TextInputType = 'outlined' | 'filled' | 'bare';
+
+export type TextInputDynamicProps = {
+    type?: TextInputType;
+    focused?: boolean;
+    hasError?: boolean;
+    disabled?: boolean;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
+
+/**
+ * TextInput styles with type/state handling.
+ */
+export const textInputStyles = defineStyle('TextInput', (theme: Theme) => ({
+    container: ({ type = 'outlined', focused = false, hasError = false, disabled = false }: TextInputDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        width: '100%',
+        minWidth: 0,
+        borderRadius: theme.radii.md,
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+        borderColor: theme.colors.border.primary,
+        variants: {
+            type: {
+                outlined: {
+                    backgroundColor: theme.colors.surface.primary,
+                    borderColor: theme.colors.border.primary,
+                },
+                filled: {
+                    backgroundColor: theme.colors.surface.secondary,
+                    borderColor: 'transparent',
+                },
+                bare: {
+                    backgroundColor: 'transparent',
+                    borderWidth: 0,
+                    borderColor: 'transparent',
+                },
+            },
+            focused: {
+                true: {
+                    borderColor: theme.intents.primary.primary,
+                },
+                false: {
+
+                },
+            },
+            disabled: {
+                true: { opacity: 0.8, _web: { cursor: 'not-allowed' } },
+                false: { opacity: 1 }
+            },
+            hasError: {
+                true: { borderColor: theme.intents.danger.primary },
+                false: { borderColor: theme.colors.border.primary },
+            },
+            // $iterator expands for each input size
+            size: {
+                height: theme.sizes.$input.height,
+                paddingHorizontal: theme.sizes.$input.paddingHorizontal,
+            },
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
+        },
+        _web: {
+            boxSizing: 'border-box',
+            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+        }
+    }),
+
+    input: (_props: TextInputDynamicProps) => ({
+        flex: 1,
+        minWidth: 0,
+        backgroundColor: 'transparent' as const,
+        color: theme.colors.text.primary,
+        fontWeight: '400' as const,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$input.fontSize,
+            },
+        },
+        _web: {
+            border: 'none',
+            outline: 'none',
+            fontFamily: 'inherit',
+        },
+    }),
+
+    leftIconContainer: (_props: TextInputDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+        variants: {
+            size: {
+                width: theme.sizes.$input.iconSize,
+                marginRight: theme.sizes.$input.iconMargin,
+            },
+        },
+    }),
+
+    rightIconContainer: (_props: TextInputDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+        variants: {
+            size: {
+                width: theme.sizes.$input.iconSize,
+                marginLeft: theme.sizes.$input.iconMargin,
+            },
+        },
+    }),
+
+    leftIcon: (_props: TextInputDynamicProps) => ({
+        color: theme.colors.text.secondary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$input.iconSize,
+                width: theme.sizes.$input.iconSize,
+                height: theme.sizes.$input.iconSize,
+            },
+        },
+    }),
+
+    rightIcon: (_props: TextInputDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+        color: theme.colors.text.secondary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$input.iconSize,
+                width: theme.sizes.$input.iconSize,
+                height: theme.sizes.$input.iconSize,
+            },
+        },
+    }),
+
+    passwordToggle: (_props: TextInputDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+        padding: 0,
+        variants: {
+            size: {
+                marginLeft: theme.sizes.$input.iconMargin,
+                width: theme.sizes.$input.iconSize,
+                height: theme.sizes.$input.iconSize,
+            },
+        },
+        _web: {
+            appearance: 'none',
+            background: 'none',
+            backgroundColor: 'transparent',
+            border: 'none',
+            outline: 'none',
+            cursor: 'pointer',
+            margin: 0,
+            _hover: { opacity: 0.7 },
+            _active: { opacity: 0.5 },
+        },
+    }),
+
+    passwordToggleIcon: (_props: TextInputDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+        color: theme.colors.text.secondary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$input.iconSize,
+                width: theme.sizes.$input.iconSize,
+                height: theme.sizes.$input.iconSize,
+            },
+        },
+    }),
+}));
+
+// Legacy export for backwards compatibility
+export { textInputStyles as inputStyles };

package/src/TextInput/TextInput.web.tsx

@@ -0,0 +1,301 @@
+import React, { isValidElement, useState, useMemo, useRef } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { useUnistyles } from 'react-native-unistyles';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { isIconName } from '../Icon/icon-resolver';
+import useMergeRefs from '../hooks/useMergeRefs';
+import { textInputStyles } from './TextInput.styles';
+import { TextInputProps } from './types';
+import { getWebFormAriaProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
+
+/**
+ * Single-line text input field with support for icons, password visibility toggle, and validation states.
+ * Available in outlined and filled variants with multiple sizes.
+ */
+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,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+  accessibilityControls,
+  accessibilityExpanded,
+  accessibilityPressed,
+  accessibilityOwns,
+  accessibilityHasPopup,
+  accessibilityRequired,
+  accessibilityInvalid,
+  accessibilityErrorMessage,
+  accessibilityAutoComplete,
+}, ref) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  // Determine if we should show password toggle
+  const isPasswordField = inputMode === 'password' || secureTextEntry;
+  const shouldShowPasswordToggle = isPasswordField && (showPasswordToggle !== false);
+
+  // Get theme for icon sizes and colors
+  const { theme } = useUnistyles();
+  const iconSize = theme.sizes.input[size].iconSize;
+  const iconColor = theme.colors.text.secondary;
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  const getInputType = () => {
+    // Handle password visibility
+    if (isPasswordField && !isPasswordVisible) {
+      return 'password';
+    }
+
+    switch (inputMode) {
+      case 'email':
+        return 'email';
+      case 'number':
+        return 'number';
+      case 'password':
+        return 'text'; // When visible
+      case 'text':
+      default:
+        return 'text';
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChangeText) {
+      onChangeText(e.target.value);
+    }
+  };
+
+  const handlePress = (e: React.MouseEvent<HTMLDivElement>) => {
+    // For web compatibility, we can trigger onFocus when pressed
+    e.preventDefault();
+    e.stopPropagation();
+    if (onPress) {
+      onPress();
+    }
+  }
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsFocused(true);
+    if (onFocus) {
+      onFocus();
+    }
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (onBlur) {
+      onBlur();
+    }
+  };
+
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
+  // Apply variants (for size and spacing)
+  textInputStyles.useVariants({
+    size,
+    margin,
+    marginVertical,
+    marginHorizontal,
+  });
+
+  // Get web props for all styled elements (all styles are dynamic functions)
+  const dynamicContainerStyle = (textInputStyles.container as any)({ type, focused: isFocused, hasError, disabled });
+  const {ref: containerStyleRef, ...containerProps} = getWebProps([dynamicContainerStyle, style]);
+  const leftIconContainerProps = getWebProps([(textInputStyles.leftIconContainer as any)({})]);
+  const rightIconContainerProps = getWebProps([(textInputStyles.rightIconContainer as any)({})]);
+  const passwordToggleProps = getWebProps([(textInputStyles.passwordToggle as any)({})]);
+
+  // Get input props
+  const inputWebProps = getWebProps([(textInputStyles.input as any)({})]);
+
+  // Generate accessibility props
+  const ariaProps = useMemo(() => {
+    // Derive invalid state from hasError or explicit accessibilityInvalid
+    const isInvalid = accessibilityInvalid ?? hasError;
+
+    return getWebFormAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'textbox',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityControls,
+      accessibilityExpanded,
+      accessibilityPressed,
+      accessibilityOwns,
+      accessibilityHasPopup,
+      accessibilityRequired,
+      accessibilityInvalid: isInvalid,
+      accessibilityErrorMessage,
+      accessibilityAutoComplete,
+    });
+  }, [
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+    accessibilityOwns,
+    accessibilityHasPopup,
+    accessibilityRequired,
+    accessibilityInvalid,
+    hasError,
+    accessibilityErrorMessage,
+    accessibilityAutoComplete,
+  ]);
+
+  // Merge the forwarded ref with unistyles ref for the input
+  const mergedInputRef = useMergeRefs(ref, inputWebProps.ref);
+
+  // Helper to render left icon
+  const renderLeftIcon = () => {
+    if (!leftIcon) return null;
+
+    if (isIconName(leftIcon)) {
+      return (
+        <IconSvg
+          name={leftIcon}
+          size={iconSize}
+          color={iconColor}
+          aria-label={leftIcon}
+        />
+      );
+    } else if (isValidElement(leftIcon)) {
+      return <span {...leftIconContainerProps}>{leftIcon}</span>;
+    }
+
+    return null;
+  };
+
+  // Helper to render right icon (not password toggle)
+  const renderRightIcon = () => {
+    if (!rightIcon) return null;
+
+    if (isIconName(rightIcon)) {
+      return (
+        <IconSvg
+          name={rightIcon}
+          size={iconSize}
+          color={iconColor}
+          aria-label={rightIcon}
+        />
+      );
+    } else if (isValidElement(rightIcon)) {
+      return <span {...rightIconContainerProps}>{rightIcon}</span>;
+    }
+
+    return null;
+  };
+
+  // Helper to render password toggle icon
+  const renderPasswordToggleIcon = () => {
+    const iconName = isPasswordVisible ? 'eye-off' : 'eye';
+    return (
+      <IconSvg
+        name={iconName}
+        size={iconSize}
+        color={iconColor}
+        aria-label={iconName}
+      />
+    );
+  };
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+    const handleContainerPress = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    containerRef.current?.focus();
+  }
+
+  const mergedContainerRef = useMergeRefs(containerRef, containerStyleRef);
+
+  return (
+    <div onClick={handleContainerPress} ref={mergedContainerRef} {...containerProps} id={id} data-testid={testID}>
+      {/* Left Icon */}
+      {leftIcon && (
+        <span {...leftIconContainerProps}>
+          {renderLeftIcon()}
+        </span>
+      )}
+
+      {/* Input */}
+      <input
+        {...inputWebProps}
+        {...ariaProps}
+        ref={mergedInputRef}
+        type={getInputType()}
+        value={value}
+        onClick={handlePress}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        placeholder={placeholder}
+        disabled={disabled}
+        autoCapitalize={autoCapitalize}
+      />
+
+      {/* Right Icon or Password Toggle */}
+      {shouldShowPasswordToggle ? (
+        <button
+          {...passwordToggleProps}
+          onClick={togglePasswordVisibility}
+          disabled={disabled}
+          aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
+          type="button"
+          tabIndex={-1}
+        >
+          {renderPasswordToggleIcon()}
+        </button>
+      ) : rightIcon ? (
+        <span {...rightIconContainerProps}>
+          {renderRightIcon()}
+        </span>
+      ) : null}
+    </div>
+  );
+});
+
+TextInput.displayName = 'TextInput';
+
+export default TextInput;

package/src/TextInput/index.native.ts

@@ -0,0 +1,3 @@
+// React Native-specific TextInput export
+export { default } from './TextInput.native';
+export * from './types';

package/src/TextInput/index.ts

@@ -0,0 +1,5 @@
+import TextInputComponent from './TextInput.web';
+
+export default TextInputComponent;
+export { TextInputComponent as TextInput };
+export * from './types';

package/src/TextInput/index.web.ts

@@ -0,0 +1,5 @@
+import TextInputComponent from './TextInput.web';
+
+export default TextInputComponent;
+export { TextInputComponent as TextInput };
+export * from './types';

package/src/TextInput/types.ts

@@ -0,0 +1,163 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icon-types';
+import { Intent, Size } from '@idealyst/theme';
+import { FormInputStyleProps } from '../utils/viewStyleProps';
+import { FormAccessibilityProps } from '../utils/accessibility';
+
+// Component-specific type aliases for future extensibility
+export type TextInputIntent = Intent;
+export type TextInputSize = Size;
+export type TextInputType = 'outlined' | 'filled' | 'bare';
+
+/**
+ * Input mode for keyboard type on mobile platforms.
+ * This prop only affects React Native - on web, browser handles keyboard automatically.
+ * @platform native
+ */
+export type TextInputMode = 'text' | 'email' | 'password' | 'number';
+
+/**
+ * Single-line text input field with support for icons, validation states, and multiple visual styles.
+ * Includes built-in password visibility toggle and platform-specific keyboard handling.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextInput
+ *   value={email}
+ *   onChangeText={setEmail}
+ *   placeholder="Enter email"
+ *   inputMode="email"
+ * />
+ *
+ * // Password with toggle
+ * <TextInput
+ *   value={password}
+ *   onChangeText={setPassword}
+ *   inputMode="password"
+ *   secureTextEntry
+ * />
+ *
+ * // With icons and validation
+ * <TextInput
+ *   value={search}
+ *   onChangeText={setSearch}
+ *   leftIcon="magnify"
+ *   intent="danger"
+ * />
+ * ```
+ */
+export interface TextInputProps extends FormInputStyleProps, FormAccessibilityProps {
+  /**
+   * The current value of the input
+   */
+  value?: string;
+
+  /**
+   * Called when the text changes
+   */
+  onChangeText?: (text: string) => void;
+
+  /**
+   * Called when the input receives focus
+   */
+  onFocus?: () => void;
+
+  /**
+   * Called when the input loses focus
+   */
+  onBlur?: () => void;
+
+  /**
+   * Called when the input is pressed
+   */
+  onPress?: () => void;
+
+  /**
+   * Placeholder text shown when the input is empty
+   */
+  placeholder?: string;
+
+  /**
+   * Whether the input is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * The type of input keyboard to show on mobile platforms.
+   * This prop only affects React Native - on web, browser handles keyboard automatically.
+   * @platform native
+   */
+  inputMode?: TextInputMode;
+
+  /**
+   * Whether to hide the text (for passwords)
+   */
+  secureTextEntry?: boolean;
+
+  /**
+   * Icon to display on the left side of the input.
+   * Can be an icon name string or a custom React node.
+   */
+  leftIcon?: IconName | React.ReactNode;
+
+  /**
+   * Icon to display on the right side of the input.
+   * Can be an icon name string or a custom React node.
+   */
+  rightIcon?: IconName | React.ReactNode;
+
+  /**
+   * Show password visibility toggle for password inputs.
+   * Defaults to true when inputMode="password" or secureTextEntry is true.
+   */
+  showPasswordToggle?: boolean;
+
+  /**
+   * Auto-capitalization behavior
+   */
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+
+  /**
+   * Size variant of the input
+   */
+  size?: TextInputSize;
+
+  /**
+   * Visual style type of the input
+   */
+  type?: TextInputType;
+
+  /**
+   * The intent/color scheme of the input (for focus states, validation, etc.)
+   */
+  intent?: TextInputIntent;
+
+  /**
+   * Whether the input has an error state
+   * @deprecated Use intent="danger" instead
+   */
+  hasError?: boolean;
+
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}
+
+// Legacy type aliases for backwards compatibility
+/** @deprecated Use TextInputIntent instead */
+export type InputIntent = TextInputIntent;
+/** @deprecated Use TextInputSize instead */
+export type InputSize = TextInputSize;
+/** @deprecated Use TextInputType instead */
+export type InputType = TextInputType;
+/** @deprecated Use TextInputMode instead */
+export type InputInputType = TextInputMode;
+/** @deprecated Use TextInputProps instead */
+export type InputProps = TextInputProps;

package/src/Tooltip/Tooltip.native.tsx

@@ -3,8 +3,9 @@ import { View, Modal, Text, Pressable } from 'react-native';
 import { tooltipStyles } from './Tooltip.styles';
 import type { TooltipProps } from './types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Tooltip = forwardRef<View, TooltipProps>(({
+const Tooltip = forwardRef<IdealystElement, TooltipProps>(({
   content,
   children,
   placement = 'top',
@@ -144,7 +145,7 @@ const Tooltip = forwardRef<View, TooltipProps>(({
 
   return (
     <>
-      <View ref={ref} nativeID={id} collapsable={false} style={style} {...nativeA11yProps}>
+      <View ref={ref as any} nativeID={id} collapsable={false} style={style} {...nativeA11yProps}>
         {trigger}
       </View>