ferns-ui 0.47.10 → 1.0.0

package/dist/Theme.js

@@ -1,113 +1,212 @@
-import React, { createContext, useState } from "react";
-import { changeColorLuminance } from "./Unifier";
-const DEFAULT_FONT = "Cochin";
-const DEFAULT_BOLD_FONT = "Cochin";
-const darkGray = "#111111";
-const lightGray = "#efefef";
-const gray = "#8e8e8e";
-const white = "#fdfdfd";
-const primary = "#5c58bb";
-const secondary = "#8d58bb";
-const accent = "#58b3bb";
-const tertiary = "#b7956f";
+import React, { createContext, useMemo, useState } from "react";
+const defaultPrimitives = {
+    neutral000: "#FFFFFF",
+    neutral050: "#F2F2F2",
+    neutral100: "#E6E6E6",
+    neutral200: "#D9D9D9",
+    neutral300: "#CDCDCD",
+    neutral400: "#B3B3B3",
+    neutral500: "#9A9A9A",
+    neutral600: "#686868",
+    neutral700: "#4E4E4E",
+    neutral800: "#353535",
+    neutral900: "#1C1C1C",
+    primary000: "#EBFAFF",
+    primary050: "#BCE9F7",
+    primary100: "#90D8F0",
+    primary200: "#73CAE8",
+    primary300: "#40B8E0",
+    primary400: "#0E9DCD",
+    primary500: "#0086B3",
+    primary600: "#0A7092",
+    primary700: "#035D7E",
+    primary800: "#004B64",
+    primary900: "#013749",
+    secondary000: "#F2F9FA",
+    secondary050: "#D7E5EA",
+    secondary100: "#B6CDD5",
+    secondary200: "#9EB7BF",
+    secondary300: "#87A1AA",
+    secondary400: "#608997",
+    secondary500: "#2B6072",
+    secondary600: "#1C4E5F",
+    secondary700: "#0F3D4D",
+    secondary800: "#092E3A",
+    secondary900: "#041E27",
+    accent000: "#FFFDF7",
+    accent050: "#FCECC2",
+    accent100: "#F9E0A1",
+    accent200: "#F7D582",
+    accent300: "#F2CB62",
+    accent400: "#E5B132",
+    accent500: "#D69C0E",
+    accent600: "#B58201",
+    accent700: "#956A00",
+    accent800: "#543C00",
+    accent900: "#332400",
+    error000: "#FDD7D7",
+    error100: "#D33232",
+    error200: "#BD1111",
+    warning000: "#FFE3C6",
+    warning100: "#F36719",
+    warning200: "#B14202",
+    success000: "#DCF2E2",
+    success100: "#3EA45C",
+    success200: "#1A7F36",
+    spacing0: 0,
+    spacing1: 4,
+    spacing2: 8,
+    spacing3: 12,
+    spacing4: 16,
+    spacing5: 24,
+    spacing6: 32,
+    spacing7: 40,
+    spacing8: 48,
+    spacing9: 56,
+    spacing10: 64,
+    spacing11: 72,
+    spacing12: 80,
+    radiusSm: 2,
+    radiusMd: 4,
+    radiusLg: 16,
+    radiusXl: 32,
+    radius2xl: 128,
+    radius3xl: 360,
+};
 const defaultTheme = {
-    // Primary colors
-    white,
-    lightGray,
-    gray,
-    darkGray,
-    // secondary colors
-    green: "#0fa573",
-    red: "#bd081c",
-    springGreen: "#008753",
-    pine: "#0a6955",
-    olive: "#364a4c",
-    blue: "#4a90e2",
-    navy: "#004b91",
-    midnight: "#133a5e",
-    purple: "#b469eb",
-    orchid: "#8046a5",
-    eggplant: "#5b2677",
-    maroon: "#6e0f3c",
-    watermelon: "#f13535",
-    orange: "#e3780c",
-    black: "#000000",
-    info: "#4a90e2", // blue
-    error: "#bd081c", // red
-    warning: "#e3780c", // orange
-    success: "#008753", // springGreen
-    neutral: gray,
-    primaryLighter: changeColorLuminance(primary, "lighter"),
-    primaryLight: changeColorLuminance(primary, "light"),
-    primary,
-    primaryDark: changeColorLuminance(primary, "dark"),
-    primaryDarker: changeColorLuminance(primary, "darker"),
-    secondaryLighter: changeColorLuminance(secondary, "lighter"),
-    secondaryLight: changeColorLuminance(secondary, "light"),
-    secondary,
-    secondaryDark: changeColorLuminance(secondary, "dark"),
-    secondaryDarker: changeColorLuminance(secondary, "darker"),
-    accentLighter: changeColorLuminance(accent, "lighter"),
-    accentLight: changeColorLuminance(accent, "light"),
-    accent,
-    accentDark: changeColorLuminance(accent, "dark"),
-    accentDarker: changeColorLuminance(accent, "darker"),
-    tertiaryLighter: changeColorLuminance(tertiary, "lighter"),
-    tertiaryLight: changeColorLuminance(tertiary, "light"),
-    tertiary,
-    tertiaryDark: changeColorLuminance(tertiary, "dark"),
-    tertiaryDarker: changeColorLuminance(tertiary, "darker"),
-    background: white,
-    backgroundSecondary: lightGray,
-    textPrimary: darkGray,
-    textSecondary: lightGray,
-    textDisabled: gray,
-    divider: gray,
-    // From the Atlassian templates
-    neutral900: "#091E42",
-    neutral800: "#172B4D",
-    neutral700: "#253858",
-    neutral600: "#344563",
-    neutral500: "#42526E",
-    neutral400: "#505F79",
-    neutral300: "#5E6C84",
-    neutral200: "#6B778C",
-    neutral100: "#7A869A",
-    neutral90: "#8993A4",
-    neutral80: "#97A0AF",
-    neutral70: "#A5ADBA",
-    neutral60: "#B3BAC5",
-    neutral50: "#C1C7D0",
-    neutral40: "#DFE1E6",
-    neutral30: "#EBECF0",
-    neutral20: "#F4F5F7",
-    neutral10: "#FAFBFC",
-    primaryFont: DEFAULT_FONT,
-    primaryBoldFont: DEFAULT_BOLD_FONT,
-    secondaryFont: DEFAULT_FONT,
-    secondaryBoldFont: DEFAULT_BOLD_FONT,
-    accentFont: DEFAULT_FONT,
-    accentBoldFont: DEFAULT_BOLD_FONT,
-    buttonFont: DEFAULT_FONT,
-    titleFont: DEFAULT_FONT,
+    text: {
+        primary: "neutral900",
+        inverted: "neutral000",
+        // TODO: ask jo about the naming here, secondaryDark is a blue, secondaryLight is a gray.
+        secondaryLight: "neutral600",
+        extraLight: "neutral500",
+        secondaryDark: "secondary800",
+        link: "primary600",
+        linkLight: "primary400",
+        accent: "accent700",
+        error: "error200",
+        warning: "warning200",
+        success: "success200",
+    },
+    surface: {
+        base: "neutral000",
+        primary: "primary400",
+        secondaryLight: "secondary100",
+        secondaryDark: "secondary500",
+        secondaryExtraDark: "secondary800",
+        neutral: "neutral600",
+        neutralLight: "neutral200",
+        neutralDark: "neutral800",
+        disabled: "neutral500",
+        error: "error200",
+        errorLight: "error000",
+        success: "success200",
+        successLight: "success000",
+        warning: "warning100",
+        warningLight: "warning000",
+    },
+    border: {
+        default: "neutral300",
+        dark: "neutral500",
+        activeNeutral: "neutral700",
+        activeAccent: "accent500",
+        hover: "neutral200",
+        focus: "primary200",
+        error: "error100",
+        success: "success100",
+        warning: "warning100",
+    },
+    status: {
+        active: "success100",
+        doNotDisturb: "error100",
+        away: "neutral500",
+    },
+    radius: {
+        minimal: "radiusSm",
+        default: "radiusMd",
+        full: "radiusLg",
+        rounded: "radius3xl",
+    },
+    spacing: {
+        none: "spacing0",
+        xs: "spacing1",
+        sm: "spacing2",
+        md: "spacing4",
+        lg: "spacing5",
+        xl: "spacing6",
+        "2xl": "spacing8",
+        "3xl": "spacing12",
+    },
+    // These will continue to throw errors until we have a proper font system in place.
+    // TODO: currently to use these, you need to set fontFamily to "text" or "heading",
+    // not theme.font.primary or theme.font.title.
+    font: {
+        primary: "Nunito",
+        title: "Titillium Web",
+    },
+    primitives: defaultPrimitives,
 };
 export const ThemeContext = createContext({
     setTheme: (_theme) => { },
-    theme: defaultTheme,
+    setPrimitives: (_primitives) => { },
+    theme: {},
     resetTheme: () => { },
 });
