@idealyst/components 1.2.62 → 1.2.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.62",
+  "version": "1.2.64",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.62",
+    "@idealyst/theme": "^1.2.64",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -107,7 +107,7 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.62",
+    "@idealyst/theme": "^1.2.64",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/TextArea/TextArea.native.tsx

@@ -23,6 +23,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   showCharacterCount = false,
   intent = 'primary',
   size = 'md',
+  type = 'outlined',
   // Spacing variants from FormInputStyleProps
   margin,
   marginVertical,
@@ -44,6 +45,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   accessibilityErrorMessage,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
+  const [isFocused, setIsFocused] = useState(false);
   const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
 
   const value = controlledValue !== undefined ? controlledValue : internalValue;
@@ -89,8 +91,11 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   textAreaStyles.useVariants({
     size,
     intent,
+    type,
+    focused: isFocused,
     disabled,
     hasError,
+    autoGrow,
     resize: 'none',
     isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
     isAtLimit: maxLength ? value.length >= maxLength : false,
@@ -111,6 +116,14 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
     onChange?.(newValue);
   };
 
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
   const handleContentSizeChange = (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
     if (!autoGrow) return;
 
@@ -133,8 +146,8 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   // Get dynamic styles - call as functions for theme reactivity
   const containerStyleComputed = (textAreaStyles.container as any)({});
   const labelStyleComputed = (textAreaStyles.label as any)({ disabled });
-  const textareaContainerStyleComputed = (textAreaStyles.textareaContainer as any)({});
-  const textareaStyleComputed = (textAreaStyles.textarea as any)({ intent, disabled, hasError });
+  const textareaContainerStyleComputed = (textAreaStyles.textareaContainer as any)({ type, focused: isFocused, hasError, disabled });
+  const textareaStyleComputed = (textAreaStyles.textarea as any)({ autoGrow, disabled });
   const footerStyleComputed = (textAreaStyles.footer as any)({});
   const helperTextStyleComputed = (textAreaStyles.helperText as any)({ hasError });
   const characterCountStyleComputed = (textAreaStyles.characterCount as any)({
@@ -164,6 +177,8 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
           ]}
           value={value}
           onChangeText={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           onContentSizeChange={handleContentSizeChange}
           placeholder={placeholder}
           editable={!disabled}

package/src/TextArea/TextArea.styles.tsx

@@ -12,11 +12,16 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
+type TextAreaType = 'outlined' | 'filled' | 'bare';
+
 export type TextAreaVariants = {
     size: Size;
     intent: Intent;
+    type: TextAreaType;
+    focused: boolean;
     disabled: boolean;
     hasError: boolean;
+    autoGrow: boolean;
     isNearLimit: boolean;
     isAtLimit: boolean;
     margin?: ViewStyleSize;
@@ -70,19 +75,45 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
         position: 'relative' as const,
         width: '100%',
         borderWidth: 1,
+        borderStyle: 'solid' as const,
         borderColor: theme.colors.border.primary,
         borderRadius: theme.radii.md,
         backgroundColor: theme.colors.surface.primary,
         overflow: 'hidden' as const,
         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 },
+                true: { opacity: 0.8, _web: { cursor: 'not-allowed' } },
                 false: { opacity: 1 },
             },
+            hasError: {
+                true: { borderColor: theme.intents.danger.primary },
+                false: {},
+            },
         },
         _web: {
             boxSizing: 'border-box',
-            border: `1px solid ${theme.colors.border.primary}`,
+            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
         },
     }),
 
@@ -98,6 +129,13 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
                 lineHeight: theme.sizes.$textarea.lineHeight,
                 minHeight: theme.sizes.$textarea.minHeight,
             },
