@temboplus/frontend-react-core 0.1.3-beta.1 → 0.1.3-beta.11

package/dist/theme/theme-provider.d.ts

@@ -1,87 +1,96 @@
 import React from 'react';
-import type { ThemeConfig } from 'antd';
-import { TemboColorPalette, TemboColorOverrides } from './colors.js';
-import { TemboUIConstants, TemboUIConstantsOverrides } from './constants.js';
+import { type ThemeConfig } from 'antd';
+import { ColorPalette, ThemeMode } from './tokens/color.js';
 /**
- * Shape of the theme context exposed via useTemboTheme()
+ * Theme context value
  */
-export interface TemboThemeContextValue {
-    colors: TemboColorPalette;
-    constants: TemboUIConstants;
+export interface TemboTheme {
+    colors: ColorPalette;
+    mode: ThemeMode;
 }
 /**
- * Props for TemboThemeProvider
+ * Theme provider props
+ */
+export interface TemboThemeProviderProps {
+    children: React.ReactNode;
+    /** Theme mode - 'light' or 'dark' */
+    mode?: ThemeMode;
+    /** Raw Ant Design theme overrides (advanced usage) */
+    antdThemeOverrides?: Partial<ThemeConfig>;
+}
+/**
+ * TemboThemeProvider
+ *
+ * Wraps your application with monochrome-first theming system.
+ * Supports seamless light/dark mode switching.
  *
  * @example
+ * ```tsx
  * // Basic usage
  * <TemboThemeProvider>
  *   <App />
  * </TemboThemeProvider>
  *
- * @example
- * // With color overrides
- * <TemboThemeProvider
- *   colors={{
- *     primary: { main: '#007bff' },
- *     action: { main: '#28a745' }
- *   }}
- * >
+ * // Dark mode
+ * <TemboThemeProvider mode="dark">
  *   <App />
  * </TemboThemeProvider>
  *
- * @example
- * // With all customizations
- * <TemboThemeProvider
- *   colors={{ primary: { main: '#007bff' } }}
- *   constants={{ radius: { base: 8 } }}
- *   themeOverrides={{
- *     components: {
- *       Button: { controlHeight: 40 }
- *     }
- *   }}
- * >
- *   <App />
- * </TemboThemeProvider>
- */
-export interface TemboThemeProviderProps {
-    children: React.ReactNode;
-    /** Color palette overrides - supports deep partial overrides */
-    colors?: TemboColorOverrides;
-    /** UI constants overrides - supports deep partial overrides */
-    constants?: TemboUIConstantsOverrides;
-    /** Raw Ant Design ThemeConfig overrides for advanced customization */
-    themeOverrides?: Partial<ThemeConfig>;
-}
-/**
- * TemboThemeProvider
- *
- * Wraps your application to provide theming through React context and Ant Design's ConfigProvider.
- * Merges default colors/constants with host overrides and configures Ant Design components.
+ * // With state management for toggling
+ * const [mode, setMode] = useState<ThemeMode>('light');
  *
- * All child components can access theme values via the useTemboTheme() hook.
+ * <TemboThemeProvider mode={mode}>
+ *   <App onToggleTheme={() => setMode(m => m === 'light' ? 'dark' : 'light')} />
+ * </TemboThemeProvider>
+ * ```
  */
 export declare const TemboThemeProvider: React.FC<TemboThemeProviderProps>;
 /**
- * Hook to access the active Tembo theme
- *
- * Returns the merged color palette and UI constants with any host overrides applied.
- * Components should always use this hook instead of importing defaults directly.
+ * Hook to access current theme
  *
- * @returns Theme context containing colors and constants
+ * Returns the active color palette and theme mode.
+ * Use this in components that need direct access to theme tokens.
  *
  * @example
+ * ```tsx
  * function MyComponent() {
- *   const { colors, constants } = useTemboTheme();
+ *   const { colors, mode } = useTemboTheme();
  *
  *   return (
  *     <div style={{
  *       color: colors.text.primary,
- *       padding: constants.spacing.md,
- *       borderRadius: constants.radius.base
+ *       backgroundColor: colors.surface.card,
+ *       padding: spacing[4],
+ *     }}>
+ *       Current theme: {mode}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using secondary colors for data visualization
+ * function ProductCard({ type }: { type: string }) {
+ *   const { colors } = useTemboTheme();
+ *
+ *   const colorMap = {
+ *     savings: colors.secondary.blue,
+ *     investment: colors.secondary.purple,
+ *     credit: colors.secondary.pink,
+ *   };
+ *
+ *   const color = colorMap[type] || colors.secondary.blue;
+ *
+ *   return (
+ *     <div style={{
+ *       borderLeft: `4px solid ${color.main}`,
+ *       backgroundColor: color.subtle,
  *     }}>
- *       Themed content
+ *       Product content
  *     </div>
  *   );
  * }
+ * ```
  */
-export declare const useTemboTheme: () => TemboThemeContextValue;
+export declare const useNewTemboTheme: () => TemboTheme;

package/dist/theme/theme-provider.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ConfigProvider } from 'antd';
+import { buildAntDTheme } from './theme-config.js';
+import { buildColorPalette } from './tokens/color.js';
+const TemboThemeContext = React.createContext({
+    colors: buildColorPalette('light'),
+    mode: 'light',
+});
+/**
+ * TemboThemeProvider
+ *
+ * Wraps your application with monochrome-first theming system.
+ * Supports seamless light/dark mode switching.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TemboThemeProvider>
+ *   <App />
+ * </TemboThemeProvider>
+ *
+ * // Dark mode
+ * <TemboThemeProvider mode="dark">
+ *   <App />
+ * </TemboThemeProvider>
+ *
+ * // With state management for toggling
+ * const [mode, setMode] = useState<ThemeMode>('light');
+ *
+ * <TemboThemeProvider mode={mode}>
+ *   <App onToggleTheme={() => setMode(m => m === 'light' ? 'dark' : 'light')} />
+ * </TemboThemeProvider>
+ * ```
+ */
+export const TemboThemeProvider = ({ children, mode = 'light', antdThemeOverrides, }) => {
+    // Build color palette for current mode
+    const colors = React.useMemo(() => buildColorPalette(mode), [mode]);
+    // Build Ant Design theme configuration
+    const antdTheme = React.useMemo(() => {
+        var _a, _b;
+        const baseTheme = buildAntDTheme(colors);
+        if (!antdThemeOverrides)
+            return baseTheme;
+        // Deep merge overrides
+        return Object.assign(Object.assign({}, baseTheme), { token: Object.assign(Object.assign({}, baseTheme.token), ((_a = antdThemeOverrides.token) !== null && _a !== void 0 ? _a : {})), components: Object.assign(Object.assign({}, baseTheme.components), ((_b = antdThemeOverrides.components) !== null && _b !== void 0 ? _b : {})) });
+    }, [colors, antdThemeOverrides]);
+    // Build context value
+    const contextValue = React.useMemo(() => ({ colors, mode }), [colors, mode]);
+    return (_jsx(TemboThemeContext.Provider, { value: contextValue, children: _jsx(ConfigProvider, { theme: antdTheme, children: children }) }));
+};
+/**
+ * Hook to access current theme
+ *
+ * Returns the active color palette and theme mode.
+ * Use this in components that need direct access to theme tokens.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { colors, mode } = useTemboTheme();
+ *
+ *   return (
+ *     <div style={{
+ *       color: colors.text.primary,
+ *       backgroundColor: colors.surface.card,
+ *       padding: spacing[4],
+ *     }}>
+ *       Current theme: {mode}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using secondary colors for data visualization
+ * function ProductCard({ type }: { type: string }) {
+ *   const { colors } = useTemboTheme();
+ *
+ *   const colorMap = {
+ *     savings: colors.secondary.blue,
+ *     investment: colors.secondary.purple,
+ *     credit: colors.secondary.pink,
+ *   };
+ *
+ *   const color = colorMap[type] || colors.secondary.blue;
+ *
+ *   return (
+ *     <div style={{
+ *       borderLeft: `4px solid ${color.main}`,
+ *       backgroundColor: color.subtle,
+ *     }}>
+ *       Product content
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useNewTemboTheme = () => React.useContext(TemboThemeContext);

package/dist/theme/tokens/color.d.ts

@@ -0,0 +1,168 @@
+/**
+ * Tembo Design System - Color Tokens
+ *
+ * Monochrome-first design system with purposeful color usage.
+ *
+ * Philosophy:
+ * - Monochrome foundation (4 neutral tones)
+ * - Color used purposefully (semantic feedback, categories, data viz)
+ * - Standard blue for links (web conventions)
+ * - Theme-aware: entire system adapts to light/dark mode
+ *
+ * Inspired by: Wise, Linear, Apple HIG
+ */
+export type ThemeMode = 'light' | 'dark';
+/**
+ * Color scale interface
+ * Used for semantic and secondary colors
+ */
+export interface ColorScale {
+    /** Main color - primary usage */
+    main: string;
+    /** Subtle background variant */
+    subtle: string;
+    /** Text color that contrasts with main */
+    contrast: string;
+}
+/**
+ * Complete color palette
+ */
+export interface ColorPalette {
+    mode: ThemeMode;
+    /**
+     * Monochrome foundation - 4 neutral tones
+     * Theme-aware: inverts in dark mode
+     *
+     * 1 = Brightest (backgrounds)
+     * 2 = Subtle (hover states, dividers)
+     * 3 = Medium (borders, disabled text)
+     * 4 = Darkest (text, primary elements)
+     */
+    neutral: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    /**
+     * Absolute colors - never change
+     */
+    absolute: {
+        black: string;
+        white: string;
+    };
+    /**
+     * Links - standard web colors
+     * Same in both themes (chosen for universal contrast)
+     */
+    link: {
+        /** Default link color - standard blue */
+        default: string;
+        /** Hover state */
+        hover: string;
+        /** Visited link color */
+        visited: string;
+        /** Active/pressed state */
+        active: string;
+    };
+    /**
+     * Semantic colors - purpose-driven feedback
+     * Theme-aware: adapts for optimal contrast
+     */
+    semantic: {
+        success: ColorScale;
+        error: ColorScale;
+        warning: ColorScale;
+        info: ColorScale;
+    };
+    /**
+     * Secondary colors - for categories and data visualization
+     * Main color works in both themes, subtle backgrounds adapt
+     */
+    secondary: {
+        blue: ColorScale;
+        purple: ColorScale;
+        pink: ColorScale;
+        amber: ColorScale;
+        emerald: ColorScale;
+        orange: ColorScale;
+    };
+    /**
+     * Surface hierarchy - derived from neutral scale
+     * Convenience tokens for common surfaces
+     */
+    surface: {
+        /** Main page background */
+        page: string;
+        /** Cards, panels, elevated content */
+        card: string;
+        /** Modals, popovers, dropdowns */
+        overlay: string;
+        /** Hover state for interactive surfaces */
+        interactive: string;
+        /** Selected state backgrounds */
+        selected: string;
+        /** Nested/subtle backgrounds */
+        nested: string;
+    };
+    /**
+     * Border colors - derived from neutral scale
+     */
+    border: {
+        /** Subtle borders - dividers, separators */
+        subtle: string;
+        /** Default borders - form inputs, cards */
+        default: string;
+        /** Strong borders - emphasis, focus alternative */
+        strong: string;
+    };
+    /**
+     * Text colors - derived from neutral scale
+     */
+    text: {
+        /** Primary text - headlines, body copy */
+        primary: string;
+        /** Secondary text - labels, supporting info */
+        secondary: string;
+        /** Tertiary text - captions, helper text */
+        tertiary: string;
+        /** Disabled state */
+        disabled: string;
+        /** Text on dark backgrounds */
+        inverse: string;
+    };
+}
+/**
+ * Build color palette for given theme mode
+ */
+export declare const buildColorPalette: (mode?: ThemeMode) => ColorPalette;
+/**
+ * Default light mode palette
+ */
+export declare const lightPalette: ColorPalette;
+/**
+ * Default dark mode palette
+ */
+export declare const darkPalette: ColorPalette;
+/**
+ * Color palette overrides (for custom theming)
+ * Allows partial overrides while maintaining type safety
+ */
+export type ColorOverrides = {
+    neutral?: Partial<ColorPalette['neutral']>;
+    link?: Partial<ColorPalette['link']>;
+    semantic?: {
+        success?: Partial<ColorScale>;
+        error?: Partial<ColorScale>;
+        warning?: Partial<ColorScale>;
+        info?: Partial<ColorScale>;
+    };
+    secondary?: {
+        blue?: Partial<ColorScale>;
+        purple?: Partial<ColorScale>;
+        pink?: Partial<ColorScale>;
+        amber?: Partial<ColorScale>;
+        emerald?: Partial<ColorScale>;
+        orange?: Partial<ColorScale>;
+    };
+};

