colibri-ui 0.7.6 → 0.7.7

package/esm/Checkbox/index.d.ts

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

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

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import type { CSSObject } from "@emotion/react";
+type VariantStyles = {
+    backgroundColor?: CSSObject["backgroundColor"];
+    borderColor?: CSSObject["borderColor"];
+    boxShadow?: CSSObject["boxShadow"];
+};
+type VariantStates = {
+    normal?: VariantStyles;
+    hover?: VariantStyles;
+    checked?: VariantStyles;
+    focus?: VariantStyles;
+    active?: VariantStyles;
+    disabled?: VariantStyles;
+};
+export type CheckboxVariant = {
+    primary: VariantStates;
+};
+export interface CheckboxProps {
+    variant?: keyof CheckboxVariant;
+    size?: "s" | "m" | "l";
+    id?: string;
+    name?: string;
+    value?: string | number;
+    text?: string | React.ReactNode;
+    checked?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    className?: string;
+    disabled?: boolean;
+    error?: boolean;
+}
+export {};

package/esm/Checkbox/styles.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { CheckboxVariant } from "./index.props";
+export declare const Label: 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").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const Text: 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<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const FakeCheckbox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    checked?: boolean | undefined;
+    error?: boolean | undefined;
+    variant: keyof CheckboxVariant;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Control: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    variant: keyof CheckboxVariant;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;

package/esm/Theme/color.d.ts

