@idealyst/components 1.2.35 → 1.2.36

package/package.json

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

package/src/Card/types.ts

@@ -1,8 +1,9 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
 import { InteractiveAccessibilityProps } from '../utils/accessibility';
+import type { LayoutChangeEvent } from '../hooks/useWebLayout';
 
 // Component-specific type aliases for future extensibility
 export type CardIntentVariant = Intent;

package/src/Checkbox/Checkbox.native.tsx

@@ -87,6 +87,7 @@ const Checkbox = forwardRef<IdealystElement, CheckboxProps>(({
   // Apply variants
   checkboxStyles.useVariants({
     size,
+    intent,
     type: variant as any,
     checked: internalChecked,
     disabled,

package/src/Checkbox/Checkbox.styles.tsx

@@ -86,10 +86,6 @@ export const checkboxStyles = defineStyle('Checkbox', (theme: Theme) => ({
                 outlined: { borderWidth: 2 },
             },
             checked: {
-                true: {
-                    backgroundColor: theme.$intents.primary,
-                    borderColor: theme.$intents.primary,
-                },
                 false: {
                     backgroundColor: 'transparent',
                     borderColor: theme.colors.border.primary,
@@ -100,6 +96,15 @@ export const checkboxStyles = defineStyle('Checkbox', (theme: Theme) => ({
                 false: { opacity: 1 },
             },
         },
+        compoundVariants: [
+            {
+                checked: true,
+                styles: {
+                    backgroundColor: theme.$intents.primary,
+                    borderColor: theme.$intents.primary,
+                },
+            },
+        ],
         _web: {
             outline: 'none',
             display: 'flex',

package/src/Checkbox/Checkbox.web.tsx

@@ -120,6 +120,7 @@ const Checkbox = forwardRef<IdealystElement, CheckboxProps>(({
   // Apply variants
   checkboxStyles.useVariants({
     size,
+    intent,
     type: variant as any,
     checked: internalChecked,
     disabled,

package/src/Screen/types.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { Surface } from '@idealyst/theme';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
+import type { LayoutChangeEvent } from '../hooks/useWebLayout';
 
 /**
  * Full-screen container component with safe area support.

package/src/TextInput/TextInput.native.tsx

@@ -201,9 +201,13 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     nativeA11yProps,
   ]);
 
-  // Apply variants to the stylesheet (for size and spacing)
+  // Apply variants to the stylesheet (for size, type, and spacing)
   textInputStyles.useVariants({
     size,
+    type,
+    focused: isFocused,
+    hasError,
+    disabled,
     margin,
     marginVertical,
     marginHorizontal,

package/src/TextInput/TextInput.web.tsx

@@ -123,9 +123,13 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     setIsPasswordVisible(!isPasswordVisible);
   };
 
-  // Apply variants (for size and spacing)
+  // Apply variants (for size, type, and spacing)
   textInputStyles.useVariants({
     size,
+    type,
+    focused: isFocused,
+    hasError,
+    disabled,
     margin,
     marginVertical,
     marginHorizontal,

package/src/View/types.ts

@@ -1,7 +1,8 @@
 import { Size, Surface, ResponsiveStyle } from '@idealyst/theme';
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
+import type { LayoutChangeEvent } from '../hooks/useWebLayout';
 
 /**
  * Style prop type that accepts both regular styles and responsive styles.

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

@@ -1 +1,2 @@
 export { useWebLayout } from './useWebLayout.native';
+export type { LayoutChangeEvent, LayoutInfo, OnLayoutCallback } from './types';

package/src/hooks/useWebLayout/index.ts

@@ -1 +1,2 @@
 export { useWebLayout } from './useWebLayout.web';
+export type { LayoutChangeEvent, LayoutInfo, OnLayoutCallback } from './types';

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

@@ -1 +1,2 @@
 export { useWebLayout } from './useWebLayout.web';
+export type { LayoutChangeEvent, LayoutInfo, OnLayoutCallback } from './types';

package/src/hooks/useWebLayout/types.ts

@@ -0,0 +1,28 @@
+/**
+ * Layout information provided when a component's dimensions change.
+ */
+export interface LayoutInfo {
+  /** X position relative to the viewport (web) or parent (native) */
+  x: number;
+  /** Y position relative to the viewport (web) or parent (native) */
+  y: number;
+  /** Width of the element */
+  width: number;
+  /** Height of the element */
+  height: number;
+}
+
+/**
+ * Event fired when a component's layout changes.
+ * Compatible with React Native's LayoutChangeEvent structure.
+ */
+export interface LayoutChangeEvent {
+  nativeEvent: {
+    layout: LayoutInfo;
+  };
+}
+
+/**
+ * Callback type for layout change events.
+ */
+export type OnLayoutCallback = (event: LayoutChangeEvent) => void;

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

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import type { LayoutChangeEvent } from 'react-native';
+import type { LayoutChangeEvent } from './types';
 
 /**
  * No-op hook for native - onLayout is handled natively by React Native components.

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import type { LayoutChangeEvent } from 'react-native';
+import type { LayoutChangeEvent } from './types';
 
 /**
  * Hook that provides onLayout functionality for web components using ResizeObserver.
@@ -33,7 +33,7 @@ export function useWebLayout<T extends HTMLElement = HTMLElement>(
             height: rect.height,
           },
         },
-      } as LayoutChangeEvent);
+      });
     };
 
     // Call immediately with initial layout