colibri-ui 0.7.3 → 0.7.5

package/esm/Theme/index.d.ts

@@ -4,10 +4,74 @@ export declare const THEMES: {
     DEFAULT: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        typography: {
+            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: {
+                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;
+                };
+            };
+        };
     };
 };
 export declare const ThemeProvider: FC<{

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

@@ -1,6 +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,6 +1,70 @@
 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: {
+        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: {
+            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

@@ -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",
@@ -80,9 +80,43 @@ var ButtonBA = {
     }
   }
 };
+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
+  }
+};
+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: ButtonBA
+  button: ButtonThemeBA,
+  typography: TypographyThemeBA,
+  "switch": SwitchThemeDefault
 };
 
-export { ButtonBA, THEME_BA };
+export { ButtonThemeBA, SwitchThemeDefault, THEME_BA, TypographyThemeBA };

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

@@ -1,6 +1,70 @@
 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: {
+        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: {
+            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

@@ -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"
@@ -79,9 +79,43 @@ var ButtonDefault = {
     }
   }
 };
+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
+  }
+};
+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: ButtonDefault
+  button: ButtonThemeDefault,
+  typography: TypographyThemeDefault,
+  "switch": SwitchThemeDefault
 };
 
-export { ButtonDefault, THEME_DEFAULT };
+export { ButtonThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };

package/esm/Typography/index.d.ts

@@ -0,0 +1,4 @@
+import { type TypographyProps } from "./index.props";
+import type { FC, PropsWithChildren } from "react";
+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

@@ -0,0 +1,30 @@
+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 = {
+    [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 TypographyProps = {
+    className?: string;
+    tag?: TypographyTag;
+    variant?: keyof TypographyVariant;
+    size?: TypographySize;
+    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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+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;
+} & {
+    variant: keyof TypographyVariant;
+    size?: TypographySize | undefined;
+    fontWeight?: TypographyFontWeight | undefined;
+    nowrap?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;