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

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

@@ -1,278 +0,0 @@
-/**
- * Tembo Color Palette
- *
- * Organized following Ant Design's token hierarchy:
- * - Seed tokens (primary, action) → Map tokens (surfaces, components) → Alias tokens (text, borders)
- * - Named by purpose, not by specific color values
- * - Supports theming through consistent semantic structure
- * - Theme-aware: neutral scale adapts to light/dark mode
- *
- * @example
- * // Usage in components
- * const { colors } = useTemboTheme();
- * style={{ color: colors.text.primary, backgroundColor: colors.neutral.lightest }}
- */
-export interface TemboColorPalette {
-    /**
-     * Primary brand colors
-     * Used for main brand identity, primary buttons, and key UI elements
-     */
-    primary: {
-        /** Base primary color - used for primary buttons and key branding elements */
-        main: string;
-        /** Hover state for primary interactive elements */
-        hover: string;
-        /** Active/pressed state for primary interactive elements */
-        active: string;
-        /** Lighter variant for backgrounds and subtle emphasis */
-        light: string;
-        /** Even lighter variant for very subtle backgrounds */
-        lighter: string;
-        /** Text color that maintains contrast on primary backgrounds (typically white) */
-        contrast: string;
-    };
-    /**
-     * Action/Interactive colors
-     * Used for links, secondary actions, and interactive elements that aren't primary
-     */
-    action: {
-        /** Base action color - used for links, secondary buttons, and interactive elements */
-        main: string;
-        hover: string;
-        active: string;
-        /** Light background for action-related content (e.g. info badges, highlighted areas) */
-        light: string;
-        lighter: string;
-        /** Disabled state for action elements */
-        disabled: string;
-        /** Text color on action backgrounds */
-        contrast: string;
-    };
-    /**
-     * Absolute colors
-     * Never change regardless of theme mode - use for logos, illustrations, or specific design requirements
-     */
-    absolute: {
-        /** Pure white - always #ffffff */
-        white: string;
-        /** Pure black - always #000000 */
-        black: string;
-    };
-    /**
-     * Neutral color scale (0-10)
-     * Theme-aware: entire scale inverts in dark mode
-     * Foundation for backgrounds, borders, and subtle UI elements
-     * 0 = brightest in current theme, 10 = dimmest in current theme
-     */
-    neutral: {
-        /** Brightest tone in current theme (white in light, black in dark) */
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        /** Middle gray - typically stays similar across themes */
-        5: string;
-        6: string;
-        7: string;
-        8: string;
-        9: string;
-        /** Dimmest tone in current theme (black in light, white in dark) */
-        10: string;
-        /** Brightest tone (maps to 0) */
-        brightest: string;
-        /** Near-brightest tone (maps to 1) */
-        lightest: string;
-        /** Very light tone (maps to 2) */
-        lighter: string;
-        /** Light tone (maps to 3) */
-        light: string;
-        /** Middle tone (maps to 5) */
-        medium: string;
-        /** Dark tone (maps to 7) */
-        dark: string;
-        /** Very dark tone (maps to 8) */
-        darker: string;
-        /** Near-dimmest tone (maps to 9) */
-        darkest: string;
-        /** Dimmest tone (maps to 10) */
-        dimmest: string;
-    };
-    /**
-     * Success colors
-     * Indicate successful operations, positive states, and confirmations
-     */
-    success: {
-        /** Main success color - for success buttons, icons, and indicators */
-        main: string;
-        /** Light background for success messages and alerts */
-        bg: string;
-        /** Border for success containers */
-        border: string;
-        /** Text color for success messages */
-        text: string;
-    };
-    /**
-     * Error colors
-     * Indicate errors, failures, and destructive actions
-     */
-    error: {
-        /** Main error color - for error states and destructive actions */
-        main: string;
-        /** Light background for error messages and alerts */
-        bg: string;
-        border: string;
-        text: string;
-    };
-    /**
-     * Warning colors
-     * Indicate caution, warnings, and important information requiring attention
-     */
-    warning: {
-        /** Main warning color */
-        main: string;
-        bg: string;
-        border: string;
-        text: string;
-    };
-    /**
-     * Info colors
-     * For informational messages and neutral call-outs
-     */
-    info: {
-        main: string;
-        bg: string;
-        border: string;
-        text: string;
-    };
-    /**
-     * Surface colors
-     * Backgrounds and containers throughout the application
-     */
-    surface: {
-        /** Main page background */
-        background: string;
-        /** Default surface/container background (cards, panels) */
-        main: string;
-        /** Elevated surfaces (modals, popovers) - typically with shadow */
-        elevated: string;
-        /** Hover state for interactive surfaces */
-        hover: string;
-        /** Very subtle background for nested content */
-        subtle: string;
-    };
-    /**
-     * Text colors
-     * For all text content with varying emphasis levels
-     */
-    text: {
-        /** Primary text - body copy, headings */
-        primary: string;
-        /** Secondary text - supporting information, labels */
-        secondary: string;
-        /** Tertiary text - de-emphasized content, helper text */
-        tertiary: string;
-        /** Quaternary text - least emphasis, subtle information */
-        quaternary: string;
-        /** Disabled text state */
-        disabled: string;
-        /** Text on dark backgrounds */
-        inverse: string;
-    };
-    /**
-     * Border colors
-     * For separators, outlines, and component boundaries
-     */
-    border: {
-        /** Default border color */
-        main: string;
-        /** Lighter border for subtle separation */
-        light: string;
-        /** Stronger border for emphasis */
-        strong: string;
-        /** Dividing lines between sections */
-        divider: string;
-    };
-    /**
-     * Component-specific colors
-     * Pre-defined color combinations for common components
-     */
-    components: {
-        /** Button color tokens */
-        button: {
-            primary: {
-                bg: string;
-                hover: string;
-                text: string;
-            };
-            default: {
-                bg: string;
-                border: string;
-                text: string;
-                hover: string;
-            };
-        };
-        /** Form input color tokens */
-        input: {
-            bg: string;
-            border: string;
-            borderHover: string;
-            borderFocus: string;
-            placeholder: string;
-        };
-        /** Table color tokens */
-        table: {
-            bg: string;
-            headerBg: string;
-            headerText: string;
-            border: string;
-            rowHover: string;
-        };
-        /** Navigation sidebar tokens */
-        sidebar: {
-            /** Dark sidebar background */
-            bg: string;
-            hover: string;
-            selected: string;
-            text: string;
-            textSecondary: string;
-        };
-    };
-    /**
-     * Utility colors
-     * Special purpose color values
-     */
-    utility: {
-        transparent: string;
-        /** Link color (often aliases action.main) */
-        link: string;
-        linkHover: string;
-        linkActive: string;
-    };
-}
-/**
- * Partial color overrides
- * Allows deep partial overrides for theming
- */
-export type TemboColorOverrides = DeepPartial<TemboColorPalette>;
-/**
- * Theme mode
- */
-export type ThemeMode = 'light' | 'dark';
-/**
- * Default color palette for light theme
- */
-export declare const defaultColorPalette: TemboColorPalette;
-/**
- * Build a complete color palette by merging overrides with defaults
- * Performs deep merge to allow partial nested overrides
- *
- * @param overrides - Partial color palette overrides
- * @param mode - Theme mode ('light' or 'dark')
- * @returns Complete color palette with overrides applied
- */
-export declare const buildColorPalette: (overrides?: TemboColorOverrides, mode?: ThemeMode) => TemboColorPalette;
-type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
-};
-export {};

