@temboplus/frontend-react-core 0.1.3-beta.37 → 0.1.3-beta.39

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

@@ -1,29 +0,0 @@
-import "./theme-overrides.css";
-import React from 'react';
-import type { ThemeConfig } from 'antd';
-import { UIConstants } from './tokens/constants.js';
-import { ColorPalette, ThemeMode } from './tokens/colors.js';
-/**
- * Theme context value - now includes constants!
- */
-export interface TemboTheme {
-    colors: ColorPalette;
-    constants: UIConstants;
-    mode: ThemeMode;
-}
-/**
- * Theme provider props
- */
-export interface TemboThemeProviderProps {
-    children: React.ReactNode;
-    mode?: ThemeMode;
-    antdThemeOverrides?: Partial<ThemeConfig>;
-}
-/**
- * TemboThemeProvider
- */
-export declare const TemboThemeProvider: React.FC<TemboThemeProviderProps>;
-/**
- * Hook to access theme - now returns constants too!
- */
-export declare const useNewTemboTheme: () => TemboTheme;

package/dist/theme/theme-provider.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./theme-overrides.css";
-import React from 'react';
-import { ConfigProvider } from 'antd';
-import { defaultUIConstants } from './tokens/constants.js';
-import { buildAntDTheme } from './theme-config.js';
-import { buildColorPalette } from './tokens/colors.js';
-const TemboThemeContext = React.createContext({
-    colors: buildColorPalette('light'),
-    constants: defaultUIConstants,
-    mode: 'light',
-});
-/**
- * TemboThemeProvider
- */
-export const TemboThemeProvider = ({ children, mode = 'light', antdThemeOverrides, }) => {
-    const colors = React.useMemo(() => buildColorPalette(mode), [mode]);
-    const constants = React.useMemo(() => defaultUIConstants, []);
-    const antdTheme = React.useMemo(() => {
-        var _a, _b;
-        const baseTheme = buildAntDTheme(colors, constants);
-        if (!antdThemeOverrides)
-            return baseTheme;
-        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, constants, antdThemeOverrides]);
-    const contextValue = React.useMemo(() => ({ colors, constants, mode }), [colors, constants, mode]);
-    return (_jsx(TemboThemeContext.Provider, { value: contextValue, children: _jsx(ConfigProvider, { theme: antdTheme, children: children }) }));
-};
-/**
- * Hook to access theme - now returns constants too!
- */
-export const useNewTemboTheme = () => React.useContext(TemboThemeContext);

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

