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

package/dist/theme/theme-provider.js

@@ -0,0 +1,398 @@
+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(),
+});
+/**
+ * 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 overrides - Optional raw Ant Design theme overrides
+ * @returns Ant Design ThemeConfig
+ */
+const buildAntDThemeConfig = (palette, constants, 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,
+        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.utility.white,
+                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.utility.white,
+                borderRadiusLG: constants.radius.base,
+            },
+            Message: {
+                contentBg: palette.utility.white,
+                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[200],
+                colorFillContent: palette.neutral[100],
+                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.utility.white,
+                colorBgTrigger: palette.components.sidebar.bg,
+                siderBg: palette.components.sidebar.bg,
+                headerBg: palette.utility.white,
+                borderRadiusLG: 0,
+            },
+            Divider: {
+                colorSplit: palette.border.divider,
+            },
+            Typography: {
+                colorText: palette.text.primary,
+                colorTextSecondary: palette.text.secondary,
+                colorTextDescription: palette.text.tertiary,
+            },
+            Tooltip: {
+                colorBgSpotlight: palette.neutral[900],
+                colorTextLightSolid: palette.utility.white,
+                borderRadius: constants.radius.sm,
+            },
+            Popover: {
+                colorBgElevated: palette.utility.white,
+                borderRadiusLG: constants.radius.base,
+            },
+            Dropdown: {
+                boxShadowSecondary: constants.shadow.dropdown,
+            },
+            Calendar: {
+                colorBgContainer: palette.utility.white,
+                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.
+ *
+ * All child components can access theme values via the useTemboTheme() hook.
+ */
+export const TemboThemeProvider = ({ children, colors, constants, themeOverrides, }) => {
+    const palette = React.useMemo(() => buildColorPalette(colors), [colors]);
+    const uiConstants = React.useMemo(() => buildUIConstants(constants), [constants]);
+    const theme = React.useMemo(() => buildAntDThemeConfig(palette, uiConstants, themeOverrides), [palette, uiConstants, themeOverrides]);
+    const contextValue = React.useMemo(() => ({
+        colors: palette,
+        constants: uiConstants,
+    }), [palette, uiConstants]);
+    return (_jsx(TemboThemeContext.Provider, { value: contextValue, children: _jsx(ConfigProvider, { theme: theme, children: children }) }));
+};
+/**
+ * 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 const useTemboTheme = () => React.useContext(TemboThemeContext);

package/dist/validation/index.d.ts

@@ -0,0 +1 @@
+export * from "../features/input-validation";

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@temboplus/frontend-react-core",
-  "version": "0.1.3-beta.1",
+  "version": "0.1.3-beta.2",
   "repository": "https://github.com/TemboPlus-Frontend/temboplus-frontend-react-core",
   "author": "Okello Gerald",
   "license": "ISC",
   "description": "A React UI library for TemboPlus applications, providing reusable components, validators, and utilities for building consistent react applications across the platform.",
   "scripts": {
-    "build": "rollup -c rollup.config.js --configTsconfig tsconfig.json",
+    "build:types": "tsc --project tsconfig.json",
+    "build:js": "rollup -c rollup.config.js --configTsconfig tsconfig.json",
+    "build:fix-dts": "node ./scripts/fix-dts.js",
+    "build": "npm run build:types && npm run build:js && npm run build:fix-dts",
     "prepare": "npm run build",
     "dev": "npm run build -- --watch",
     "test": "vitest",