@temboplus/frontend-react-core 0.1.3-beta.0 → 0.1.3-beta.10

package/dist/theme/colors.js

@@ -0,0 +1,212 @@
+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/constants.d.ts

@@ -0,0 +1,143 @@
+/**
+ * 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/constants.js

@@ -0,0 +1,82 @@
+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);
+};

package/dist/theme/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../theme-provider-RhAw3jw_.js");require("react"),require("antd"),require("lodash"),exports.TemboThemeProvider=e.TemboThemeProvider,exports.buildColorPalette=e.buildColorPalette,exports.buildUIConstants=e.buildUIConstants,exports.defaultColorPalette=e.defaultColorPalette,exports.defaultUIConstants=e.defaultUIConstants,exports.useTemboTheme=e.useTemboTheme;
+//# sourceMappingURL=index.cjs.js.map

package/dist/theme/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./colors.js";
+export * from "./constants.js";
+export * from "./theme-provider.js";

package/dist/theme/index.js

@@ -0,0 +1,2 @@
+export{T as TemboThemeProvider,b as buildColorPalette,c as buildUIConstants,d as defaultColorPalette,a as defaultUIConstants,u as useTemboTheme}from"../theme-provider-Ca4P0Hcp.js";import"react";import"antd";import"lodash";
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import type { ThemeConfig } from 'antd';
+import { TemboColorPalette, TemboColorOverrides, ThemeMode } from './colors.js';
+import { TemboUIConstants, TemboUIConstantsOverrides } from './constants.js';
+/**
+ * Shape of the theme context exposed via useTemboTheme()
+ */
+export interface TemboThemeContextValue {
+    colors: TemboColorPalette;
+    constants: TemboUIConstants;
+    mode: ThemeMode;
+}
+/**
+ * Props for TemboThemeProvider
+ *
+ * @example
+ * // Basic usage
+ * <TemboThemeProvider>
+ *   <App />
+ * </TemboThemeProvider>
+ *
+ * @example
+ * // With dark mode
+ * <TemboThemeProvider mode="dark">
+ *   <App />
+ * </TemboThemeProvider>
+ *
+ * @example
+ * // With color overrides
+ * <TemboThemeProvider
+ *   colors={{
+ *     primary: { main: '#007bff' },
+ *     action: { main: '#28a745' }
+ *   }}
+ * >
+ *   <App />
+ * </TemboThemeProvider>
+ *
+ * @example
+ * // With all customizations
+ * <TemboThemeProvider
+ *   mode="dark"
+ *   colors={{ primary: { main: '#007bff' } }}
+ *   constants={{ radius: { base: 8 } }}
+ *   themeOverrides={{
+ *     components: {
+ *       Button: { controlHeight: 40 }
+ *     }
+ *   }}
+ * >
+ *   <App />
+ * </TemboThemeProvider>
+ */
+export interface TemboThemeProviderProps {
+    children: React.ReactNode;
+    /** Theme mode - 'light' or 'dark' */
+    mode?: ThemeMode;
+    /** 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.
+ * Supports light and dark mode through the mode prop.
+ *
+ * All child components can access theme values via the useTemboTheme() hook.
+ */
+export declare const TemboThemeProvider: React.FC<TemboThemeProviderProps>;
+/**
+ * Hook to access the active Tembo theme
+ *
+ * Returns the merged color palette, UI constants, and current theme mode.
+ * Components should always use this hook instead of importing defaults directly.
+ *
+ * @returns Theme context containing colors, constants, and mode
+ *
+ * @example
+ * function MyComponent() {
+ *   const { colors, constants, mode } = useTemboTheme();
+ *
+ *   return (
+ *     <div style={{
+ *       color: colors.text.primary,
+ *       padding: constants.spacing.md,
+ *       borderRadius: constants.radius.base,
+ *       backgroundColor: colors.neutral.lightest
+ *     }}>
+ *       Current theme: {mode}
+ *     </div>
+ *   );
+ * }
+ */
+export declare const useTemboTheme: () => TemboThemeContextValue;