@idealyst/theme 1.1.6 → 1.1.8

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/color.ts

@@ -1,15 +1,36 @@
-export type Pallet = 'red' | 'orange' | 'blue' | 'green' | 'yellow' | 'purple' | 'gray' | 'black' | 'white';
-export type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-export type Color = `${Pallet}.${Shade}` | Pallet;
-export type ColorValue = string;
-
-export type Surface = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary';
-export type Text = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary';
-export type Border = 'primary' | 'secondary' | 'tertiary' | 'disabled';
-
-export type AllColorTypes = {
-    surface: Record<Surface, ColorValue>;
-    text: Record<Text, ColorValue>;
-    border: Record<Border, ColorValue>;
-    pallet: Record<Pallet, Record<Shade, ColorValue>>;
-}
+import { RegisteredTheme } from './extensions';
+
+/**
+ * All available palette color names.
+ * Derived from your registered theme's color pallet.
+ */
+export type Pallet = keyof RegisteredTheme['theme']['colors']['pallet'] & string;
+
+/**
+ * Color reference string. Either a palette.shade combination or just a palette name.
+ * @example 'blue.500', 'red.100', 'gray'
+ */
+export type Color = `${Pallet}.${50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}` | Pallet;
+
+/**
+ * All available surface types.
+ * Derived from your registered theme's surfaces.
+ */
+export type Surface = keyof RegisteredTheme['theme']['colors']['surface'];
+
+/**
+ * All available text color types.
+ * Derived from your registered theme's text colors.
+ */
+export type Text = keyof RegisteredTheme['theme']['colors']['text'];
+
+/**
+ * All available border color types.
+ * Derived from your registered theme's borders.
+ */
+export type Border = keyof RegisteredTheme['theme']['colors']['border'];
+
+/**
+ * Complete color system structure.
+ */
+export type AllColorTypes = RegisteredTheme['theme']['colors'];

package/src/theme/extensions.ts

