@idealyst/components 1.2.71 → 1.2.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.71",
+  "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.71",
+    "@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.71",
+    "@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/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,

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;