@idealyst/components 1.2.30 → 1.2.31

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/Skeleton/Skeleton.web.tsx

@@ -39,7 +39,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
     animation,
   });
 
-  const skeletonProps = getWebProps([skeletonStyles.skeleton, style as any]);
+  const skeletonProps = getWebProps([skeletonStyles.skeleton({}), style as any]);
 
   // Apply custom border radius if provided and shape is 'rounded'
   const customStyles: React.CSSProperties = {

package/src/Switch/Switch.styles.tsx

@@ -48,6 +48,12 @@ export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
 
     switchContainer: (_props: SwitchDynamicProps) => ({
         justifyContent: 'center' as const,
+        variants: {
+            disabled: {
+                true: { _web: { cursor: 'not-allowed' } },
+                false: { _web: { cursor: 'pointer' } },
+            },
+        },
         _web: {
             border: 'none',
             padding: 0,
@@ -59,15 +65,13 @@ export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
     switchTrack: (_props: SwitchDynamicProps) => ({
         borderRadius: 9999,
         position: 'relative' as const,
+        pointerEvents: 'none' as const,
         variants: {
             size: {
                 width: theme.sizes.$switch.trackWidth,
                 height: theme.sizes.$switch.trackHeight,
             },
             checked: {
-                true: {
-                    backgroundColor: theme.$intents.primary,
-                },
                 false: {
                     backgroundColor: theme.colors.border.secondary,
                 },
@@ -77,6 +81,14 @@ export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
                 false: { opacity: 1 },
             },
         },
+        compoundVariants: [
+            {
+                checked: true,
+                styles: {
+                    backgroundColor: theme.$intents.primary,
+                },
+            },
+        ],
         _web: {
             transition: 'background-color 0.2s ease',
         },
@@ -125,14 +137,19 @@ export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
                 height: theme.sizes.$switch.thumbIconSize,
             },
             checked: {
-                true: {
-                    color: theme.$intents.primary,
-                },
                 false: {
                     color: theme.colors.border.secondary,
                 },
             },
         },
+        compoundVariants: [
+            {
+                checked: true,
+                styles: {
+                    color: theme.$intents.primary,
+                },
+            },
+        ],
     }),
 
     label: (_props: SwitchDynamicProps) => ({

package/src/Switch/Switch.web.tsx

@@ -77,12 +77,15 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     checked,
   ]);
 
+  
   // Apply variants using the correct Unistyles v3 pattern
   switchStyles.useVariants({
-    size: size as 'sm' | 'md' | 'lg',
+    size,
+    checked,
     disabled: disabled as boolean,
-    position: labelPosition as 'left' | 'right',
+    labelPosition,
     margin,
+    intent,
     marginVertical,
     marginHorizontal,
   });
@@ -119,13 +122,7 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
 
   // Computed container props with dynamic styles (for when label exists)
   const computedContainerProps = getWebProps([
-    (switchStyles.container as any)({}),
-    style as any,
-    {
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      display: 'inline-flex',
-      alignItems: 'center',
-    }
+    (switchStyles.container as any)({ disabled }),
   ]);
 
   const mergedButtonRef = useMergeRefs(ref as React.Ref<HTMLButtonElement>, computedButtonProps.ref);
@@ -135,6 +132,7 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     <button
       {...computedButtonProps}
       {...ariaProps}
+      style={style as any}
       ref={mergedButtonRef}
       onClick={handleClick}
       disabled={disabled}

package/src/View/View.styles.tsx

@@ -90,6 +90,7 @@ export const viewStyles = defineStyle('View', (theme: Theme) => ({
             display: 'flex',
             flexDirection: 'column',
             boxSizing: 'border-box',
+            borderStyle: 'solid',
         },
     }),
     // Web-only: Wrapper for scrollable view

package/src/View/View.web.tsx

@@ -73,6 +73,9 @@ const View = forwardRef<IdealystElement, ViewProps>(({
       flexShrink,
       flexBasis,
       alignSelf,
+      // Flex content alignment - goes to content (for aligning children)
+      alignItems,
+      justifyContent,
       // Margin - goes to wrapper (positioning in parent)
       margin,
       marginTop,
@@ -124,6 +127,9 @@ const View = forwardRef<IdealystElement, ViewProps>(({
             inset: 0,
             overflow: 'auto',
             boxSizing: 'border-box',
+            // Flex alignment for children
+            ...(alignItems !== undefined && { alignItems }),
+            ...(justifyContent !== undefined && { justifyContent }),
             // User's visual styles
             ...contentStyles,
           }}
@@ -139,8 +145,8 @@ const View = forwardRef<IdealystElement, ViewProps>(({
 
   return (
     <div
-      style={style as any}
       {...webProps}
+      style={style as any}
       ref={mergedRef}
       id={id}
       data-testid={testID}

package/src/examples/ActivityIndicatorExamples.tsx

@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { Screen, View, Text, Button } from '@idealyst/components';
+import ActivityIndicator from '../ActivityIndicator';
+
+export const ActivityIndicatorExamples: React.FC = () => {
+  const [isAnimating, setIsAnimating] = useState(true);
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View gap="lg">
+        <Text typography="h3">ActivityIndicator Examples</Text>
+
+        <View gap="md">
+          <Text typography="h5">Basic</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+            <ActivityIndicator />
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Sizes</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator size="xs" />
+              <Text typography="caption">xs</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator size="sm" />
+              <Text typography="caption">sm</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator size="md" />
+              <Text typography="caption">md</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator size="lg" />
+              <Text typography="caption">lg</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator size="xl" />
+              <Text typography="caption">xl</Text>
+            </View>
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Intent Colors</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator intent="primary" />
+              <Text typography="caption">primary</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator intent="success" />
+              <Text typography="caption">success</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator intent="warning" />
+              <Text typography="caption">warning</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator intent="danger" />
+              <Text typography="caption">danger</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator intent="neutral" />
+              <Text typography="caption">neutral</Text>
+            </View>
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Custom Color</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>
+            <ActivityIndicator color="#9333ea" />
+            <ActivityIndicator color="#ec4899" />
+            <ActivityIndicator color="#06b6d4" />
+            <ActivityIndicator color="#f97316" />
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Toggle Animation</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+            <ActivityIndicator animating={isAnimating} hidesWhenStopped={false} />
+            <Button size="sm" onPress={() => setIsAnimating(!isAnimating)}>
+              {isAnimating ? 'Stop' : 'Start'}
+            </Button>
+          </View>
+          <Text typography="caption" color="secondary">
+            hidesWhenStopped=false keeps the indicator visible when stopped
+          </Text>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Hides When Stopped (default)</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+            <View style={{ width: 32, height: 32, alignItems: 'center', justifyContent: 'center' }}>
+              <ActivityIndicator animating={isAnimating} />
+            </View>
+            <Text typography="body2">
+              {isAnimating ? 'Visible (animating)' : 'Hidden (stopped)'}
+            </Text>
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Loading States</Text>
+          <View gap="sm">
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+                padding: 16,
+                backgroundColor: 'rgba(0,0,0,0.05)',
+                borderRadius: 8,
+              }}
+            >
+              <ActivityIndicator size="sm" />
+              <Text>Loading data...</Text>
+            </View>
+            <View
+              style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 32,
+                backgroundColor: 'rgba(0,0,0,0.05)',
+                borderRadius: 8,
+              }}
+            >
+              <ActivityIndicator size="lg" />
+              <Text typography="body2" color="secondary" style={{ marginTop: 12 }}>
+                Please wait...
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Inline with Text</Text>
+          <View gap="sm">
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <Text>Saving</Text>
+              <ActivityIndicator size="xs" />
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <Text>Processing request</Text>
+              <ActivityIndicator size="sm" intent="success" />
+            </View>
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">On Dark Background</Text>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 24,
+              padding: 24,
+              backgroundColor: '#1f2937',
+              borderRadius: 8,
+            }}
+          >
+            <ActivityIndicator color="#ffffff" />
+            <ActivityIndicator color="#60a5fa" />
+            <ActivityIndicator color="#34d399" />
+            <ActivityIndicator color="#fbbf24" />
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};
+
+export default ActivityIndicatorExamples;