@@ -0,0 +1,99 @@
+/* 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';
+
+/**
+ * Default fallback theme structure.
+ * Used when no custom theme is registered.
+ */
+export interface DefaultTheme {
+    intents: Record<string, IntentValue>;
+    radii: Record<string, number>;
+    shadows: Record<string, ShadowValue>;
+    colors: {
+        pallet: Record<string, Record<Shade, ColorValue>>;
+        surface: Record<string, ColorValue>;
+        text: Record<string, ColorValue>;
+        border: Record<string, ColorValue>;
+    };
+    sizes: {
+        button: Record<string, ButtonSizeValue>;
+        chip: Record<string, ChipSizeValue>;
+        badge: Record<string, BadgeSizeValue>;
+        icon: Record<string, IconSizeValue>;
+        input: Record<string, InputSizeValue>;
+        radioButton: Record<string, RadioButtonSizeValue>;
+        select: Record<string, SelectSizeValue>;
+        slider: Record<string, SliderSizeValue>;
+        switch: Record<string, SwitchSizeValue>;
+        textarea: Record<string, TextAreaSizeValue>;
+        avatar: Record<string, AvatarSizeValue>;
+        progress: Record<string, ProgressSizeValue>;
+        accordion: Record<string, AccordionSizeValue>;
+        activityIndicator: Record<string, ActivityIndicatorSizeValue>;
+        breadcrumb: Record<string, BreadcrumbSizeValue>;
+        list: Record<string, ListSizeValue>;
+        menu: Record<string, MenuSizeValue>;
+        text: Record<string, TextSizeValue>;
+        tabBar: Record<string, TabBarSizeValue>;
+        table: Record<string, TableSizeValue>;
+        tooltip: Record<string, TooltipSizeValue>;
+        view: Record<string, ViewSizeValue>;
+        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>>;
+}
+
+/**
+ * CustomThemeRegistry - Augment this interface to register your custom theme.
+ *
+ * All derived types (Intent, Radius, Size, etc.) come from this interface.
+ * Build your theme, then register it via module augmentation:
+ *
+ * @example
+ * ```typescript
+ * import { createTheme, fromTheme, lightTheme } from '@idealyst/theme';
+ *
+ * const myTheme = fromTheme(lightTheme)
+ *   .addIntent('brand', { ... })
+ *   .addRadius('2xl', 24)
+ *   .build();
+ *
+ * // Register your theme to get type inference
+ * declare module '@idealyst/theme' {
+ *   interface CustomThemeRegistry {
+ *     theme: typeof myTheme;
+ *   }
+ * }
+ *
+ * // Now all components get: Intent = 'primary' | 'brand' | ..., Radius = 'none' | ... | '2xl', etc.
+ * ```
+ */
+export interface CustomThemeRegistry {
+    // Empty by default - users augment to add 'theme' property
+}
+
+/**
+ * Helper to extract theme type from registry, falling back to DefaultTheme.
+ */
+type ResolveCustomTheme = CustomThemeRegistry extends { theme: infer T } ? T : DefaultTheme;
+
+/**
+ * RegisteredTheme - Contains the resolved theme type.
+ * DO NOT augment this directly - augment CustomThemeRegistry instead.
+ */
+export interface RegisteredTheme {
+    theme: ResolveCustomTheme;
+}
+
+/**
+ * Extend this interface to add custom properties to IntentValue.
+ */
+export interface IntentValueExtensions {}

package/src/theme/index.ts

@@ -1,36 +1,50 @@
-import { AllColorTypes, Color, ColorValue } from "./color";
-import { Intent, IntentValue } from "./intent";
-import { AllComponentSizes, SizeValue } from "./size";
-import { AllShadowTypes } from "./shadow";
+import { RegisteredTheme } from "./extensions";
 
 /**
- * Interaction state configuration for hover, focus, active states
+ * All available border radius values.
+ * Derived from your registered theme's radii.
  */
-export type InteractionConfig = {
-    /** Background color for focused/highlighted items (e.g., list items, select options) */
-    focusedBackground: string;
-    /** Border/outline color for focused elements */
-    focusBorder: string;
-    /** Opacity values for various interaction states */
-    opacity: {
-        /** Opacity for hovered elements */
-        hover: number;
-        /** Opacity for active/pressed elements */
-        active: number;
-        /** Opacity for disabled elements */
-        disabled: number;
-    };
-};
+export type Radius = keyof RegisteredTheme['theme']['radii'];
 
-export type Theme = {
-    intents: Record<Intent, IntentValue>;
-    colors: AllColorTypes;
-    sizes: AllComponentSizes;
-    shadows: AllShadowTypes;
-    interaction: InteractionConfig;
-};
+/**
+ * Theme type - derived from RegisteredTheme.
+ */
+export type Theme = RegisteredTheme['theme'];
 
+export * from "./extensions";
 export * from "./intent";
 export * from "./size";
 export * from "./color";
 export * from "./shadow";
+
+// Re-export structures except IntentValue and ShadowValue (those are re-exported with extensions from intent.ts and shadow.ts)
+export type {
+    InteractionConfig,
+    ColorValue,
+    Shade,
+    SizeValue,
+    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 "./structures";

package/src/theme/intent.ts

@@ -1,8 +1,13 @@
-export type Intent = 'primary' | 'success' | 'error' | 'warning' | 'neutral' | 'info';
+import { RegisteredTheme, IntentValueExtensions } from './extensions';
+import { IntentValue as BaseIntentValue } from './structures';
 
-export type IntentValue = {
-    primary: string;
-    contrast: string;
-    light: string;
-    dark: string;
-}
+/**
+ * All available intent types.
+ * Derived from your registered theme's intents.
+ */
+export type Intent = keyof RegisteredTheme['theme']['intents'];
+
+/**
+ * Intent value structure with any extensions.
+ */
+export type IntentValue = BaseIntentValue & IntentValueExtensions;

package/src/theme/shadow.ts

@@ -1,18 +1,14 @@
-export type ShadowVariant = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+import { RegisteredTheme } from './extensions';
+import type { ShadowValue } from './structures';
+export type { ShadowValue };
 
-export type ShadowValue = {
-    // Android: elevation value
-    elevation: number;
+/**
+ * All available shadow variant names.
+ * Derived from your registered theme's shadows.
+ */
+export type ShadowVariant = keyof RegisteredTheme['theme']['shadows'];
 
-    // iOS: shadow properties
-    shadowColor: string;
-    shadowOffset: {
-        width: number;
-        height: number;
-    };
-    shadowOpacity: number;
-    shadowRadius: number;
-    boxShadow?: string;
-} | {}
-
-export type AllShadowTypes = Record<ShadowVariant, ShadowValue>;
+/**
+ * Complete shadow system structure.
+ */
+export type AllShadowTypes = RegisteredTheme['theme']['shadows'];

package/src/theme/size.ts

@@ -1,208 +1,12 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-export type SizeValue = number | string
+import { RegisteredTheme } from './extensions';
 
 /**
- * Typography variants for semantic text styling
+ * All available size variants.
+ * Derived from your registered theme's sizes.
  */
-export type Typography =
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'subtitle1'
-    | 'subtitle2'
-    | 'body1'
-    | 'body2'
-    | 'caption'
+export type Size = keyof RegisteredTheme['theme']['sizes']['button'];
 
 /**
- * Typography style values
+ * Complete component sizes structure.
  */
-export type TypographyValue = {
-    fontSize: SizeValue;
-    lineHeight: SizeValue;
-    fontWeight: '300' | '400' | '500' | '600' | '700';
-}
-
-// Size alone is not very useful, as sizes are contextual based on the component
-export type AllComponentSizes = {
-    button: Record<Size, ButtonSizeValue>;
-    chip: Record<Size, ChipSizeValue>;
-    badge: Record<Size, BadgeSizeValue>;
-    icon: Record<Size, IconSizeValue>;
-    input: Record<Size, InputSizeValue>;
-    radioButton: Record<Size, RadioButtonSizeValue>;
-    select: Record<Size, SelectSizeValue>;
-    slider: Record<Size, SliderSizeValue>;
-    switch: Record<Size, SwitchSizeValue>;
-    textarea: Record<Size, TextAreaSizeValue>;
-    avatar: Record<Size, AvatarSizeValue>;
-    progress: Record<Size, ProgressSizeValue>;
-    accordion: Record<Size, AccordionSizeValue>;
-    activityIndicator: Record<Size, ActivityIndicatorSizeValue>;
-    breadcrumb: Record<Size, BreadcrumbSizeValue>;
-    list: Record<Size, ListSizeValue>;
-    menu: Record<Size, MenuSizeValue>;
-    text: Record<Size, TextSizeValue>;
-    tabBar: Record<Size, TabBarSizeValue>;
-    table: Record<Size, TableSizeValue>;
-    tooltip: Record<Size, TooltipSizeValue>;
-    view: Record<Size, ViewSizeValue>;
-    typography: Record<Typography, TypographyValue>;
-}
-
-
-// Derivative size values based on context
-export type ButtonSizeValue = {
-    paddingVertical: SizeValue;
-    paddingHorizontal: SizeValue;
-    minHeight: SizeValue;
-    fontSize: SizeValue;
-    iconSize: SizeValue;
-}
-
-export type ChipSizeValue = {
-    paddingVertical: SizeValue;
-    paddingHorizontal: SizeValue;
-    minHeight: SizeValue;
-    borderRadius: SizeValue;
-    fontSize: SizeValue;
-    lineHeight: SizeValue;
-    iconSize: SizeValue;
-}
-
-export type BadgeSizeValue = {
-    minWidth: SizeValue;
-    height: SizeValue;
-    paddingHorizontal: SizeValue;
-    fontSize: SizeValue;
-    lineHeight: SizeValue;
-    iconSize: SizeValue;
-}
-
-export type IconSizeValue = {
-    width: SizeValue;
-    height: SizeValue;
-    fontSize: SizeValue;
-}
-
-export type InputSizeValue = {
-    height: SizeValue;
-    paddingHorizontal: SizeValue;
-    fontSize: SizeValue;
-    iconSize: SizeValue;
-    iconMargin: SizeValue;
-}
-
-export type RadioButtonSizeValue = {
-    radioSize: SizeValue;
-    radioDotSize: SizeValue;
-    fontSize: SizeValue;
-    gap: SizeValue;
-}
-
-export type SelectSizeValue = {
-    paddingHorizontal: SizeValue;
-    minHeight: SizeValue;
-    fontSize: SizeValue;
-    iconSize: SizeValue;
-}
-
-export type SliderSizeValue = {
-    trackHeight: SizeValue;
-    thumbSize: SizeValue;
-    thumbIconSize: SizeValue;
-    markHeight: SizeValue;
-    labelFontSize: SizeValue;
-}
-
-export type SwitchSizeValue = {
-    trackWidth: SizeValue;
-    trackHeight: SizeValue;
-    thumbSize: SizeValue;
-    thumbIconSize: SizeValue;
-    translateX: SizeValue;
-}
-
-export type TextAreaSizeValue = {
-    fontSize: SizeValue;
-    padding: SizeValue;
-    lineHeight: SizeValue;
-    minHeight: SizeValue;
-}
-
-export type AvatarSizeValue = {
-    width: SizeValue;
-    height: SizeValue;
-    fontSize: SizeValue;
-}
-
-export type ProgressSizeValue = {
-    linearHeight: SizeValue;
-    circularSize: SizeValue;
-    labelFontSize: SizeValue;
-    circularLabelFontSize: SizeValue;
-}
-
-export type AccordionSizeValue = {
-    headerPadding: SizeValue;
-    headerFontSize: SizeValue;
-    iconSize: SizeValue;
-    contentPadding: SizeValue;
-}
-
-export type ActivityIndicatorSizeValue = {
-    size: SizeValue;
-    borderWidth: SizeValue;
-}
-
-export type BreadcrumbSizeValue = {
-    fontSize: SizeValue;
-    lineHeight: SizeValue;
-    iconSize: SizeValue;
-}
-
-export type ListSizeValue = {
-    paddingVertical: SizeValue;
-    paddingHorizontal: SizeValue;
-    minHeight: SizeValue;
-    iconSize: SizeValue;
-    labelFontSize: SizeValue;
-    labelLineHeight: SizeValue;
-}
-
-export type MenuSizeValue = {
-    paddingVertical: SizeValue;
-    paddingHorizontal: SizeValue;
-    iconSize: SizeValue;
-    labelFontSize: SizeValue;
-}
-
-export type TextSizeValue = {
-    fontSize: SizeValue;
-    lineHeight: SizeValue;
-}
-
-export type TabBarSizeValue = {
-    fontSize: SizeValue;
-    lineHeight: SizeValue;
-    padding: SizeValue;
-}
-
-export type TableSizeValue = {
-    padding: SizeValue;
-    fontSize: SizeValue;
-    lineHeight: SizeValue;
-}
-
-export type TooltipSizeValue = {
-    fontSize: SizeValue;
-    padding: SizeValue;
-}
-
-export type ViewSizeValue = {
-    padding: SizeValue;
-    spacing: SizeValue;
-}
+export type AllComponentSizes = RegisteredTheme['theme']['sizes'];