@wealthx/ui 0.0.1 → 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,24 @@
+
+yarn run v1.22.22
+$ tsup
+CLI Building entry: src/button.tsx, src/theme/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Using tsup config: /Users/mac/Projects/wealthx-ui/packages/ui/tsup.config.ts
+CLI Target: es6
+CJS Build start
+ESM Build start
+ESM dist/button.mjs         310.00 B
+ESM dist/theme/index.mjs    19.03 KB
+ESM dist/chunk-I4E63NIC.mjs 900.00 B
+ESM ⚡️ Build success in 17ms
+CJS dist/button.js      2.46 KB
+CJS dist/theme/index.js 22.54 KB
+CJS ⚡️ Build success in 17ms
+DTS Build start
+DTS ⚡️ Build success in 2837ms
+DTS dist/button.d.ts       258.00 B
+DTS dist/theme/index.d.ts  8.43 KB
+DTS dist/button.d.mts      258.00 B
+DTS dist/theme/index.d.mts 8.43 KB
+✨  Done in 3.96s.

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @wealthx/ui
+
+## 1.0.0
+
+### Major Changes
+
+- 29984f1: Initial Release
+
+### Minor Changes
+
+- Add readme

package/dist/button.d.mts

@@ -0,0 +1,9 @@
+import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
+
+type ButtonProps = ButtonProps$1;
+declare function Button(props: ButtonProps): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps };

package/dist/button.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
+
+type ButtonProps = ButtonProps$1;
+declare function Button(props: ButtonProps): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps };

package/dist/button.js

@@ -0,0 +1,59 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/button.tsx
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+var import_Button = __toESM(require("@mui/material/Button"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, __spreadValues({}, props));
+}
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/button.mjs

@@ -0,0 +1,14 @@
+import {
+  __spreadValues
+} from "./chunk-I4E63NIC.mjs";
+
+// src/button.tsx
+import MuiButton from "@mui/material/Button";
+import { jsx } from "react/jsx-runtime";
+function Button(props) {
+  return /* @__PURE__ */ jsx(MuiButton, __spreadValues({}, props));
+}
+Button.displayName = "Button";
+export {
+  Button
+};

package/dist/chunk-FWCSY2DS.mjs

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest
+};

package/dist/chunk-I4E63NIC.mjs

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+export {
+  __spreadValues,
+  __spreadProps
+};

package/dist/theme/index.d.mts

