@idealyst/components 1.2.13 → 1.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "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.13",
+    "@idealyst/theme": "^1.2.15",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -106,7 +106,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.13",
+    "@idealyst/theme": "^1.2.15",
     "@idealyst/tooling": "^1.2.4",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Accordion/Accordion.web.tsx

@@ -47,7 +47,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   const itemStyle = (accordionStyles.item as any)({ type, isLast });
   const itemProps = getWebProps([itemStyle]);
   const headerProps = getWebProps([(accordionStyles.header as any)({})]);
-  const titleProps = getWebProps([accordionStyles.title]);
+  const titleProps = getWebProps([accordionStyles.title as any]);
   const iconProps = getWebProps([(accordionStyles.icon as any)({})]);
   // Pass expanded state to get correct maxHeight from styles
   const contentProps = getWebProps([(accordionStyles.content as any)({ expanded: isExpanded })]);

package/src/ActivityIndicator/ActivityIndicator.native.tsx

@@ -15,17 +15,17 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
   id,
   // Accessibility props
   accessibilityLabel,
-  accessibilityLiveRegion,
+  accessibilityLive,
   accessibilityBusy,
 }, ref) => {
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     return getNativeLiveRegionAccessibilityProps({
       accessibilityLabel: accessibilityLabel ?? 'Loading',
-      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityLive: accessibilityLive ?? 'polite',
       accessibilityBusy: accessibilityBusy ?? animating,
     });
-  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy, animating]);
+  }, [accessibilityLabel, accessibilityLive, accessibilityBusy, animating]);
   // Handle numeric size
   const sizeVariant = typeof size === 'number' ? 'md' : size;
   const customSize = typeof size === 'number' ? size : undefined;

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -20,7 +20,7 @@ const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
   id,
   // Accessibility props
   accessibilityLabel,
-  accessibilityLiveRegion,
+  accessibilityLive,
   accessibilityBusy,
   accessibilityAtomic,
   accessibilityRelevant,
@@ -29,12 +29,12 @@ const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
   const ariaProps = useMemo(() => {
     return getWebLiveRegionAriaProps({
       accessibilityLabel: accessibilityLabel ?? 'Loading',
-      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityLive: accessibilityLive ?? 'polite',
       accessibilityBusy: accessibilityBusy ?? animating,
       accessibilityAtomic,
       accessibilityRelevant,
     });
-  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy, animating, accessibilityAtomic, accessibilityRelevant]);
+  }, [accessibilityLabel, accessibilityLive, accessibilityBusy, animating, accessibilityAtomic, accessibilityRelevant]);
   // Handle numeric size
   const sizeVariant = typeof size === 'number' ? 'md' : size;
   const customSize = typeof size === 'number' ? size : undefined;

package/src/Alert/Alert.native.tsx

@@ -6,7 +6,7 @@ import { isIconName } from '../Icon/icon-resolver';
 import type { AlertProps } from './types';
 
 // Default icon names for each intent
