@idealyst/components 1.1.6 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "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.6",
+    "@idealyst/theme": "^1.1.8",
     "@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.6",
+    "@idealyst/theme": "^1.1.8",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Accordion/Accordion.native.tsx

@@ -30,15 +30,21 @@ 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 - call as functions to get theme-reactive 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)({});
+  const titleStyle = (accordionStyles.title as any)({});
+  const contentInnerStyle = (contentInnerStyle as any)({});
+
   // Animate height and icon rotation when expanded state changes
   useEffect(() => {
     contentHeight.value = withTiming(
@@ -74,9 +80,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}
@@ -84,16 +90,16 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
         accessibilityLabel={item.title}
         accessibilityState={{ expanded: isExpanded, disabled: item.disabled }}
       >
-        <View style={accordionStyles.title}>
-          <Text style={accordionStyles.header}>
+        <View style={titleStyle}>
+          <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>
@@ -103,9 +109,9 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
         style={{ position: 'absolute', opacity: 0, zIndex: -1 }}
         onLayout={handleContentLayout}
       >
-        <View style={accordionStyles.contentInner}>
+        <View style={contentInnerStyle}>
           {typeof item.content === 'string' ? (
-            <Text style={accordionStyles.contentInner}>
+            <Text style={contentInnerStyle}>
               {item.content}
             </Text>
           ) : (
@@ -116,9 +122,9 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 
       {/* Animated visible content */}
       <Animated.View style={animatedContentStyle}>
-        <View style={accordionStyles.contentInner}>
+        <View style={contentInnerStyle}>
           {typeof item.content === 'string' ? (
-            <Text style={accordionStyles.contentInner}>
+            <Text style={contentInnerStyle}>
               {item.content}
             </Text>
           ) : (
@@ -196,8 +202,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.old.tsx

@@ -0,0 +1,298 @@
+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';
+
+type AccordionSize = Size;
+
+type AccordionVariants = {
+    size: AccordionSize;
+    type: AccordionType;
+    expanded: boolean;
+    disabled: boolean;
+    isLast: boolean;
+}
+
+export type ExpandedAccordionStyles = StylesheetStyles<keyof AccordionVariants>;
+
+type ItemDynamicProps = {
+    type?: AccordionType;
+    isLast?: boolean;
+};
+
+/**
+ * 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;
+}
+
+/**
+ * Get item styles based on type and isLast
+ */
+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 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 () => ({
+        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,
+        },
+    });
+}
+
+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: {} },
+        },
+    });
+}
+
+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,
+                    },
+                },
+            },
+            disabled: { true: {}, false: {} },
+            isLast: { true: {}, false: {} },
+        },
+        _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,
+        },
+    });
+}
+
+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
+
+    return applyExtensions('Accordion', theme, {container: createContainerStyles(theme),
+        item: createItemStyles(theme),
+        header: createHeaderStyles(theme),
+        content: createContentStyles(),
+        icon: createIconStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        title: createTitleStyles()(),
+        contentInner: createContentInnerStyles(theme)()});
+});