@idealyst/theme 1.1.7 → 1.1.9

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

@@ -54,15 +54,15 @@ export const darkTheme = createTheme()
     // Shadows (higher opacity for dark backgrounds)
     .addShadow('none', {})
     .addShadow('sm', {
-        elevation: 1,
+        elevation: 2,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.18,
-        shadowRadius: 1,
+        shadowRadius: 2,
         boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.18)',
     })
     .addShadow('md', {
-        elevation: 3,
+        elevation: 4,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 3 },
         shadowOpacity: 0.2,
@@ -70,7 +70,7 @@ export const darkTheme = createTheme()
         boxShadow: '0px 3px 9.3px rgba(0, 0, 0, 0.2)',
     })
     .addShadow('lg', {
-        elevation: 6,
+        elevation: 8,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 6 },
         shadowOpacity: 0.23,
@@ -85,30 +85,31 @@ 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',
+            screen: '#121212',
+            primary: '#1e1e1e',
+            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)
@@ -123,6 +124,14 @@ export const darkTheme = createTheme()
             disabled: 0.4,
         },
     })
+    // Breakpoints (same as light theme)
+    .setBreakpoints({
+        xs: 0,      // Extra small devices (portrait phones)
+        sm: 576,    // Small devices (landscape phones)
+        md: 768,    // Medium devices (tablets)
+        lg: 992,    // Large devices (desktops)
+        xl: 1200,   // Extra large devices (large desktops)
+    })
     .build();
 
 // =============================================================================

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,26 @@
-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';
+
+// Responsive utilities
+export * from './responsive';
+export * from './breakpoints';
+export * from './useResponsiveStyle';

package/src/lightTheme.ts

@@ -88,6 +88,7 @@ export const lightTheme = createTheme()
     .setColors({
         pallet: generateColorPallette(),
         surface: {
+            screen: '#ffffff',
             primary: '#ffffff',
             secondary: '#f5f5f5',
             tertiary: '#e0e0e0',
@@ -155,11 +156,11 @@ export const lightTheme = createTheme()
             xl: { radioSize: 26, radioDotSize: 20, fontSize: 20, gap: 12 },
         },
         select: {
-            xs: { paddingHorizontal: 8, minHeight: 28, fontSize: 12, iconSize: 16 },
-            sm: { paddingHorizontal: 10, minHeight: 36, fontSize: 14, iconSize: 18 },
-            md: { paddingHorizontal: 12, minHeight: 44, fontSize: 16, iconSize: 20 },
-            lg: { paddingHorizontal: 16, minHeight: 52, fontSize: 18, iconSize: 24 },
-            xl: { paddingHorizontal: 20, minHeight: 60, fontSize: 20, iconSize: 28 },
+            xs: { paddingHorizontal: 8, minHeight: 28, fontSize: 12, iconSize: 16, borderRadius: 4 },
+            sm: { paddingHorizontal: 10, minHeight: 36, fontSize: 14, iconSize: 18, borderRadius: 4 },
+            md: { paddingHorizontal: 12, minHeight: 44, fontSize: 16, iconSize: 20, borderRadius: 4 },
+            lg: { paddingHorizontal: 16, minHeight: 52, fontSize: 18, iconSize: 24, borderRadius: 4 },
+            xl: { paddingHorizontal: 20, minHeight: 60, fontSize: 20, iconSize: 28, borderRadius: 4 },
         },
         slider: {
             xs: { trackHeight: 2, thumbSize: 12, thumbIconSize: 8, markHeight: 6, labelFontSize: 10 },
@@ -290,6 +291,14 @@ export const lightTheme = createTheme()
             disabled: 0.5,
         },
     })
+    // Breakpoints
+    .setBreakpoints({
+        xs: 0,      // Extra small devices (portrait phones)
+        sm: 576,    // Small devices (landscape phones)
+        md: 768,    // Medium devices (tablets)
+        lg: 992,    // Large devices (desktops)
+        xl: 1200,   // Extra large devices (large desktops)
+    })
     .build();
 
 // =============================================================================

package/src/responsive.ts

