@temboplus/frontend-react-core 0.1.3-beta.2 → 0.1.3-beta.20

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

@@ -0,0 +1,100 @@
+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 LegacyTemboThemeContextValue {
+    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 LegacyTemboThemeProviderProps {
+    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 LegacyTemboThemeProvider: React.FC<LegacyTemboThemeProviderProps>;
+/**
+ * @deprecated
+ * 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: () => LegacyTemboThemeContextValue;

package/dist/theme/deprecated/theme-provider.js

@@ -0,0 +1,405 @@
+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
+ */
+const TemboThemeContext = React.createContext({
+    colors: buildColorPalette(),
+    constants: buildUIConstants(),
+    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.
+ *
+ * All child components can access theme values via the useTemboTheme() hook.
+ */
+export const LegacyTemboThemeProvider = ({ 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 }) }));
+};
+/**
+ * @deprecated
+ * 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 const useTemboTheme = () => React.useContext(TemboThemeContext);

package/dist/theme/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../theme-provider-Dqvy24OD.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;
+"use strict";var e=require("../theme-provider-CCwq2x0C.js"),r=require("../theme-provider-CCkR2IcZ.js");require("react"),require("antd"),require("lodash"),exports.LegacyTemboThemeProvider=e.LegacyTemboThemeProvider,exports.buildColorPalette=e.buildColorPalette,exports.buildUIConstants=e.buildUIConstants,exports.defaultColorPalette=e.defaultColorPalette,exports.defaultUIConstants=e.defaultUIConstants,exports.useTemboTheme=e.useTemboTheme,exports.TemboThemeProvider=r.TemboThemeProvider,exports.useNewTemboTheme=r.useNewTemboTheme;
 //# sourceMappingURL=index.cjs.js.map

package/dist/theme/index.d.ts

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

package/dist/theme/index.js

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

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

@@ -0,0 +1,15 @@
+import type { ThemeConfig } from 'antd';
+import { ColorPalette } from './tokens/colors.js';
+import { UIConstants } from './tokens/constants.js';
+/**
+ * Build comprehensive Ant Design theme from Tembo tokens
+ *
+ * Design principles:
+ * - Monochrome-first: Primary actions use neutral[8] (near-black/near-white)
+ * - Single accent: Blue for links, focus states, and interactive feedback
+ * - Semantic colors: Only for critical feedback (success, error, warning)
+ * - Consistent spacing: Set once at token level, inherited by components
+ * - Bold rounded corners: 24px inputs/buttons, 28px cards, 32px modals
+ * - Smart shadows: None on flat elements, subtle on elevated surfaces
+ */
+export declare const buildAntDTheme: (colors: ColorPalette, constants: UIConstants) => ThemeConfig;