colibri-ui 0.7.7 → 0.7.8

package/README.md

@@ -4,7 +4,7 @@ React UI components library.
 
 ## Demo
 
-[Demo](https://66463ad45ac665db2620044b-jravylsyiw.chromatic.com)
+[Demo](https://godfreyd.github.io/colibri-ui)
 
 ## Installation
 

package/Theme/color.d.ts

@@ -40,10 +40,15 @@ export declare const TretiaryBA: {
     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 BrandDefault: {
+    BRAND_DEFAULT_1: string;
+    BRAND_DEFAULT_2: string;
+    BRAND_DEFAULT_3: string;
+};
+export declare const BrandBA: {
+    BRAND_BA_1: string;
+    BRAND_BA_2: string;
+    BRAND_BA_3: string;
 };
 export declare const Common: {
     WHITE: string;
@@ -99,9 +104,12 @@ export declare const Color: {
     BG_3: string;
     BG_4: string;
     BG_5: string;
-    TEXT_BA_PRIMARY: string;
-    TEXT_BA_SECONDARY: string;
-    TEXT_BA_TRETIARY: string;
+    BRAND_BA_1: string;
+    BRAND_BA_2: string;
+    BRAND_BA_3: string;
+    BRAND_DEFAULT_1: string;
+    BRAND_DEFAULT_2: string;
+    BRAND_DEFAULT_3: string;
     ALERT: string;
     SUCCESS: string;
     WHITE: string;

package/Theme/color.js

@@ -46,10 +46,15 @@ var TretiaryBA = {
   TRETIARY_BA_4: "#b1bcc8",
   TRETIARY_BA_5: "#87929d"
 };
-var TextBA = {
-  TEXT_BA_PRIMARY: "#000",
-  TEXT_BA_SECONDARY: "#fffbe9",
-  TEXT_BA_TRETIARY: "#D5D500"
+var BrandDefault = {
+  BRAND_DEFAULT_1: "#F393D2",
+  BRAND_DEFAULT_2: "#4BDCF8",
+  BRAND_DEFAULT_3: "#D5D500"
+};
+var BrandBA = {
+  BRAND_BA_1: "#B54141",
+  BRAND_BA_2: "#fffbe9",
+  BRAND_BA_3: "#D5D500"
 };
 var Common = {
   WHITE: "#fff",
@@ -66,17 +71,18 @@ var Accents = {
   ALERT: "#ff564e",
   SUCCESS: "#28bc00"
 };
-var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, Common), Accents), TextBA), Backgrounds), Primary), Secondary), Tretiary), PrimaryBA), SecondaryBA), TretiaryBA);
+var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, Common), Accents), BrandDefault), BrandBA), Backgrounds), Primary), Secondary), Tretiary), PrimaryBA), SecondaryBA), TretiaryBA);
 
 exports.Accents = Accents;
 exports.Backgrounds = Backgrounds;
+exports.BrandBA = BrandBA;
+exports.BrandDefault = BrandDefault;
 exports.Color = Color;
 exports.Common = Common;
 exports.Primary = Primary;
 exports.PrimaryBA = PrimaryBA;
 exports.Secondary = Secondary;
 exports.SecondaryBA = SecondaryBA;
-exports.TextBA = TextBA;
 exports.Tretiary = Tretiary;
 exports.TretiaryBA = TretiaryBA;
 exports.default = Color;

package/Theme/index.d.ts

