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

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

@@ -1,99 +1,96 @@
 import React from 'react';
-import type { ThemeConfig } from 'antd';
-import { TemboColorPalette, TemboColorOverrides, ThemeMode } 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 dark mode
+ * // Dark mode
  * <TemboThemeProvider mode="dark">
  *   <App />
  * </TemboThemeProvider>
  *
- * @example
- * // With color overrides
- * <TemboThemeProvider
- *   colors={{
- *     primary: { main: '#007bff' },
- *     action: { main: '#28a745' }
- *   }}
- * >
- *   <App />
- * </TemboThemeProvider>
+ * // With state management for toggling
+ * const [mode, setMode] = useState<ThemeMode>('light');
  *
- * @example
- * // With all customizations
- * <TemboThemeProvider
- *   mode="dark"
- *   colors={{ primary: { main: '#007bff' } }}
- *   constants={{ radius: { base: 8 } }}
- *   themeOverrides={{
- *     components: {
- *       Button: { controlHeight: 40 }
- *     }
- *   }}
- * >
- *   <App />
+ * <TemboThemeProvider mode={mode}>
+ *   <App onToggleTheme={() => setMode(m => m === 'light' ? 'dark' : 'light')} />
  * </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.
+ * Hook to access current theme
  *
- * @returns Theme context containing colors, constants, and mode
+ * 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, mode } = useTemboTheme();
+ *   const { colors, mode } = useTemboTheme();
  *
  *   return (
  *     <div style={{
  *       color: colors.text.primary,
- *       padding: constants.spacing.md,
- *       borderRadius: constants.radius.base,
- *       backgroundColor: colors.neutral.lightest
+ *       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 declare const useTemboTheme: () => TemboThemeContextValue;
+export declare const useNewTemboTheme: () => TemboTheme;

package/dist/theme/theme-provider.js

@@ -1,404 +1,100 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { ConfigProvider } from 'antd';
-import { buildColorPalette, } from './colors.js';
-import { buildUIConstants, } from './constants.js';
-/**
- * Internal React context carrying the active Tembo theme
- */
+import { buildAntDTheme } from './theme-config.js';
+import { buildColorPalette } from './tokens/color.js';
 const TemboThemeContext = React.createContext({
-    colors: buildColorPalette(),
-    constants: buildUIConstants(),
+    colors: buildColorPalette('light'),
     mode: 'light',
 });
-/**
- * Build Ant Design theme configuration from Tembo tokens
- * Maps semantic Tembo color palette and constants to Ant Design's token system
- *
- * @param palette - Complete Tembo color palette
- * @param constants - Complete Tembo UI constants
- * @param mode - Theme mode
- * @param overrides - Optional raw Ant Design theme overrides
- * @returns Ant Design ThemeConfig
- */
-const buildAntDThemeConfig = (palette, constants, mode, overrides) => {
-    var _a, _b;
-    const baseTokens = {
-        // Primary colors
-        colorPrimary: palette.primary.main,
-        colorPrimaryHover: palette.primary.hover,
-        colorPrimaryActive: palette.primary.active,
-        colorPrimaryBorder: palette.primary.main,
-        // Text colors
-        colorText: palette.text.primary,
-        colorTextSecondary: palette.text.secondary,
-        colorTextTertiary: palette.text.tertiary,
-        colorTextQuaternary: palette.text.quaternary,
-        colorTextDisabled: palette.text.disabled,
-        // Background colors
-        colorBgBase: palette.surface.background,
-        colorBgContainer: palette.surface.main,
-        colorBgElevated: palette.surface.elevated,
-        colorBgLayout: palette.surface.background,
-        colorBgSpotlight: palette.surface.hover,
-        // Border colors
-        colorBorder: palette.border.main,
-        colorBorderSecondary: palette.border.light,
-        colorSplit: palette.border.divider,
-        // Success colors
-        colorSuccess: palette.success.main,
-        colorSuccessBg: palette.success.bg,
-        colorSuccessBorder: palette.success.border,
-        colorSuccessText: palette.success.text,
-        // Error colors
-        colorError: palette.error.main,
-        colorErrorBg: palette.error.bg,
-        colorErrorBorder: palette.error.border,
-        colorErrorText: palette.error.text,
-        // Warning colors
-        colorWarning: palette.warning.main,
-        colorWarningBg: palette.warning.bg,
-        colorWarningBorder: palette.warning.border,
-        colorWarningText: palette.warning.text,
-        // Info colors
-        colorInfo: palette.info.main,
-        colorInfoBg: palette.info.bg,
-        colorInfoBorder: palette.info.border,
-        colorInfoText: palette.info.text,
-        // Link colors
-        colorLink: palette.utility.link,
-        colorLinkHover: palette.utility.linkHover,
-        colorLinkActive: palette.utility.linkActive,
-        // Border radius
-        borderRadius: constants.radius.base,
-        borderRadiusLG: constants.radius.lg,
-        borderRadiusSM: constants.radius.sm,
-        borderRadiusXS: 6,
-        // Shadows
-        boxShadow: constants.shadow.base,
-        boxShadowSecondary: constants.shadow.card,
-        boxShadowTertiary: constants.shadow.elevated,
-        // Typography
-        fontFamily: constants.typography.fontFamily,
-        fontSize: constants.typography.fontSize.base,
-        fontSizeHeading1: 38,
-        fontSizeHeading2: 30,
-        fontSizeHeading3: 24,
-        fontSizeHeading4: 20,
-        fontSizeHeading5: constants.typography.fontSize.lg,
-        fontWeightStrong: constants.typography.fontWeight.medium,
-        lineHeight: constants.typography.lineHeight.base,
-        lineHeightHeading1: 1.21,
-        lineHeightHeading2: 1.27,
-        lineHeightHeading3: 1.33,
-        lineHeightHeading4: 1.4,
-        lineHeightHeading5: 1.5,
-    };
-    const baseTheme = {
-        token: baseTokens,
-        // algorithm: mode === 'dark' ? 'dark' : undefined,
-        components: {
-            Button: {
-                colorPrimary: palette.components.button.primary.bg,
-                colorPrimaryHover: palette.components.button.primary.hover,
-                colorPrimaryActive: palette.action.active,
-                colorPrimaryBorder: palette.components.button.primary.bg,
-                primaryColor: palette.components.button.primary.text,
-                colorBorder: palette.components.button.default.border,
-                colorBgContainer: palette.components.button.default.bg,
-                colorText: palette.components.button.default.text,
-                defaultBg: palette.components.button.default.bg,
-                defaultBorderColor: palette.components.button.default.border,
-                defaultColor: palette.components.button.default.text,
-                primaryShadow: 'none',
-                defaultShadow: 'none',
-                dangerShadow: 'none',
-                fontWeight: constants.typography.fontWeight.medium,
-                controlHeight: 32,
-                paddingContentHorizontal: constants.spacing.lg,
-                borderRadius: constants.radius.button,
-                borderRadiusLG: constants.radius.button,
-                borderRadiusSM: constants.radius.sm + 8,
-            },
-            Input: {
-                colorBgContainer: palette.components.input.bg,
-                colorBorder: palette.components.input.border,
-                hoverBorderColor: palette.components.input.borderHover,
-                activeBorderColor: palette.components.input.borderFocus,
-                colorPrimaryHover: palette.components.input.borderFocus,
-                colorTextPlaceholder: palette.components.input.placeholder,
-                borderRadius: constants.radius.input,
-                borderRadiusLG: constants.radius.base,
-                borderRadiusSM: constants.radius.sm,
-            },
-            Select: {
-                colorBgContainer: palette.components.input.bg,
-                colorBorder: palette.components.input.border,
-                colorTextPlaceholder: palette.components.input.placeholder,
-                colorPrimaryHover: palette.action.main,
-                hoverBorderColor: palette.components.input.borderHover,
-                activeBorderColor: palette.components.input.borderFocus,
-                optionSelectedBg: palette.action.main,
-                optionSelectedColor: palette.action.contrast,
-                optionActiveBg: palette.surface.hover,
-                colorBgElevated: palette.neutral.brightest,
-                controlItemBgHover: palette.surface.hover,
-                boxShadowSecondary: constants.shadow.elevated,
-                borderRadius: constants.radius.input,
-                borderRadiusLG: constants.radius.base,
-                borderRadiusSM: constants.radius.sm,
-            },
-            Checkbox: {
-                colorPrimary: palette.action.main,
-                colorPrimaryHover: palette.action.hover,
-                colorBorder: palette.border.strong,
-                borderRadiusSM: 6,
-            },
-            Radio: {
-                colorPrimary: palette.action.main,
-                colorPrimaryHover: palette.action.hover,
-                colorBorder: palette.border.strong,
-            },
-            Switch: {
-                colorPrimary: palette.action.main,
-                colorPrimaryHover: palette.action.hover,
-                colorTextQuaternary: palette.text.quaternary,
-            },
-            Form: {
-                labelColor: palette.text.primary,
-                labelRequiredMarkColor: palette.error.main,
-                labelFontSize: constants.typography.fontSize.base,
-                itemMarginBottom: constants.spacing.lg,
-            },
-            DatePicker: {
-                colorBgContainer: palette.components.input.bg,
-                colorBorder: palette.components.input.border,
-                hoverBorderColor: palette.components.input.borderHover,
-                activeBorderColor: palette.components.input.borderFocus,
-                colorPrimary: palette.action.main,
-                borderRadius: constants.radius.input,
-            },
-            InputNumber: {
-                borderRadius: constants.radius.input,
-            },
-            Table: {
-                colorBgContainer: palette.components.table.bg,
-                headerBg: palette.components.table.headerBg,
-                headerColor: palette.components.table.headerText,
-                borderColor: palette.components.table.border,
-                headerSplitColor: palette.components.table.border,
-                rowHoverBg: palette.components.table.rowHover,
-                rowSelectedBg: palette.action.light,
-                rowSelectedHoverBg: palette.action.lighter,
-                colorText: palette.text.primary,
-                colorTextHeading: palette.text.primary,
-                borderRadius: constants.radius.base,
-                borderRadiusLG: constants.radius.lg,
-            },
-            Card: {
-                colorBgContainer: palette.surface.main,
-                colorBorder: palette.border.main,
-                colorBorderSecondary: palette.border.light,
-                boxShadowTertiary: constants.shadow.card,
-                borderRadius: constants.radius.card,
-                borderRadiusLG: constants.radius.lg + 4,
-            },
-            Statistic: {
-                contentFontSize: 24,
-                colorTextHeading: palette.text.primary,
-            },
-            Descriptions: {
-                labelBg: palette.surface.hover,
-                colorTextSecondary: palette.text.secondary,
-                itemPaddingBottom: constants.spacing.md,
-            },
-            Badge: {
-                colorError: palette.error.main,
-                colorSuccess: palette.success.main,
-                colorInfo: palette.info.main,
-                colorInfoBg: palette.info.bg,
-                borderRadiusSM: constants.radius.input,
-            },
-            Tag: {
-                colorBorder: palette.border.main,
-                defaultBg: palette.surface.hover,
-                borderRadiusSM: constants.radius.sm,
-            },
-            Timeline: {
-                dotBg: palette.surface.main,
-                tailColor: palette.border.main,
-            },
-            Alert: {
-                colorSuccessBg: palette.success.bg,
-                colorSuccessBorder: palette.success.border,
-                colorErrorBg: palette.error.bg,
-                colorErrorBorder: palette.error.border,
-                colorWarningBg: palette.warning.bg,
-                colorWarningBorder: palette.warning.border,
-                colorInfoBg: palette.info.bg,
-                colorInfoBorder: palette.info.border,
-                borderRadiusLG: constants.radius.base,
-            },
-            Modal: {
-                contentBg: palette.surface.elevated,
-                headerBg: palette.surface.elevated,
-                colorBgMask: 'rgba(0, 0, 0, 0.45)',
-                borderRadiusLG: constants.radius.lg,
-            },
-            Drawer: {
-                colorBgElevated: palette.surface.elevated,
-                colorBgMask: 'rgba(0, 0, 0, 0.45)',
-                borderRadiusLG: constants.radius.lg,
-            },
-            Notification: {
-                colorBgElevated: palette.neutral.brightest,
-                borderRadiusLG: constants.radius.base,
-            },
-            Message: {
-                contentBg: palette.neutral.brightest,
-                borderRadiusLG: constants.radius.base,
-            },
-            Spin: {
-                colorPrimary: palette.primary.main,
-            },
-            Progress: {
-                colorSuccess: palette.success.main,
-                colorError: palette.error.main,
-                defaultColor: palette.primary.main,
-                borderRadius: 100,
-            },
-            Skeleton: {
-                colorFill: palette.neutral[2],
-                colorFillContent: palette.neutral[1],
-                borderRadiusSM: constants.radius.sm,
-            },
-            Menu: {
-                itemBg: 'transparent',
-                itemColor: palette.text.primary,
-                itemHoverBg: palette.surface.hover,
-                itemSelectedBg: palette.action.lighter,
-                itemSelectedColor: palette.action.main,
-                itemActiveBg: palette.action.lighter,
-                subMenuItemBg: 'transparent',
-                darkItemBg: palette.components.sidebar.bg,
-                darkSubMenuItemBg: palette.components.sidebar.bg,
-                darkItemColor: palette.components.sidebar.text,
-                darkItemHoverBg: palette.components.sidebar.hover,
-                darkItemSelectedBg: palette.components.sidebar.selected,
-                darkItemSelectedColor: palette.primary.contrast,
-                borderRadius: constants.radius.input,
-                borderRadiusLG: constants.radius.base,
-            },
-            Breadcrumb: {
-                linkColor: palette.utility.link,
-                linkHoverColor: palette.utility.linkHover,
-                itemColor: palette.text.secondary,
-                lastItemColor: palette.text.primary,
-                separatorColor: palette.text.tertiary,
-                borderRadiusSM: 6,
-            },
-            Pagination: {
-                colorPrimary: palette.primary.main,
-                colorPrimaryHover: palette.primary.hover,
-                itemActiveBg: palette.primary.main,
-                borderRadius: constants.radius.sm,
-            },
-            Steps: {
-                colorPrimary: palette.action.main,
-                colorText: palette.text.secondary,
-                colorTextDescription: palette.text.tertiary,
-                borderRadiusSM: 100,
-            },
-            Tabs: {
-                colorPrimary: palette.action.main,
-                colorBorderSecondary: palette.border.main,
-                itemColor: palette.text.secondary,
-                itemHoverColor: palette.action.hover,
-                itemSelectedColor: palette.action.main,
-                inkBarColor: palette.action.main,
-                borderRadiusSM: constants.radius.sm,
-            },
-            Layout: {
-                colorBgBody: palette.surface.background,
-                colorBgHeader: palette.neutral.brightest,
-                colorBgTrigger: palette.components.sidebar.bg,
-                siderBg: palette.components.sidebar.bg,
-                headerBg: palette.neutral.brightest,
-                borderRadiusLG: 0,
-            },
-            Divider: {
-                colorSplit: palette.border.divider,
-            },
-            Typography: {
-                colorText: palette.text.primary,
-                colorTextSecondary: palette.text.secondary,
-                colorTextDescription: palette.text.tertiary,
-            },
-            Tooltip: {
-                colorBgSpotlight: palette.neutral.darkest,
-                colorTextLightSolid: palette.neutral.brightest,
-                borderRadius: constants.radius.sm,
-            },
-            Popover: {
-                colorBgElevated: palette.neutral.brightest,
-                borderRadiusLG: constants.radius.base,
-            },
-            Dropdown: {
-                boxShadowSecondary: constants.shadow.dropdown,
-            },
-            Calendar: {
-                colorBgContainer: palette.neutral.brightest,
-                colorPrimary: palette.action.main,
-                borderRadiusLG: constants.radius.base,
-            },
-        },
-    };
-    if (!overrides)
-        return baseTheme;
-    return Object.assign(Object.assign({}, baseTheme), { token: Object.assign(Object.assign({}, baseTheme.token), ((_a = overrides.token) !== null && _a !== void 0 ? _a : {})), components: Object.assign(Object.assign({}, baseTheme.components), ((_b = overrides.components) !== null && _b !== void 0 ? _b : {})) });
-};
 /**
  * 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.
+ * Wraps your application with monochrome-first theming system.
+ * Supports seamless light/dark mode switching.
  *
- * All child components can access theme values via the useTemboTheme() hook.
+ * @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', colors, constants, themeOverrides, }) => {
-    const palette = React.useMemo(() => buildColorPalette(colors, mode), [colors, mode]);
-    const uiConstants = React.useMemo(() => buildUIConstants(constants), [constants]);
-    const theme = React.useMemo(() => buildAntDThemeConfig(palette, uiConstants, mode, themeOverrides), [palette, uiConstants, mode, themeOverrides]);
-    const contextValue = React.useMemo(() => ({
-        colors: palette,
-        constants: uiConstants,
-        mode,
-    }), [palette, uiConstants, mode]);
-    return (_jsx(TemboThemeContext.Provider, { value: contextValue, children: _jsx(ConfigProvider, { theme: theme, children: children }) }));
+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 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.
+ * Hook to access current theme
  *
- * @returns Theme context containing colors, constants, and mode
+ * 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, mode } = useTemboTheme();
+ *   const { colors, mode } = useTemboTheme();
  *
  *   return (
  *     <div style={{
  *       color: colors.text.primary,
- *       padding: constants.spacing.md,
- *       borderRadius: constants.radius.base,
- *       backgroundColor: colors.neutral.lightest
+ *       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 useTemboTheme = () => React.useContext(TemboThemeContext);
+export const useNewTemboTheme = () => React.useContext(TemboThemeContext);