@idealyst/components 1.0.82 → 1.0.84

package/src/Checkbox/Checkbox.web.tsx

@@ -1,14 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { CheckboxProps } from './types';
-import { checkboxStyles, checkboxLabelStyles, checkboxCheckmarkStyles, checkboxHelperStyles } from './Checkbox.styles';
+import { checkboxStyles } from './Checkbox.styles';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { resolveIconPath } from '../Icon/icon-resolver';
+import useMergeRefs from '../hooks/useMergeRefs';
 
-const Checkbox: React.FC<CheckboxProps> = ({
+const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
   checked = false,
   indeterminate = false,
   disabled = false,
   onCheckedChange,
-  size = 'medium',
+  size = 'md',
   intent = 'primary',
   variant = 'default',
   label,
@@ -19,54 +22,38 @@ const Checkbox: React.FC<CheckboxProps> = ({
   required = false,
   error,
   helperText,
-}) => {
+}, ref) => {
   const [internalChecked, setInternalChecked] = useState(checked);
-  
+
   useEffect(() => {
     setInternalChecked(checked);
   }, [checked]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (disabled) return;
-    
+
     const newChecked = event.target.checked;
     setInternalChecked(newChecked);
     onCheckedChange?.(newChecked);
   };
 
-  // Apply variants for main checkbox
+  // Apply variants
   checkboxStyles.useVariants({
     size,
-    intent,
-    variant: variant as any,
+    type: variant as any,
     checked: internalChecked,
     disabled,
-  });
-
-  // Apply variants for label
-  checkboxLabelStyles.useVariants({
-    size,
-    disabled,
-  });
-
-  // Apply variants for checkmark
-  checkboxCheckmarkStyles.useVariants({
-    size,
-    visible: internalChecked,
-  });
-
-  // Apply variants for helper text
-  checkboxHelperStyles.useVariants({
-    error: !!error,
+    visible: internalChecked || indeterminate,
+    error: Boolean(error),
   });
 
   // Create style arrays
-  const wrapperStyleArray = [checkboxStyles.wrapper, style];
+  const wrapperStyleArray = [checkboxStyles.wrapper, style as any];
   const containerStyleArray = [checkboxStyles.container];
-  const checkboxStyleArray = [checkboxStyles.checkbox];
-  const labelStyleArray = [checkboxLabelStyles.label];
-  const helperTextStyleArray = [checkboxHelperStyles.helperText];
-  const checkmarkStyleArray = [checkboxCheckmarkStyles.checkmark];
+  const checkboxStyleArray = [checkboxStyles.checkbox({ intent })];
+  const labelStyleArray = [checkboxStyles.label];
+  const helperTextStyleArray = [checkboxStyles.helperText];
+  const checkmarkStyleArray = [checkboxStyles.checkmark];
 
   // Generate web props
   const wrapperProps = getWebProps(wrapperStyleArray);
@@ -79,8 +66,10 @@ const Checkbox: React.FC<CheckboxProps> = ({
   const labelContent = children || label;
   const displayHelperText = error || helperText;
 
+  const mergedRef = useMergeRefs(ref, wrapperProps.ref);
+
   return (
-    <div {...wrapperProps}>
+    <div {...wrapperProps} ref={mergedRef}>
       <label {...containerProps}>
         <div style={{ position: 'relative' }}>
           <input
@@ -107,9 +96,11 @@ const Checkbox: React.FC<CheckboxProps> = ({
           />
           <div {...checkboxProps}>
             {(internalChecked || indeterminate) && (
-              <div {...checkmarkProps}>
-                {indeterminate ? '−' : '✓'}
-              </div>
+              <IconSvg
+                path={resolveIconPath(indeterminate ? 'minus' : 'check')}
+                {...checkmarkProps}
+                aria-label={indeterminate ? 'minus' : 'check'}
+              />
             )}
           </div>
         </div>
@@ -126,6 +117,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
       )}
     </div>
   );
-};
+});
+
+Checkbox.displayName = 'Checkbox';
 
 export default Checkbox; 

package/src/Checkbox/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic Checkbox export
-// Metro will resolve to index.native.ts for React Native
-// This file serves as fallback for web environments
-export { default } from './Checkbox.web';
-export * from './types'; 
+import CheckboxComponent from './Checkbox.web';
+
+export default CheckboxComponent;
+export { CheckboxComponent as Checkbox };
+export * from './types';

package/src/Checkbox/index.web.ts

@@ -1,3 +1,5 @@
-// Web-specific Checkbox export
-export { default } from './Checkbox.web';
-export * from './types'; 
+import CheckboxComponent from './Checkbox.web';
+
+export default CheckboxComponent;
+export { CheckboxComponent as Checkbox };
+export * from './types';

package/src/Checkbox/types.ts

@@ -1,77 +1,83 @@
-import { ReactNode } from 'react';
-import type { IntentVariant } from '../theme/variants';
+import { Intent, Size } from '@idealyst/theme';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type CheckboxIntentVariant = Intent;
+export type CheckboxSizeVariant = Size;
+export type CheckboxVariant = 'default' | 'outlined';
 
 export interface CheckboxProps {
   /**
    * Whether the checkbox is checked
    */
   checked?: boolean;
-  
+
   /**
    * Whether the checkbox is in an indeterminate state
    */
   indeterminate?: boolean;
-  
+
   /**
    * Whether the checkbox is disabled
    */
   disabled?: boolean;
-  
+
   /**
    * Called when the checkbox state changes
    */
   onCheckedChange?: (checked: boolean) => void;
-  
+
   /**
    * The size of the checkbox
    */
-  size?: 'small' | 'medium' | 'large';
-  
+  size?: CheckboxSizeVariant;
+
   /**
    * The intent/color scheme of the checkbox
    */
-  intent?: IntentVariant;
-  
+  intent?: CheckboxIntentVariant;
+
   /**
    * The visual style variant of the checkbox
    */
-  variant?: 'default' | 'outlined';
-  
+  variant?: CheckboxVariant;
+
   /**
    * Label text to display next to the checkbox
    */
   label?: string;
-  
+
   /**
    * Custom label content (ReactNode)
    */
   children?: ReactNode;
-  
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */
   testID?: string;
-  
+
   /**
    * Accessibility label
    */
   accessibilityLabel?: string;
-  
+
   /**
    * Whether the checkbox is required
    */
   required?: boolean;
-  
+
   /**
    * Error message to display
    */
   error?: string;
-  
+
   /**
    * Helper text to display
    */

package/src/Chip/Chip.native.tsx

@@ -0,0 +1,126 @@
+import React, { isValidElement, forwardRef, ComponentRef } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { chipStyles } from './Chip.styles';
+import { isIconName } from '../Icon/icon-resolver';
+import type { ChipProps } from './types';
+
+const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
+  label,
+  type = 'filled',
+  intent = 'primary',
+  size = 'md',
+  icon,
+  deletable = false,
+  onDelete,
+  selectable = false,
+  selected = false,
+  onPress,
+  disabled = false,
+  style,
+  testID,
+}, ref) => {
+  const handlePress = () => {
+    if (disabled) return;
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  const handleDelete = () => {
+    if (disabled) return;
+    if (onDelete) {
+      onDelete();
+    }
+  };
+
+  // Compute actual selected state
+  const isSelected = selectable ? selected : false;
+
+  // Compute dynamic styles
+  const containerStyle = chipStyles.container(size, intent, type, isSelected, disabled);
+  const labelStyle = chipStyles.label(size, intent, type, isSelected);
+  const iconStyle = chipStyles.icon(size, intent, type, isSelected);
+  const deleteButtonStyle = chipStyles.deleteButton(size);
+  const deleteIconStyle = chipStyles.deleteIcon(size, intent, type, isSelected);
+
+  // Map chip size to icon size
+  const iconSize = size === 'sm' ? 12 : size === 'md' ? 14 : 16;
+  const deleteIconSize = size === 'sm' ? 10 : size === 'md' ? 11 : 12;
+
+  // Helper to render icon
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    if (typeof icon === 'string' && isIconName(icon)) {
+      return (
+        <View style={iconStyle}>
+          <MaterialCommunityIcons
+            name={icon}
+            size={iconSize}
+            style={iconStyle}
+          />
+        </View>
+      );
+    } else if (isValidElement(icon)) {
+      return icon;
+    }
+    return null;
+  };
+
+  const isClickable = (onPress && !disabled) || (selectable && !disabled);
+
+  const innerContent = (
+    <>
+      {icon && renderIcon()}
+
+      <Text style={labelStyle}>{label}</Text>
+
+      {deletable && onDelete && (
+        <Pressable
+          style={deleteButtonStyle}
+          onPress={handleDelete}
+          disabled={disabled}
+          hitSlop={8}
+          accessibilityLabel="Delete"
+          accessibilityRole="button"
+        >
+          <MaterialCommunityIcons
+            name="close"
+            size={deleteIconSize}
+            style={deleteIconStyle}
+          />
+        </Pressable>
+      )}
+    </>
+  );
+
+  if (isClickable) {
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{
+          disabled,
+          selected: selectable ? selected : undefined,
+        }}
+      >
+        <View style={[containerStyle, style]} testID={testID}>
+          {innerContent}
+        </View>
+      </Pressable>
+    );
+  }
+
+  return (
+    <View ref={ref} style={[containerStyle, style]} testID={testID}>
+      {innerContent}
+    </View>
+  );
+});
+
+Chip.displayName = 'Chip';
+
+export default Chip;