package/dist/theme/deprecated/colors.js

@@ -1,212 +0,0 @@
-import { merge } from "lodash";
-/**
- * Base color values for light theme
- * These are the actual color values that get mapped to the palette
- */
-const lightModeColors = {
-    neutral: {
-        0: '#ffffff',
-        1: '#fafafa',
-        2: '#f5f5f5',
-        3: '#f0f0f0',
-        4: '#e5e5e5',
-        5: '#d4d4d4',
-        6: '#b3b3b3',
-        7: '#999999',
-        8: '#666666',
-        9: '#1a1a1a',
-        10: '#000000',
-    },
-};
-/**
- * Base color values for dark theme
- * Inverted neutral scale for dark mode
- */
-const darkModeColors = {
-    neutral: {
-        0: '#000000',
-        1: '#1a1a1a',
-        2: '#666666',
-        3: '#999999',
-        4: '#b3b3b3',
-        5: '#d4d4d4',
-        6: '#e5e5e5',
-        7: '#f0f0f0',
-        8: '#f5f5f5',
-        9: '#fafafa',
-        10: '#ffffff',
-    },
-};
-/**
- * Build default color palette for a given theme mode
- *
- * @param mode - 'light' or 'dark'
- * @returns Complete color palette with theme-aware neutral scale
- */
-const buildDefaultPalette = (mode) => {
-    const modeColors = mode === 'light' ? lightModeColors : darkModeColors;
-    return {
-        primary: {
-            main: '#000000',
-            hover: '#1a1a1a',
-            active: '#000000',
-            light: '#666666',
-            lighter: '#999999',
-            contrast: '#FFFFFF',
-        },
-        action: {
-            main: '#1a6985',
-            hover: '#145268',
-            active: '#0f3d4f',
-            light: '#e8f2f5',
-            lighter: '#f4f9fa',
-            disabled: '#a3c9d6',
-            contrast: '#FFFFFF',
-        },
-        absolute: {
-            white: '#ffffff',
-            black: '#000000',
-        },
-        neutral: {
-            // Numeric scale (theme-aware)
-            0: modeColors.neutral[0],
-            1: modeColors.neutral[1],
-            2: modeColors.neutral[2],
-            3: modeColors.neutral[3],
-            4: modeColors.neutral[4],
-            5: modeColors.neutral[5],
-            6: modeColors.neutral[6],
-            7: modeColors.neutral[7],
-            8: modeColors.neutral[8],
-            9: modeColors.neutral[9],
-            10: modeColors.neutral[10],
-            // Convenient aliases (map to numeric scale)
-            brightest: modeColors.neutral[0],
-            lightest: modeColors.neutral[1],
-            lighter: modeColors.neutral[2],
-            light: modeColors.neutral[3],
-            medium: modeColors.neutral[5],
-            dark: modeColors.neutral[7],
-            darker: modeColors.neutral[8],
-            darkest: modeColors.neutral[9],
-            dimmest: modeColors.neutral[10],
-        },
-        success: {
-            main: '#10b981',
-            bg: '#ecfdf5',
-            border: '#a7f3d0',
-            text: '#047857',
-        },
-        error: {
-            main: '#ef4444',
-            bg: '#fef2f2',
-            border: '#fecaca',
-            text: '#dc2626',
-        },
-        warning: {
-            main: '#f59e0b',
-            bg: '#fffbeb',
-            border: '#fde68a',
-            text: '#d97706',
-        },
-        info: {
-            main: '#1a6985',
-            bg: '#e8f2f5',
-            border: '#b8d9e6',
-            text: '#0f3d4f',
-        },
-        surface: {
-            background: modeColors.neutral[0],
-            main: modeColors.neutral[0],
-            elevated: modeColors.neutral[0],
-            hover: modeColors.neutral[1],
-            subtle: modeColors.neutral[1],
-        },
-        text: {
-            primary: modeColors.neutral[10],
-            secondary: modeColors.neutral[8],
-            tertiary: modeColors.neutral[7],
-            quaternary: modeColors.neutral[6],
-            disabled: modeColors.neutral[5],
-            inverse: modeColors.neutral[0],
-        },
-        border: {
-            main: modeColors.neutral[4],
-            light: modeColors.neutral[3],
-            strong: modeColors.neutral[5],
-            divider: modeColors.neutral[4],
-        },
-        components: {
-            button: {
-                primary: {
-                    bg: '#1a6985',
-                    hover: '#145268',
-                    text: '#FFFFFF',
-                },
-                default: {
-                    bg: modeColors.neutral[0],
-                    border: modeColors.neutral[5],
-                    text: modeColors.neutral[10],
-                    hover: modeColors.neutral[1],
-                },
-            },
-            input: {
-                bg: modeColors.neutral[0],
-                border: modeColors.neutral[5],
-                borderHover: modeColors.neutral[7],
-                borderFocus: '#1a6985',
-                placeholder: modeColors.neutral[7],
-            },
-            table: {
-                bg: modeColors.neutral[0],
-                headerBg: modeColors.neutral[1],
-                headerText: modeColors.neutral[10],
-                border: modeColors.neutral[4],
-                rowHover: modeColors.neutral[1],
-            },
-            sidebar: {
-                bg: '#000000',
-                hover: 'rgba(255, 255, 255, 0.08)',
-                selected: 'rgba(255, 255, 255, 0.12)',
-                text: '#FFFFFF',
-                textSecondary: 'rgba(255, 255, 255, 0.65)',
-            },
-        },
-        utility: {
-            transparent: 'transparent',
-            link: '#1a6985',
-            linkHover: '#145268',
-            linkActive: '#0f3d4f',
-        },
-    };
-};
-/**
- * Default color palette for light theme
- */
-export const defaultColorPalette = buildDefaultPalette('light');
-/**
- * Build a complete color palette by merging overrides with defaults
- * Performs deep merge to allow partial nested overrides
- *
- * @param overrides - Partial color palette overrides
- * @param mode - Theme mode ('light' or 'dark')
- * @returns Complete color palette with overrides applied
- */
-export const buildColorPalette = (overrides, mode = 'light') => {
-    const basePalette = buildDefaultPalette(mode);
-    if (!overrides)
-        return basePalette;
-    const merged = merge({}, basePalette, overrides);
-    // After merging, ensure neutral aliases are synced with numeric values
-    // This handles cases where overrides might change the numeric scale
-    merged.neutral.brightest = merged.neutral[0];
-    merged.neutral.lightest = merged.neutral[1];
-    merged.neutral.lighter = merged.neutral[2];
-    merged.neutral.light = merged.neutral[3];
-    merged.neutral.medium = merged.neutral[5];
-    merged.neutral.dark = merged.neutral[7];
-    merged.neutral.darker = merged.neutral[8];
-    merged.neutral.darkest = merged.neutral[9];
-    merged.neutral.dimmest = merged.neutral[10];
-    return merged;
-};

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

