@idealyst/theme 1.2.30 → 1.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/theme",
-  "version": "1.2.30",
+  "version": "1.2.32",
   "description": "Theming system for Idealyst Framework",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -63,7 +63,7 @@
     "publish:npm": "npm publish"
   },
   "dependencies": {
-    "@idealyst/tooling": "^1.2.3"
+    "@idealyst/tooling": "^1.2.30"
   },
   "peerDependencies": {
     "react-native-unistyles": ">=3.0.0"

package/src/babel/plugin.js

@@ -210,6 +210,14 @@ function expandIterators(t, callback, themeParam, keys, verbose, expandedVariant
             }
         }
 
+        // Look for compoundVariants: [ { type: 'filled', selected: true, styles: { ... } }, ... ]
+        if (t.isObjectProperty(node) && t.isIdentifier(node.key, { name: 'compoundVariants' })) {
+            if (t.isArrayExpression(node.value)) {
+                const expanded = expandCompoundVariantsArray(t, node.value, themeParam, keys, verbose, expandedVariants);
+                return t.objectProperty(node.key, expanded);
+            }
+        }
+
         if (t.isObjectExpression(node)) {
             return t.objectExpression(
                 node.properties.map(prop => processNode(prop, depth + 1))
@@ -352,6 +360,112 @@ function expandVariantsObject(t, variantsObj, themeParam, keys, verbose, expande
     return t.objectExpression(newProperties);
 }
 
+/**
+ * Expand $iterator patterns in compoundVariants arrays.
+ *
+ * Input:
+ *   compoundVariants: [
+ *     { type: 'filled', selected: true, styles: { backgroundColor: theme.$intents.contrast } }
+ *   ]
+ *
+ * Output (for intents = ['primary', 'success', 'danger', ...]):
+ *   compoundVariants: [
+ *     { type: 'filled', selected: true, intent: 'primary', styles: { backgroundColor: theme.intents.primary.contrast } },
+ *     { type: 'filled', selected: true, intent: 'success', styles: { backgroundColor: theme.intents.success.contrast } },
+ *     { type: 'filled', selected: true, intent: 'danger', styles: { backgroundColor: theme.intents.danger.contrast } },
+ *     ...
+ *   ]
+ */
+function expandCompoundVariantsArray(t, arrayNode, themeParam, keys, verbose, expandedVariants) {
+    const newElements = [];
+
+    verbose(`    expandCompoundVariantsArray: processing ${arrayNode.elements?.length || 0} compound variants`);
+
+    for (const element of arrayNode.elements) {
+        if (!t.isObjectExpression(element)) {
+            newElements.push(element);
+            continue;
+        }
+
+        // Find the 'styles' property in this compound variant entry
+        let stylesProperty = null;
+        const otherProperties = [];
+
+        for (const prop of element.properties) {
+            if (t.isObjectProperty(prop)) {
+                const keyName = t.isIdentifier(prop.key) ? prop.key.name :
+                               t.isStringLiteral(prop.key) ? prop.key.value : null;
+                if (keyName === 'styles') {
+                    stylesProperty = prop;
+                } else {
+                    otherProperties.push(prop);
+                }
+            } else {
+                otherProperties.push(prop);
+            }
+        }
+
+        if (!stylesProperty) {
+            // No styles property, keep as-is
+            newElements.push(element);
+            continue;
+        }
+
+        // Check if the styles object contains $iterator patterns
+        const iteratorInfo = findIteratorPattern(t, stylesProperty.value, themeParam);
+
+        if (!iteratorInfo) {
+            // No $iterator pattern, keep as-is
+            newElements.push(element);
+            continue;
+        }
+
+        verbose(`      Found $iterator in compoundVariant styles: ${iteratorInfo.type}`);
+
+        // Get keys to expand
+        let keysToExpand = [];
+        let variantKeyName = 'intent'; // Default for intents
+
+        if (iteratorInfo.type === 'intents') {
+            keysToExpand = keys?.intents || [];
+            variantKeyName = 'intent';
+        } else if (iteratorInfo.type === 'typography') {
+            keysToExpand = keys?.typography || [];
+            variantKeyName = 'typography';
+        } else if (iteratorInfo.type === 'sizes' && iteratorInfo.componentName) {
+            keysToExpand = keys?.sizes?.[iteratorInfo.componentName] || [];
+            variantKeyName = 'size';
+        }
+
+        if (keysToExpand.length === 0) {
+            // No keys to expand, keep as-is
+            newElements.push(element);
+            continue;
+        }
+
+        verbose(`      Expanding compoundVariant for ${keysToExpand.length} ${variantKeyName} keys`);
+
+        // Expand this compound variant for each key
+        for (const key of keysToExpand) {
+            // Replace $iterator refs in the styles
+            const expandedStyles = replaceIteratorRefs(t, stylesProperty.value, themeParam, iteratorInfo, key);
+
+            // Create new compound variant entry with the variant key added as a condition
+            const newProps = [
+                ...otherProperties.map(p => t.cloneDeep(p)),
+                t.objectProperty(t.identifier(variantKeyName), t.stringLiteral(key)),
+                t.objectProperty(t.identifier('styles'), expandedStyles),
+            ];
+
+            newElements.push(t.objectExpression(newProps));
+        }
+
+        expandedVariants.push({ variant: 'compoundVariants', iterator: iteratorInfo.type });
+    }
+
+    return t.arrayExpression(newElements);
+}
+
 function findIteratorPattern(t, node, themeParam, debugLog = () => {}) {
     let result = null;
 
@@ -578,8 +692,6 @@ module.exports = function idealystStylesPlugin({ types: t }) {
         }
     }
 
-    // Plugin initialization logged in debug mode only
-
     return {
         name: 'idealyst-styles',
 

package/src/babel/theme-analyzer.js

@@ -16,6 +16,31 @@ const fs = require('fs');
 let themeKeys = null;
 let themeLoadAttempted = false;
 
+// Global aliases configuration (set via plugin options)
+let packageAliases = {};
+
+/**
+ * Resolve an import source using configured aliases (static version for use outside AST traversal).
+ * Returns the resolved path or null if no alias matches.
+ */
+function resolveWithAliasesStatic(source, fromDir) {
+    for (const [aliasPrefix, aliasPath] of Object.entries(packageAliases)) {
+        if (source === aliasPrefix || source.startsWith(aliasPrefix + '/')) {
+            // Replace the alias prefix with the actual path
+            const remainder = source.slice(aliasPrefix.length);
+            let resolved = aliasPath + remainder;
+
+            // If aliasPath is relative, resolve from fromDir
+            if (!nodePath.isAbsolute(resolved)) {
+                resolved = nodePath.resolve(fromDir, resolved);
+            }
+
+            return resolved;
+        }
+    }
+    return null;
+}
+
 /**
  * Extract theme keys by statically analyzing the theme file's AST.
  */
@@ -99,6 +124,29 @@ function extractThemeKeysFromAST(themeFilePath, babelTypes, verboseMode) {
         return { calls, baseThemeVar: null };
     }
 
+    /**
+     * Resolve an import source using configured aliases.
+     * Returns the resolved path or null if no alias matches.
+     */
+    function resolveWithAliases(source, fromDir) {
+        for (const [aliasPrefix, aliasPath] of Object.entries(packageAliases)) {
+            if (source === aliasPrefix || source.startsWith(aliasPrefix + '/')) {
+                // Replace the alias prefix with the actual path
+                const remainder = source.slice(aliasPrefix.length);
+                let resolved = aliasPath + remainder;
+
+                // If aliasPath is relative, resolve from fromDir
+                if (!nodePath.isAbsolute(resolved)) {
+                    resolved = nodePath.resolve(fromDir, resolved);
+                }
+
+                log('Resolved alias:', source, '->', resolved);
+                return resolved;
+            }
+        }
+        return null;
+    }
+
     /**
      * Resolve and analyze a base theme from an import.
      */
@@ -122,42 +170,75 @@ function extractThemeKeysFromAST(themeFilePath, babelTypes, verboseMode) {
             } else {
                 const packageDir = nodePath.dirname(themeFilePath);
 
-                // Determine which theme file to look for based on variable name
-                const themeFileName = varName.includes('dark') ? 'darkTheme.ts' : 'lightTheme.ts';
-                let possiblePaths = [];
-
-                if (importInfo.source === '@idealyst/theme') {
-                    possiblePaths = [
-                        // Symlinked packages at root level
-                        `/idealyst-packages/theme/src/${themeFileName}`,
-                        // Standard node_modules
-                        nodePath.resolve(packageDir, `node_modules/@idealyst/theme/src/${themeFileName}`),
-                        // Monorepo structure - walk up to find packages dir
-                        nodePath.resolve(packageDir, `../theme/src/${themeFileName}`),
-                        nodePath.resolve(packageDir, `../../theme/src/${themeFileName}`),
-                        nodePath.resolve(packageDir, `../../../theme/src/${themeFileName}`),
-                        nodePath.resolve(packageDir, `../../packages/theme/src/${themeFileName}`),
-                        nodePath.resolve(packageDir, `../../../packages/theme/src/${themeFileName}`),
-                        // This plugin's own package location
-                        nodePath.resolve(__dirname, `../${themeFileName}`),
+                // First, try to resolve using configured aliases
+                const aliasResolved = resolveWithAliases(importInfo.source, packageDir);
+                if (aliasResolved) {
+                    // Determine which theme file to look for based on variable name
+                    const themeFileName = varName.includes('dark') ? 'darkTheme.ts' : 'lightTheme.ts';
+
+                    // Check if alias points to a directory or a specific file
+                    let possiblePaths = [
+                        aliasResolved,
+                        nodePath.join(aliasResolved, 'src', themeFileName),
+                        nodePath.join(aliasResolved, themeFileName),
                     ];
 
-                    log('Looking for base theme in:', possiblePaths);
+                    // Add .ts extension if needed
+                    possiblePaths = possiblePaths.flatMap(p => {
+                        if (p.endsWith('.ts') || p.endsWith('.tsx')) return [p];
+                        return [p, p + '.ts', p + '.tsx'];
+                    });
+
+                    log('Looking for aliased theme in:', possiblePaths);
 
                     for (const p of possiblePaths) {
                         if (fs.existsSync(p)) {
                             baseThemePath = p;
-                            log('Found base theme at:', p);
+                            log('Found aliased theme at:', p);
                             break;
                         }
                     }
                 }
 
+                // If no alias match, use default resolution for @idealyst/theme
                 if (!baseThemePath) {
-                    log('Could not resolve base theme path for:', importInfo.source);
-                    if (possiblePaths.length > 0) {
-                        log('Searched paths:', possiblePaths);
+                    // Determine which theme file to look for based on variable name
+                    const themeFileName = varName.includes('dark') ? 'darkTheme.ts' : 'lightTheme.ts';
+                    let possiblePaths = [];
+
+                    if (importInfo.source === '@idealyst/theme') {
+                        possiblePaths = [
+                            // Symlinked packages at root level
+                            `/idealyst-packages/theme/src/${themeFileName}`,
+                            // Standard node_modules
+                            nodePath.resolve(packageDir, `node_modules/@idealyst/theme/src/${themeFileName}`),
+                            // Monorepo structure - walk up to find packages dir
+                            nodePath.resolve(packageDir, `../theme/src/${themeFileName}`),
+                            nodePath.resolve(packageDir, `../../theme/src/${themeFileName}`),
+                            nodePath.resolve(packageDir, `../../../theme/src/${themeFileName}`),
+                            nodePath.resolve(packageDir, `../../packages/theme/src/${themeFileName}`),
+                            nodePath.resolve(packageDir, `../../../packages/theme/src/${themeFileName}`),
+                            nodePath.resolve(packageDir, `../../../../packages/theme/src/${themeFileName}`),
+                            nodePath.resolve(packageDir, `../../../../../packages/theme/src/${themeFileName}`),
+                            nodePath.resolve(packageDir, `../../../../../../packages/theme/src/${themeFileName}`),
+                            // This plugin's own package location
+                            nodePath.resolve(__dirname, `../${themeFileName}`),
+                        ];
+
+                        log('Looking for base theme in:', possiblePaths);
+
+                        for (const p of possiblePaths) {
+                            if (fs.existsSync(p)) {
+                                baseThemePath = p;
+                                log('Found base theme at:', p);
+                                break;
+                            }
+                        }
                     }
+                }
+
+                if (!baseThemePath) {
+                    log('Could not resolve base theme path for:', importInfo.source);
                     return;
                 }
             }
@@ -366,11 +447,23 @@ function extractThemeKeysFromAST(themeFilePath, babelTypes, verboseMode) {
  *
  * REQUIRED Options:
  * - themePath: Path to the consumer's theme file (e.g., './src/theme/styles.ts')
+ *
+ * OPTIONAL Options:
+ * - aliases: Object mapping package prefixes to paths for resolution
+ *   Example: { '@idealyst/theme': '/path/to/packages/theme' }
  */
 function loadThemeKeys(opts, rootDir, babelTypes, verboseMode) {
     if (themeLoadAttempted) return themeKeys;
     themeLoadAttempted = true;
 
+    // Set up package aliases for resolution
+    if (opts.aliases && typeof opts.aliases === 'object') {
+        packageAliases = opts.aliases;
+        if (verboseMode) {
+            console.log('[idealyst-plugin] Configured aliases:', packageAliases);
+        }
+    }
+
     const themePath = opts.themePath;
 
     if (!themePath) {
@@ -381,9 +474,16 @@ function loadThemeKeys(opts, rootDir, babelTypes, verboseMode) {
         );
     }
 
-    const resolvedPath = themePath.startsWith('.')
-        ? nodePath.resolve(rootDir, themePath)
-        : require.resolve(themePath, { paths: [rootDir] });
+    // First try to resolve using aliases
+    let resolvedPath;
+    const aliasResolved = resolveWithAliasesStatic(themePath, rootDir);
+    if (aliasResolved && fs.existsSync(aliasResolved)) {
+        resolvedPath = aliasResolved;
+    } else {
+        resolvedPath = themePath.startsWith('.')
+            ? nodePath.resolve(rootDir, themePath)
+            : require.resolve(themePath, { paths: [rootDir] });
+    }
 
     if (verboseMode) {
         console.log('[idealyst-plugin] Analyzing theme file:', resolvedPath);

package/src/builder.ts

@@ -7,6 +7,7 @@ import {
     Typography,
     TypographyValue,
     ButtonSizeValue,
+    IconButtonSizeValue,
     ChipSizeValue,
     BadgeSizeValue,
     IconSizeValue,
@@ -56,6 +57,7 @@ export type BuiltTheme<
     };
     sizes: {
         button: Record<TSize, ButtonSizeValue>;
+        iconButton: Record<TSize, IconButtonSizeValue>;
         chip: Record<TSize, ChipSizeValue>;
         badge: Record<TSize, BadgeSizeValue>;
         icon: Record<TSize, IconSizeValue>;
@@ -248,6 +250,7 @@ export class ThemeBuilder<
      */
     setSizes<S extends string>(sizes: {
         button: Record<S, ButtonSizeValue>;
+        iconButton: Record<S, IconButtonSizeValue>;
         chip: Record<S, ChipSizeValue>;
         badge: Record<S, BadgeSizeValue>;
         icon: Record<S, IconSizeValue>;

package/src/lightTheme.ts

@@ -120,6 +120,13 @@ export const lightTheme = createTheme()
             lg: { paddingVertical: 10, paddingHorizontal: 20, minHeight: 48, fontSize: 18, lineHeight: 28, iconSize: 18 },
             xl: { paddingVertical: 12, paddingHorizontal: 24, minHeight: 56, fontSize: 20, lineHeight: 32, iconSize: 20 },
         },
+        iconButton: {
+            xs: { size: 24, iconSize: 12 },
+            sm: { size: 32, iconSize: 14 },
+            md: { size: 40, iconSize: 16 },
+            lg: { size: 48, iconSize: 18 },
+            xl: { size: 56, iconSize: 20 },
+        },
         chip: {
             xs: { paddingVertical: 1, paddingHorizontal: 6, minHeight: 16, borderRadius: 999, fontSize: 10, lineHeight: 12, iconSize: 10 },
             sm: { paddingVertical: 2, paddingHorizontal: 8, minHeight: 20, borderRadius: 999, fontSize: 11, lineHeight: 14, iconSize: 12 },

package/src/theme/extensions.ts

@@ -22,6 +22,7 @@ export interface DefaultTheme {
         chip: Record<string, ChipSizeValue>;
         badge: Record<string, BadgeSizeValue>;
         icon: Record<string, IconSizeValue>;
+        iconButton: Record<string, IconSizeValue>;
         input: Record<string, InputSizeValue>;
         radioButton: Record<string, RadioButtonSizeValue>;
         select: Record<string, SelectSizeValue>;

package/src/theme/structures.ts

@@ -98,6 +98,11 @@ export type ButtonSizeValue = {
     iconSize: SizeValue;
 };
 
+export type IconButtonSizeValue = {
+    size: SizeValue;
+    iconSize: SizeValue;
+};
+
 export type ChipSizeValue = {
     paddingVertical: SizeValue;
     paddingHorizontal: SizeValue;