@idealyst/theme 1.1.7 → 1.1.8

package/src/config/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Idealyst Configuration Module
+ *
+ * Provides tools for defining theme configuration and generating
+ * flat, Unistyles-compatible style files.
+ */
+
+export { defineConfig } from './types';
+export { generateStyles } from './generator';
+export type { IdealystConfig, ComponentExtensions, ComponentExtension } from './types';

package/src/config/types.ts

@@ -0,0 +1,112 @@
+/**
+ * Idealyst Configuration Types
+ *
+ * This module defines the structure for idealyst.config.ts files.
+ * The config is used to generate flat, Unistyles-compatible style files.
+ */
+
+import type { Theme } from '../theme';
+
+/**
+ * Component extension definition.
+ * Can be either static styles or a function that receives the theme.
+ */
+export type ComponentExtension<T = Record<string, any>> =
+    | T
+    | ((theme: Theme) => T);
+
+/**
+ * Extension definitions for all components.
+ */
+export interface ComponentExtensions {
+    View?: ComponentExtension<{
+        view?: Record<string, any>;
+    }>;
+    Button?: ComponentExtension<{
+        button?: Record<string, any>;
+        text?: Record<string, any>;
+        icon?: Record<string, any>;
+        iconContainer?: Record<string, any>;
+    }>;
+    Text?: ComponentExtension<{
+        text?: Record<string, any>;
+    }>;
+    Card?: ComponentExtension<{
+        card?: Record<string, any>;
+    }>;
+    Input?: ComponentExtension<{
+        wrapper?: Record<string, any>;
+        input?: Record<string, any>;
+        label?: Record<string, any>;
+        hint?: Record<string, any>;
+    }>;
+    Screen?: ComponentExtension<{
+        screen?: Record<string, any>;
+        screenContent?: Record<string, any>;
+    }>;
+    // Add more components as needed...
+    [key: string]: ComponentExtension | undefined;
+}
+
+/**
+ * Theme definition in the config.
+ */
+export interface ThemeDefinition {
+    /**
+     * The built theme object.
+     * Created using createTheme() or fromTheme() builders.
+     */
+    theme: Theme;
+
+    /**
+     * Optional name for this theme variant.
+     * Defaults to 'light' for the first theme, 'dark' for the second.
+     */
+    name?: string;
+}
+
+/**
+ * Main Idealyst configuration structure.
+ */
+export interface IdealystConfig {
+    /**
+     * Theme definitions.
+     * At minimum, define light and dark themes.
+     */
+    themes: {
+        light: Theme;
+        dark: Theme;
+        [key: string]: Theme;
+    };
+
+    /**
+     * Global component style extensions.
+     * These are merged with base component styles.
+     */
+    extensions?: ComponentExtensions;
+
+    /**
+     * Output configuration.
+     */
+    output?: {
+        /**
+         * Directory to output generated style files.
+         * Relative to config file location.
+         * @default './generated'
+         */
+        dir?: string;
+
+        /**
+         * Whether to generate TypeScript or JavaScript.
+         * @default 'typescript'
+         */
+        format?: 'typescript' | 'javascript';
+    };
+}
+
+/**
+ * Helper to define a config with full type inference.
+ */
+export function defineConfig(config: IdealystConfig): IdealystConfig {
+    return config;
+}

package/src/darkTheme.ts

@@ -85,30 +85,30 @@ export const darkTheme = createTheme()
         shadowRadius: 16,
         boxShadow: '0px 12px 32px rgba(0, 0, 0, 0.25)',
     })
-    // Colors
+    // Colors (neutral grays, not blue-tinted)
     .setColors({
         pallet: generateDarkColorPallette(),
         surface: {
-            primary: '#0f172a',
-            secondary: '#1e293b',
-            tertiary: '#334155',
+            primary: '#121212',
+            secondary: '#1e1e1e',
+            tertiary: '#2a2a2a',
             inverse: '#ffffff',
             'inverse-secondary': 'rgba(255, 255, 255, 0.9)',
             'inverse-tertiary': 'rgba(255, 255, 255, 0.7)',
         },
         text: {
-            primary: '#f1f5f9',
-            secondary: '#cbd5e1',
-            tertiary: '#94a3b8',
-            inverse: '#0f172a',
-            'inverse-secondary': 'rgba(15, 23, 42, 0.9)',
-            'inverse-tertiary': 'rgba(15, 23, 42, 0.7)',
+            primary: '#f5f5f5',
+            secondary: '#a3a3a3',
+            tertiary: '#737373',
+            inverse: '#121212',
+            'inverse-secondary': 'rgba(18, 18, 18, 0.9)',
+            'inverse-tertiary': 'rgba(18, 18, 18, 0.7)',
         },
         border: {
-            primary: '#334155',
-            secondary: '#475569',
-            tertiary: '#64748b',
-            disabled: '#1e293b',
+            primary: '#333333',
+            secondary: '#404040',
+            tertiary: '#525252',
+            disabled: '#1e1e1e',
         },
     })
     // Sizes (reuse from light theme)