package/src/Chip/Chip.styles.tsx

@@ -0,0 +1,138 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent} from '@idealyst/theme';
+
+type ChipSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ChipType = 'filled' | 'outlined' | 'soft';
+type ChipIntent = Intent;
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+export const chipStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: (size: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean, disabled: boolean) => {
+        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: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean) => {
+        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',
+            fontWeight: '500' as const,
+            fontSize: sizeValue.fontSize as number,
+            lineHeight: sizeValue.lineHeight as number,
+            color,
+        } as const;
+    },
+
+    icon: (size: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean) => {
+        const intentValue = theme.intents[intent];
+        const sizeValue = theme.sizes.chip[size];
+
+        // Compute color based on type and selected state (same 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 { // soft
+            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: ChipSize) => {
+        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: ChipSize, intent: ChipIntent, type: ChipType, selected: boolean) => {
+        const intentValue = theme.intents[intent];
+        const sizeValue = theme.sizes.chip[size];
+
+        // Compute color based on type and selected state (same 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 { // soft
+            color = selected ? theme.colors.text.inverse : intentValue.dark;
+        }
+
+        return {
+            fontSize: sizeValue.iconSize as number,
+            color,
+        } as const;
+    },
+  } as const;
+});

package/src/Chip/Chip.web.tsx