@@ -1,122 +1,109 @@
-export declare const Blue: {
-    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;
+export declare const Primary: {
+    PRIMARY_1: string;
+    PRIMARY_2: string;
+    PRIMARY_3: string;
+    PRIMARY_4: string;
+    PRIMARY_5: string;
 };
-export declare const Graphite: {
-    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;
+export declare const Secondary: {
+    SECONDARY_1: string;
+    SECONDARY_2: string;
+    SECONDARY_3: string;
+    SECONDARY_4: string;
+    SECONDARY_5: string;
 };
-export declare const Gray: {
-    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;
+export declare const Tretiary: {
+    TRETIARY_1: string;
+    TRETIARY_2: string;
+    TRETIARY_3: string;
+    TRETIARY_4: string;
+    TRETIARY_5: string;
 };
-export declare const Purple: {
-    PURPLE_1: string;
-    PURPLE_2: string;
-    PURPLE_3: string;
-    PURPLE_4: string;
-    PURPLE_5: string;
-    PURPLE_6: string;
-    PURPLE_7: string;
+export declare const PrimaryBA: {
+    PRIMARY_BA_1: string;
+    PRIMARY_BA_2: string;
+    PRIMARY_BA_3: string;
+    PRIMARY_BA_4: string;
+    PRIMARY_BA_5: string;
 };
-export declare const Neutral: {
-    NEUTRAL_1: string;
-    NEUTRAL_2: string;
-    NEUTRAL_3: string;
+export declare const SecondaryBA: {
+    SECONDARY_BA_1: string;
+    SECONDARY_BA_2: string;
+    SECONDARY_BA_3: string;
+    SECONDARY_BA_4: string;
+    SECONDARY_BA_5: string;
+};
+export declare const TretiaryBA: {
+    TRETIARY_BA_1: string;
+    TRETIARY_BA_2: string;
+    TRETIARY_BA_3: string;
+    TRETIARY_BA_4: string;
+    TRETIARY_BA_5: string;
+};
+export declare const TextBA: {
+    TEXT_BA_PRIMARY: string;
+    TEXT_BA_SECONDARY: string;
+    TEXT_BA_TRETIARY: string;
 };
 export declare const Common: {
     WHITE: string;
     BLACK: string;
 };
-export declare const Text: {
-    TYPOGRAPHY_PRIMARY: string;
-    TYPOGRAPHY_SECONDARY: string;
-    TYPOGRAPHY_ALERT: string;
-    TYPOGRAPHY_SUCCESS: string;
-    TYPOGRAPHY_LINK: string;
+export declare const Backgrounds: {
+    BG_1: string;
+    BG_2: string;
+    BG_3: string;
+    BG_4: string;
+    BG_5: string;
+};
+export declare const Accents: {
+    ALERT: string;
+    SUCCESS: string;
+};
+export type ColorsTheme = {
+    [key: string]: string;
 };
 export declare const Color: {
-    TYPOGRAPHY_PRIMARY: string;
-    TYPOGRAPHY_SECONDARY: string;
-    TYPOGRAPHY_ALERT: string;
-    TYPOGRAPHY_SUCCESS: string;
-    TYPOGRAPHY_LINK: string;
-    NEUTRAL_1: string;
-    NEUTRAL_2: string;
-    NEUTRAL_3: string;
-    PURPLE_1: string;
-    PURPLE_2: string;
-    PURPLE_3: string;
-    PURPLE_4: string;
-    PURPLE_5: string;
-    PURPLE_6: string;
-    PURPLE_7: 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;
-    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;
-    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;
+    TRETIARY_BA_1: string;
+    TRETIARY_BA_2: string;
+    TRETIARY_BA_3: string;
+    TRETIARY_BA_4: string;
+    TRETIARY_BA_5: string;
+    SECONDARY_BA_1: string;
+    SECONDARY_BA_2: string;
+    SECONDARY_BA_3: string;
+    SECONDARY_BA_4: string;
+    SECONDARY_BA_5: string;
+    PRIMARY_BA_1: string;
+    PRIMARY_BA_2: string;
+    PRIMARY_BA_3: string;
+    PRIMARY_BA_4: string;
+    PRIMARY_BA_5: string;
+    TRETIARY_1: string;
+    TRETIARY_2: string;
+    TRETIARY_3: string;
+    TRETIARY_4: string;
+    TRETIARY_5: string;
+    SECONDARY_1: string;
+    SECONDARY_2: string;
+    SECONDARY_3: string;
+    SECONDARY_4: string;
+    SECONDARY_5: string;
+    PRIMARY_1: string;
+    PRIMARY_2: string;
+    PRIMARY_3: string;
+    PRIMARY_4: string;
+    PRIMARY_5: string;
+    BG_1: string;
+    BG_2: string;
+    BG_3: string;
+    BG_4: string;
+    BG_5: string;
+    TEXT_BA_PRIMARY: string;
+    TEXT_BA_SECONDARY: string;
+    TEXT_BA_TRETIARY: string;
+    ALERT: string;
+    SUCCESS: string;
     WHITE: string;
     BLACK: string;
 };

package/esm/Theme/color.js

@@ -1,72 +1,67 @@
 import { __assign } from 'tslib';
 
-var Blue = {
-  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"
+var Primary = {
+  PRIMARY_1: "#E8F0FE",
+  PRIMARY_2: "#B8D2FF",
+  PRIMARY_3: "#73ABF8",
+  PRIMARY_4: "#067AFF",
+  PRIMARY_5: "#0066DC"
 };
-var Graphite = {
-  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"
+var Secondary = {
+  SECONDARY_1: "#fff1db",
+  SECONDARY_2: "#ffdaa3",
+  SECONDARY_3: "#ffca79",
+  SECONDARY_4: "#f4b968",
+  SECONDARY_5: "#ffab0f"
 };
-var Gray = {
-  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"
+var Tretiary = {
+  TRETIARY_1: "#FFF5F0",
+  TRETIARY_2: "#FFEAE2",
+  TRETIARY_3: "#FFD8CA",
+  TRETIARY_4: "#FFA384 ",
+  TRETIARY_5: "#fc5200"
 };
-var Purple = {
-  PURPLE_1: "rgba(38, 49, 129, .07)",
-  PURPLE_2: "rgba(38, 49, 129, .15)",
-  PURPLE_3: "rgba(38, 49, 129, .3)",
-  PURPLE_4: "rgba(38, 49, 129, .4)",
-  PURPLE_5: "rgba(38, 49, 129, .5)",
-  PURPLE_6: "rgba(38, 49, 129, .6)",
-  PURPLE_7: "rgba(38, 49, 129, .7)"
+var PrimaryBA = {
+  PRIMARY_BA_1: "rgba(38, 49, 129, .07)",
+  PRIMARY_BA_2: "rgba(38, 49, 129, .3)",
+  PRIMARY_BA_3: "rgba(38, 49, 129, .4)",
+  PRIMARY_BA_4: "rgba(38, 49, 129, .6)",
+  PRIMARY_BA_5: "rgba(38, 49, 129, .8)"
 };
-var Neutral = {
-  NEUTRAL_1: "rgba(22,51,0,.05)",
-  NEUTRAL_2: "rgba(22,51,0,.078)",
-  NEUTRAL_3: "rgba(22,51,0,.129)"
+var SecondaryBA = {
+  SECONDARY_BA_1: "#d9d9d9",
+  SECONDARY_BA_2: "#bbb",
+  SECONDARY_BA_3: "#636363",
+  SECONDARY_BA_4: "#313131",
+  SECONDARY_BA_5: "#1a1a1a"
+};
+var TretiaryBA = {
+  TRETIARY_BA_1: "#EDF1F5",
+  TRETIARY_BA_2: "#d3dbe3",
+  TRETIARY_BA_3: "#c5cfda",
+  TRETIARY_BA_4: "#b1bcc8",
+  TRETIARY_BA_5: "#87929d"
+};
+var TextBA = {
+  TEXT_BA_PRIMARY: "#000",
+  TEXT_BA_SECONDARY: "#fffbe9",
+  TEXT_BA_TRETIARY: "#D5D500"
 };
 var Common = {
   WHITE: "#fff",
   BLACK: "#000"
 };
-var Text = {
-  TYPOGRAPHY_PRIMARY: "#000",
-  TYPOGRAPHY_SECONDARY: "#667799",
-  TYPOGRAPHY_ALERT: "#E6481F",
-  TYPOGRAPHY_SUCCESS: "#23943E",
-  TYPOGRAPHY_LINK: "#0062D1"
+var Backgrounds = {
+  BG_1: "#f2f2f2",
+  BG_2: "#e6e6e6",
+  BG_3: "#dbdbdb",
+  BG_4: "#b3b3b3",
+  BG_5: "#999"
+};
+var Accents = {
+  ALERT: "#ff564e",
+  SUCCESS: "#28bc00"
 };
-var Color = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, Common), Blue), Graphite), Gray), Purple), Neutral), Text);
+var Color = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, Common), Accents), TextBA), Backgrounds), Primary), Secondary), Tretiary), PrimaryBA), SecondaryBA), TretiaryBA);
 
