@idealyst/components 1.1.5 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -25,6 +25,11 @@
       "require": "./src/index.ts",
       "types": "./src/index.ts"
     },
+    "./extensions": {
+      "import": "./src/extensions/index.ts",
+      "require": "./src/extensions/index.ts",
+      "types": "./src/extensions/index.ts"
+    },
     "./utils": {
       "import": "./src/utils/index.ts",
       "require": "./src/utils/index.ts",
@@ -51,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.1.5",
+    "@idealyst/theme": "^1.1.7",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -101,7 +106,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.1.5",
+    "@idealyst/theme": "^1.1.7",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Accordion/Accordion.native.tsx

@@ -30,15 +30,19 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   const iconRotation = useSharedValue(0);
   const [measuredHeight, setMeasuredHeight] = useState(0);
 
-  // Apply item-specific variants
+  // Apply item-specific variants (for size, expanded, disabled)
   accordionStyles.useVariants({
-    type,
-    isLast,
     size,
     expanded: isExpanded,
     disabled: Boolean(item.disabled),
   });
 
+  // Get dynamic styles
+  const itemStyle = (accordionStyles.item as any)({ type, isLast });
+  const headerStyle = (accordionStyles.header as any)({});
+  const iconStyle = (accordionStyles.icon as any)({});
+  const contentStyle = (accordionStyles.content as any)({});
+
   // Animate height and icon rotation when expanded state changes
   useEffect(() => {
     contentHeight.value = withTiming(
@@ -74,9 +78,9 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   };
 
   return (
-    <View style={accordionStyles.item} testID={testID}>
+    <View style={itemStyle} testID={testID}>
       <TouchableOpacity
-        style={accordionStyles.header}
+        style={headerStyle}
         onPress={onToggle}
         disabled={item.disabled}
         activeOpacity={0.7}
@@ -85,15 +89,15 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
         accessibilityState={{ expanded: isExpanded, disabled: item.disabled }}
       >
         <View style={accordionStyles.title}>
-          <Text style={accordionStyles.header}>
+          <Text style={headerStyle}>
             {item.title}
           </Text>
         </View>
-        <Animated.View style={[accordionStyles.icon, animatedIconStyle]}>
+        <Animated.View style={[iconStyle, animatedIconStyle]}>
           <MaterialCommunityIcons
             name="chevron-down"
             size={20}
-            style={accordionStyles.icon}
+            style={iconStyle}
           />
         </Animated.View>
       </TouchableOpacity>
@@ -196,8 +200,10 @@ const Accordion = forwardRef<View, AccordionProps>(({
     });
   };
 
+  const containerStyle = (accordionStyles.container as any)({});
+
   return (
-    <View ref={ref} nativeID={id} style={[accordionStyles.container, style]} testID={testID} {...nativeA11yProps}>
+    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
       {items.map((item, index) => (
         <AccordionItem
           key={item.id}

package/src/Accordion/Accordion.styles.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, CompoundVariants, Size} from '@idealyst/theme';
+import { Theme, StylesheetStyles, Size } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
 import {
   buildGapVariants,
@@ -11,6 +11,7 @@ import {
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
 import { AccordionType } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type AccordionSize = Size;
 
@@ -24,6 +25,11 @@ type AccordionVariants = {
 
 export type ExpandedAccordionStyles = StylesheetStyles<keyof AccordionVariants>;
 
+type ItemDynamicProps = {
+    type?: AccordionType;
+    isLast?: boolean;
+};
+
 /**
  * Create type variants for container
  */
@@ -47,50 +53,52 @@ function createContainerTypeVariants(theme: Theme) {
 }
 
 /**
- * Create type variants for items
+ * Get item styles based on type and isLast
  */
-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;
+function getItemTypeStyles(theme: Theme, type: AccordionType, isLast: boolean) {
+    switch (type) {
+        case 'standard':
+            return {
+                borderBottomWidth: isLast ? 0 : 1,
+                borderBottomStyle: 'solid' as const,
+                borderBottomColor: theme.colors.border.primary,
+            };
+        case 'separated':
+            return {
+                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 compound variants for item (type + isLast)
+ * Create dynamic item styles
  */
-function createItemCompoundVariants(): CompoundVariants<keyof AccordionVariants> {
-    return [
-        {
-            type: 'standard',
-            isLast: true,
-            styles: {
-                borderBottomWidth: 0,
-            },
-        },
-        {
-            type: 'bordered',
-            isLast: true,
-            styles: {
-                borderBottomWidth: 0,
+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;
+    };
 }
 
 /**
@@ -124,154 +132,171 @@ function createContentInnerSizeVariants(theme: Theme) {
     }));
 }
 
-// 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: {} },
-                // 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),
-            },
+// 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),
         },
-        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: {},
+    });
+}
+
+function createHeaderStyles(theme: Theme) {
+    return () => ({
+        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,
                 },
             },
-            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,
                     },
                 },
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed' as const,
-                        },
-                    },
-                    false: {
-                        _web: {
-                            cursor: 'pointer' as const,
-                            _hover: {
-                                backgroundColor: theme.colors.surface.secondary,
-                            },
+                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,
             },
+            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: {} },
-            },
+    });
+}
+
+function createTitleStyles() {
+    return () => ({
+        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,
-                        },
+    });
+}
+
+function createIconStyles(theme: Theme) {
+    return () => ({
+        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,
-                        },
+                },
+                false: {
+                    _web: {
+                        transform: 'rotate(0deg)' as const,
                     },
                 },
-                disabled: { true: {}, false: {} },
-                isLast: { true: {}, false: {} },
-            },
-            _web: {
-                transition: 'transform 0.2s ease' as const,
             },
+            disabled: { true: {}, false: {} },
+            isLast: { true: {}, false: {} },
         },
-        content: {
-            overflow: 'hidden' as const,
-            variants: {
-                size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-                type: { standard: {}, separated: {}, bordered: {} },
-                expanded: {
-                    true: {
-                        maxHeight: 2000,
-                    },
-                    false: {
-                        maxHeight: 0,
-                    },
+        _web: {
+            transition: 'transform 0.2s ease' as const,
+        },
+    });
+}
+
+function createContentStyles() {
+    return () => ({
+        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,
             },
+            disabled: { true: {}, false: {} },
+            isLast: { true: {}, false: {} },
         },
-        contentInner: {
-            color: theme.colors.text.secondary,
-            variants: {
-                size: createContentInnerSizeVariants(theme),
-                type: { standard: {}, separated: {}, bordered: {} },
-                expanded: { true: {}, false: {} },
-                disabled: { true: {}, false: {} },
-                isLast: { true: {}, false: {} },
-            },
+        _web: {
+            transition: 'height 0.15s ease, padding 0.3s ease' as const,
+        },
+    });
+}
+
+function createContentInnerStyles(theme: Theme) {
+    return () => ({
+        color: theme.colors.text.secondary,
+        variants: {
+            size: createContentInnerSizeVariants(theme),
+            type: { standard: {}, separated: {}, bordered: {} },
+            expanded: { true: {}, false: {} },
+            disabled: { true: {}, false: {} },
+            isLast: { true: {}, false: {} },
         },
+    });
+}
+
+// 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

@@ -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.tsx

@@ -1,6 +1,7 @@
 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;
@@ -62,14 +63,11 @@ function createSpinnerStyles(theme: Theme) {
     }
 }
 
-// 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) => {
-  return {
-    container: {
-        alignItems: 'center',
-        justifyContent: 'center',
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         variants: {
             size: createContainerSizeVariants(theme),
             animating: {
@@ -81,7 +79,20 @@ export const activityIndicatorStyles = StyleSheet.create((theme: Theme) => {
                 },
             },
         },
-    },
-    spinner: createSpinnerStyles(theme),
-  };
+    });
+}
+
+// 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,
+    };
 });