@@ -0,0 +1,246 @@
+import React from 'react';
+import * as _mui_material_styles from '@mui/material/styles';
+
+/**
+ * Build CSS variable set for :root from tenant primary/secondary.
+ */
+interface DesignThemeOptions {
+    /** Tenant primary brand color (hex). */
+    primary: string;
+    /** Tenant secondary brand color (hex). */
+    secondary: string;
+}
+/**
+ * Returns a flat object of CSS variable name → value for injection into :root.
+ * Names use single dashes: --color-brand-primary, --primary-rgb, --primary-50, etc.
+ */
+declare function buildCssVariables(options: DesignThemeOptions): Record<string, string>;
+
+/**
+ * Provider that applies design system theme (MUI + CSS variables).
+ * Primary and secondary are tenant-based and can be set per instance.
+ */
+
+interface ThemeProviderProps extends DesignThemeOptions {
+    children: React.ReactNode;
+    /** Inject CSS variables into document (default true). Set false if you inject them yourself. */
+    injectCssVariables?: boolean;
+}
+/**
+ * Provides MUI theme and design-system CSS variables.
+ * Use primary/secondary to set tenant brand colors; all primary/* and secondary/* tokens update automatically.
+ */
+declare function ThemeProvider({ children, primary, secondary, injectCssVariables, }: ThemeProviderProps): JSX.Element;
+declare namespace ThemeProvider {
+    var displayName: string;
+}
+
+/**
+ * Create MUI theme with design system palette.
+ * Primary and secondary are tenant-based (dynamic).
+ */
+interface DesignThemeConfig {
+    primary: string;
+    secondary: string;
+}
+declare function createDesignTheme(config: DesignThemeConfig): _mui_material_styles.Theme;
+
+/**
+ * Theme utilities: hex ↔ RGB, opacity-based color generation.
+ */
+/**
+ * Parse hex color to RGB tuple [r, g, b] (0-255).
+ */
+declare function hexToRgb(hex: string): [number, number, number];
+/**
+ * Format RGB tuple as "r, g, b" for use in rgba(var(--primary-rgb), 0.5).
+ */
+declare function rgbToCssRgbString(rgb: [number, number, number]): string;
+/**
+ * Create rgba string from hex and opacity.
+ */
+declare function rgba(hex: string, alpha: number): string;
+/**
+ * Build opacity scale: { "50": "rgba(...)", "100": "rgba(...)", ... }.
+ */
+declare function buildOpacityScale(hex: string, steps: readonly {
+    key: string;
+    opacity: number;
+}[]): Record<string, string>;
+/**
+ * Get relative luminance of a hex color (0 = black, 1 = white).
+ */
+declare function getLuminance(hex: string): number;
+/**
+ * Returns a readable text color (hex) for a given background color.
+ * Uses WCAG relative luminance: dark text on light backgrounds, light text on dark backgrounds.
+ * Use for button labels, chips, and any text on colored backgrounds.
+ *
+ * @param backgroundColor - Hex color (e.g. "#33FF99" or "#162029")
+ * @returns "#040D13" (dark) or "#FFFFFF" (light)
+ */
+declare function getContrastText(backgroundColor: string): string;
+
+/**
+ * Design system - Fixed color tokens (non-tenant).
+ * Primary and secondary are tenant-based and provided at runtime.
+ */
+declare const FOUNDATION_COLORS: {
+    readonly brand: {
+        readonly primary: "#33FF99";
+        readonly secondary: "#162029";
+    };
+    readonly text: {
+        readonly primary: "#040D13";
+        readonly secondary: "#4A5C6A";
+        readonly disabled: "#9EAAB5";
+        readonly inverse: "#FFFFFF";
+    };
+    readonly background: {
+        readonly primary: "#FFFFFF";
+        readonly secondary: "#F5F8FA";
+        readonly tertiary: "#E8EAEC";
+        readonly elevated: "#FFFFFF";
+    };
+    readonly border: {
+        readonly default: "#E8EAEC";
+        readonly focus: "#33FF99";
+        readonly error: "#F44336";
+    };
+    readonly state: {
+        readonly error: "#F44336";
+        readonly warning: "#FF9800";
+        readonly success: "#4CAF50";
+        readonly info: "#2196F3";
+    };
+};
+declare const GRAY_SCALE: {
+    readonly 50: "#F6F6F8";
+    readonly 100: "#E8E8EB";
+    readonly 200: "#D9D9D9";
+    readonly 300: "#B9BCBF";
+    readonly 400: "#959495";
+    readonly 500: "#868686";
+    readonly 600: "#8A8F94";
+};
+declare const ACCENTS: {
+    readonly purple: "#9747FF";
+    readonly darkGreen: "#1E4620";
+};
+declare const OPACITY_UTILITY: {
+    readonly disabled: 0.38;
+    readonly hover: 0.08;
+};
+declare const CHART_COLORS: {
+    readonly background: "#F7F7F8";
+    readonly textLabels: "#000000";
+    readonly textTitle: "#757373";
+    readonly grid: "#E3E3E8";
+    readonly series: {
+        readonly blue: "#2B72FB";
+        readonly teal: "#64BDC6";
+        readonly yellow: "#EECA34";
+        readonly orange: "#FE6A35";
+        readonly red: "#FA4B42";
+        readonly pink: "#EE60E0";
+        readonly purple: "#7B47E9";
+        readonly indigo: "#5D89DF";
+        readonly lightBlue: "#6AD1FE";
+        readonly green: "#3FDC7E";
+    };
+};
+
+/**
+ * Design system – Typography (rem-based).
+ * Font: Proxima Nova. Base: 16px (1rem).
+ */
+declare const FONT_FAMILY_SANS = "\"Proxima Nova\", sans-serif";
+/** Single typography style: font shorthand (weight size/lineHeight family) + optional letterSpacing & textTransform */
+interface TypographyStyle {
+    fontWeight: number;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing?: string;
+    textTransform?: "uppercase" | "none";
+    fontFamily?: string;
+}
+/** Display – hero and major titles */
+declare const TYPOGRAPHY_DISPLAY: {
+    readonly large: TypographyStyle;
+    readonly medium: TypographyStyle;
+    readonly small: TypographyStyle;
+};
+/** Headings H1–H6 */
+declare const TYPOGRAPHY_HEADING: {
+    readonly h1: TypographyStyle;
+    readonly h2: TypographyStyle;
+    readonly h3: TypographyStyle;
+    readonly h4: TypographyStyle;
+    readonly h5: TypographyStyle;
+    readonly h6: TypographyStyle;
+};
+/** Body text */
+declare const TYPOGRAPHY_BODY: {
+    readonly large: TypographyStyle;
+    readonly medium: TypographyStyle;
+    readonly small: TypographyStyle;
+};
+/** Labels – buttons, form labels, badges */
+declare const TYPOGRAPHY_LABEL: {
+    readonly large: TypographyStyle;
+    readonly medium: TypographyStyle;
+    readonly small: TypographyStyle;
+};
+/** Utility – caption, overline, code */
+declare const TYPOGRAPHY_UTILITY: {
+    readonly caption: TypographyStyle;
+    readonly overline: TypographyStyle;
+    readonly code: TypographyStyle;
+};
+declare const TYPOGRAPHY: {
+    readonly display: {
+        readonly large: TypographyStyle;
+        readonly medium: TypographyStyle;
+        readonly small: TypographyStyle;
+    };
+    readonly heading: {
+        readonly h1: TypographyStyle;
+        readonly h2: TypographyStyle;
+        readonly h3: TypographyStyle;
+        readonly h4: TypographyStyle;
+        readonly h5: TypographyStyle;
+        readonly h6: TypographyStyle;
+    };
+    readonly body: {
+        readonly large: TypographyStyle;
+        readonly medium: TypographyStyle;
+        readonly small: TypographyStyle;
+    };
+    readonly label: {
+        readonly large: TypographyStyle;
+        readonly medium: TypographyStyle;
+        readonly small: TypographyStyle;
+    };
+    readonly utility: {
+        readonly caption: TypographyStyle;
+        readonly overline: TypographyStyle;
+        readonly code: TypographyStyle;
+    };
+};
+/** All typography tokens as flat key → style for CSS variable generation */
+declare function getTypographyCssVars(): Record<string, string>;
+/** Letter-spacing and text-transform for styles that need them (for use with font shorthand) */
+declare const TYPOGRAPHY_EXTRA_CSS: Record<string, {
+    letterSpacing?: string;
+    textTransform?: string;
+}>;
+/** Viewport mode for responsive typography (Mobile <768px, Tablet 768–1024px) */
+type ViewportMode = "desktop" | "tablet" | "mobile";
+/** Labels for viewport modes (docs/tooling). */
+declare const VIEWPORT_LABELS: Record<ViewportMode, string>;
+/** Max width (px) to simulate viewport; desktop has no constraint. */
+declare const VIEWPORT_MAX_WIDTH: Record<ViewportMode, number | undefined>;
+/** Responsive typography overrides for tablet/mobile. Desktop returns {}. */
+declare function getResponsiveFontOverrides(mode: ViewportMode): Record<string, string>;
+
+export { ACCENTS, CHART_COLORS, type DesignThemeConfig, type DesignThemeOptions, FONT_FAMILY_SANS, FOUNDATION_COLORS, GRAY_SCALE, OPACITY_UTILITY, TYPOGRAPHY, TYPOGRAPHY_BODY, TYPOGRAPHY_DISPLAY, TYPOGRAPHY_EXTRA_CSS, TYPOGRAPHY_HEADING, TYPOGRAPHY_LABEL, TYPOGRAPHY_UTILITY, ThemeProvider, type ThemeProviderProps, type TypographyStyle, VIEWPORT_LABELS, VIEWPORT_MAX_WIDTH, type ViewportMode, buildCssVariables, buildOpacityScale, createDesignTheme, getContrastText, getLuminance, getResponsiveFontOverrides, getTypographyCssVars, hexToRgb, rgbToCssRgbString, rgba };

