@idealyst/components 1.2.29 → 1.2.30

package/src/Avatar/Avatar.native.tsx

@@ -3,8 +3,9 @@ import { View, Text, Image } from 'react-native';
 import { AvatarProps } from './types';
 import { avatarStyles } from './Avatar.styles';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Avatar = forwardRef<View, AvatarProps>(({
+const Avatar = forwardRef<IdealystElement, AvatarProps>(({
   src,
   alt,
   fallback,
@@ -45,7 +46,7 @@ const Avatar = forwardRef<View, AvatarProps>(({
   const fallbackStyle = (avatarStyles.fallback as any)({});
 
   return (
-    <View ref={ref} nativeID={id} style={[avatarStyle, style]} testID={testID} {...nativeA11yProps}>
+    <View ref={ref as any} nativeID={id} style={[avatarStyle, style]} testID={testID} {...nativeA11yProps}>
       {src && !hasError ? (
         <Image
           source={typeof src === 'string' ? { uri: src } : src}

package/src/Avatar/Avatar.web.tsx

@@ -4,12 +4,13 @@ import { AvatarProps } from './types';
 import { avatarStyles } from './Avatar.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebAriaProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * User or entity representation with image support and fallback initials.
  * Available in circle or square shapes with multiple sizes.
  */
-const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
+const Avatar = forwardRef<IdealystElement, AvatarProps>(({
   src,
   alt,
   fallback,

package/src/Avatar/types.ts

@@ -5,7 +5,7 @@ import { AccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type AvatarColorVariant = Color;
-export type AvatarSizeVariant = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarSizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShapeVariant = 'circle' | 'square';
 
 /**

package/src/Badge/Badge.native.tsx

@@ -4,25 +4,37 @@ import MaterialDesignIcons from '@react-native-vector-icons/material-design-icon
 import { BadgeProps } from './types';
 import { badgeStyles } from './Badge.styles';
 import { isIconName } from '../Icon/icon-resolver';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Badge = forwardRef<View, BadgeProps>(({
+/**
+ * Small status indicator for counts, labels, or notifications.
+ * Available in filled, outlined, and dot variants with customizable colors.
+ *
+ * Supports both `intent` (semantic colors) and `color` (raw palette colors).
+ * If both are provided, `intent` takes precedence.
+ */
+const Badge = forwardRef<IdealystElement, BadgeProps>(({
   children,
   icon,
   size = 'md',
   type = 'filled',
-  color = 'blue',
+  intent,
+  color,
   style,
   testID,
   id,
 }, ref) => {
+  // Default to 'primary' intent if neither intent nor color is provided
+  const effectiveColor = intent ? undefined : (color ?? 'primary');
+
   badgeStyles.useVariants({
     size,
     type,
   });
 
-  // Call dynamic styles with color variant
-  const badgeStyle = (badgeStyles.badge as any)({ color });
-  const textStyle = (badgeStyles.text as any)({ color });
+  // Call dynamic styles with intent/color - intent takes precedence
+  const badgeStyle = (badgeStyles.badge as any)({ intent, color: effectiveColor });
+  const textStyle = (badgeStyles.text as any)({ intent, color: effectiveColor });
 
   // Map badge size to icon size
   const iconSize = size === 'sm' ? 12 : size === 'md' ? 14 : 16;
@@ -62,7 +74,7 @@ const Badge = forwardRef<View, BadgeProps>(({
 
   return (
     <View
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       style={[badgeStyle, style]}
       testID={testID}

package/src/Badge/Badge.styles.tsx

@@ -1,9 +1,12 @@
 /**
  * Badge styles using defineStyle with $iterator expansion.
+ *
+ * Supports both `intent` (semantic colors) and `color` (raw palette colors).
+ * If both are provided, `intent` takes precedence.
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper, getColorFromString } from '@idealyst/theme';
-import type { Theme as BaseTheme, Size, Color } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size, Color, Intent } from '@idealyst/theme';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
 void StyleSheet;
@@ -16,15 +19,29 @@ type BadgeType = 'filled' | 'outlined' | 'dot';
 export type BadgeDynamicProps = {
     size?: Size;
     type?: BadgeType;
+    intent?: Intent;
     color?: Color;
 };
 
+/**
+ * Helper to resolve badge color from intent or color prop.
+ * Intent takes precedence over color.
+ */
+const resolveBadgeColor = (theme: Theme, intent?: Intent, color?: Color): string => {
+    if (intent) {
+        // Use intent's primary color
+        return (theme as unknown as BaseTheme).intents[intent].primary;
+    }
+    // Fall back to color prop or default to primary intent
+    return getColorFromString(theme as unknown as BaseTheme, color ?? 'primary');
+};
+
 /**
  * Badge styles with color-based type variants.
  */
 export const badgeStyles = defineStyle('Badge', (theme: Theme) => ({
-    badge: ({ color = 'primary', type = 'filled' }: BadgeDynamicProps) => {
-        const colorValue = getColorFromString(theme as unknown as BaseTheme, color);
+    badge: ({ intent, color, type = 'filled' }: BadgeDynamicProps) => {
+        const colorValue = resolveBadgeColor(theme, intent, color);
 
         const typeStyles = type === 'filled'
             ? { borderWidth: 0, backgroundColor: colorValue }
@@ -56,8 +73,8 @@ export const badgeStyles = defineStyle('Badge', (theme: Theme) => ({
         } as const;
     },
 
-    text: ({ color = 'primary', type = 'filled' }: BadgeDynamicProps) => {
-        const colorValue = getColorFromString(theme as unknown as BaseTheme, color);
+    text: ({ intent, color, type = 'filled' }: BadgeDynamicProps) => {
+        const colorValue = resolveBadgeColor(theme, intent, color);
 
         const textColor = type === 'filled'
             ? theme.colors.text.inverse

package/src/Badge/Badge.web.tsx

@@ -4,18 +4,23 @@ import { BadgeProps } from './types';
 import { badgeStyles } from './Badge.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Small status indicator for counts, labels, or notifications.
  * Available in filled, outlined, and dot variants with customizable colors.
+ *
+ * Supports both `intent` (semantic colors) and `color` (raw palette colors).
+ * If both are provided, `intent` takes precedence.
  */
-const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+const Badge = forwardRef<IdealystElement, BadgeProps>((props, ref) => {
   const {
     children,
     size = 'md',
     type: typeProp,
     variant,
-    color = 'blue',
+    intent,
+    color,
     icon,
     style,
     testID,
@@ -25,14 +30,17 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
   // variant is an alias for type - variant takes precedence if both are set
   const type = variant ?? typeProp ?? 'filled';
 
+  // Default to 'primary' intent if neither intent nor color is provided
+  const effectiveColor = intent ? undefined : (color ?? 'primary');
+
   badgeStyles.useVariants({
     size,
     type,
   });
 
-  const badgeStyle = (badgeStyles.badge as any)({ color });
+  const badgeStyle = (badgeStyles.badge as any)({ intent, color: effectiveColor });
   const contentStyle = badgeStyles.content as any;
-  const textStyle = (badgeStyles.text as any)({ color });
+  const textStyle = (badgeStyles.text as any)({ intent, color: effectiveColor });
 
   const badgeProps = getWebProps([badgeStyle]);
   const contentProps = getWebProps([contentStyle]);

package/src/Badge/types.ts

@@ -1,11 +1,12 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon/icon-types';
-import { Color, Size } from '@idealyst/theme';
+import { Color, Intent, Size } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type BadgeColorVariant = Color;
+export type BadgeIntentVariant = Intent;
 export type BadgeSizeVariant = Size;
 export type BadgeType = 'filled' | 'outlined' | 'dot';
 
@@ -35,7 +36,18 @@ export interface BadgeProps extends BaseProps {
   variant?: BadgeType;
 
   /**
-   * The color scheme of the badge
+   * The semantic color scheme of the badge.
+   * Use for status-based coloring (success, danger, warning, etc.).
+   *
+   * **Note:** Only one of `intent` or `color` should be set. If both are provided, `intent` takes precedence.
+   */
+  intent?: BadgeIntentVariant;
+
+  /**
+   * The raw palette color of the badge.
+   * Use for custom coloring that doesn't map to a semantic intent.
+   *
+   * **Note:** Only one of `intent` or `color` should be set. If both are provided, `intent` takes precedence.
    */
   color?: BadgeColorVariant;
 

package/src/Breadcrumb/Breadcrumb.native.tsx

@@ -6,6 +6,7 @@ import Icon from '../Icon';
 import type { IconName } from '../Icon/icon-types';
 import Menu from '../Menu/Menu.native';
 import type { MenuItem } from '../Menu/types';
+import type { IdealystElement } from '../utils/refTypes';
 
 interface BreadcrumbItemProps {
   item: BreadcrumbItemType;
@@ -113,7 +114,7 @@ const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent })
   );
 };
 
-const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
+const Breadcrumb = forwardRef<IdealystElement, BreadcrumbProps>(({
   items,
   separator = '/',
   maxItems,
@@ -169,7 +170,7 @@ const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
 
   return (
     <View
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       style={[containerStyle, style]}
       testID={testID}

package/src/Button/Button.native.tsx

@@ -1,16 +1,17 @@
-import { ComponentRef, forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ActivityIndicator, StyleSheet as RNStyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { buttonStyles } from './Button.styles';
 import { ButtonProps } from './types';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((props, ref) => {
+const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
   const {
     children,
-    title,
     onPress,
+    onClick,
     disabled = false,
     loading = false,
     type = 'contained',
@@ -38,6 +39,16 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   // Button is effectively disabled when loading
   const isDisabled = disabled || loading;
 
+  // Determine the handler to use - onPress takes precedence
+  const pressHandler = onPress ?? onClick;
+
+  // Warn about deprecated onClick usage in development
+  if (__DEV__ && onClick && !onPress) {
+    console.warn(
+      'Button: onClick prop is deprecated. Use onPress instead for cross-platform compatibility.'
+    );
+  }
+
   // Apply variants for size, disabled, gradient
   buttonStyles.useVariants({
     size,
@@ -67,8 +78,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   const iconSize = iconSizeMap[size] ?? 16;
 
 
-  // Use children if available, otherwise use title
-  const buttonContent = children || title;
+  const buttonContent = children;
 
   // Determine if we need to wrap content in icon container
   const hasIcons = leftIcon || rightIcon;
@@ -159,7 +169,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   // TouchableOpacity types don't include nativeID but it's a valid RN prop
   const touchableProps = {
     ref,
-    onPress,
+    onPress: pressHandler,
     disabled: isDisabled,
     testID,
     nativeID: id,

package/src/Button/Button.styles.tsx

@@ -70,12 +70,12 @@ export const buttonStyles = defineStyle('Button', (theme: Theme) => ({
             // $iterator expands for each button size
             type: {
                 contained: {
-                    backgroundColor: theme.intents[intent].primary,
+                    backgroundColor: theme.$intents.primary,
                     borderColor: 'transparent',
                 },
                 outlined: {
                     backgroundColor: 'transparent',
-                    borderColor: theme.intents[intent].primary,
+                    borderColor: theme.$intents.primary,
                 },
                 text: {
                     backgroundColor: 'transparent',

package/src/Button/Button.web.tsx

@@ -5,20 +5,20 @@ import { buttonStyles } from './Button.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Interactive button component with multiple visual variants, sizes, and icon support.
  * Supports contained, outlined, and text styles with customizable intent colors.
  */
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
   const {
-    title,
     children,
     onPress,
+    onClick,
     disabled = false,
     loading = false,
-    type: typeProp,
-    variant,
+    type = 'contained',
     intent = 'primary',
     size = 'md',
     gradient,
@@ -42,9 +42,6 @@ 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;
 
@@ -55,13 +52,23 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     gradient,
   });
 
+  // Determine the handler to use - onPress takes precedence
+  const pressHandler = onPress ?? onClick;
+
+  // Warn about deprecated onClick usage in development
+  if (process.env.NODE_ENV !== 'production' && onClick && !onPress) {
+    console.warn(
+      'Button: onClick prop is deprecated. Use onPress instead for cross-platform compatibility.'
+    );
+  }
+
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    // Only stop propagation if we have an onPress handler
+    // Only stop propagation if we have a handler
     // Otherwise, let clicks bubble up to parent handlers (e.g., Menu triggers)
-    if (!isDisabled && onPress) {
+    if (!isDisabled && pressHandler) {
       e.stopPropagation();
-      onPress();
+      pressHandler();
     }
   };
 
@@ -71,8 +78,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   // Generate ARIA props - especially important for icon-only buttons
   const ariaProps = useMemo(() => {
     // For icon-only buttons, accessibilityLabel is critical
-    const buttonContent = children || title;
-    const isIconOnly = !buttonContent && (leftIcon || rightIcon);
+    const isIconOnly = !children && (leftIcon || rightIcon);
     const computedLabel = accessibilityLabel ?? (isIconOnly && typeof leftIcon === 'string' ? leftIcon : undefined);
 
     return getWebInteractiveAriaProps({
@@ -92,7 +98,6 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   }, [
     accessibilityLabel,
     children,
-    title,
     leftIcon,
     rightIcon,
     accessibilityHint,
@@ -149,8 +154,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     return null;
   };
 
-  // Use children if available, otherwise use title
-  const buttonContent = children || title;
+  const buttonContent = children;
 
   // Determine if we need to wrap content in icon container
   const hasIcons = leftIcon || rightIcon;

package/src/Button/types.ts

@@ -24,19 +24,20 @@ export type ButtonGradient = 'darken' | 'lighten';
  */
 export interface ButtonProps extends BaseProps, InteractiveAccessibilityProps {
   /**
-   * The text or content to display inside the button
+   * The content to display inside the button
    */
   children?: ReactNode;
 
   /**
-   * The text title to display inside the button (for web)
+   * Called when the button is pressed
    */
-  title?: string;
+  onPress?: () => void;
 
   /**
-   * Called when the button is pressed
+   * @deprecated Use `onPress` instead. This prop exists for web compatibility only.
+   * Using onClick will log a deprecation warning in development.
    */
-  onPress?: () => void;
+  onClick?: () => void;
 
   /**
    * Whether the button is disabled
@@ -48,11 +49,6 @@ 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.native.tsx

@@ -1,16 +1,21 @@
-import { forwardRef, ComponentRef, useMemo } from 'react';
+import { forwardRef, useMemo, useEffect, useRef } from 'react';
 import { View, Pressable } from 'react-native';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressable>, CardProps>(({
+// Track if we've logged the onClick deprecation warning (log once per session)
+let hasLoggedOnClickWarning = false;
+
+const Card = forwardRef<IdealystElement, CardProps>(({
   children,
   type = 'elevated',
   radius = 'md',
   intent: _intent = 'neutral',
   clickable = false,
   onPress,
+  onClick,
   disabled = false,
   // Spacing variants from ContainerStyleProps
   gap,
@@ -31,6 +36,22 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
   accessibilityRole,
   accessibilityPressed,
 }, ref) => {
+  const hasWarnedRef = useRef(false);
+
+  // Warn about onClick usage (deprecated)
+  useEffect(() => {
+    if (onClick && !hasWarnedRef.current && !hasLoggedOnClickWarning) {
+      hasWarnedRef.current = true;
+      hasLoggedOnClickWarning = true;
+      console.warn(
+        '[Card] onClick is deprecated. Use onPress instead.\n' +
+        'Card is a cross-platform component that follows React Native conventions.\n' +
+        'onClick will be removed in a future version.\n\n' +
+        'Migration: Replace onClick={handler} with onPress={handler}'
+      );
+    }
+  }, [onClick]);
+
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     return getNativeInteractiveAccessibilityProps({
@@ -64,6 +85,9 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
   // Use appropriate component based on clickable state
   const Component = clickable ? Pressable : View;
 
+  // Prefer onPress, fall back to deprecated onClick
+  const pressHandler = onPress ?? onClick;
+
   const componentProps = {
     ref,
     nativeID: id,
@@ -71,7 +95,7 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
     testID,
     ...nativeA11yProps,
     ...(clickable && {
-      onPress: disabled ? undefined : onPress,
+      onPress: disabled ? undefined : pressHandler,
       disabled,
       android_ripple: { color: 'rgba(0, 0, 0, 0.1)' },
     }),

package/src/Card/Card.web.tsx

@@ -1,15 +1,19 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo, useEffect, useRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
+
+// Track if we've logged the onClick deprecation warning (log once per session)
+let hasLoggedOnClickWarning = false;
 
 /**
  * Container component for grouping related content with elevation and styling options.
  * Supports elevated, outlined, and filled variants with optional click interaction.
  */
-const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
+const Card = forwardRef<IdealystElement, CardProps>(({
   children,
   type: typeProp,
   variant,
@@ -17,6 +21,7 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   intent: _intent,
   clickable = false,
   onPress,
+  onClick,
   disabled = false,
   // Spacing variants from ContainerStyleProps
   gap,
@@ -37,6 +42,22 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   accessibilityRole,
   accessibilityPressed,
 }, ref) => {
+  const hasWarnedRef = useRef(false);
+
+  // Warn about onClick usage (deprecated)
+  useEffect(() => {
+    if (onClick && !hasWarnedRef.current && !hasLoggedOnClickWarning) {
+      hasWarnedRef.current = true;
+      hasLoggedOnClickWarning = true;
+      console.warn(
+        '[Card] onClick is deprecated. Use onPress instead.\n' +
+        'Card is a cross-platform component that follows React Native conventions.\n' +
+        'onClick will be removed in a future version.\n\n' +
+        'Migration: Replace onClick={handler} with onPress={handler}'
+      );
+    }
+  }, [onClick]);
+
   // variant is an alias for type - variant takes precedence if both are set
   const type = variant ?? typeProp ?? 'elevated';
   // Generate ARIA props
@@ -50,9 +71,14 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
       accessibilityPressed,
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, clickable, accessibilityPressed]);
+
   const handleClick = () => {
-    if (!disabled && clickable && onPress) {
-      onPress();
+    if (!disabled && clickable) {
+      // Prefer onPress, fall back to deprecated onClick
+      const handler = onPress ?? onClick;
+      if (handler) {
+        handler();
+      }
     }
   };
 

package/src/Card/types.ts

@@ -49,6 +49,21 @@ export interface CardProps extends ContainerStyleProps, InteractiveAccessibility
    */
   onPress?: () => void;
 
+  /**
+   * @deprecated Use `onPress` instead. This is a cross-platform component - use React Native conventions.
+   *
+   * Using `onClick` will trigger a console warning in development.
+   * This prop exists only for migration convenience and will be removed in a future version.
+   *
+   * @example
+   * // ❌ Don't use onClick
+   * <Card clickable onClick={() => {}} />
+   *
+   * // ✅ Use onPress instead
+   * <Card clickable onPress={() => {}} />
+   */
+  onClick?: () => void;
+
   /**
    * Whether the card is disabled
    */

package/src/Checkbox/Checkbox.native.tsx

@@ -4,12 +4,13 @@ import MaterialDesignIcons from '@react-native-vector-icons/material-design-icon
 import { CheckboxProps } from './types';
 import { checkboxStyles } from './Checkbox.styles';
 import { getNativeSelectionAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Checkbox = forwardRef<View, CheckboxProps>(({
+const Checkbox = forwardRef<IdealystElement, CheckboxProps>(({
   checked = false,
   indeterminate = false,
   disabled = false,
-  onCheckedChange,
+  onChange,
   size = 'md',
   intent = 'primary',
   variant = 'default',
@@ -46,7 +47,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
 
     const newChecked = !internalChecked;
     setInternalChecked(newChecked);
-    onCheckedChange?.(newChecked);
+    onChange?.(newChecked);
   };
 
   // Generate native accessibility props
@@ -108,7 +109,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
   const helperTextStyle = (checkboxStyles.helperText as any)({ error: !!error });
 
   return (
-    <View ref={ref} nativeID={id} style={[wrapperStyle, style]}>
+    <View ref={ref as any} nativeID={id} style={[wrapperStyle, style]}>
       <Pressable
         onPress={handlePress}
         disabled={disabled}