@lightsparkdev/ui 1.0.6 → 1.0.7

package/dist/chunk-VYCK3QBC.cjs

@@ -0,0 +1,366 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkZJTRXOA5cjs = require('./chunk-ZJTRXOA5.cjs');
+
+
+var _chunkUEG2PUK7cjs = require('./chunk-UEG2PUK7.cjs');
+
+
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+
+
+
+
+var _chunkSODYHHOBcjs = require('./chunk-SODYHHOB.cjs');
+
+
+var _chunkCB3IFR2Xcjs = require('./chunk-CB3IFR2X.cjs');
+
+
+var _chunkMNAZ4BDQcjs = require('./chunk-MNAZ4BDQ.cjs');
+
+
+var _chunkPDZ23BEDcjs = require('./chunk-PDZ23BED.cjs');
+
+
+var _chunkKSKKC6C2cjs = require('./chunk-KSKKC6C2.cjs');
+
+
+
+var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+
+// src/components/Toasts.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _lodashes = require('lodash-es');
+var _react = require('react');
+var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var firstDur = 0.3;
+function Toasts({
+  queue,
+  onHide,
+  fromTop = 29,
+  stackDir = "above",
+  maxVisible = 3,
+  removeExpiredAndNotVisible = true,
+  dedupeConsecutive = true
+}) {
+  const queuedToastIds = _react.useRef.call(void 0, /* @__PURE__ */ new Set());
+  const prevToastQueue = _react.useRef.call(void 0, []);
+  const [toastQueue, setToastQueue] = _react.useState.call(void 0, []);
+  const autoHideTimeoutRef = _react.useRef.call(void 0, null);
+  const hidingTimeoutRefs = _react.useRef.call(void 0, {});
+  const nodeRef = _react.useRef.call(void 0, null);
+  const [nodeReady, setNodeReady] = _react.useState.call(void 0, false);
+  const hideToast = _react.useCallback.call(void 0, 
+    (id) => {
+      setToastQueue((currentToastQueue) => {
+        const hideToastIndex = currentToastQueue.findIndex((t) => t.id === id);
+        const newToastQueue = currentToastQueue.map((toast, i) => {
+          if (i === hideToastIndex) {
+            return _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, toast), {
+              isActive: false,
+              isHiding: true
+            });
+          }
+          return toast;
+        });
+        return newToastQueue;
+      });
+      const hidingTimeoutRef = hidingTimeoutRefs.current[id];
+      if (hidingTimeoutRef) {
+        clearTimeout(hidingTimeoutRef);
+      }
+      hidingTimeoutRefs.current[id] = setTimeout(() => {
+        setToastQueue((currentToastQueue) => {
+          const newToastQueue = currentToastQueue.filter((t) => t.id !== id);
+          setTimeout(() => onHide(id), 0);
+          hidingTimeoutRefs.current[id] = null;
+          return newToastQueue;
+        });
+      }, firstDur * 1e3);
+      if (autoHideTimeoutRef.current) {
+        clearTimeout(autoHideTimeoutRef.current);
+        autoHideTimeoutRef.current = null;
+      }
+    },
+    [onHide, setToastQueue]
+  );
+  _react.useEffect.call(void 0, () => {
+    const newToastQueueArgs = queue.reduce((acc, toast) => {
+      if (toast.expires < Date.now()) {
+        onHide(toast.id);
+        return acc;
+      }
+      if (!queuedToastIds.current.has(toast.id)) {
+        return [...acc, toast];
+      }
+      return acc;
+    }, []);
+    if (newToastQueueArgs.length) {
+      const newToasts = newToastQueueArgs.reduce((acc, toast) => {
+        if (dedupeConsecutive && acc.length) {
+          const lastToast = acc[acc.length - 1];
+          if (_lodashes.isEqual.call(void 0, toast.text, lastToast.text)) {
+            return acc;
+          }
+        }
+        queuedToastIds.current.add(toast.id);
+        return [
+          ...acc,
+          _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, toast), {
+            isActive: true,
+            isHiding: false
+          })
+        ];
+      }, []);
+      setToastQueue((currentToastQueue) => {
+        const currentToast2 = currentToastQueue[currentToastQueue.length - 1];
+        if (dedupeConsecutive && currentToast2 && _lodashes.isEqual.call(void 0, newToasts[0].text, currentToast2.text)) {
+          return currentToastQueue;
+        }
+        return [...currentToastQueue, ...newToasts];
+      });
+    }
+  }, [queue, hideToast, onHide, dedupeConsecutive]);
+  _react.useEffect.call(void 0, () => {
+    if (prevToastQueue.current.length !== toastQueue.length) {
+      const currentToast2 = toastQueue[toastQueue.length - 1];
+      if (currentToast2 && !currentToast2.isHiding) {
+        if (autoHideTimeoutRef.current) {
+          clearTimeout(autoHideTimeoutRef.current);
+          autoHideTimeoutRef.current = null;
+        }
+        if (currentToast2.duration) {
+          autoHideTimeoutRef.current = setTimeout(() => {
+            hideToast(currentToast2.id);
+          }, currentToast2.duration);
+        }
+      }
+      prevToastQueue.current = toastQueue;
+    }
+  }, [toastQueue, hideToast, onHide]);
+  _react.useEffect.call(void 0, () => {
+    if (!nodeRef.current) {
+      nodeRef.current = document.createElement("div");
+      document.body.appendChild(nodeRef.current);
+    }
+    setNodeReady(true);
+    return () => {
+      if (nodeRef.current) {
+        document.body.removeChild(nodeRef.current);
+        nodeRef.current = null;
+      }
+    };
+  }, []);
+  const currentToastIndex = toastQueue.length - 1;
+  _react.useEffect.call(void 0, () => {
+    if (removeExpiredAndNotVisible) {
+      setToastQueue((currentToastQueue) => {
+        const newToastQueue = currentToastQueue.filter((toast, i) => {
+          const fromCurrent = i === currentToastIndex ? 0 : currentToastIndex - i;
+          return toast.expires > Date.now() || fromCurrent < maxVisible;
+        });
+        return newToastQueue;
+      });
+    }
+  }, [currentToastIndex, maxVisible, removeExpiredAndNotVisible]);
+  const currentToast = toastQueue[currentToastIndex];
+  return nodeReady ? toastQueue.map((toast, i) => {
+    if (!nodeRef.current) {
+      return null;
+    }
+    const fromCurrent = i === currentToastIndex ? 0 : currentToastIndex - i;
+    const movingToCurrent = currentToast.isHiding && i === currentToastIndex - 1;
+    const hidingFromCurrent = currentToast.isHiding ? fromCurrent - 1 : fromCurrent;
+    const textNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: toast.text ? _chunkZJTRXOA5cjs.toReactNodes.call(void 0, toast.text) : null });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _reactdom2.default.createPortal(
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        StyledToast,
+        {
+          isActive: toast.isActive,
+          isHiding: toast.isHiding,
+          isVisible: fromCurrent < maxVisible,
+          duration: toast.duration,
+          fromTop: Math.floor(fromTop),
+          isCurrent: i === currentToastIndex,
+          fromCurrent: hidingFromCurrent,
+          currentToastHiding: currentToast.isHiding,
+          maxVisible,
+          activeCount: Math.min(
+            toastQueue.length - (currentToast.isHiding ? 1 : 0),
+            maxVisible
+          ),
+          stackDir: stackDir === "above" ? -1 : 1,
+          movingToCurrent,
+          children: [
+            textNode,
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkUEG2PUK7cjs.UnstyledButton,
+              {
+                css: _chunkSODYHHOBcjs.extend.call(void 0, _chunkSODYHHOBcjs.flexCenter, {
+                  position: "absolute",
+                  right: "5px",
+                  top: "-1px",
+                  height: "50px",
+                  width: "50px",
+                  outlineColor: `${_chunkKSKKC6C2cjs.colors.white} !important`
+                }),
+                onClick: () => hideToast(toast.id),
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCB3IFR2Xcjs.Icon, { name: "Close", width: 9 })
+              }
+            )
+          ]
+        }
+      ),
+      nodeRef.current
+    ) }, toast.id);
+  }) : null;
+}
+var width = 400;
+var beginTopPx = -100;
+var beginHeightPx = 50;
+var minScale = 0.95;
+var StyledToast = _styled2.default.div`
+  position: fixed;
+  z-index: ${_chunkZU72XWNEcjs.z.toast};
+  line-height: ${_chunkSODYHHOBcjs.pxToRems.call(void 0, 16)};
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  font-weight: 500;
+  background-color: ${({ isCurrent, movingToCurrent }) => isCurrent || movingToCurrent ? _chunkKSKKC6C2cjs.colors.blue43 : _chunkPDZ23BEDcjs.themeOr.call(void 0, "#2A50B2", _chunkKSKKC6C2cjs.colors.blue43)};
+  color: rgba(255, 255, 255, 0);
+  padding: 16px 24px;
+  ${({ duration }) => !duration && "padding-right: 50px;"}
+  ${({ isVisible, isCurrent, movingToCurrent, stackDir }) => {
+  if (!isVisible) {
+    return "";
+  }
+  const sharpOverlayShadow = `0 ${1 * stackDir}px 0px 0px rgba(0, 0, 0, 0.5)`;
+  return isCurrent || movingToCurrent ? `box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08), ${sharpOverlayShadow};` : `box-shadow: ${sharpOverlayShadow};`;
+}}
+  left: 50%;
+  transform: translateX(-50%);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: calc(100% - ${_chunkMNAZ4BDQcjs.standardContentInset.smPx * 2}px);
+
+  max-height: ${beginHeightPx}px;
+  width: 0px;
+  border-radius: 3rem;
+  transition:
+    width 0.25s ${firstDur}s cubic-bezier(0.41, 0.52, 0.38, 1.33),
+    border-radius 0.1s ${firstDur}s linear,
+    color 0.1s ${firstDur * 2.1}s linear,
+    opacity 0.1s linear,
+    transform 0.25s cubic-bezier(0.41, 0.52, 0.38, 1.33),
+    background-color 0.3s linear,
+    max-height 0.2s 0.5s linear;
+  top: ${beginTopPx}px;
+
+  a {
+    text-decoration: underline;
+  }
+
+  button {
+    opacity: ${({ duration }) => duration ? "0" : "1"};
+    transition: opacity 0.1s linear;
+  }
+  &:hover {
+    ${({ duration }) => duration ? "button { opacity: 1; }" : ""}
+  }
+
+  ${({
+  isVisible,
+  fromCurrent,
+  movingToCurrent,
+  activeCount,
+  stackDir,
+  maxVisible,
+  currentToastHiding
+}) => {
+  if (fromCurrent && !movingToCurrent) {
+    if (!isVisible) {
+      fromCurrent = maxVisible - 1;
+    }
+    const secondToastTranslateY = 7;
+    const translateY = stackDir * secondToastTranslateY * Math.pow(fromCurrent, 0.75);
+    const scale = Math.max(
+      1 - (1 - minScale) / activeCount * fromCurrent,
+      0
+    );
+    return `transform: translateX(-50%) translateY(${translateY}px) scale(${scale});`;
+  }
+  return "";
+}}
+
+  ${({ fromTop }) => `
+    /* Animations with different values still interfere with each other if they have the same name.
+       Append the variable value to get a unique name for each animation: */
+    @keyframes slideOut-${fromTop} {
+      0% {
+        top: ${fromTop}px;
+      }
+      100% {
+        top: ${beginTopPx}px;
+      }
+    }
+
+    @keyframes slideIn-${fromTop} {
+      0% {
+        top: ${beginTopPx}px;
+      }
+      100% {
+        top: ${fromTop}px;
+      }
+    }
+  `}
+
+  &:before {
+    ${({ duration }) => duration ? 'content: "";' : ""}
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    background-color: rgba(0, 0, 0, 0.1);
+    z-index: -1;
+    // switch back to minimal state instantly so it's ready for the next notification:
+  }
+
+  ${({ duration }) => duration ? `
+        @keyframes progressBar-${duration} {
+          0% {
+            width: 0%;
+          }
+          100% {
+            width: 100%;
+          }
+        }
+      ` : ""}
+
+  ${({ isActive, duration, isHiding, fromTop, isCurrent }) => isActive ? `
+      width: ${width}px;
+      top: ${fromTop}px;
+      border-radius: 1.3rem;
+      animation: ${firstDur}s cubic-bezier(.25,.15,.59,1.28) 0s slideIn-${fromTop};
+      color: rgba(255, 255, 255, 1);
+      max-height: 100px;
+      &:before {
+        ${isCurrent && duration ? `animation: progressBar-${duration} ${duration / 1e3}s linear;` : ""};
+      }
+      ` : `
+      ${isHiding ? `
+          animation: ${firstDur}s cubic-bezier(.57,-0.43,.78,.81) 0s slideOut-${fromTop};
+          &:before {
+            width: 100%;
+          }
+          ` : ""}
+      top: ${beginTopPx}px;
+    `}
+`;
+
+
+
+exports.Toasts = Toasts;