@@ -64,9 +64,12 @@ export declare const THEMES: {
             BG_3: string;
             BG_4: string;
             BG_5: string;
-            TEXT_BA_PRIMARY: string;
-            TEXT_BA_SECONDARY: string;
-            TEXT_BA_TRETIARY: string;
+            BRAND_BA_1: string;
+            BRAND_BA_2: string;
+            BRAND_BA_3: string;
+            BRAND_DEFAULT_1: string;
+            BRAND_DEFAULT_2: string;
+            BRAND_DEFAULT_3: string;
             ALERT: string;
             SUCCESS: string;
             WHITE: string;
@@ -136,9 +139,12 @@ export declare const THEMES: {
             BG_3: string;
             BG_4: string;
             BG_5: string;
-            TEXT_BA_PRIMARY: string;
-            TEXT_BA_SECONDARY: string;
-            TEXT_BA_TRETIARY: string;
+            BRAND_BA_1: string;
+            BRAND_BA_2: string;
+            BRAND_BA_3: string;
+            BRAND_DEFAULT_1: string;
+            BRAND_DEFAULT_2: string;
+            BRAND_DEFAULT_3: string;
             ALERT: string;
             SUCCESS: string;
             WHITE: string;

package/Theme/themes/buenos_aires.d.ts

@@ -88,9 +88,12 @@ export declare const THEME_BA: {
         BG_3: string;
         BG_4: string;
         BG_5: string;
-        TEXT_BA_PRIMARY: string;
-        TEXT_BA_SECONDARY: string;
-        TEXT_BA_TRETIARY: string;
+        BRAND_BA_1: string;
+        BRAND_BA_2: string;
+        BRAND_BA_3: string;
+        BRAND_DEFAULT_1: string;
+        BRAND_DEFAULT_2: string;
+        BRAND_DEFAULT_3: string;
         ALERT: string;
         SUCCESS: string;
         WHITE: string;

package/Theme/themes/buenos_aires.js

@@ -31,9 +31,9 @@ var ButtonThemeBA = {
       borderColor: color.Color.PRIMARY_BA_5
     },
     disabled: {
-      color: color.Color.PRIMARY_BA_3,
-      backgroundColor: color.Color.PRIMARY_BA_2,
-      borderColor: color.Color.PRIMARY_BA_2
+      color: color.Color.BG_3,
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_1
     }
   },
   secondary: {
@@ -58,9 +58,9 @@ var ButtonThemeBA = {
       borderColor: color.Color.SECONDARY_BA_5
     },
     disabled: {
-      color: color.Color.SECONDARY_BA_3,
-      backgroundColor: color.Color.SECONDARY_BA_2,
-      borderColor: color.Color.SECONDARY_BA_2
+      color: color.Color.BG_3,
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_1
     }
   },
   clear: {
@@ -80,9 +80,9 @@ var ButtonThemeBA = {
       borderColor: color.Color.TRETIARY_BA_2
     },
     disabled: {
-      color: color.Color.TRETIARY_BA_3,
-      backgroundColor: color.Color.TRETIARY_BA_1,
-      borderColor: color.Color.TRETIARY_BA_1
+      color: color.Color.BG_3,
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_1
     }
   }
 };
@@ -124,8 +124,8 @@ var SwitchThemeDefault = {
   },
   state: {
     normal: {
-      backgroundColor: color.Color.BG_1,
-      borderColor: color.Color.BG_1
+      backgroundColor: color.Color.BG_2,
+      borderColor: color.Color.BG_2
     },
     checked: {
       backgroundColor: color.Color.PRIMARY_BA_5,

package/Theme/themes/default.d.ts

@@ -88,9 +88,12 @@ export declare const THEME_DEFAULT: {
         BG_3: string;
         BG_4: string;
         BG_5: string;
-        TEXT_BA_PRIMARY: string;
-        TEXT_BA_SECONDARY: string;
-        TEXT_BA_TRETIARY: string;
+        BRAND_BA_1: string;
+        BRAND_BA_2: string;
+        BRAND_BA_3: string;
+        BRAND_DEFAULT_1: string;
+        BRAND_DEFAULT_2: string;
+        BRAND_DEFAULT_3: string;
         ALERT: string;
         SUCCESS: string;
         WHITE: string;

package/Theme/themes/default.js

@@ -30,9 +30,9 @@ var ButtonThemeDefault = {
       borderColor: color.Color.PRIMARY_5
     },
     disabled: {
-      color: color.Color.PRIMARY_3,
-      backgroundColor: color.Color.PRIMARY_2,
-      borderColor: color.Color.PRIMARY_2
+      color: color.Color.BG_3,
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_1
     }
   },
   secondary: {
@@ -57,9 +57,9 @@ var ButtonThemeDefault = {
       borderColor: color.Color.SECONDARY_5
     },
     disabled: {
-      color: color.Color.SECONDARY_3,
-      backgroundColor: color.Color.SECONDARY_2,
-      borderColor: color.Color.SECONDARY_2
+      color: color.Color.BG_3,
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_1
     }
   },
   clear: {
@@ -79,9 +79,9 @@ var ButtonThemeDefault = {
       borderColor: color.Color.TRETIARY_2
     },
     disabled: {
-      color: color.Color.TRETIARY_3,
-      backgroundColor: color.Color.TRETIARY_1,
-      borderColor: color.Color.TRETIARY_1
+      color: color.Color.BG_3,
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_1
     }
   }
 };
@@ -123,8 +123,8 @@ var SwitchThemeDefault = {
   },
   state: {
     normal: {
-      backgroundColor: color.Color.BG_1,
-      borderColor: color.Color.BG_1
+      backgroundColor: color.Color.BG_2,
+      borderColor: color.Color.BG_2
     },
     checked: {
       backgroundColor: color.Color.PRIMARY_5,

package/esm/Checkbox/index.js

@@ -0,0 +1,44 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { Control, FakeCheckbox, Text, Label } from './styles.js';
+
+var Checkbox = function Checkbox(_a) {
+  var id = _a.id,
+    name = _a.name,
+    value = _a.value,
+    text = _a.text,
+    checked = _a.checked,
+    onChange = _a.onChange,
+    onFocus = _a.onFocus,
+    onBlur = _a.onBlur,
+    _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    className = _a.className,
+    disabled = _a.disabled,
+    error = _a.error;
+  var control = jsxs(Fragment, {
+    children: [jsx(Control, {
+      className: className,
+      type: "checkbox",
+      id: id,
+      variant: variant,
+      name: name,
+      value: value,
+      checked: checked,
+      onChange: onChange,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      disabled: disabled
+    }), jsx(FakeCheckbox, {
+      variant: variant,
+      checked: checked,
+      error: error
+    }), jsx(Text, {
+      children: text
+    })]
+  });
+  return jsx(Label, {
+    children: control
+  });
+};
+
+export { Checkbox as default };