colibri-ui 0.7.4 → 0.7.6

package/Theme/index.d.ts

@@ -1,26 +1,76 @@
-import type { FC, ReactNode } from "react";
+import { type FC, type ReactNode } from "react";
 import type { ThemeProps } from "./index.props";
 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;
+            primary: {
+                color: string;
+            };
+            secondary: {
+                color: string;
+            };
+            alert: {
+                color: string;
+            };
+            success: {
+                color: string;
+            };
+            link: {
+                color: string;
+            };
+        };
+        switch: {
+            circle: {
+                backgroundColor: string;
+            };
+            state: {
+                normal: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                checked: {
+                    backgroundColor: string;
+                    borderColor: 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;
+            primary: {
+                color: string;
+            };
+            secondary: {
+                color: string;
+            };
+            alert: {
+                color: string;
+            };
+            success: {
+                color: string;
+            };
+            link: {
+                color: string;
+            };
+        };
+        switch: {
+            circle: {
+                backgroundColor: string;
+            };
+            state: {
+                normal: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                checked: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
         };
     };
 };

package/Theme/index.props.d.ts

@@ -1,8 +1,10 @@
 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;
     breakpoints: BreakpointsTheme;
     typography: TypographyVariant;
+    switch: SwitchStates;
 };

package/Theme/themes/buenos_aires.d.ts

@@ -1,20 +1,70 @@
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
 export declare const ButtonThemeBA: ButtonVariant & ButtonBase;
 export declare const TypographyThemeBA: {
-    primary: string;
-    secondary: string;
-    alert: string;
-    success: string;
-    link: string;
+    primary: {
+        color: string;
+    };
+    secondary: {
+        color: string;
+    };
+    alert: {
+        color: string;
+    };
+    success: {
+        color: string;
+    };
+    link: {
+        color: string;
+    };
+};
+export declare const SwitchThemeDefault: {
+    circle: {
+        backgroundColor: string;
+    };
+    state: {
+        normal: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        checked: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
 };
 export declare const THEME_BA: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
     typography: {
-        primary: string;
-        secondary: string;
-        alert: string;
-        success: string;
-        link: string;
+        primary: {
+            color: string;
+        };
+        secondary: {
+            color: string;
+        };
+        alert: {
+            color: string;
+        };
+        success: {
+            color: string;
+        };
+        link: {
+            color: string;
+        };
+    };
+    switch: {
+        circle: {
+            backgroundColor: string;
+        };
+        state: {
+            normal: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            checked: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+        };
     };
 };

package/Theme/themes/buenos_aires.js

@@ -9,7 +9,7 @@ var ButtonThemeBA = {
     borderRadius: "26px",
     border: "none"
   },