-function setThemeWithLuminances(oldTheme, newTheme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
-    return Object.assign(Object.assign(Object.assign({}, oldTheme), newTheme), { primaryLighter: (_a = newTheme.primaryLighter) !== null && _a !== void 0 ? _a : changeColorLuminance((_b = newTheme.primary) !== null && _b !== void 0 ? _b : oldTheme.primary, "lighter"), primaryLight: (_c = newTheme.primaryLight) !== null && _c !== void 0 ? _c : changeColorLuminance((_d = newTheme.primary) !== null && _d !== void 0 ? _d : oldTheme.primary, "light"), primary: (_e = newTheme.primary) !== null && _e !== void 0 ? _e : oldTheme.primary, primaryDark: (_f = newTheme.primaryDark) !== null && _f !== void 0 ? _f : changeColorLuminance((_g = newTheme.primary) !== null && _g !== void 0 ? _g : oldTheme.primary, "dark"), primaryDarker: (_h = newTheme.primaryDarker) !== null && _h !== void 0 ? _h : changeColorLuminance((_j = newTheme.primary) !== null && _j !== void 0 ? _j : oldTheme.primary, "darker"), secondaryLighter: (_k = newTheme.secondaryLighter) !== null && _k !== void 0 ? _k : changeColorLuminance((_l = newTheme.secondary) !== null && _l !== void 0 ? _l : oldTheme.secondary, "lighter"), secondaryLight: (_m = newTheme.secondaryLight) !== null && _m !== void 0 ? _m : changeColorLuminance((_o = newTheme.secondary) !== null && _o !== void 0 ? _o : oldTheme.secondary, "light"), secondary: (_p = newTheme.secondary) !== null && _p !== void 0 ? _p : oldTheme.secondary, secondaryDark: (_q = newTheme.secondaryDark) !== null && _q !== void 0 ? _q : changeColorLuminance((_r = newTheme.secondary) !== null && _r !== void 0 ? _r : oldTheme.secondary, "dark"), secondaryDarker: (_s = newTheme.secondaryDarker) !== null && _s !== void 0 ? _s : changeColorLuminance((_t = newTheme.secondary) !== null && _t !== void 0 ? _t : oldTheme.secondary, "darker"), accentLighter: (_u = newTheme.accentLighter) !== null && _u !== void 0 ? _u : changeColorLuminance((_v = newTheme.accent) !== null && _v !== void 0 ? _v : oldTheme.accent, "lighter"), accentLight: (_w = newTheme.accentLight) !== null && _w !== void 0 ? _w : changeColorLuminance((_x = newTheme.accent) !== null && _x !== void 0 ? _x : oldTheme.accent, "light"), accent: (_y = newTheme.accent) !== null && _y !== void 0 ? _y : oldTheme.accent, accentDark: (_z = newTheme.accentDark) !== null && _z !== void 0 ? _z : changeColorLuminance((_0 = newTheme.accent) !== null && _0 !== void 0 ? _0 : oldTheme.accent, "dark"), accentDarker: (_1 = newTheme.accentDarker) !== null && _1 !== void 0 ? _1 : changeColorLuminance((_2 = newTheme.accent) !== null && _2 !== void 0 ? _2 : oldTheme.accent, "darker"), tertiaryLighter: (_3 = newTheme.tertiaryLighter) !== null && _3 !== void 0 ? _3 : changeColorLuminance((_4 = newTheme.tertiary) !== null && _4 !== void 0 ? _4 : oldTheme.tertiary, "lighter"), tertiaryLight: (_5 = newTheme.tertiaryLight) !== null && _5 !== void 0 ? _5 : changeColorLuminance((_6 = newTheme.tertiary) !== null && _6 !== void 0 ? _6 : oldTheme.tertiary, "light"), tertiary: (_7 = newTheme.tertiary) !== null && _7 !== void 0 ? _7 : oldTheme.tertiary, tertiaryDark: (_8 = newTheme.tertiaryDark) !== null && _8 !== void 0 ? _8 : changeColorLuminance((_9 = newTheme.tertiary) !== null && _9 !== void 0 ? _9 : oldTheme.tertiary, "dark"), tertiaryDarker: (_10 = newTheme.tertiaryDarker) !== null && _10 !== void 0 ? _10 : changeColorLuminance((_11 = newTheme.tertiary) !== null && _11 !== void 0 ? _11 : oldTheme.tertiary, "darker") });
-}
 export const ThemeProvider = ({ children }) => {
     const [providerTheme, setProviderTheme] = useState(defaultTheme);
+    const [providerPrimitives, setProviderPrimitives] = useState(defaultPrimitives);
+    const computedTheme = useMemo(() => {
+        // Map the providerTheme and transform the strings into the actual values from the primitives.
+        // Do this for each sub-object in the theme. E.g. theme.text, theme.surface, etc.
+        const theme = Object.keys(providerTheme).reduce((acc, key) => {
+            var _a;
+            if (key === "primitives")
+                return acc;
+            const value = (_a = providerTheme[key]) !== null && _a !== void 0 ? _a : {};
+            // for each key, map the value to the primitive value.
+            acc[key] = Object.keys(value).reduce((accKey, valueKey) => {
+                const primitiveKey = value[valueKey];
+                if (key === "font") {
+                    accKey[valueKey] = primitiveKey;
+                }
+                else {
+                    if (providerPrimitives[primitiveKey] === undefined) {
+                        console.error(`Primitive ${primitiveKey} not found in theme.`);
+                    }
+                    accKey[valueKey] = providerPrimitives[primitiveKey];
+                }
+                return accKey;
+            }, {});
+            return acc;
+        }, {});
+        return Object.assign(Object.assign({}, theme), { primitives: providerPrimitives });
+    }, [providerTheme, providerPrimitives]);
+    const setPrimitives = (newPrimitives) => {
+        setProviderPrimitives((prev) => (Object.assign(Object.assign({}, prev), newPrimitives)));
+    };
     const setTheme = (newTheme) => {
-        setProviderTheme(setThemeWithLuminances(providerTheme, newTheme));
+        setProviderTheme((prev) => {
+            const mergedTheme = Object.assign({}, prev);
+            for (const key in newTheme) {
+                if (newTheme.hasOwnProperty(key)) {
+                    const newSubTheme = newTheme[key];
+                    const prevSubTheme = prev[key];
+                    if (newSubTheme && typeof newSubTheme === "object") {
+                        mergedTheme[key] = Object.assign(Object.assign({}, prevSubTheme), newSubTheme);
+                    }
+                    else {
+                        mergedTheme[key] = newSubTheme;
+                    }
+                }
+            }
+            return mergedTheme;
+        });
     };
     const resetTheme = () => {
         setProviderTheme(defaultTheme);
+        setProviderPrimitives(defaultPrimitives);
     };
-    return (React.createElement(ThemeContext.Provider, { value: { theme: providerTheme, setTheme, resetTheme } }, children));
+    return (React.createElement(ThemeContext.Provider, { value: { theme: computedTheme, setTheme, setPrimitives, resetTheme } }, children));
 };
