@idealyst/components 1.2.29 → 1.2.31

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}

package/src/Checkbox/Checkbox.styles.tsx

@@ -67,63 +67,61 @@ export const checkboxStyles = defineStyle('Checkbox', (theme: Theme) => ({
         },
     }),
 
-    checkbox: ({ intent = 'primary', type = 'default', checked = false, disabled = false }: CheckboxDynamicProps) => {
-        const intentColors = theme.intents[intent];
-
-        // Base border styles based on type
-        const borderWidth = type === 'outlined' ? 2 : 1;
-
-        // Checked state colors
-        const backgroundColor = checked ? intentColors.primary : 'transparent';
-        const borderColor = checked ? intentColors.primary : theme.colors.border.primary;
-
-        return {
-            alignItems: 'center' as const,
-            justifyContent: 'center' as const,
-            borderRadius: 4,
-            position: 'relative' as const,
-            backgroundColor,
-            borderColor,
-            borderWidth,
-            borderStyle: 'solid' as const,
-            opacity: disabled ? 0.5 : 1,
-            variants: {
-                size: {
-                    xs: { width: 14, height: 14 },
-                    sm: { width: 16, height: 16 },
-                    md: { width: 20, height: 20 },
-                    lg: { width: 24, height: 24 },
-                    xl: { width: 28, height: 28 },
-                },
+    checkbox: (_props: CheckboxDynamicProps) => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        borderRadius: 4,
+        position: 'relative' as const,
+        borderStyle: 'solid' as const,
+        variants: {
+            size: {
+                xs: { width: 14, height: 14 },
+                sm: { width: 16, height: 16 },
+                md: { width: 20, height: 20 },
+                lg: { width: 24, height: 24 },
+                xl: { width: 28, height: 28 },
+            },
+            type: {
+                default: { borderWidth: 1 },
+                outlined: { borderWidth: 2 },
             },
-            _web: {
-                outline: 'none',
-                display: 'flex',
-                boxSizing: 'border-box',
-                userSelect: 'none',
-                WebkitAppearance: 'none',
-                MozAppearance: 'none',
-                appearance: 'none',
-                transition: 'all 0.2s ease',
-                cursor: disabled ? 'not-allowed' : 'pointer',
-                border: `${borderWidth}px solid ${borderColor}`,
-                _focus: {
-                    outline: `2px solid ${theme.intents.primary.primary}`,
-                    outlineOffset: '2px',
+            checked: {
+                true: {
+                    backgroundColor: theme.$intents.primary,
+                    borderColor: theme.$intents.primary,
                 },
-                _hover: disabled ? {} : { opacity: 0.8 },
-                _active: disabled ? {} : { opacity: 0.6 },
+                false: {
+                    backgroundColor: 'transparent',
+                    borderColor: theme.colors.border.primary,
+                },
+            },
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
             },
-        } as const;
-    },
+        },
+        _web: {
+            outline: 'none',
+            display: 'flex',
+            boxSizing: 'border-box',
+            userSelect: 'none',
+            WebkitAppearance: 'none',
+            MozAppearance: 'none',
+            appearance: 'none',
+            transition: 'all 0.2s ease',
+            _focus: {
+                outline: `2px solid ${theme.intents.primary.primary}`,
+                outlineOffset: '2px',
+            },
+        },
+    }),
 
