@matteoaliano/forest-ui 0.2.0 → 0.2.2

package/dist/index-BHSAMOHR.d.mts

@@ -0,0 +1,525 @@
+import * as _mui_material from '@mui/material';
+import { PaletteOptions, TypographyVariantsOptions, Components, Theme, Shadows, ThemeOptions } from '@mui/material/styles';
+
+/**
+ * Design tokens extracted from Figma.
+ * These are the primitive values that the semantic theme references.
+ */
+declare const colors: {
+    readonly base: {
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly transparent: "#ffffff00";
+    };
+    readonly brand: {
+        readonly 25: "#fcfaff";
+        readonly 50: "#f9f5ff";
+        readonly 100: "#f4ebff";
+        readonly 200: "#e9d7fe";
+        readonly 300: "#d6bbfb";
+        readonly 400: "#b692f6";
+        readonly 500: "#9e77ed";
+        readonly 600: "#7f56d9";
+        readonly 700: "#6941c6";
+        readonly 800: "#53389e";
+        readonly 900: "#42307d";
+        readonly 950: "#2c1c5f";
+    };
+    readonly gray: {
+        readonly 25: "#fcfcfd";
+        readonly 50: "#f9fafb";
+        readonly 100: "#f2f4f7";
+        readonly 200: "#eaecf0";
+        readonly 300: "#d0d5dd";
+        readonly 400: "#98a2b3";
+        readonly 500: "#667085";
+        readonly 600: "#475467";
+        readonly 700: "#344054";
+        readonly 800: "#182230";
+        readonly 900: "#101828";
+        readonly 950: "#0c111d";
+    };
+    readonly error: {
+        readonly 25: "#fffbfa";
+        readonly 50: "#fef3f2";
+        readonly 100: "#fee4e2";
+        readonly 200: "#fecdca";
+        readonly 300: "#fda29b";
+        readonly 400: "#f97066";
+        readonly 500: "#f04438";
+        readonly 600: "#d92d20";
+        readonly 700: "#b42318";
+        readonly 800: "#912018";
+        readonly 900: "#7a271a";
+        readonly 950: "#55160c";
+    };
+    readonly warning: {
+        readonly 25: "#fffcf5";
+        readonly 50: "#fffaeb";
+        readonly 100: "#fef0c7";
+        readonly 200: "#fedf89";
+        readonly 300: "#fec84b";
+        readonly 400: "#fdb022";
+        readonly 500: "#f79009";
+        readonly 600: "#dc6803";
+        readonly 700: "#b54708";
+        readonly 800: "#93370d";
+        readonly 900: "#7a2e0e";
+        readonly 950: "#4e1d09";
+    };
+    readonly success: {
+        readonly 25: "#f6fef9";
+        readonly 50: "#ecfdf3";
+        readonly 100: "#dcfae6";
+        readonly 200: "#abefc6";
+        readonly 300: "#75e0a7";
+        readonly 400: "#47cd89";
+        readonly 500: "#17b26a";
+        readonly 600: "#079455";
+        readonly 700: "#067647";
+        readonly 800: "#085d3a";
+        readonly 900: "#074d31";
+        readonly 950: "#053321";
+    };
+    readonly blue: {
+        readonly 25: "#f5faff";
+        readonly 50: "#eff8ff";
+        readonly 100: "#d1e9ff";
+        readonly 200: "#b2ddff";
+        readonly 300: "#84caff";
+        readonly 400: "#53b1fd";
+        readonly 500: "#2e90fa";
+        readonly 600: "#1570ef";
+        readonly 700: "#175cd3";
+        readonly 800: "#1849a9";
+        readonly 900: "#194185";
+        readonly 950: "#102a56";
+    };
+};
+declare const spacing: {
+    readonly none: 0;
+    readonly xxs: 2;
+    readonly xs: 4;
+    readonly sm: 6;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
+    readonly "2xl": 20;
+    readonly "3xl": 24;
+    readonly "4xl": 32;
+    readonly "5xl": 40;
+    readonly "6xl": 48;
+    readonly "7xl": 64;
+    readonly "8xl": 80;
+    readonly "9xl": 96;
+    readonly "10xl": 128;
+    readonly "11xl": 160;
+};
+declare const radius: {
+    readonly none: 0;
+    readonly xxs: 2;
+    readonly xs: 4;
+    readonly sm: 6;
+    readonly md: 8;
+    readonly lg: 10;
+    readonly xl: 12;
+    readonly "2xl": 16;
+    readonly "3xl": 20;
+    readonly "4xl": 24;
+    readonly full: 9999;
+};
+declare const shadows$1: {
+    readonly xs: "0px 1px 2px 0px #1018280d";
+    readonly sm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f";
+    readonly md: "0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f";
+    readonly lg: "0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808";
+    readonly xl: "0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808";
+    readonly "2xl": "0px 24px 48px -12px #1018282e";
+    readonly "3xl": "0px 32px 64px -12px #10182824";
+};
+declare const focusRings: {
+    readonly brand: "0px 0px 0px 4px #9e77ed3d";
+    readonly brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #9e77ed3d";
+    readonly brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #9e77ed3d";
+    readonly gray: "0px 0px 0px 4px #98a2b324";
+    readonly grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #98a2b324";
+    readonly grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #98a2b324";
+    readonly error: "0px 0px 0px 4px #f044383d";
+    readonly errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d";
+};
+declare const fontFamily = "\"Poppins\", sans-serif";
+declare const fontSize: {
+    readonly xxs: 11;
+    readonly xs: 12;
+    readonly sm: 14;
+    readonly md: 16;
+    readonly lg: 18;
+    readonly xl: 20;
+};
+declare const lineHeight: {
+    readonly xxs: "16px";
+    readonly xs: "18px";
+    readonly sm: "20px";
+    readonly md: "24px";
+    readonly lg: "28px";
+    readonly xl: "30px";
+};
+declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+declare const display: {
+    readonly "2xl": {
+        readonly fontSize: 72;
+        readonly lineHeight: "90px";
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly xl: {
+        readonly fontSize: 60;
+        readonly lineHeight: "72px";
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly lg: {
+        readonly fontSize: 48;
+        readonly lineHeight: "60px";
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly md: {
+        readonly fontSize: 36;
+        readonly lineHeight: "44px";
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly sm: {
+        readonly fontSize: 30;
+        readonly lineHeight: "38px";
+    };
+    readonly xs: {
+        readonly fontSize: 24;
+        readonly lineHeight: "32px";
+    };
+};
+declare const container: {
+    readonly maxWidthDesktop: 1280;
+    readonly paddingDesktop: 32;
+    readonly paddingMobile: 16;
+};
+declare const widths: {
+    readonly xxs: 320;
+    readonly xs: 384;
+    readonly sm: 480;
+    readonly md: 560;
+    readonly lg: 640;
+    readonly xl: 768;
+    readonly "2xl": 1024;
+    readonly "3xl": 1280;
+    readonly "4xl": 1440;
+    readonly "5xl": 1600;
+    readonly "6xl": 1920;
+};
+declare const text: {
+    readonly primary: "#101828";
+    readonly secondary: "#344054";
+    readonly secondaryHover: "#182230";
+    readonly tertiary: "#475467";
+    readonly tertiaryHover: "#344054";
+    readonly quaternary: "#667085";
+    readonly disabled: "#667085";
+    readonly placeholder: "#667085";
+    readonly placeholderSubtle: "#d0d5dd";
+    readonly white: "#ffffff";
+    readonly brandPrimary: "#42307d";
+    readonly brandSecondary: "#6941c6";
+    readonly brandTertiary: "#7f56d9";
+    readonly brandTertiaryAlt: "#7f56d9";
+    readonly primaryOnBrand: "#ffffff";
+    readonly secondaryOnBrand: "#e9d7fe";
+    readonly tertiaryOnBrand: "#e9d7fe";
+    readonly quaternaryOnBrand: "#d6bbfb";
+    readonly errorPrimary: "#d92d20";
+    readonly warningPrimary: "#dc6803";
+    readonly successPrimary: "#079455";
+};
+declare const bg: {
+    readonly primary: "#ffffff";
+    readonly primaryAlt: "#ffffff";
+    readonly primaryHover: "#f9fafb";
+    readonly primarySolid: "#0c111d";
+    readonly secondary: "#f9fafb";
+    readonly secondaryAlt: "#f9fafb";
+    readonly secondarySubtle: "#fcfcfd";
+    readonly secondaryHover: "#f2f4f7";
+    readonly secondarySolid: "#475467";
+    readonly tertiary: "#f2f4f7";
+    readonly quaternary: "#eaecf0";
+    readonly active: "#f9fafb";
+    readonly disabled: "#f2f4f7";
+    readonly disabledSubtle: "#f9fafb";
+    readonly overlay: "#0c111d";
+    readonly brandPrimary: "#f9f5ff";
+    readonly brandPrimaryAlt: "#f9f5ff";
+    readonly brandSecondary: "#f4ebff";
+    readonly brandSolid: "#7f56d9";
+    readonly brandSolidHover: "#6941c6";
+    readonly brandSection: "#53389e";
+    readonly brandSectionSubtle: "#6941c6";
+    readonly errorPrimary: "#fef3f2";
+    readonly errorSecondary: "#fee4e2";
+    readonly errorSolid: "#d92d20";
+    readonly warningPrimary: "#fffaeb";
+    readonly warningSecondary: "#fef0c7";
+    readonly warningSolid: "#dc6803";
+    readonly successPrimary: "#ecfdf3";
+    readonly successSecondary: "#dcfae6";
+    readonly successSolid: "#079455";
+};
+declare const fg: {
+    readonly primary: "#101828";
+    readonly secondary: "#344054";
+    readonly secondaryHover: "#182230";
+    readonly tertiary: "#475467";
+    readonly tertiaryHover: "#344054";
+    readonly quaternary: "#667085";
+    readonly quaternaryHover: "#475467";
+    readonly quinary: "#98a2b3";
+    readonly quinaryHover: "#667085";
+    readonly senary: "#d0d5dd";
+    readonly white: "#ffffff";
+    readonly disabled: "#98a2b3";
+    readonly disabledSubtle: "#d0d5dd";
+    readonly brandPrimary: "#7f56d9";
+    readonly brandPrimaryAlt: "#7f56d9";
+    readonly brandSecondary: "#9e77ed";
+    readonly errorPrimary: "#d92d20";
+    readonly errorSecondary: "#f04438";
+    readonly warningPrimary: "#dc6803";
+    readonly warningSecondary: "#f79009";
+    readonly successPrimary: "#079455";
+    readonly successSecondary: "#17b26a";
+};
+declare const border: {
+    readonly primary: "#d0d5dd";
+    readonly secondary: "#eaecf0";
+    readonly tertiary: "#f2f4f7";
+    readonly disabled: "#d0d5dd";
+    readonly disabledSubtle: "#eaecf0";
+    readonly brand: "#d6bbfb";
+    readonly brandSolid: "#7f56d9";
+    readonly brandSolidAlt: "#7f56d9";
+    readonly error: "#fda29b";
+    readonly errorSolid: "#d92d20";
+};
+declare const buttonColors: {
+    readonly primary: {
+        readonly bg: "#7f56d9";
+        readonly bgHover: "#6941c6";
+        readonly fg: "#ffffff";
+        readonly fgHover: "#ffffff";
+        readonly border: "#7f56d9";
+        readonly borderHover: "#6941c6";
+    };
+    readonly secondary: {
+        readonly bg: "#ffffff";
+        readonly bgHover: "#f9fafb";
+        readonly fg: "#344054";
+        readonly fgHover: "#182230";
+        readonly border: "#d0d5dd";
+        readonly borderHover: "#d0d5dd";
+    };
+    readonly secondaryColor: {
+        readonly bg: "#ffffff";
+        readonly bgHover: "#f9f5ff";
+        readonly fg: "#6941c6";
+        readonly fgHover: "#53389e";
+        readonly border: "#d6bbfb";
+        readonly borderHover: "#d6bbfb";
+    };
+    readonly tertiary: {
+        readonly fg: "#475467";
+        readonly fgHover: "#344054";
+        readonly bgHover: "#f9fafb";
+    };
+    readonly tertiaryColor: {
+        readonly fg: "#6941c6";
+        readonly fgHover: "#53389e";
+        readonly bgHover: "#f9f5ff";
+    };
+    readonly primaryError: {
+        readonly bg: "#d92d20";
+        readonly bgHover: "#b42318";
+        readonly fg: "#ffffff";
+        readonly fgHover: "#ffffff";
+        readonly border: "#d92d20";
+        readonly borderHover: "#b42318";
+    };
+    readonly secondaryError: {
+        readonly bg: "#ffffff";
+        readonly bgHover: "#fef3f2";
+        readonly fg: "#b42318";
+        readonly fgHover: "#912018";
+        readonly border: "#fda29b";
+        readonly borderHover: "#fda29b";
+    };
+    readonly tertiaryError: {
+        readonly fg: "#b42318";
+        readonly fgHover: "#912018";
+        readonly bgHover: "#fef3f2";
+    };
+};
+declare const avatarColors: {
+    readonly bg: "#f2f4f7";
+    readonly contrastBorder: "#00000014";
+    readonly profilePhotoBorder: "#ffffff";
+    readonly focusBorder: "#98a2b324";
+};
+declare const breadcrumbColors: {
+    readonly fg: "#475467";
+    readonly fgHover: "#344054";
+    readonly bgHover: "#f9fafb";
+    readonly brandBgHover: "#f9f5ff";
+    readonly brandFgHover: "#6941c6";
+    readonly iconFg: "#667085";
+    readonly iconFgHover: "#344054";
+    readonly brandIconFgHover: "#6941c6";
+};
+declare const iconColors: {
+    readonly fgBrand: "#7f56d9";
+    readonly fgBrandOnBrand: "#e9d7fe";
+    readonly featuredModernBorder: "#eaecf0";
+    readonly featuredLightFgBrand: "#7f56d9";
+    readonly featuredLightFgGray: "#667085";
+    readonly featuredLightFgError: "#d92d20";
+    readonly featuredLightFgWarning: "#dc6803";
+    readonly featuredLightFgSuccess: "#079455";
+    readonly featuredDarkFgBrand: "#ffffff";
+    readonly featuredDarkFgGray: "#ffffff";
+    readonly featuredDarkFgError: "#ffffff";
+    readonly featuredDarkFgWarning: "#ffffff";
+    readonly featuredDarkFgSuccess: "#ffffff";
+};
+declare const navColors: {
+    readonly itemIconFg: "#667085";
+    readonly itemIconFgActive: "#667085";
+    readonly itemButtonIconFg: "#667085";
+    readonly itemButtonIconFgActive: "#344054";
+};
+declare const sliderColors: {
+    readonly handleBorder: "#7f56d9";
+    readonly handleBg: "#ffffff";
+};
+declare const toggleColors: {
+    readonly buttonFgDisabled: "#f9fafb";
+};
+declare const chartColors: {
+    readonly axisFg: "#eaecf0";
+    readonly gridlineFg: "#f2f4f7";
+    readonly labelFg: "#475467";
+    readonly labelFgEmphasis: "#344054";
+    readonly bg: "#ffffff";
+    readonly bgAlt: "#f9fafb";
+    readonly tooltipBg: "#0c111d";
+    readonly tooltipFg: "#ffffff";
+    readonly crosshairFg: "#667085";
+    readonly legendFg: "#344054";
+    readonly series1Fg: "#1570ef";
+    readonly series1FgHover: "#175cd3";
+    readonly series1Bg: "#d1e9ff";
+    readonly series1BgHover: "#b2ddff";
+    readonly series2Fg: "#7f56d9";
+    readonly series2FgHover: "#6941c6";
+    readonly series2Bg: "#f4ebff";
+    readonly series2BgHover: "#e9d7fe";
+};
+declare const alpha: {
+    readonly white: {
+        readonly 10: "#ffffff1a";
+        readonly 20: "#ffffff33";
+        readonly 30: "#ffffff4d";
+        readonly 40: "#ffffff66";
+        readonly 50: "#ffffff80";
+        readonly 60: "#ffffff99";
+        readonly 70: "#ffffffb3";
+        readonly 80: "#ffffffcc";
+        readonly 90: "#ffffffe6";
+        readonly 100: "#ffffff";
+    };
+    readonly black: {
+        readonly 10: "#0000001a";
+        readonly 20: "#00000033";
+        readonly 30: "#0000004d";
+        readonly 40: "#00000066";
+        readonly 50: "#00000080";
+        readonly 60: "#00000099";
+        readonly 70: "#000000b3";
+        readonly 80: "#000000cc";
+        readonly 90: "#000000e6";
+        readonly 100: "#000000";
+    };
+};
+
+/** Full set of design tokens that a preset variant must provide. */
+interface DesignTokens {
+    colors: typeof colors;
+    spacing: typeof spacing;
+    radius: typeof radius;
+    shadows: typeof shadows$1;
+    focusRings: typeof focusRings;
+    fontFamily: string;
+    fontSize: typeof fontSize;
+    lineHeight: typeof lineHeight;
+    fontWeight: typeof fontWeight;
+    display: typeof display;
+    container: typeof container;
+    widths: typeof widths;
+    text: typeof text;
+    bg: typeof bg;
+    fg: typeof fg;
+    border: typeof border;
+    buttonColors: typeof buttonColors;
+    avatarColors: typeof avatarColors;
+    breadcrumbColors: typeof breadcrumbColors;
+    iconColors: typeof iconColors;
+    navColors: typeof navColors;
+    sliderColors: typeof sliderColors;
+    toggleColors: typeof toggleColors;
+    chartColors: typeof chartColors;
+    alpha: typeof alpha;
+}
+/** Configuration for a single variant within a preset. */
+interface PresetVariantConfig {
+    tokens: DesignTokens;
+}
+/** A named theme preset with one or more variants. */
+interface ThemePreset {
+    name: string;
+    defaultVariant: string;
+    variants: Record<string, PresetVariantConfig>;
+}
+
+declare const palette: PaletteOptions;
+
+declare const typography: TypographyVariantsOptions;
+
+declare const components: Components<Theme>;
+
+declare const shadows: Shadows;
+
+/** Assemble a MUI ThemeOptions object from a full set of design tokens. */
+declare function buildThemeOptions(tokens: DesignTokens): ThemeOptions;
+/** Create a fully resolved MUI Theme from a full set of design tokens. */
+declare function buildTheme(tokens: DesignTokens): Theme;
+
+declare const forestPreset: ThemePreset;
+
+/** Get a preset by name. Returns `undefined` if not found. */
+declare function getPreset(name: string): ThemePreset | undefined;
+/** Register a custom preset (or override a built-in one). */
+declare function registerPreset(preset: ThemePreset): void;
+/** List all registered preset names. */
+declare function getAvailablePresets(): string[];
+
+declare const forestThemeOptions: ThemeOptions;
+declare const forestTheme: _mui_material.Theme;
+
+export { registerPreset as A, sliderColors as B, spacing as C, type DesignTokens as D, text as E, toggleColors as F, shadows$1 as G, widths as H, components as I, palette as J, shadows as K, typography as L, type PresetVariantConfig as P, type ThemePreset as T, alpha as a, avatarColors as b, bg as c, border as d, breadcrumbColors as e, buildTheme as f, buildThemeOptions as g, buttonColors as h, chartColors as i, colors as j, container as k, display as l, fg as m, focusRings as n, fontFamily as o, fontSize as p, fontWeight as q, forestPreset as r, forestTheme as s, forestThemeOptions as t, getAvailablePresets as u, getPreset as v, iconColors as w, lineHeight as x, navColors as y, radius as z };