@@ -1,143 +0,0 @@
-/**
- * Tembo UI Constants
- *
- * Non-color design tokens for typography, spacing, sizing, shadows, and animations.
- * Separated from colors for better organization and independent theming.
- *
- * @example
- * const { constants } = useTemboTheme();
- * style={{ borderRadius: constants.radius.base, padding: constants.spacing.md }}
- */
-export interface TemboUIConstants {
-    /**
-     * Typography tokens
-     * Font families, sizes, weights, and line heights
-     */
-    typography: {
-        /** Primary font stack used throughout the application */
-        fontFamily: string;
-        /** Font size scale - use 'base' (14px) for body text */
-        fontSize: {
-            xs: number;
-            sm: number;
-            /** Default body text size (14px) */
-            base: number;
-            lg: number;
-            xl: number;
-        };
-        fontWeight: {
-            normal: number;
-            medium: number;
-            semibold: number;
-            bold: number;
-        };
-        lineHeight: {
-            /** Tight line height for headings */
-            tight: number;
-            /** Default line height for body text */
-            base: number;
-            /** Relaxed line height for large text blocks */
-            relaxed: number;
-        };
-    };
-    /**
-     * Spacing scale
-     * Consistent spacing values for margins, padding, and gaps
-     * Based on 4px grid system
-     */
-    spacing: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-        '2xl': number;
-        '3xl': number;
-    };
-    /**
-     * Border radius tokens
-     * Consistent corner rounding across components
-     */
-    radius: {
-        none: number;
-        sm: number;
-        /** Default border radius (12px) */
-        base: number;
-        md: number;
-        lg: number;
-        xl: number;
-        /** Fully rounded (pill shape) */
-        full: number;
-        /** Button-specific radius for pill-shaped buttons */
-        button: number;
-        /** Input field radius */
-        input: number;
-        /** Card radius */
-        card: number;
-    };
-    /**
-     * Box shadow tokens
-     * Elevation and depth through shadows
-     */
-    shadow: {
-        /** Subtle shadow for slight elevation */
-        sm: string;
-        /** Default shadow for cards and containers */
-        base: string;
-        /** Medium shadow for elevated content */
-        md: string;
-        /** Large shadow for modals and important elements */
-        lg: string;
-        /** Extra large shadow for maximum elevation */
-        xl: string;
-        /** Semantic: Card shadow (typically subtle) */
-        card: string;
-        /** Semantic: Elevated content like popovers */
-        elevated: string;
-        /** Semantic: Dropdown menus */
-        dropdown: string;
-    };
-    /**
-     * Z-index layers
-     * Stacking order for overlays and floating elements
-     */
-    zIndex: {
-        dropdown: number;
-        modal: number;
-        popover: number;
-        tooltip: number;
-        notification: number;
-    };
-    /**
-     * Transition timing
-     * Animation durations for consistent motion
-     */
-    transition: {
-        /** Quick interactions (150ms) */
-        fast: string;
-        /** Default transitions (200ms) */
-        base: string;
-        /** Slower, more deliberate animations (300ms) */
-        slow: string;
-    };
-}
-/**
- * Partial UI constants overrides
- */
-export type TemboUIConstantsOverrides = DeepPartial<TemboUIConstants>;
-/**
- * Default UI constants
- * Professional, accessible defaults suitable for most applications
- */
-export declare const defaultUIConstants: TemboUIConstants;
-/**
- * Build complete UI constants by merging overrides with defaults
- *
- * @param overrides - Partial UI constants overrides
- * @returns Complete UI constants with overrides applied
- */
-export declare const buildUIConstants: (overrides?: TemboUIConstantsOverrides) => TemboUIConstants;
-type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
-};
-export {};

