@idealyst/theme 1.2.72 → 1.2.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/theme",
-  "version": "1.2.72",
+  "version": "1.2.73",
   "description": "Theming system for Idealyst Framework",
   "readme": "README.md",
   "main": "src/index.ts",

package/src/builder.ts

@@ -32,6 +32,42 @@ import {
     ViewSizeValue,
 } from './theme/structures';
 
+/**
+ * Mapping of component names to their size value types.
+ * Used for type-safe addSize/setSize methods.
+ */
+export type ComponentSizeMap = {
+    button: ButtonSizeValue;
+    iconButton: IconButtonSizeValue;
+    chip: ChipSizeValue;
+    badge: BadgeSizeValue;
+    icon: IconSizeValue;
+    input: InputSizeValue;
+    radioButton: RadioButtonSizeValue;
+    select: SelectSizeValue;
+    slider: SliderSizeValue;
+    switch: SwitchSizeValue;
+    textarea: TextAreaSizeValue;
+    avatar: AvatarSizeValue;
+    progress: ProgressSizeValue;
+    accordion: AccordionSizeValue;
+    activityIndicator: ActivityIndicatorSizeValue;
+    alert: AlertSizeValue;
+    breadcrumb: BreadcrumbSizeValue;
+    list: ListSizeValue;
+    menu: MenuSizeValue;
+    text: TextSizeValue;
+    tabBar: TabBarSizeValue;
+    table: TableSizeValue;
+    tooltip: TooltipSizeValue;
+    view: ViewSizeValue;
+};
+
+/**
+ * Valid component names for size methods.
+ */
+export type SizeableComponent = keyof ComponentSizeMap;
+
 /**
  * Built theme structure - self-contained, no external type dependencies.
  */
@@ -113,6 +149,7 @@ type ThemeConfig<
  *   .addIntent('brand', { primary: '#6366f1', contrast: '#fff', light: '#818cf8', dark: '#4f46e5' })
  *   .addRadius('sm', 4)
  *   .addRadius('full', 9999)
+ *   .addSize('button', '2xl', { paddingVertical: 14, paddingHorizontal: 28, ... })
  *   .build();
  *
  * // Register the theme type
@@ -155,6 +192,10 @@ export class ThemeBuilder<
         };
     }
 
+    // =========================================================================
+    // Intent Methods
+    // =========================================================================
+
     /**
      * Add a custom intent to the theme.
      */
@@ -192,6 +233,10 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    // =========================================================================
+    // Radius Methods
+    // =========================================================================
+
     /**
      * Add a custom border radius value.
      */
@@ -210,6 +255,29 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    /**
+     * Set (replace) an existing radius value in the theme.
+     * Use this to override a radius inherited from a base theme.
+     */
+    setRadius<K extends TRadii>(
+        name: K,
+        value: number
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            radii: {
+                ...this.config.radii,
+                [name]: value,
+            } as any,
+        };
+        return newBuilder;
+    }
+
+    // =========================================================================
+    // Shadow Methods
+    // =========================================================================
+
     /**
      * Add a custom shadow value.
      */
@@ -228,6 +296,29 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    /**
+     * Set (replace) an existing shadow value in the theme.
+     * Use this to override a shadow inherited from a base theme.
+     */
+    setShadow<K extends TShadows>(
+        name: K,
+        value: ShadowValue
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            shadows: {
+                ...this.config.shadows,
+                [name]: value,
+            } as any,
+        };
+        return newBuilder;
+    }
+
+    // =========================================================================
+    // Interaction Methods
+    // =========================================================================
+
     /**
      * Set the interaction configuration.
      */
@@ -242,6 +333,46 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    /**
+     * Update specific interaction properties without replacing the entire config.
+     * Use this to modify individual opacity values or focus styles.
+     *
+     * @example
+     * ```typescript
+     * fromTheme(lightTheme)
+     *   .updateInteraction({ opacity: { disabled: 0.3 } })
+     *   .build();
+     * ```
+     */
+    updateInteraction(
+        partial: {
+            focusedBackground?: string;
+            focusBorder?: string;
+            opacity?: Partial<InteractionConfig['opacity']>;
+        }
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        const currentInteraction = this.config.interaction ?? {} as InteractionConfig;
+        const currentOpacity = currentInteraction.opacity ?? { hover: 0.9, active: 0.75, disabled: 0.5 };
+
+        newBuilder.config = {
+            ...this.config,
+            interaction: {
+                focusedBackground: partial.focusedBackground ?? currentInteraction.focusedBackground,
+                focusBorder: partial.focusBorder ?? currentInteraction.focusBorder,
+                opacity: {
+                    ...currentOpacity,
+                    ...partial.opacity,
+                },
+            },
+        };
+        return newBuilder;
+    }
+
+    // =========================================================================
+    // Color Methods
+    // =========================================================================
+
     /**
      * Set the colors configuration.
      */