@@ -0,0 +1,154 @@
+import React, { isValidElement, forwardRef } 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 { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+const Chip = forwardRef<HTMLDivElement, ChipProps>(({
+  label,
+  type = 'filled',
+  intent = 'primary',
+  size = 'md',
+  icon,
+  deletable = false,
+  onDelete,
+  deleteIcon = 'close',
+  selectable = false,
+  selected = false,
+  onPress,
+  disabled = false,
+  style,
+  testID,
+}, ref) => {
+  // Compute actual selected state
+  const isSelected = selectable ? selected : false;
+
+  // Compute dynamic styles
+  const containerProps = getWebProps([chipStyles.container(size, intent, type, isSelected, disabled), style as any]);
+  const labelProps = getWebProps([chipStyles.label(size, intent, type, isSelected)]);
+  const iconProps = getWebProps([chipStyles.icon(size, intent, type, isSelected)]);
+  const deleteButtonProps = getWebProps([chipStyles.deleteButton(size)]);
+  const deleteIconProps = getWebProps([chipStyles.deleteIcon(size, intent, type, isSelected)]);
+
+  const handleClick = () => {
+    if (disabled) return;
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (disabled) return;
+    if (onDelete) {
+      onDelete();
+    }
+  };
+
+  // Helper to render icon
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    if (isIconName(icon)) {
+      const iconPath = resolveIconPath(icon);
+      return (
+        <IconSvg
+          path={iconPath}
+          {...iconProps}
+          aria-label={icon}
+        />
+      );
+    } else if (isValidElement(icon)) {
+      return icon;
+    }
+
+    return null;
+  };
+
+  // Helper to render delete icon
+  const renderDeleteIcon = () => {
+    if (isIconName(deleteIcon)) {
+      const iconPath = resolveIconPath(deleteIcon);
+      return (
+        <IconSvg
+          path={iconPath}
+          {...deleteIconProps}
+          aria-label={deleteIcon}
+        />
+      );
+    } else if (isValidElement(deleteIcon)) {
+      return deleteIcon;
+    }
+
+    return null;
+  };
+
+  const isClickable = (onPress && !disabled) || (selectable && !disabled);
+
+  const mergedRef = useMergeRefs(ref, containerProps.ref);
+
+  return (
+    <div
+      {...containerProps}
+      ref={mergedRef}
+      style={{
+        cursor: isClickable ? 'pointer' : 'default',
+        userSelect: 'none',
+      }}
+      onClick={handleClick}
+      data-testid={testID}
+      role={isClickable ? 'button' : undefined}
+      aria-disabled={disabled}
+      aria-pressed={selectable ? selected : undefined}
+    >
+      {icon && (
+        <span
+          {...iconProps}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {renderIcon()}
+        </span>
+      )}
+
+      <span
+        {...labelProps}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+        }}
+      >
+        {label}
+      </span>
+
+      {deletable && onDelete && (
+        <button
+          {...deleteButtonProps}
+          style={{
+            background: 'transparent',
+            border: 'none',
+            cursor: disabled ? 'default' : 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+          onClick={handleDelete}
+          disabled={disabled}
+          aria-label="Delete"
+          type="button"
+        >
+          {renderDeleteIcon()}
+        </button>
+      )}
+    </div>
+  );
+});
+
+Chip.displayName = 'Chip';
+
+export default Chip;

package/src/Chip/index.native.ts

@@ -0,0 +1,5 @@
+import ChipComponent from './Chip.native';
+
+export default ChipComponent;
+export { ChipComponent as Chip };
+export type { ChipProps, ChipSize, ChipType, ChipIntent } from './types';

package/src/Chip/index.ts

@@ -0,0 +1,5 @@
+import ChipComponent from './Chip.web';
+
+export default ChipComponent;
+export { ChipComponent as Chip };
+export type { ChipProps, ChipSize, ChipType, ChipIntent } from './types';

package/src/Chip/index.web.ts

@@ -0,0 +1,5 @@
+import ChipComponent from './Chip.web';
+
+export default ChipComponent;
+export { ChipComponent as Chip };
+export type { ChipProps, ChipSize, ChipType, ChipIntent } from './types';