@idealyst/components 1.1.7 → 1.1.9

package/src/Accordion/Accordion.styles.tsx

@@ -1,302 +1,168 @@
+/**
+ * Accordion styles using defineStyle with dynamic props.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, 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 { applyExtensions } from '../extensions/applyExtension';
+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';
 
-type ItemDynamicProps = {
+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 container
+ * Accordion styles with type/expanded/disabled handling.
  */
-function createContainerTypeVariants(theme: Theme) {
-    return {
-        standard: {
-            gap: 0,
-        },
-        separated: {
-            gap: 8,
-        },
-        bordered: {
-            gap: 0,
+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,
-        },
-    } as const;
-}
+        } : {};
 
-/**
- * Get item styles based on type and isLast
- */
-function getItemTypeStyles(theme: Theme, type: AccordionType, isLast: boolean) {
-    switch (type) {
-        case 'standard':
-            return {
+        return {
+            display: 'flex' as const,
+            flexDirection: 'column' as const,
+            gap: type === 'separated' ? 8 : 0,
+            ...typeStyles,
+            variants: {
+                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,
+                },
+            },
+        } 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,
             };
-        case 'separated':
-            return {
+        } else if (type === 'separated') {
+            typeStyles = {
                 borderWidth: 1,
                 borderStyle: 'solid' as const,
                 borderColor: theme.colors.border.primary,
                 borderRadius: 8,
                 overflow: 'hidden' as const,
             };
-        case 'bordered':
-            return {
-                borderBottomWidth: isLast ? 0 : 1,
-                borderBottomStyle: 'solid' as const,
-                borderBottomColor: theme.colors.border.primary,
-            };
-        default:
-            return {};
-    }
-}
+        }
 
-/**
- * Create dynamic item styles
- */
-function createItemStyles(theme: Theme) {
-    return ({ type = 'standard', isLast = false }: ItemDynamicProps) => {
-        const typeStyles = getItemTypeStyles(theme, type, isLast);
         return {
             display: 'flex' as const,
             flexDirection: 'column' as const,
             ...typeStyles,
-            variants: {
-                size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-                expanded: { true: {}, false: {} },
-                disabled: { true: {}, false: {} },
-            },
         } as const;
-    };
-}
+    },
 