package/src/extensions.ts

@@ -0,0 +1,110 @@
+/**
+ * Extensions runtime for Idealyst theme.
+ *
+ * This module provides the runtime helper used by the Babel plugin
+ * to merge extensions into component styles.
+ */
+
+export { __withExtension } from './babel/runtime';
+
+import { StyleSheet } from 'react-native-unistyles';
+import type { Theme } from './theme';
+
+// =============================================================================
+// ThemeStyleWrapper - Type utility for style definitions
+// =============================================================================
+
+// Check if T is an object we can iterate over (not array, not function, not primitive)
+type IsIterableObject<T> = T extends object
+  ? T extends any[]
+    ? false
+    : T extends (...args: any[]) => any
+      ? false
+      : true
+  : false;
+
+// Get value type from an object - works for both Record and named-key objects
+type ObjectValue<T> = T extends { [key: string]: infer V }
+  ? V
+  : T[keyof T];
+
+/**
+ * Wraps a Theme type to add $iterator properties for any object types.
+ *
+ * For each property that is an object (dictionary-like), adds a sibling $propertyName
+ * that represents the value type. This enables Babel to expand iterations
+ * over theme values (like intents, typography sizes, etc.)
+ *
+ * Works with:
+ * - Record<string, V> types
+ * - Objects with named keys like { primary: V, success: V, ... }
+ *
+ * @example
+ * ```typescript
+ * import { ThemeStyleWrapper } from '@idealyst/theme/extensions';
+ * import type { Theme as BaseTheme } from '@idealyst/theme';
+ *
+ * type Theme = ThemeStyleWrapper<BaseTheme>;
+ *
+ * // Now you can use $iterator properties:
+ * // theme.$intents.primary -> Babel expands to all intent keys
+ * // theme.sizes.$typography.fontSize -> Babel expands to all typography keys
+ * ```
+ */
+export type ThemeStyleWrapper<T> = T extends object
+  ? {
+      [K in keyof T]: ThemeStyleWrapper<T[K]>
+    } & {
+      [K in keyof T as IsIterableObject<T[K]> extends true ? `$${K & string}` : never]:
+        ThemeStyleWrapper<ObjectValue<T[K]>>
+    }
+  : T;
+
+/**
+ * Theme type with $iterator properties for use in style definitions.
+ * Use this instead of the base Theme type when using $iterator syntax.
+ */
+export type IteratorTheme = ThemeStyleWrapper<Theme>;
+
+/**
+ * Style callback type that accepts IteratorTheme.
+ * The variants structure is relaxed to accept $iterator patterns.
+ */
+export type IteratorStyleCallback<TStyles> = (theme: IteratorTheme) => TStyles;
+
+/**
+ * Creates a stylesheet with $iterator expansion support.
+ *
+ * This is a typed wrapper around StyleSheet.create that:
+ * 1. Accepts the IteratorTheme type (with $intents, $sizes, etc.)
+ * 2. Allows relaxed variant structures for $iterator patterns
+ *
+ * The Babel plugin will expand $iterator patterns before Unistyles processes the styles.
+ *
+ * @example
+ * ```typescript
+ * import { createIteratorStyles } from '@idealyst/theme';
+ *
+ * export const styles = createIteratorStyles((theme) => ({
+ *   box: {
+ *     borderRadius: theme.radii.md,
+ *     variants: {
+ *       intent: {
+ *         backgroundColor: theme.$intents.light,
+ *         borderColor: theme.$intents.primary,
+ *       },
+ *       size: {
+ *         padding: theme.sizes.$button.paddingVertical,
+ *       },
+ *     },
+ *   },
+ * }));
+ * ```
+ */
+export function createIteratorStyles<TStyles extends Record<string, any>>(
+  callback: IteratorStyleCallback<TStyles>
+): ReturnType<typeof StyleSheet.create> {
+  // This function is transformed by Babel - it sees StyleSheet.create and processes it
+  // The callback is passed through with $iterator patterns expanded
+  return StyleSheet.create(callback as any);
+}

package/src/index.ts

@@ -1,9 +1,21 @@
-export * from './unistyles';
-export * from './lightTheme';
-export * from './darkTheme';
+// Core types first (no dependencies)
 export * from './theme';
 export * from './variants';
 export * from './components';
+
+// Builder (depends on theme types)
+export * from './builder';
+
+// Themes (depend on builder)
+export * from './lightTheme';
+export * from './darkTheme';
+
+// Unistyles declaration (depends on theme)
+export * from './unistyles';
+
+// Helpers and styles
 export * from './styles';
 export * from './helpers';
