@idealyst/theme 1.1.6 → 1.1.8

package/src/builder.ts

@@ -0,0 +1,317 @@
+import {
+    IntentValue,
+    ShadowValue,
+    InteractionConfig,
+    ColorValue,
+    Shade,
+    Typography,
+    TypographyValue,
+    ButtonSizeValue,
+    ChipSizeValue,
+    BadgeSizeValue,
+    IconSizeValue,
+    InputSizeValue,
+    RadioButtonSizeValue,
+    SelectSizeValue,
+    SliderSizeValue,
+    SwitchSizeValue,
+    TextAreaSizeValue,
+    AvatarSizeValue,
+    ProgressSizeValue,
+    AccordionSizeValue,
+    ActivityIndicatorSizeValue,
+    BreadcrumbSizeValue,
+    ListSizeValue,
+    MenuSizeValue,
+    TextSizeValue,
+    TabBarSizeValue,
+    TableSizeValue,
+    TooltipSizeValue,
+    ViewSizeValue,
+} from './theme/structures';
+
+/**
+ * Built theme structure - self-contained, no external type dependencies.
+ */
+export type BuiltTheme<
+    TIntents extends string,
+    TRadii extends string,
+    TShadows extends string,
+    TPallet extends string,
+    TSurface extends string,
+    TText extends string,
+    TBorder extends string,
+    TSize extends string,
+> = {
+    intents: Record<TIntents, IntentValue>;
+    radii: Record<TRadii, number>;
+    shadows: Record<TShadows, ShadowValue>;
+    colors: {
+        pallet: Record<TPallet, Record<Shade, ColorValue>>;
+        surface: Record<TSurface, ColorValue>;
+        text: Record<TText, ColorValue>;
+        border: Record<TBorder, ColorValue>;
+    };
+    sizes: {
+        button: Record<TSize, ButtonSizeValue>;
+        chip: Record<TSize, ChipSizeValue>;
+        badge: Record<TSize, BadgeSizeValue>;
+        icon: Record<TSize, IconSizeValue>;
+        input: Record<TSize, InputSizeValue>;
+        radioButton: Record<TSize, RadioButtonSizeValue>;
+        select: Record<TSize, SelectSizeValue>;
+        slider: Record<TSize, SliderSizeValue>;
+        switch: Record<TSize, SwitchSizeValue>;
+        textarea: Record<TSize, TextAreaSizeValue>;
+        avatar: Record<TSize, AvatarSizeValue>;
+        progress: Record<TSize, ProgressSizeValue>;
+        accordion: Record<TSize, AccordionSizeValue>;
+        activityIndicator: Record<TSize, ActivityIndicatorSizeValue>;
+        breadcrumb: Record<TSize, BreadcrumbSizeValue>;
+        list: Record<TSize, ListSizeValue>;
+        menu: Record<TSize, MenuSizeValue>;
+        text: Record<TSize, TextSizeValue>;
+        tabBar: Record<TSize, TabBarSizeValue>;
+        table: Record<TSize, TableSizeValue>;
+        tooltip: Record<TSize, TooltipSizeValue>;
+        view: Record<TSize, ViewSizeValue>;
+        typography: Record<Typography, TypographyValue>;
+    };
+    interaction: InteractionConfig;
+};
+
+/**
+ * Internal config type for building.
+ */
+type ThemeConfig<
+    TIntents extends string,
+    TRadii extends string,
+    TShadows extends string,
+    TPallet extends string,
+    TSurface extends string,
+    TText extends string,
+    TBorder extends string,
+    TSize extends string,
+> = BuiltTheme<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize>;
+
+/**
+ * Fluent builder for creating themes with full TypeScript inference.
+ *
+ * Build a theme, then register it to get automatic type inference for all components:
+ *
+ * @example
+ * ```typescript
+ * const myTheme = createTheme()
+ *   .addIntent('primary', { primary: '#3b82f6', contrast: '#fff', light: '#bfdbfe', dark: '#1e40af' })
+ *   .addIntent('brand', { primary: '#6366f1', contrast: '#fff', light: '#818cf8', dark: '#4f46e5' })
+ *   .addRadius('sm', 4)
+ *   .addRadius('full', 9999)
+ *   .build();
+ *
+ * // Register the theme type
+ * declare module '@idealyst/theme' {
+ *   interface RegisteredTheme {
+ *     theme: typeof myTheme;
+ *   }
+ * }
+ *
+ * // Now Intent = 'primary' | 'brand', Radius = 'sm' | 'full', etc.
+ * ```
+ */
+export class ThemeBuilder<
+    TIntents extends string = never,
+    TRadii extends string = never,
+    TShadows extends string = never,
+    TPallet extends string = never,
+    TSurface extends string = never,
+    TText extends string = never,
+    TBorder extends string = never,
+    TSize extends string = never,
+> {
+    private config: ThemeConfig<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize>;
+
+    constructor() {
+        this.config = {
+            intents: {} as any,
+            radii: {} as any,
+            shadows: {} as any,
+            colors: {
+                pallet: {} as any,
+                surface: {} as any,
+                text: {} as any,
+                border: {} as any,
+            },
+            sizes: {} as any,
+            interaction: {} as any,
+        };
+    }
+
+    /**
+     * Add a custom intent to the theme.
+     */
+    addIntent<K extends string>(
+        name: K,
+        value: IntentValue
+    ): ThemeBuilder<TIntents | K, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize> {
+        const newBuilder = new ThemeBuilder<TIntents | K, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize>();
+        newBuilder.config = {
+            ...this.config,
+            intents: {
+                ...this.config.intents,
+                [name]: value,
+            } as any,
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Add a custom border radius value.
+     */
+    addRadius<K extends string>(
+        name: K,
+        value: number
+    ): ThemeBuilder<TIntents, TRadii | K, TShadows, TPallet, TSurface, TText, TBorder, TSize> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii | K, TShadows, TPallet, TSurface, TText, TBorder, TSize>();
+        newBuilder.config = {
+            ...this.config,
+            radii: {
+                ...this.config.radii,
+                [name]: value,
+            } as any,
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Add a custom shadow value.
+     */
+    addShadow<K extends string>(
+        name: K,
+        value: ShadowValue
+    ): ThemeBuilder<TIntents, TRadii, TShadows | K, TPallet, TSurface, TText, TBorder, TSize> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows | K, TPallet, TSurface, TText, TBorder, TSize>();
+        newBuilder.config = {
+            ...this.config,
+            shadows: {
+                ...this.config.shadows,
+                [name]: value,
+            } as any,
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Set the interaction configuration.
+     */
+    setInteraction(
+        interaction: InteractionConfig
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize>();
+        newBuilder.config = {
+            ...this.config,
+            interaction,
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Set the colors configuration.
+     */
+    setColors<
+        P extends string,
+        S extends string,
+        T extends string,
+        B extends string,
+    >(colors: {
+        pallet: Record<P, Record<Shade, ColorValue>>;
+        surface: Record<S, ColorValue>;
+        text: Record<T, ColorValue>;
+        border: Record<B, ColorValue>;
+    }): ThemeBuilder<TIntents, TRadii, TShadows, P, S, T, B, TSize> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, P, S, T, B, TSize>();
+        newBuilder.config = {
+            ...this.config,
+            colors,
+        } as any;
+        return newBuilder;
+    }
+
+    /**
+     * Set the sizes configuration.
+     */
+    setSizes<S extends string>(sizes: {
+        button: Record<S, ButtonSizeValue>;
+        chip: Record<S, ChipSizeValue>;
+        badge: Record<S, BadgeSizeValue>;
+        icon: Record<S, IconSizeValue>;
+        input: Record<S, InputSizeValue>;
+        radioButton: Record<S, RadioButtonSizeValue>;
+        select: Record<S, SelectSizeValue>;
+        slider: Record<S, SliderSizeValue>;
+        switch: Record<S, SwitchSizeValue>;
+        textarea: Record<S, TextAreaSizeValue>;
+        avatar: Record<S, AvatarSizeValue>;
+        progress: Record<S, ProgressSizeValue>;
+        accordion: Record<S, AccordionSizeValue>;
+        activityIndicator: Record<S, ActivityIndicatorSizeValue>;
+        breadcrumb: Record<S, BreadcrumbSizeValue>;
+        list: Record<S, ListSizeValue>;
+        menu: Record<S, MenuSizeValue>;
+        text: Record<S, TextSizeValue>;
+        tabBar: Record<S, TabBarSizeValue>;
+        table: Record<S, TableSizeValue>;
+        tooltip: Record<S, TooltipSizeValue>;
+        view: Record<S, ViewSizeValue>;
+        typography: Record<Typography, TypographyValue>;
+    }): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, S> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, S>();
+        newBuilder.config = {
+            ...this.config,
+            sizes,
+        } as any;
+        return newBuilder;
+    }
+
+    /**
+     * Build the final theme object.
+     */
+    build(): BuiltTheme<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize> {
+        return this.config;
+    }
+}
+
+/**
+ * Create a new theme builder.
+ */
+export function createTheme(): ThemeBuilder {
+    return new ThemeBuilder();
+}
+
+/**
+ * Create a builder from an existing theme to add more values.
+ */
+export function fromTheme<T extends BuiltTheme<any, any, any, any, any, any, any, any>>(
+    base: T
+): ThemeBuilder<
+    keyof T['intents'] & string,
+    keyof T['radii'] & string,
+    keyof T['shadows'] & string,
+    keyof T['colors']['pallet'] & string,
+    keyof T['colors']['surface'] & string,
+    keyof T['colors']['text'] & string,
+    keyof T['colors']['border'] & string,
+    keyof T['sizes']['button'] & string
+> {
+    const builder = new ThemeBuilder<
+        keyof T['intents'] & string,
+        keyof T['radii'] & string,
+        keyof T['shadows'] & string,
+        keyof T['colors']['pallet'] & string,
+        keyof T['colors']['surface'] & string,
+        keyof T['colors']['text'] & string,
+        keyof T['colors']['border'] & string,
+        keyof T['sizes']['button'] & string
+    >();
+    (builder as any).config = { ...base };
+    return builder;
+}

package/src/componentStyles.ts

@@ -0,0 +1,93 @@
+/**
+ * Component Style Types Registry
+ *
+ * This module provides type definitions for component styles used with
+ * defineStyle, extendStyle, and overrideStyle.
+ *
+ * Components register their style types via module augmentation:
+ *
+ * @example
+ * ```typescript
+ * // In Text.styles.tsx
+ * declare module '@idealyst/theme' {
+ *   interface ComponentStyleRegistry {
+ *     Text: TextStyleDef;
+ *   }
+ * }
+ * ```
+ */
+
+import type { TextStyle, ViewStyle } from 'react-native';
+
+/**
+ * Registry interface that components augment to register their style types.
+ * This enables type-safe extendStyle and overrideStyle calls.
+ */
+export interface ComponentStyleRegistry {
+  // Components augment this interface to add their style types
+  // Example: Text: { text: (params: TextStyleParams) => TextStyleObject }
+}
+
+/**
+ * Get the style definition type for a component.
+ * Returns the registered type or a loose Record type for unregistered components.
+ */
+export type ComponentStyleDef<K extends string> = K extends keyof ComponentStyleRegistry
+  ? ComponentStyleRegistry[K]
+  : Record<string, any>;
+
+/**
+ * Deep partial type that works with functions.
+ * For style functions, preserves the function signature but makes the return type partial.
+ */
+export type DeepPartialStyle<T> = T extends (...args: infer A) => infer R
+  ? (...args: A) => DeepPartialStyle<R>
+  : T extends object
+    ? { [K in keyof T]?: DeepPartialStyle<T[K]> }
+    : T;
+
+/**
+ * Style definition for extendStyle - requires functions with same params as base.
+ * All style properties must be functions to access dynamic params.
+ */
+export type ExtendStyleDef<K extends string> = DeepPartialStyle<ComponentStyleDef<K>>;
+
+/**
+ * Style definition for overrideStyle - requires full implementation with functions.
+ */
+export type OverrideStyleDef<K extends string> = ComponentStyleDef<K>;
+
+/**
+ * Helper to extract the params type from a dynamic style function.
+ * Use this to type your extension functions.
+ *
+ * @example
+ * ```typescript
+ * type TextParams = StyleParams<TextStyleDef['text']>;
+ * // TextParams = { color?: TextColorVariant }
+ * ```
+ */
+export type StyleParams<T> = T extends (params: infer P) => any ? P : never;
+
+// =============================================================================
+// Common Style Types
+// =============================================================================
+
+/**
+ * Base style object with optional variants and compound variants.
+ */
+export interface StyleWithVariants<TVariants extends Record<string, any> = Record<string, any>> {
+  variants?: {
+    [K in keyof TVariants]?: {
+      [V in TVariants[K] extends string | boolean ? TVariants[K] : string]?: ViewStyle | TextStyle;
+    };
+  };
+  compoundVariants?: Array<{
+    [K in keyof TVariants]?: TVariants[K];
+  } & { styles: ViewStyle | TextStyle }>;
+}
+
+/**
+ * Dynamic style function type.
+ */
+export type DynamicStyleFn<TParams, TStyle> = (params: TParams) => TStyle;

package/src/config/cli.ts

@@ -0,0 +1,95 @@
+#!/usr/bin/env node
+/**
+ * Idealyst Style Generator CLI
+ *
+ * Reads idealyst.config.ts and generates flat Unistyles-compatible style files.
+ *
+ * Usage:
+ *   npx ts-node packages/theme/src/config/cli.ts [config-path] [output-dir]
+ *
+ * Defaults:
+ *   config-path: ./idealyst.config.ts
+ *   output-dir:  ./generated
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+// Dynamic import for ESM compatibility
+async function main() {
+    const args = process.argv.slice(2);
+    const configPath = args[0] || './idealyst.config.ts';
+    const outputDir = args[1] || './generated';
+
+    console.log('🎨 Idealyst Style Generator');
+    console.log(`   Config: ${configPath}`);
+    console.log(`   Output: ${outputDir}`);
+    console.log('');
+
+    // Resolve paths
+    const resolvedConfigPath = path.resolve(process.cwd(), configPath);
+    const resolvedOutputDir = path.resolve(process.cwd(), outputDir);
+
+    // Check config exists
+    if (!fs.existsSync(resolvedConfigPath)) {
+        console.error(`❌ Config file not found: ${resolvedConfigPath}`);
+        console.error('');
+        console.error('Create an idealyst.config.ts file with your theme configuration.');
+        console.error('See the documentation for examples.');
+        process.exit(1);
+    }
+
+    // Import config dynamically
+    // Note: This requires ts-node or a pre-compiled config
+    let config;
+    try {
+        // Try to import the config
+        const configModule = await import(resolvedConfigPath);
+        config = configModule.default || configModule;
+    } catch (err) {
+        console.error(`❌ Failed to load config: ${err}`);
+        console.error('');
+        console.error('Make sure your config file:');
+        console.error('  1. Is a valid TypeScript/JavaScript file');
+        console.error('  2. Uses export default or named exports');
+        console.error('  3. Has all required theme properties');
+        process.exit(1);
+    }
+
+    // Validate config
+    if (!config.themes || !config.themes.light || !config.themes.dark) {
+        console.error('❌ Invalid config: themes.light and themes.dark are required');
+        process.exit(1);
+    }
+
+    // Import generator
+    const { generateStyles } = await import('./generator');
+
+    // Generate styles
+    console.log('⚙️  Generating styles...');
+    const files = generateStyles(config);
+
+    // Ensure output directory exists
+    if (!fs.existsSync(resolvedOutputDir)) {
+        fs.mkdirSync(resolvedOutputDir, { recursive: true });
+    }
+
+    // Write files
+    for (const [filename, content] of Object.entries(files)) {
+        const filePath = path.join(resolvedOutputDir, filename);
+        fs.writeFileSync(filePath, content, 'utf-8');
+        console.log(`   ✓ ${filename}`);
+    }
+
+    console.log('');
+    console.log(`✅ Generated ${Object.keys(files).length} files in ${outputDir}`);
+    console.log('');
+    console.log('Next steps:');
+    console.log('  1. Import the generated unistyles.generated.ts in your app entry');
+    console.log('  2. Update components to import from generated style files');
+}
+
+main().catch((err) => {
+    console.error('Fatal error:', err);
+    process.exit(1);
+});