@lightsparkdev/ui 0.0.0

package/dist/chunk-X6BI4STY.js

@@ -0,0 +1,23 @@
+import {
+  standardFocusOutline
+} from "./chunk-QR7BKTM6.js";
+
+// src/components/UnstyledButton.tsx
+import styled from "@emotion/styled";
+var UnstyledButton = styled.button`
+  ${standardFocusOutline}
+  font-family: ${({ theme }) => theme.typography.fontFamilies.main};
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  /* needed in Safari for some reason */
+  font-size: 1rem;
+  color: inherit;
+  font-weight: inherit;
+`;
+
+export {
+  UnstyledButton
+};

package/dist/chunk-XTEEADPV.js

@@ -0,0 +1,288 @@
+import {
+  useLiveRef
+} from "./chunk-NBCCPGA4.js";
+import {
+  Button
+} from "./chunk-4X3K3VRC.js";
+import {
+  overflowAutoWithoutScrollbars,
+  pxToRems
+} from "./chunk-LZHLWOXG.js";
+import {
+  UnstyledButton
+} from "./chunk-X6BI4STY.js";
+import {
+  Icon
+} from "./chunk-L7XFJWMY.js";
+import {
+  overlaySurface,
+  smContentInset,
+  standardContentInsetSmPx,
+  standardFocusOutline
+} from "./chunk-QR7BKTM6.js";
+import {
+  bp,
+  useBreakpoints
+} from "./chunk-JSGRNWSB.js";
+import {
+  z
+} from "./chunk-CLU2FRJZ.js";
+
+// src/components/Modal.tsx
+import styled from "@emotion/styled";
+import React, { Fragment, useEffect, useLayoutEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Modal({
+  visible,
+  title,
+  description,
+  children,
+  onClose,
+  onCancel,
+  cancelDisabled,
+  cancelHidden,
+  ghost,
+  onSubmit,
+  submitDisabled,
+  submitLoading,
+  submitText,
+  cancelText,
+  firstFocusRef,
+  nonDismissable = false,
+  autoFocus = true,
+  width
+}) {
+  const nodeRef = useRef(null);
+  const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
+  const ref = firstFocusRef || defaultFirstFocusRef;
+  const [nodeReady, setNodeReady] = React.useState(false);
+  const overlayRef = useRef(null);
+  const prevFocusedElement = useRef();
+  const modalContainerRef = useRef(null);
+  const bp2 = useBreakpoints();
+  const isSm = bp2.current("sm" /* sm */);
+  useEffect(() => {
+    prevFocusedElement.current = document.activeElement;
+    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;
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const handleOutsideClick = (event) => {
+      if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (visible && event.key === "Escape" && !nonDismissable) {
+        onClose();
+      }
+    };
+    if (visible) {
+      if (modalContainerRef.current) {
+        modalContainerRef.current.addEventListener("keydown", handleKeyDown);
+      }
+      if (overlayRef.current) {
+        overlayRef.current.addEventListener("click", handleOutsideClick);
+      }
+    } else {
+      if (modalContainerRef.current) {
+        modalContainerRef.current.removeEventListener("keydown", handleKeyDown);
+      }
+      if (overlayRef.current) {
+        overlayRef.current.removeEventListener("click", handleOutsideClick);
+      }
+    }
+    const containerRef = modalContainerRef.current;
+    const overlayRefVar = overlayRef.current;
+    return () => {
+      if (containerRef) {
+        containerRef.removeEventListener("keydown", handleKeyDown);
+      }
+      if (overlayRefVar) {
+        overlayRefVar.removeEventListener("click", handleOutsideClick);
+      }
+    };
+  }, [onClose, visible, nonDismissable]);
+  useLayoutEffect(() => {
+    if (visible) {
+      prevFocusedElement.current = document.activeElement;
+      if (typeof ref === "object" && (ref == null ? void 0 : ref.current) && autoFocus) {
+        ref.current.focus();
+      }
+    } else if (prevFocusedElement.current) {
+      prevFocusedElement.current.focus();
+    }
+  }, [visible, ref, autoFocus]);
+  function onClickCloseButton(event) {
+    event.stopPropagation();
+    onClose();
+  }
+  function onSubmitForm(e) {
+    e.preventDefault();
+    if (!submitDisabled && onSubmit) {
+      onSubmit();
+    }
+  }
+  function onClickCancel() {
+    if (onCancel) {
+      onCancel();
+    } else {
+      onClose();
+    }
+  }
+  const modalContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ModalOverlay, { ref: overlayRef }),
+    /* @__PURE__ */ jsx(
+      ModalContainer,
+      {
+        "aria-modal": true,
+        "aria-hidden": true,
+        tabIndex: -1,
+        role: "dialog",
+        ref: modalContainerRef,
+        children: /* @__PURE__ */ jsxs(ModalContent, { width, ghost, children: [
+          !firstFocusRef && /* @__PURE__ */ jsx(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+          !(nonDismissable || ghost) && /* @__PURE__ */ jsx(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx(Icon, { name: "Close", width: 9 }) }),
+          /* @__PURE__ */ jsxs(ModalContentInner, { ghost, children: [
+            title ? /* @__PURE__ */ jsx("h4", { children: title }) : null,
+            description ? /* @__PURE__ */ jsx(Description, { children: description }) : null,
+            /* @__PURE__ */ jsx("div", { children }),
+            onSubmit ? /* @__PURE__ */ jsxs(ModalButtonRow, { children: [
+              !isSm && !cancelHidden && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  disabled: cancelDisabled,
+                  onClick: onClickCancel,
+                  text: cancelText != null ? cancelText : "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  disabled: submitDisabled,
+                  primary: true,
+                  text: submitText != null ? submitText : "Continue",
+                  loading: submitLoading,
+                  type: "submit"
+                }
+              ),
+              isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: "Cancel" })
+            ] }) : null
+          ] })
+        ] })
+      }
+    )
+  ] });
+  return visible && nodeReady && nodeRef.current ? ReactDOM.createPortal(
+    onSubmit ? /* @__PURE__ */ jsx("form", { onSubmit: onSubmitForm, children: modalContent }) : modalContent,
+    nodeRef.current
+  ) : null;
+}
+var DefaultFocusTarget = styled(UnstyledButton)`
+  position: absolute;
+  top: -30px;
+  width: 0;
+  height: 0;
+`;
+var ModalOverlay = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: ${z.modalOverlay};
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+`;
+var ModalContainer = styled.div`
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: ${z.modalContainer};
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${({ theme }) => theme.text};
+  padding-top: ${standardContentInsetSmPx}px;
+`;
+var contentTopMarginPx = 24;
+var Description = styled.div`
+  color: ${({ theme }) => theme.mcNeutral};
+  margin-top: 4px;
+  & + * {
+    margin-top: ${contentTopMarginPx}px;
+  }
+`;
+var ModalButtonRow = styled.div`
+  margin-top: 32px;
+  ${bp.minSm(`display: flex;`)}
+
+  button {
+    width: 50%;
+    ${bp.sm(`
+      width: 100%;
+    `)}
+  }
+
+  button:last-of-type {
+    ${bp.sm(`
+      margin-top: 16px;
+    `)}
+    ${bp.minSm(`
+      margin-left: 10px;
+    `)}
+  }
+`;
+var ModalContent = styled.div`
+  ${overflowAutoWithoutScrollbars}
+  ${smContentInset}
+  ${(props) => props.ghost ? "" : overlaySurface}
+  pointer-events: auto;
+  width: ${(props) => props.width || 430}px;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 16px;
+  position: absolute;
+  ${(props) => props.ghost ? "" : "padding: 16px 16px 40px;"}
+
+  h4 {
+    margin: 0;
+    font-weight: 800;
+    font-size: ${pxToRems(21)};
+    & + *:not(${Description}) {
+      margin-top: ${contentTopMarginPx}px;
+    }
+  }
+`;
+var CloseButton = styled(UnstyledButton)`
+  ${standardFocusOutline}
+  width: 24px;
+  height: 24px;
+`;
+var ModalContentInner = styled.div`
+  ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
+  ${(props) => props.ghost ? "" : `${bp.sm(`
+    padding-left: 10px;
+    padding-right: 10px;
+  `)}`}
+`;
+
+export {
+  Modal
+};

package/dist/chunk-Y4RJ7WS4.js

@@ -0,0 +1,38 @@
+import {
+  CopyToClipboardButton
+} from "./chunk-K7MPHJNG.js";
+
+// src/components/SecretContainer.tsx
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function SecretContainer(props) {
+  return props.secret ? /* @__PURE__ */ jsxs(StyledSecretContainer, { hasSecret: true, success: props.success, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          flex: 1
+        },
+        children: props.secret
+      }
+    ),
+    /* @__PURE__ */ jsx(CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
+  ] }) : /* @__PURE__ */ jsx(StyledSecretContainer, { hasSecret: false, children: "There are no tokens associated with this account" });
+}
+var StyledSecretContainer = styled.div`
+  background-color: ${({ theme, hasSecret, success }) => hasSecret ? success ? theme.success : theme.c05Neutral : theme.bg};
+  border-radius: 8px;
+  padding: 18px 20px;
+  color: ${({ theme, success }) => success ? theme.hcNeutral : theme.text};
+  border: solid 1px
+    ${({ theme, hasSecret }) => hasSecret ? theme.c05Neutral : theme.c1Neutral};
+  display: flex;
+  gap: 4px;
+`;
+
+export {
+  SecretContainer
+};