-export { Blue, Color, Common, Graphite, Gray, Neutral, Purple, Text, Color as default };
+export { Accents, Backgrounds, Color, Common, Primary, PrimaryBA, Secondary, SecondaryBA, TextBA, Tretiary, TretiaryBA, Color as default };

package/esm/Theme/index.d.ts

@@ -4,22 +4,14 @@ export declare const THEMES: {
     DEFAULT: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        checkbox: import("../Checkbox/index.props").CheckboxVariant;
         typography: {
-            primary: {
-                color: string;
-            };
-            secondary: {
-                color: string;
-            };
             alert: {
                 color: string;
             };
             success: {
                 color: string;
             };
-            link: {
-                color: string;
-            };
         };
         switch: {
             circle: {
@@ -36,26 +28,62 @@ export declare const THEMES: {
                 };
             };
         };
+        palette: {
+            TRETIARY_BA_1: string;
+            TRETIARY_BA_2: string;
+            TRETIARY_BA_3: string;
+            TRETIARY_BA_4: string;
+            TRETIARY_BA_5: string;
+            SECONDARY_BA_1: string;
+            SECONDARY_BA_2: string;
+            SECONDARY_BA_3: string;
+            SECONDARY_BA_4: string;
+            SECONDARY_BA_5: string;
+            PRIMARY_BA_1: string;
+            PRIMARY_BA_2: string;
+            PRIMARY_BA_3: string;
+            PRIMARY_BA_4: string;
+            PRIMARY_BA_5: string;
+            TRETIARY_1: string;
+            TRETIARY_2: string;
+            TRETIARY_3: string;
+            TRETIARY_4: string;
+            TRETIARY_5: string;
+            SECONDARY_1: string;
+            SECONDARY_2: string;
+            SECONDARY_3: string;
+            SECONDARY_4: string;
+            SECONDARY_5: string;
+            PRIMARY_1: string;
+            PRIMARY_2: string;
+            PRIMARY_3: string;
+            PRIMARY_4: string;
+            PRIMARY_5: string;
+            BG_1: string;
+            BG_2: string;
+            BG_3: string;
+            BG_4: string;
+            BG_5: string;
+            TEXT_BA_PRIMARY: string;
+            TEXT_BA_SECONDARY: string;
+            TEXT_BA_TRETIARY: string;
+            ALERT: string;
+            SUCCESS: string;
+            WHITE: string;
+            BLACK: string;
+        };
     };
     BA: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        checkbox: import("../Checkbox/index.props").CheckboxVariant;
         typography: {
-            primary: {
-                color: string;
-            };
-            secondary: {
-                color: string;
-            };
             alert: {
                 color: string;
             };
             success: {
                 color: string;
             };
-            link: {
-                color: string;
-            };
         };
         switch: {
             circle: {
@@ -72,6 +100,50 @@ export declare const THEMES: {
                 };
             };
         };
