@idealyst/components 1.2.70 → 1.2.71

package/package.json

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

package/src/IconButton/IconButton.native.tsx

@@ -2,10 +2,12 @@ import { forwardRef, useMemo } from 'react';
 import { ActivityIndicator, StyleSheet as RNStyleSheet, TouchableOpacity, View } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import { useUnistyles } from 'react-native-unistyles';
 import { iconButtonStyles } from './IconButton.styles';
 import { IconButtonProps } from './types';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
+import type { Theme } from '@idealyst/theme';
 
 const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) => {
   const {
@@ -34,9 +36,15 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
     accessibilityPressed,
   } = props;
 
+  // Get theme for icon size
+  const { theme } = useUnistyles() as { theme: Theme };
+
   // Button is effectively disabled when loading
   const isDisabled = disabled || loading;
 
+  // Get icon size directly from theme
+  const iconSize = theme.sizes.iconButton[size]?.iconSize ?? 24;
+
   // Determine the handler to use - onPress takes precedence
   const pressHandler = onPress ?? onClick;
 
@@ -63,9 +71,6 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
   // Gradient is only applicable to contained buttons
   const showGradient = gradient && type === 'contained';
 
-  // Get icon size from the computed icon style (from theme)
-  const iconSize = iconStyle?.width ?? iconStyle?.height ?? 24;
-
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     const computedLabel = accessibilityLabel ?? (typeof icon === 'string' ? icon : undefined);
@@ -193,19 +198,15 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
       {renderGradientLayer()}
       {/* Centered spinner overlay */}
       {loading && (
-        <View style={RNStyleSheet.absoluteFill}>
-          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-            <ActivityIndicator
-              size="small"
-              color={spinnerColor}
-            />
-          </View>
+        <View style={[RNStyleSheet.absoluteFill, { justifyContent: 'center', alignItems: 'center' }]}>
+          <ActivityIndicator
+            size="small"
+            color={spinnerColor}
+          />
         </View>
       )}
-      {/* Centered icon container */}
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        {renderIcon()}
-      </View>
+      {/* Icon renders directly - TouchableOpacity has alignItems/justifyContent center */}
+      {renderIcon()}
     </TouchableOpacity>
   );
 });

package/src/IconButton/IconButton.web.tsx

@@ -1,11 +1,13 @@
 import React, { isValidElement, forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
+import { useUnistyles } from 'react-native-unistyles';
 import { IconButtonProps } from './types';
 import { iconButtonStyles } from './IconButton.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
+import type { Theme } from '@idealyst/theme';
 
 /**
  * Circular icon button component with multiple visual variants and sizes.
@@ -40,9 +42,15 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
     accessibilityHasPopup,
   } = props;
 
+  // Get theme for icon size
+  const { theme } = useUnistyles() as { theme: Theme };
+
   // Button is effectively disabled when loading
   const isDisabled = disabled || loading;
 
+  // Get icon size directly from theme
+  const iconSize = theme.sizes.iconButton[size]?.iconSize ?? 24;
+
   // Apply variants for size, disabled, gradient
   iconButtonStyles.useVariants({
     size,
@@ -121,9 +129,6 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
   const iconStyleArray = [iconStyleComputed];
   const iconProps = getWebProps(iconStyleArray);
 
-  // Extract icon size from computed styles for explicit sizing
-  const iconSize = iconStyleComputed?.width ?? iconStyleComputed?.height ?? 24;
-
   // Spinner styles that match the icon color
   const spinnerStyleArray = [(iconButtonStyles.spinner as any)(dynamicProps)];
   const spinnerProps = getWebProps(spinnerStyleArray);

package/src/TextArea/TextArea.native.tsx

@@ -185,7 +185,12 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
             // For autoGrow: don't set height, let it grow naturally with minHeight constraint
             // For fixed height: use rows-based height
             autoGrow
-              ? { minHeight: minHeight ?? 44, maxHeight: maxHeight }
+              ? {
+                  minHeight: minHeight ?? 44,
+                  maxHeight: maxHeight,
+                  // Force height to minHeight when empty to ensure shrinking
+                  ...(value === '' ? { height: minHeight ?? 44 } : {}),
+                }
               : { height: rows * 24 },
             textareaStyle,
           ]}