+export const useTheme = () => React.useContext(ThemeContext);
 //# sourceMappingURL=Theme.js.map

package/dist/Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../src/Theme.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../src/Theme.tsx"],"names":[],"mappings":"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"}

package/dist/TimezonePicker.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { Box } from "./Box";
-import { SelectList } from "./SelectList";
-import { WithLabel } from "./WithLabel";
+import { SelectField } from "./SelectField";
 // TODO: Support world wide timezones
 const options = [
     { label: "Eastern", value: "America/New_York" },
@@ -15,12 +14,11 @@ const options = [
 export const TimezonePicker = ({ timezone, onChange, showLabel, width = 100, }) => {
     if (showLabel) {
         return (React.createElement(Box, { maxWidth: width },
-            React.createElement(WithLabel, { label: "Timezone" },
-                React.createElement(SelectList, { allowClear: true, options: options, style: { minHeight: 40 }, value: timezone, onChange: onChange }))));
+            React.createElement(SelectField, { options: options, title: "Timezone", value: timezone, onChange: onChange })));
     }
     else {
         return (React.createElement(Box, { maxWidth: width },
-            React.createElement(SelectList, { allowClear: true, options: options, style: { minHeight: 40 }, value: timezone, onChange: onChange })));
+            React.createElement(SelectField, { options: options, value: timezone, onChange: onChange })));
     }
 };
 //# sourceMappingURL=TimezonePicker.js.map

