colibri-ui 0.7.2 → 0.7.4

package/esm/DotsLoader/index.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from "react";
+declare const DotsLoader: FC<{
+    color?: string;
+}>;
+export default DotsLoader;

package/esm/DotsLoader/styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Dot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    first?: boolean | undefined;
+    second?: boolean | undefined;
+    third?: boolean | undefined;
+    fourth?: boolean | undefined;
+    color?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/esm/Theme/breakpoints.d.ts

@@ -13,5 +13,6 @@ export type BreakpointsTheme = {
     under: (breakpoint: BreakpointName, isMedial?: boolean) => string;
     between: ([from, to]: [BreakpointName, BreakpointName], isMedial?: boolean) => string;
 };
+export type BreakpointMap<T = number> = Map<BreakpointName, T>;
 declare const Breakpoints: BreakpointsTheme;
 export default Breakpoints;

package/esm/Theme/color.d.ts

@@ -1,35 +1,52 @@
-declare enum Color {
-    WHITE = "#fff",
-    BLACK = "#000",
-    BLUE_1 = "#FBFDFF",
-    BLUE_2 = "#F5F9FF",
-    BLUE_3 = "#E9F3FF",
-    BLUE_4 = "#DAECFF",
-    BLUE_5 = "#C9E2FF",
-    BLUE_6 = "#B4D5FF",
-    BLUE_7 = "#9AC3FD",
-    BLUE_8 = "#73ABF8",
-    BLUE_9 = "#0974EB",
-    BLUE_10 = "#0066DC",
-    BLUE_11 = "#006DE3",
-    BLUE_12 = "#093266",
-    GRAPHITE_1 = "#FCFDFE",
-    GRAPHITE_2 = "#F8FAFB",
-    GRAPHITE_3 = "#EDF0F4",
-    GRAPHITE_4 = "#E4E8ED",
-    GRAPHITE_5 = "#DBE1E6",
-    GRAPHITE_6 = "#D1D8DF",
-    GRAPHITE_7 = "#C4CDD6",
-    GRAPHITE_8 = "#AFB9C3",
-    GRAPHITE_9 = "#24292E",
-    GRAPHITE_10 = "#383D42",
-    GRAPHITE_11 = "#5E666F",
-    GRAPHITE_12 = "#22272B",
-    PURPLE_1 = "rgba(38, 49, 129, .07)",
-    PURPLE_2 = "rgba(38, 49, 129, .15)",
-    PURPLE_3 = "rgba(38, 49, 129, .3)",
-    NEUTRAL_1 = "rgba(22,51,0,.05)",
-    NEUTRAL_2 = "rgba(22,51,0,.078)",
-    NEUTRAL_3 = "rgba(22,51,0,.129)"
-}
+export declare const Color: {
+    WHITE: string;
+    BLACK: string;
+    BLUE_1: string;
+    BLUE_2: string;
+    BLUE_3: string;
+    BLUE_4: string;
+    BLUE_5: string;
+    BLUE_6: string;
+    BLUE_7: string;
+    BLUE_8: string;
+    BLUE_9: string;
+    BLUE_10: string;
+    BLUE_11: string;
+    BLUE_12: string;
+    GRAPHITE_1: string;
+    GRAPHITE_2: string;
+    GRAPHITE_3: string;
+    GRAPHITE_4: string;
+    GRAPHITE_5: string;
+    GRAPHITE_6: string;
+    GRAPHITE_7: string;
+    GRAPHITE_8: string;
+    GRAPHITE_9: string;
+    GRAPHITE_10: string;
+    GRAPHITE_11: string;
+    GRAPHITE_12: string;
+    GRAY_1: string;
+    GRAY_2: string;
+    GRAY_3: string;
+    GRAY_4: string;
+    GRAY_5: string;
+    GRAY_6: string;
+    GRAY_7: string;
+    GRAY_8: string;
+    GRAY_9: string;
+    GRAY_10: string;
+    GRAY_11: string;
+    GRAY_12: string;
+    PURPLE_1: string;
+    PURPLE_2: string;
+    PURPLE_3: string;
+    NEUTRAL_1: string;
+    NEUTRAL_2: string;
+    NEUTRAL_3: string;
+    TYPOGRAPHY_PRIMARY: string;
+    TYPOGRAPHY_SECONDARY: string;
+    TYPOGRAPHY_ALERT: string;
+    TYPOGRAPHY_SUCCESS: string;
+    TYPOGRAPHY_LINK: string;
+};
 export default Color;

