@idealyst/components 1.1.6 → 1.1.8

package/src/Accordion/Accordion.styles.tsx

@@ -1,277 +1,168 @@
+/**
+ * Accordion styles using defineStyle with dynamic props.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, CompoundVariants, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { AccordionType } from './types';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-type AccordionSize = Size;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type AccordionVariants = {
-    size: AccordionSize;
-    type: AccordionType;
-    expanded: boolean;
-    disabled: boolean;
-    isLast: boolean;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedAccordionStyles = StylesheetStyles<keyof AccordionVariants>;
+type AccordionType = 'standard' | 'separated' | 'bordered';
 
-/**
- * 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;
-}
+export type AccordionDynamicProps = {
+    size?: Size;
+    type?: AccordionType;
+    expanded?: boolean;
+    disabled?: boolean;
+    isLast?: boolean;
+    gap?: ViewStyleSize;
+    padding?: ViewStyleSize;
+    paddingVertical?: ViewStyleSize;
+    paddingHorizontal?: ViewStyleSize;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
 
 /**
- * Create type variants for items
+ * Accordion styles with type/expanded/disabled handling.
  */
-function createItemTypeVariants(theme: Theme) {
-    return {
-        standard: {
-            borderBottomWidth: 1,
-            borderBottomStyle: 'solid' as const,
-            borderBottomColor: theme.colors.border.primary,
-        },
-        separated: {
+export const accordionStyles = defineStyle('Accordion', (theme: Theme) => ({
+    container: ({ type = 'standard' }: AccordionDynamicProps) => {
+        const typeStyles = type === 'bordered' ? {
             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: {
+        return {
             display: 'flex' as const,
             flexDirection: 'column' as const,
+            gap: type === 'separated' ? 8 : 0,
+            ...typeStyles,
             variants: {
-                size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-                type: createContainerTypeVariants(theme),
-                expanded: { true: {}, false: {} },
-                disabled: { true: {}, false: {} },
-                isLast: { true: {}, false: {} },
-                // Spacing variants from ContainerStyleProps
-                gap: buildGapVariants(theme),
-                padding: buildPaddingVariants(theme),
-                paddingVertical: buildPaddingVerticalVariants(theme),
-                paddingHorizontal: buildPaddingHorizontalVariants(theme),
-                margin: buildMarginVariants(theme),
-                marginVertical: buildMarginVerticalVariants(theme),
-                marginHorizontal: buildMarginHorizontalVariants(theme),
+                gap: {
+                    gap: theme.sizes.$view.padding,
+                },
+                padding: {
+                    padding: theme.sizes.$view.padding,
+                },
+                paddingVertical: {
+                    paddingVertical: theme.sizes.$view.padding,
+                },
+                paddingHorizontal: {
+                    paddingHorizontal: theme.sizes.$view.padding,
+                },
+                margin: {
+                    margin: theme.sizes.$view.padding,
+                },
+                marginVertical: {
+                    marginVertical: theme.sizes.$view.padding,
+                },
+                marginHorizontal: {
+                    marginHorizontal: theme.sizes.$view.padding,
+                },
             },
-        },
-        item: {
+        } as const;
+    },
+
+    item: ({ type = 'standard', isLast = false }: AccordionDynamicProps) => {
+        let typeStyles = {};
+
+        if (type === 'standard' || type === 'bordered') {
+            typeStyles = {
+                borderBottomWidth: isLast ? 0 : 1,
+                borderBottomStyle: 'solid' as const,
+                borderBottomColor: theme.colors.border.primary,
+            };
+        } else if (type === 'separated') {
+            typeStyles = {
+                borderWidth: 1,
+                borderStyle: 'solid' as const,
+                borderColor: theme.colors.border.primary,
+                borderRadius: 8,
+                overflow: 'hidden' as const,
+            };
+        }
+
+        return {
             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: {},
-                },
+            ...typeStyles,
+        } as const;
+    },
+
+    header: ({ expanded = false, disabled = false }: AccordionDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'space-between' as const,
+        width: '100%',
+        backgroundColor: 'transparent' as const,
+        color: theme.colors.text.primary,
+        textAlign: 'left' as const,
+        fontWeight: expanded ? ('600' as const) : ('500' as const),
+        opacity: disabled ? 0.5 : 1,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$accordion.headerFontSize,
+                padding: theme.sizes.$accordion.headerPadding,
             },
-            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,
-            },
+        _web: {
+            border: 'none',
+            outline: 'none',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            transition: 'background-color 0.2s ease',
+            _hover: disabled ? {} : { backgroundColor: theme.colors.surface.secondary },
         },
-        title: {
-            flex: 1,
-            variants: {
-                size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-                type: { standard: {}, separated: {}, bordered: {} },
-                expanded: { true: {}, false: {} },
-                disabled: { true: {}, false: {} },
-                isLast: { true: {}, false: {} },
+    }),
+
+    title: (_props: AccordionDynamicProps) => ({
+        flex: 1,
+    }),
+
+    icon: ({ expanded = false }: AccordionDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        marginLeft: 8,
+        color: theme.intents.primary.primary,
+        variants: {
+            size: {
+                width: theme.sizes.$accordion.iconSize,
+                height: theme.sizes.$accordion.iconSize,
             },
         },
-        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,
-            },
+        _web: {
+            transition: 'transform 0.2s ease',
+            transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
         },
-        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,
-            },
+    }),
+
+    content: ({ expanded = false }: AccordionDynamicProps) => ({
+        overflow: 'hidden' as const,
+        maxHeight: expanded ? 2000 : 0,
+        _web: {
+            transition: 'height 0.15s ease, padding 0.3s ease',
         },
-        contentInner: {
-            color: theme.colors.text.secondary,
-            variants: {
-                size: createContentInnerSizeVariants(theme),
-                type: { standard: {}, separated: {}, bordered: {} },
-                expanded: { true: {}, false: {} },
-                disabled: { true: {}, false: {} },
-                isLast: { true: {}, false: {} },
+    }),
+
+    contentInner: (_props: AccordionDynamicProps) => ({
+        color: theme.colors.text.secondary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$accordion.headerFontSize,
+                padding: theme.sizes.$accordion.contentPadding,
+                paddingTop: 0,
             },
         },
-    };
-});
+    }),
+}));

