igloo-d2c-components 1.0.6 → 1.0.8

package/dist/cjs/index.js

@@ -1,2 +1,497 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material");const n=t.createContext(void 0);function a(){const e=t.useContext(n);if(void 0===e)throw new Error("useTenantTheme must be used within a TenantThemeProvider");return e}exports.Banner=function({title:t,description:n,action:o,gradient:i=!0,sx:p,...s}){const{theme:c}=a(),l=i?`linear-gradient(135deg, ${c.palette.primary?.main} 0%, ${c.palette.primary?.light||c.palette.primary?.main} 100%)`:c.palette.primary?.main;return e.jsxs(r.Box,{sx:{background:l,color:"white",padding:"32px",borderRadius:"12px",textAlign:"center",...p},...s,children:[e.jsx(r.Typography,{variant:"h4",component:"h2",gutterBottom:!0,fontWeight:"bold",children:t}),n&&e.jsx(r.Typography,{variant:"body1",sx:{opacity:.95,mb:o?2:0},children:n}),o&&e.jsx(r.Box,{sx:{mt:2},children:o})]})},exports.Button=function({tenantColored:t=!1,variant:n="contained",sx:o,color:i,...p}){const{theme:s}=a(),c=t?{backgroundColor:s.palette.primary?.main,color:"#fff","&:hover":{backgroundColor:s.palette.primary?.dark||s.palette.primary?.main},...o}:o;return e.jsx(r.Button,{variant:n,color:t?void 0:i,sx:c,...p})},exports.Card=function({title:t,headerAction:n,content:o,actions:i,tenantAccent:p=!1,sx:s,children:c,...l}){const{theme:d}=a(),m=p?{borderTop:`4px solid ${d.palette.primary?.main}`,...s}:s;return e.jsxs(r.Card,{sx:m,...l,children:[t&&e.jsx(r.CardHeader,{title:t,action:n}),(o||c)&&e.jsx(r.CardContent,{children:o||c}),i&&e.jsx(r.CardActions,{children:i})]})},exports.TenantThemeProvider=function({children:r,tenantId:a,theme:o}){const i=t.useMemo(()=>({tenantId:a,theme:o}),[a,o]);return e.jsx(n.Provider,{value:i,children:r})},exports.createThemeCSSVariables=function(e,t="--tenant"){const r={};return e.palette.primary&&Object.entries(e.palette.primary).forEach(([e,n])=>{"string"==typeof n&&(r[`${t}-primary-${e}`]=n)}),e.palette.secondary&&Object.entries(e.palette.secondary).forEach(([e,n])=>{"string"==typeof n&&(r[`${t}-secondary-${e}`]=n)}),e.typography?.fontFamily&&(r[`${t}-font-family`]=e.typography.fontFamily),r},exports.getThemeColor=function(e,t,r="#000000"){const n=t.split(".");let a=e.palette;for(const e of n){if(!a||"object"!=typeof a||!(e in a))return r;a=a[e]}return"string"==typeof a?a:r},exports.mergeTenantTheme=function(e,t){return{...e,palette:{...e.palette,...t.palette,primary:{...e.palette?.primary||{},...t.palette.primary||{}},secondary:{...e.palette?.secondary||{},...t.palette.secondary||{}}},typography:{...e.typography,...t.typography}}},exports.useIsTenant=function(e){const{tenantId:t}=a();return t===e},exports.useTenantId=function(){const{tenantId:e}=a();return e},exports.useTenantTheme=a;
-//# sourceMappingURL=index.js.map
+"use client"
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var material = require('@mui/material');
+
+const TenantThemeContext = react.createContext(undefined);
+/**
+ * TenantThemeProvider
+ * Wraps components to provide tenant-specific theming
+ *
+ * @example
+ * ```tsx
+ * <TenantThemeProvider
+ *   tenantId="cimb"
+ *   theme={cimbTheme}
+ * >
+ *   <App />
+ * </TenantThemeProvider>
+ * ```
+ */
+function TenantThemeProvider({ children, tenantId, theme, }) {
+    const value = react.useMemo(() => ({
+        tenantId,
+        theme,
+    }), [tenantId, theme]);
+    return (jsxRuntime.jsx(TenantThemeContext.Provider, Object.assign({ value: value }, { children: children })));
+}
+/**
+ * Hook to access tenant theme configuration
+ * @throws Error if used outside TenantThemeProvider
+ */
+function useTenantTheme() {
+    const context = react.useContext(TenantThemeContext);
+    if (context === undefined) {
+        throw new Error('useTenantTheme must be used within a TenantThemeProvider');
+    }
+    return context;
+}
+/**
+ * Hook to get tenant ID
+ */
+function useTenantId() {
+    const { tenantId } = useTenantTheme();
+    return tenantId;
+}
+/**
+ * Hook to check if current tenant matches given tenant ID
+ */
+function useIsTenant(checkTenantId) {
+    const { tenantId } = useTenantTheme();
+    return tenantId === checkTenantId;
+}
+
+/**
+ * Tenant Theme Configurations
+ * Centralized theme definitions for all tenants
+ */
+/**
+ * Igloo Theme Configuration
+ */
+const iglooTheme = {
+    palette: {
+        primary: {
+            dark: '#1300A9',
+            main: '#5656F6',
+            light: '#8183FF',
+            bright: '#C1C1FF',
+            plain: '#E1DFFF',
+            border: '#5656F6',
+        },
+        secondary: {
+            dim: '#650713',
+            dark: '#C55153',
+            main: '#FF7D7D',
+            bright: '#FF7378',
+            mediumBright: '#FF7062',
+            light: '#FFB3B1',
+            lighter: '#FFEBEB',
+        },
+        tertiary: {
+            dim: '#C5C6CF',
+            dark: '#E1E2EB',
+            main: '#F5F5FF',
+            light: '#FEFBFF',
+            bright: '#F9F9F9',
+        },
+        natural: {
+            dim: '#13131B',
+            dark: '#5F5E62',
+            main: '#929094',
+            light: '#C8C5CA',
+            bright: '#fff',
+            granite: '#666',
+        },
+        motor: {
+            main: '#00CCFF',
+            light: 'rgba(0, 208, 255, 0.10)',
+            bright: '#DFF9FF',
+        },
+        car: {
+            main: '#00CCFF',
+            light: 'rgba(0, 208, 255, 0.10)',
+            darkAI: '#06BDCE',
+        },
+        travel: {
+            main: '#00E08B',
+            light: 'rgba(0, 228, 130, 0.10)',
+        },
+        health: {
+            main: '#FD72E7',
+        },
+        life: {
+            main: '#C3214B',
+            light: 'rgba(195, 33, 75, 0.10)',
+        },
+        pet: {
+            main: '#F3A100',
+        },
+    },
+    typography: {
+        fontFamily: '"Manrope", "Roboto", "Helvetica", "Arial", sans-serif',
+    },
+    logo: '/assets/igloo_nobeta.svg',
+    favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
+};
+/**
+ * CIMB Theme Configuration
+ */
+const cimbTheme = {
+    palette: {
+        paCimb: {
+            main: '#C3214B',
+            light: 'rgba(195, 33, 75, 0.10)',
+            bright: '#EE0500',
+            buttonBg: 'linear-gradient(90deg, color(display-p3 0.6941 0.1961 0.3059) 0%, color(display-p3 0.8941 0.2745 0.1843) 100%)',
+        },
+        primary: {
+            dark: '#A01B3D',
+            main: '#C3214B',
+            light: '#D04C6F',
+            bright: '#E07A92',
+            plain: '#F5E6EA',
+            border: '#C3214B',
+        },
+        secondary: {
+            dim: '#B71C1C',
+            dark: '#D32F2F',
+            main: '#EE0500',
+            bright: '#F44336',
+            mediumBright: '#EF5350',
+            light: '#FFCDD2',
+            lighter: '#FFEBEE',
+        },
+        tertiary: {
+            dim: '#C5C6CF',
+            dark: '#E1E2EB',
+            main: '#F5F5FF',
+            light: '#FEFBFF',
+            bright: '#F9F9F9',
+        },
+        natural: {
+            dim: '#13131B',
+            dark: '#5F5E62',
+            main: '#929094',
+            light: '#C8C5CA',
+            bright: '#fff',
+            granite: '#666',
+        },
+        motor: {
+            main: '#C3214B',
+            light: 'rgba(195, 33, 75, 0.10)',
+            bright: '#F5E6EA',
+        },
+        car: {
+            main: '#C3214B',
+            light: 'rgba(195, 33, 75, 0.10)',
+            darkAI: '#A01B3D',
+        },
+        travel: {
+            main: '#EE0500',
+            light: 'rgba(238, 5, 0, 0.10)',
+        },
+        health: {
+            main: '#E91E63',
+            light: 'rgba(233, 30, 99, 0.10)',
+        },
+        life: {
+            main: '#C3214B',
+            light: 'rgba(195, 33, 75, 0.10)',
+        },
+        pet: {
+            main: '#F3A100',
+        },
+    },
+    typography: {
+        fontFamily: '"CIMB Sans", "Roboto", "Helvetica", "Arial", sans-serif',
+    },
+    logo: '/assets/cimb/cimb-logo.svg',
+    favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
+};
+/**
+ * Ammetlife Theme Configuration
+ */
+const ammetlifeTheme = {
+    palette: {
+        primary: {
+            dark: '#0D47A1',
+            main: '#1976D2',
+            light: '#42A5F5',
+            bright: '#90CAF9',
+            plain: '#E3F2FD',
+            border: '#1976D2',
+        },
+        secondary: {
+            dim: '#E65100',
+            dark: '#EF6C00',
+            main: '#FFA726',
+            bright: '#FFB74D',
+            mediumBright: '#FFCC80',
+            light: '#FFE0B2',
+            lighter: '#FFF3E0',
+        },
+        tertiary: {
+            dim: '#B0BEC5',
+            dark: '#CFD8DC',
+            main: '#ECEFF1',
+            light: '#FAFAFA',
+            bright: '#FFFFFF',
+        },
+        natural: {
+            dim: '#263238',
+            dark: '#546E7A',
+            main: '#78909C',
+            light: '#B0BEC5',
+            bright: '#fff',
+            granite: '#666',
+        },
+        motor: {
+            main: '#1976D2',
+            light: 'rgba(25, 118, 210, 0.10)',
+            bright: '#E3F2FD',
+        },
+        car: {
+            main: '#1976D2',
+            light: 'rgba(25, 118, 210, 0.10)',
+            darkAI: '#1565C0',
+        },
+        travel: {
+            main: '#00C853',
+            light: 'rgba(0, 200, 83, 0.10)',
+        },
+        health: {
+            main: '#E91E63',
+            light: 'rgba(233, 30, 99, 0.10)',
+        },
+        life: {
+            main: '#9C27B0',
+            light: 'rgba(156, 39, 176, 0.10)',
+        },
+        pet: {
+            main: '#FF9800',
+        },
+    },
+    typography: {
+        fontFamily: '"Open Sans", "Roboto", "Helvetica", "Arial", sans-serif',
+    },
+    logo: '/assets/ammetlife/logo-AmMetLife.svg',
+    favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
+};
+/**
+ * Theme Registry
+ * Map of tenant IDs to their theme configurations
+ */
+const tenantThemes = {
+    igloo: iglooTheme,
+    cimb: cimbTheme,
+    ammetlife: ammetlifeTheme,
+};
+/**
+ * Get theme configuration by tenant ID
+ * @param tenantId - The tenant identifier
+ * @returns Theme configuration for the specified tenant
+ * @throws Error if tenant ID is not found
+ */
+function getTenantTheme(tenantId) {
+    const theme = tenantThemes[tenantId];
+    if (!theme) {
+        throw new Error(`Theme not found for tenant: ${tenantId}. Available tenants: ${Object.keys(tenantThemes).join(', ')}`);
+    }
+    return theme;
+}
+/**
+ * Check if a tenant ID is valid
+ * @param tenantId - The tenant identifier to validate
+ * @returns True if the tenant ID is valid
+ */
+function isValidTenantId(tenantId) {
+    return tenantId in tenantThemes;
+}
+/**
+ * Get all available tenant IDs
+ * @returns Array of all registered tenant IDs
+ */
+function getAvailableTenants() {
+    return Object.keys(tenantThemes);
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Button component with tenant theme support
+ *
+ * @example
+ * ```tsx
+ * // Uses tenant primary color
+ * <Button tenantColored>Click Me</Button>
+ *
+ * // Uses MUI default color
+ * <Button color="primary">Click Me</Button>
+ * ```
+ */
+function Button(_a) {
+    var _b, _c, _d;
+    var { tenantColored = false, variant = 'contained', sx, color } = _a, props = __rest(_a, ["tenantColored", "variant", "sx", "color"]);
+    const { theme } = useTenantTheme();
+    const buttonSx = tenantColored
+        ? Object.assign({ backgroundColor: (_b = theme.palette.primary) === null || _b === void 0 ? void 0 : _b.main, color: '#fff', '&:hover': {
+                backgroundColor: ((_c = theme.palette.primary) === null || _c === void 0 ? void 0 : _c.dark) || ((_d = theme.palette.primary) === null || _d === void 0 ? void 0 : _d.main),
+            } }, sx) : sx;
+    return (jsxRuntime.jsx(material.Button, Object.assign({ variant: variant, color: tenantColored ? undefined : color, sx: buttonSx }, props)));
+}
+
+/**
+ * Card component with tenant theme support
+ *
+ * @example
+ * ```tsx
+ * <Card
+ *   title="My Card"
+ *   content="Card content"
+ *   actions={<Button>Action</Button>}
+ *   tenantAccent
+ * />
+ * ```
+ */
+function Card(_a) {
+    var _b;
+    var { title, headerAction, content, actions, tenantAccent = false, sx, children } = _a, props = __rest(_a, ["title", "headerAction", "content", "actions", "tenantAccent", "sx", "children"]);
+    const { theme } = useTenantTheme();
+    const cardSx = tenantAccent
+        ? Object.assign({ borderTop: `4px solid ${(_b = theme.palette.primary) === null || _b === void 0 ? void 0 : _b.main}` }, sx) : sx;
+    return (jsxRuntime.jsxs(material.Card, Object.assign({ sx: cardSx }, props, { children: [title && jsxRuntime.jsx(material.CardHeader, { title: title, action: headerAction }), (content || children) && (jsxRuntime.jsx(material.CardContent, { children: content || children })), actions && jsxRuntime.jsx(material.CardActions, { children: actions })] })));
+}
+
+/**
+ * Banner component with tenant theme support
+ *
+ * @example
+ * ```tsx
+ * <Banner
+ *   title="Welcome to Our Platform"
+ *   description="Get started today"
+ *   action={<Button>Get Started</Button>}
+ *   gradient
+ * />
+ * ```
+ */
+function Banner(_a) {
+    var _b, _c, _d, _e;
+    var { title, description, action, gradient = true, sx } = _a, props = __rest(_a, ["title", "description", "action", "gradient", "sx"]);
+    const { theme } = useTenantTheme();
+    const background = gradient
+        ? `linear-gradient(135deg, ${(_b = theme.palette.primary) === null || _b === void 0 ? void 0 : _b.main} 0%, ${((_c = theme.palette.primary) === null || _c === void 0 ? void 0 : _c.light) || ((_d = theme.palette.primary) === null || _d === void 0 ? void 0 : _d.main)} 100%)`
+        : (_e = theme.palette.primary) === null || _e === void 0 ? void 0 : _e.main;
+    return (jsxRuntime.jsxs(material.Box, Object.assign({ sx: Object.assign({ background, color: 'white', padding: '32px', borderRadius: '12px', textAlign: 'center' }, sx) }, props, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h4", component: "h2", gutterBottom: true, fontWeight: "bold" }, { children: title })), description && (jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", sx: { opacity: 0.95, mb: action ? 2 : 0 } }, { children: description }))), action && jsxRuntime.jsx(material.Box, Object.assign({ sx: { mt: 2 } }, { children: action }))] })));
+}
+
+/**
+ * Theme Utility Functions
+ * Helper functions for working with tenant themes
+ */
+/**
+ * Get color value from theme palette path
+ * @param theme - Tenant theme configuration
+ * @param path - Dot-notation path to color (e.g., 'primary.main')
+ * @param defaultColor - Fallback color if path not found
+ * @returns Color string
+ */
+function getThemeColor(theme, path, defaultColor = '#000000') {
+    const keys = path.split('.');
+    let value = theme.palette;
+    for (const key of keys) {
+        if (value && typeof value === 'object' && key in value) {
+            value = value[key];
+        }
+        else {
+            return defaultColor;
+        }
+    }
+    return typeof value === 'string' ? value : defaultColor;
+}
+/**
+ * Merge tenant theme with base MUI theme
+ * @param baseTheme - Base MUI theme
+ * @param tenantTheme - Tenant-specific theme configuration
+ * @returns Merged theme
+ */
+function mergeTenantTheme(baseTheme, tenantTheme) {
+    var _a, _b;
+    return Object.assign(Object.assign({}, baseTheme), { palette: Object.assign(Object.assign(Object.assign({}, baseTheme.palette), tenantTheme.palette), { 
+            // Deep merge for nested objects
+            primary: Object.assign(Object.assign({}, (((_a = baseTheme.palette) === null || _a === void 0 ? void 0 : _a.primary) || {})), (tenantTheme.palette.primary || {})), secondary: Object.assign(Object.assign({}, (((_b = baseTheme.palette) === null || _b === void 0 ? void 0 : _b.secondary) || {})), (tenantTheme.palette.secondary || {})) }), typography: Object.assign(Object.assign({}, baseTheme.typography), tenantTheme.typography) });
+}
+/**
+ * Create CSS variables from tenant theme
+ * Useful for using theme values in CSS
+ * @param theme - Tenant theme configuration
+ * @param prefix - Prefix for CSS variable names
+ * @returns Object with CSS variable definitions
+ */
+function createThemeCSSVariables(theme, prefix = '--tenant') {
+    var _a;
+    const variables = {};
+    // Add primary colors
+    if (theme.palette.primary) {
+        Object.entries(theme.palette.primary).forEach(([key, value]) => {
+            if (typeof value === 'string') {
+                variables[`${prefix}-primary-${key}`] = value;
+            }
+        });
+    }
+    // Add secondary colors
+    if (theme.palette.secondary) {
+        Object.entries(theme.palette.secondary).forEach(([key, value]) => {
+            if (typeof value === 'string') {
+                variables[`${prefix}-secondary-${key}`] = value;
+            }
+        });
+    }
+    // Add font family
+    if ((_a = theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) {
+        variables[`${prefix}-font-family`] = theme.typography.fontFamily;
+    }
+    return variables;
+}
+
+exports.Banner = Banner;
+exports.Button = Button;
+exports.Card = Card;
+exports.TenantThemeProvider = TenantThemeProvider;
+exports.ammetlifeTheme = ammetlifeTheme;
+exports.cimbTheme = cimbTheme;
+exports.createThemeCSSVariables = createThemeCSSVariables;
+exports.getAvailableTenants = getAvailableTenants;
+exports.getTenantTheme = getTenantTheme;
+exports.getThemeColor = getThemeColor;
+exports.iglooTheme = iglooTheme;
+exports.isValidTenantId = isValidTenantId;
+exports.mergeTenantTheme = mergeTenantTheme;
+exports.tenantThemes = tenantThemes;
+exports.useIsTenant = useIsTenant;
+exports.useTenantId = useTenantId;
+exports.useTenantTheme = useTenantTheme;