package/dist/TimezonePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimezonePicker.js","sourceRoot":"","sources":["../src/TimezonePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,qCAAqC;AACrC,MAAM,OAAO,GAAG;IACd,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAC;IAC7C,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAC;IAC5C,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,gBAAgB,EAAC;IAC5C,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,qBAAqB,EAAC;IAChD,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,mBAAmB,EAAC;IAC7C,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,kBAAkB,EAAC;IAC5C,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAC;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,GAAG,GACS,EAAsB,EAAE;IAC5C,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,oBAAC,GAAG,IAAC,QAAQ,EAAE,KAAK;YAClB,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU;gBACzB,oBAAC,UAAU,IACT,UAAU,QACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAC,SAAS,EAAE,EAAE,EAAC,EACtB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,QAAQ,GAClB,CACQ,CACR,CACP,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,CACL,oBAAC,GAAG,IAAC,QAAQ,EAAE,KAAK;YAClB,oBAAC,UAAU,IACT,UAAU,QACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAC,SAAS,EAAE,EAAE,EAAC,EACtB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,QAAQ,GAClB,CACE,CACP,CAAC;IACJ,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"TimezonePicker.js","sourceRoot":"","sources":["../src/TimezonePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,qCAAqC;AACrC,MAAM,OAAO,GAAG;IACd,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAC;IAC7C,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAC;IAC5C,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,gBAAgB,EAAC;IAC5C,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,qBAAqB,EAAC;IAChD,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,mBAAmB,EAAC;IAC7C,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,kBAAkB,EAAC;IAC5C,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAC;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,GAAG,GACS,EAAsB,EAAE;IAC5C,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,oBAAC,GAAG,IAAC,QAAQ,EAAE,KAAK;YAClB,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACnF,CACP,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,CACL,oBAAC,GAAG,IAAC,QAAQ,EAAE,KAAK;YAClB,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAClE,CACP,CAAC;IACJ,CAAC;AACH,CAAC,CAAC"}

