@wealthx/ui 1.0.0 → 1.0.1

package/dist/chunk-GTCMGRVH.mjs

@@ -0,0 +1,576 @@
+import {
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/theme/constants.ts
+var FOUNDATION_COLORS = {
+  // Brand are tenant-driven; defaults for fallback
+  brand: {
+    primary: "#33FF99",
+    secondary: "#162029"
+  },
+  text: {
+    primary: "#040D13",
+    secondary: "#4A5C6A",
+    disabled: "#9EAAB5",
+    inverse: "#FFFFFF"
+  },
+  background: {
+    primary: "#FFFFFF",
+    secondary: "#F5F8FA",
+    tertiary: "#E8EAEC",
+    elevated: "#FFFFFF"
+  },
+  border: {
+    default: "#E8EAEC",
+    focus: "#33FF99",
+    // default only; at runtime --color-border-focus uses brand primary
+    error: "#F44336"
+  },
+  state: {
+    error: "#F44336",
+    warning: "#FF9800",
+    success: "#4CAF50",
+    info: "#2196F3"
+  }
+};
+var GRAY_SCALE = {
+  50: "#F6F6F8",
+  100: "#E8E8EB",
+  200: "#D9D9D9",
+  300: "#B9BCBF",
+  400: "#959495",
+  500: "#868686",
+  600: "#8A8F94"
+};
+var ACCENTS = {
+  purple: "#9747FF",
+  darkGreen: "#1E4620"
+};
+var OPACITY_UTILITY = {
+  disabled: 0.38,
+  hover: 0.08
+};
+var CHART_COLORS = {
+  background: "#F7F7F8",
+  textLabels: "#000000",
+  textTitle: "#757373",
+  grid: "#E3E3E8",
+  series: {
+    blue: "#2B72FB",
+    teal: "#64BDC6",
+    yellow: "#EECA34",
+    orange: "#FE6A35",
+    red: "#FA4B42",
+    pink: "#EE60E0",
+    purple: "#7B47E9",
+    indigo: "#5D89DF",
+    lightBlue: "#6AD1FE",
+    green: "#3FDC7E"
+  }
+};
+var PRIMARY_OPACITY_STEPS = [0.05, 0.1, 0.2, 0.3, 0.4, 0.6, 0.7, 0.8, 0.9];
+var SECONDARY_OPACITY_STEPS = [0.05, 0.1, 0.2, 0.6, 0.7, 0.8, 0.9];
+var PRIMARY_SCALE_KEYS = ["50", "100", "200", "300", "400", "600", "700", "800", "900"];
+var SECONDARY_SCALE_KEYS = ["50", "100", "200", "600", "700", "800", "900"];
+var DEFAULT_THEME_OPTIONS = {
+  primary: FOUNDATION_COLORS.brand.primary,
+  secondary: FOUNDATION_COLORS.brand.secondary
+};
+var CONTRAST_DARK = "#040D13";
+var CONTRAST_LIGHT = "#FFFFFF";
+
+// src/theme/typography.ts
+var FONT_FAMILY_SANS = '"Proxima Nova", sans-serif';
+function style(weight, size, lineHeight, extra) {
+  return __spreadValues({ fontWeight: weight, fontSize: size, lineHeight }, extra);
+}
+var TYPOGRAPHY_DISPLAY = {
+  large: style(700, "4rem", "4.5rem", { letterSpacing: "-0.03125rem" }),
+  medium: style(700, "3rem", "3.5rem"),
+  small: style(600, "2.125rem", "2.625rem")
+};
+var TYPOGRAPHY_HEADING = {
+  h1: style(700, "2rem", "2.5rem"),
+  h2: style(600, "1.75rem", "2.25rem"),
+  h3: style(600, "1.5rem", "2rem"),
+  h4: style(600, "1.3125rem", "1.75rem"),
+  h5: style(600, "1.125rem", "1.5rem"),
+  h6: style(600, "1rem", "1.375rem")
+};
+var TYPOGRAPHY_BODY = {
+  large: style(400, "1.125rem", "1.75rem"),
+  medium: style(400, "1rem", "1.5rem"),
+  small: style(400, "0.875rem", "1.25rem")
+};
+var TYPOGRAPHY_LABEL = {
+  large: style(600, "1rem", "1.25rem"),
+  medium: style(600, "0.875rem", "1.125rem"),
+  small: style(600, "0.75rem", "1rem", { letterSpacing: "0.03125rem" })
+};
+var TYPOGRAPHY_UTILITY = {
+  caption: style(400, "0.75rem", "1rem"),
+  overline: style(600, "0.625rem", "0.875rem", {
+    letterSpacing: "0.09375rem",
+    textTransform: "uppercase"
+  }),
+  code: style(400, "0.875rem", "1.25rem")
+};
+var TYPOGRAPHY = {
+  display: TYPOGRAPHY_DISPLAY,
+  heading: TYPOGRAPHY_HEADING,
+  body: TYPOGRAPHY_BODY,
+  label: TYPOGRAPHY_LABEL,
+  utility: TYPOGRAPHY_UTILITY
+};
+function toFontShorthand(s, family = FONT_FAMILY_SANS) {
+  var _a;
+  const f = (_a = s.fontFamily) != null ? _a : family;
+  return `${s.fontWeight} ${s.fontSize}/${s.lineHeight} ${f}`;
+}
+function getTypographyCssVars() {
+  var _a;
+  const family = FONT_FAMILY_SANS;
+  const entries = [];
+  entries.push(["--font-family-sans", family]);
+  for (const [key, style2] of Object.entries(TYPOGRAPHY_DISPLAY)) {
+    entries.push([`--font-display-${key}`, toFontShorthand(style2, family)]);
+  }
+  for (const [key, style2] of Object.entries(TYPOGRAPHY_HEADING)) {
+    entries.push([`--font-${key}`, toFontShorthand(style2, family)]);
+  }
+  for (const [key, style2] of Object.entries(TYPOGRAPHY_BODY)) {
+    entries.push([`--font-body-${key}`, toFontShorthand(style2, family)]);
+  }
+  for (const [key, style2] of Object.entries(TYPOGRAPHY_LABEL)) {
+    entries.push([`--font-label-${key}`, toFontShorthand(style2, family)]);
+  }
+  for (const [key, style2] of Object.entries(TYPOGRAPHY_UTILITY)) {
+    entries.push([`--font-${key}`, toFontShorthand(style2, (_a = style2.fontFamily) != null ? _a : family)]);
+  }
+  const out = {};
+  entries.forEach(([k, v]) => {
+    out[k] = v;
+  });
+  return out;
+}
+var TYPOGRAPHY_EXTRA_CSS = {
+  "font-display-large": { letterSpacing: "-0.03125rem" },
+  "font-label-small": { letterSpacing: "0.03125rem" },
+  "font-overline": { letterSpacing: "0.09375rem", textTransform: "uppercase" }
+};
+var VIEWPORT_LABELS = {
+  desktop: "Desktop (default)",
+  tablet: "Tablet (768\u20131024px)",
+  mobile: "Mobile (< 768px)"
+};
+var VIEWPORT_MAX_WIDTH = {
+  desktop: void 0,
+  tablet: 768,
+  mobile: 375
+};
+var RESPONSIVE_DISPLAY_MOBILE = {
+  displayLarge: style(700, "2.5rem", "2.8125rem", { letterSpacing: "-0.03125rem" }),
+  displayMedium: style(700, "2rem", "2.334rem"),
+  h1: style(700, "1.75rem", "2.1875rem"),
+  h2: style(600, "1.5rem", "1.93rem")
+};
+var RESPONSIVE_DISPLAY_TABLET = {
+  displayLarge: style(700, "3.6rem", "4.05rem", { letterSpacing: "-0.03125rem" }),
+  displayMedium: style(700, "2.7rem", "3.15rem"),
+  displaySmall: style(600, "1.9125rem", "2.3625rem")
+};
+function getResponsiveFontOverrides(mode) {
+  if (mode === "desktop") return {};
+  const f = FONT_FAMILY_SANS;
+  if (mode === "mobile") {
+    return {
+      "--font-display-large": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.displayLarge, f),
+      "--font-display-medium": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.displayMedium, f),
+      "--font-h1": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.h1, f),
+      "--font-h2": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.h2, f)
+    };
+  }
+  return {
+    "--font-display-large": toFontShorthand(RESPONSIVE_DISPLAY_TABLET.displayLarge, f),
+    "--font-display-medium": toFontShorthand(RESPONSIVE_DISPLAY_TABLET.displayMedium, f),
+    "--font-display-small": toFontShorthand(RESPONSIVE_DISPLAY_TABLET.displaySmall, f)
+  };
+}
+
+// src/theme/utils.ts
+function hexToRgb(hex) {
+  const normalized = hex.replace(/^#/, "");
+  if (normalized.length === 3) {
+    const r = parseInt(normalized[0] + normalized[0], 16);
+    const g = parseInt(normalized[1] + normalized[1], 16);
+    const b = parseInt(normalized[2] + normalized[2], 16);
+    return [r, g, b];
+  }
+  if (normalized.length === 6) {
+    const r = parseInt(normalized.slice(0, 2), 16);
+    const g = parseInt(normalized.slice(2, 4), 16);
+    const b = parseInt(normalized.slice(4, 6), 16);
+    return [r, g, b];
+  }
+  throw new Error(`Invalid hex color: ${hex}`);
+}
+function rgbToCssRgbString(rgb) {
+  return `${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
+}
+function rgba(hex, alpha) {
+  const [r, g, b] = hexToRgb(hex);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function buildOpacityScale(hex, steps) {
+  const [r, g, b] = hexToRgb(hex);
+  const out = {};
+  for (const { key, opacity } of steps) {
+    out[key] = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  return out;
+}
+function linearizeSrgb(c) {
+  const n = c / 255;
+  return n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
+}
+function getLuminance(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  return 0.2126 * linearizeSrgb(r) + 0.7152 * linearizeSrgb(g) + 0.0722 * linearizeSrgb(b);
+}
+function getContrastText(backgroundColor) {
+  const luminance = getLuminance(backgroundColor);
+  return luminance > 0.179 ? CONTRAST_DARK : CONTRAST_LIGHT;
+}
+
+// src/theme/createDesignTheme.ts
+import {
+  createTheme
+} from "@mui/material/styles";
+function buildPrimaryScale(primaryHex) {
+  const steps = [
+    { key: "50", opacity: 0.05 },
+    { key: "100", opacity: 0.1 },
+    { key: "200", opacity: 0.2 },
+    { key: "300", opacity: 0.3 },
+    { key: "400", opacity: 0.4 },
+    { key: "600", opacity: 0.6 },
+    { key: "700", opacity: 0.7 },
+    { key: "800", opacity: 0.8 },
+    { key: "900", opacity: 0.9 }
+  ];
+  const out = {};
+  steps.forEach(({ key, opacity }) => {
+    out[key] = rgba(primaryHex, opacity);
+  });
+  return out;
+}
+function buildSecondaryScale(secondaryHex) {
+  const steps = [
+    { key: "50", opacity: 0.05 },
+    { key: "100", opacity: 0.1 },
+    { key: "200", opacity: 0.2 },
+    { key: "600", opacity: 0.6 },
+    { key: "700", opacity: 0.7 },
+    { key: "800", opacity: 0.8 },
+    { key: "900", opacity: 0.9 }
+  ];
+  const out = {};
+  steps.forEach(({ key, opacity }) => {
+    out[key] = rgba(secondaryHex, opacity);
+  });
+  return out;
+}
+function buildPrimaryScalePalette(primaryHex) {
+  const scale = buildPrimaryScale(primaryHex);
+  return {
+    50: scale["50"],
+    100: scale["100"],
+    200: scale["200"],
+    300: scale["300"],
+    400: scale["400"],
+    500: primaryHex,
+    600: scale["600"],
+    700: scale["700"],
+    800: scale["800"],
+    900: scale["900"],
+    main: primaryHex,
+    light: scale["200"],
+    dark: scale["800"],
+    contrastText: getContrastText(primaryHex)
+  };
+}
+function buildSecondaryScalePalette(secondaryHex) {
+  const scale = buildSecondaryScale(secondaryHex);
+  return {
+    50: scale["50"],
+    100: scale["100"],
+    200: scale["200"],
+    600: scale["600"],
+    700: scale["700"],
+    800: scale["800"],
+    900: scale["900"],
+    main: secondaryHex,
+    light: scale["200"],
+    dark: scale["800"],
+    contrastText: getContrastText(secondaryHex)
+  };
+}
+function createDesignTheme(config) {
+  const { primary, secondary } = config;
+  const foundation = FOUNDATION_COLORS;
+  const primaryPalette = buildPrimaryScalePalette(primary);
+  const secondaryPalette = buildSecondaryScalePalette(secondary);
+  const palette = {
+    mode: "light",
+    primary: primaryPalette,
+    secondary: secondaryPalette,
+    error: {
+      main: FOUNDATION_COLORS.state.error
+    },
+    warning: {
+      main: FOUNDATION_COLORS.state.warning
+    },
+    success: {
+      main: FOUNDATION_COLORS.state.success
+    },
+    info: {
+      main: FOUNDATION_COLORS.state.info
+    },
+    background: {
+      default: foundation.background.primary,
+      paper: foundation.background.elevated
+    },
+    text: {
+      primary: foundation.text.primary,
+      secondary: foundation.text.secondary,
+      disabled: foundation.text.disabled
+    },
+    grey: GRAY_SCALE,
+    divider: foundation.border.default
+  };
+  const themeOptions = {
+    palette,
+    typography: {
+      fontFamily: FONT_FAMILY_SANS,
+      h1: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h1.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h1.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h1.lineHeight
+      },
+      h2: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h2.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h2.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h2.lineHeight
+      },
+      h3: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h3.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h3.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h3.lineHeight
+      },
+      h4: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h4.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h4.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h4.lineHeight
+      },
+      h5: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h5.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h5.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h5.lineHeight
+      },
+      h6: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h6.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h6.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h6.lineHeight
+      },
+      body1: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_BODY.medium.fontWeight,
+        fontSize: TYPOGRAPHY_BODY.medium.fontSize,
+        lineHeight: TYPOGRAPHY_BODY.medium.lineHeight
+      },
+      body2: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_BODY.small.fontWeight,
+        fontSize: TYPOGRAPHY_BODY.small.fontSize,
+        lineHeight: TYPOGRAPHY_BODY.small.lineHeight
+      }
+    },
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            borderRadius: 0
+          },
+          outlined: {
+            color: CONTRAST_DARK,
+            "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+              color: CONTRAST_DARK
+            }
+          },
+          sizeSmall: {
+            height: 32,
+            minHeight: 32
+          },
+          sizeMedium: {
+            height: 40,
+            minHeight: 40
+          },
+          sizeLarge: {
+            height: 48,
+            minHeight: 48
+          }
+        }
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: ({ ownerState }) => {
+            const palette2 = ownerState.color === "secondary" ? secondaryPalette : primaryPalette;
+            const outlined = ownerState.outlined === true;
+            return {
+              borderRadius: 0,
+              textTransform: "none",
+              color: CONTRAST_DARK,
+              "&:hover": {
+                backgroundColor: palette2[100]
+              },
+              "&.MuiToggleButtonGroup-lastButton, &.MuiToggleButtonGroup-middleButton": outlined ? {
+                borderLeft: `1px solid ${foundation.border.default}`,
+                borderTop: `1px solid ${foundation.border.default}`
+              } : {},
+              "&.Mui-disabled.MuiToggleButtonGroup-lastButton, &.Mui-disabled.MuiToggleButtonGroup-middleButton": outlined ? {
+                borderLeft: `1px solid ${foundation.border.default}`,
+                borderTop: `1px solid ${foundation.border.default}`
+              } : {},
+              "&.Mui-selected": outlined ? {
+                backgroundColor: palette2[100],
+                border: `1px solid ${palette2.main}`,
+                color: CONTRAST_DARK
+              } : {
+                backgroundColor: palette2.main,
+                color: palette2.contrastText,
+                "&:hover": {
+                  backgroundColor: palette2.dark,
+                  color: palette2.contrastText
+                }
+              }
+            };
+          }
+        }
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 46,
+                  height: 46,
+                  padding: (46 - 28) / 2,
+                  "& .MuiSvgIcon-root": { fontSize: 28 }
+                }
+              }
+            ]
+          }
+        }
+      },
+      MuiRadio: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 46,
+                  height: 46,
+                  padding: (46 - 28) / 2,
+                  "& .MuiSvgIcon-root": { fontSize: 28 }
+                }
+              }
+            ]
+          }
+        }
+      },
+      MuiSwitch: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 68,
+                  height: 44,
+                  padding: 8,
+                  "& .MuiSwitch-switchBase": {
+                    padding: 8,
+                    "&.Mui-checked": {
+                      transform: "translateX(24px)"
+                    }
+                  },
+                  "& .MuiSwitch-thumb": {
+                    width: 28,
+                    height: 28
+                  },
+                  "& .MuiSwitch-track": {
+                    height: 16,
+                    margin: "auto",
+                    borderRadius: 16 / 2
+                  }
+                }
+              }
+            ]
+          }
+        }
+      },
+      MuiCssBaseline: {
+        styleOverrides: {
+          ":root": {
+            "--theme-primary": primary,
+            "--theme-secondary": secondary
+          }
+        }
+      }
+    }
+  };
+  return createTheme(themeOptions);
+}
+
+export {
+  FOUNDATION_COLORS,
+  GRAY_SCALE,
+  ACCENTS,
+  OPACITY_UTILITY,
+  CHART_COLORS,
+  PRIMARY_OPACITY_STEPS,
+  SECONDARY_OPACITY_STEPS,
+  PRIMARY_SCALE_KEYS,
+  SECONDARY_SCALE_KEYS,
+  DEFAULT_THEME_OPTIONS,
+  FONT_FAMILY_SANS,
+  TYPOGRAPHY_DISPLAY,
+  TYPOGRAPHY_HEADING,
+  TYPOGRAPHY_BODY,
+  TYPOGRAPHY_LABEL,
+  TYPOGRAPHY_UTILITY,
+  TYPOGRAPHY,
+  getTypographyCssVars,
+  TYPOGRAPHY_EXTRA_CSS,
+  VIEWPORT_LABELS,
+  VIEWPORT_MAX_WIDTH,
+  getResponsiveFontOverrides,
+  hexToRgb,
+  rgbToCssRgbString,
+  rgba,
+  buildOpacityScale,
+  getLuminance,
+  getContrastText,
+  createDesignTheme
+};