@@ -440,8 +571,12 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    // =========================================================================
+    // Size Methods
+    // =========================================================================
+
     /**
-     * Set the sizes configuration.
+     * Set all sizes at once.
      */
     setSizes<S extends string>(sizes: {
         button: Record<S, ButtonSizeValue>;
@@ -478,6 +613,132 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    /**
+     * Add a new size variant for a specific component.
+     * This adds the size to all components in the theme.
+     *
+     * @param component - The component type (e.g., 'button', 'input', 'avatar')
+     * @param name - The size name (e.g., '2xl', 'compact', 'tiny')
+     * @param value - The size values for that component
+     *
+     * @example
+     * ```typescript
+     * createTheme()
+     *   .addSize('button', '2xl', {
+     *     paddingVertical: 14,
+     *     paddingHorizontal: 28,
+     *     minHeight: 64,
+     *     fontSize: 22,
+     *     lineHeight: 36,
+     *     iconSize: 22,
+     *   })
+     *   .addSize('input', '2xl', {
+     *     height: 64,
+     *     paddingHorizontal: 20,
+     *     fontSize: 18,
+     *     iconSize: 24,
+     *     iconMargin: 12,
+     *   })
+     *   .build();
+     * ```
+     */
+    addSize<C extends SizeableComponent, K extends string>(
+        component: C,
+        name: K,
+        value: ComponentSizeMap[C]
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize | K, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize | K, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            sizes: {
+                ...this.config.sizes,
+                [component]: {
+                    ...((this.config.sizes as any)?.[component] ?? {}),
+                    [name]: value,
+                },
+            } as any,
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Set (replace) an existing size variant for a specific component.
+     * Use this to override a size inherited from a base theme.
+     *
+     * @param component - The component type (e.g., 'button', 'input', 'avatar')
+     * @param name - The existing size name to override
+     * @param value - The new size values for that component
+     *
+     * @example
+     * ```typescript
+     * fromTheme(lightTheme)
+     *   .setSize('button', 'md', {
+     *     paddingVertical: 10,
+     *     paddingHorizontal: 20,
+     *     minHeight: 44,
+     *     fontSize: 18,
+     *     lineHeight: 28,
+     *     iconSize: 18,
+     *   })
+     *   .build();
+     * ```
+     */
+    setSize<C extends SizeableComponent, K extends TSize>(
+        component: C,
+        name: K,
+        value: ComponentSizeMap[C]
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            sizes: {
+                ...this.config.sizes,
+                [component]: {
+                    ...((this.config.sizes as any)?.[component] ?? {}),
+                    [name]: value,
+                },
+            } as any,
+        };
+        return newBuilder;
+    }
+
+    // =========================================================================
+    // Typography Methods
+    // =========================================================================
+
+    /**
+     * Set (replace) a typography variant in the theme.
+     * Typography variants use a fixed set of names (h1-h6, subtitle1-2, body1-2, caption).
+     *
+     * @example
+     * ```typescript
+     * fromTheme(lightTheme)
+     *   .setTypography('h1', { fontSize: 40, lineHeight: 48, fontWeight: '700' })
+     *   .build();
+     * ```
+     */
+    setTypography<K extends Typography>(
+        name: K,
+        value: TypographyValue
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            sizes: {
+                ...this.config.sizes,
+                typography: {
+                    ...(this.config.sizes?.typography ?? {}),
+                    [name]: value,
+                },
+            } as any,
+        };
+        return newBuilder;
+    }
+
+    // =========================================================================
+    // Breakpoint Methods
+    // =========================================================================
+
     /**
      * Add a single breakpoint to the theme.
      *
@@ -511,6 +772,32 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    /**
+     * Set (replace) an existing breakpoint value.
+     * Use this to override a breakpoint inherited from a base theme.
+     *
+     * @example
+     * ```typescript
+     * fromTheme(lightTheme)
+     *   .setBreakpoint('md', 800) // Change md breakpoint from 768 to 800
+     *   .build();
+     * ```
+     */
+    setBreakpoint<K extends TBreakpoints>(
+        name: K,
+        value: number
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            breakpoints: {
+                ...this.config.breakpoints,
+                [name]: value,
+            } as any,
+        };
+        return newBuilder;
+    }
+
     /**
      * Set all breakpoints at once.
      *
@@ -543,6 +830,10 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    // =========================================================================
+    // Build
+    // =========================================================================
+
     /**
      * Build the final theme object.
      */