+            autoGrow: {
+                true: {
+                    // Use input height as minHeight when autoGrow is enabled
+                    minHeight: theme.sizes.$input.height,
+                },
+                false: {},
+            },
             disabled: {
                 true: {
                     opacity: 0.5,

package/src/TextArea/TextArea.web.tsx

@@ -28,6 +28,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   showCharacterCount = false,
   intent = 'primary',
   size = 'md',
+  type = 'outlined',
   // Spacing variants from FormInputStyleProps
   margin,
   marginVertical,
@@ -55,6 +56,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   accessibilityAutoComplete,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
+  const [isFocused, setIsFocused] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const value = controlledValue !== undefined ? controlledValue : internalValue;
@@ -125,8 +127,11 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   textAreaStyles.useVariants({
     size,
     intent,
+    type,
+    focused: isFocused,
     disabled,
     hasError,
+    autoGrow,
     isNearLimit,
     isAtLimit,
     margin,
@@ -134,13 +139,22 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
     marginHorizontal,
   });
 
-  // Get static styles (cast to any for Unistyles variant compatibility)
-  const containerProps = getWebProps([textAreaStyles.container as any, style as any]);
-  const labelProps = getWebProps([textAreaStyles.label as any]);
-  const textareaContainerProps = getWebProps([textAreaStyles.textareaContainer as any]);
-  const footerProps = getWebProps([textAreaStyles.footer as any]);
-  const helperTextProps = getWebProps([textAreaStyles.helperText as any]);
-  const characterCountProps = getWebProps([textAreaStyles.characterCount as any]);
+  // Get dynamic styles - call as functions for theme reactivity
+  const containerStyleComputed = (textAreaStyles.container as any)({});
+  const labelStyleComputed = (textAreaStyles.label as any)({ disabled });
+  const textareaContainerStyleComputed = (textAreaStyles.textareaContainer as any)({ type, focused: isFocused, hasError, disabled });
+  const textareaStyleComputed = (textAreaStyles.textarea as any)({ autoGrow, disabled });
+  const footerStyleComputed = (textAreaStyles.footer as any)({});
+  const helperTextStyleComputed = (textAreaStyles.helperText as any)({ hasError });
+  const characterCountStyleComputed = (textAreaStyles.characterCount as any)({ isNearLimit, isAtLimit });
+
+  // Convert to web props
+  const containerProps = getWebProps([containerStyleComputed, style as any]);
+  const labelProps = getWebProps([labelStyleComputed]);
+  const textareaContainerProps = getWebProps([textareaContainerStyleComputed]);
+  const footerProps = getWebProps([footerStyleComputed]);
+  const helperTextProps = getWebProps([helperTextStyleComputed]);
+  const characterCountProps = getWebProps([characterCountStyleComputed]);
 
   const adjustHeight = () => {
     if (!autoGrow || !textareaRef.current) return;
@@ -182,10 +196,18 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
     onChange?.(newValue);
   };
 
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
   const showFooter = (error || helperText) || (showCharacterCount && maxLength);
 
   const computedTextareaProps = getWebProps([
-    textAreaStyles.textarea as any,
+    textareaStyleComputed,
     textareaStyle as any,
     { resize } as any, // Apply resize as inline style since it's CSS-only
     minHeight ? { minHeight: `${minHeight}px` } : null,
@@ -210,6 +232,8 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
           ref={mergedTextareaRef}
           value={value}
           onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           placeholder={placeholder}
           disabled={disabled}
           rows={autoGrow ? undefined : rows}

package/src/TextArea/types.ts

@@ -7,6 +7,7 @@ import { FormAccessibilityProps } from '../utils/accessibility';
 export type TextAreaIntentVariant = Intent;
 export type TextAreaSizeVariant = Size;
 export type TextAreaResizeVariant = 'none' | 'vertical' | 'horizontal' | 'both';
+export type TextAreaType = 'outlined' | 'filled' | 'bare';
 
 export interface TextAreaProps extends FormInputStyleProps, FormAccessibilityProps {
   value?: string;
@@ -26,6 +27,11 @@ export interface TextAreaProps extends FormInputStyleProps, FormAccessibilityPro
   showCharacterCount?: boolean;
   intent?: TextAreaIntentVariant;
   size?: TextAreaSizeVariant;
+  /**
+   * Visual style type of the textarea
+   * @default 'outlined'
+   */
+  type?: TextAreaType;
   style?: StyleProp<ViewStyle>;
   textareaStyle?: StyleProp<TextStyle>;
   testID?: string;

package/src/TextInput/TextInput.native.tsx

@@ -83,6 +83,9 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
   accessibilityRole,
   accessibilityRequired,
   accessibilityInvalid,
+  // Submit handling
+  onSubmitEditing,
+  returnKeyType = 'default',
 }, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -141,6 +144,10 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     setIsPasswordVisible(!isPasswordVisible);
   };
 
+  const handleSubmitEditing = useCallback(() => {
+    onSubmitEditing?.();
+  }, [onSubmitEditing]);
+
   // Memoized change handler for InnerTextInput
   const handleChangeText = useCallback((text: string) => {
     internalValueRef.current = text;
@@ -186,6 +193,8 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     autoCapitalize,
     onFocus: handleFocus,
     onBlur: handleBlur,
+    onSubmitEditing: handleSubmitEditing,
+    returnKeyType,
     placeholderTextColor: '#999999',
     ...nativeA11yProps,
   }), [
@@ -198,6 +207,8 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     autoCapitalize,
     handleFocus,
     handleBlur,
+    handleSubmitEditing,
+    returnKeyType,
     nativeA11yProps,
   ]);
 

package/src/TextInput/TextInput.web.tsx

@@ -55,6 +55,9 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
   accessibilityInvalid,
   accessibilityErrorMessage,
   accessibilityAutoComplete,
+  onSubmitEditing,
+  // returnKeyType is native-only, ignored on web
+  returnKeyType: _returnKeyType,
 }, ref) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
@@ -124,6 +127,12 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     setIsPasswordVisible(!isPasswordVisible);
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && onSubmitEditing) {
+      onSubmitEditing();
+    }
+  };
+
   // Apply variants (for size, type, and spacing)
   textInputStyles.useVariants({
     size,
@@ -276,6 +285,7 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
         placeholder={placeholder}
         disabled={disabled}
         autoCapitalize={autoCapitalize}

package/src/TextInput/types.ts

@@ -16,6 +16,13 @@ export type TextInputType = 'outlined' | 'filled' | 'bare';
  */
 export type TextInputMode = 'text' | 'email' | 'password' | 'number';
 
+/**
+ * Return key type for mobile keyboard.
+ * Controls what the return/submit button on the keyboard displays.
+ * @platform native
+ */
+export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send' | 'default';
+
 /**
  * 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.
@@ -139,6 +146,20 @@ export interface TextInputProps extends FormInputStyleProps, FormAccessibilityPr
    */
   hasError?: boolean;
 
+  /**
+   * Called when the user submits the input (presses Enter on web, or the return key on mobile).
+   * Use this for form submission or moving to the next field.
+   */
+  onSubmitEditing?: () => void;
+
+  /**
+   * Determines how the return key on mobile keyboard should look.
+   * Has no effect on web.
+   * @platform native
+   * @default 'default'
+   */
+  returnKeyType?: ReturnKeyType;
+
   /**
    * Additional styles (platform-specific)
    */