@idealyst/components 1.2.29 → 1.2.30

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.styles.tsx

@@ -1,5 +1,8 @@
 /**
- * Chip styles using defineStyle with dynamic size/intent/type/selected handling.
+ * Chip styles using defineStyle with variant expansion.
+ *
+ * Chip has compound logic between type+selected+intent that's handled via
+ * nested variants. The $intents iterator expands for all intent values.
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
@@ -22,129 +25,144 @@ export type ChipDynamicProps = {
 };
 
 /**
- * Chip styles with size/intent/type/selected handling.
+ * Chip styles with variant expansion for size/intent/type/selected.
  */
 export const chipStyles = defineStyle('Chip', (theme: Theme) => ({
-    container: ({ size = 'md', intent = 'primary', type = 'filled', selected = false, disabled = false }: ChipDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const sizeValue = theme.sizes.chip[size];
-
-        // Compute colors based on type and selected state
-        let backgroundColor: string;
-        let borderColor: string;
-        let borderWidth: number;
-
-        if (type === 'filled') {
-            borderWidth = 1;
-            backgroundColor = selected ? intentValue.contrast : intentValue.primary;
-            borderColor = selected ? intentValue.primary : 'transparent';
-        } else if (type === 'outlined') {
-            borderWidth = 1;
-            backgroundColor = selected ? intentValue.primary : 'transparent';
-            borderColor = intentValue.primary;
-        } else { // soft
-            borderWidth = 0;
-            backgroundColor = selected ? intentValue.primary : intentValue.light;
-            borderColor = 'transparent';
-        }
-
-        return {
-            display: 'flex' as const,
-            flexDirection: 'row' as const,
-            alignItems: 'center' as const,
-            justifyContent: 'center' as const,
-            gap: 4,
-            paddingHorizontal: sizeValue.paddingHorizontal as number,
-            paddingVertical: sizeValue.paddingVertical as number,
-            minHeight: sizeValue.minHeight as number,
-            borderRadius: sizeValue.borderRadius as number,
-            backgroundColor,
-            borderColor,
-            borderWidth,
-            borderStyle: borderWidth > 0 ? ('solid' as const) : undefined,
-            opacity: disabled ? 0.5 : 1,
-        } as const;
-    },
-
-    label: ({ size = 'md', intent = 'primary', type = 'filled', selected = false }: ChipDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const sizeValue = theme.sizes.chip[size];
-
-        // Compute color based on type and selected state
-        let color: string;
-        if (type === 'filled') {
-            color = selected ? intentValue.primary : intentValue.contrast;
-        } else if (type === 'outlined') {
-            color = selected ? theme.colors.text.inverse : intentValue.primary;
-        } else { // soft
-            color = selected ? theme.colors.text.inverse : intentValue.dark;
-        }
-
-        return {
-            fontFamily: 'inherit' as const,
-            fontWeight: '500' as const,
-            fontSize: sizeValue.fontSize as number,
-            lineHeight: sizeValue.lineHeight as number,
-            color,
-        } as const;
-    },
-
-    icon: ({ size = 'md', intent = 'primary', type = 'filled', selected = false }: ChipDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const sizeValue = theme.sizes.chip[size];
-
-        // Same color logic as label
-        let color: string;
-        if (type === 'filled') {
-            color = selected ? intentValue.primary : intentValue.contrast;
-        } else if (type === 'outlined') {
-            color = selected ? theme.colors.text.inverse : intentValue.primary;
-        } else {
-            color = selected ? theme.colors.text.inverse : intentValue.dark;
-        }
-
-        return {
-            display: 'flex' as const,
-            alignItems: 'center' as const,
-            justifyContent: 'center' as const,
-            width: sizeValue.iconSize as number,
-            height: sizeValue.iconSize as number,
-            color,
-        } as const;
-    },
-
-    deleteButton: ({ size = 'md' }: ChipDynamicProps) => {
-        const sizeValue = theme.sizes.chip[size];
-
-        return {
-            display: 'flex' as const,
-            alignItems: 'center' as const,
-            justifyContent: 'center' as const,
-            padding: 0,
-            marginLeft: 4,
-            borderRadius: 12,
-            width: sizeValue.iconSize as number,
-            height: sizeValue.iconSize as number,
-        } as const;
-    },
-
-    deleteIcon: ({ size = 'md', intent = 'primary', type = 'filled', selected = false }: ChipDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const sizeValue = theme.sizes.chip[size];
-
-        // Same color logic as label/icon
-        let color: string;
-        if (type === 'filled') {
-            color = selected ? intentValue.primary : intentValue.contrast;
-        } else if (type === 'outlined') {
-            color = selected ? theme.colors.text.inverse : intentValue.primary;
-        } else {
-            color = selected ? theme.colors.text.inverse : intentValue.dark;
-        }
-
-        return {
-            fontSize: sizeValue.iconSize as number,
-            color,
-        } as const;
-    },
+    container: (_props: ChipDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        gap: 4,
+        borderStyle: 'solid' as const,
+        variants: {
+            size: {
+                paddingHorizontal: theme.sizes.$chip.paddingHorizontal,
+                paddingVertical: theme.sizes.$chip.paddingVertical,
+                minHeight: theme.sizes.$chip.minHeight,
+                borderRadius: theme.sizes.$chip.borderRadius,
+            },
+            type: {
+                filled: {
+                    borderWidth: 1,
+                    backgroundColor: theme.$intents.primary,
+                    borderColor: 'transparent',
+                },
+                outlined: {
+                    borderWidth: 1,
+                    backgroundColor: 'transparent',
+                    borderColor: theme.$intents.primary,
+                },
+                soft: {
+                    borderWidth: 0,
+                    backgroundColor: theme.$intents.light,
+                    borderColor: 'transparent',
+                },
+            },
+            selected: {
+                true: {},
+                false: {},
+            },
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+        },
+        compoundVariants: [
+            // filled + selected: swap bg/border
+            { type: 'filled', selected: true, styles: { backgroundColor: theme.$intents.contrast, borderColor: theme.$intents.primary } },
+            // outlined + selected: fill with primary
+            { type: 'outlined', selected: true, styles: { backgroundColor: theme.$intents.primary } },
+            // soft + selected: fill with primary
+            { type: 'soft', selected: true, styles: { backgroundColor: theme.$intents.primary } },
+        ],
+    }),
+
+    label: (_props: ChipDynamicProps) => ({
+        fontFamily: 'inherit' as const,
+        fontWeight: '500' as const,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$chip.fontSize,
+                lineHeight: theme.sizes.$chip.lineHeight,
+            },
+            type: {
+                filled: { color: theme.$intents.contrast },
+                outlined: { color: theme.$intents.primary },
+                soft: { color: theme.$intents.dark },
+            },
+            selected: {
+                true: {},
+                false: {},
+            },
+        },
+        compoundVariants: [
+            { type: 'filled', selected: true, styles: { color: theme.$intents.primary } },
+            { type: 'outlined', selected: true, styles: { color: theme.colors.text.inverse } },
+            { type: 'soft', selected: true, styles: { color: theme.colors.text.inverse } },
+        ],
+    }),
+
+    icon: (_props: ChipDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        variants: {
+            size: {
+                width: theme.sizes.$chip.iconSize,
+                height: theme.sizes.$chip.iconSize,
+            },
+            type: {
+                filled: { color: theme.$intents.contrast },
+                outlined: { color: theme.$intents.primary },
+                soft: { color: theme.$intents.dark },
+            },
+            selected: {
+                true: {},
+                false: {},
+            },
+        },
+        compoundVariants: [
+            { type: 'filled', selected: true, styles: { color: theme.$intents.primary } },
+            { type: 'outlined', selected: true, styles: { color: theme.colors.text.inverse } },
+            { type: 'soft', selected: true, styles: { color: theme.colors.text.inverse } },
+        ],
+    }),
+
+    deleteButton: (_props: ChipDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        padding: 0,
+        marginLeft: 4,
+        borderRadius: 12,
+        variants: {
+            size: {
+                width: theme.sizes.$chip.iconSize,
+                height: theme.sizes.$chip.iconSize,
+            },
+        },
+    }),
+
+    deleteIcon: (_props: ChipDynamicProps) => ({
+        variants: {
+            size: {
+                fontSize: theme.sizes.$chip.iconSize,
+            },
+            type: {
+                filled: { color: theme.$intents.contrast },
+                outlined: { color: theme.$intents.primary },
+                soft: { color: theme.$intents.dark },
+            },
+            selected: {
+                true: {},
+                false: {},
+            },
+        },
+        compoundVariants: [
+            { type: 'filled', selected: true, styles: { color: theme.$intents.primary } },
+            { type: 'outlined', selected: true, styles: { color: theme.colors.text.inverse } },
+            { type: 'soft', selected: true, styles: { color: theme.colors.text.inverse } },
+        ],
+    }),
 }));

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;