@idealyst/components 1.2.30 → 1.2.31

package/src/Chip/Chip.styles.tsx

@@ -1,8 +1,5 @@
 /**
- * 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.
+ * Chip styles using defineStyle with dynamic size/intent/type/selected handling.
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
@@ -25,144 +22,129 @@ export type ChipDynamicProps = {
 };
 
 /**
- * Chip styles with variant expansion for size/intent/type/selected.
+ * Chip styles with size/intent/type/selected handling.
  */
 export const chipStyles = defineStyle('Chip', (theme: Theme) => ({
-    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 } },
-        ],
-    }),
+    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;
+    },
 }));

package/src/IconButton/IconButton.native.tsx

@@ -0,0 +1,219 @@
+import { forwardRef, useMemo } from 'react';
+import { ActivityIndicator, StyleSheet as RNStyleSheet, 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 { iconButtonStyles } from './IconButton.styles';
+import { IconButtonProps } from './types';
+import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
+
+const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) => {
+  const {
+    icon,
+    onPress,
+    onClick,
+    disabled = false,
+    loading = false,
+    type = 'contained',
+    intent = 'primary',
+    size = 'md',
+    gradient,
+    style,
+    testID,
+    id,
+    // Accessibility props
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+  } = props;
+
+  // 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(
+      'IconButton: onClick prop is deprecated. Use onPress instead for cross-platform compatibility.'
+    );
+  }
+
+  // Apply variants for size, disabled, gradient
+  iconButtonStyles.useVariants({
+    size,
+    disabled: isDisabled,
+    gradient,
+  });
+
+  // Compute dynamic styles with all props for full flexibility
+  const dynamicProps = { intent, type, size, disabled: isDisabled, gradient };
+  const buttonStyle = (iconButtonStyles.button as any)(dynamicProps);
+  const iconStyle = (iconButtonStyles.icon as any)(dynamicProps);
+  const spinnerStyle = (iconButtonStyles.spinner as any)(dynamicProps);
+
+  // Gradient is only applicable to contained buttons
+  const showGradient = gradient && type === 'contained';
+
+  // Map button size to icon size
+  const iconSizeMap: Record<string, number> = {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+  };
+  const iconSize = iconSizeMap[size] ?? 16;
+
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    const computedLabel = accessibilityLabel ?? (typeof icon === 'string' ? icon : undefined);
+
+    return getNativeInteractiveAccessibilityProps({
+      accessibilityLabel: computedLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? isDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'button',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityControls,
+      accessibilityExpanded,
+      accessibilityPressed,
+    });
+  }, [
+    accessibilityLabel,
+    icon,
+    accessibilityHint,
+    accessibilityDisabled,
+    isDisabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+  ]);
+
+  // Render gradient background layer
+  const renderGradientLayer = () => {
+    if (!showGradient) return null;
+
+    const [startColor, endColor] = useMemo(() => {
+      switch (gradient) {
+        case 'darken': return [{
+          stopColor: 'black',
+          stopOpacity: 0,
+        }, {
+          stopColor: 'black',
+          stopOpacity: 0.15,
+        }];
+        case 'lighten': return [{
+          stopColor: 'white',
+          stopOpacity: 0,
+        }, {
+          stopColor: 'white',
+          stopOpacity: 0.2,
+        }];
+        default: return [{
+          stopColor: 'black',
+          stopOpacity: 0,
+        }, {
+          stopColor: 'black',
+          stopOpacity: 0,
+        }];
+      }
+    }, [gradient]);
+
+    return (
+      <Svg style={RNStyleSheet.absoluteFill}>
+        <Defs>
+          <LinearGradient id="iconButtonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <Stop offset="0%" {...startColor} />
+            <Stop offset="100%" {...endColor} />
+          </LinearGradient>
+        </Defs>
+        <Rect
+          width="100%"
+          height="100%"
+          fill="url(#iconButtonGradient)"
+          rx={9999}
+          ry={9999}
+        />
+      </Svg>
+    );
+  };
+
+  // TouchableOpacity types don't include nativeID but it's a valid RN prop
+  const touchableProps = {
+    ref,
+    onPress: pressHandler,
+    disabled: isDisabled,
+    testID,
+    nativeID: id,
+    activeOpacity: 0.7,
+    style: [
+      buttonStyle,
+      showGradient && { overflow: 'hidden' },
+      style,
+    ],
+    accessibilityState: loading ? { busy: true } : undefined,
+    ...nativeA11yProps,
+  };
+
+  // Get spinner color from the spinner style (matches icon color)
+  const spinnerColor = spinnerStyle?.color || (type === 'contained' ? '#fff' : undefined);
+
+  // Content opacity - hide when loading but keep for sizing
+  const contentOpacity = loading ? 0 : 1;
+
+  // Render icon
+  const renderIcon = () => {
+    if (typeof icon === 'string') {
+      return (
+        <MaterialDesignIcons
+          name={icon}
+          size={iconSize}
+          style={[iconStyle, { opacity: contentOpacity }]}
+        />
+      );
+    }
+    // Custom ReactNode icon
+    return (
+      <View style={{ opacity: contentOpacity }}>
+        {icon}
+      </View>
+    );
+  };
+
+  return (
+    <TouchableOpacity {...touchableProps as any}>
+      {renderGradientLayer()}
+      {/* Centered spinner overlay */}
+      {loading && (
+        <View style={RNStyleSheet.absoluteFill}>
+          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <ActivityIndicator
+              size="small"
+              color={spinnerColor}
+            />
+          </View>
+        </View>
+      )}
+      {renderIcon()}
+    </TouchableOpacity>
+  );
+});
+
+IconButton.displayName = 'IconButton';
+
+export default IconButton;

