@cuemath/leap 3.2.17-as2 → 3.2.17-as3

package/dist/features/notification/notification.js

@@ -0,0 +1,118 @@
+import { jsxs as w, jsx as l } from "react/jsx-runtime";
+import { useEffect as A } from "react";
+import x, { keyframes as I, css as T } from "styled-components";
+import W from "../../assets/line-icons/icons/cross2.js";
+import k from "../ui/text/text.js";
+const C = ({ position: r, verticalDist: o }) => I`
+  ${(r === "top-right" || r === "top-left") && `
+    0% {
+        top: 0;
+    }
+    100% {
+        top: ${o}px;
+    }
+  `};
+  ${(r === "bottom-left" || r === "bottom-right") && `
+    0% {
+        bottom: 0;
+    }
+    100% {
+        bottom: ${o}px;
+    }
+  `};
+`, E = ({ position: r, verticalDist: o, horizontalDist: t }) => T`
+  ${r === "top-right" && `
+    top: ${o}px;
+    right: ${t}px;
+  `};
+  ${r === "top-left" && `
+	top: ${o}px;
+    left: ${t}px;
+  `};
+  ${r === "bottom-left" && `
+    bottom: ${o}px;
+    left: ${t}px;
+  `};
+  ${r === "bottom-right" && `
+    bottom: ${o}px;
+    right: ${t}px;
+  `};
+`, e = x.div`
+  position: fixed;
+  width: 310px;
+  padding: ${({ gap: r, gutter: o }) => `${r}px ${o}px`};
+  box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+  ${E};
+  animation: ${C} 0.5s ease-in;
+  z-index: 105;
+  background: ${({ notificationTheme: r, theme: o }) => {
+  var t, p;
+  return r === "white" ? (t = o == null ? void 0 : o.colors) == null ? void 0 : t.WHITE : (p = o == null ? void 0 : o.colors) == null ? void 0 : p.BLACK;
+}};
+  color: ${({ notificationTheme: r, theme: o }) => {
+  var t, p;
+  return r === "white" ? (t = o == null ? void 0 : o.colors) == null ? void 0 : t.BLACK : (p = o == null ? void 0 : o.colors) == null ? void 0 : p.WHITE;
+}};
+`, y = x.div`
+  width: 48px;
+  height: 48px;
+  background: ${({ src: r }) => `url(${r})`};
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+  position: absolute;
+  bottom: 88%;
+`, B = x.div`
+  position: absolute;
+  top: -40px;
+  right: 12px;
+  cursor: pointer;
+`, H = x(k)`
+  white-space: pre-wrap;
+`, K = ({
+  avatarUrl: r = null,
+  Component: o = null,
+  componentProps: t = {},
+  duration: p = null,
+  gap: n = 24,
+  gutter: d = 16,
+  hideNotification: s = () => null,
+  horizontalDist: u = 50,
+  notificationTheme: $ = "black",
+  position: b = "bottom-right",
+  showCloseIcon: g = !1,
+  text: f = null,
+  verticalDist: i = 60,
+  visible: c = !1
+}) => (A(() => {
+  if (p && c) {
+    const a = setTimeout(() => {
+      s();
+    }, p * 1e3);
+    return () => {
+      clearTimeout(a);
+    };
+  }
+  return () => {
+  };
+}, [p, s, c]), c ? /* @__PURE__ */ w(
+  e,
+  {
+    gap: n,
+    gutter: d,
+    horizontalDist: u,
+    notificationTheme: $,
+    position: b,
+    verticalDist: i,
+    children: [
+      g && /* @__PURE__ */ l(B, { onClick: () => s(), children: /* @__PURE__ */ l(W, { color: $ === "white" ? "WHITE" : "BLACK" }) }),
+      r && /* @__PURE__ */ l(y, { src: r }),
+      f && /* @__PURE__ */ l(H, { $renderAs: "ub3", $color: $ === "white" ? "BLACK" : "WHITE", children: f }),
+      o && /* @__PURE__ */ l(o, { ...t })
+    ]
+  }
+) : null), q = K;
+export {
+  q as default
+};
+//# sourceMappingURL=notification.js.map