-export * from './builder';
+export * from './styleBuilder';
+export * from './extensions';
+export * from './componentStyles';

package/src/styleBuilder.ts

@@ -0,0 +1,108 @@
+/**
+ * StyleBuilder - Declarative styling system with extension support
+ *
+ * All transformations happen at BUILD TIME via Babel plugin.
+ * These functions are replaced with StyleSheet.create calls.
+ *
+ * For extensions to work, import your extension file BEFORE components:
+ *
+ * ```typescript
+ * // App.tsx
+ * import './style-extensions'; // FIRST
+ * import { Text } from '@idealyst/components'; // SECOND
+ * ```
+ */
+
+import { StyleSheet } from 'react-native-unistyles';
+import type { ComponentStyleRegistry, ExtendStyleDef, OverrideStyleDef } from './componentStyles';
+
+export type ComponentName =
+  | 'Accordion'
+  | 'ActivityIndicator'
+  | 'Alert'
+  | 'Avatar'
+  | 'Badge'
+  | 'Breadcrumb'
+  | 'Button'
+  | 'Card'
+  | 'Checkbox'
+  | 'Chip'
+  | 'Dialog'
+  | 'Divider'
+  | 'Icon'
+  | 'Image'
+  | 'Input'
+  | 'Link'
+  | 'List'
+  | 'Menu'
+  | 'Popover'
+  | 'Pressable'
+  | 'Progress'
+  | 'RadioButton'
+  | 'Screen'
+  | 'Select'
+  | 'Skeleton'
+  | 'Slider'
+  | 'SVGImage'
+  | 'Switch'
+  | 'TabBar'
+  | 'Table'
+  | 'Text'
+  | 'TextArea'
+  | 'Tooltip'
+  | 'Video'
+  | 'View';
+
+export type StyleCallback<TTheme, TStyles> = (theme: TTheme) => TStyles;
+
+/**
+ * Define base styles for a component.
+ * Babel transforms this to StyleSheet.create with merged extensions.
+ */
+export function defineStyle<TTheme, TStyles>(
+  _componentName: ComponentName,
+  styles: StyleCallback<TTheme, TStyles>
+): ReturnType<typeof StyleSheet.create> {
+  // Babel replaces this - runtime fallback for dev
+  return StyleSheet.create(styles as any);
+}
+
+/**
+ * Extend existing component styles (merged at build time).
+ * Import BEFORE components for extensions to apply.
+ */
+export function extendStyle<K extends keyof ComponentStyleRegistry>(
+  componentName: K,
+  styles: (theme: any) => ExtendStyleDef<K>
+): void;
+export function extendStyle<K extends string>(
+  componentName: K,
+  styles: (theme: any) => Record<string, any>
+): void;
+export function extendStyle(
+  _componentName: string,
+  _styles: (theme: any) => any
+): void {
+  // Babel removes this call and merges into defineStyle
+}
+
+/**
+ * Override component styles completely (replaces base at build time).
+ * Import BEFORE components for overrides to apply.
+ */
+export function overrideStyle<K extends keyof ComponentStyleRegistry>(
+  componentName: K,
+  styles: (theme: any) => OverrideStyleDef<K>
+): void;
+export function overrideStyle<K extends string>(
+  componentName: K,
+  styles: (theme: any) => Record<string, any>
+): void;
+export function overrideStyle(
+  _componentName: string,
+  _styles: (theme: any) => any
+): void {
+  // Babel removes this call and replaces defineStyle
+}
+
+export type { ThemeStyleWrapper } from './extensions';

package/src/theme/extensions.ts

@@ -42,6 +42,13 @@ export interface DefaultTheme {
         typography: Record<Typography, TypographyValue>;
     };
     interaction: InteractionConfig;
+    /**
+     * Component style extensions.
+     * Populated by the extension system when extendComponent is called.
+     * Used by the Babel plugin to merge extensions into component styles.
+     * @internal
+     */
+    __extensions?: Record<string, Record<string, any>>;
 }
 
 /**

package/src/unistyles.ts

@@ -1,25 +1,15 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { darkTheme } from './darkTheme';
-import { lightTheme } from './lightTheme';
 import { Theme } from './theme';
 
 // Unistyles v3 themes declaration
+// Apps should configure their own themes via StyleSheet.configure()
 declare module 'react-native-unistyles' {
   export interface UnistylesThemes {
     light: Theme;
     dark: Theme;
+    // Apps can add more themes via module augmentation
+    [key: string]: Theme;
   }
 }
 
-// Export something to ensure this module is included in compilation
-export const unistylesConfigured = true;
-
-StyleSheet.configure({
-    settings: {
-        initialTheme: 'light',
-    },
-    themes: {
-      light: lightTheme,
-      dark: darkTheme,
-    }
-})
+// Export for type checking
+export const THEME_TYPES_DECLARED = true;