+        palette: {
+            TRETIARY_BA_1: string;
+            TRETIARY_BA_2: string;
+            TRETIARY_BA_3: string;
+            TRETIARY_BA_4: string;
+            TRETIARY_BA_5: string;
+            SECONDARY_BA_1: string;
+            SECONDARY_BA_2: string;
+            SECONDARY_BA_3: string;
+            SECONDARY_BA_4: string;
+            SECONDARY_BA_5: string;
+            PRIMARY_BA_1: string;
+            PRIMARY_BA_2: string;
+            PRIMARY_BA_3: string;
+            PRIMARY_BA_4: string;
+            PRIMARY_BA_5: string;
+            TRETIARY_1: string;
+            TRETIARY_2: string;
+            TRETIARY_3: string;
+            TRETIARY_4: string;
+            TRETIARY_5: string;
+            SECONDARY_1: string;
+            SECONDARY_2: string;
+            SECONDARY_3: string;
+            SECONDARY_4: string;
+            SECONDARY_5: string;
+            PRIMARY_1: string;
+            PRIMARY_2: string;
+            PRIMARY_3: string;
+            PRIMARY_4: string;
+            PRIMARY_5: string;
+            BG_1: string;
+            BG_2: string;
+            BG_3: string;
+            BG_4: string;
+            BG_5: string;
+            TEXT_BA_PRIMARY: string;
+            TEXT_BA_SECONDARY: string;
+            TEXT_BA_TRETIARY: string;
+            ALERT: string;
+            SUCCESS: string;
+            WHITE: string;
+            BLACK: string;
+        };
     };
 };
 export declare const ThemeProvider: FC<{

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

@@ -1,10 +1,14 @@
+import type { CheckboxVariant } from "../Checkbox/index.props";
+import type { ColorsTheme } from "./color";
 import type { BreakpointsTheme } from "./breakpoints";
 import type { ButtonBase, ButtonVariant } from "../Button/index.props";
 import type { TypographyVariant } from "../Typography/index.props";
 import type { SwitchStates } from "../Switch/index.props";
 export type ThemeProps = {
     button: ButtonVariant & ButtonBase;
+    checkbox: CheckboxVariant;
     breakpoints: BreakpointsTheme;
     typography: TypographyVariant;
     switch: SwitchStates;
+    palette: ColorsTheme;
 };

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

@@ -1,21 +1,14 @@
+import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
 export declare const ButtonThemeBA: ButtonVariant & ButtonBase;
+export declare const CheckboxThemeBA: CheckboxVariant;
 export declare const TypographyThemeBA: {
-    primary: {
-        color: string;
-    };
-    secondary: {
-        color: string;
-    };
     alert: {
         color: string;
     };
     success: {
         color: string;
     };
-    link: {
-        color: string;
-    };
 };
 export declare const SwitchThemeDefault: {
     circle: {
@@ -35,22 +28,14 @@ export declare const SwitchThemeDefault: {
 export declare const THEME_BA: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    checkbox: CheckboxVariant;
     typography: {
-        primary: {
-            color: string;
-        };
-        secondary: {
-            color: string;
-        };
         alert: {
             color: string;
         };
         success: {
             color: string;
         };
-        link: {
-            color: string;
-        };
     };
     switch: {
         circle: {
@@ -67,4 +52,48 @@ export declare const THEME_BA: {
             };
         };
     };
+    palette: {
+        TRETIARY_BA_1: string;
+        TRETIARY_BA_2: string;
+        TRETIARY_BA_3: string;
+        TRETIARY_BA_4: string;
+        TRETIARY_BA_5: string;
+        SECONDARY_BA_1: string;
+        SECONDARY_BA_2: string;
+        SECONDARY_BA_3: string;
+        SECONDARY_BA_4: string;
+        SECONDARY_BA_5: string;
+        PRIMARY_BA_1: string;
+        PRIMARY_BA_2: string;
+        PRIMARY_BA_3: string;
+        PRIMARY_BA_4: string;
+        PRIMARY_BA_5: string;
+        TRETIARY_1: string;
+        TRETIARY_2: string;
+        TRETIARY_3: string;
+        TRETIARY_4: string;
+        TRETIARY_5: string;
+        SECONDARY_1: string;
+        SECONDARY_2: string;
+        SECONDARY_3: string;
+        SECONDARY_4: string;
+        SECONDARY_5: string;
+        PRIMARY_1: string;
+        PRIMARY_2: string;
+        PRIMARY_3: string;
+        PRIMARY_4: string;
+        PRIMARY_5: string;
+        BG_1: string;
+        BG_2: string;
+        BG_3: string;
+        BG_4: string;
+        BG_5: string;
+        TEXT_BA_PRIMARY: string;
+        TEXT_BA_SECONDARY: string;
+        TEXT_BA_TRETIARY: string;
+        ALERT: string;
+        SUCCESS: string;
+        WHITE: string;
+        BLACK: string;
+    };
 };