@idealyst/theme 1.2.29 → 1.2.31

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,
@@ -20,6 +21,7 @@ import {
     ProgressSizeValue,
     AccordionSizeValue,
     ActivityIndicatorSizeValue,
+    AlertSizeValue,
     BreadcrumbSizeValue,
     ListSizeValue,
     MenuSizeValue,
@@ -55,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>;
@@ -68,6 +71,7 @@ export type BuiltTheme<
         progress: Record<TSize, ProgressSizeValue>;
         accordion: Record<TSize, AccordionSizeValue>;
         activityIndicator: Record<TSize, ActivityIndicatorSizeValue>;
+        alert: Record<TSize, AlertSizeValue>;
         breadcrumb: Record<TSize, BreadcrumbSizeValue>;
         list: Record<TSize, ListSizeValue>;
         menu: Record<TSize, MenuSizeValue>;
@@ -246,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>;
@@ -259,6 +264,7 @@ export class ThemeBuilder<
         progress: Record<S, ProgressSizeValue>;
         accordion: Record<S, AccordionSizeValue>;
         activityIndicator: Record<S, ActivityIndicatorSizeValue>;
+        alert: Record<S, AlertSizeValue>;
         breadcrumb: Record<S, BreadcrumbSizeValue>;
         list: Record<S, ListSizeValue>;
         menu: Record<S, MenuSizeValue>;

package/src/components/CLAUDE.md

@@ -141,7 +141,7 @@ function createSizeVariants(theme: Theme) {
 
 #### Colors
 - **Intents**: `theme.intents[intent].primary`, `.contrast`, `.light`, `.dark`
-  - Available intents: `primary`, `success`, `error`, `warning`, `neutral`, `info`
+  - Available intents: `primary`, `success`, `danger`, `warning`, `neutral`, `info`
 - **Surface**: `theme.colors.surface.primary`, `.secondary`, `.tertiary`, `.inverse`, etc.
 - **Text**: `theme.colors.text.primary`, `.secondary`, `.tertiary`, `.inverse`, etc.
 - **Border**: `theme.colors.border.primary`, `.secondary`, `.tertiary`, `.disabled`

package/src/config/generator.ts

@@ -636,7 +636,7 @@ function generateInputStyles(theme: Theme, extensions?: ComponentExtensions): Re
             },
             error: {
                 true: {
-                    borderColor: themeRef('intents.error.primary'),
+                    borderColor: themeRef('intents.danger.primary'),
                 },
                 false: {},
             },
@@ -666,7 +666,7 @@ function generateInputStyles(theme: Theme, extensions?: ComponentExtensions): Re
         fontSize: 12,
         variants: {
             error: {
-                true: { color: themeRef('intents.error.primary') },
+                true: { color: themeRef('intents.danger.primary') },
                 false: {},
             },
         },

package/src/darkTheme.ts

@@ -20,7 +20,7 @@ export const darkTheme = createTheme()
         light: '#6ee7b7',
         dark: '#047857',
     })
