@idealyst/components 1.2.29 → 1.2.31

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,
+            },
+        },
+    }),
+}));

package/src/IconButton/IconButton.web.tsx

@@ -0,0 +1,198 @@
+import React, { isValidElement, forwardRef, useMemo } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { IconButtonProps } from './types';
+import { iconButtonStyles } from './IconButton.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';
+
+/**
+ * Circular icon button component with multiple visual variants and sizes.
+ * Supports contained, outlined, and text styles with customizable intent colors.
+ */
+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,
+    accessibilityOwns,
+    accessibilityHasPopup,
+  } = props;
+
+  // Button is effectively disabled when loading
+  const isDisabled = disabled || loading;
+
+  // Apply variants for size, disabled, gradient
+  iconButtonStyles.useVariants({
+    size,
+    disabled: isDisabled,
+    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(
+      'IconButton: onClick prop is deprecated. Use onPress instead for cross-platform compatibility.'
+    );
+  }
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!isDisabled && pressHandler) {
+      e.stopPropagation();
+      pressHandler();
+    }
+  };
+
+  // Generate unique ID for accessibility
+  const buttonId = useMemo(() => id || generateAccessibilityId('icon-button'), [id]);
+
+  // Generate ARIA props - accessibilityLabel is critical for icon-only buttons
+  const ariaProps = useMemo(() => {
+    const computedLabel = accessibilityLabel ?? (typeof icon === 'string' ? icon : undefined);
+
+    return getWebInteractiveAriaProps({
+      accessibilityLabel: computedLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? isDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'button',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityControls,
+      accessibilityExpanded,
+      accessibilityPressed,
+      accessibilityOwns,
+      accessibilityHasPopup,
+    });
+  }, [
+    accessibilityLabel,
+    icon,
+    accessibilityHint,
+    accessibilityDisabled,
+    isDisabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+    accessibilityOwns,
+    accessibilityHasPopup,
+  ]);
+
+  // Compute dynamic styles with all props for full flexibility
+  const dynamicProps = { intent, type, size, disabled: isDisabled, gradient };
+  const buttonStyleArray = [
+    (iconButtonStyles.button as any)(dynamicProps),
+    style as any,
+  ];
+
+  // Use getWebProps to generate className and ref for web
+  const webProps = getWebProps(buttonStyleArray);
+
+  // Icon styles with dynamic function
+  const iconStyleArray = [(iconButtonStyles.icon as any)(dynamicProps)];
+  const iconProps = getWebProps(iconStyleArray);
+
+  // Spinner styles that match the icon color
+  const spinnerStyleArray = [(iconButtonStyles.spinner as any)(dynamicProps)];
+  const spinnerProps = getWebProps(spinnerStyleArray);
+
+  // Helper to render icon
+  const renderIcon = () => {
+    if (typeof icon === 'string') {
+      return (
+        <IconSvg
+          name={icon}
+          {...iconProps}
+          aria-label={icon}
+        />
+      );
+    } else if (isValidElement(icon)) {
+      return icon;
+    }
+    return null;
+  };
+
+  // Render spinner with inline CSS animation (absolutely centered)
+  const renderSpinner = () => (
+    <>
+      <style>
+        {`
+          @keyframes icon-button-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+      <span
+        {...spinnerProps}
+        style={{
+          position: 'absolute',
+          display: 'inline-block',
+          width: '1em',
+          height: '1em',
+          border: '2px solid currentColor',
+          borderTopColor: 'transparent',
+          borderRadius: '50%',
+          animation: 'icon-button-spin 0.8s linear infinite',
+        }}
+        role="status"
+        aria-label="Loading"
+      />
+    </>
+  );
+
+  // Merge unistyles web ref with forwarded ref
+  const mergedRef = useMergeRefs(ref, webProps.ref);
+
+  // Content opacity - hide when loading but keep for sizing
+  const contentStyle = loading ? { opacity: 0 } : undefined;
+
+  return (
+    <button
+      {...webProps}
+      {...ariaProps}
+      ref={mergedRef}
+      id={buttonId}
+      onClick={handleClick}
+      disabled={isDisabled}
+      data-testid={testID}
+      aria-busy={loading ? 'true' : undefined}
+      style={{ position: 'relative' }}
+    >
+      {loading && renderSpinner()}
+      <span style={contentStyle}>{renderIcon()}</span>
+    </button>
+  );
+});
+
+IconButton.displayName = 'IconButton';
+
+export default IconButton;

package/src/IconButton/index.native.ts

@@ -0,0 +1,5 @@
+import IconButtonComponent from './IconButton.native';
+
+export default IconButtonComponent;
+export { IconButtonComponent as IconButton };
+export * from './types';

package/src/IconButton/index.ts

@@ -0,0 +1,5 @@
+import IconButtonComponent from './IconButton.web';
+
+export default IconButtonComponent;
+export { IconButtonComponent as IconButton };
+export * from './types';

package/src/IconButton/index.web.ts

@@ -0,0 +1,5 @@
+import IconButtonComponent from './IconButton.web';
+
+export default IconButtonComponent;
+export { IconButtonComponent as IconButton };
+export * from './types';

package/src/IconButton/types.ts

@@ -0,0 +1,84 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icon-types';
+import { Intent, Size } from '@idealyst/theme';
+import { BaseProps } from '../utils/viewStyleProps';
+import { InteractiveAccessibilityProps } from '../utils/accessibility';
+
+// Component-specific type aliases for future extensibility
+export type IconButtonType = 'contained' | 'outlined' | 'text';
+export type IconButtonIntentVariant = Intent;
+export type IconButtonSizeVariant = Size;
+
+/**
+ * Gradient overlay options for icon buttons.
+ * Applies a transparent gradient over the intent background color.
+ * - 'darken': Transparent to semi-transparent black (darkens one corner)
+ * - 'lighten': Transparent to semi-transparent white (lightens one corner)
+ */
+export type IconButtonGradient = 'darken' | 'lighten';
+
+/**
+ * Circular icon button component with multiple visual variants, sizes, and a single icon.
+ * Supports contained, outlined, and text styles with customizable intent colors.
+ */
+export interface IconButtonProps extends BaseProps, InteractiveAccessibilityProps {
+  /**
+   * The icon to display. Can be an icon name string or a custom ReactNode.
+   */
+  icon: IconName | ReactNode;
+
+  /**
+   * Called when the button is pressed
+   */
+  onPress?: () => void;
+
+  /**
+   * @deprecated Use `onPress` instead. This prop exists for web compatibility only.
+   * Using onClick will log a deprecation warning in development.
+   */
+  onClick?: () => void;
+
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * The visual style type of the button
+   */
+  type?: IconButtonType;
+
+  /**
+   * The intent/color scheme of the button
+   */
+  intent?: IconButtonIntentVariant;
+
+  /**
+   * The size of the button
+   */
+  size?: IconButtonSizeVariant;
+
+  /**
+   * Apply a gradient background enhancement.
+   * Only applies to 'contained' button type.
+   */
+  gradient?: IconButtonGradient;
+
+  /**
+   * Whether the button is in a loading state.
+   * When true, shows a spinner and disables interaction.
+   * The spinner color matches the icon color.
+   */
+  loading?: boolean;
+
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Image/Image.native.tsx

@@ -3,8 +3,9 @@ import { Image as RNImage, View } from 'react-native';
 import { imageStyles } from './Image.styles';
 import type { ImageProps } from './types';
 import ActivityIndicator from '../ActivityIndicator';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Image = forwardRef<View, ImageProps>(({
+const Image = forwardRef<IdealystElement, ImageProps>(({
   source,
   alt,
   width,
@@ -57,7 +58,7 @@ const Image = forwardRef<View, ImageProps>(({
   ];
 
   return (
-    <View ref={ref} nativeID={id} style={containerStyle as any} testID={testID} accessibilityRole="image" accessibilityLabel={accessibilityLabel || alt}>
+    <View ref={ref as any} nativeID={id} style={containerStyle as any} testID={testID} accessibilityRole="image" accessibilityLabel={accessibilityLabel || alt}>
       <RNImage
         source={imageSource as any}
         style={[imageStyles.image, { borderRadius }]}