@@ -0,0 +1,123 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import { UnistylesRuntime } from 'react-native-unistyles';
+import { Breakpoint, BreakpointsRecord } from './theme/breakpoint';
+
+/**
+ * Makes a value responsive - can be either a direct value or
+ * an object mapping breakpoint names to values.
+ *
+ * @example
+ * ```typescript
+ * // Direct value
+ * const size: Responsive<Size> = 'md';
+ *
+ * // Responsive value
+ * const size: Responsive<Size> = { xs: 'sm', md: 'lg' };
+ * ```
+ */
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+/**
+ * Type guard to check if a value is a responsive object (breakpoint map).
+ *
+ * @param value - The value to check
+ * @returns True if the value is an object with breakpoint keys
+ *
+ * @example
+ * ```typescript
+ * const size: Responsive<Size> = { xs: 'sm', md: 'lg' };
+ *
+ * if (isResponsiveValue(size)) {
+ *   // size is Partial<Record<Breakpoint, Size>>
+ *   console.log(size.xs); // 'sm'
+ * } else {
+ *   // size is Size
+ *   console.log(size); // 'md'
+ * }
+ * ```
+ */
+export function isResponsiveValue<T>(value: Responsive<T>): value is Partial<Record<Breakpoint, T>> {
+    return (
+        typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        !('$$typeof' in value) // Not a React element
+    );
+}
+
+/**
+ * Style object where each property can be a responsive value.
+ */
+export type ResponsiveStyle = {
+    [K in keyof ViewStyle]?: Responsive<ViewStyle[K]>;
+} & {
+    [K in keyof TextStyle]?: Responsive<TextStyle[K]>;
+} & {
+    [K in keyof ImageStyle]?: Responsive<ImageStyle[K]>;
+};
+
+/**
+ * Resolve a single responsive value to its current breakpoint value.
+ * Uses CSS cascade behavior - falls back to the nearest smaller breakpoint.
+ */
+function resolveValue<T>(
+    value: Responsive<T>,
+    screenWidth: number,
+    breakpoints: BreakpointsRecord,
+    sortedBps: Breakpoint[]
+): T | undefined {
+    if (!isResponsiveValue(value)) {
+        return value;
+    }
+
+    // Find the largest breakpoint that matches current screen width
+    // and has a defined value (CSS cascade behavior)
+    for (const bp of sortedBps) {
+        if (screenWidth >= breakpoints[bp] && value[bp] !== undefined) {
+            return value[bp];
+        }
+    }
+
+    return undefined;
+}
+
+/**
+ * Resolve a responsive style object to concrete style values based on current breakpoint.
+ *
+ * This is a non-hook version for use outside of React components.
+ *
+ * @param style - Style object with responsive values
+ * @returns Resolved style object for the current breakpoint
+ *
+ * @example
+ * ```typescript
+ * const style = resolveResponsiveStyle({
+ *   flexDirection: { xs: 'column', md: 'row' },
+ *   padding: { xs: 8, lg: 16 },
+ *   backgroundColor: '#fff', // Non-responsive values pass through
+ * });
+ * // On tablet: { flexDirection: 'row', padding: 8, backgroundColor: '#fff' }
+ * ```
+ */
+export function resolveResponsiveStyle(style: ResponsiveStyle): ViewStyle & TextStyle & ImageStyle {
+    const breakpoints = UnistylesRuntime.breakpoints as BreakpointsRecord;
+    const screenWidth = UnistylesRuntime.screen.width;
+
+    // Sort breakpoints by value descending for cascade lookup
+    const sortedBps = Object.entries(breakpoints)
+        .sort(([, a], [, b]) => b - a)
+        .map(([name]) => name as Breakpoint);
+
+    const resolved: Record<string, unknown> = {};
+
+    for (const [key, value] of Object.entries(style)) {
+        if (value === undefined) continue;
+
+        const resolvedValue = resolveValue(value, screenWidth, breakpoints, sortedBps);
+        if (resolvedValue !== undefined) {
+            resolved[key] = resolvedValue;
+        }
+    }
+
+    return resolved as ViewStyle & TextStyle & ImageStyle;
+}

package/src/styleBuilder.ts

@@ -0,0 +1,112 @@
+/**
+ * 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'
+  | 'DatePickerCalendar'
+  | 'DateTimeInput'
+  | 'DateTimePicker'
+  | 'Dialog'
+  | 'Divider'
+  | 'Icon'
+  | 'Image'
+  | 'Input'
+  | 'Link'
+  | 'List'
+  | 'Menu'
+  | 'Popover'
+  | 'Pressable'
+  | 'Progress'
+  | 'RadioButton'
+  | 'Screen'
+  | 'Select'
+  | 'Skeleton'
+  | 'Slider'
+  | 'SVGImage'
+  | 'Switch'
+  | 'TabBar'
+  | 'Table'
+  | 'Text'
+  | 'TextArea'
+  | 'TimePicker'
+  | '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/breakpoint.ts

@@ -0,0 +1,30 @@
+import { RegisteredTheme } from './extensions';
+
+/**
+ * All available breakpoint names.
+ * Derived from your registered theme's breakpoints.
+ *
+ * @example
+ * ```typescript
+ * // With default theme: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ * const bp: Breakpoint = 'md';
+ * ```
+ */
+export type Breakpoint = RegisteredTheme['theme'] extends { breakpoints: infer B }
+    ? B extends Record<string, number>
+        ? keyof B & string
+        : never
+    : never;
+
+/**
+ * Get the breakpoints record type from the theme.
+ *
+ * @example
+ * ```typescript
+ * // { xs: number; sm: number; md: number; lg: number; xl: number; }
+ * const bps: BreakpointsRecord = theme.breakpoints;
+ * ```
+ */
+export type BreakpointsRecord = RegisteredTheme['theme'] extends { breakpoints: infer B }
+    ? B
+    : Record<string, number>;

package/src/theme/extensions.ts

@@ -15,6 +15,7 @@ export interface DefaultTheme {
         surface: Record<string, ColorValue>;
         text: Record<string, ColorValue>;
         border: Record<string, ColorValue>;
+        card: Record<string, ColorValue>;
     };
     sizes: {
         button: Record<string, ButtonSizeValue>;
@@ -42,6 +43,18 @@ export interface DefaultTheme {
         typography: Record<Typography, TypographyValue>;
     };
     interaction: InteractionConfig;
+    /**
+     * Responsive breakpoints for width-based styling.
+     * First breakpoint MUST have value 0.
+     */
+    breakpoints: Record<string, number>;
+    /**
+     * 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>>;
 }
 
 /**