package/esm/Theme/color.js

@@ -1,38 +1,53 @@
-var Color;
-(function (Color) {
-  Color["WHITE"] = "#fff";
-  Color["BLACK"] = "#000";
-  Color["BLUE_1"] = "#FBFDFF";
-  Color["BLUE_2"] = "#F5F9FF";
-  Color["BLUE_3"] = "#E9F3FF";
-  Color["BLUE_4"] = "#DAECFF";
-  Color["BLUE_5"] = "#C9E2FF";
-  Color["BLUE_6"] = "#B4D5FF";
-  Color["BLUE_7"] = "#9AC3FD";
-  Color["BLUE_8"] = "#73ABF8";
-  Color["BLUE_9"] = "#0974EB";
-  Color["BLUE_10"] = "#0066DC";
-  Color["BLUE_11"] = "#006DE3";
-  Color["BLUE_12"] = "#093266";
-  Color["GRAPHITE_1"] = "#FCFDFE";
-  Color["GRAPHITE_2"] = "#F8FAFB";
-  Color["GRAPHITE_3"] = "#EDF0F4";
-  Color["GRAPHITE_4"] = "#E4E8ED";
-  Color["GRAPHITE_5"] = "#DBE1E6";
-  Color["GRAPHITE_6"] = "#D1D8DF";
-  Color["GRAPHITE_7"] = "#C4CDD6";
-  Color["GRAPHITE_8"] = "#AFB9C3";
-  Color["GRAPHITE_9"] = "#24292E";
-  Color["GRAPHITE_10"] = "#383D42";
-  Color["GRAPHITE_11"] = "#5E666F";
-  Color["GRAPHITE_12"] = "#22272B";
-  Color["PURPLE_1"] = "rgba(38, 49, 129, .07)";
-  Color["PURPLE_2"] = "rgba(38, 49, 129, .15)";
-  Color["PURPLE_3"] = "rgba(38, 49, 129, .3)";
-  Color["NEUTRAL_1"] = "rgba(22,51,0,.05)";
-  Color["NEUTRAL_2"] = "rgba(22,51,0,.078)";
-  Color["NEUTRAL_3"] = "rgba(22,51,0,.129)";
-})(Color || (Color = {}));
-var Color$1 = Color;
+var Color = {
+  WHITE: "#fff",
+  BLACK: "#000",
+  BLUE_1: "#FBFDFF",
+  BLUE_2: "#F5F9FF",
+  BLUE_3: "#E9F3FF",
+  BLUE_4: "#DAECFF",
+  BLUE_5: "#C9E2FF",
+  BLUE_6: "#B4D5FF",
+  BLUE_7: "#9AC3FD",
+  BLUE_8: "#73ABF8",
+  BLUE_9: "#0974EB",
+  BLUE_10: "#0066DC",
+  BLUE_11: "#006DE3",
+  BLUE_12: "#093266",
+  GRAPHITE_1: "#FCFDFE",
+  GRAPHITE_2: "#F8FAFB",
+  GRAPHITE_3: "#EDF0F4",
+  GRAPHITE_4: "#E4E8ED",
+  GRAPHITE_5: "#DBE1E6",
+  GRAPHITE_6: "#D1D8DF",
+  GRAPHITE_7: "#C4CDD6",
+  GRAPHITE_8: "#AFB9C3",
+  GRAPHITE_9: "#24292E",
+  GRAPHITE_10: "#383D42",
+  GRAPHITE_11: "#5E666F",
+  GRAPHITE_12: "#22272B",
+  GRAY_1: "#FCFCFD",
+  GRAY_2: "#F9F9FB",
+  GRAY_3: "#EFF0F3",
+  GRAY_4: "#E7E8EC",
+  GRAY_5: "#E0E1E6",
+  GRAY_6: "#D8D9E0",
+  GRAY_7: "#CDCED7",
+  GRAY_8: "#B9BBC6",
+  GRAY_9: "#8B8D98",
+  GRAY_10: "#80828D",
+  GRAY_11: "#62636C",
+  GRAY_12: "#1E1F24",
+  PURPLE_1: "rgba(38, 49, 129, .07)",
+  PURPLE_2: "rgba(38, 49, 129, .15)",
+  PURPLE_3: "rgba(38, 49, 129, .3)",
+  NEUTRAL_1: "rgba(22,51,0,.05)",
+  NEUTRAL_2: "rgba(22,51,0,.078)",
+  NEUTRAL_3: "rgba(22,51,0,.129)",
+  TYPOGRAPHY_PRIMARY: "#000",
+  TYPOGRAPHY_SECONDARY: "#667799",
+  TYPOGRAPHY_ALERT: "#E6481F",
+  TYPOGRAPHY_SUCCESS: "#23943E",
+  TYPOGRAPHY_LINK: "#0062D1"
+};
 