@@ -1,153 +0,0 @@
-/**
- * Tembo Design System - Monochrome Foundation with Modern Semantics
- *
- * Philosophy: Pure monochrome with single accent + modern semantic colors
- * - Primary actions: Near-black (light) / Near-white (dark)
- * - All UI elements use neutral scale
- * - Blue accent for links and focus states
- * - Modern, vibrant semantic colors with AAA contrast
- *
- * Semantic color definitions:
- * - main: For icons, borders, full backgrounds, text on subtle backgrounds
- * - subtle: For light/dark background fills
- * - contrast: For icons & text on main backgrounds
- *
- * Secondary color definitions:
- * - subtlest: Barely visible tint (for large background areas)
- * - subtle: Soft but visible tint (for badges, highlights)
- * - main: Strong accent color (for icons, borders, emphasis)
- * - contrast: High contrast (for text on main backgrounds only)
- */
-export type ThemeMode = 'light' | 'dark';
-/**
- * Color scale interface (for semantic colors)
- */
-export interface ColorScale {
-    /** Main color - for icons, borders, solid backgrounds, text on subtle */
-    main: string;
-    /** Subtle background - for alert/badge backgrounds */
-    subtle: string;
-    /** Contrast color - for text/icons on main backgrounds */
-    contrast: string;
-}
-/**
- * Secondary color scale interface (4-step scale)
- */
-export interface SecondaryColorScale {
-    /** Subtlest background - barely visible tint, highest luminosity */
-    subtlest: string;
-    /** Subtle background - soft tint, still very light/dark */
-    subtle: string;
-    /** Main accent - vibrant color for icons, borders */
-    main: string;
-    /** Contrast - for text on main backgrounds only */
-    contrast: string;
-}
-/**
- * Complete color palette
- */
-export interface ColorPalette {
-    mode: ThemeMode;
-    /**
-     * Monochrome neutral scale - carefully calibrated
-     * 10-step scale (0-9) with proper WCAG contrast ratios
-     */
-    neutral: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-        6: string;
-        7: string;
-        8: string;
-        9: string;
-    };
-    absolute: {
-        black: string;
-        white: string;
-    };
-    accent: {
-        default: string;
-        hover: string;
-        active: string;
-        subtle: string;
-    };
-    semantic: {
-        success: ColorScale;
-        error: ColorScale;
-        warning: ColorScale;
-        info: ColorScale;
-        pending: ColorScale;
-    };
-    /**
-     * Secondary colors - for badges, labels, tags, highlights
-     * Each with 4-step scale: subtlest, subtle, main, contrast
-     * Text colors (primary/secondary/tertiary) work on both subtlest and subtle backgrounds
-     */
-    secondary: {
-        purple: SecondaryColorScale;
-        green: SecondaryColorScale;
-        blue: SecondaryColorScale;
-        orange: SecondaryColorScale;
-    };
-    surface: {
-        /** Main backgrounds */
-        page: string;
-        /**Elevated surfaces */
-        card: string;
-        /**Modals, dropdowns */
-        overlay: string;
-        /**Input fields */
-        input: string;
-        /** Hover states */
-        interactive: string;
-        /** Selected states */
-        selected: string;
-        /** Nested backgrounds */
-        nested: string;
-    };
-    border: {
-        subtle: string;
-        default: string;
-        strong: string;
-    };
-    text: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        disabled: string;
-        inverse: string;
-        input: string;
-    };
-    action: {
-        default: string;
-        hover: string;
-        disabled: string;
-        contrast: string;
-    };
-}
-export declare const buildColorPalette: (mode?: ThemeMode) => ColorPalette;
-export declare const lightPalette: ColorPalette;
-export declare const darkPalette: ColorPalette;
-/**
- * Color palette overrides (for custom theming)
- */
-export type ColorOverrides = {
-    neutral?: Partial<ColorPalette['neutral']>;
-    accent?: Partial<ColorPalette['accent']>;
-    semantic?: {
-        success?: Partial<ColorScale>;
-        error?: Partial<ColorScale>;
-        warning?: Partial<ColorScale>;
-        info?: Partial<ColorScale>;
-        pending?: Partial<ColorScale>;
-    };
-    secondary?: {
-        purple?: Partial<SecondaryColorScale>;
-        green?: Partial<SecondaryColorScale>;
-        blue?: Partial<SecondaryColorScale>;
-        orange?: Partial<SecondaryColorScale>;
-    };
-};

package/dist/theme/tokens/colors.js

