@idealyst/components 1.2.70 → 1.2.72

package/package.json

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

package/src/Card/Card.styles.tsx

@@ -82,9 +82,8 @@ export const cardStyles = defineStyle('Card', (theme: Theme) => ({
                 true: {
                     _web: {
                         cursor: 'pointer',
-                        transition: 'all 0.2s ease',
+                        transition: 'box-shadow 0.2s ease',
                         _hover: {
-                            transform: 'translateY(-2px)',
                             boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06)',
                         },
                     },

package/src/Card/Card.web.tsx

@@ -93,21 +93,17 @@ const Card = forwardRef<IdealystElement, CardProps>(({
 
   const mergedRef = useMergeRefs(ref, webProps.ref, layoutRef);
 
-  // Use appropriate HTML element based on pressable state
-  const Component: any = pressable ? 'button' : 'div';
-
   return (
-    <Component
+    <div
       {...webProps}
       {...ariaProps}
       ref={mergedRef as any}
       id={id}
       onClick={pressable ? handleClick : undefined}
-      disabled={pressable && disabled}
       data-testid={testID}
     >
       {children}
-    </Component>
+    </div>
   );
 });
 

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

@@ -11,6 +11,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   value: controlledValue,
   defaultValue = '',
   onChange,
+  onKeyDown: _onKeyDown, // Web-only, no-op on native
   placeholder,
   disabled = false,
   minHeight,
@@ -185,7 +186,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,
           ]}

package/src/TextArea/TextArea.web.tsx

@@ -14,6 +14,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   value: controlledValue,
   defaultValue = '',
   onChange,
+  onKeyDown,
   placeholder,
   disabled = false,
   rows = 4,
@@ -204,6 +205,19 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
     setIsFocused(false);
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (onKeyDown) {
+      onKeyDown({
+        key: e.key,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+        metaKey: e.metaKey,
+        preventDefault: () => e.preventDefault(),
+      });
+    }
+  };
+
   const showFooter = (error || helperText) || (showCharacterCount && maxLength);
 
   const computedTextareaProps = getWebProps([
@@ -234,6 +248,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
           onChange={handleChange}
           onFocus={handleFocus}
           onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
           placeholder={placeholder}
           disabled={disabled}
           rows={autoGrow ? undefined : rows}

package/src/TextArea/types.ts

@@ -9,10 +9,35 @@ export type TextAreaSizeVariant = Size;
 export type TextAreaResizeVariant = 'none' | 'vertical' | 'horizontal' | 'both';
 export type TextAreaType = 'outlined' | 'filled' | 'bare';
 
+/**
+ * Keyboard event data with modifier key states.
+ * Provides a cross-platform API for handling key presses with modifiers.
+ */
+export interface KeyboardEventData {
+  /** The key that was pressed (e.g., 'Enter', 'a', 'Escape') */
+  key: string;
+  /** Whether the Ctrl key (or Cmd on Mac) was held */
+  ctrlKey: boolean;
+  /** Whether the Shift key was held */
+  shiftKey: boolean;
+  /** Whether the Alt key (Option on Mac) was held */
+  altKey: boolean;
+  /** Whether the Meta key (Cmd on Mac, Win on Windows) was held */
+  metaKey: boolean;
+  /** Prevents the default browser behavior (web only, no-op on native) */
+  preventDefault: () => void;
+}
+
 export interface TextAreaProps extends FormInputStyleProps, FormAccessibilityProps {
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;
+  /**
+   * Called when a key is pressed while the textarea is focused.
+   * Includes modifier key states (ctrl, shift, alt, meta).
+   * Web only - no-op on native.
+   */
+  onKeyDown?: (event: KeyboardEventData) => void;
   placeholder?: string;
   disabled?: boolean;
   rows?: number;