@idealyst/components 1.2.63 → 1.2.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.63",
+  "version": "1.2.65",
   "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.63",
+    "@idealyst/theme": "^1.2.65",
     "@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.63",
+    "@idealyst/theme": "^1.2.65",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/TextArea/TextArea.native.tsx

@@ -146,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)({
@@ -168,7 +168,8 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
           style={[
             textareaStyleComputed,
             {
-              textAlignVertical: 'top',
+              // Center text vertically when autoGrow (single-line behavior), top-align for multi-line
+              textAlignVertical: autoGrow ? 'center' : 'top',
               backgroundColor: 'transparent',
             },
             maxHeight && { maxHeight },

package/src/TextArea/TextArea.styles.tsx

@@ -127,14 +127,15 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
                 fontSize: theme.sizes.$textarea.fontSize,
                 padding: theme.sizes.$textarea.padding,
                 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: {},
+                false: {
+                    // No minHeight - let rows attribute control height
+                },
             },
             disabled: {
                 true: {

package/src/TextArea/TextArea.web.tsx

@@ -139,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;
@@ -198,7 +207,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   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,