-export { Color$1 as default };
+export { Color, Color as default };

package/esm/Theme/index.d.ts

@@ -4,10 +4,24 @@ export declare const THEMES: {
     DEFAULT: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        typography: {
+            primary: string;
+            secondary: string;
+            alert: string;
+            success: string;
+            link: string;
+        };
     };
     BA: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        typography: {
+            primary: string;
+            secondary: string;
+            alert: string;
+            success: string;
+            link: string;
+        };
     };
 };
 export declare const ThemeProvider: FC<{

package/esm/Theme/index.props.d.ts

@@ -1,6 +1,8 @@
 import type { BreakpointsTheme } from "./breakpoints";
 import type { ButtonBase, ButtonVariant } from "../Button/index.props";
+import type { TypographyVariant } from "../Typography/index.props";
 export type ThemeProps = {
     button: ButtonVariant & ButtonBase;
     breakpoints: BreakpointsTheme;
+    typography: TypographyVariant;
 };

package/esm/Theme/themes/buenos_aires.d.ts

@@ -1,6 +1,20 @@
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
-export declare const ButtonBA: ButtonVariant & ButtonBase;
+export declare const ButtonThemeBA: ButtonVariant & ButtonBase;
+export declare const TypographyThemeBA: {
+    primary: string;
+    secondary: string;
+    alert: string;
+    success: string;
+    link: string;
+};
 export declare const THEME_BA: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    typography: {
+        primary: string;
+        secondary: string;
+        alert: string;
+        success: string;
+        link: string;
+    };
 };

package/esm/Theme/themes/buenos_aires.js

@@ -1,7 +1,7 @@
-import Color from '../color.js';
+import { Color } from '../color.js';
 import Breakpoints from '../breakpoints.js';
 
-var ButtonBA = {
+var ButtonThemeBA = {
   base: {
     color: Color.WHITE,
     borderRadius: "26px",
@@ -56,11 +56,41 @@ var ButtonBA = {
       backgroundColor: Color.PURPLE_1,
       borderColor: Color.PURPLE_1
     }
+  },
+  clear: {
+    normal: {
+      color: Color.GRAY_9,
+      backgroundColor: Color.WHITE,
+      borderColor: Color.WHITE
+    },
+    hover: {
+      color: Color.BLACK,
+      backgroundColor: Color.NEUTRAL_2,
+      borderColor: Color.NEUTRAL_2
+    },
+    active: {
+      color: Color.BLACK,
+      backgroundColor: Color.NEUTRAL_2,
+      borderColor: Color.NEUTRAL_2
+    },
+    disabled: {
+      color: Color.NEUTRAL_3,
+      backgroundColor: Color.NEUTRAL_1,
+      borderColor: Color.NEUTRAL_1
+    }
   }
 };
+var TypographyThemeBA = {
+  primary: Color.TYPOGRAPHY_PRIMARY,
+  secondary: Color.TYPOGRAPHY_SECONDARY,
+  alert: Color.TYPOGRAPHY_ALERT,
+  success: Color.TYPOGRAPHY_SUCCESS,
+  link: Color.TYPOGRAPHY_LINK
+};
 var THEME_BA = {
   breakpoints: Breakpoints,
-  button: ButtonBA
+  button: ButtonThemeBA,
+  typography: TypographyThemeBA
 };
 
-export { ButtonBA, THEME_BA };
+export { ButtonThemeBA, THEME_BA, TypographyThemeBA };

package/esm/Theme/themes/default.d.ts

@@ -1,6 +1,20 @@
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
-export declare const ButtonDefault: ButtonVariant & ButtonBase;
+export declare const ButtonThemeDefault: ButtonVariant & ButtonBase;
+export declare const TypographyThemeDefault: {
+    primary: string;
+    secondary: string;
+    alert: string;
+    success: string;
+    link: string;
+};
 export declare const THEME_DEFAULT: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    typography: {
+        primary: string;
+        secondary: string;
+        alert: string;
+        success: string;
+        link: string;
+    };
 };