package/dist/theme/tokens/color.js

@@ -0,0 +1,225 @@
+/**
+ * Tembo Design System - Color Tokens
+ *
+ * Monochrome-first design system with purposeful color usage.
+ *
+ * Philosophy:
+ * - Monochrome foundation (4 neutral tones)
+ * - Color used purposefully (semantic feedback, categories, data viz)
+ * - Standard blue for links (web conventions)
+ * - Theme-aware: entire system adapts to light/dark mode
+ *
+ * Inspired by: Wise, Linear, Apple HIG
+ */
+/**
+ * Build light mode colors
+ */
+const buildLightModeColors = () => ({
+    mode: 'light',
+    neutral: {
+        1: '#FFFFFF', // Pure white - cards, inputs
+        2: '#F7F8F9', // Light gray - page backgrounds, hover
+        3: '#E1E4E8', // Medium gray - borders
+        4: '#2E3338', // Dark gray - text, primary elements
+    },
+    absolute: {
+        black: '#000000',
+        white: '#FFFFFF',
+    },
+    link: {
+        default: '#2563EB', // Standard web blue
+        hover: '#1D4ED8', // Darker blue
+        visited: '#7C3AED', // Purple (standard)
+        active: '#1E40AF', // Even darker blue
+    },
+    semantic: {
+        success: {
+            main: '#059669', // Dark green (readable on white)
+            subtle: '#ECFDF5', // Very light green
+            contrast: '#FFFFFF', // White text on main
+        },
+        error: {
+            main: '#DC2626', // Dark red
+            subtle: '#FEF2F2', // Very light red
+            contrast: '#FFFFFF',
+        },
+        warning: {
+            main: '#D97706', // Dark amber
+            subtle: '#FFFBEB', // Very light yellow
+            contrast: '#FFFFFF',
+        },
+        info: {
+            main: '#2563EB', // Blue (matches link color)
+            subtle: '#EFF6FF', // Very light blue
+            contrast: '#FFFFFF',
+        },
+    },
+    secondary: {
+        blue: {
+            main: '#3B82F6', // Bright blue
+            subtle: '#EFF6FF',
+            contrast: '#FFFFFF',
+        },
+        purple: {
+            main: '#A855F7', // Bright purple
+            subtle: '#FAF5FF',
+            contrast: '#FFFFFF',
+        },
+        pink: {
+            main: '#EC4899', // Bright pink
+            subtle: '#FDF2F8',
+            contrast: '#FFFFFF',
+        },
+        amber: {
+            main: '#F59E0B', // Bright amber
+            subtle: '#FFFBEB',
+            contrast: '#FFFFFF',
+        },
+        emerald: {
+            main: '#10B981', // Bright emerald
+            subtle: '#ECFDF5',
+            contrast: '#FFFFFF',
+        },
+        orange: {
+            main: '#F97316', // Bright orange
+            subtle: '#FFF7ED',
+            contrast: '#FFFFFF',
+        },
+    },
+    // Derived surface tokens
+    surface: {
+        page: '#F7F8F9', // neutral[2]
+        card: '#FFFFFF', // neutral[1]
+        overlay: '#FFFFFF', // neutral[1]
+        interactive: '#F0F2F5', // Between neutral[1] and neutral[2]
+        selected: '#F7F8F9', // neutral[2]
+        nested: '#FAFBFC', // Between neutral[1] and neutral[2]
+    },
+    // Derived border tokens
+    border: {
+        subtle: '#F0F2F5', // Lighter than neutral[3]
+        default: '#E1E4E8', // neutral[3]
+        strong: '#C4CCD4', // Between neutral[3] and neutral[4]
+    },
+    // Derived text tokens
+    text: {
+        primary: '#2E3338', // neutral[4]
+        secondary: '#5E6C7A', // ~70% opacity of neutral[4]
+        tertiary: '#8A96A3', // ~50% opacity of neutral[4]
+        disabled: '#C4CCD4', // ~30% opacity of neutral[4]
+        inverse: '#FFFFFF', // neutral[1]
+    },
+});
+/**
+ * Build dark mode colors
+ */
+const buildDarkModeColors = () => ({
+    mode: 'dark',
+    neutral: {
+        1: '#1A1D21', // Dark background
+        2: '#2E3338', // Slightly lighter
+        3: '#4A5158', // Medium gray
+        4: '#F7F8F9', // Light text
+    },
+    absolute: {
+        black: '#000000',
+        white: '#FFFFFF',
+    },
+    link: {
+        default: '#3B82F6', // Brighter blue for dark bg
+        hover: '#60A5FA', // Even brighter
+        visited: '#A78BFA', // Purple
+        active: '#2563EB', // Standard blue
+    },
+    semantic: {
+        success: {
+            main: '#34D399', // Bright green (readable on dark)
+            subtle: '#064E3B', // Dark green background
+            contrast: '#000000', // Black text on bright
+        },
+        error: {
+            main: '#F87171', // Bright red
+            subtle: '#7F1D1D', // Dark red background
+            contrast: '#000000',
+        },
+        warning: {
+            main: '#FBBF24', // Bright amber
+            subtle: '#78350F', // Dark amber background
+            contrast: '#000000',
+        },
+        info: {
+            main: '#3B82F6', // Bright blue
+            subtle: '#1E3A8A', // Dark blue background
+            contrast: '#FFFFFF',
+        },
+    },
+    secondary: {
+        blue: {
+            main: '#3B82F6', // Same bright blue
+            subtle: '#1E3A8A', // Dark blue background
+            contrast: '#FFFFFF',
+        },
+        purple: {
+            main: '#A855F7', // Same bright purple
+            subtle: '#581C87', // Dark purple background
+            contrast: '#FFFFFF',
+        },
+        pink: {
+            main: '#EC4899', // Same bright pink
+            subtle: '#831843', // Dark pink background
+            contrast: '#FFFFFF',
+        },
+        amber: {
+            main: '#F59E0B', // Same bright amber
+            subtle: '#78350F', // Dark amber background
+            contrast: '#FFFFFF',
+        },
+        emerald: {
+            main: '#10B981', // Same bright emerald
+            subtle: '#064E3B', // Dark emerald background
+            contrast: '#FFFFFF',
+        },
+        orange: {
+            main: '#F97316', // Same bright orange
+            subtle: '#7C2D12', // Dark orange background
+            contrast: '#FFFFFF',
+        },
+    },
+    // Derived surface tokens
+    surface: {
+        page: '#1A1D21', // neutral[1]
+        card: '#2E3338', // neutral[2]
+        overlay: '#2E3338', // neutral[2]
+        interactive: '#3A3F45', // Between neutral[2] and neutral[3]
+        selected: '#2E3338', // neutral[2]
+        nested: '#242729', // Between neutral[1] and neutral[2]
+    },
+    // Derived border tokens
+    border: {
+        subtle: '#3A3F45', // Lighter than neutral[3]
+        default: '#4A5158', // neutral[3]
+        strong: '#5E6C7A', // Between neutral[3] and neutral[4]
+    },
+    // Derived text tokens
+    text: {
+        primary: '#F7F8F9', // neutral[4]
+        secondary: '#B4BCC5', // ~75% opacity
+        tertiary: '#8A96A3', // ~55% opacity
+        disabled: '#5E6C7A', // ~35% opacity
+        inverse: '#1A1D21', // neutral[1]
+    },
+});
+/**
+ * Build color palette for given theme mode
+ */
+export const buildColorPalette = (mode = 'light') => {
+    return mode === 'light' ? buildLightModeColors() : buildDarkModeColors();
+};
+/**
+ * Default light mode palette
+ */
+export const lightPalette = buildLightModeColors();
+/**
+ * Default dark mode palette
+ */
+export const darkPalette = buildDarkModeColors();

package/dist/theme/tokens/radius.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Border radius system
+ * Consistent 8px base (Wise standard)
+ */
+export interface RadiusScale {
+    none: number;
+    sm: number;
+    base: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+}
+export declare const radius: RadiusScale;
+/**
+ * Component-specific radius
+ */
+export interface ComponentRadius {
+    button: number;
+    input: number;
+    card: number;
+    modal: number;
+    avatar: number;
+    badge: number;
+}
+export declare const componentRadius: ComponentRadius;

package/dist/theme/tokens/radius.js

@@ -0,0 +1,17 @@
+export const radius = {
+    none: 0,
+    sm: 4,
+    base: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    full: 9999,
+};
+export const componentRadius = {
+    button: 8,
+    input: 8,
+    card: 8,
+    modal: 12,
+    avatar: 9999,
+    badge: 4,
+};