package/dist/Toast.d.ts

@@ -1,10 +1,23 @@
 import React from "react";
 import { ToastProps } from "./Common";
+type UseToastVariantOptions = {
+    persistent?: ToastProps["persistent"];
+    secondary?: ToastProps["secondary"];
+    size?: ToastProps["size"];
+    onDismiss?: ToastProps["onDismiss"];
+    subtitle?: ToastProps["subtitle"];
+};
+type UseToastOptions = {
+    variant?: ToastProps["variant"];
+} & UseToastVariantOptions;
 export declare function useToast(): {
-    warn: (text: string, options?: Omit<ToastProps["data"], "variant">) => string;
     hide: (id: string) => void;
-    show: (text: string, options?: ToastProps["data"]) => string;
-    catch: (error: any, message?: string, options?: Omit<ToastProps["data"], "variant">) => void;
-    error: (text: string, options?: Omit<ToastProps["data"], "variant">) => string;
+    success: (title: string, options?: UseToastVariantOptions) => string;
+    info: (title: string, options?: UseToastVariantOptions) => string;
+    warn: (title: string, options?: UseToastVariantOptions) => string;
+    error: (title: string, options?: UseToastVariantOptions) => string;
+    show: (title: string, options?: UseToastOptions) => string;
+    catch: (error: any, message?: string, options?: UseToastVariantOptions) => void;
 };
-export declare const Toast: ({ message, data }: ToastProps) => React.ReactElement;
+export declare const Toast: ({ title, variant, secondary, size, onDismiss, persistent, subtitle, }: ToastProps) => React.ReactElement;
+export {};

