@eclass/ui-kit 1.9.2 → 1.10.0

package/dist/atoms/Icons/Base.d.ts

@@ -9,6 +9,7 @@ export interface BaseProps {
 interface IconProps extends BaseProps {
     viewBox?: string;
     children: React.ReactChild | React.ReactChild[];
+    title?: string;
 }
-export declare function Base({ w, h, color, m, viewBox, children, }: IconProps): JSX.Element;
+export declare function Base({ w, h, color, m, viewBox, children, title, }: IconProps): JSX.Element;
 export {};

package/dist/atoms/Icons/Loader.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface props {
+    fill?: string;
+}
+export declare function Loader({ fill }: props): JSX.Element;
+export {};

package/dist/atoms/Icons/Multimedia.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { BaseProps } from './Base';
+export declare function Multimedia(props: BaseProps): JSX.Element;
+export declare namespace Multimedia {
+    var displayName: string;
+}

package/dist/atoms/Icons/index.d.ts

@@ -3,9 +3,11 @@ export * from './ArrowRight';
 export * from './Certificate';
 export * from './CircularCheck';
 export * from './CircularInformation';
+export * from './Loader';
 export * from './Profile';
 export * from './Schedule';
 export * from './TinyAlertInfo';
 export * from './TinyAlertError';
 export * from './TinyAlertWarning';
 export * from './TinyAlertSuccess';
+export * from './Multimedia';

package/dist/eclass-ui-kit.es.js

@@ -10690,7 +10690,7 @@ var ring2 = {
   ringOffsetColor: t.colors("--chakra-ring-offset-color"),
   ringInset: t.prop("--chakra-ring-inset")
 };
-var space = {
+var space$1 = {
   margin: t.spaceT("margin"),
   marginTop: t.spaceT("marginTop"),
   marginBlockStart: t.spaceT("marginBlockStart"),
@@ -10718,29 +10718,29 @@ var space = {
   paddingY: t.space(["paddingTop", "paddingBottom"]),
   paddingBlock: t.space("paddingBlock")
 };
-Object.assign(space, {
-  m: space.margin,
-  mt: space.marginTop,
-  mr: space.marginRight,
-  me: space.marginInlineEnd,
-  marginEnd: space.marginInlineEnd,
-  mb: space.marginBottom,
-  ml: space.marginLeft,
-  ms: space.marginInlineStart,
-  marginStart: space.marginInlineStart,
-  mx: space.marginX,
-  my: space.marginY,
-  p: space.padding,
-  pt: space.paddingTop,
-  py: space.paddingY,
-  px: space.paddingX,
-  pb: space.paddingBottom,
-  pl: space.paddingLeft,
-  ps: space.paddingInlineStart,
-  paddingStart: space.paddingInlineStart,
-  pr: space.paddingRight,
-  pe: space.paddingInlineEnd,
-  paddingEnd: space.paddingInlineEnd
+Object.assign(space$1, {
+  m: space$1.margin,
+  mt: space$1.marginTop,
+  mr: space$1.marginRight,
+  me: space$1.marginInlineEnd,
+  marginEnd: space$1.marginInlineEnd,
+  mb: space$1.marginBottom,
+  ml: space$1.marginLeft,
+  ms: space$1.marginInlineStart,
+  marginStart: space$1.marginInlineStart,
+  mx: space$1.marginX,
+  my: space$1.marginY,
+  p: space$1.padding,
+  pt: space$1.paddingTop,
+  py: space$1.paddingY,
+  px: space$1.paddingX,
+  pb: space$1.paddingBottom,
+  pl: space$1.paddingLeft,
+  ps: space$1.paddingInlineStart,
+  paddingStart: space$1.paddingInlineStart,
+  pr: space$1.paddingRight,
+  pe: space$1.paddingInlineEnd,
+  paddingEnd: space$1.paddingInlineEnd
 });
 var textDecoration = {
   textDecorationColor: t.colors("textDecorationColor"),
@@ -10987,8 +10987,8 @@ var pseudoSelectors = {
   _light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]"
 };
 var pseudoPropNames = objectKeys(pseudoSelectors);
-var systemProps = mergeWith({}, background, border, color$1, flexbox, layout, filter$1, ring2, interactivity, grid, others, position, effect, space, scroll, typography$2, textDecoration, transform8, list$1, transition$1);
-Object.assign({}, space, layout, flexbox, grid, position);
+var systemProps = mergeWith({}, background, border, color$1, flexbox, layout, filter$1, ring2, interactivity, grid, others, position, effect, space$1, scroll, typography$2, textDecoration, transform8, list$1, transition$1);
+Object.assign({}, space$1, layout, flexbox, grid, position);
 var propNames = [].concat(objectKeys(systemProps), pseudoPropNames);
 var styleProps = _extends$c({}, systemProps, pseudoSelectors);
 var isStyleProp = function isStyleProp2(prop2) {
@@ -16334,7 +16334,7 @@ var radii$1 = {
   "3xl": "1.5rem",
   full: "9999px"
 };
-var shadows = {
+var shadows$1 = {
   xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
   sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
   base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
@@ -16406,7 +16406,7 @@ var foundations = _extends$a({
   colors: colors$1
 }, typography$1, {
   sizes: sizes$l,
-  shadows,
+  shadows: shadows$1,
   space: spacing,
   borders: borders$2,
   transition
@@ -26121,22 +26121,39 @@ const styles = {
     }
   })
 };
-const base = "solid 1px";
+const base = "solid .063rem";
 const borders = {
-  normal: `${base} ${colors.neutral.silverSand}`,
+  normal: `${base} ${colors.neutral.darkCharcoal}`,
   light: `${base} ${colors.neutral.platinum}`,
   active: `${base} ${colors.main.deepSkyBlue}`,
   success: `${base} ${colors.alert.jadeGreen}`,
-  error: `${base} ${colors.alert.red}`
+  error: `${base} ${colors.alert.red}`,
+  white: `solid .125rem ${colors.neutral.white}`
 };
 const radii = {
   small: ".25rem",
   big: ".5rem",
   rounded: "50%"
 };
+const shadows = {
+  sm: "0 .125rem .5rem 0 rgba(0,0,0,.20)",
+  md: "0 .25rem 1rem 0 rgba(0,0,0,.20)",
+  lg: "0 .5rem 2rem 0 rgba(0,0,0,.20)"
+};
+const space = {
+  xxs: ".25rem",
+  xs: ".5rem",
+  s: "1rem",
+  m: "1.5rem",
+  l: "2rem",
+  xl: "3rem",
+  xxl: "5rem"
+};
 const utils = {
   borders,
-  radii
+  radii,
+  shadows,
+  space
 };
 var _700 = "";
 var _500 = "";
@@ -26346,12 +26363,12 @@ var withAttrs = function(Component) {
     return React__default.createElement(Component, __assign({}, props));
   };
 };
-var ReactRipples = withAttrs(createRipples());
+var Ripples$1 = withAttrs(createRipples());
 function Ripples({
   children,
   color: color2 = "rgba(204,204,204,0.2)"
 }) {
-  return /* @__PURE__ */ jsx(ReactRipples, {
+  return /* @__PURE__ */ jsx(Ripples$1, {
     during: 1e3,
     color: color2,
     children: /* @__PURE__ */ jsx(Box, {
@@ -26366,15 +26383,18 @@ function Base({
   color: color2 = vars("colors-main-ziggurat"),
   m: m2 = "0",
   viewBox = "0 0 16 16",
-  children
+  children,
+  title
 }) {
-  return /* @__PURE__ */ jsx(Icon, {
+  return /* @__PURE__ */ jsxs(Icon, {
     w: w2,
     h,
     viewBox,
     color: color2,
     m: m2,
-    children
+    children: [/* @__PURE__ */ jsxs("title", {
+      children: ["icon", title && `-${title}`]
+    }), children]
   });
 }
 function AlertInfo(props) {
@@ -26486,11 +26506,56 @@ function CircularInformation(props) {
   }));
 }
 CircularInformation.displayName = "CircularInformation";
+function Loader({
+  fill = "#fff"
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: "loaderAsync",
+    "data-testid": "loaderAsync",
+    children: /* @__PURE__ */ jsxs("svg", {
+      id: "prefix__eXySq0EBKm11",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 38 20",
+      shapeRendering: "geometricPrecision",
+      textRendering: "geometricPrecision",
+      width: 38,
+      height: 20,
+      children: [/* @__PURE__ */ jsx("style", {
+        dangerouslySetInnerHTML: {
+          __html: "@keyframes eXySq0EBKm12_f_o{0%,33.333333%,to{fill-opacity:.4}66.666667%{fill-opacity:1;animation-timing-function:cubic-bezier(.42,0,.58,1)}}@keyframes eXySq0EBKm13_f_o{0%,66.666667%,to{fill-opacity:.4}33.333333%{fill-opacity:1;animation-timing-function:cubic-bezier(.42,0,.58,1)}}@keyframes eXySq0EBKm14_f_o{0%{fill-opacity:1;animation-timing-function:cubic-bezier(.42,0,.58,1)}33.333333%,66.666667%{fill-opacity:.4}to{fill-opacity:1}}"
+        }
+      }), /* @__PURE__ */ jsx("circle", {
+        r: 2.502,
+        transform: "translate(29.526 10)",
+        fill,
+        fillOpacity: 0.4,
+        style: {
+          animation: "eXySq0EBKm12_f_o 600ms linear infinite normal forwards"
+        }
+      }), /* @__PURE__ */ jsx("circle", {
+        r: 2.502,
+        transform: "translate(19 10)",
+        fill,
+        fillOpacity: 0.4,
+        style: {
+          animation: "eXySq0EBKm13_f_o 600ms linear infinite normal forwards"
+        }
+      }), /* @__PURE__ */ jsx("circle", {
+        r: 2.053,
+        transform: "matrix(1.21764 0 0 1.21764 8.562 10.002)",
+        fill,
+        style: {
+          animation: "eXySq0EBKm14_f_o 600ms linear infinite normal forwards"
+        }
+      })]
+    })
+  });
+}
 function Profile(props) {
   return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
     viewBox: "0 0 12 12",
-    w: ".625rem",
-    h: ".75rem",
+    w: "12px",
+    title: "profile",
     children: /* @__PURE__ */ jsx("path", {
       fill: "currentColor",
       d: "M5 6a3 3 0 100-6 3 3 0 000 6zM5 7c-3.375 0-5 2.106-5 3.333V11a1 1 0 001 1h8a1 1 0 001-1v-.667C10 9.106 8.375 7 5 7z"
@@ -26629,6 +26694,27 @@ function TinyAlertSuccess(props) {
   }));
 }
 TinyAlertSuccess.displayName = "TinyAlertSuccess";
+function Multimedia(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "12px",
+    viewBox: "0 0 14 14",
+    title: "multimedia",
+    children: [/* @__PURE__ */ jsx("path", {
+      d: "M3 6C4.65685 6 6 4.65685 6 3C6 1.34315 4.65685 0 3 0C1.34315 0 0 1.34315 0 3C0 4.65685 1.34315 6 3 6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M11 6C12.6569 6 14 4.65685 14 3C14 1.34315 12.6569 0 11 0C9.34315 0 8 1.34315 8 3C8 4.65685 9.34315 6 11 6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M3 14C4.65685 14 6 12.6569 6 11C6 9.34315 4.65685 8 3 8C1.34315 8 0 9.34315 0 11C0 12.6569 1.34315 14 3 14Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14Z",
+      fill: "currentColor"
+    })]
+  }));
+}
+Multimedia.displayName = "Multimedia";
 function TinyAlert({
   status,
   text,
@@ -26698,6 +26784,7 @@ function TinyAlert({
     gap: ".25rem",
     width: "fit-content",
     borderRadius: ".25rem",
+    className: "TinyAlert-Box",
     children: [alerts[status].icon && /* @__PURE__ */ jsx(Box, {
       lineHeight: 0,
       sx: {
@@ -26720,6 +26807,205 @@ function TinyAlert({
   });
 }
 TinyAlert.displayName = "TinyAlert";
+function Btn({
+  bg: bg2,
+  borderColorActive = [vars("colors-main-deepSkyBlue"), vars("colors-neutral-white")],
+  children,
+  color: color2 = vars("colors-neutral-white"),
+  disabled: disabled2 = false,
+  fillLoader = vars("colors-neutral-white"),
+  isFullWidth = false,
+  leftIcon,
+  m: m2 = "0",
+  isLoading = false,
+  onClick,
+  rightIcon,
+  rounded = false,
+  size: size2 = "regular",
+  touchDark = false
+}) {
+  var _a, _b, _c;
+  let showChildren = children != null ? children : null;
+  if (!children && !rightIcon && !leftIcon) {
+    showChildren = "Button";
+  }
+  const borderRadius = rounded ? "12px" : vars("radii-small");
+  const colorMain = (_a = bg2 == null ? void 0 : bg2.main) != null ? _a : vars("colors-main-deepSkyBlue");
+  const touchColor = touchDark ? "rgba(160, 160, 160, 0.2)" : "rgba(255, 255, 255, 0.2)";
+  const onlyIcon = !children && (rightIcon != null ? rightIcon : leftIcon) ? "onlyIcon" : "";
+  return /* @__PURE__ */ jsx(Box, {
+    margin: m2,
+    sx: {
+      ".react-ripples": {
+        borderRadius,
+        display: `${isFullWidth ? "grid" : "inline-flex!important"}`
+      }
+    },
+    children: /* @__PURE__ */ jsx(Ripples$1, {
+      color: touchColor,
+      children: /* @__PURE__ */ jsx(Button, {
+        fontWeight: "500",
+        fontSize: size2 === "regular" ? "medium" : "small",
+        bg: colorMain,
+        size: size2 === "regular" ? "md" : "sm",
+        borderRadius,
+        color: color2,
+        className: onlyIcon,
+        disabled: disabled2,
+        height: "auto",
+        iconSpacing: vars("space-xs"),
+        isActive: false,
+        isLoading,
+        leftIcon,
+        onClick: (e2) => {
+          !isLoading && !disabled2 && (onClick == null ? void 0 : onClick(e2));
+        },
+        paddingTop: size2 === "regular" ? vars("space-xs") : vars("space-xxs"),
+        paddingBottom: size2 === "regular" ? vars("space-xs") : vars("space-xxs"),
+        paddingLeft: size2 === "regular" ? vars("space-s") : vars("space-xs"),
+        paddingRight: size2 === "regular" ? vars("space-s") : vars("space-xs"),
+        position: "relative",
+        isFullWidth,
+        rightIcon,
+        spinner: /* @__PURE__ */ jsx(Loader, {
+          fill: fillLoader
+        }),
+        _active: {
+          bg: (_b = bg2 == null ? void 0 : bg2.main) != null ? _b : vars("colors-main-azureRadiance")
+        },
+        _disabled: {
+          opacity: "50%",
+          cursor: "not-allowed"
+        },
+        _focus: {
+          boxShadow: `inset 0 0 0 2px ${borderColorActive[0]}, inset 0 0 0 4px ${borderColorActive[1]}`
+        },
+        _hover: {
+          bg: (_c = bg2 == null ? void 0 : bg2.hover) != null ? _c : vars("colors-main-azureRadiance")
+        },
+        sx: {
+          "&[data-loading]": {
+            boxShadow: "none",
+            cursor: "wait"
+          },
+          "&.onlyIcon span": {
+            m: 0
+          },
+          span: {
+            h: "1rem"
+          }
+        },
+        children: showChildren
+      })
+    })
+  });
+}
+Btn.displayName = "Btn";
+function BtnPrimary({
+  children,
+  disabled: disabled2 = false,
+  isFullWidth = false,
+  leftIcon,
+  m: m2 = "0",
+  isLoading = false,
+  onClick,
+  rightIcon,
+  size: size2 = "regular"
+}) {
+  return /* @__PURE__ */ jsx(Btn, {
+    disabled: disabled2,
+    isFullWidth,
+    isLoading,
+    leftIcon,
+    m: m2,
+    onClick,
+    rightIcon,
+    size: size2,
+    children
+  });
+}
+BtnPrimary.displayName = "BtnPrimary";
+function BtnSecondary({
+  children,
+  disabled: disabled2 = false,
+  isFullWidth = false,
+  leftIcon,
+  m: m2 = "0",
+  isLoading = false,
+  onClick,
+  rightIcon,
+  size: size2 = "regular"
+}) {
+  return /* @__PURE__ */ jsx(Btn, {
+    bg: {
+      main: vars("colors-main-veryLightBlue"),
+      hover: vars("colors-main-linkWater")
+    },
+    fillLoader: vars("colors-main-deepSkyBlue"),
+    borderColorActive: [vars("colors-main-deepSkyBlue"), vars("colors-neutral-white")],
+    color: vars("colors-main-deepSkyBlue"),
+    disabled: disabled2,
+    isFullWidth,
+    isLoading,
+    leftIcon,
+    m: m2,
+    onClick,
+    rightIcon,
+    size: size2,
+    touchDark: true,
+    children
+  });
+}
+BtnSecondary.displayName = "BtnSecondary";
+function BtnTertiary({
+  children,
+  rightIcon = false,
+  withoutColor = false,
+  m: m2 = "0",
+  onClick
+}) {
+  const gray = vars("colors-neutral-gray");
+  const blue = vars("colors-main-deepSkyBlue");
+  const white = vars("colors-neutral-white");
+  const colorIcon = withoutColor ? gray : blue;
+  const rIcon = rightIcon ? /* @__PURE__ */ jsx(Multimedia, {
+    color: colorIcon
+  }) : void 0;
+  const lIcon = !rightIcon ? /* @__PURE__ */ jsx(Multimedia, {
+    color: colorIcon
+  }) : void 0;
+  return /* @__PURE__ */ jsx(Button, {
+    height: "24px",
+    background: white,
+    fontFamily: "Roboto",
+    fontStyle: "normal",
+    fontWeight: "500",
+    fontSize: "14px",
+    lineHeight: "16px",
+    textDecorationLine: "underline",
+    borderRadius: "12px",
+    color: gray,
+    rightIcon: rIcon,
+    leftIcon: lIcon,
+    m: m2,
+    onClick,
+    _hover: {
+      color: blue
+    },
+    _focus: {
+      boxShadow: `inset 0 0 0 2px ${blue}, inset 0 0 0 4px ${white}`
+    },
+    sx: {
+      "&:hover": {
+        "svg path": {
+          fill: blue
+        }
+      }
+    },
+    children
+  });
+}
+BtnTertiary.displayName = "BtnTertiary";
 const STUDENT = 4;
 function Header() {
   const {
@@ -27891,5 +28177,5 @@ function CourseList({
   });
 }
 CourseList.displayName = "CourseList";
-export { CourseList, Label, Progress, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, vars };
+export { Btn, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, Label, Progress, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map