@idealyst/components 1.2.29 → 1.2.30

package/src/Dialog/Dialog.native.tsx

@@ -7,7 +7,7 @@ import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 
 const Dialog = forwardRef<View, DialogProps>(({
   open,
-  onOpenChange,
+  onClose,
   title,
   children,
   size = 'md',
@@ -76,22 +76,22 @@ const Dialog = forwardRef<View, DialogProps>(({
     if (!open) return;
 
     const handleBackPress = () => {
-      onOpenChange(false);
+      onClose();
       return true; // Prevent default back behavior
     };
 
     const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
     return () => backHandler.remove();
-  }, [open, onOpenChange]);
+  }, [open, onClose]);
 
   const handleBackdropPress = () => {
     if (closeOnBackdropClick) {
-      onOpenChange(false);
+      onClose();
     }
   };
 
   const handleClosePress = () => {
-    onOpenChange(false);
+    onClose();
   };
 
   // Apply variants
@@ -129,7 +129,7 @@ const Dialog = forwardRef<View, DialogProps>(({
       visible={open}
       transparent
       animationType="none"
-      onRequestClose={() => onOpenChange(false)}
+      onRequestClose={() => onClose()}
       statusBarTranslucent
       testID={testID}
     >

package/src/Dialog/Dialog.web.tsx

@@ -13,7 +13,7 @@ import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/ac
  */
 const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   open,
-  onOpenChange,
+  onClose,
   title,
   children,
   size = 'md',
@@ -81,13 +81,13 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
 
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        onOpenChange(false);
+        onClose();
       }
     };
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [open, closeOnEscapeKey, onOpenChange]);
+  }, [open, closeOnEscapeKey, onClose]);
 
   // Handle focus management
   useEffect(() => {
@@ -122,12 +122,12 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
 
   const handleBackdropClick = (event: React.MouseEvent) => {
     if (closeOnBackdropClick && event.target === event.currentTarget) {
-      onOpenChange(false);
+      onClose();
     }
   };
 
   const handleCloseClick = () => {
-    onOpenChange(false);
+    onClose();
   };
 
   // Apply variants

package/src/Dialog/types.ts

@@ -19,9 +19,9 @@ export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {
   open: boolean;
 
   /**
-   * Called when the dialog should be opened or closed
+   * Called when the dialog should be closed
    */
-  onOpenChange: (open: boolean) => void;
+  onClose: () => void;
 
   /**
    * Optional title for the dialog

package/src/Divider/Divider.native.tsx

@@ -2,11 +2,12 @@ import { forwardRef } from 'react';
 import { View, Text } from 'react-native';
 import { DividerProps } from './types';
 import { dividerStyles } from './Divider.styles';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Divider = forwardRef<View, DividerProps>(({
+const Divider = forwardRef<IdealystElement, DividerProps>(({
   orientation = 'horizontal',
   type = 'solid',
-  thickness = 'thin',
+  size = 'sm',
   intent = 'neutral',
   length = 'full',
   spacing = 'md',
@@ -26,7 +27,7 @@ const Divider = forwardRef<View, DividerProps>(({
   // Get dynamic divider style
   const dividerStyle = (dividerStyles.divider as any)({
     orientation,
-    thickness,
+    size,
     type,
     intent,
     spacing,
@@ -35,15 +36,17 @@ const Divider = forwardRef<View, DividerProps>(({
   // Get dynamic line style
   const lineStyle = (dividerStyles.line as any)({
     orientation,
-    thickness,
+    size,
   });
 
-  // Get thickness value for dashed/dotted border handling on native
-  const getThicknessValue = () => {
-    switch (thickness) {
-      case 'thin': return 1;
+  // Get size value for dashed/dotted border handling on native
+  const getSizeValue = () => {
+    switch (size) {
+      case 'xs': return 1;
+      case 'sm': return 1;
       case 'md': return 2;
-      case 'thick': return 4;
+      case 'lg': return 3;
+      case 'xl': return 4;
       default: return 1;
     }
   };
@@ -51,19 +54,19 @@ const Divider = forwardRef<View, DividerProps>(({
   // For dashed/dotted variants on native, we need to use border instead of background
   const getNativeDashedStyle = () => {
     if (type === 'dashed' || type === 'dotted') {
-      const actualThickness = getThicknessValue();
+      const actualSize = getSizeValue();
 
       return {
         backgroundColor: 'transparent',
         borderStyle: type,
         borderColor: dividerStyle.backgroundColor,
         ...(orientation === 'horizontal' ? {
-          borderTopWidth: actualThickness,
+          borderTopWidth: actualSize,
           borderBottomWidth: 0,
           borderLeftWidth: 0,
           borderRightWidth: 0,
         } : {
-          borderLeftWidth: actualThickness,
+          borderLeftWidth: actualSize,
           borderTopWidth: 0,
           borderBottomWidth: 0,
           borderRightWidth: 0,
@@ -77,7 +80,7 @@ const Divider = forwardRef<View, DividerProps>(({
   if (!children) {
     return (
       <View
-        ref={ref}
+        ref={ref as any}
         nativeID={id}
         style={[dividerStyle, getNativeDashedStyle(), style]}
         testID={testID}
@@ -89,7 +92,7 @@ const Divider = forwardRef<View, DividerProps>(({
   // For lines with content, create line segments
   const renderLineSegment = () => {
     if (type === 'dashed' || type === 'dotted') {
-      const actualThickness = getThicknessValue();
+      const actualSize = getSizeValue();
 
       return (
         <View
@@ -100,12 +103,12 @@ const Divider = forwardRef<View, DividerProps>(({
               borderStyle: type,
               borderColor: lineStyle.backgroundColor,
               ...(orientation === 'horizontal' ? {
-                borderTopWidth: actualThickness,
+                borderTopWidth: actualSize,
                 borderBottomWidth: 0,
                 borderLeftWidth: 0,
                 borderRightWidth: 0,
               } : {
-                borderLeftWidth: actualThickness,
+                borderLeftWidth: actualSize,
                 borderTopWidth: 0,
                 borderBottomWidth: 0,
                 borderRightWidth: 0,
@@ -121,7 +124,7 @@ const Divider = forwardRef<View, DividerProps>(({
 
   return (
     <View
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       style={dividerStyles.container}
       testID={testID}

package/src/Divider/Divider.styles.tsx

@@ -3,7 +3,7 @@
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
-import type { Theme as BaseTheme, Intent } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
 void StyleSheet;
@@ -12,14 +12,14 @@ void StyleSheet;
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
 type DividerOrientation = 'horizontal' | 'vertical';
-type DividerThickness = 'thin' | 'md' | 'thick';
+type DividerSize = Size;
 type DividerType = 'solid' | 'dashed' | 'dotted';
 type DividerIntent = Intent | 'secondary' | 'neutral' | 'info';
 type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
 
 export type DividerDynamicProps = {
     orientation?: DividerOrientation;
-    thickness?: DividerThickness;
+    size?: DividerSize;
     type?: DividerType;
     intent?: DividerIntent;
     spacing?: DividerSpacing;
@@ -27,14 +27,20 @@ export type DividerDynamicProps = {
 
 export type LineDynamicProps = {
     orientation?: DividerOrientation;
-    thickness?: DividerThickness;
+    size?: DividerSize;
 };
 
-function getThicknessValue(thickness: DividerThickness): number {
-    switch (thickness) {
-        case 'thin': return 1;
+/**
+ * Maps Size to thickness value in pixels.
+ * xs=1, sm=1, md=2, lg=3, xl=4
+ */
+function getSizeValue(size: DividerSize): number {
+    switch (size) {
+        case 'xs': return 1;
+        case 'sm': return 1;
         case 'md': return 2;
-        case 'thick': return 4;
+        case 'lg': return 3;
+        case 'xl': return 4;
         default: return 1;
     }
 }
@@ -50,17 +56,17 @@ function getSpacingValue(spacing: DividerSpacing): number {
 }
 
 /**
- * Divider styles with dynamic functions for orientation/thickness/intent combinations.
+ * Divider styles with dynamic functions for orientation/size/intent combinations.
  */
 export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
     divider: ({
         orientation = 'horizontal',
-        thickness = 'thin',
+        size = 'sm',
         type = 'solid',
         intent = 'neutral',
         spacing = 'md'
     }: DividerDynamicProps) => {
-        const thicknessValue = getThicknessValue(thickness);
+        const sizeValue = getSizeValue(size);
         const spacingValue = getSpacingValue(spacing);
         const isHorizontal = orientation === 'horizontal';
         const isDashedOrDotted = type === 'dashed' || type === 'dotted';
@@ -72,11 +78,11 @@ export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
                 ? theme.colors.border.secondary
                 : intent === 'info'
                     ? theme.intents.primary.primary
-                    : theme.intents[intent as Intent].primary;
+                    : (theme.intents[intent as Intent]?.primary ?? theme.colors.border.primary);
 
         const dimensionStyles = isHorizontal
-            ? { width: '100%', height: thicknessValue, flexDirection: 'row' as const }
-            : { width: thicknessValue, height: '100%', flexDirection: 'column' as const };
+            ? { width: '100%', height: sizeValue, flexDirection: 'row' as const }
+            : { width: sizeValue, height: '100%', flexDirection: 'column' as const };
 
         const spacingStyles = isHorizontal
             ? { marginVertical: spacingValue }
@@ -86,8 +92,8 @@ export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
             border: 'none',
             backgroundColor: 'transparent',
             ...(isHorizontal
-                ? { borderTop: `${thicknessValue}px ${type} ${color}` }
-                : { borderLeft: `${thicknessValue}px ${type} ${color}` }
+                ? { borderTop: `${sizeValue}px ${type} ${color}` }
+                : { borderLeft: `${sizeValue}px ${type} ${color}` }
             ),
         } : {};
 
@@ -137,17 +143,33 @@ export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
         },
     }),
 
