@idealyst/components 1.2.106 → 1.2.108

package/src/Switch/Switch.web.tsx

@@ -17,6 +17,8 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
   checked = false,
   onChange,
   disabled = false,
+  error,
+  helperText,
   label,
   labelPosition = 'right',
   intent = 'primary',
@@ -40,6 +42,10 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
   accessibilityDescribedBy,
   accessibilityChecked,
 }, ref) => {
+  // Derive hasError from error prop
+  const hasError = Boolean(error);
+  // Determine if we need a wrapper (when error or helperText is present)
+  const needsWrapper = Boolean(error) || Boolean(helperText);
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -86,6 +92,7 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     size,
     checked,
     disabled: disabled as boolean,
+    hasError,
     labelPosition,
     margin,
     intent,
@@ -98,6 +105,14 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
   const thumbIconProps = getWebProps([switchStyles.thumbIcon as any]);
   const labelProps = getWebProps([switchStyles.label as any]);
 
+  // Wrapper and helperText styles
+  const wrapperStyleComputed = (switchStyles.wrapper as any)({});
+  const helperTextStyleComputed = (switchStyles.helperText as any)({ hasError });
+  const wrapperProps = getWebProps([wrapperStyleComputed, flattenStyle(style)]);
+  const helperTextProps = getWebProps([helperTextStyleComputed]);
+
+  const showFooter = Boolean(error) || Boolean(helperText);
+
   // Helper to render icon
   const renderIcon = () => {
     const iconToRender = checked ? onIcon : offIcon;
@@ -122,7 +137,7 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
   const computedButtonProps = getWebProps([switchStyles.switchContainer as any]);
 
   // Computed container props (for when label exists)
-  const computedContainerProps = getWebProps([switchStyles.container as any]);
+  const computedContainerProps = getWebProps([switchStyles.container as any, !needsWrapper && flattenStyle(style)].filter(Boolean));
 
   const mergedButtonRef = useMergeRefs(ref as React.Ref<HTMLButtonElement>, computedButtonProps.ref);
   const mergedContainerRef = useMergeRefs(ref as React.Ref<HTMLDivElement>, computedContainerProps.ref);
@@ -131,12 +146,12 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     <button
       {...computedButtonProps}
       {...ariaProps}
-      style={flattenStyle(style)}
-      ref={mergedButtonRef}
+      style={!label && !needsWrapper ? flattenStyle(style) : undefined}
+      ref={!label && !needsWrapper ? mergedButtonRef : undefined}
       onClick={handleClick}
       disabled={disabled}
       id={switchId}
-      data-testid={testID}
+      data-testid={!label && !needsWrapper ? testID : undefined}
     >
       <div {...trackProps}>
         <div {...thumbProps}>
@@ -146,24 +161,48 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     </button>
   );
 
-  if (label) {
+  // The switch + label row
+  const switchWithLabel = label ? (
+    <div
+      {...computedContainerProps}
+      ref={!needsWrapper ? mergedContainerRef : undefined}
+      id={!needsWrapper ? id : undefined}
+      data-testid={!needsWrapper ? testID : undefined}
+    >
+      {labelPosition === 'left' && (
+        <span {...labelProps}>{label}</span>
+      )}
+      {switchElement}
+      {labelPosition === 'right' && (
+        <span {...labelProps}>{label}</span>
+      )}
+    </div>
+  ) : switchElement;
+
+  // If wrapper needed for error/helperText
+  if (needsWrapper) {
     return (
-      <div
-        {...computedContainerProps}
-        ref={mergedContainerRef}
-      >
-        {labelPosition === 'left' && (
-          <span {...labelProps}>{label}</span>
-        )}
-        {switchElement}
-        {labelPosition === 'right' && (
-          <span {...labelProps}>{label}</span>
+      <div {...wrapperProps} id={id} data-testid={testID}>
+        {switchWithLabel}
+        {showFooter && (
+          <div style={{ flex: 1 }}>
+            {error && (
+              <span {...helperTextProps} role="alert">
+                {error}
+              </span>
+            )}
+            {!error && helperText && (
+              <span {...helperTextProps}>
+                {helperText}
+              </span>
+            )}
+          </div>
         )}
       </div>
     );
   }
 
-  return switchElement;
+  return switchWithLabel;
 });
 
 Switch.displayName = 'Switch';

package/src/Switch/types.ts

@@ -28,6 +28,16 @@ export interface SwitchProps extends FormInputStyleProps, SelectionAccessibility
    */
   disabled?: boolean;
 
+  /**
+   * Error message to display below the switch. When set, shows error styling.
+   */
+  error?: string;
+
+  /**
+   * Helper text to display below the switch. Hidden when error is set.
+   */
+  helperText?: string;
+
   /**
    * Label text to display next to the switch
    */

package/src/TextInput/TextInput.native.tsx

@@ -6,6 +6,7 @@ import { TextInputProps } from './types';
 import { textInputStyles } from './TextInput.styles';
 import { getNativeFormAccessibilityProps } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
+import Text from '../Text';
 
 // Inner TextInput component that can be memoized to prevent re-renders
 // for Android secure text entry
@@ -68,6 +69,9 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
   size = 'md',
   type = 'outlined',
   hasError = false,
+  error,
+  helperText,
+  label,
   // Spacing variants from FormInputStyleProps
   margin,
   marginVertical,
@@ -91,6 +95,12 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
+  // Derive hasError from error prop or hasError boolean
+  const computedHasError = Boolean(error) || hasError;
+
+  // Determine if we need a wrapper (when label, error, or helperText is present)
+  const needsWrapper = Boolean(label) || Boolean(error) || Boolean(helperText);
+
   // Track if this is a secure field that needs Android workaround
   const isSecureField = inputMode === 'password' || secureTextEntry;
   const needsAndroidSecureWorkaround = Platform.OS === 'android' && isSecureField && !isPasswordVisible;
@@ -160,12 +170,13 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
 
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
-    // Derive invalid state from hasError or explicit accessibilityInvalid
-    const isInvalid = accessibilityInvalid ?? hasError;
+    // Derive invalid state from computedHasError or explicit accessibilityInvalid
+    const isInvalid = accessibilityInvalid ?? computedHasError;
+    const computedLabel = accessibilityLabel ?? label ?? placeholder;
 
     return getNativeFormAccessibilityProps({
-      accessibilityLabel,
-      accessibilityHint,
+      accessibilityLabel: computedLabel,
+      accessibilityHint: accessibilityHint ?? (error || helperText),
       accessibilityDisabled: accessibilityDisabled ?? disabled,
       accessibilityHidden,
       accessibilityRole: accessibilityRole ?? 'textbox',
@@ -174,14 +185,18 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     });
   }, [
     accessibilityLabel,
+    label,
+    placeholder,
     accessibilityHint,
+    error,
+    helperText,
     accessibilityDisabled,
     disabled,
     accessibilityHidden,
     accessibilityRole,
     accessibilityRequired,
     accessibilityInvalid,
-    hasError,
+    computedHasError,
   ]);
 
   // Determine the textContentType for iOS AutoFill
