@idealyst/components 1.2.33 → 1.2.34

package/package.json

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

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(() => {
@@ -105,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/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/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;
+}