@@ -1,306 +0,0 @@
-/**
- * Tembo Design System - Monochrome Foundation with Modern Semantics
- *
- * Philosophy: Pure monochrome with single accent + modern semantic colors
- * - Primary actions: Near-black (light) / Near-white (dark)
- * - All UI elements use neutral scale
- * - Blue accent for links and focus states
- * - Modern, vibrant semantic colors with AAA contrast
- *
- * Semantic color definitions:
- * - main: For icons, borders, full backgrounds, text on subtle backgrounds
- * - subtle: For light/dark background fills
- * - contrast: For icons & text on main backgrounds
- *
- * Secondary color definitions:
- * - subtlest: Barely visible tint (for large background areas)
- * - subtle: Soft but visible tint (for badges, highlights)
- * - main: Strong accent color (for icons, borders, emphasis)
- * - contrast: High contrast (for text on main backgrounds only)
- */
-// ============================================
-// NEUTRAL SCALE CONSTANTS
-// ============================================
-/**
- * Light mode neutral scale - Professional fintech UI
- * Optimized for clarity without being overly bold
- *
- * Visual hierarchy (dark to light):
- * 9 = Pure black (#000000) - 21:1 contrast - maximum emphasis
- * 8 = Almost black (#171717) - 17.9:1 contrast - actions, input text
- * 7 = Very dark (#404040) - 10.4:1 contrast - primary text (AAA)
- * 6 = Dark gray (#525252) - 6.4:1 contrast - strong elements
- * 5 = Medium-dark (#737373) - 3.9:1 contrast - secondary text (AA)
- * 4 = Medium (#A3A3A3) - 3.1:1 contrast - tertiary text, borders
- * 3 = Medium-light (#D4D4D4) - 2.1:1 contrast - subtle borders
- * 2 = Light gray (#E8E8E8) - 1.6:1 contrast - hover states
- * 1 = Very light (#F5F5F5) - 1.3:1 contrast - input backgrounds
- * 0 = Pure white (#FFFFFF) - 1:1 - card surfaces
- */
-const LIGHT_NEUTRAL_SCALE = {
-    0: '#FFFFFF', // Pure white
-    1: '#F5F5F5', // Very light gray
-    2: '#E8E8E8', // Light gray
-    3: '#D4D4D4', // Medium-light gray
-    4: '#A3A3A3', // Medium gray
-    5: '#737373', // Medium-dark gray
-    6: '#525252', // Dark gray
-    7: '#404040', // Very dark gray
-    8: '#171717', // Almost black
-    9: '#000000', // Pure black
-};
-/**
- * Dark mode neutral scale - Professional fintech UI
- * Inverted for dark backgrounds
- *
- * Visual hierarchy (light to dark):
- * 9 = Pure white (#FFFFFF) - maximum emphasis
- * 8 = Almost white (#F5F5F5) - actions, input text
- * 7 = Very light (#D4D4D4) - primary text
- * 6 = Light (#A3A3A3) - strong elements
- * 5 = Medium-light (#737373) - secondary text
- * 4 = Medium (#525252) - tertiary text, borders
- * 3 = Medium-dark (#404040) - subtle borders
- * 2 = Dark (#262626) - hover states
- * 1 = Very dark (#171717) - input backgrounds
- * 0 = Near black (#0A0A0A) - card surfaces
- */
-const DARK_NEUTRAL_SCALE = {
-    0: '#0A0A0A', // Near black
-    1: '#171717', // Very dark
-    2: '#262626', // Dark
-    3: '#404040', // Medium-dark
-    4: '#525252', // Medium
-    5: '#737373', // Medium-light
-    6: '#A3A3A3', // Light
-    7: '#D4D4D4', // Very light
-    8: '#F5F5F5', // Almost white
-    9: '#FFFFFF', // Pure white
-};
-// ============================================
-// COLOR PALETTE BUILDERS
-// ============================================
-/**
- * Build light mode colors with neutral scale references
- */
-const buildLightModeColors = () => {
-    const neutral = LIGHT_NEUTRAL_SCALE;
-    return {
-        mode: 'light',
-        neutral,
-        absolute: {
-            black: '#000000',
-            white: '#FFFFFF',
-        },
-        // Single accent - monochrome black
-        accent: {
-            default: neutral[7], // Almost black (#171717) - matches action.default
-            hover: neutral[6], // Very dark gray (#404040) - slightly lighter on hover
-            active: neutral[9], // Pure black (#000000) - darkest on active
-            subtle: neutral[1], // Very light gray (#F5F5F5) - subtle background
-        },
-        // Semantic colors - AAA contrast verified
-        semantic: {
-            error: {
-                main: '#DC2626', // Modern red - 5.9:1 contrast ✅
-                subtle: '#FEF2F2', // Very light red background
-                contrast: '#FFFFFF', // White text on red
-            },
-            success: {
-                main: '#0F766E', // Modern teal - 5.5:1 contrast ✅
-                subtle: '#F0FDFA', // Very light teal background
-                contrast: '#FFFFFF', // White text on teal
-            },
-            warning: {
-                main: '#EA580C', // Modern orange - 4.8:1 contrast ✅
-                subtle: '#FFF7ED', // Very light orange background
-                contrast: '#FFFFFF', // White text on orange
-            },
-            info: {
-                main: '#2563EB', // Same as accent - 6.1:1 contrast ✅
-                subtle: '#EFF6FF', // Very light blue background
-                contrast: '#FFFFFF', // White text on blue
-            },
-            pending: {
-                main: '#64748B', // Slate gray-blue - 4.5:1 contrast ✅
-                subtle: '#F8FAFC', // Very light slate
-                contrast: '#FFFFFF', // White text
-            }
-        },
-        // Secondary colors - 4-step scale with strong main colors
-        secondary: {
-            purple: {
-                subtlest: '#FDF4FF', // L: 98% - Almost white with faint purple
-                subtle: '#F5E3FF', // L: 93% - Soft purple background
-                main: '#470047', // Your dark magenta - 9.2:1 on subtlest ✅
-                contrast: '#FFFFFF', // White text on main
-            },
-            green: {
-                subtlest: '#F0FDF4', // L: 98% - Almost white with faint green
-                subtle: '#DCFCE7', // L: 95% - Soft green background
-                main: '#004700', // Your dark green - 8.9:1 on subtlest ✅
-                contrast: '#FFFFFF', // White text on main
-            },
-            blue: {
-                subtlest: '#F0F4FF', // L: 98% - Almost white with faint blue
-                subtle: '#E0E7FF', // L: 94% - Soft blue background
-                main: '#0000D1', // Your deep royal blue - 10.5:1 on subtlest ✅
-                contrast: '#FFFFFF', // White text on main
-            },
-            orange: {
-                subtlest: '#FFFBEB', // L: 98% - Almost white with faint orange
-                subtle: '#FEF3C7', // L: 95% - Soft orange/amber background
-                main: '#472400', // Your dark brown-orange - 10.8:1 on subtlest ✅
-                contrast: '#FFFFFF', // White text on main
-            },
-        },
-        // Surface hierarchy - clearly mapped to neutral scale
-        surface: {
-            page: neutral[1], // Very light gray - main background
-            card: neutral[0], // Pure white - elevated surfaces
-            overlay: neutral[0], // Pure white - modals, dropdowns
-            input: neutral[0], // Pure white - input fields
-            interactive: neutral[2], // Light gray - hover states
-            selected: neutral[2], // Light gray - selected states
-            nested: neutral[1], // Very light gray - nested backgrounds
-        },
-        // Border hierarchy - clearly mapped to neutral scale
-        border: {
-            subtle: neutral[2], // Light gray - dividers, subtle borders
-            default: neutral[3], // Medium-light gray - default borders
-            strong: neutral[4], // Medium gray - emphasized borders
-        },
-        // Text hierarchy - clearly mapped for professional fintech UI
-        text: {
-            primary: neutral[7], // Very dark gray - main text (10.4:1 AAA)
-            secondary: neutral[5], // Medium-dark gray - supporting text (3.9:1 AA)
-            tertiary: neutral[4], // Medium gray - hints, captions (3.1:1)
-            disabled: neutral[3], // Medium-light gray - disabled state
-            inverse: neutral[0], // Pure white - text on dark backgrounds
-            input: neutral[8], // Almost black - input text (17.9:1 AAA)
-        },
-        // Action colors - clearly mapped to neutral scale
-        action: {
-            default: neutral[8], // Almost black - primary actions
-            hover: neutral[7], // Very dark gray - action hover
-            disabled: neutral[2], // Light gray - disabled actions
-            contrast: neutral[0], // Pure white - text on actions
-        },
-    };
-};
-/**
- * Build dark mode colors with neutral scale references
- */
-const buildDarkModeColors = () => {
-    const neutral = DARK_NEUTRAL_SCALE;
-    return {
-        mode: 'dark',
-        neutral,
-        absolute: {
-            black: '#000000',
-            white: '#FFFFFF',
-        },
-        // Accent - brighter for dark backgrounds
-        accent: {
-            default: '#60A5FA', // Brighter blue for dark bg
-            hover: '#93C5FD',
-            active: '#BFDBFE',
-            subtle: '#1E3A8A',
-        },
-        // Semantic colors - vibrant on dark, AAA contrast
-        semantic: {
-            error: {
-                main: '#F87171', // Bright red - 8.3:1 on dark ✅
-                subtle: '#7F1D1D', // Dark red background
-                contrast: '#450A0A', // Very dark red
-            },
-            success: {
-                main: '#5EEAD4', // Bright teal - 12.5:1 on dark ✅
-                subtle: '#134E4A', // Dark teal background
-                contrast: '#0A3A35', // Very dark teal
-            },
-            warning: {
-                main: '#FB923C', // Bright orange - 9.5:1 on dark ✅
-                subtle: '#7C2D12', // Dark orange background
-                contrast: '#431407', // Very dark orange
-            },
-            info: {
-                main: '#60A5FA', // Bright blue - 8.0:1 on dark ✅
-                subtle: '#1E3A8A', // Dark blue background
-                contrast: '#1E3A8A', // Dark blue
-            },
-            pending: {
-                main: '#94A3B8', // Light slate - 6.5:1 on dark ✅
-                subtle: '#1E293B', // Dark slate
-                contrast: '#0F172A', // Very dark slate
-            }
-        },
-        // Secondary colors - bright main, dark backgrounds (inverted principle)
-        secondary: {
-            purple: {
-                subtlest: '#2E0A2E', // L: 14% - Very dark purple (barely visible)
-                subtle: '#4A1A4A', // L: 20% - Dark purple (subtle)
-                main: '#E879F9', // L: 70% - Bright magenta - 8.5:1 on subtlest ✅
-                contrast: '#1A0A1A', // Very dark for text on bright
-            },
-            green: {
-                subtlest: '#0A1F0A', // L: 12% - Very dark green
-                subtle: '#1A3A1A', // L: 18% - Dark green
-                main: '#4ADE80', // L: 75% - Bright green - 10.2:1 on subtlest ✅
-                contrast: '#0A1A0A', // Very dark green
-            },
-            blue: {
-                subtlest: '#0A0F2E', // L: 13% - Very dark blue
-                subtle: '#1A1F4A', // L: 19% - Dark blue
-                main: '#60A5FA', // L: 72% - Bright blue - 8.0:1 on subtlest ✅
-                contrast: '#0A0F1A', // Very dark blue
-            },
-            orange: {
-                subtlest: '#1F1A0A', // L: 10% - Very dark orange
-                subtle: '#3A2E1A', // L: 18% - Dark orange
-                main: '#FB923C', // L: 75% - Bright orange - 9.5:1 on subtlest ✅
-                contrast: '#1A0F0A', // Very dark orange
-            },
-        },
-        // Surface hierarchy - clearly mapped to neutral scale
-        surface: {
-            page: neutral[1], // Very dark - main background
-            card: neutral[0], // Near black - elevated surfaces
-            overlay: neutral[0], // Near black - modals, dropdowns
-            input: neutral[0], // Near black - input fields
-            interactive: neutral[2], // Dark - hover states
-            selected: neutral[2], // Dark - selected states
-            nested: neutral[1], // Very dark - nested backgrounds
-        },
-        // Border hierarchy - clearly mapped to neutral scale
-        border: {
-            subtle: neutral[2], // Dark - dividers, subtle borders
-            default: neutral[3], // Medium-dark - default borders
-            strong: neutral[4], // Medium - emphasized borders
-        },
-        // Text hierarchy - clearly mapped for professional fintech UI
-        text: {
-            primary: neutral[7], // Very light - main text
-            secondary: neutral[5], // Medium-light - supporting text
-            tertiary: neutral[4], // Medium - hints, captions
-            disabled: neutral[3], // Medium-dark - disabled state
-            inverse: neutral[0], // Near black - text on light backgrounds
-            input: neutral[8], // Almost white - input text
-        },
-        // Action colors - clearly mapped to neutral scale
-        action: {
-            default: neutral[8], // Almost white - primary actions
-            hover: neutral[7], // Very light - action hover
-            disabled: neutral[2], // Dark - disabled actions
-            contrast: neutral[0], // Near black - text on actions
-        },
-    };
-};
-// ============================================
-// EXPORTS
-// ============================================
-export const buildColorPalette = (mode = 'light') => {
-    return mode === 'light' ? buildLightModeColors() : buildDarkModeColors();
-};
-export const lightPalette = buildLightModeColors();
-export const darkPalette = buildDarkModeColors();

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

