colibri-ui 0.7.4 → 0.7.6

package/esm/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/esm/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/esm/Theme/themes/buenos_aires.js

@@ -7,7 +7,7 @@ var ButtonThemeBA = {
     borderRadius: "26px",
     border: "none"
   },
-  "default": {
+  primary: {
     normal: {
       backgroundColor: Color.GRAPHITE_9,
       borderColor: Color.GRAPHITE_9
@@ -30,7 +30,7 @@ var ButtonThemeBA = {
       borderColor: Color.GRAPHITE_5
     }
   },
-  primary: {
+  secondary: {
     normal: {
       color: Color.BLACK,
       backgroundColor: Color.PURPLE_2,
@@ -65,32 +65,58 @@ var ButtonThemeBA = {
     },
     hover: {
       color: Color.BLACK,
-      backgroundColor: Color.NEUTRAL_2,
-      borderColor: Color.NEUTRAL_2
+      backgroundColor: Color.PURPLE_2,
+      borderColor: Color.PURPLE_2
     },
     active: {
       color: Color.BLACK,
-      backgroundColor: Color.NEUTRAL_2,
-      borderColor: Color.NEUTRAL_2
+      backgroundColor: Color.PURPLE_2,
+      borderColor: Color.PURPLE_2
     },
     disabled: {
-      color: Color.NEUTRAL_3,
-      backgroundColor: Color.NEUTRAL_1,
-      borderColor: Color.NEUTRAL_1
+      color: Color.PURPLE_3,
+      backgroundColor: Color.PURPLE_1,
+      borderColor: Color.PURPLE_1
     }
   }
 };
 var TypographyThemeBA = {
-  primary: Color.TYPOGRAPHY_PRIMARY,
-  secondary: Color.TYPOGRAPHY_SECONDARY,
-  alert: Color.TYPOGRAPHY_ALERT,
-  success: Color.TYPOGRAPHY_SUCCESS,
-  link: Color.TYPOGRAPHY_LINK
+  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
+  }
+};
+var SwitchThemeDefault = {
+  circle: {
+    backgroundColor: Color.WHITE
+  },
+  state: {
+    normal: {
+      backgroundColor: Color.GRAPHITE_6,
+      borderColor: Color.GRAPHITE_6
+    },
+    checked: {
+      backgroundColor: Color.GRAPHITE_10,
+      borderColor: Color.GRAPHITE_10
+    }
+  }
 };
 var THEME_BA = {
   breakpoints: Breakpoints,
   button: ButtonThemeBA,
-  typography: TypographyThemeBA
+  typography: TypographyThemeBA,
+  "switch": SwitchThemeDefault
 };
 
-export { ButtonThemeBA, THEME_BA, TypographyThemeBA };
+export { ButtonThemeBA, SwitchThemeDefault, THEME_BA, TypographyThemeBA };

package/esm/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/esm/Theme/themes/default.js

@@ -6,29 +6,6 @@ var ButtonThemeDefault = {
     color: Color.BLACK,
     borderRadius: "26px"
   },
-  "default": {
-    normal: {
-      backgroundColor: Color.NEUTRAL_2,
-      borderColor: Color.NEUTRAL_2
-    },
-    hover: {
-      backgroundColor: Color.NEUTRAL_3,
-      borderColor: Color.NEUTRAL_3
-    },
-    focus: {
-      backgroundColor: Color.NEUTRAL_3,
-      borderColor: Color.NEUTRAL_3
-    },
-    active: {
-      backgroundColor: Color.NEUTRAL_3,
-      borderColor: Color.NEUTRAL_3
-    },
-    disabled: {
-      color: Color.NEUTRAL_3,
-      backgroundColor: Color.NEUTRAL_1,
-      borderColor: Color.NEUTRAL_1
-    }
-  },
   primary: {
     normal: {
       color: Color.WHITE,
@@ -56,6 +33,29 @@ var ButtonThemeDefault = {
       borderColor: Color.BLUE_4
     }
   },
+  secondary: {
+    normal: {
+      backgroundColor: Color.NEUTRAL_2,
+      borderColor: Color.NEUTRAL_2
+    },
+    hover: {
+      backgroundColor: Color.NEUTRAL_3,
+      borderColor: Color.NEUTRAL_3
+    },
+    focus: {
+      backgroundColor: Color.NEUTRAL_3,
+      borderColor: Color.NEUTRAL_3
+    },
+    active: {
+      backgroundColor: Color.NEUTRAL_3,
+      borderColor: Color.NEUTRAL_3
+    },
+    disabled: {
+      color: Color.NEUTRAL_3,
+      backgroundColor: Color.NEUTRAL_1,
+      borderColor: Color.NEUTRAL_1
+    }
+  },
   clear: {
     normal: {
       color: Color.GRAY_9,
@@ -80,16 +80,42 @@ var ButtonThemeDefault = {
   }
 };
 var TypographyThemeDefault = {
-  primary: Color.TYPOGRAPHY_PRIMARY,
-  secondary: Color.TYPOGRAPHY_SECONDARY,
-  alert: Color.TYPOGRAPHY_ALERT,
-  success: Color.TYPOGRAPHY_SUCCESS,
-  link: Color.TYPOGRAPHY_LINK
+  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
+  }
+};
+var SwitchThemeDefault = {
+  circle: {
+    backgroundColor: Color.WHITE
+  },
+  state: {
+    normal: {
+      backgroundColor: Color.BLUE_6,
+      borderColor: Color.BLUE_6
+    },
+    checked: {
+      backgroundColor: Color.BLUE_10,
+      borderColor: Color.BLUE_10
+    }
+  }
 };
 var THEME_DEFAULT = {
   breakpoints: Breakpoints,
   button: ButtonThemeDefault,
-  typography: TypographyThemeDefault
+  typography: TypographyThemeDefault,
+  "switch": SwitchThemeDefault
 };
 
-export { ButtonThemeDefault, THEME_DEFAULT, TypographyThemeDefault };
+export { ButtonThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };

package/esm/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/esm/Typography/index.js

@@ -0,0 +1,43 @@
+import { __assign } from 'tslib';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useMemo, Children } from 'react';
+import { BaseTypography } from './styles.js';
+import { VARIANT } from './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 ? 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 = useMemo(function () {
+    return Children.only(isNotComponent ? jsx(Element, {
+      children: children
+    }) : children);
+  }, [children, Element, isNotComponent]);
+  var Component = useMemo(function () {
+    return BaseTypography.withComponent(child.type, process.env.NODE_ENV === "production" ? {
+      target: "en3tlk10"
+    } : {
+      target: "en3tlk10",
+      label: "Component"
+    });
+  }, [child.type]);
+  return jsx(Component, __assign({}, child.props, {
+    ref: child.ref,
+    size: size,
+    variant: variant,
+    fontWeight: fontWeight,
+    nowrap: nowrap,
+    className: className
+  }));
+};
+
+export { Typography as default };

package/esm/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/esm/Typography/index.props.js

@@ -0,0 +1,10 @@
+var VARIANT;
+(function (VARIANT) {
+  VARIANT["PRIMARY"] = "primary";
+  VARIANT["SECONDARY"] = "secondary";
+  VARIANT["ALERT"] = "alert";
+  VARIANT["SUCCESS"] = "success";
+  VARIANT["LINK"] = "link";
+})(VARIANT || (VARIANT = {}));
+
+export { VARIANT };

package/esm/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;