-    .addIntent('error', {
+    .addIntent('danger', {
         primary: '#f87171',
         contrast: '#0f172a',
         light: '#fca5a5',

package/src/index.ts

@@ -23,4 +23,8 @@ export * from './componentStyles';
 // Responsive utilities
 export * from './responsive';
 export * from './breakpoints';
-export * from './useResponsiveStyle';
+export * from './useResponsiveStyle';
+
+// Animation tokens and utilities
+// Note: Use '@idealyst/theme/animation' for full animation API
+export { durations, easings, presets } from './animation/tokens';

package/src/lightTheme.ts

@@ -19,7 +19,7 @@ export const lightTheme = createTheme()
         light: '#a7f3d0',
         dark: '#165e29',
     })
-    .addIntent('error', {
+    .addIntent('danger', {
         primary: '#ef4444',
         contrast: '#ffffff',
         light: '#fca5a1',
@@ -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 },
@@ -211,6 +218,13 @@ export const lightTheme = createTheme()
             lg: { size: 48, borderWidth: 4 },
             xl: { size: 64, borderWidth: 5 },
         },
+        alert: {
+            xs: { padding: 8, gap: 6, borderRadius: 4, titleFontSize: 12, titleLineHeight: 16, messageFontSize: 11, messageLineHeight: 14, iconSize: 16, closeIconSize: 12 },
+            sm: { padding: 12, gap: 8, borderRadius: 6, titleFontSize: 14, titleLineHeight: 20, messageFontSize: 12, messageLineHeight: 16, iconSize: 20, closeIconSize: 14 },
+            md: { padding: 16, gap: 10, borderRadius: 8, titleFontSize: 16, titleLineHeight: 24, messageFontSize: 14, messageLineHeight: 20, iconSize: 24, closeIconSize: 16 },
+            lg: { padding: 20, gap: 12, borderRadius: 10, titleFontSize: 18, titleLineHeight: 28, messageFontSize: 16, messageLineHeight: 24, iconSize: 28, closeIconSize: 18 },
+            xl: { padding: 24, gap: 14, borderRadius: 12, titleFontSize: 20, titleLineHeight: 32, messageFontSize: 18, messageLineHeight: 28, iconSize: 32, closeIconSize: 20 },
+        },
         breadcrumb: {
             xs: { fontSize: 10, lineHeight: 14, iconSize: 12 },
             sm: { fontSize: 12, lineHeight: 16, iconSize: 14 },

package/src/styleBuilder.ts

@@ -54,6 +54,7 @@ export type ComponentName =
   | 'Table'
   | 'Text'
   | 'TextArea'
+  | 'TextInput'
   | 'TimePicker'
   | 'Tooltip'
   | 'Video'

package/src/theme/extensions.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 
-import type { IntentValue, ShadowValue, Shade, ColorValue, InteractionConfig, ButtonSizeValue, ChipSizeValue, BadgeSizeValue, IconSizeValue, InputSizeValue, RadioButtonSizeValue, SelectSizeValue, SliderSizeValue, SwitchSizeValue, TextAreaSizeValue, AvatarSizeValue, ProgressSizeValue, AccordionSizeValue, ActivityIndicatorSizeValue, BreadcrumbSizeValue, ListSizeValue, MenuSizeValue, TextSizeValue, TabBarSizeValue, TableSizeValue, TooltipSizeValue, ViewSizeValue, Typography, TypographyValue } from './structures';
+import type { IntentValue, ShadowValue, Shade, ColorValue, InteractionConfig, ButtonSizeValue, ChipSizeValue, BadgeSizeValue, IconSizeValue, InputSizeValue, RadioButtonSizeValue, SelectSizeValue, SliderSizeValue, SwitchSizeValue, TextAreaSizeValue, AvatarSizeValue, ProgressSizeValue, AccordionSizeValue, ActivityIndicatorSizeValue, AlertSizeValue, BreadcrumbSizeValue, ListSizeValue, MenuSizeValue, TextSizeValue, TabBarSizeValue, TableSizeValue, TooltipSizeValue, ViewSizeValue, Typography, TypographyValue } from './structures';
 
 /**
  * Default fallback theme structure.
@@ -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>;
@@ -32,6 +33,7 @@ export interface DefaultTheme {
         progress: Record<string, ProgressSizeValue>;
         accordion: Record<string, AccordionSizeValue>;
         activityIndicator: Record<string, ActivityIndicatorSizeValue>;
+        alert: Record<string, AlertSizeValue>;
         breadcrumb: Record<string, BreadcrumbSizeValue>;
         list: Record<string, ListSizeValue>;
         menu: Record<string, MenuSizeValue>;

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;
@@ -194,6 +199,18 @@ export type ActivityIndicatorSizeValue = {
     borderWidth: SizeValue;
 };
 
+export type AlertSizeValue = {
+    padding: SizeValue;
+    gap: SizeValue;
+    borderRadius: SizeValue;
+    titleFontSize: SizeValue;
+    titleLineHeight: SizeValue;
+    messageFontSize: SizeValue;
+    messageLineHeight: SizeValue;
+    iconSize: SizeValue;
+    closeIconSize: SizeValue;
+};
+
 export type BreadcrumbSizeValue = {
     fontSize: SizeValue;
     lineHeight: SizeValue;