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

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-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;
+//# 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-D_oV1J_K.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,87 @@
+import React from 'react';
+import type { ThemeConfig } from 'antd';
+import { TemboColorPalette, TemboColorOverrides } from './colors.js';
+import { TemboUIConstants, TemboUIConstantsOverrides } from './constants.js';
+/**
+ * Shape of the theme context exposed via useTemboTheme()
+ */
+export interface TemboThemeContextValue {
+    colors: TemboColorPalette;
+    constants: TemboUIConstants;
+}
+/**
+ * Props for TemboThemeProvider
+ *
+ * @example
+ * // Basic usage
+ * <TemboThemeProvider>
+ *   <App />
+ * </TemboThemeProvider>
+ *
+ * @example
+ * // With color overrides
+ * <TemboThemeProvider
+ *   colors={{
+ *     primary: { main: '#007bff' },
+ *     action: { main: '#28a745' }
+ *   }}
+ * >
+ *   <App />
+ * </TemboThemeProvider>
+ *
+ * @example
+ * // With all customizations
+ * <TemboThemeProvider
+ *   colors={{ primary: { main: '#007bff' } }}
+ *   constants={{ radius: { base: 8 } }}
+ *   themeOverrides={{
+ *     components: {
+ *       Button: { controlHeight: 40 }
+ *     }
+ *   }}
+ * >
+ *   <App />
+ * </TemboThemeProvider>
+ */
+export interface TemboThemeProviderProps {
+    children: React.ReactNode;
+    /** 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.
+ *
+ * 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 and UI constants with any host overrides applied.
+ * Components should always use this hook instead of importing defaults directly.
+ *
+ * @returns Theme context containing colors and constants
+ *
+ * @example
+ * function MyComponent() {
+ *   const { colors, constants } = useTemboTheme();
+ *
+ *   return (
+ *     <div style={{
+ *       color: colors.text.primary,
+ *       padding: constants.spacing.md,
+ *       borderRadius: constants.radius.base
+ *     }}>
+ *       Themed content
+ *     </div>
+ *   );
+ * }
+ */
+export declare const useTemboTheme: () => TemboThemeContextValue;