package/dist/features/notification/notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.js","sources":["../../../src/features/notification/notification.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport styled, { keyframes, css } from 'styled-components';\n\nimport Cross2Icon from '../../assets/line-icons/icons/cross2';\nimport Text from '../ui/text/text';\n\ntype Position = 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';\ntype NotificationTheme = 'white' | 'black';\n\ninterface SlideProps {\n  position: Position;\n  verticalDist: number;\n}\n\ninterface PositionProps {\n  position: Position;\n  verticalDist: number;\n  horizontalDist: number;\n}\n\ninterface WrapperProps extends PositionProps {\n  gap: number;\n  gutter: number;\n  notificationTheme: NotificationTheme;\n}\n\ninterface AvatarWrapperProps {\n  src: string;\n}\n\ninterface NotificationProps {\n  avatarUrl?: string | null;\n  Component?: React.ComponentType<Record<string, unknown>> | null;\n  componentProps?: Record<string, unknown>;\n  duration?: number | null;\n  gap?: number;\n  gutter?: number;\n  hideNotification?: () => void;\n  horizontalDist?: number;\n  notificationTheme?: NotificationTheme;\n  position?: Position;\n  showCloseIcon?: boolean;\n  text?: string | null;\n  verticalDist?: number;\n  visible?: boolean;\n}\n\nconst slide = ({ position, verticalDist }: SlideProps) => keyframes`\n  ${\n    (position === 'top-right' || position === 'top-left') &&\n    `\n    0% {\n        top: 0;\n    }\n    100% {\n        top: ${verticalDist}px;\n    }\n  `\n  };\n  ${\n    (position === 'bottom-left' || position === 'bottom-right') &&\n    `\n    0% {\n        bottom: 0;\n    }\n    100% {\n        bottom: ${verticalDist}px;\n    }\n  `\n  };\n`;\n\nconst notificationPostion = ({ position, verticalDist, horizontalDist }: PositionProps) => css`\n  ${position === 'top-right' &&\n  `\n    top: ${verticalDist}px;\n    right: ${horizontalDist}px;\n  `};\n  ${position === 'top-left' &&\n  `\n\ttop: ${verticalDist}px;\n    left: ${horizontalDist}px;\n  `};\n  ${position === 'bottom-left' &&\n  `\n    bottom: ${verticalDist}px;\n    left: ${horizontalDist}px;\n  `};\n  ${position === 'bottom-right' &&\n  `\n    bottom: ${verticalDist}px;\n    right: ${horizontalDist}px;\n  `};\n`;\n\nconst Wrapper = styled.div<WrapperProps>`\n  position: fixed;\n  width: 310px;\n  padding: ${({ gap, gutter }) => `${gap}px ${gutter}px`};\n  box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.05);\n  border-radius: 16px;\n  ${notificationPostion};\n  animation: ${slide} 0.5s ease-in;\n  z-index: 105;\n  background: ${({ notificationTheme, theme }) =>\n    notificationTheme === 'white' ? theme?.colors?.WHITE : theme?.colors?.BLACK};\n  color: ${({ notificationTheme, theme }) =>\n    notificationTheme === 'white' ? theme?.colors?.BLACK : theme?.colors?.WHITE};\n`;\n\nconst AvatarWrapper = styled.div<AvatarWrapperProps>`\n  width: 48px;\n  height: 48px;\n  background: ${({ src }) => `url(${src})`};\n  border-radius: 50%;\n  border: 2px solid #ffffff;\n  position: absolute;\n  bottom: 88%;\n`;\n\nconst StyledIcon = styled.div`\n  position: absolute;\n  top: -40px;\n  right: 12px;\n  cursor: pointer;\n`;\n\nconst StyledText = styled(Text)`\n  white-space: pre-wrap;\n`;\n\nconst Notification: React.FC<NotificationProps> = ({\n  avatarUrl = null,\n  Component = null,\n  componentProps = {},\n  duration = null,\n  gap = 24,\n  gutter = 16,\n  hideNotification = () => null,\n  horizontalDist = 50,\n  notificationTheme = 'black',\n  position = 'bottom-right',\n  showCloseIcon = false,\n  text = null,\n  verticalDist = 60,\n  visible = false,\n}) => {\n  useEffect(() => {\n    if (duration && visible) {\n      const countdown = setTimeout(() => {\n        hideNotification();\n      }, duration * 1000);\n\n      return () => {\n        clearTimeout(countdown);\n      };\n    }\n\n    return () => {};\n  }, [duration, hideNotification, visible]);\n\n  if (!visible) return null;\n\n  return (\n    <Wrapper\n      gap={gap}\n      gutter={gutter}\n      horizontalDist={horizontalDist}\n      notificationTheme={notificationTheme}\n      position={position}\n      verticalDist={verticalDist}\n    >\n      {showCloseIcon && (\n        <StyledIcon onClick={() => hideNotification()}>\n          <Cross2Icon color={notificationTheme === 'white' ? 'WHITE' : 'BLACK'} />\n        </StyledIcon>\n      )}\n      {avatarUrl && <AvatarWrapper src={avatarUrl} />}\n      {text && (\n        <StyledText $renderAs=\"ub3\" $color={notificationTheme === 'white' ? 'BLACK' : 'WHITE'}>\n          {text}\n        </StyledText>\n      )}\n      {Component && <Component {...componentProps} />}\n    </Wrapper>\n  );\n};\n\nexport default Notification;\n"],"names":["slide","position","verticalDist","keyframes","notificationPostion","horizontalDist","css","Wrapper","styled","gap","gutter","notificationTheme","theme","_a","_b","AvatarWrapper","src","StyledIcon","StyledText","Text","Notification","avatarUrl","Component","componentProps","duration","hideNotification","showCloseIcon","text","visible","useEffect","countdown","jsxs","jsx","Cross2Icon","Notification$1"],"mappings":"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"}