-    checkmark: ({ checked = false }: CheckboxDynamicProps) => ({
+    checkmark: (_props: CheckboxDynamicProps) => ({
         position: 'absolute' as const,
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         color: '#ffffff',
-        opacity: checked ? 1 : 0,
         variants: {
             size: {
                 xs: { width: 10, height: 10 },
@@ -132,12 +130,15 @@ export const checkboxStyles = defineStyle('Checkbox', (theme: Theme) => ({
                 lg: { width: 16, height: 16 },
                 xl: { width: 20, height: 20 },
             },
+            checked: {
+                true: { opacity: 1 },
+                false: { opacity: 0 },
+            },
         },
     }),
 
-    label: ({ disabled = false }: CheckboxDynamicProps) => ({
+    label: (_props: CheckboxDynamicProps) => ({
         color: theme.colors.text.primary,
-        opacity: disabled ? 0.5 : 1,
         variants: {
             size: {
                 xs: { fontSize: 12 },
@@ -146,6 +147,10 @@ export const checkboxStyles = defineStyle('Checkbox', (theme: Theme) => ({
                 lg: { fontSize: 18 },
                 xl: { fontSize: 20 },
             },
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
         },
         _web: {
             display: 'block',
@@ -155,9 +160,14 @@ export const checkboxStyles = defineStyle('Checkbox', (theme: Theme) => ({
         },
     }),
 
-    helperText: ({ error = false }: CheckboxDynamicProps) => ({
+    helperText: (_props: CheckboxDynamicProps) => ({
         fontSize: 14,
-        color: error ? theme.intents.error.primary : theme.colors.text.secondary,
         marginTop: 2,
+        variants: {
+            error: {
+                true: { color: theme.intents.danger.primary },
+                false: { color: theme.colors.text.secondary },
+            },
+        },
     }),
 }));

package/src/Checkbox/Checkbox.web.tsx

@@ -5,16 +5,17 @@ import { checkboxStyles } from './Checkbox.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebSelectionAriaProps, generateAccessibilityId, combineIds } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Checkbox input for boolean selection with support for indeterminate state.
  * Includes label, helper text, and error display options.
  */
-const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
+const Checkbox = forwardRef<IdealystElement, CheckboxProps>(({
   checked = false,
   indeterminate = false,
   disabled = false,
-  onCheckedChange,
+  onChange,
   size = 'md',
   intent = 'primary',
   variant = 'default',
@@ -56,7 +57,7 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
 
     const newChecked = event.target.checked;
     setInternalChecked(newChecked);
-    onCheckedChange?.(newChecked);
+    onChange?.(newChecked);
   };
 
   // Generate unique IDs for accessibility

package/src/Checkbox/types.ts

@@ -32,7 +32,7 @@ export interface CheckboxProps extends FormInputStyleProps, SelectionAccessibili
   /**
    * Called when the checkbox state changes
    */
-  onCheckedChange?: (checked: boolean) => void;
+  onChange?: (checked: boolean) => void;
 
   /**
    * The size of the checkbox

package/src/Chip/Chip.native.tsx

@@ -1,11 +1,15 @@
-import { isValidElement, forwardRef, ComponentRef } from 'react';
+import { isValidElement, forwardRef, useEffect, useRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { chipStyles } from './Chip.styles';
 import { isIconName } from '../Icon/icon-resolver';
 import type { ChipProps } from './types';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
+// Track if we've logged the onClick deprecation warning (log once per session)
+let hasLoggedOnClickWarning = false;
+
+const Chip = forwardRef<IdealystElement, ChipProps>(({
   label,
   type = 'filled',
   intent = 'primary',
@@ -16,6 +20,7 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
   selectable = false,
   selected = false,
   onPress,
+  onClick,
   disabled = false,
   style,
   testID,
@@ -24,10 +29,28 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
   accessibilityLabel,
   accessibilityChecked,
 }, ref) => {
+  const hasWarnedRef = useRef(false);
+
+  // Warn about onClick usage (deprecated)
+  useEffect(() => {
+    if (onClick && !hasWarnedRef.current && !hasLoggedOnClickWarning) {
+      hasWarnedRef.current = true;
+      hasLoggedOnClickWarning = true;
+      console.warn(
+        '[Chip] onClick is deprecated. Use onPress instead.\n' +
+        'Chip 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]);
+
   const handlePress = () => {
     if (disabled) return;
-    if (onPress) {
-      onPress();
+    // Prefer onPress, fall back to deprecated onClick
+    const handler = onPress ?? onClick;
+    if (handler) {
+      handler();
     }
   };
 
@@ -72,7 +95,7 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
     return null;
   };
 
-  const isClickable = (onPress && !disabled) || (selectable && !disabled);
+  const isClickable = ((onPress || onClick) && !disabled) || (selectable && !disabled);
 
   const innerContent = (
     <>
@@ -102,7 +125,7 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
   if (isClickable) {
     return (
       <Pressable
-        ref={ref}
+        ref={ref as any}
         nativeID={id}
         onPress={handlePress}
         disabled={disabled}
@@ -122,7 +145,7 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
   }
 
   return (
-    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID}>
+    <View ref={ref as any} nativeID={id} style={[containerStyle, style]} testID={testID}>
       {innerContent}
     </View>
   );

package/src/Chip/Chip.web.tsx

@@ -1,16 +1,20 @@
-import React, { isValidElement, forwardRef } from 'react';
+import React, { isValidElement, forwardRef, useEffect, useRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { chipStyles } from './Chip.styles';
 import type { ChipProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
+
+// Track if we've logged the onClick deprecation warning (log once per session)
+let hasLoggedOnClickWarning = false;
 
 /**
  * Compact interactive element for tags, filters, or selections.
  * Supports icons, selection state, and delete functionality.
  */
-const Chip = forwardRef<HTMLDivElement, ChipProps>(({
+const Chip = forwardRef<IdealystElement, ChipProps>(({
   label,
   type = 'filled',
   intent = 'primary',
@@ -22,6 +26,7 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
   selectable = false,
   selected = false,
   onPress,
+  onClick,
   disabled = false,
   style,
   testID,
@@ -30,6 +35,22 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
   accessibilityLabel,
   accessibilityChecked,
 }, ref) => {
+  const hasWarnedRef = useRef(false);
+
+  // Warn about onClick usage (deprecated)
+  useEffect(() => {
+    if (onClick && !hasWarnedRef.current && !hasLoggedOnClickWarning) {
+      hasWarnedRef.current = true;
+      hasLoggedOnClickWarning = true;
+      console.warn(
+        '[Chip] onClick is deprecated. Use onPress instead.\n' +
+        'Chip 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]);
+
   // Compute actual selected state
   const isSelected = selectable ? selected : false;
 
@@ -42,8 +63,10 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
 
   const handleClick = () => {
     if (disabled) return;
-    if (onPress) {
-      onPress();
+    // Prefer onPress, fall back to deprecated onClick
+    const handler = onPress ?? onClick;
+    if (handler) {
+      handler();
     }
   };
 
@@ -91,7 +114,7 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
     return null;
   };
 
-  const isClickable = (onPress && !disabled) || (selectable && !disabled);
+  const isClickable = ((onPress || onClick) && !disabled) || (selectable && !disabled);
 
   const mergedRef = useMergeRefs(ref, containerProps.ref);
 

package/src/Chip/types.ts

@@ -46,6 +46,21 @@ export interface ChipProps extends BaseProps, SelectionAccessibilityProps {
   /** Callback when chip is pressed */
   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
+   * <Chip label="Tag" onClick={() => {}} />
+   *
+   * // ✅ Use onPress instead
+   * <Chip label="Tag" onPress={() => {}} />
+   */
+  onClick?: () => void;
+
   /** Whether the chip is disabled */
   disabled?: boolean;
 

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