package/dist/{chunk-QBRCVOJ4.js → chunk-W42LDOH4.js}

@@ -1,9 +1,9 @@
 import {
   Button
-} from "./chunk-NK7WH3TK.js";
+} from "./chunk-ZGPNVPST.js";
 import {
   UnstyledButton
-} from "./chunk-TN5UPDZG.js";
+} from "./chunk-H47HIU2F.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
@@ -12,13 +12,13 @@ import {
 } from "./chunk-E5DUKMCU.js";
 import {
   Icon
-} from "./chunk-LAGOF7IU.js";
+} from "./chunk-UACBVBBE.js";
 import {
   standardFocusOutline
-} from "./chunk-YG5BANJH.js";
+} from "./chunk-GMM3LRXY.js";
 import {
   colors
-} from "./chunk-KPAVY3UH.js";
+} from "./chunk-REL56P3K.js";
 
 // src/components/Drawer.tsx
 import styled from "@emotion/styled";
@@ -154,7 +154,7 @@ var DrawerContainer = styled.div`
   flex-direction: column;
   padding: ${Spacing.px["6xl"]} ${Spacing.px.xl} ${Spacing.px["2xl"]}
     ${Spacing.px.xl};
-  overflow-y: scroll;
+  overflow-y: auto;
 
   // Only smooth transition when not grabbing, otherwise dragging will feel very laggy
   ${(props) => props.grabbing && props.isOpen ? "" : "transition: transform 0.3s ease-in-out;"};

package/dist/{chunk-7UBU5MKY.js → chunk-W7XPZYSY.js}

@@ -7,7 +7,6 @@ function FlutterTwoTone() {
     "svg",
     {
       id: `logo_vector-${id}`,
-      "data-name": "logo vector",
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 300 371.14",
       width: "100%",

package/dist/chunk-WHCKM6E5.cjs

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/PersonCircle.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function PersonCircle() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 33 33",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M16.3721 0.248047C7.46702 0.248047 0.248047 7.46702 0.248047 16.3721C0.248047 21.0432 2.2344 25.2505 5.40849 28.1952C8.28546 30.8642 12.1382 32.4961 16.3721 32.4961C20.6059 32.4961 24.4588 30.8642 27.3356 28.1952C30.5098 25.2505 32.4961 21.0432 32.4961 16.3721C32.4961 7.46702 25.2771 0.248047 16.3721 0.248047ZM6.65904 26.0413C8.79248 23.1022 12.1978 21.2093 16.3721 21.2093C20.5464 21.2093 23.9517 23.1022 26.085 26.0413C23.6032 28.5344 20.1678 30.0775 16.3721 30.0775C12.5763 30.0775 9.14095 28.5344 6.65904 26.0413ZM21.2093 13.1473C21.2093 15.8189 19.0437 17.9845 16.3721 17.9845C13.7005 17.9845 11.5349 15.8189 11.5349 13.1473C11.5349 10.4758 13.7005 8.31006 16.3721 8.31006C19.0437 8.31006 21.2093 10.4758 21.2093 13.1473Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M6.49756 25.9241L6.39773 26.0617L6.51763 26.1821C9.03545 28.7113 12.5211 30.277 16.3721 30.277C20.223 30.277 23.7087 28.7113 26.2264 26.1821L26.3463 26.0617L26.2465 25.9241C24.076 22.9339 20.611 21.0098 16.3721 21.0098C12.1332 21.0098 8.66814 22.9339 6.49756 25.9241ZM27.1999 28.0489L27.3356 28.1952L27.1999 28.0489C24.3585 30.685 20.5536 32.2966 16.3721 32.2966C12.1905 32.2966 8.38573 30.685 5.5442 28.0489C2.4091 25.1403 0.447582 20.9854 0.447582 16.3721C0.447582 7.57722 7.57722 0.447582 16.3721 0.447582C25.1669 0.447582 32.2966 7.57722 32.2966 16.3721C32.2966 20.9854 30.3351 25.1403 27.1999 28.0489ZM16.3721 18.184C19.1539 18.184 21.4088 15.9291 21.4088 13.1473C21.4088 10.3656 19.1539 8.11053 16.3721 8.11053C13.5903 8.11053 11.3353 10.3656 11.3353 13.1473C11.3353 15.9291 13.5903 18.184 16.3721 18.184Z",
+            stroke: "white",
+            strokeOpacity: "0.05",
+            strokeWidth: "0.39907"
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+
+exports.PersonCircle = PersonCircle;