package/dist/Toast.js

@@ -1,31 +1,39 @@
 import React from "react";
-import { Dimensions } from "react-native";
+import { Platform, Pressable, View } from "react-native";
 import { useToast as useRNToast } from "react-native-toast-notifications";
-import { Box } from "./Box";
-import { Button } from "./Button";
+import { Heading } from "./Heading";
 import { Icon } from "./Icon";
-import { IconButton } from "./IconButton";
 import { Text } from "./Text";
+import { useTheme } from "./Theme";
 import { isAPIError, printAPIError } from "./Utilities";
 const TOAST_DURATION_MS = 3 * 1000;
 export function useToast() {
     const toast = useRNToast();
-    const show = (text, options) => {
-        return toast.show(text, {
-            data: options,
+    const show = (title, options) => {
+        const toastData = Object.assign(Object.assign({ variant: "info" }, options), { title });
+        return toast.show(title, {
+            data: toastData,
             // a duration of 0 keeps the toast up infinitely until hidden
             duration: (options === null || options === void 0 ? void 0 : options.persistent) ? 0 : TOAST_DURATION_MS,
         });
     };
     return {
         show,
-        warn: (text, options) => {
-            console.warn(text);
-            return show(text, Object.assign(Object.assign({}, options), { variant: "warning" }));
+        warn: (title, options) => {
+            console.warn(title);
+            return show(title, Object.assign(Object.assign({}, options), { variant: "warning" }));
         },
-        error: (text, options) => {
-            console.error(text);
-            return show(text, Object.assign(Object.assign({}, options), { variant: "error" }));
+        error: (title, options) => {
+            console.error(title);
+            return show(title, Object.assign(Object.assign({}, options), { variant: "error" }));
+        },
+        success: (title, options) => {
+            console.info(title);
+            return show(title, Object.assign(Object.assign({}, options), { variant: "success" }));
+        },
+        info: (title, options) => {
+            console.info(title);
+            return show(title, Object.assign(Object.assign({}, options), { variant: "info" }));
         },
         hide: (id) => toast.hide(id),
         catch: (error, message, options) => {
@@ -44,24 +52,115 @@ export function useToast() {
         },
     };
 }
-export const Toast = ({ message, data }) => {
-    // margin 8 on either side, times the standard 4px we multiply by.
-    const width = Math.min(Dimensions.get("window").width - 16 * 4, 712);
-    const { variant, buttonText, buttonOnClick, persistent, onDismiss } = data !== null && data !== void 0 ? data : {};
-    let color = "darkGray";
-    if (variant === "warning" || variant === "error") {
-        color = variant;
+// TODO: Support secondary version of Toast.
+// TODO: Support dismissible version of Toast. Currently only persistent are dismissible.
+// This may require a different library from react-native-toast-notifications.
+export const Toast = ({ title, variant = "info", secondary, size = "sm", onDismiss, persistent, 
+// TODO enforce these should only show if size is "lg" with type discrinimation
+subtitle, }) => {
+    const { theme } = useTheme();
+    let color;
+    let textColor;
+    let iconName;
+    if (secondary) {
+        throw new Error("Secondary not supported yet");
+    }
+    if (!persistent && !onDismiss) {
+        console.warn("Toast is not persistent but no onDismiss callback provided");
+    }
+    if (variant === "warning") {
+        color = "warning";
+        textColor = "inverted";
+        iconName = "triangle-exclamation";
+    }
+    else if (variant === "error") {
+        color = "error";
+        textColor = "inverted";
+        iconName = "circle-exclamation";
+    }
+    else if (variant === "success") {
+        color = "success";
+        textColor = "inverted";
+        iconName = "circle-check";
+    }
+    else {
+        color = "neutralDark";
+        textColor = "inverted";
+        iconName = "circle-info";
     }
-    return (React.createElement(Box, { alignItems: "center", color: color, direction: "row", flex: "shrink", marginBottom: 4, marginLeft: 8, marginRight: 8, maxWidth: width, padding: 2, paddingX: 4, paddingY: 3, rounding: 4 },
-        Boolean(variant === "error") && (React.createElement(Box, { marginRight: 4 },
-            React.createElement(Icon, { color: "white", name: "exclamation-circle", size: "lg" }))),
-        Boolean(variant === "warning") && (React.createElement(Box, { marginRight: 4 },
-            React.createElement(Icon, { color: "white", name: "exclamation-triangle", size: "lg" }))),
-        React.createElement(Box, { alignItems: "center", direction: "column", flex: "shrink", justifyContent: "center" },
-            React.createElement(Text, { color: "white", size: "lg", weight: "bold" }, message)),
-        Boolean(buttonOnClick && buttonText) && (React.createElement(Box, { alignItems: "center", justifyContent: "center", marginLeft: 4 },
-            React.createElement(Button, { color: "lightGray", shape: "pill", text: buttonText, onClick: buttonOnClick }))),
-        Boolean(onDismiss && persistent) && (React.createElement(Box, { alignItems: "center", justifyContent: "center", marginLeft: 4 },
-            React.createElement(IconButton, { accessibilityLabel: "Dismiss notification", icon: "times", iconColor: "white", onClick: onDismiss })))));
+    return (React.createElement(View, { style: {
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            width: "100%",
+            paddingLeft: Platform.OS === "web" ? "10%" : theme.spacing.sm,
+            paddingRight: Platform.OS === "web" ? "10%" : theme.spacing.sm,
+            marginTop: theme.spacing.sm,
+            maxWidth: Platform.OS === "web" ? 900 : "100%",
+            flexGrow: 1,
+        } },
+        React.createElement(View, { style: {
+                display: "flex",
+                flexShrink: 1,
+                flexDirection: "row",
+                minWidth: 150,
+                paddingTop: theme.spacing.xs,
+                paddingBottom: theme.spacing.xs,
+                paddingRight: theme.spacing.sm,
+                alignItems: "center",
+                gap: 10,
+                borderRadius: theme.radius.default,
+                backgroundColor: theme.surface[color],
+                alignSelf: "flex-start",
+                minHeight: size === "lg" ? 32 : undefined,
+                maxWidth: "100%", // Ensure the content does not overflow
+            } },
+            React.createElement(View, { style: {
+                    paddingLeft: 8,
+                    paddingRight: 8,
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 12,
+                    maxWidth: "100%",
+                    flexShrink: 1, // Ensure the content can shrink properly
+                    flexGrow: 1,
+                } },
+                React.createElement(View, { style: {
+                        display: "flex",
+                        flexDirection: "row",
+                        paddingTop: size === "lg" ? 8 : 0,
+                        paddingBottom: size === "lg" ? 8 : 0,
+                        paddingLeft: size === "lg" ? 4 : 0,
+                        paddingRight: size === "lg" ? 4 : 0,
+                        alignItems: size === "lg" ? "center" : undefined,
+                        alignSelf: size === "lg" ? "stretch" : undefined,
+                        borderTopLeftRadius: theme.radius.default,
+                        borderBottomLeftRadius: theme.radius.default,
+                    } },
+                    React.createElement(Icon, { color: textColor, iconName: iconName, size: size === "lg" ? "2xl" : "md" })),
+                React.createElement(View, { style: {
+                        display: "flex",
+                        paddingTop: 8,
+                        paddingBottom: 8,
+                        flexDirection: "column",
+                        justifyContent: "center",
+                        alignItems: "flex-start",
+                        gap: 2,
+                        alignSelf: "stretch",
+                        flexWrap: "wrap",
+                        flexShrink: 1, // Ensure the content can shrink properly
+                    } },
+                    Boolean(size === "lg") ? (React.createElement(Heading, { color: textColor, size: "sm" }, title)) : (React.createElement(Text, { bold: true, color: textColor, size: "md" }, title)),
+                    Boolean(size === "lg" && subtitle) && (React.createElement(Text, { color: textColor, size: "sm" }, subtitle)))),
+            Boolean(persistent && onDismiss) && (React.createElement(Pressable, { accessibilityRole: "button", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    alignSelf: "center",
+                    gap: 12,
+                    marginLeft: 10,
+                    padding: size === "lg" ? 8 : 0,
+                }, onPress: onDismiss },
+                React.createElement(Icon, { color: textColor, iconName: "xmark" }))))));
 };
 //# sourceMappingURL=Toast.js.map