-    line: ({ orientation = 'horizontal', thickness = 'thin' }: LineDynamicProps) => {
-        const thicknessValue = getThicknessValue(thickness);
-        const isHorizontal = orientation === 'horizontal';
-
-        return {
-            backgroundColor: theme.colors.border.secondary,
-            flex: 1,
-            ...(isHorizontal
-                ? { height: thicknessValue }
-                : { width: thicknessValue }
-            ),
-        } as const;
-    },
+    line: (_props: LineDynamicProps) => ({
+        backgroundColor: theme.colors.border.secondary,
+        flex: 1,
+        variants: {
+            orientation: {
+                horizontal: {},
+                vertical: {},
+            },
+            size: {
+                xs: {},
+                sm: {},
+                md: {},
+                lg: {},
+                xl: {},
+            },
+        },
+        compoundVariants: [
+            { orientation: 'horizontal', size: 'xs', styles: { height: 1 } },
+            { orientation: 'horizontal', size: 'sm', styles: { height: 1 } },
+            { orientation: 'horizontal', size: 'md', styles: { height: 2 } },
+            { orientation: 'horizontal', size: 'lg', styles: { height: 3 } },
+            { orientation: 'horizontal', size: 'xl', styles: { height: 4 } },
+            { orientation: 'vertical', size: 'xs', styles: { width: 1 } },
+            { orientation: 'vertical', size: 'sm', styles: { width: 1 } },
+            { orientation: 'vertical', size: 'md', styles: { width: 2 } },
+            { orientation: 'vertical', size: 'lg', styles: { width: 3 } },
+            { orientation: 'vertical', size: 'xl', styles: { width: 4 } },
+        ],
+    }),
 }));