package/esm/Theme/themes/default.js

@@ -1,7 +1,7 @@
-import Color from '../color.js';
+import { Color } from '../color.js';
 import Breakpoints from '../breakpoints.js';
 
-var ButtonDefault = {
+var ButtonThemeDefault = {
   base: {
     color: Color.BLACK,
     borderRadius: "26px"
@@ -55,11 +55,41 @@ var ButtonDefault = {
       backgroundColor: Color.BLUE_4,
       borderColor: Color.BLUE_4
     }
+  },
+  clear: {
+    normal: {
+      color: Color.GRAY_9,
+      backgroundColor: Color.WHITE,
+      borderColor: Color.WHITE
+    },
+    hover: {
+      color: Color.BLACK,
+      backgroundColor: Color.NEUTRAL_2,
+      borderColor: Color.NEUTRAL_2
+    },
+    active: {
+      color: Color.BLACK,
+      backgroundColor: Color.NEUTRAL_2,
+      borderColor: Color.NEUTRAL_2
+    },
+    disabled: {
+      color: Color.NEUTRAL_3,
+      backgroundColor: Color.NEUTRAL_1,
+      borderColor: Color.NEUTRAL_1
+    }
   }
 };
+var TypographyThemeDefault = {
+  primary: Color.TYPOGRAPHY_PRIMARY,
+  secondary: Color.TYPOGRAPHY_SECONDARY,
+  alert: Color.TYPOGRAPHY_ALERT,
+  success: Color.TYPOGRAPHY_SUCCESS,
+  link: Color.TYPOGRAPHY_LINK
+};
 var THEME_DEFAULT = {
   breakpoints: Breakpoints,
-  button: ButtonDefault
+  button: ButtonThemeDefault,
+  typography: TypographyThemeDefault
 };
 
-export { ButtonDefault, THEME_DEFAULT };
+export { ButtonThemeDefault, THEME_DEFAULT, TypographyThemeDefault };

package/esm/Typography/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC, PropsWithChildren } from "react";
+import type { Props } from "./index.props";
+declare const Typography: FC<PropsWithChildren<Props>>;
+export default Typography;

package/esm/Typography/index.props.d.ts

@@ -0,0 +1,18 @@
+export type TypographyVariant = {
+    primary: string;
+    secondary: string;
+    alert: string;
+    success: string;
+    link: string;
+};
+export type TypographyFontWeight = "normal" | "medium" | "bold";
+export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type TypographyTag = "span" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
+export type Props = {
+    className?: string;
+    tag?: TypographyTag;
+    variant?: keyof TypographyVariant;
+    size?: TypographySize;
+    fontWeight?: TypographyFontWeight;
+    nowrap?: boolean;
+};

package/esm/Typography/styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { TypographyFontWeight, TypographySize, TypographyVariant } from "./index.props";
+export declare const BaseTypography: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    variant: keyof TypographyVariant;
+    size?: TypographySize | undefined;
+    fontWeight?: TypographyFontWeight | undefined;
+    nowrap?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},