package/src/IconButton/IconButton.styles.tsx

@@ -0,0 +1,127 @@
+/**
+ * IconButton styles using defineStyle with $iterator expansion.
+ *
+ * Dynamic style functions are used for intent/type combinations since
+ * the color depends on both values (compound logic).
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+import { IconButtonGradient } from './types';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+type IconButtonSize = Size;
+type IconButtonType = 'contained' | 'outlined' | 'text';
+
+export type IconButtonVariants = {
+    size: IconButtonSize;
+    intent: Intent;
+    type: IconButtonType;
+    disabled: boolean;
+    gradient?: IconButtonGradient;
+}
+
+/**
+ * All dynamic props passed to icon button style functions.
+ */
+export type IconButtonDynamicProps = {
+    intent?: Intent;
+    type?: IconButtonType;
+    size?: Size;
+    disabled?: boolean;
+    gradient?: IconButtonGradient;
+};
+
+/**
+ * IconButton styles with $iterator expansion for size variants.
+ * Circular button that only contains an icon.
+ */
+export const iconButtonStyles = defineStyle('IconButton', (theme: Theme) => ({
+    button: ({ intent = 'primary', type = 'contained' }: IconButtonDynamicProps) => ({
+        boxSizing: 'border-box',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 9999, // Fully circular
+        // Inline theme accesses so Unistyles can trace them
+        backgroundColor: type === 'contained'
+            ? theme.intents[intent].primary
+            : type === 'outlined'
+                ? theme.colors.surface.primary
+                : 'transparent',
+        borderColor: type === 'outlined'
+            ? theme.intents[intent].primary
+            : 'transparent',
+        borderWidth: type === 'outlined' ? 1 : 0,
+        borderStyle: type === 'outlined' ? 'solid' as const : undefined,
+        _web: {
+            display: 'flex',
+            transition: 'all 0.1s ease',
+        },
+        variants: {
+            type: {
+                contained: {
+                    backgroundColor: theme.$intents.primary,
+                    borderColor: 'transparent',
+                },
+                outlined: {
+                    backgroundColor: 'transparent',
+                    borderColor: theme.$intents.primary,
+                },
+                text: {
+                    backgroundColor: 'transparent',
+                    borderColor: 'transparent',
+                    borderWidth: 0,
+                }
+            },
+            // Size variants - circular so width equals height
+            size: {
+                width: theme.sizes.$iconButton.size,
+                height: theme.sizes.$iconButton.size,
+                minWidth: theme.sizes.$iconButton.size,
+                minHeight: theme.sizes.$iconButton.size,
+            },
+            disabled: {
+                true: { opacity: 0.6 },
+                false: { opacity: 1, _web: { cursor: 'pointer', _hover: { opacity: 0.90 }, _active: { opacity: 0.75 } } },
+            },
+            gradient: {
+                darken: { _web: { backgroundImage: 'linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%)' } },
+                lighten: { _web: { backgroundImage: 'linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.2) 100%)' } },
+            },
+        },
+    }),
+    icon: ({ intent = 'primary', type = 'contained' }: IconButtonDynamicProps) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: type === 'contained'
+            ? theme.intents[intent].contrast
+            : theme.intents[intent].primary,
+        variants: {
+            size: {
+                width: theme.sizes.$iconButton.iconSize,
+                height: theme.sizes.$iconButton.iconSize,
+            },
+        },
+    }),
+    spinner: ({ intent = 'primary', type = 'contained' }: IconButtonDynamicProps) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        // Match the icon color based on button type
+        color: type === 'contained'
+            ? theme.intents[intent].contrast
+            : theme.intents[intent].primary,
+        variants: {
+            size: {
+                width: theme.sizes.$iconButton.iconSize,
+                height: theme.sizes.$iconButton.iconSize,
+            },
+        },
+    }),
+}));