-  "default": {
+  primary: {
     normal: {
       backgroundColor: color.Color.GRAPHITE_9,
       borderColor: color.Color.GRAPHITE_9
@@ -32,7 +32,7 @@ var ButtonThemeBA = {
       borderColor: color.Color.GRAPHITE_5
     }
   },
-  primary: {
+  secondary: {
     normal: {
       color: color.Color.BLACK,
       backgroundColor: color.Color.PURPLE_2,
@@ -67,34 +67,61 @@ var ButtonThemeBA = {
     },
     hover: {
       color: color.Color.BLACK,
-      backgroundColor: color.Color.NEUTRAL_2,
-      borderColor: color.Color.NEUTRAL_2
+      backgroundColor: color.Color.PURPLE_2,
+      borderColor: color.Color.PURPLE_2
     },
     active: {
       color: color.Color.BLACK,
-      backgroundColor: color.Color.NEUTRAL_2,
-      borderColor: color.Color.NEUTRAL_2
+      backgroundColor: color.Color.PURPLE_2,
+      borderColor: color.Color.PURPLE_2
     },
     disabled: {
-      color: color.Color.NEUTRAL_3,
-      backgroundColor: color.Color.NEUTRAL_1,
-      borderColor: color.Color.NEUTRAL_1
+      color: color.Color.PURPLE_3,
+      backgroundColor: color.Color.PURPLE_1,
+      borderColor: color.Color.PURPLE_1
     }
   }
 };
 var TypographyThemeBA = {
-  primary: color.Color.TYPOGRAPHY_PRIMARY,
-  secondary: color.Color.TYPOGRAPHY_SECONDARY,
-  alert: color.Color.TYPOGRAPHY_ALERT,
-  success: color.Color.TYPOGRAPHY_SUCCESS,
-  link: color.Color.TYPOGRAPHY_LINK
+  primary: {
+    color: color.Color.TYPOGRAPHY_PRIMARY
+  },
+  secondary: {
+    color: color.Color.TYPOGRAPHY_SECONDARY
+  },
+  alert: {
+    color: color.Color.TYPOGRAPHY_ALERT
+  },
+  success: {
+    color: color.Color.TYPOGRAPHY_SUCCESS
+  },
+  link: {
+    color: color.Color.TYPOGRAPHY_LINK
+  }
+};
+var SwitchThemeDefault = {
+  circle: {
+    backgroundColor: color.Color.WHITE
+  },
+  state: {
+    normal: {
+      backgroundColor: color.Color.GRAPHITE_6,
+      borderColor: color.Color.GRAPHITE_6
+    },
+    checked: {
+      backgroundColor: color.Color.GRAPHITE_10,
+      borderColor: color.Color.GRAPHITE_10
+    }
+  }
 };
 var THEME_BA = {
   breakpoints: breakpoints.default,
   button: ButtonThemeBA,
-  typography: TypographyThemeBA
+  typography: TypographyThemeBA,
+  "switch": SwitchThemeDefault
 };
 
 exports.ButtonThemeBA = ButtonThemeBA;
+exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_BA = THEME_BA;
 exports.TypographyThemeBA = TypographyThemeBA;

package/Theme/themes/default.d.ts

@@ -1,20 +1,70 @@
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
 export declare const ButtonThemeDefault: ButtonVariant & ButtonBase;
 export declare const TypographyThemeDefault: {
-    primary: string;
-    secondary: string;
-    alert: string;
-    success: string;
-    link: string;
+    primary: {
+        color: string;
+    };
+    secondary: {
+        color: string;
+    };
+    alert: {
+        color: string;
+    };
+    success: {
+        color: string;
+    };
+    link: {
+        color: string;
+    };
+};
+export declare const SwitchThemeDefault: {
+    circle: {
+        backgroundColor: string;
+    };
+    state: {
+        normal: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        checked: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
 };
 export declare const THEME_DEFAULT: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
     typography: {
-        primary: string;
-        secondary: string;
-        alert: string;
-        success: string;
-        link: string;
+        primary: {
+            color: string;
+        };
+        secondary: {
+            color: string;
+        };
+        alert: {
+            color: string;
+        };
+        success: {
+            color: string;
+        };
+        link: {
+            color: string;
+        };
+    };
+    switch: {
+        circle: {
+            backgroundColor: string;
+        };
+        state: {
+            normal: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            checked: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+        };
     };
 };

package/Theme/themes/default.js

@@ -8,29 +8,6 @@ var ButtonThemeDefault = {
     color: color.Color.BLACK,
     borderRadius: "26px"
   },
-  "default": {
-    normal: {
-      backgroundColor: color.Color.NEUTRAL_2,
-      borderColor: color.Color.NEUTRAL_2
-    },
-    hover: {
-      backgroundColor: color.Color.NEUTRAL_3,
-      borderColor: color.Color.NEUTRAL_3
-    },
-    focus: {
-      backgroundColor: color.Color.NEUTRAL_3,
-      borderColor: color.Color.NEUTRAL_3
-    },
-    active: {
-      backgroundColor: color.Color.NEUTRAL_3,
-      borderColor: color.Color.NEUTRAL_3
-    },
-    disabled: {
-      color: color.Color.NEUTRAL_3,
-      backgroundColor: color.Color.NEUTRAL_1,
-      borderColor: color.Color.NEUTRAL_1
-    }
-  },
   primary: {
     normal: {
       color: color.Color.WHITE,
@@ -58,6 +35,29 @@ var ButtonThemeDefault = {
       borderColor: color.Color.BLUE_4
     }
   },
+  secondary: {
+    normal: {
+      backgroundColor: color.Color.NEUTRAL_2,
+      borderColor: color.Color.NEUTRAL_2
+    },
+    hover: {
+      backgroundColor: color.Color.NEUTRAL_3,
+      borderColor: color.Color.NEUTRAL_3
+    },
+    focus: {
+      backgroundColor: color.Color.NEUTRAL_3,
+      borderColor: color.Color.NEUTRAL_3
+    },
+    active: {
+      backgroundColor: color.Color.NEUTRAL_3,
+      borderColor: color.Color.NEUTRAL_3
+    },
+    disabled: {
+      color: color.Color.NEUTRAL_3,
+      backgroundColor: color.Color.NEUTRAL_1,
+      borderColor: color.Color.NEUTRAL_1
+    }
+  },
   clear: {
     normal: {
       color: color.Color.GRAY_9,
@@ -82,18 +82,45 @@ var ButtonThemeDefault = {
   }
 };
 var TypographyThemeDefault = {
-  primary: color.Color.TYPOGRAPHY_PRIMARY,
-  secondary: color.Color.TYPOGRAPHY_SECONDARY,
-  alert: color.Color.TYPOGRAPHY_ALERT,
-  success: color.Color.TYPOGRAPHY_SUCCESS,
-  link: color.Color.TYPOGRAPHY_LINK
+  primary: {
+    color: color.Color.TYPOGRAPHY_PRIMARY
+  },
+  secondary: {
+    color: color.Color.TYPOGRAPHY_SECONDARY
+  },
+  alert: {
+    color: color.Color.TYPOGRAPHY_ALERT
+  },
+  success: {
+    color: color.Color.TYPOGRAPHY_SUCCESS
+  },
+  link: {
+    color: color.Color.TYPOGRAPHY_LINK
+  }
+};
+var SwitchThemeDefault = {
+  circle: {
+    backgroundColor: color.Color.WHITE
+  },
+  state: {
+    normal: {
+      backgroundColor: color.Color.BLUE_6,
+      borderColor: color.Color.BLUE_6
+    },
+    checked: {
+      backgroundColor: color.Color.BLUE_10,
+      borderColor: color.Color.BLUE_10
+    }
+  }
 };
 var THEME_DEFAULT = {
   breakpoints: breakpoints.default,
   button: ButtonThemeDefault,
-  typography: TypographyThemeDefault
+  typography: TypographyThemeDefault,
+  "switch": SwitchThemeDefault
 };
 
 exports.ButtonThemeDefault = ButtonThemeDefault;
+exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_DEFAULT = THEME_DEFAULT;
 exports.TypographyThemeDefault = TypographyThemeDefault;

package/Typography/index.d.ts

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

package/Typography/index.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var styles = require('./styles.js');
+var index_props = require('./index.props.js');
+
+var Typography = function Typography(_a) {
+  var _b = _a.tag,
+    Element = _b === void 0 ? "span" : _b,
+    children = _a.children,
+    _c = _a.variant,
+    variant = _c === void 0 ? index_props.VARIANT.PRIMARY : _c,
+    size = _a.size,
+    fontWeight = _a.fontWeight,
+    className = _a.className,
+    _d = _a.nowrap,
+    nowrap = _d === void 0 ? false : _d;
+  var isNotComponent = typeof children === "string";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var child = react.useMemo(function () {
+    return react.Children.only(isNotComponent ? jsxRuntime.jsx(Element, {
+      children: children
+    }) : children);
+  }, [children, Element, isNotComponent]);
+  var Component = react.useMemo(function () {
+    return styles.BaseTypography.withComponent(child.type, process.env.NODE_ENV === "production" ? {
+      target: "en3tlk10"
+    } : {
+      target: "en3tlk10",
+      label: "Component"
+    });
+  }, [child.type]);
+  return jsxRuntime.jsx(Component, tslib.__assign({}, child.props, {
+    ref: child.ref,
+    size: size,
+    variant: variant,
+    fontWeight: fontWeight,
+    nowrap: nowrap,
+    className: className
+  }));
+};
+
+exports.default = Typography;

package/Typography/index.props.d.ts

@@ -1,14 +1,25 @@
+import type { CSSObject } from "@emotion/react";
+export declare enum VARIANT {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    ALERT = "alert",
+    SUCCESS = "success",
+    LINK = "link"
+}
+type VariantStyles = {
+    color?: CSSObject["color"];
+};
 export type TypographyVariant = {
-    primary: string;
-    secondary: string;
-    alert: string;
-    success: string;
-    link: string;
+    [VARIANT.PRIMARY]: VariantStyles;
+    [VARIANT.SECONDARY]: VariantStyles;
+    [VARIANT.ALERT]: VariantStyles;
+    [VARIANT.SUCCESS]: VariantStyles;
+    [VARIANT.LINK]: VariantStyles;
 };
 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 = {
+export type TypographyProps = {
     className?: string;
     tag?: TypographyTag;
     variant?: keyof TypographyVariant;
@@ -16,3 +27,4 @@ export type Props = {
     fontWeight?: TypographyFontWeight;
     nowrap?: boolean;
 };
+export {};

package/Typography/index.props.js

@@ -0,0 +1,10 @@
+'use strict';
+
+exports.VARIANT = void 0;
+(function (VARIANT) {
+  VARIANT["PRIMARY"] = "primary";
+  VARIANT["SECONDARY"] = "secondary";
+  VARIANT["ALERT"] = "alert";
+  VARIANT["SUCCESS"] = "success";
+  VARIANT["LINK"] = "link";
+})(exports.VARIANT || (exports.VARIANT = {}));

package/Typography/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { TypographyFontWeight, TypographySize, TypographyVariant } from "./index.props";
+import { type TypographyFontWeight, type TypographySize, type 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;