package/dist/theme/index.d.ts

@@ -0,0 +1,246 @@
+import React from 'react';
+import * as _mui_material_styles from '@mui/material/styles';
+
+/**
+ * Build CSS variable set for :root from tenant primary/secondary.
+ */
+interface DesignThemeOptions {
+    /** Tenant primary brand color (hex). */
+    primary: string;
+    /** Tenant secondary brand color (hex). */
+    secondary: string;
+}
+/**
+ * Returns a flat object of CSS variable name → value for injection into :root.
+ * Names use single dashes: --color-brand-primary, --primary-rgb, --primary-50, etc.
+ */
+declare function buildCssVariables(options: DesignThemeOptions): Record<string, string>;
+
+/**
+ * Provider that applies design system theme (MUI + CSS variables).
+ * Primary and secondary are tenant-based and can be set per instance.
+ */
+
+interface ThemeProviderProps extends DesignThemeOptions {
+    children: React.ReactNode;
+    /** Inject CSS variables into document (default true). Set false if you inject them yourself. */
+    injectCssVariables?: boolean;
+}
+/**
+ * Provides MUI theme and design-system CSS variables.
+ * Use primary/secondary to set tenant brand colors; all primary/* and secondary/* tokens update automatically.
+ */
+declare function ThemeProvider({ children, primary, secondary, injectCssVariables, }: ThemeProviderProps): JSX.Element;
+declare namespace ThemeProvider {
+    var displayName: string;
+}
+
+/**
+ * Create MUI theme with design system palette.
+ * Primary and secondary are tenant-based (dynamic).
+ */
+interface DesignThemeConfig {
+    primary: string;
+    secondary: string;
+}
+declare function createDesignTheme(config: DesignThemeConfig): _mui_material_styles.Theme;
+
+/**
+ * Theme utilities: hex ↔ RGB, opacity-based color generation.
+ */
+/**
+ * Parse hex color to RGB tuple [r, g, b] (0-255).
+ */
+declare function hexToRgb(hex: string): [number, number, number];
+/**
+ * Format RGB tuple as "r, g, b" for use in rgba(var(--primary-rgb), 0.5).
+ */
+declare function rgbToCssRgbString(rgb: [number, number, number]): string;
+/**
+ * Create rgba string from hex and opacity.
+ */
+declare function rgba(hex: string, alpha: number): string;
+/**
+ * Build opacity scale: { "50": "rgba(...)", "100": "rgba(...)", ... }.
+ */
+declare function buildOpacityScale(hex: string, steps: readonly {
+    key: string;
+    opacity: number;
+}[]): Record<string, string>;
+/**
+ * Get relative luminance of a hex color (0 = black, 1 = white).
+ */
+declare function getLuminance(hex: string): number;
+/**
+ * Returns a readable text color (hex) for a given background color.
+ * Uses WCAG relative luminance: dark text on light backgrounds, light text on dark backgrounds.
+ * Use for button labels, chips, and any text on colored backgrounds.
+ *
+ * @param backgroundColor - Hex color (e.g. "#33FF99" or "#162029")
+ * @returns "#040D13" (dark) or "#FFFFFF" (light)
+ */
+declare function getContrastText(backgroundColor: string): string;
+
+/**
+ * Design system - Fixed color tokens (non-tenant).
+ * Primary and secondary are tenant-based and provided at runtime.
+ */
+declare const FOUNDATION_COLORS: {
+    readonly brand: {
+        readonly primary: "#33FF99";
+        readonly secondary: "#162029";
+    };
+    readonly text: {
+        readonly primary: "#040D13";
+        readonly secondary: "#4A5C6A";
+        readonly disabled: "#9EAAB5";
+        readonly inverse: "#FFFFFF";
+    };
+    readonly background: {
+        readonly primary: "#FFFFFF";
+        readonly secondary: "#F5F8FA";
+        readonly tertiary: "#E8EAEC";
+        readonly elevated: "#FFFFFF";
+    };
+    readonly border: {
+        readonly default: "#E8EAEC";
+        readonly focus: "#33FF99";
+        readonly error: "#F44336";
+    };
+    readonly state: {
+        readonly error: "#F44336";
+        readonly warning: "#FF9800";
+        readonly success: "#4CAF50";
+        readonly info: "#2196F3";
+    };
+};
+declare const GRAY_SCALE: {
+    readonly 50: "#F6F6F8";
+    readonly 100: "#E8E8EB";
+    readonly 200: "#D9D9D9";
+    readonly 300: "#B9BCBF";
+    readonly 400: "#959495";
+    readonly 500: "#868686";
+    readonly 600: "#8A8F94";
+};
+declare const ACCENTS: {
+    readonly purple: "#9747FF";
+    readonly darkGreen: "#1E4620";
+};
+declare const OPACITY_UTILITY: {
+    readonly disabled: 0.38;
+    readonly hover: 0.08;
+};
+declare const CHART_COLORS: {
+    readonly background: "#F7F7F8";
+    readonly textLabels: "#000000";
+    readonly textTitle: "#757373";
+    readonly grid: "#E3E3E8";
+    readonly series: {
+        readonly blue: "#2B72FB";
+        readonly teal: "#64BDC6";
+        readonly yellow: "#EECA34";
+        readonly orange: "#FE6A35";
+        readonly red: "#FA4B42";
+        readonly pink: "#EE60E0";
+        readonly purple: "#7B47E9";
+        readonly indigo: "#5D89DF";
+        readonly lightBlue: "#6AD1FE";
+        readonly green: "#3FDC7E";
+    };
+};
+
+/**
+ * Design system – Typography (rem-based).
+ * Font: Proxima Nova. Base: 16px (1rem).
+ */
+declare const FONT_FAMILY_SANS = "\"Proxima Nova\", sans-serif";
+/** Single typography style: font shorthand (weight size/lineHeight family) + optional letterSpacing & textTransform */
+interface TypographyStyle {
+    fontWeight: number;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing?: string;
+    textTransform?: "uppercase" | "none";
+    fontFamily?: string;
+}
+/** Display – hero and major titles */
+declare const TYPOGRAPHY_DISPLAY: {
+    readonly large: TypographyStyle;
+    readonly medium: TypographyStyle;
+    readonly small: TypographyStyle;
+};
+/** Headings H1–H6 */
+declare const TYPOGRAPHY_HEADING: {
+    readonly h1: TypographyStyle;
+    readonly h2: TypographyStyle;
+    readonly h3: TypographyStyle;
+    readonly h4: TypographyStyle;
+    readonly h5: TypographyStyle;
+    readonly h6: TypographyStyle;
+};
+/** Body text */
+declare const TYPOGRAPHY_BODY: {
+    readonly large: TypographyStyle;
+    readonly medium: TypographyStyle;
+    readonly small: TypographyStyle;
+};
+/** Labels – buttons, form labels, badges */
+declare const TYPOGRAPHY_LABEL: {
+    readonly large: TypographyStyle;
+    readonly medium: TypographyStyle;
+    readonly small: TypographyStyle;
+};
+/** Utility – caption, overline, code */
+declare const TYPOGRAPHY_UTILITY: {
+    readonly caption: TypographyStyle;
+    readonly overline: TypographyStyle;
+    readonly code: TypographyStyle;
+};
+declare const TYPOGRAPHY: {
+    readonly display: {
+        readonly large: TypographyStyle;
+        readonly medium: TypographyStyle;
+        readonly small: TypographyStyle;
+    };
+    readonly heading: {
+        readonly h1: TypographyStyle;
+        readonly h2: TypographyStyle;
+        readonly h3: TypographyStyle;
+        readonly h4: TypographyStyle;
+        readonly h5: TypographyStyle;
+        readonly h6: TypographyStyle;
+    };
+    readonly body: {
+        readonly large: TypographyStyle;
+        readonly medium: TypographyStyle;
+        readonly small: TypographyStyle;
+    };
+    readonly label: {
+        readonly large: TypographyStyle;
+        readonly medium: TypographyStyle;
+        readonly small: TypographyStyle;
+    };
+    readonly utility: {
+        readonly caption: TypographyStyle;
+        readonly overline: TypographyStyle;
+        readonly code: TypographyStyle;
+    };
+};
+/** All typography tokens as flat key → style for CSS variable generation */
+declare function getTypographyCssVars(): Record<string, string>;
+/** Letter-spacing and text-transform for styles that need them (for use with font shorthand) */
+declare const TYPOGRAPHY_EXTRA_CSS: Record<string, {
+    letterSpacing?: string;
+    textTransform?: string;
+}>;
+/** Viewport mode for responsive typography (Mobile <768px, Tablet 768–1024px) */
+type ViewportMode = "desktop" | "tablet" | "mobile";
+/** Labels for viewport modes (docs/tooling). */
+declare const VIEWPORT_LABELS: Record<ViewportMode, string>;
+/** Max width (px) to simulate viewport; desktop has no constraint. */
+declare const VIEWPORT_MAX_WIDTH: Record<ViewportMode, number | undefined>;
+/** Responsive typography overrides for tablet/mobile. Desktop returns {}. */
+declare function getResponsiveFontOverrides(mode: ViewportMode): Record<string, string>;
+
+export { ACCENTS, CHART_COLORS, type DesignThemeConfig, type DesignThemeOptions, FONT_FAMILY_SANS, FOUNDATION_COLORS, GRAY_SCALE, OPACITY_UTILITY, TYPOGRAPHY, TYPOGRAPHY_BODY, TYPOGRAPHY_DISPLAY, TYPOGRAPHY_EXTRA_CSS, TYPOGRAPHY_HEADING, TYPOGRAPHY_LABEL, TYPOGRAPHY_UTILITY, ThemeProvider, type ThemeProviderProps, type TypographyStyle, VIEWPORT_LABELS, VIEWPORT_MAX_WIDTH, type ViewportMode, buildCssVariables, buildOpacityScale, createDesignTheme, getContrastText, getLuminance, getResponsiveFontOverrides, getTypographyCssVars, hexToRgb, rgbToCssRgbString, rgba };