@idealyst/components 1.2.68 → 1.2.70

package/README.md

@@ -99,7 +99,7 @@ The library includes 14 core components organized by category:
 
 | Component | Description | Key Props |
 |-----------|-------------|-----------|
-| **[Card](src/Card/README.md)** | Container for grouped content | `variant`, `padding`, `clickable`, `intent` |
+| **[Card](src/Card/README.md)** | Container for grouped content | `variant`, `padding`, `onPress`, `intent` |
 | **[Badge](src/Badge/README.md)** | Status indicators and count displays | `variant`, `color`, `size` |
 | **[Avatar](src/Avatar/README.md)** | User profile pictures with fallback | `src`, `fallback`, `size`, `shape` |
 
@@ -175,7 +175,7 @@ import { View, Card, Text, Avatar, Badge } from '@idealyst/components';
 
 <View spacing="md">
   {items.map(item => (
-    <Card key={item.id} clickable onPress={() => navigate(item)}>
+    <Card key={item.id} onPress={() => navigate(item)}>
       <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center' }}>
         <Avatar src={item.avatar} fallback={item.initials} />
         <View spacing="xs" style={{ flex: 1 }}>

package/package.json

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

package/src/Card/Card.native.tsx

@@ -1,21 +1,16 @@
-import { forwardRef, useMemo, useEffect, useRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { View, Pressable } from 'react-native';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
 
-// Track if we've logged the onClick deprecation warning (log once per session)
-let hasLoggedOnClickWarning = false;
-
 const Card = forwardRef<IdealystElement, CardProps>(({
   children,
   type = 'elevated',
   radius = 'md',
   intent: _intent = 'neutral',
-  clickable = false,
   onPress,
-  onClick,
   disabled = false,
   onLayout,
   // Spacing variants from ContainerStyleProps
@@ -38,21 +33,8 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   accessibilityRole,
   accessibilityPressed,
 }, ref) => {
-  const hasWarnedRef = useRef(false);
-
-  // Warn about onClick usage (deprecated)
-  useEffect(() => {
-    if (onClick && !hasWarnedRef.current && !hasLoggedOnClickWarning) {
-      hasWarnedRef.current = true;
-      hasLoggedOnClickWarning = true;
-      console.warn(
-        '[Card] onClick is deprecated. Use onPress instead.\n' +
-        'Card is a cross-platform component that follows React Native conventions.\n' +
-        'onClick will be removed in a future version.\n\n' +
-        'Migration: Replace onClick={handler} with onPress={handler}'
-      );
-    }
-  }, [onClick]);
+  // Derive pressable from whether onPress is provided
+  const pressable = !!onPress;
 
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
@@ -61,16 +43,16 @@ const Card = forwardRef<IdealystElement, CardProps>(({
       accessibilityHint,
       accessibilityDisabled: accessibilityDisabled ?? disabled,
       accessibilityHidden,
-      accessibilityRole: accessibilityRole ?? (clickable ? 'button' : 'none'),
+      accessibilityRole: accessibilityRole ?? (pressable ? 'button' : 'none'),
       accessibilityPressed,
     });
-  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, clickable, accessibilityPressed]);
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, pressable, accessibilityPressed]);
 
   // Apply variants
   cardStyles.useVariants({
     type,
     radius,
-    clickable,
+    pressable,
     disabled,
     background,
     gap,
@@ -85,11 +67,8 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   // Get card style
   const cardStyle = (cardStyles.card as any)({});
 
-  // Use appropriate component based on clickable state
-  const Component = clickable ? Pressable : View;
-
-  // Prefer onPress, fall back to deprecated onClick
-  const pressHandler = onPress ?? onClick;
+  // Use appropriate component based on pressable state
+  const Component = pressable ? Pressable : View;
 
   const componentProps = {
     ref,
@@ -98,8 +77,8 @@ const Card = forwardRef<IdealystElement, CardProps>(({
     testID,
     onLayout,
     ...nativeA11yProps,
-    ...(clickable && {
-      onPress: disabled ? undefined : pressHandler,
+    ...(pressable && {
+      onPress: disabled ? undefined : onPress,
       disabled,
       android_ripple: { color: 'rgba(0, 0, 0, 0.1)' },
     }),

package/src/Card/Card.styles.tsx

@@ -20,7 +20,7 @@ export type CardVariants = {
     type: CardType;
     radius: Radius;
     intent: CardIntent;
-    clickable: boolean;
+    pressable: boolean;
     disabled: boolean;
     background: Surface;
     gap: CardPadding;
@@ -78,7 +78,7 @@ export const cardStyles = defineStyle('Card', (theme: Theme) => ({
             background: {
                 backgroundColor: theme.colors.$surface,
             },
-            clickable: {
+            pressable: {
                 true: {
                     _web: {
                         cursor: 'pointer',

package/src/Card/Card.web.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, useEffect, useRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
@@ -8,12 +8,9 @@ import { getWebInteractiveAriaProps } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
 import { flattenStyle } from '../utils/flattenStyle';
 
-// Track if we've logged the onClick deprecation warning (log once per session)
-let hasLoggedOnClickWarning = false;
-
 /**
  * Container component for grouping related content with elevation and styling options.
- * Supports elevated, outlined, and filled variants with optional click interaction.
+ * Supports elevated, outlined, and filled variants with optional press interaction.
  */
 const Card = forwardRef<IdealystElement, CardProps>(({
   children,
@@ -22,9 +19,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   radius = 'md',
   intent: _intent,
   background,
-  clickable = false,
   onPress,
-  onClick,
   disabled = false,
   onLayout,
   // Spacing variants from ContainerStyleProps
@@ -46,25 +41,14 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   accessibilityRole,
   accessibilityPressed,
 }, ref) => {
-  const hasWarnedRef = useRef(false);
   const layoutRef = useWebLayout<HTMLElement>(onLayout);
 
-  // Warn about onClick usage (deprecated)
-  useEffect(() => {
-    if (onClick && !hasWarnedRef.current && !hasLoggedOnClickWarning) {
-      hasWarnedRef.current = true;
-      hasLoggedOnClickWarning = true;
-      console.warn(
-        '[Card] onClick is deprecated. Use onPress instead.\n' +
-        'Card is a cross-platform component that follows React Native conventions.\n' +
-        'onClick will be removed in a future version.\n\n' +
-        'Migration: Replace onClick={handler} with onPress={handler}'
-      );
-    }
-  }, [onClick]);
+  // Derive pressable from whether onPress is provided
+  const pressable = !!onPress;
 
   // variant is an alias for type - variant takes precedence if both are set
   const type = variant ?? typeProp ?? 'elevated';
+
   // Generate ARIA props
   const ariaProps = useMemo(() => {
     return getWebInteractiveAriaProps({
@@ -72,20 +56,16 @@ const Card = forwardRef<IdealystElement, CardProps>(({
       accessibilityHint,
       accessibilityDisabled: accessibilityDisabled ?? disabled,
       accessibilityHidden,
-      accessibilityRole: accessibilityRole ?? (clickable ? 'button' : 'region'),
+      accessibilityRole: accessibilityRole ?? (pressable ? 'button' : 'region'),
       accessibilityPressed,
     });
-  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, clickable, accessibilityPressed]);
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, pressable, accessibilityPressed]);
 
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    if (!disabled && clickable) {
-      // Prefer onPress, fall back to deprecated onClick
-      const handler = onPress ?? onClick;
-      if (handler) {
-        handler();
-      }
+    if (!disabled && onPress) {
+      onPress();
     }
   };
 
@@ -93,7 +73,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   cardStyles.useVariants({
     type,
     radius,
-    clickable,
+    pressable,
     disabled,
     background,
     gap,
@@ -113,8 +93,8 @@ const Card = forwardRef<IdealystElement, CardProps>(({
 
   const mergedRef = useMergeRefs(ref, webProps.ref, layoutRef);
 
-  // Use appropriate HTML element based on clickable state
-  const Component: any = clickable ? 'button' : 'div';
+  // Use appropriate HTML element based on pressable state
+  const Component: any = pressable ? 'button' : 'div';
 
   return (
     <Component
@@ -122,8 +102,8 @@ const Card = forwardRef<IdealystElement, CardProps>(({
       {...ariaProps}
       ref={mergedRef as any}
       id={id}
-      onClick={clickable ? handleClick : undefined}
-      disabled={clickable && disabled}
+      onClick={pressable ? handleClick : undefined}
+      disabled={pressable && disabled}
       data-testid={testID}
     >
       {children}

package/src/Card/types.ts

@@ -47,30 +47,11 @@ export interface CardProps extends ContainerStyleProps, InteractiveAccessibility
   background?: CardBackgroundVariant;
 
   /**
-   * Whether the card is clickable
-   */
-  clickable?: boolean;
-
-  /**
-   * Called when the card is pressed (if clickable)
+   * Called when the card is pressed.
+   * Providing this prop automatically makes the card pressable with hover effects.
    */
   onPress?: () => void;
 
-  /**
-   * @deprecated Use `onPress` instead. This is a cross-platform component - use React Native conventions.
-   *
-   * Using `onClick` will trigger a console warning in development.
-   * This prop exists only for migration convenience and will be removed in a future version.
-   *
-   * @example
-   * // ❌ Don't use onClick
-   * <Card clickable onClick={() => {}} />
-   *
-   * // ✅ Use onPress instead
-   * <Card clickable onPress={() => {}} />
-   */
-  onClick?: () => void;
-
   /**
    * Whether the card is disabled
    */

package/src/IconButton/IconButton.native.tsx

@@ -63,15 +63,8 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
   // Gradient is only applicable to contained buttons
   const showGradient = gradient && type === 'contained';
 
-  // Map button size to icon size
-  const iconSizeMap: Record<string, number> = {
-    xs: 12,
-    sm: 14,
-    md: 16,
-    lg: 18,
-    xl: 20,
-  };
-  const iconSize = iconSizeMap[size] ?? 16;
+  // Get icon size from the computed icon style (from theme)
+  const iconSize = iconStyle?.width ?? iconStyle?.height ?? 24;
 
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
@@ -209,7 +202,10 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
           </View>
         </View>
       )}
-      {renderIcon()}
+      {/* Centered icon container */}
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        {renderIcon()}
+      </View>
     </TouchableOpacity>
   );
 });

package/src/IconButton/IconButton.web.tsx

@@ -117,9 +117,13 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
   const webProps = getWebProps(buttonStyleArray);
 
   // Icon styles with dynamic function
-  const iconStyleArray = [(iconButtonStyles.icon as any)(dynamicProps)];
+  const iconStyleComputed = (iconButtonStyles.icon as any)(dynamicProps);
+  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);
@@ -130,6 +134,7 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
       return (
         <IconSvg
           name={icon}
+          size={iconSize}
           {...iconProps}
           aria-label={icon}
         />

package/src/TextArea/TextArea.native.tsx

@@ -1,10 +1,11 @@
-import { useState, forwardRef, useMemo, useEffect } from 'react';
-import { View, TextInput, NativeSyntheticEvent, TextInputContentSizeChangeEventData } from 'react-native';
+import { useState, forwardRef, useMemo, useEffect, useRef } from 'react';
+import { View, TextInput, NativeSyntheticEvent, TextInputContentSizeChangeEventData, TextInput as RNTextInput } from 'react-native';
 import { textAreaStyles } from './TextArea.styles';
 import Text from '../Text';
 import type { TextAreaProps } from './types';
 import { getNativeFormAccessibilityProps } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
+import useMergeRefs from '../hooks/useMergeRefs';
 
 const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   value: controlledValue,
@@ -47,8 +48,17 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [isFocused, setIsFocused] = useState(false);
   const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
+  const textInputRef = useRef<RNTextInput>(null);
 
   const value = controlledValue !== undefined ? controlledValue : internalValue;
+
+  // When value is cleared externally, trigger a layout recalculation via setNativeProps
+  useEffect(() => {
+    if (autoGrow && value === '' && textInputRef.current) {
+      // Force the TextInput to recalculate its layout by setting the text again
+      textInputRef.current.setNativeProps({ text: '' });
+    }
+  }, [value, autoGrow]);
   const hasError = Boolean(error);
 
   // Generate native accessibility props
@@ -141,14 +151,6 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
     setContentHeight(newHeight);
   };
 
-  // Reset contentHeight when value is cleared externally (controlled component)
-  // This forces the TextInput to recalculate its size
-  useEffect(() => {
-    if (autoGrow && value === '') {
-      setContentHeight(undefined);
-    }
-  }, [value, autoGrow]);
-
   const showFooter = (error || helperText) || (showCharacterCount && maxLength);
 
   // Get dynamic styles - call as functions for theme reactivity
@@ -171,7 +173,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
 
       <View style={textareaContainerStyleComputed}>
         <TextInput
-          ref={ref as any}
+          ref={useMergeRefs(textInputRef, ref as any)}
           {...nativeA11yProps}
           style={[
             textareaStyleComputed,
@@ -180,15 +182,10 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
               textAlignVertical: autoGrow ? 'center' : 'top',
               backgroundColor: 'transparent',
             },
-            // For autoGrow: use contentHeight if available, otherwise minHeight constraint
+            // 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,
-                  // Set explicit height when we have a calculated contentHeight
-                  ...(contentHeight !== undefined && { height: contentHeight }),
-                }
+              ? { minHeight: minHeight ?? 44, maxHeight: maxHeight }
               : { height: rows * 24 },
             textareaStyle,
           ]}

package/src/examples/CardExamples.tsx

@@ -117,27 +117,25 @@ export const CardExamples = () => {
         </View>
       </View>
 
-      {/* Clickable Cards */}
+      {/* Pressable Cards */}
       <View gap="md">
         <Text typography="subtitle1">Interactive Cards</Text>
         <View gap="sm">
-          <Card 
-            clickable 
-            onPress={() => handleCardPress('clickable')} 
-            type="outlined" 
+          <Card
+            onPress={() => handleCardPress('pressable')}
+            type="outlined"
             padding="md"
           >
-            <Text weight="semibold">Clickable Card</Text>
+            <Text weight="semibold">Pressable Card</Text>
             <Text typography="caption" color="secondary">
-              Click me to see interaction
+              Press me to see interaction
             </Text>
           </Card>
-          
-          <Card 
-            clickable 
-            disabled 
-            onPress={() => handleCardPress('disabled')} 
-            type="outlined" 
+
+          <Card
+            disabled
+            onPress={() => handleCardPress('disabled')}
+            type="outlined"
             padding="md"
           >
             <Text weight="semibold">Disabled Card</Text>