@idealyst/components 1.2.32 → 1.2.34

package/package.json

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

package/src/Accordion/Accordion.web.tsx

@@ -61,7 +61,11 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
       <button
         {...headerProps}
         id={headerId}
-        onClick={onToggle}
+        onClick={(e: React.MouseEvent) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onToggle();
+        }}
         onKeyDown={(e) => onKeyDown(e, item.id)}
         disabled={item.disabled}
         aria-expanded={isExpanded}
@@ -146,16 +150,20 @@ const Accordion: React.FC<AccordionProps> = ({
     // ArrowDown moves to next item
     if (key === 'ArrowDown') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
     // ArrowUp moves to previous item
     } else if (key === 'ArrowUp') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
     } else if (ACCORDION_KEYS.first.includes(key as 'Home')) {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = 0;
     } else if (ACCORDION_KEYS.last.includes(key as 'End')) {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = enabledItems.length - 1;
     }
 

package/src/Button/Button.web.tsx

@@ -64,10 +64,8 @@ const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    // Only stop propagation if we have a handler
-    // Otherwise, let clicks bubble up to parent handlers (e.g., Menu triggers)
+    e.stopPropagation();
     if (!isDisabled && pressHandler) {
-      e.stopPropagation();
       pressHandler();
     }
   };

package/src/Card/Card.native.tsx

@@ -17,6 +17,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   onPress,
   onClick,
   disabled = false,
+  onLayout,
   // Spacing variants from ContainerStyleProps
   gap,
   padding,
@@ -93,6 +94,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
     nativeID: id,
     style: [cardStyle, style],
     testID,