-/**
- * 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,
-    }));
-}
-
-// Helper functions to create static styles wrapped in dynamic functions
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        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: {} },
-            // 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),
-        },
-    });
-}
-
-function createHeaderStyles(theme: Theme) {
-    return () => ({
+    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%' 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: createHeaderSizeVariants(theme),
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: {
-                true: {
-                    fontWeight: '600' as const,
-                },
-                false: {
-                    fontWeight: '500' as const,
-                },
+            size: {
+                fontSize: theme.sizes.$accordion.headerFontSize,
+                padding: theme.sizes.$accordion.headerPadding,
             },
-            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,
+            border: 'none',
+            outline: 'none',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            transition: 'background-color 0.2s ease',
+            _hover: disabled ? {} : { backgroundColor: theme.colors.surface.secondary },
         },
-    });
-}
+    }),
 
-function createTitleStyles() {
-    return () => ({
+    title: (_props: AccordionDynamicProps) => ({
         flex: 1,
-        variants: {
-            size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: { true: {}, false: {} },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-        },
-    });
-}
+    }),
 
-function createIconStyles(theme: Theme) {
-    return () => ({
+    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: createIconSizeVariants(theme),
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: {
-                true: {
-                    _web: {
-                        transform: 'rotate(180deg)' as const,
-                    },
-                },
-                false: {
-                    _web: {
-                        transform: 'rotate(0deg)' as const,
-                    },
-                },
+            size: {
+                width: theme.sizes.$accordion.iconSize,
+                height: theme.sizes.$accordion.iconSize,
             },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
         },
         _web: {
-            transition: 'transform 0.2s ease' as const,
+            transition: 'transform 0.2s ease',
+            transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
         },
-    });
-}
+    }),
 
-function createContentStyles() {
-    return () => ({
+    content: ({ expanded = false }: AccordionDynamicProps) => ({
         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: {} },
-        },
+        maxHeight: expanded ? 2000 : 0,
         _web: {
-            transition: 'height 0.15s ease, padding 0.3s ease' as const,
+            transition: 'height 0.15s ease, padding 0.3s ease',
         },
-    });
-}
+    }),
 
-function createContentInnerStyles(theme: Theme) {
-    return () => ({
+    contentInner: (_props: AccordionDynamicProps) => ({
         color: theme.colors.text.secondary,
         variants: {
-            size: createContentInnerSizeVariants(theme),
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: { true: {}, false: {} },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
+            size: {
+                fontSize: theme.sizes.$accordion.headerFontSize,
+                padding: theme.sizes.$accordion.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) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Accordion', theme, {
-        container: createContainerStyles(theme),
-        item: createItemStyles(theme),
-        header: createHeaderStyles(theme),
-        content: createContentStyles(),
-        icon: createIconStyles(theme),
-    });
-
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        title: createTitleStyles()(),
-        contentInner: createContentInnerStyles(theme)(),
-    };
-});
+    }),
+}));

package/src/Accordion/Accordion.web.tsx

@@ -3,7 +3,6 @@ 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';
 import { getWebAriaProps, generateAccessibilityId, ACCORDION_KEYS } from '../utils/accessibility';
 
 interface AccordionItemProps {
@@ -33,7 +32,6 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 }) => {
   const contentInnerRef = useRef<HTMLDivElement>(null);
   const [contentHeight, setContentHeight] = useState(0);
-  const chevronIconPath = resolveIconPath('chevron-down');
 
   // Apply item-specific variants (for size, expanded, disabled)
   accordionStyles.useVariants({
@@ -86,7 +84,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
         <span {...iconProps}>
           <IconSvg
             style={{ width: 12, height: 12 }}
-            path={chevronIconPath}
+            name="chevron-down"
             aria-label="chevron-down"
           />
         </span>

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

package/src/ActivityIndicator/ActivityIndicator.styles.tsx

@@ -1,52 +1,56 @@
+/**
+ * ActivityIndicator styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
-type ActivityIndicatorSize = Size;
-type ActivityIndicatorIntent = Intent;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type ActivityIndicatorVariants = {
-    size: ActivityIndicatorSize;
-    intent: ActivityIndicatorIntent;
-    animating: boolean;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedActivityIndicatorStyles = StylesheetStyles<keyof ActivityIndicatorVariants>;
+export type ActivityIndicatorDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    animating?: boolean;
+};
 
-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,
-    }));
-}
+/**
+ * ActivityIndicator styles with size and intent handling.
+ */
+export const activityIndicatorStyles = defineStyle('ActivityIndicator', (theme: Theme) => ({
+    container: (_props: ActivityIndicatorDynamicProps) => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        variants: {
+            // $iterator expands for each activityIndicator size
+            size: {
+                width: theme.sizes.$activityIndicator.size,
+                height: theme.sizes.$activityIndicator.size,
+            },
+            animating: {
+                true: { opacity: 1 },
+                false: { opacity: 0 },
+            },
+        },
+    }),
 
-function getSpinnerColor(theme: Theme, intent: ActivityIndicatorIntent) {
-    return theme.intents[intent].primary;
-}
+    spinner: ({ intent = 'primary' }: ActivityIndicatorDynamicProps) => {
+        // Inline color access for Unistyles to trace
+        const color = theme.intents[intent].primary;
 
-function createSpinnerStyles(theme: Theme) {
-    return ({ intent }: Partial<ActivityIndicatorVariants>) => {
-        const color = getSpinnerColor(theme, intent);
         return {
             borderRadius: 9999,
-            borderStyle: 'solid',
+            borderStyle: 'solid' as const,
             color,
             variants: {
-                size: createSpinnerSizeVariants(theme),
+                size: {
+                    width: theme.sizes.$activityIndicator.size,
+                    height: theme.sizes.$activityIndicator.size,
+                    borderWidth: theme.sizes.$activityIndicator.borderWidth,
+                },
                 animating: {
                     true: {},
                     false: {},
@@ -60,39 +64,5 @@ function createSpinnerStyles(theme: Theme) {
                 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
-    const extended = applyExtensions('ActivityIndicator', theme, {
-        container: createContainerStyles(theme),
-        spinner: createSpinnerStyles(theme),
-    });
-
-    return {
-        ...extended,
-    };
-});
+    },
+}));