@idealyst/components 1.0.83 → 1.0.84

package/src/Accordion/Accordion.native.tsx

@@ -0,0 +1,182 @@
+import React, { useState, forwardRef, useEffect } from 'react';
+import { View, TouchableOpacity, LayoutChangeEvent } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { accordionStyles } from './Accordion.styles';
+import Text from '../Text';
+import type { AccordionProps, AccordionItem as AccordionItemType } from './types';
+
+interface AccordionItemProps {
+  item: AccordionItemType;
+  isExpanded: boolean;
+  onToggle: () => void;
+  size: AccordionProps['size'];
+  type: AccordionProps['type'];
+  isLast: boolean;
+  testID?: string;
+}
+
+const AccordionItem: React.FC<AccordionItemProps> = ({
+  item,
+  isExpanded,
+  onToggle,
+  size,
+  type,
+  isLast,
+  testID,
+}) => {
+  const contentHeight = useSharedValue(0);
+  const iconRotation = useSharedValue(0);
+  const [measuredHeight, setMeasuredHeight] = useState(0);
+
+  // Apply item-specific variants
+  accordionStyles.useVariants({
+    type,
+    isLast,
+    size,
+    expanded: isExpanded,
+    disabled: Boolean(item.disabled),
+  });
+
+  // Animate height and icon rotation when expanded state changes
+  useEffect(() => {
+    contentHeight.value = withTiming(
+      isExpanded ? measuredHeight : 0,
+      {
+        duration: 250,
+        easing: Easing.bezier(0.4, 0.0, 0.2, 1), // Material Design standard easing
+      }
+    );
+    iconRotation.value = withTiming(
+      isExpanded ? 180 : 0,
+      {
+        duration: 200,
+        easing: Easing.bezier(0.4, 0.0, 0.2, 1),
+      }
+    );
+  }, [isExpanded, measuredHeight]);
+
+  const animatedContentStyle = useAnimatedStyle(() => ({
+    height: contentHeight.value,
+    overflow: 'hidden',
+  }));
+
+  const animatedIconStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${iconRotation.value}deg` }],
+  }));
+
+  const handleContentLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    if (height > 0 && height !== measuredHeight) {
+      setMeasuredHeight(height);
+    }
+  };
+
+  return (
+    <View style={accordionStyles.item} testID={testID}>
+      <TouchableOpacity
+        style={accordionStyles.header}
+        onPress={onToggle}
+        disabled={item.disabled}
+        activeOpacity={0.7}
+      >
+        <View style={accordionStyles.title}>
+          <Text style={accordionStyles.header}>
+            {item.title}
+          </Text>
+        </View>
+        <Animated.View style={[accordionStyles.icon, animatedIconStyle]}>
+          <MaterialCommunityIcons
+            name="chevron-down"
+            size={20}
+            style={accordionStyles.icon}
+          />
+        </Animated.View>
+      </TouchableOpacity>
+
+      {/* Hidden view for measuring content height */}
+      <View
+        style={{ position: 'absolute', opacity: 0, zIndex: -1 }}
+        onLayout={handleContentLayout}
+      >
+        <View style={accordionStyles.contentInner}>
+          {typeof item.content === 'string' ? (
+            <Text style={accordionStyles.contentInner}>
+              {item.content}
+            </Text>
+          ) : (
+            item.content
+          )}
+        </View>
+      </View>
+
+      {/* Animated visible content */}
+      <Animated.View style={animatedContentStyle}>
+        <View style={accordionStyles.contentInner}>
+          {typeof item.content === 'string' ? (
+            <Text style={accordionStyles.contentInner}>
+              {item.content}
+            </Text>
+          ) : (
+            item.content
+          )}
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+const Accordion = forwardRef<View, AccordionProps>(({
+  items,
+  allowMultiple = false,
+  defaultExpanded = [],
+  type = 'standard',
+  size = 'md',
+  style,
+  testID,
+}, ref) => {
+  const [expandedItems, setExpandedItems] = useState<string[]>(defaultExpanded);
+
+  // Apply variants
+  accordionStyles.useVariants({
+    type,
+    size,
+  });
+
+  const toggleItem = (itemId: string, disabled?: boolean) => {
+    if (disabled) return;
+
+    setExpandedItems((prev) => {
+      const isExpanded = prev.includes(itemId);
+
+      if (allowMultiple) {
+        return isExpanded
+          ? prev.filter((id) => id !== itemId)
+          : [...prev, itemId];
+      } else {
+        return isExpanded ? [] : [itemId];
+      }
+    });
+  };
+
+  return (
+    <View ref={ref} style={[accordionStyles.container, style]} testID={testID}>
+      {items.map((item, index) => (
+        <AccordionItem
+          key={item.id}
+          item={item}
+          isExpanded={expandedItems.includes(item.id)}
+          onToggle={() => toggleItem(item.id, item.disabled)}
+          size={size}
+          type={type}
+          isLast={index === items.length - 1}
+          testID={`${testID}-item-${item.id}`}
+        />
+      ))}
+    </View>
+  );
+});
+
+Accordion.displayName = 'Accordion';
+
+export default Accordion;

package/src/Accordion/Accordion.styles.tsx

@@ -0,0 +1,260 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, CompoundVariants, Size} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { AccordionType } from './types';
+
+type AccordionSize = Size;
+
+type AccordionVariants = {
+    size: AccordionSize;
+    type: AccordionType;
+    expanded: boolean;
+    disabled: boolean;
+    isLast: boolean;
+}
+
+export type ExpandedAccordionStyles = StylesheetStyles<keyof AccordionVariants>;
+
+/**
+ * Create type variants for container
+ */
+function createContainerTypeVariants(theme: Theme) {
+    return {
+        standard: {
+            gap: 0,
+        },
+        separated: {
+            gap: 8,
+        },
+        bordered: {
+            gap: 0,
+            borderWidth: 1,
+            borderStyle: 'solid' as const,
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            overflow: 'hidden' as const,
+        },
+    } as const;
+}
+
+/**
+ * Create type variants for items
+ */
+function createItemTypeVariants(theme: Theme) {
+    return {
+        standard: {
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid' as const,
+            borderBottomColor: theme.colors.border.primary,
+        },
+        separated: {
+            borderWidth: 1,
+            borderStyle: 'solid' as const,
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            overflow: 'hidden' as const,
+        },
+        bordered: {
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid' as const,
+            borderBottomColor: theme.colors.border.primary,
+        },
+    } as const;
+}
+
+/**
+ * Create compound variants for item (type + isLast)
+ */
+function createItemCompoundVariants(): CompoundVariants<keyof AccordionVariants> {
+    return [
+        {
+            type: 'standard',
+            isLast: true,
+            styles: {
+                borderBottomWidth: 0,
+            },
+        },
+        {
+            type: 'bordered',
+            isLast: true,
+            styles: {
+                borderBottomWidth: 0,
+            },
+        },
+    ];
+}
+
+/**
+ * Create size variants for header
+ */
+function createHeaderSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'accordion', (size) => ({
+        fontSize: size.headerFontSize,
+        padding: size.headerPadding,
+    }));
+}
+
+/**
+ * Create size variants for icon
+ */
+function createIconSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'accordion', (size) => ({
+        width: size.iconSize,
+        height: size.iconSize,
+    }));
+}
+
+/**
+ * Create size variants for content inner
+ */
+function createContentInnerSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'accordion', (size) => ({
+        fontSize: size.headerFontSize,
+        padding: size.contentPadding,
+        paddingTop: 0,
+    }));
+}
+
+// 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 accordionStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: {
+            display: 'flex' as const,
+            flexDirection: 'column' as const,
+            variants: {
+                size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
+                type: createContainerTypeVariants(theme),
+                expanded: { true: {}, false: {} },
+                disabled: { true: {}, false: {} },
+                isLast: { true: {}, false: {} },
+            },
+        },
+        item: {
+            display: 'flex' as const,
+            flexDirection: 'column' as const,
+            variants: {
+                size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
+                type: createItemTypeVariants(theme),
+                expanded: { true: {}, false: {} },
+                disabled: { true: {}, false: {} },
+                isLast: {
+                    true: {},
+                    false: {},
+                },
+            },
+            compoundVariants: createItemCompoundVariants(),
+        },
+        header: {
+            display: 'flex' as const,
+            flexDirection: 'row' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'space-between' as const,
+            width: '100%' as const,
+            backgroundColor: 'transparent' as const,
+            color: theme.colors.text.primary,
+            textAlign: 'left' as const,
+            variants: {
+                size: createHeaderSizeVariants(theme),
+                type: { standard: {}, separated: {}, bordered: {} },
+                expanded: {
+                    true: {
+                        fontWeight: '600' as const,
+                    },
+                    false: {
+                        fontWeight: '500' as const,
+                    },
+                },
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed' as const,
+                        },
+                    },
+                    false: {
+                        _web: {
+                            cursor: 'pointer' as const,
+                            _hover: {
+                                backgroundColor: theme.colors.surface.secondary,
+                            },
+                        },
+                    },
+                },
+                isLast: { true: {}, false: {} },
+            } as const,
+            _web: {
+                border: 'none' as const,
+                outline: 'none' as const,
+                transition: 'background-color 0.2s ease' as const,
+            },
+        },
+        title: {
+            flex: 1,
+            variants: {
+                size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
+                type: { standard: {}, separated: {}, bordered: {} },
+                expanded: { true: {}, false: {} },
+                disabled: { true: {}, false: {} },
+                isLast: { true: {}, false: {} },
+            },
+        },
+        icon: {
+            display: 'flex' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+            marginLeft: 8,
+            color: theme.intents.primary.primary,
+            variants: {
+                size: createIconSizeVariants(theme),
+                type: { standard: {}, separated: {}, bordered: {} },
+                expanded: {
+                    true: {
+                        _web: {
+                            transform: 'rotate(180deg)' as const,
+                        },
+                    },
+                    false: {
+                        _web: {
+                            transform: 'rotate(0deg)' as const,
+                        },
+                    },
+                },
+                disabled: { true: {}, false: {} },
+                isLast: { true: {}, false: {} },
+            },
+            _web: {
+                transition: 'transform 0.2s ease' as const,
+            },
+        },
+        content: {
+            overflow: 'hidden' as const,
+            variants: {
+                size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
+                type: { standard: {}, separated: {}, bordered: {} },
+                expanded: {
+                    true: {
+                        maxHeight: 2000,
+                    },
+                    false: {
+                        maxHeight: 0,
+                    },
+                },
+                disabled: { true: {}, false: {} },
+                isLast: { true: {}, false: {} },
+            },
+            _web: {
+                transition: 'height 0.15s ease, padding 0.3s ease' as const,
+            },
+        },
+        contentInner: {
+            color: theme.colors.text.secondary,
+            variants: {
+                size: createContentInnerSizeVariants(theme),
+                type: { standard: {}, separated: {}, bordered: {} },
+                expanded: { true: {}, false: {} },
+                disabled: { true: {}, false: {} },
+                isLast: { true: {}, false: {} },
+            },
+        },
+    };
+});

package/src/Accordion/Accordion.web.tsx

@@ -0,0 +1,147 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { accordionStyles } from './Accordion.styles';
+import type { AccordionProps, AccordionItem as AccordionItemType } from './types';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { resolveIconPath } from '../Icon/icon-resolver';
+
+interface AccordionItemProps {
+  item: AccordionItemType;
+  type: AccordionProps['type'];
+  isExpanded: boolean;
+  onToggle: () => void;
+  size: AccordionProps['size'];
+  testID?: string;
+}
+
+const AccordionItem: React.FC<AccordionItemProps> = ({
+  item,
+  isExpanded,
+  onToggle,
+  type,
+  size,
+  testID,
+}) => {
+  const contentInnerRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState(0);
+  const chevronIconPath = resolveIconPath('chevron-down');
+
+  accordionStyles.useVariants({
+    size,
+    type,
+    expanded: isExpanded,
+    disabled: Boolean(item.disabled),
+  });
+
+  const itemProps = getWebProps([accordionStyles.item]);
+  const headerProps = getWebProps([accordionStyles.header]);
+  const titleProps = getWebProps([accordionStyles.title]);
+  const iconProps = getWebProps([accordionStyles.icon]);
+  const contentProps = getWebProps([
+    accordionStyles.content,
+    {
+      height: isExpanded ? contentHeight : 0,
+      overflow: 'hidden' as const,
+    }
+  ]);
+  const contentInnerProps = getWebProps([accordionStyles.contentInner]);
+
+  useEffect(() => {
+    if (isExpanded) {
+      setContentHeight(contentInnerRef.current.getBoundingClientRect().height);
+    } else {
+      setContentHeight(0);
+    }
+  }, [isExpanded]);
+
+  return (
+    <div
+      {...itemProps}
+      data-testid={testID}
+    >
+      <button
+        {...headerProps}
+        onClick={onToggle}
+        disabled={item.disabled}
+        aria-expanded={isExpanded}
+        aria-disabled={item.disabled}
+      >
+        <span {...titleProps}>
+          {item.title}
+        </span>
+        <span {...iconProps}>
+          <IconSvg
+            style={{ width: 12, height: 12 }}
+            path={chevronIconPath}
+            aria-label="chevron-down"
+          />
+        </span>
+      </button>
+
+      <div
+        {...contentProps}
+        aria-hidden={!isExpanded}
+      >
+        <div ref={contentInnerRef}>
+          <div {...contentInnerProps}>
+            {item.content}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Accordion: React.FC<AccordionProps> = ({
+  items,
+  allowMultiple = false,
+  defaultExpanded = [],
+  type = 'standard',
+  size = 'md',
+  style,
+  testID,
+}) => {
+  const [expandedItems, setExpandedItems] = useState<string[]>(defaultExpanded);
+
+  // Apply variants
+  accordionStyles.useVariants({
+    type,
+    size,
+  });
+
+  const containerProps = getWebProps([accordionStyles.container, style as any]);
+
+  const toggleItem = (itemId: string, disabled?: boolean) => {
+    if (disabled) return;
+
+    setExpandedItems((prev) => {
+      const isExpanded = prev.includes(itemId);
+
+      if (allowMultiple) {
+        return isExpanded
+          ? prev.filter((id) => id !== itemId)
+          : [...prev, itemId];
+      } else {
+        return isExpanded ? [] : [itemId];
+      }
+    });
+  };
+
+  return (
+    <div {...containerProps} data-testid={testID}>
+      {items.map((item) => (
+        <AccordionItem
+          key={item.id}
+          item={item}
+          type={type}
+          isExpanded={expandedItems.includes(item.id)}
+          onToggle={() => toggleItem(item.id, item.disabled)}
+          size={size}
+          testID={`${testID}-item-${item.id}`}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Accordion;

package/src/Accordion/index.native.tsx

@@ -0,0 +1,3 @@
+export { default } from './Accordion.native';
+export { default as Accordion } from './Accordion.native';
+export * from './types';

package/src/Accordion/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Accordion.web';
+export { default as Accordion } from './Accordion.web';
+export * from './types';

package/src/Accordion/index.web.tsx

@@ -0,0 +1,3 @@
+export { default } from './Accordion.web';
+export { default as Accordion } from './Accordion.web';
+export * from './types';

package/src/Accordion/types.ts

@@ -0,0 +1,23 @@
+import { Size } from '@idealyst/theme';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type AccordionType = 'standard' | 'separated' | 'bordered';
+export type AccordionSizeVariant = Size;
+
+export interface AccordionItem {
+  id: string;
+  title: string;
+  content: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  allowMultiple?: boolean;
+  defaultExpanded?: string[];
+  type?: AccordionType;
+  size?: AccordionSizeVariant;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/ActivityIndicator/ActivityIndicator.native.tsx

@@ -1,35 +1,37 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { ActivityIndicator as RNActivityIndicator, View } from 'react-native';
 import { ActivityIndicatorProps } from './types';
 import { activityIndicatorStyles } from './ActivityIndicator.styles';
 
-const ActivityIndicator: React.FC<ActivityIndicatorProps> = ({
+const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
   animating = true,
-  size = 'medium',
+  size = 'md',
   intent = 'primary',
   color,
   style,
   testID,
   hidesWhenStopped = true,
-}) => {
+}, ref) => {
   // Handle numeric size
-  const sizeVariant = typeof size === 'number' ? 'medium' : size;
+  const sizeVariant = typeof size === 'number' ? 'md' : size;
   const customSize = typeof size === 'number' ? size : undefined;
-  
+
   // Map our size variants to React Native's size prop
-  const rnSize = sizeVariant === 'small' ? 'small' : 'large';
-  
+  const rnSize = sizeVariant === 'sm' ? 'small' : 'large';
+
   activityIndicatorStyles.useVariants({
     size: sizeVariant,
-    intent,
     animating,
   });
 
+  // Call dynamic style with intent variant
+  const spinnerStyle = activityIndicatorStyles.spinner({ intent });
+
   // Get the color from styles or use custom color
-  const indicatorColor = color || activityIndicatorStyles.spinner.color;
+  const indicatorColor = color || spinnerStyle.color;
 
   return (
-    <View 
+    <View
       style={[
         activityIndicatorStyles.container,
         customSize && {
@@ -38,6 +40,7 @@ const ActivityIndicator: React.FC<ActivityIndicatorProps> = ({
         },
         style
       ]}
+      ref={ref}
       testID={testID}
     >
       <RNActivityIndicator
@@ -48,6 +51,8 @@ const ActivityIndicator: React.FC<ActivityIndicatorProps> = ({
       />
     </View>
   );
-};
+});
+
+ActivityIndicator.displayName = 'ActivityIndicator';
 
 export default ActivityIndicator;