package/src/Divider/Divider.web.tsx

@@ -3,15 +3,16 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { DividerProps } from './types';
 import { dividerStyles } from './Divider.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Visual separator for dividing content sections horizontally or vertically.
  * Supports solid, dashed, and dotted styles with optional text content.
  */
-const Divider = forwardRef<HTMLDivElement, DividerProps>(({
+const Divider = forwardRef<IdealystElement, DividerProps>(({
   orientation = 'horizontal',
   type = 'solid',
-  thickness = 'thin',
+  size = 'sm',
   intent = 'neutral',
   length = 'full',
   spacing = 'md',
@@ -31,7 +32,7 @@ const Divider = forwardRef<HTMLDivElement, DividerProps>(({
   // Get dynamic divider style
   const dividerStyle = (dividerStyles.divider as any)({
     orientation,
-    thickness,
+    size,
     type,
     intent,
     spacing,
@@ -40,7 +41,7 @@ const Divider = forwardRef<HTMLDivElement, DividerProps>(({
   // Get dynamic line style
   const lineStyle = (dividerStyles.line as any)({
     orientation,
-    thickness,
+    size,
   });
 
   // Generate web props

package/src/Divider/types.ts

@@ -5,9 +5,9 @@ import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type DividerIntentVariant = Intent;
+export type DividerSizeVariant = Size;
 export type DividerOrientationVariant = 'horizontal' | 'vertical';
 export type DividerType = 'solid' | 'dashed' | 'dotted';
-export type DividerThicknessVariant = 'thin' | 'md' | 'thick';
 export type DividerLengthVariant = 'full' | 'auto' | number;
 export type DividerSpacingVariant = 'none' | Size;
 
@@ -27,9 +27,9 @@ export interface DividerProps extends BaseProps {
   type?: DividerType;
 
   /**
-   * The thickness of the divider
+   * The size (thickness) of the divider
    */
-  thickness?: DividerThicknessVariant;
+  size?: DividerSizeVariant;
 
   /**
    * The color intent of the divider

package/src/Icon/Icon.native.tsx

@@ -2,8 +2,9 @@ import { forwardRef, useMemo } from 'react';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { IconProps } from './types';
 import { iconStyles } from './Icon.styles';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Icon = forwardRef<any, IconProps>(({
+const Icon = forwardRef<IdealystElement, IconProps>(({
   name,
   size = 'md',
   color,
@@ -26,7 +27,7 @@ const Icon = forwardRef<any, IconProps>(({
 
   return (
     <MaterialDesignIcons
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       size={iconSize}
       name={name}

package/src/Icon/Icon.web.tsx

@@ -7,12 +7,13 @@ import { useUnistyles } from 'react-native-unistyles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getColorFromString, Intent, Color, Text } from '@idealyst/theme';
 import { IconRegistry } from './IconRegistry';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Vector icon display from the Material Design Icons library.
  * Supports intent-based coloring and theme-aware sizing.
  */
-const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+const Icon = forwardRef<IdealystElement, IconProps>((props, ref) => {
   const {
     name,
     size = 'md',

package/src/Icon/IconSvg/IconSvg.native.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
+import type { IdealystElement } from '../../utils/refTypes';
 
 /**
  * Internal component for rendering SVG icons directly from MDI paths.
@@ -18,7 +19,7 @@ interface IconSvgProps {
   'data-testid'?: string;
 }
 
-export const IconSvg = React.forwardRef<View, IconSvgProps>(({
+export const IconSvg = React.forwardRef<IdealystElement, IconSvgProps>(({
   path,
   size = 24,
   color = 'currentColor',
@@ -29,7 +30,7 @@ export const IconSvg = React.forwardRef<View, IconSvgProps>(({
   const sizeNum = typeof size === 'string' ? parseFloat(size) : size;
 
   return (
-    <View ref={ref} style={[{ width: sizeNum, height: sizeNum }, style]} testID={testID}>
+    <View ref={ref as any} style={[{ width: sizeNum, height: sizeNum }, style]} testID={testID}>
       <Svg viewBox="0 0 24 24" width={sizeNum} height={sizeNum}>
         <Path d={path} fill={color} />
       </Svg>

package/src/Image/Image.native.tsx

@@ -3,8 +3,9 @@ import { Image as RNImage, View } from 'react-native';
 import { imageStyles } from './Image.styles';
 import type { ImageProps } from './types';
 import ActivityIndicator from '../ActivityIndicator';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Image = forwardRef<View, ImageProps>(({
+const Image = forwardRef<IdealystElement, ImageProps>(({
   source,
   alt,
   width,
@@ -57,7 +58,7 @@ const Image = forwardRef<View, ImageProps>(({
   ];
 
   return (
-    <View ref={ref} nativeID={id} style={containerStyle as any} testID={testID} accessibilityRole="image" accessibilityLabel={accessibilityLabel || alt}>
+    <View ref={ref as any} nativeID={id} style={containerStyle as any} testID={testID} accessibilityRole="image" accessibilityLabel={accessibilityLabel || alt}>
       <RNImage
         source={imageSource as any}
         style={[imageStyles.image, { borderRadius }]}