@@ -224,7 +239,7 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     size,
     type,
     focused: isFocused,
-    hasError,
+    hasError: computedHasError,
     disabled,
     margin,
     marginVertical,
@@ -232,11 +247,19 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
   });
 
   // Compute dynamic styles - call as functions for theme reactivity
-  const containerStyle = (textInputStyles.container as any)({ type, focused: isFocused, hasError, disabled });
+  const containerStyle = (textInputStyles.container as any)({ type, focused: isFocused, hasError: computedHasError, disabled });
   const leftIconContainerStyle = (textInputStyles.leftIconContainer as any)({});
   const rightIconContainerStyle = (textInputStyles.rightIconContainer as any)({});
   const passwordToggleStyle = (textInputStyles.passwordToggle as any)({});
 
+  // Wrapper, label, and footer styles
+  const wrapperStyle = (textInputStyles.wrapper as any)({});
+  const labelStyle = (textInputStyles.label as any)({ disabled });
+  const footerStyle = (textInputStyles.footer as any)({});
+  const helperTextStyle = (textInputStyles.helperText as any)({ hasError: computedHasError });
+
+  const showFooter = Boolean(error) || Boolean(helperText);
+
   // Helper to render left icon
   const renderLeftIcon = () => {
     if (!leftIcon) return null;
@@ -275,44 +298,104 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     return null;
   };
 
+  // If no wrapper needed, return flat input container
+  if (!needsWrapper) {
+    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>
+    );
+  }
+
+  // With wrapper for label/error/helperText
   return (
-    <View style={[containerStyle, style]} testID={testID} nativeID={id}>
-      {/* Left Icon */}
-      {leftIcon && (
-        <View style={leftIconContainerStyle}>
-          {renderLeftIcon()}
-        </View>
+    <View style={[wrapperStyle, style]} testID={testID} nativeID={id}>
+      {label && (
+        <Text style={labelStyle}>{label}</Text>
       )}
 
-      {/* Input */}
-      <InnerRNTextInput
-        inputRef={ref}
-        value={value}
-        onChangeText={handleChangeText}
-        isAndroidSecure={needsAndroidSecureWorkaround}
-        inputStyle={inputStyle}
-        textInputProps={textInputProps}
-      />
+      <View style={containerStyle}>
+        {/* 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()}
+        {/* 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>
+
+      {showFooter && (
+        <View style={footerStyle}>
+          <View style={{ flex: 1 }}>
+            {error && <Text style={helperTextStyle}>{error}</Text>}
+            {!error && helperText && <Text style={helperTextStyle}>{helperText}</Text>}
+          </View>
         </View>
-      ) : null}
+      )}
     </View>
   );
 });

package/src/TextInput/TextInput.styles.tsx

@@ -75,15 +75,6 @@ export const textInputStyles = defineStyle('TextInput', (theme: Theme) => ({
                 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',
@@ -208,6 +199,53 @@ export const textInputStyles = defineStyle('TextInput', (theme: Theme) => ({
             },
         },
     }),
+
+    wrapper: (_props: TextInputDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        gap: 4,
+        variants: {
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
+        },
+    }),
+
+    label: (_props: TextInputDynamicProps) => ({
+        fontSize: 14,
+        fontWeight: '500' as const,
+        color: theme.colors.text.primary,
+        variants: {
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+        },
+    }),
+
+    helperText: (_props: TextInputDynamicProps) => ({
+        fontSize: 12,
+        variants: {
+            hasError: {
+                true: { color: theme.intents.danger.primary },
+                false: { color: theme.colors.text.secondary },
+            },
+        },
+    }),
+
+    footer: (_props: TextInputDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        justifyContent: 'space-between' as const,
+        alignItems: 'center' as const,
+        gap: 4,
+    }),
 }));
 
 // Legacy export for backwards compatibility