package/src/Accordion/Accordion.web.tsx

@@ -12,6 +12,7 @@ interface AccordionItemProps {
   isExpanded: boolean;
   onToggle: () => void;
   size: AccordionProps['size'];
+  isLast: boolean;
   testID?: string;
   headerId: string;
   panelId: string;
@@ -24,6 +25,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   onToggle,
   type,
   size,
+  isLast,
   testID,
   headerId,
   panelId,
@@ -33,19 +35,21 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   const [contentHeight, setContentHeight] = useState(0);
   const chevronIconPath = resolveIconPath('chevron-down');
 
+  // Apply item-specific variants (for size, expanded, disabled)
   accordionStyles.useVariants({
     size,
-    type,
     expanded: isExpanded,
     disabled: Boolean(item.disabled),
   });
 
-  const itemProps = getWebProps([accordionStyles.item]);
-  const headerProps = getWebProps([accordionStyles.header]);
+  // Get dynamic item style with type and isLast props
+  const itemStyle = (accordionStyles.item as any)({ type, isLast });
+  const itemProps = getWebProps([itemStyle]);
+  const headerProps = getWebProps([(accordionStyles.header as any)({})]);
   const titleProps = getWebProps([accordionStyles.title]);
-  const iconProps = getWebProps([accordionStyles.icon]);
+  const iconProps = getWebProps([(accordionStyles.icon as any)({})]);
   const contentProps = getWebProps([
-    accordionStyles.content,
+    (accordionStyles.content as any)({}),
     {
       height: isExpanded ? contentHeight : 0,
       overflow: 'hidden' as const,
@@ -193,7 +197,7 @@ const Accordion: React.FC<AccordionProps> = ({
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([accordionStyles.container, style as any]);
+  const containerProps = getWebProps([(accordionStyles.container as any)({}), style as any]);
 
   const toggleItem = (itemId: string, disabled?: boolean) => {
     if (disabled) return;
@@ -213,7 +217,7 @@ const Accordion: React.FC<AccordionProps> = ({
 
   return (
     <div {...containerProps} {...ariaProps} id={accordionId} data-testid={testID}>
-      {items.map((item) => (
+      {items.map((item, index) => (
         <AccordionItem
           key={item.id}
           item={item}
@@ -221,6 +225,7 @@ const Accordion: React.FC<AccordionProps> = ({
           isExpanded={expandedItems.includes(item.id)}
           onToggle={() => toggleItem(item.id, item.disabled)}
           size={size}
+          isLast={index === items.length - 1}
           testID={`${testID}-item-${item.id}`}
           headerId={getHeaderId(item.id)}
           panelId={getPanelId(item.id)}

package/src/ActivityIndicator/ActivityIndicator.native.tsx

@@ -39,7 +39,8 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
   });
 
   // Call dynamic style with intent variant
-  const spinnerStyle = activityIndicatorStyles.spinner({ intent });
+  const spinnerStyle = (activityIndicatorStyles.spinner as any)({ intent });
+  const containerStyle = (activityIndicatorStyles.container as any)({});
 
   // Get the color from styles or use custom color
   const indicatorColor = color || spinnerStyle.color;
@@ -47,7 +48,7 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
   return (
     <View
       style={[
-        activityIndicatorStyles.container,
+        containerStyle,
         customSize && {
           width: customSize,
           height: customSize,

package/src/ActivityIndicator/ActivityIndicator.styles.old.tsx

@@ -0,0 +1,94 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type ActivityIndicatorSize = Size;
+type ActivityIndicatorIntent = Intent;
+
+type ActivityIndicatorVariants = {
+    size: ActivityIndicatorSize;
+    intent: ActivityIndicatorIntent;
+    animating: boolean;
+}
+
+export type ExpandedActivityIndicatorStyles = StylesheetStyles<keyof ActivityIndicatorVariants>;
+
+export type ActivityIndicatorStylesheet = {
+    container: ExpandedActivityIndicatorStyles;
+    spinner: ExpandedActivityIndicatorStyles;
+}
+
+function createContainerSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'activityIndicator', (size) => ({
+        width: size.size,
+        height: size.size,
+    }));
+}
+
+function createSpinnerSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'activityIndicator', (size) => ({
+        width: size.size,
+        height: size.size,
+        borderWidth: size.borderWidth,
+    }));
+}
+
+function getSpinnerColor(theme: Theme, intent: ActivityIndicatorIntent) {
+    return theme.intents[intent].primary;
+}
+
+function createSpinnerStyles(theme: Theme) {
+    return ({ intent }: Partial<ActivityIndicatorVariants>) => {
+        const color = getSpinnerColor(theme, intent);
+        return {
+            borderRadius: 9999,
+            borderStyle: 'solid',
+            color,
+            variants: {
+                size: createSpinnerSizeVariants(theme),
+                animating: {
+                    true: {},
+                    false: {},
+                },
+            },
+            _web: {
+                borderColor: 'transparent',
+                borderTopColor: color,
+                borderRightColor: color,
+                animation: 'spin 1s linear infinite',
+                boxSizing: 'border-box',
+            },
+        } as const;
+    }
+}
+
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        variants: {
+            size: createContainerSizeVariants(theme),
+            animating: {
+                true: {
+                    opacity: 1,
+                },
+                false: {
+                    opacity: 0,
+                },
+            },
+        },
+    });
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const activityIndicatorStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    return applyExtensions('ActivityIndicator', theme, {
+        container: createContainerStyles(theme),
+        spinner: createSpinnerStyles(theme),
+    });
+});