package/dist/theme/deprecated/constants.js

@@ -1,82 +0,0 @@
-import { merge } from 'lodash';
-/**
- * Default UI constants
- * Professional, accessible defaults suitable for most applications
- */
-export const defaultUIConstants = {
-    typography: {
-        fontFamily: "Avenir, MarkPro, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-        fontSize: {
-            xs: 12,
-            sm: 13,
-            base: 14,
-            lg: 16,
-            xl: 18,
-        },
-        fontWeight: {
-            normal: 400,
-            medium: 500,
-            semibold: 600,
-            bold: 700,
-        },
-        lineHeight: {
-            tight: 1.25,
-            base: 1.5715,
-            relaxed: 1.75,
-        },
-    },
-    spacing: {
-        xs: 4,
-        sm: 8,
-        md: 12,
-        lg: 16,
-        xl: 24,
-        '2xl': 32,
-        '3xl': 48,
-    },
-    radius: {
-        none: 0,
-        sm: 8,
-        base: 12,
-        md: 14,
-        lg: 16,
-        xl: 20,
-        full: 9999,
-        button: 24,
-        input: 10,
-        card: 16,
-    },
-    shadow: {
-        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        base: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08)',
-        md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08)',
-        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08)',
-        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08)',
-        card: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        elevated: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08)',
-        dropdown: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08)',
-    },
-    zIndex: {
-        dropdown: 1000,
-        modal: 1050,
-        popover: 1060,
-        tooltip: 1070,
-        notification: 1080,
-    },
-    transition: {
-        fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
-        base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
-        slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
-    },
-};
-/**
- * Build complete UI constants by merging overrides with defaults
- *
- * @param overrides - Partial UI constants overrides
- * @returns Complete UI constants with overrides applied
- */
-export const buildUIConstants = (overrides) => {
-    if (!overrides)
-        return defaultUIConstants;
-    return merge(defaultUIConstants, overrides);
-};