-const defaultIcons = {
+const defaultIcons: Record<string, string> = {
   primary: 'information',
   success: 'check-circle',
   error: 'alert-circle',

package/src/Alert/Alert.web.tsx

@@ -7,7 +7,7 @@ import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 
 // Default icons for each intent
-const defaultIcons = {
+const defaultIcons: Record<string, string> = {
   primary: 'information',
   success: 'check-circle',
   error: 'alert-circle',

package/src/Avatar/Avatar.native.tsx

@@ -27,7 +27,7 @@ const Avatar = forwardRef<View, AvatarProps>(({
       accessibilityHint,
       accessibilityDisabled,
       accessibilityHidden,
-      accessibilityRole: accessibilityRole ?? 'image',
+      accessibilityRole: accessibilityRole ?? 'img',
     });
   }, [accessibilityLabel, alt, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
   const [hasError, setHasError] = useState(false);

package/src/Badge/Badge.web.tsx

@@ -13,7 +13,8 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
   const {
     children,
     size = 'md',
-    type = 'filled',
+    type: typeProp,
+    variant,
     color = 'blue',
     icon,
     style,
@@ -21,13 +22,16 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
     id,
   } = props;
 
+  // variant is an alias for type - variant takes precedence if both are set
+  const type = variant ?? typeProp ?? 'filled';
+
   badgeStyles.useVariants({
     size,
     type,
   });
 
   const badgeStyle = (badgeStyles.badge as any)({ color });
-  const contentStyle = badgeStyles.content;
+  const contentStyle = badgeStyles.content as any;
   const textStyle = (badgeStyles.text as any)({ color });
 
   const badgeProps = getWebProps([badgeStyle]);

package/src/Badge/types.ts

@@ -29,6 +29,11 @@ export interface BadgeProps extends BaseProps {
    */
   type?: BadgeType;
 
+  /**
+   * Alias for type - the visual style variant of the badge
+   */
+  variant?: BadgeType;
+
   /**
    * The color scheme of the badge
    */

package/src/Breadcrumb/Breadcrumb.native.tsx

@@ -1,12 +1,6 @@
 import React, { forwardRef, isValidElement, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
-import {
-  breadcrumbContainerStyles,
-  breadcrumbItemStyles,
-  breadcrumbSeparatorStyles,
-  breadcrumbEllipsisStyles,
-  breadcrumbMenuButtonStyles
-} from './Breadcrumb.styles';
+import { breadcrumbStyles } from './Breadcrumb.styles';
 import type { BreadcrumbProps, BreadcrumbItem as BreadcrumbItemType } from './types';
 import Icon from '../Icon';
 import type { IconName } from '../Icon/icon-types';
@@ -26,19 +20,19 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
   const isDisabled = item.disabled || false;
 
   // Apply size variant
-  breadcrumbItemStyles.useVariants({
+  breadcrumbStyles.useVariants({
     size,
   });
 
   // Get dynamic item text style
-  const itemTextStyle = (breadcrumbItemStyles.itemText as any)({
+  const itemTextStyle = (breadcrumbStyles.itemText as any)({
     intent,
     isLast,
     disabled: isDisabled,
     clickable: isClickable,
   });
 
-  const iconStyle = breadcrumbItemStyles.icon;
+  const iconStyle = (breadcrumbStyles.icon as any)({});
 
   const renderIcon = () => {
     if (!item.icon) return null;
@@ -59,8 +53,10 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
     return null;
   };
 
+  const itemContainerStyle = (breadcrumbStyles.item as any)({});
+
   const content = (
-    <View style={[breadcrumbItemStyles.item, itemStyle]}>
+    <View style={[itemContainerStyle, itemStyle]}>
       {item.icon && <View style={iconStyle}>{renderIcon()}</View>}
       <Text style={itemTextStyle}>{item.label}</Text>
     </View>
@@ -91,8 +87,8 @@ interface BreadcrumbSeparatorProps {
 }
 
 const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, size, separatorStyle }) => {
-  breadcrumbSeparatorStyles.useVariants({ size });
-  const sepStyle = breadcrumbSeparatorStyles.separator;
+  breadcrumbStyles.useVariants({ size });
+  const sepStyle = (breadcrumbStyles.separator as any)({});
 
   if (typeof separator === 'string') {
     return <Text style={[sepStyle, separatorStyle]}>{separator}</Text>;
@@ -106,11 +102,12 @@ interface BreadcrumbEllipsisProps {
 }
 
 const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent }) => {
-  breadcrumbEllipsisStyles.useVariants({ size });
-  const iconStyle = breadcrumbEllipsisStyles.icon({ intent });
+  breadcrumbStyles.useVariants({ size });
+  const ellipsisStyle = (breadcrumbStyles.ellipsis as any)({});
+  const iconStyle = (breadcrumbStyles.ellipsisIcon as any)({ intent });
 
   return (
-    <View style={breadcrumbEllipsisStyles.ellipsis}>
+    <View style={ellipsisStyle}>
       <Icon name="dots-horizontal" style={iconStyle} />
     </View>
   );
@@ -132,9 +129,11 @@ const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
 }, ref) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
-  // Apply variants for menu button
-  breadcrumbMenuButtonStyles.useVariants({ size });
-  const menuIconStyle = breadcrumbMenuButtonStyles.icon({ intent });
+  // Apply variants
+  breadcrumbStyles.useVariants({ size });
+  const containerStyle = (breadcrumbStyles.container as any)({});
+  const menuButtonStyle = (breadcrumbStyles.menuButton as any)({});
+  const menuIconStyle = (breadcrumbStyles.menuButtonIcon as any)({ intent });
 
   // Handle responsive collapsing
   let displayItems = items;
@@ -172,7 +171,7 @@ const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
     <View
       ref={ref}
       nativeID={id}
-      style={[breadcrumbContainerStyles.container, style]}
+      style={[containerStyle, style]}
       testID={testID}
       accessibilityLabel="Breadcrumb"
     >
@@ -200,7 +199,7 @@ const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
                   size={size}
                 >
                   <Pressable
-                    style={breadcrumbMenuButtonStyles.button}
+                    style={menuButtonStyle}
                     accessibilityRole="button"
                     accessibilityLabel="Show more breadcrumb items"
                   >

package/src/Button/Button.native.tsx

@@ -68,14 +68,14 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   };
 
   // Map button size to icon size
-  const iconSizeMap = {
+  const iconSizeMap: Record<string, number> = {
     xs: 12,
     sm: 14,
     md: 16,
     lg: 18,
     xl: 20,
-  } as const;
-  const iconSize = iconSizeMap[size];
+  };
+  const iconSize = iconSizeMap[size] ?? 16;
 
 
   // Use children if available, otherwise use title

package/src/Button/Button.web.tsx

@@ -17,7 +17,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     onPress,
     disabled = false,
     loading = false,
-    type = 'contained',
+    type: typeProp,
+    variant,
     intent = 'primary',
     size = 'md',
     gradient,
@@ -41,6 +42,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     accessibilityHasPopup,
   } = props;
 
+  // variant is an alias for type - variant takes precedence if both are set
+  const type = variant ?? typeProp ?? 'contained';
+
   // Button is effectively disabled when loading
   const isDisabled = disabled || loading;
 

package/src/Button/types.ts

@@ -48,6 +48,11 @@ export interface ButtonProps extends BaseProps, InteractiveAccessibilityProps {
    */
   type?: ButtonType;
 
+  /**
+   * Alias for type - the visual style variant of the button
+   */
+  variant?: ButtonType;
+
   /**
    * The intent/color scheme of the button
    */

package/src/Card/Card.web.tsx

@@ -11,7 +11,8 @@ import { getWebInteractiveAriaProps } from '../utils/accessibility';
  */
 const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   children,
-  type = 'elevated',
+  type: typeProp,
+  variant,
   radius = 'md',
   intent,
   clickable = false,
@@ -36,6 +37,8 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   accessibilityRole,
   accessibilityPressed,
 }, ref) => {
+  // 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({

package/src/Card/types.ts

@@ -24,6 +24,11 @@ export interface CardProps extends ContainerStyleProps, InteractiveAccessibility
    */
   type?: CardType;
 
+  /**
+   * Alias for type - the visual style variant of the card
+   */
+  variant?: CardType;
+
   /**
    * The border radius of the card
    */

package/src/Dialog/Dialog.native.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, forwardRef, useMemo } from 'react';
-import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler } from 'react-native';
+import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, GestureResponderEvent } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
@@ -11,7 +11,7 @@ const Dialog = forwardRef<View, DialogProps>(({
   title,
   children,
   size = 'md',
-  type = 'standard',
+  type = 'default',
   showCloseButton = true,
   closeOnBackdropClick = true,
   animationType = 'fade',
@@ -135,7 +135,7 @@ const Dialog = forwardRef<View, DialogProps>(({
     >
       <TouchableWithoutFeedback onPress={handleBackdropPress}>
         <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
-          <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
+          <TouchableWithoutFeedback onPress={(e: GestureResponderEvent) => e.stopPropagation()}>
             <Animated.View ref={ref as any} style={[containerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
               {(title || showCloseButton) && (
                 <View style={headerStyle}>

package/src/Divider/Divider.web.tsx

@@ -45,8 +45,8 @@ const Divider = forwardRef<HTMLDivElement, DividerProps>(({
 
   // Generate web props
   const dividerProps = getWebProps([dividerStyle, style as any]);
-  const containerProps = getWebProps([dividerStyles.container]);
-  const contentProps = getWebProps([dividerStyles.content]);
+  const containerProps = getWebProps([dividerStyles.container as any]);
+  const contentProps = getWebProps([dividerStyles.content as any]);
   const lineProps = getWebProps([lineStyle]);
 
   const mergedDividerRef = useMergeRefs(ref, dividerProps.ref);

package/src/Icon/Icon.web.tsx

@@ -45,7 +45,8 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
     iconSize = size;
   } else {
     const themeSize = theme.sizes.icon[size as keyof typeof theme.sizes.icon];
-    iconSize = typeof themeSize === 'number' ? themeSize : (themeSize?.width ?? 24);
+    const rawSize = typeof themeSize === 'number' ? themeSize : themeSize?.width;
+    iconSize = typeof rawSize === 'number' ? rawSize : 24;
   }
 
   // Compute color - priority: intent > color > textColor > default
@@ -70,7 +71,6 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
       ref={mergedRef}
       id={id}
       style={{
-        ...iconProps.style,
         fontSize: iconSize,
         width: '1em',
         height: '1em',

package/src/Icon/types.ts

@@ -4,6 +4,9 @@ import type { Size, Text } from '@idealyst/theme';
 import { Color, Intent } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
 
+// Re-export IconName for external consumers
+export type { IconName } from './icon-types';
+
 export type IconSizeVariant = Size | number;
 
 /**

package/src/Image/Image.styles.tsx

@@ -20,7 +20,7 @@ export const imageStyles = defineStyle('Image', (theme: Theme) => ({
     container: (_props: ImageDynamicProps) => ({
         position: 'relative' as const,
         overflow: 'hidden' as const,
-        backgroundColor: theme.colors['gray.200'],
+        backgroundColor: theme.colors.pallet.gray?.['200'] ?? theme.colors.surface.secondary,
     }),
 
     image: (_props: ImageDynamicProps) => ({
@@ -37,7 +37,7 @@ export const imageStyles = defineStyle('Image', (theme: Theme) => ({
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-        backgroundColor: theme.colors['gray.200'],
+        backgroundColor: theme.colors.pallet.gray?.['200'] ?? theme.colors.surface.secondary,
     }),
 
     fallback: (_props: ImageDynamicProps) => ({
@@ -49,11 +49,11 @@ export const imageStyles = defineStyle('Image', (theme: Theme) => ({
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-        backgroundColor: theme.colors['gray.300'],
-        color: theme.colors['gray.600'],
+        backgroundColor: theme.colors.pallet.gray?.['300'] ?? theme.colors.surface.tertiary,
+        color: theme.colors.pallet.gray?.['600'] ?? theme.colors.text.secondary,
     }),
 
     loadingIndicator: (_props: ImageDynamicProps) => ({
-        color: theme.colors['gray.600'],
+        color: theme.colors.pallet.gray?.['600'] ?? theme.colors.text.secondary,
     }),
 }));

package/src/Image/Image.web.tsx

@@ -50,15 +50,15 @@ const Image: React.FC<ImageProps> = ({
   ]);
 
   const imageProps = getWebProps([
-    imageStyles.image,
+    imageStyles.image as any,
     {
       objectFit: objectFit,
       borderRadius: borderRadius ? `${borderRadius}px` : undefined,
     }
   ]);
 
-  const placeholderProps = getWebProps([imageStyles.placeholder]);
-  const fallbackProps = getWebProps([imageStyles.fallback]);
+  const placeholderProps = getWebProps([imageStyles.placeholder as any]);
+  const fallbackProps = getWebProps([imageStyles.fallback as any]);
 
   return (
     <div

package/src/List/List.native.tsx

@@ -64,9 +64,8 @@ const List = forwardRef<View, ListProps>(({
   const processedChildren = childArray.map((child, index) => {
     if (isValidElement(child)) {
       return cloneElement(child, {
-        ...child.props,
         isLast: index === childArray.length - 1,
-      });
+      } as Record<string, unknown>);
     }
     return child;
   });

package/src/List/List.web.tsx

@@ -52,9 +52,8 @@ const List: React.FC<ListProps> = ({
   const processedChildren = childArray.map((child, index) => {
     if (isValidElement(child)) {
       return cloneElement(child, {
-        ...child.props,
         isLast: index === childArray.length - 1,
-      });
+      } as Record<string, unknown>);
     }
     return child;
   });

package/src/List/ListSection.web.tsx

@@ -10,9 +10,9 @@ const ListSection: React.FC<ListSectionProps> = ({
   style,
   testID,
 }) => {
-  const sectionProps = getWebProps([listStyles.section, style as any]);
-  const titleProps = getWebProps([listStyles.sectionTitle]);
-  const contentProps = getWebProps([listStyles.sectionContent]);
+  const sectionProps = getWebProps([listStyles.section as any, style as any]);
+  const titleProps = getWebProps([listStyles.sectionTitle as any]);
+  const contentProps = getWebProps([listStyles.sectionContent as any]);
 
   return (
     <div {...sectionProps} data-testid={testID}>

package/src/Menu/Menu.web.tsx

@@ -5,7 +5,7 @@ import type { MenuProps } from './types';
 import MenuItem from './MenuItem.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
-import { getWebInteractiveAriaProps, generateAccessibilityId, MENU_KEYS } from '../utils/accessibility';
+import { getWebInteractiveAriaProps, generateAccessibilityId, MENU_KEYS, matchesKey } from '../utils/accessibility';
 
 /**
  * Dropdown menu for actions and navigation triggered by a button or element.
@@ -64,9 +64,7 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
 
   // Keyboard navigation handler
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    const key = e.key;
-
-    if (MENU_KEYS.close.includes(key)) {
+    if (matchesKey(e, MENU_KEYS.close)) {
       e.preventDefault();
       onOpenChange?.(false);
       // Return focus to trigger
@@ -78,16 +76,16 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
 
     let nextIndex = focusedIndex.current;
 
-    if (MENU_KEYS.next.includes(key)) {
+    if (matchesKey(e, MENU_KEYS.next)) {
       e.preventDefault();
       nextIndex = focusedIndex.current < enabledItems.length - 1 ? focusedIndex.current + 1 : 0;
-    } else if (MENU_KEYS.prev.includes(key)) {
+    } else if (matchesKey(e, MENU_KEYS.prev)) {
       e.preventDefault();
       nextIndex = focusedIndex.current > 0 ? focusedIndex.current - 1 : enabledItems.length - 1;
-    } else if (MENU_KEYS.first.includes(key)) {
+    } else if (matchesKey(e, MENU_KEYS.first)) {
       e.preventDefault();
       nextIndex = 0;
-    } else if (MENU_KEYS.last.includes(key)) {
+    } else if (matchesKey(e, MENU_KEYS.last)) {
       e.preventDefault();
       nextIndex = enabledItems.length - 1;
     }
@@ -119,7 +117,7 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
 
   const overlayProps = getWebProps([(menuStyles.overlay as any)({})]);
   const menuProps = getWebProps([(menuStyles.menu as any)({}), style as any]);
-  const separatorProps = getWebProps([menuStyles.separator]);
+  const separatorProps = getWebProps([menuStyles.separator as any]);
 
   const handleTriggerClick = () => {
     onOpenChange?.(!open);
@@ -161,7 +159,7 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
 
       <PositionedPortal
         open={open}
-        anchor={triggerRef}
+        anchor={triggerRef as React.RefObject<HTMLElement>}
         placement={placement}
         offset={4}
         onClickOutside={() => onOpenChange?.(false)}

package/src/Menu/MenuItem.web.tsx

@@ -67,7 +67,7 @@ const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(({ item, onPress,
     <button
       {...itemProps}
       ref={mergedRef}
-      style={{ ...buttonResetStyles, ...itemProps.style }}
+      style={buttonResetStyles}
       onClick={() => onPress(item)}
       disabled={item.disabled}
       role="menuitem"

package/src/Popover/Popover.web.tsx

@@ -49,7 +49,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
   popoverStyles.useVariants({});
 
   const containerProps = getWebProps([(popoverStyles.container as any)({})]);
-  const contentProps = getWebProps([popoverStyles.content]);
+  const contentProps = getWebProps([popoverStyles.content as any]);
 
   const mergedPopoverRef = useMergeRefs(ref, popoverRef);
 

package/src/Pressable/Pressable.web.tsx

@@ -78,7 +78,7 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
       id={id}
       role={accessibilityRole}
       tabIndex={disabled ? -1 : 0}
-      style={{ ...baseStyle, ...webProps.style }}
+      style={baseStyle}
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp} // Handle mouse leave as press out