@@ -1,136 +0,0 @@
-/**
- * Tembo Design System - Constants
- *
- * All non-color design tokens: typography, spacing, radius, shadows, etc.
- * Bold rounded corners with subtle shadows for elevation.
- */
-export interface UIConstants {
-    /**
-     * Typography tokens
-     */
-    typography: {
-        fontFamily: {
-            base: string;
-            mono: string;
-        };
-        fontSize: {
-            xs: number;
-            sm: number;
-            base: number;
-            lg: number;
-            xl: number;
-            '2xl': number;
-            '3xl': number;
-            '4xl': number;
-            '5xl': number;
-        };
-        fontWeight: {
-            light: number;
-            regular: number;
-            medium: number;
-            semibold: number;
-            bold: number;
-            heavy: number;
-        };
-        lineHeight: {
-            tight: number;
-            base: number;
-            relaxed: number;
-        };
-        letterSpacing: {
-            tight: string;
-            base: string;
-            wide: string;
-        };
-    };
-    /**
-     * Spacing scale (4px base unit)
-     * Includes both numeric values and semantic aliases
-     */
-    spacing: {
-        0: number;
-        1: number;
-        2: number;
-        3: number;
-        4: number;
-        5: number;
-        6: number;
-        8: number;
-        10: number;
-        12: number;
-        16: number;
-        20: number;
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-        '2xl': number;
-        '3xl': number;
-        '4xl': number;
-        '5xl': number;
-    };
-    /**
-     * Border radius tokens
-     * Bold, smooth rounded corners throughout the design
-     */
-    radius: {
-        none: number;
-        sm: number;
-        base: number;
-        md: number;
-        lg: number;
-        xl: number;
-        full: number;
-        button: number;
-        input: number;
-        card: number;
-        modal: number;
-        avatar: number;
-    };
-    /**
-     * Box shadow tokens
-     * Subtle shadows for gentle elevation
-     * Inputs and buttons have no shadow - shadows only for raised/overlay elements
-     */
-    shadow: {
-        none: string;
-        sm: string;
-        base: string;
-        md: string;
-        lg: string;
-        xl: string;
-        card: string;
-        modal: string;
-        popover: string;
-        tooltip: string;
-    };
-    /**
-     * Z-index layers
-     */
-    zIndex: {
-        dropdown: number;
-        modal: number;
-        popover: number;
-        tooltip: number;
-        notification: number;
-    };
-    /**
-     * Transition timing
-     */
-    transition: {
-        fast: string;
-        base: string;
-        slow: string;
-    };
-}
-/**
- * Default UI constants
- * Bold rounded corners with subtle shadows for elevation
- */
-export declare const defaultUIConstants: UIConstants;
-/**
- * Dark mode adjustments
- * Shadows are more subtle/absent in dark mode
- */
-export declare const buildDarkModeConstants: () => Pick<UIConstants, "shadow">;