+    onLayout,
     ...nativeA11yProps,
     ...(clickable && {
       onPress: disabled ? undefined : pressHandler,

package/src/Card/Card.web.tsx

@@ -3,6 +3,7 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { useWebLayout } from '../hooks/useWebLayout';
 import { getWebInteractiveAriaProps } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
 
@@ -23,6 +24,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   onPress,
   onClick,
   disabled = false,
+  onLayout,
   // Spacing variants from ContainerStyleProps
   gap,
   padding,
@@ -43,6 +45,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   accessibilityPressed,
 }, ref) => {
   const hasWarnedRef = useRef(false);
+  const layoutRef = useWebLayout<HTMLElement>(onLayout);
 
   // Warn about onClick usage (deprecated)
   useEffect(() => {
@@ -72,7 +75,9 @@ const Card = forwardRef<IdealystElement, CardProps>(({
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, clickable, accessibilityPressed]);
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!disabled && clickable) {
       // Prefer onPress, fall back to deprecated onClick
       const handler = onPress ?? onClick;
@@ -103,7 +108,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   // Generate web props
   const webProps = getWebProps([cardStyle, style as any]);
 
-  const mergedRef = useMergeRefs(ref, webProps.ref);
+  const mergedRef = useMergeRefs(ref, webProps.ref, layoutRef);
 
   // Use appropriate HTML element based on clickable state
   const Component: any = clickable ? 'button' : 'div';

package/src/Card/types.ts

@@ -1,6 +1,6 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
 import { InteractiveAccessibilityProps } from '../utils/accessibility';
 
@@ -78,4 +78,10 @@ export interface CardProps extends ContainerStyleProps, InteractiveAccessibility
    * Test ID for testing
    */
   testID?: string;
+
+  /**
+   * Called when the layout of the card changes.
+   * Provides the new width, height, x, and y coordinates.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
 }

package/src/Checkbox/Checkbox.web.tsx

@@ -53,6 +53,8 @@ const Checkbox = forwardRef<IdealystElement, CheckboxProps>(({
   }, [checked]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
     if (disabled) return;
 
     const newChecked = event.target.checked;

package/src/Chip/Chip.web.tsx

@@ -61,7 +61,9 @@ const Chip = forwardRef<IdealystElement, ChipProps>(({
   const deleteButtonProps = getWebProps([(chipStyles.deleteButton as any)({ size })]);
   const deleteIconProps = getWebProps([(chipStyles.deleteIcon as any)({ size, intent, type, selected: isSelected })]);
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (disabled) return;
     // Prefer onPress, fall back to deprecated onClick
     const handler = onPress ?? onClick;
@@ -71,6 +73,7 @@ const Chip = forwardRef<IdealystElement, ChipProps>(({
   };
 
   const handleDelete = (e: React.MouseEvent) => {
+    e.preventDefault();
     e.stopPropagation();
     if (disabled) return;
     if (onDelete) {

package/src/IconButton/IconButton.web.tsx

@@ -62,8 +62,8 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
+    e.stopPropagation();
     if (!isDisabled && pressHandler) {
-      e.stopPropagation();
       pressHandler();
     }
   };

package/src/List/ListItem.web.tsx

@@ -53,7 +53,9 @@ const ListItem: React.FC<ListItemProps & { isLast?: boolean }> = ({
   const leadingProps = getWebProps([leadingStyle]);
   const trailingProps = getWebProps([trailingStyle]);
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!disabled && onPress) {
       onPress();
     }

package/src/Menu/MenuItem.web.tsx

@@ -69,7 +69,11 @@ const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, si
       {...itemProps}
       ref={mergedRef}
       style={buttonResetStyles}
-      onClick={() => onPress(item)}
+      onClick={(e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onPress(item);
+      }}
       disabled={item.disabled}
       role="menuitem"
       aria-disabled={item.disabled}

package/src/Pressable/Pressable.web.tsx

@@ -23,19 +23,25 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
 }, ref) => {
   const [_isPressed, setIsPressed] = useState(false);
 
-  const handleMouseDown = useCallback(() => {
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (disabled) return;
     setIsPressed(true);
     onPressIn?.();
   }, [disabled, onPressIn]);
 
-  const handleMouseUp = useCallback(() => {
+  const handleMouseUp = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (disabled) return;
     setIsPressed(false);
     onPressOut?.();
   }, [disabled, onPressOut]);
 
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (disabled) return;
     onPress?.();
   }, [disabled, onPress]);
@@ -44,6 +50,7 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
     if (disabled) return;
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
+      event.stopPropagation();
       onPress?.();
     }
   }, [disabled, onPress]);

package/src/RadioButton/RadioButton.web.tsx

@@ -39,7 +39,9 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   const checked = group.value !== undefined ? group.value === value : checkedProp;
   const disabled = group.disabled || disabledProp;
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!disabled) {
       if (group.onValueChange) {
         group.onValueChange(value);

package/src/Screen/Screen.native.tsx

@@ -11,6 +11,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   safeArea = true,
   scrollable = true,
   contentInset,
+  onLayout,
   // Spacing variants from ContainerStyleProps
   gap,
   padding,
@@ -66,6 +67,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
         style={[screenStyle, style]}
         contentContainerStyle={{ flexGrow: 1 }}
         testID={testID}
+        onLayout={onLayout}
       >
         <RNView style={[contentInsetStyle, { flex: 1 }]}>
           {children}
@@ -75,7 +77,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   }
 
   return (
-    <RNView ref={ref as any} nativeID={id} style={[screenStyle, safeAreaStyle, style]} testID={testID}>
+    <RNView ref={ref as any} nativeID={id} style={[screenStyle, safeAreaStyle, style]} testID={testID} onLayout={onLayout}>
       {children}
     </RNView>
   );

package/src/Screen/Screen.web.tsx

@@ -3,6 +3,7 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { useWebLayout } from '../hooks/useWebLayout';
 import type { IdealystElement } from '../utils/refTypes';
 
 /**
@@ -13,6 +14,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   children,
   background = 'screen',
   safeArea = false,
+  onLayout,
   // Spacing variants from ContainerStyleProps
   gap,
   padding,
@@ -25,6 +27,8 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   testID,
   id,
 }, ref) => {
+  const layoutRef = useWebLayout<HTMLDivElement>(onLayout);
+
   screenStyles.useVariants({
     background,
     safeArea,
@@ -40,7 +44,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   // Call style as function to get theme-reactive styles
   const webProps = getWebProps([(screenStyles.screen as any)({}), style as any]);
 
-  const mergedRef = useMergeRefs(ref, webProps.ref);
+  const mergedRef = useMergeRefs(ref, webProps.ref, layoutRef);
 
   return (
     <div

package/src/Screen/types.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
 import { Surface } from '@idealyst/theme';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
 
@@ -49,4 +49,10 @@ export interface ScreenProps extends ContainerStyleProps {
    * Scrollable content
    */
   scrollable?: boolean;
+
+  /**
+   * Called when the layout of the screen changes.
+   * Provides the new width, height, x, and y coordinates.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
 }

package/src/Select/Select.styles.tsx

@@ -56,39 +56,43 @@ export const selectStyles = defineStyle('Select', (theme: Theme) => ({
         marginBottom: 4,
     }),
 
-    trigger: ({ type: _type = 'outlined', intent: _intent = 'neutral', disabled = false, error: _error = false, focused: _focused = false }: SelectDynamicProps) => ({
-        position: 'relative' as const,
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'space-between' as const,
-        borderWidth: 1,
-        borderStyle: 'solid' as const,
-        opacity: disabled ? 0.6 : 1,
-        variants: {
-            type: {
-                filled: {
-                    backgroundColor: theme.colors.surface.secondary,
-                    borderColor: 'transparent',
-                },
-                outlined: {
-                    backgroundColor: theme.colors.surface.primary,
-                    borderWidth: 1,
-                    borderColor: theme.colors.border.primary,
-                }
+    trigger: ({ type = 'outlined', intent = 'neutral', disabled = false, error = false, focused = false }: SelectDynamicProps) => {
+        // Determine border color based on state priority: error > focused > default
+        const getBorderColor = () => {
+            if (error) return theme.intents.danger.primary;
+            if (focused) return theme.intents[intent]?.primary ?? theme.intents.primary.primary;
+            return type === 'filled' ? 'transparent' : theme.colors.border.primary;
+        };
+
+        const borderColor = getBorderColor();
+
+        return {
+            position: 'relative' as const,
+            flexDirection: 'row' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'space-between' as const,
+            borderWidth: 1,
+            borderStyle: 'solid' as const,
+            borderColor,
+            borderRadius: 8,
+            opacity: disabled ? 0.6 : 1,
+            backgroundColor: type === 'filled' ? theme.colors.surface.secondary : theme.colors.surface.primary,
+            variants: {
+                size: theme.sizes.$select,
             },
-            size: theme.sizes.$select,
-        },
-        _web: {
-            display: 'flex',
-            boxSizing: 'border-box',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            border: `1px solid`,
-            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-            _hover: disabled ? {} : { opacity: 0.9 },
-            _active: disabled ? {} : { opacity: 0.8 },
-            _focus: { outline: 'none' },
-        },
-    }),
+            _web: {
+                display: 'flex',
+                boxSizing: 'border-box',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                border: `1px solid ${borderColor}`,
+                boxShadow: focused && !error ? `0 0 0 2px ${theme.intents[intent]?.primary ?? theme.intents.primary.primary}33` : 'none',
+                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+                _hover: disabled ? {} : { borderColor: focused || error ? borderColor : theme.colors.border.secondary },
+                _active: disabled ? {} : { opacity: 0.9 },
+                _focus: { outline: 'none' },
+            },
+        };
+    },
 
     triggerContent: (_props: SelectDynamicProps) => ({
         flex: 1,

package/src/Slider/Slider.web.tsx

@@ -101,6 +101,7 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
     if (disabled) return;
 
     e.preventDefault();
+    e.stopPropagation();
 
     // Check if click is on the thumb
     const isThumbClick = thumbRef.current && thumbRef.current.contains(e.target as Node);
@@ -145,21 +146,27 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
 
     if (matchesKey(e, SLIDER_KEYS.increase)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = clampValue(value + step);
     } else if (matchesKey(e, SLIDER_KEYS.decrease)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = clampValue(value - step);
     } else if (matchesKey(e, SLIDER_KEYS.min)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = min;
     } else if (matchesKey(e, SLIDER_KEYS.max)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = max;
     } else if (matchesKey(e, SLIDER_KEYS.increaseLarge)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = clampValue(value + largeStep);
     } else if (matchesKey(e, SLIDER_KEYS.decreaseLarge)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = clampValue(value - largeStep);
     }
 

package/src/Switch/Switch.web.tsx

@@ -39,7 +39,9 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
   accessibilityDescribedBy,
   accessibilityChecked,
 }, ref) => {
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!disabled && onChange) {
       onChange(!checked);
     }

package/src/TabBar/TabBar.web.tsx

@@ -36,7 +36,7 @@ function renderIcon(
 interface TabProps {
   item: TabBarItem;
   isActive: boolean;
-  onClick: () => void;
+  onClick: (e: React.MouseEvent) => void;
   onKeyDown: (e: React.KeyboardEvent) => void;
   size: TabBarProps['size'];
   type: TabBarProps['type'];
@@ -168,15 +168,19 @@ const TabBar: React.FC<TabBarProps> = ({
 
     if (key === 'ArrowRight') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
     } else if (key === 'ArrowLeft') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
     } else if (key === 'Home') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = 0;
     } else if (key === 'End') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = enabledItems.length - 1;
     }
 
@@ -237,7 +241,9 @@ const TabBar: React.FC<TabBarProps> = ({
     updateIndicator();
   }, [items]);
 
-  const handleTabClick = (itemValue: string, disabled?: boolean) => {
+  const handleTabClick = (e: React.MouseEvent, itemValue: string, disabled?: boolean) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (disabled) return;
 
     if (controlledValue === undefined) {
@@ -306,7 +312,7 @@ const TabBar: React.FC<TabBarProps> = ({
             key={item.value}
             item={item}
             isActive={isActive}
-            onClick={() => handleTabClick(item.value, item.disabled)}
+            onClick={(e) => handleTabClick(e, item.value, item.disabled)}
             onKeyDown={(e) => handleKeyDown(e, item.value)}
             size={size}
             type={type}

package/src/TextArea/TextArea.web.tsx

@@ -168,6 +168,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   }, [value, autoGrow, minHeight, maxHeight]);
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    e.stopPropagation();
     const newValue = e.target.value;
 
     if (maxLength && newValue.length > maxLength) {

package/src/TextInput/TextInput.web.tsx

@@ -88,6 +88,7 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation();
     if (onChangeText) {
       onChangeText(e.target.value);
     }

package/src/View/View.native.tsx

@@ -45,6 +45,7 @@ const View = forwardRef<IdealystElement, ViewProps>(({
   style,
   testID,
   id,
+  onLayout,
 }, ref) => {
   // Set active variants for this render
   viewStyles.useVariants({
@@ -89,6 +90,7 @@ const View = forwardRef<IdealystElement, ViewProps>(({
         contentContainerStyle={[viewStyle, overrideStyles]}
         testID={testID}
         nativeID={id}
+        onLayout={onLayout}
       >
         {children}
       </RNScrollView>
@@ -96,7 +98,7 @@ const View = forwardRef<IdealystElement, ViewProps>(({
   }
 
   return (
-    <RNView ref={ref as any} style={[viewStyle, overrideStyles, finalStyle]} testID={testID} nativeID={id}>
+    <RNView ref={ref as any} style={[viewStyle, overrideStyles, finalStyle]} testID={testID} nativeID={id} onLayout={onLayout}>
       {children}
     </RNView>
   );

package/src/View/View.web.tsx

@@ -3,6 +3,7 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { ViewProps } from './types';
 import { viewStyles } from './View.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { useWebLayout } from '../hooks/useWebLayout';
 import type { IdealystElement } from '../utils/refTypes';
 
 /**
@@ -31,7 +32,10 @@ const View = forwardRef<IdealystElement, ViewProps>(({
   style,
   testID,
   id,
+  onLayout,
 }, ref) => {
+  const layoutRef = useWebLayout<HTMLDivElement>(onLayout);
+
   viewStyles.useVariants({
     background,
     radius,
@@ -51,7 +55,7 @@ const View = forwardRef<IdealystElement, ViewProps>(({
   /** @ts-ignore */
   const wrapperWebProps = getWebProps(viewStyles.scrollableWrapper);
 
-  const mergedRef = useMergeRefs(ref, webProps.ref);
+  const mergedRef = useMergeRefs(ref, webProps.ref, layoutRef);
 
   // When scrollable, render a wrapper + content structure
   // Wrapper: sizing and margin (positioning in parent layout)

package/src/View/types.ts

@@ -1,6 +1,6 @@
 import { Size, Surface, ResponsiveStyle } from '@idealyst/theme';
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
 
 /**
@@ -99,4 +99,11 @@ export interface ViewProps extends ContainerStyleProps {
    * Test ID for testing
    */
   testID?: string;
+
+  /**
+   * Callback when the view's layout changes.
+   * Called with layout information (x, y, width, height) when the component
+   * mounts or when its dimensions change.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
 }

package/src/examples/CardExamples.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Screen, View, Text, Card, Button } from '../index';
 
 export const CardExamples = () => {
@@ -5,6 +6,8 @@ export const CardExamples = () => {
     console.log(`Card pressed: ${cardType}`);
   };
 
+  const [cardDimensions, setCardDimensions] = useState({ width: 0, height: 0 });
+
   return (
     <Screen background="primary" padding="lg">
       <View gap="xl">
@@ -163,6 +166,30 @@ export const CardExamples = () => {
           </View>
         </Card>
       </View>
+
+      {/* onLayout Example */}
+      <View gap="md">
+        <Text typography="subtitle1">onLayout Callback</Text>
+        <Text typography="caption" color="secondary">
+          Track card dimensions as they change
+        </Text>
+        <Card
+          type="outlined"
+          padding="md"
+          onLayout={(event) => {
+            const { width, height } = event.nativeEvent.layout;
+            setCardDimensions({ width, height });
+          }}
+        >
+          <Text weight="semibold">Responsive Card</Text>
+          <Text typography="caption" color="secondary">
+            Width: {Math.round(cardDimensions.width)}px
+          </Text>
+          <Text typography="caption" color="secondary">
+            Height: {Math.round(cardDimensions.height)}px
+          </Text>
+        </Card>
+      </View>
     </View>
     </Screen>
   );

package/src/examples/ScreenExamples.tsx

@@ -1,6 +1,9 @@
+import { useState } from 'react';
 import { Screen, View, Text } from '../index';
 
 export const ScreenExamples = () => {
+  const [screenDimensions, setScreenDimensions] = useState({ width: 0, height: 0 });
+
   return (
     <Screen background="primary" padding="lg">
       <View gap="lg">
@@ -147,6 +150,34 @@ export const ScreenExamples = () => {
             </Screen>
           </View>
         </View>
+
+        {/* onLayout Example */}
+        <View gap="md">
+          <Text typography="subtitle1">onLayout Callback</Text>
+          <Text typography="caption" color="secondary">
+            Track screen dimensions as they change
+          </Text>
+          <View style={{ height: 120, borderWidth: 1, borderColor: '#ccc' }}>
+            <Screen
+              background="secondary"
+              padding="md"
+              onLayout={(event) => {
+                const { width, height } = event.nativeEvent.layout;
+                setScreenDimensions({ width, height });
+              }}
+            >
+              <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+                <Text weight="semibold">Responsive Screen</Text>
+                <Text typography="caption" color="secondary">
+                  Width: {Math.round(screenDimensions.width)}px
+                </Text>
+                <Text typography="caption" color="secondary">
+                  Height: {Math.round(screenDimensions.height)}px
+                </Text>
+              </View>
+            </Screen>
+          </View>
+        </View>
       </View>
     </Screen>
   );

package/src/hooks/useWebLayout/index.native.ts

@@ -0,0 +1 @@
+export { useWebLayout } from './useWebLayout.native';

package/src/hooks/useWebLayout/index.ts

@@ -0,0 +1 @@
+export { useWebLayout } from './useWebLayout';

package/src/hooks/useWebLayout/index.web.ts

@@ -0,0 +1 @@
+export { useWebLayout } from './useWebLayout.web';

package/src/hooks/useWebLayout/useWebLayout.native.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+
+/**
+ * No-op hook for native - onLayout is handled natively by React Native components.
+ * Returns a ref for API compatibility, but it's not used on native.
+ *
+ * @param _onLayout - Unused on native (React Native components handle onLayout directly)
+ * @returns A ref (unused on native, for API compatibility)
+ */
+export function useWebLayout<T = any>(
+  _onLayout: ((event: LayoutChangeEvent) => void) | undefined
+) {
+  return useRef<T>(null);
+}

package/src/hooks/useWebLayout/useWebLayout.web.ts

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+
+/**
+ * Hook that provides onLayout functionality for web components using ResizeObserver.
+ * Returns a ref that should be attached to the element you want to observe.
+ *
+ * @param onLayout - Callback fired when layout changes, with React Native compatible event shape
+ * @returns A ref to attach to the observed element
+ */
+export function useWebLayout<T extends HTMLElement = HTMLElement>(
+  onLayout: ((event: LayoutChangeEvent) => void) | undefined
+) {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    if (!onLayout || !ref.current) return;
+
+    const element = ref.current;
+
+    // Call immediately with initial layout
+    const rect = element.getBoundingClientRect();
+    onLayout({
+      nativeEvent: {
+        layout: {
+          x: rect.left,
+          y: rect.top,
+          width: rect.width,
+          height: rect.height,
+        },
+      },
+    } as LayoutChangeEvent);
+
+    // Set up ResizeObserver for subsequent changes
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        const boundingRect = element.getBoundingClientRect();
+        onLayout({
+          nativeEvent: {
+            layout: {
+              x: boundingRect.left,
+              y: boundingRect.top,
+              width,
+              height,
+            },
+          },
+        } as LayoutChangeEvent);
+      }
+    });
+
+    resizeObserver.observe(element);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [onLayout]);
+
+  return ref;
+}