@idealyst/components 1.0.49 → 1.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/your-username/idealyst-framework/tree/main/packages/components#readme",
   "main": "src/index.ts",
@@ -40,7 +40,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.0.49",
+    "@idealyst/theme": "^1.0.50",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@react-native-vector-icons/common": "^12.0.1",

package/plugin/web.js

@@ -261,7 +261,7 @@ module.exports = function ({ types: t }, options = {}) {
             
             if (iconNames.length === 0) {
               // For dynamic expressions we can't resolve, leave a helpful comment
-              console.warn(`[mdi-auto-import] Cannot determine icon name for dynamic expression at ${path.node.loc ? `${path.node.loc.start.line}:${path.node.loc.start.column}` : 'unknown location'}. Consider adding icon names to manifest (${manifestPath}) for auto-import support.`);
+              console.warn(`[mdi-auto-import] Cannot determine icon name (${nameAttr.value.expression}) for dynamic expression at ${path.node.loc ? `${path.node.loc.start.line}:${path.node.loc.start.column}` : 'unknown location'}. Consider adding icon names to manifest (${manifestPath}) for auto-import support.`);
               return;
             }
           }

package/src/Icon/Icon.native.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { IconProps } from './types';
 import iconStyles from './Icon.styles';
@@ -16,14 +16,17 @@ const Icon: React.FC<IconProps> = ({
   const styles = iconStyles.useVariants({ color, size });
   
   // Map size variants to pixel values
-  const sizeMap = {
-    xs: 12,
-    sm: 16,
-    md: 24,
-    lg: 32,
-    xl: 48,
-  };
-  const iconSize = sizeMap[size];
+  const iconSize = useMemo(() => { 
+    if (typeof size === 'number') return size;
+    const sizeMap = {
+      xs: 12,
+      sm: 16,
+      md: 24,
+      lg: 32,
+      xl: 48,
+    };
+    return sizeMap[size];
+  }, [])
   
   return (
     <MaterialCommunityIcons

package/src/Icon/Icon.styles.tsx

@@ -43,6 +43,7 @@ const iconStyles = StyleSheet.create((theme) => ({
       display: 'inline-block',
       verticalAlign: 'middle',
       flexShrink: 0,
+      lineHeight: 0, // Remove extra space below the icon
     },
   },
 }));

package/src/Icon/Icon.web.tsx

@@ -22,7 +22,6 @@ const Icon: React.FC<IconProps> = (props: InternalIconProps) => {
 
   // Use Unistyles v3 with color and size variants
   const styles = iconStyles.useVariants({ color, size });
-  console.log(styles);
   
   // Check if we have a path prop (from Babel plugin transformation)
   const { path } = restProps as { path?: string };

package/src/Icon/types.ts

@@ -12,7 +12,7 @@ export interface IconProps {
   /**
    * The size variant of the icon
    */
-  size?: IconSizeVariant;
+  size?: IconSizeVariant | number;
 
   /**
    * Predefined color variant based on theme

package/src/Pressable/Pressable.native.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pressable as RNPressable } from 'react-native';
+import { PressableProps } from './types';
+
+const Pressable: React.FC<PressableProps> = ({
+  children,
+  onPress,
+  onPressIn,
+  onPressOut,
+  disabled = false,
+  style,
+  testID,
+  accessibilityLabel,
+  accessibilityRole,
+}) => {
+  return (
+    <RNPressable
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      disabled={disabled}
+      style={style}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+    >
+      {children}
+    </RNPressable>
+  );
+};
+
+export default Pressable;

package/src/Pressable/Pressable.web.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback, useState } from 'react';
+import { PressableProps } from './types';
+
+const Pressable: React.FC<PressableProps> = ({
+  children,
+  onPress,
+  onPressIn,
+  onPressOut,
+  disabled = false,
+  style,
+  testID,
+  accessibilityLabel,
+  accessibilityRole = 'button',
+}) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  const handleMouseDown = useCallback(() => {
+    if (disabled) return;
+    setIsPressed(true);
+    onPressIn?.();
+  }, [disabled, onPressIn]);
+
+  const handleMouseUp = useCallback(() => {
+    if (disabled) return;
+    setIsPressed(false);
+    onPressOut?.();
+  }, [disabled, onPressOut]);
+
+  const handleClick = useCallback(() => {
+    if (disabled) return;
+    onPress?.();
+  }, [disabled, onPress]);
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onPress?.();
+    }
+  }, [disabled, onPress]);
+
+  const webStyle = {
+    ...style,
+    cursor: disabled ? 'default' : 'pointer',
+    outline: 'none',
+    userSelect: 'none' as const,
+    WebkitUserSelect: 'none' as const,
+    WebkitTapHighlightColor: 'transparent',
+    opacity: disabled ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      role={accessibilityRole}
+      tabIndex={disabled ? -1 : 0}
+      style={webStyle}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp} // Handle mouse leave as press out
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      data-testid={testID}
+      aria-label={accessibilityLabel}
+      aria-disabled={disabled}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Pressable;

package/src/Pressable/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Pressable.web';
+export * from './types';

package/src/Pressable/index.web.native.ts

@@ -0,0 +1,2 @@
+export { default } from './Pressable.native';
+export * from './types';

package/src/Pressable/index.web.ts

@@ -0,0 +1,2 @@
+export { default } from './Pressable.web';
+export * from './types';

package/src/Pressable/types.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+
+export interface PressableProps {
+  /**
+   * Content to render inside the pressable area
+   */
+  children?: ReactNode;
+  
+  /**
+   * Called when the press gesture is activated
+   */
+  onPress?: () => void;
+  
+  /**
+   * Called when the press gesture starts
+   */
+  onPressIn?: () => void;
+  
+  /**
+   * Called when the press gesture ends
+   */
+  onPressOut?: () => void;
+  
+  /**
+   * Whether the pressable is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Additional styles to apply
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+  
+  /**
+   * Accessibility label for screen readers
+   */
+  accessibilityLabel?: string;
+  
+  /**
+   * Accessibility role (web)
+   */
+  accessibilityRole?: string;
+}

package/src/index.ts

@@ -7,6 +7,9 @@ export * from './Text/types';
 export { default as View } from './View';
 export * from './View/types';
 
+export { default as Pressable } from './Pressable';
+export * from './Pressable/types';
+
 export { default as Input } from './Input';
 export * from './Input/types';