package/dist/index.d.ts

@@ -4539,24 +4539,28 @@ export declare enum NODE_TYPES {
     'PUZZLE_CARD' = "PUZZLE_CARD"
 }
 
-declare function Notification_2({ avatarUrl, Component, componentProps, duration, gap, gutter, hideNotification, horizontalDist, notificationTheme, position, showCloseIcon, text, verticalDist, visible, }: {
-    avatarUrl?: null | undefined;
-    Component?: null | undefined;
-    componentProps?: {} | undefined;
-    duration?: null | undefined;
-    gap?: number | undefined;
-    gutter?: number | undefined;
-    hideNotification: any;
-    horizontalDist?: number | undefined;
-    notificationTheme?: string | undefined;
-    position?: string | undefined;
-    showCloseIcon?: boolean | undefined;
-    text?: null | undefined;
-    verticalDist?: number | undefined;
-    visible?: boolean | undefined;
-}): JSX.Element | null;
+declare const Notification_2: React.FC<NotificationProps>;
 export { Notification_2 as Notification }
 
+declare interface NotificationProps {
+    avatarUrl?: string | null;
+    Component?: React.ComponentType<Record<string, unknown>> | null;
+    componentProps?: Record<string, unknown>;
+    duration?: number | null;
+    gap?: number;
+    gutter?: number;
+    hideNotification?: () => void;
+    horizontalDist?: number;
+    notificationTheme?: NotificationTheme;
+    position?: Position;
+    showCloseIcon?: boolean;
+    text?: string | null;
+    verticalDist?: number;
+    visible?: boolean;
+}
+
+declare type NotificationTheme = 'white' | 'black';
+
 export declare const Nudge: React_2.NamedExoticComponent<INudgeProps>;
 
 export declare const NumRangeInput: React.FC<NumRangeInputProps>;
@@ -4635,6 +4639,8 @@ export declare const PlusIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const PointerIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
+declare type Position = 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
+
 export declare const PostGameStats: NamedExoticComponent<IPostGameStatsProps & RefAttributes<IPostGameStatsRef>>;
 
 export declare const PracticeIcon: React.FC<React.SVGProps<SVGSVGElement>>;