@lightsparkdev/ui 0.0.12 → 1.0.0

package/dist/chunk-57MJ26OG.js

@@ -0,0 +1,27 @@
+// src/icons/CentralArrowShareRight.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function CentralArrowShareRight() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "22",
+      height: "18",
+      viewBox: "0 0 22 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M21 9L11.5 0.75V5.5C3 5.5 0.75 8.75 0.75 17.25C2.25 14.25 3 12.5 11.5 12.5V17.25L21 9Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  CentralArrowShareRight
+};

package/dist/chunk-5EFICY5Y.js

@@ -0,0 +1,46 @@
+// src/icons/PiggyBank.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function PiggyBank() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 21 19",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4.2852 2.80323L4.28378 2.81174C4.16768 3.50397 4.04904 4.21137 3.96368 4.82785C3.3302 5.5199 2.84097 6.34727 2.54459 7.26219H1.75H1.09375V7.91844V10.8244V11.4626L1.7317 11.4804L2.59376 11.5045C2.97833 12.6034 3.64313 13.5696 4.50179 14.318L3.94048 15.3554L3.63587 15.9184L4.19114 16.237L5.64215 17.0693L6.19546 17.3867L6.52843 16.8426L7.20243 15.7413C7.73371 15.8781 8.29024 15.9508 8.86295 15.9508H10.733C11.2494 15.9508 11.7526 15.8917 12.2361 15.7798L12.7333 16.6734L13.0537 17.2493L13.6282 16.9265L15.0524 16.1264L15.6282 15.8028L15.301 15.2291L14.8823 14.495C16.1356 13.4907 17.0179 12.0401 17.2872 10.3828H18.3359C19.2032 10.3828 19.9063 9.67973 19.9063 8.81242C19.9063 7.9451 19.2032 7.242 18.3359 7.242H17.0447C16.1753 4.58759 13.6788 2.66994 10.733 2.66994H8.86295C8.17571 2.66994 7.51184 2.77455 6.88698 2.96907C6.72823 2.86308 6.56121 2.75214 6.39011 2.63848L6.38912 2.63782C6.057 2.4172 5.70863 2.18579 5.36863 1.95616L4.52263 1.3848L4.3541 2.39166L4.28524 2.80302L4.2852 2.80323Z",
+            stroke: "currentColor",
+            strokeWidth: "1.3125"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8.87903 5.07309H11.1462",
+            stroke: "currentColor",
+            strokeWidth: "1.3125",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: "5.45801",
+            cy: "7.36851",
+            rx: "0.755735",
+            ry: "0.807216",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  PiggyBank
+};

package/dist/chunk-5EIYTCCK.js

@@ -0,0 +1,49 @@
+// src/icons/Info.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Info() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M15.351 8.00008C15.351 12.0502 12.0677 15.3334 8.01766 15.3334C3.96757 15.3334 0.684326 12.0502 0.684326 8.00008C0.684326 3.94999 3.96757 0.666748 8.01766 0.666748C12.0677 0.666748 15.351 3.94999 15.351 8.00008Z",
+            stroke: "currentColor",
+            strokeWidth: "1.33333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8.01758 11.1429V8.00008M8.01758 4.85732V4.83276",
+            stroke: "currentColor",
+            strokeWidth: "1.66667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8.01758 4.85732V4.83276",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  Info
+};

package/dist/chunk-5GVDRJLI.js

@@ -0,0 +1,377 @@
+import {
+  smHeaderLogoMarginLeft
+} from "./chunk-VQVEZVAG.js";
+import {
+  Link
+} from "./chunk-4QVTXKRX.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  UnstyledButton
+} from "./chunk-HGYVPOA7.js";
+import {
+  Icon
+} from "./chunk-UAFWDZRG.js";
+import {
+  overlaySurface,
+  standardBorderRadius,
+  standardFocusOutline
+} from "./chunk-52POF2W4.js";
+import {
+  themeOr
+} from "./chunk-ZFDYANKZ.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-LOPKRCGI.js";
+
+// src/components/Dropdown.tsx
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import ReactDOM from "react-dom";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Dropdown({
+  button,
+  dropdownItems,
+  horizontalScrollRef,
+  onClickDropdownItems,
+  getCSS,
+  onOpen,
+  onClose,
+  closeOnScroll = false,
+  openOnHover = false,
+  minDropdownItemsWidth = 200,
+  maxDropdownItemsWidth = 300,
+  align = "center",
+  footer = null,
+  dropdownContent = null
+}) {
+  const theme = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const [dropdownButtonHeight, setDropdownButtonHeight] = useState(0);
+  const [dropdownButtonWidth, setDropdownButtonWidth] = useState(0);
+  const [dropdownCoords, setDropdownCoords] = useState({
+    top: 0,
+    left: 0,
+    right: 0
+  });
+  const dropdownRef = useRef(null);
+  const dropdownButtonRef = useRef(null);
+  const dropdownItemsRef = useRef(null);
+  const [dropdownItemsWidth, setDropdownItemsWidth] = useState(0);
+  const nodeRef = useRef(null);
+  const [nodeReady, setNodeReady] = useState(false);
+  useEffect(() => {
+    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 setOpen = useCallback(
+    (newValue) => {
+      setIsOpen(newValue);
+      if (newValue && onOpen) {
+        onOpen();
+      } else if (!newValue && onClose) {
+        onClose();
+      }
+    },
+    [onOpen, onClose]
+  );
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+    } else if (["Enter", "Return"].includes(event.key)) {
+      event.preventDefault();
+      setOpen(!isOpen);
+    }
+  }
+  function handleBlur(event) {
+    const targetOutsideDropdownItems = dropdownItemsRef.current && !dropdownItemsRef.current.contains(event.relatedTarget) && event.relatedTarget !== null;
+    if (targetOutsideDropdownItems) {
+      setOpen(false);
+    }
+  }
+  const handleRef = useCallback((ref) => {
+    if (ref && !dropdownButtonRef.current) {
+      dropdownButtonRef.current = ref;
+    }
+    return ref;
+  }, []);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      const targetOutsideDropdownItems = dropdownItemsRef.current && !dropdownItemsRef.current.contains(event.target);
+      const targetOutsideDropdownButton = dropdownButtonRef.current && !dropdownButtonRef.current.contains(event.target);
+      if (isOpen && event.target && targetOutsideDropdownItems && targetOutsideDropdownButton) {
+        setOpen(false);
+      }
+    }
+    window.document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      window.document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, setOpen]);
+  const reposition = useCallback(() => {
+    if (dropdownButtonRef.current && dropdownItemsRef.current) {
+      const dropdownButtonRect = dropdownButtonRef.current.getBoundingClientRect();
+      setDropdownCoords({
+        top: dropdownButtonRect.top,
+        left: dropdownButtonRect.left,
+        right: dropdownButtonRect.right
+      });
+      setDropdownButtonHeight(dropdownButtonRect.height);
+      setDropdownButtonWidth(dropdownButtonRect.width);
+      const dropdownItemsRect = dropdownItemsRef.current.getBoundingClientRect();
+      setDropdownItemsWidth(dropdownItemsRect.width);
+    }
+  }, []);
+  useLayoutEffect(() => {
+    function onWindowResize() {
+      setOpen(false);
+      reposition();
+    }
+    function handleScroll() {
+      if (closeOnScroll) {
+        setOpen(false);
+      }
+      reposition();
+    }
+    reposition();
+    let dropdownButtonResizeObserver = null;
+    if (dropdownButtonRef.current) {
+      dropdownButtonResizeObserver = new ResizeObserver(reposition);
+      dropdownButtonResizeObserver.observe(dropdownButtonRef.current);
+    }
+    let dropdownResizeObserver = null;
+    if (dropdownButtonRef.current) {
+      dropdownResizeObserver = new ResizeObserver(reposition);
+      dropdownResizeObserver.observe(dropdownButtonRef.current);
+    }
+    window.addEventListener("resize", onWindowResize);
+    let navItemsResizeObserver = null;
+    window.addEventListener("scroll", handleScroll);
+    if (horizontalScrollRef == null ? void 0 : horizontalScrollRef.current) {
+      horizontalScrollRef.current.addEventListener("scroll", handleScroll);
+      navItemsResizeObserver = new ResizeObserver(reposition);
+      navItemsResizeObserver.observe(horizontalScrollRef.current);
+    }
+    return () => {
+      window.removeEventListener("resize", onWindowResize);
+      window.removeEventListener("scroll", handleScroll);
+      dropdownButtonResizeObserver == null ? void 0 : dropdownButtonResizeObserver.disconnect();
+      navItemsResizeObserver == null ? void 0 : navItemsResizeObserver.disconnect();
+      dropdownResizeObserver == null ? void 0 : dropdownResizeObserver.disconnect();
+    };
+  }, [setOpen, horizontalScrollRef, closeOnScroll, reposition]);
+  const handleClickDropdownItems = useCallback(() => {
+    setOpen(false);
+    onClickDropdownItems && onClickDropdownItems();
+  }, [onClickDropdownItems, setOpen]);
+  const dropdownTopMargin = 8;
+  const dropdownItemOffsetTop = dropdownCoords.top + dropdownButtonHeight + dropdownTopMargin;
+  let dropdownItemOffsetLeft = 0;
+  if (align === "center") {
+    dropdownItemOffsetLeft = dropdownCoords.left - (dropdownItemsWidth - dropdownButtonWidth) / 2;
+  } else if (align === "right") {
+    dropdownItemOffsetLeft = dropdownCoords.right - dropdownItemsWidth;
+  }
+  const buttonContent = button.label || button.getContent && button.getContent({ isOpen, theme });
+  const containerCSS = getCSS && getCSS({ isOpen, theme });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      css: __spreadValues({ position: "relative", display: "inline-flex" }, containerCSS),
+      ref: dropdownRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          DropdownButton,
+          {
+            id: button.id,
+            type: "button",
+            onMouseEnter: openOnHover ? () => {
+              reposition();
+              setOpen(true);
+            } : void 0,
+            onMouseLeave: openOnHover ? () => {
+              setOpen(false);
+            } : void 0,
+            onMouseDown: (e) => {
+              reposition();
+              setOpen(!isOpen);
+            },
+            onKeyDown: handleKeyDown,
+            onFocus: (e) => {
+              reposition();
+              setOpen(true);
+            },
+            onBlur: handleBlur,
+            ref: handleRef,
+            css: button.getCSS && button.getCSS({ isOpen, theme }),
+            children: buttonContent
+          }
+        ),
+        nodeReady && nodeRef.current ? ReactDOM.createPortal(
+          /* @__PURE__ */ jsxs(
+            DropdownItems,
+            {
+              isOpen,
+              left: dropdownItemOffsetLeft,
+              top: dropdownItemOffsetTop,
+              ref: dropdownItemsRef,
+              minWidth: minDropdownItemsWidth,
+              maxWidth: maxDropdownItemsWidth,
+              children: [
+                dropdownItems == null ? void 0 : dropdownItems.map((dropdownItem, i) => {
+                  return /* @__PURE__ */ jsx("li", { onBlur: handleBlur, children: /* @__PURE__ */ jsx(
+                    DropdownItem,
+                    {
+                      dropdownItem,
+                      onClick: handleClickDropdownItems
+                    }
+                  ) }, dropdownItem.label);
+                }),
+                dropdownContent,
+                footer && /* @__PURE__ */ jsx(DropdownFooter, { children: footer })
+              ]
+            }
+          ),
+          nodeRef.current
+        ) : null
+      ]
+    }
+  );
+}
+var DropdownFooter = styled.div`
+  padding: 24px 16px 0;
+  border-top: 1px solid ${({ theme }) => theme.c2Neutral};
+  margin-top: 16px;
+`;
+var DropdownItems = styled.ul`
+  ${overlaySurface}
+  color: ${({ theme }) => themeOr(theme.c6Neutral, theme.c8Neutral)};
+  ${standardBorderRadius(8)}
+  padding: 12px 0;
+  visibility: ${({ isOpen }) => isOpen ? "visible" : "hidden"};
+  position: fixed;
+  ${({ minWidth }) => minWidth ? `min-width: ${minWidth}px;` : ""}
+  ${({ maxWidth }) => maxWidth ? `max-width: ${maxWidth}px;` : ""}
+  left: ${({ left }) => left}px;
+  top: ${({ top }) => top}px;
+  z-index: ${z.dropdown};
+  list-style: none;
+  margin: 0;
+`;
+function DropdownItem({
+  dropdownItem,
+  onClick
+}) {
+  const theme = useTheme();
+  const dropdownItemIcon = dropdownItem.getIcon && dropdownItem.getIcon({ dropdownItem, theme });
+  const dropdownItemIconNode = dropdownItemIcon ? /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: dropdownItemIcon.name,
+      width: dropdownItemIcon.width || 12,
+      mr: 10
+    }
+  ) : null;
+  const cssProp2 = dropdownItem.getCSS && dropdownItem.getCSS({ theme, dropdownItem });
+  const onClickDropdownItem = useCallback(() => {
+    dropdownItem.onClick && dropdownItem.onClick(dropdownItem);
+    onClick && onClick();
+  }, [dropdownItem, onClick]);
+  if (dropdownItem.to !== void 0 || dropdownItem.externalLink) {
+    return /* @__PURE__ */ jsxs(
+      DropdownItemLink,
+      {
+        selected: Boolean(dropdownItem.selected),
+        to: dropdownItem.to,
+        externalLink: dropdownItem.externalLink,
+        params: dropdownItem.params,
+        onClick: onClickDropdownItem,
+        css: cssProp2,
+        hash: dropdownItem.hash,
+        children: [
+          dropdownItemIconNode,
+          dropdownItem.label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    DropdownItemDiv,
+    {
+      selected: false,
+      css: cssProp2,
+      onClick: onClickDropdownItem,
+      children: [
+        dropdownItemIconNode,
+        dropdownItem.label
+      ]
+    }
+  );
+}
+var DropdownButton = styled(UnstyledButton)`
+  ${standardFocusOutline}
+`;
+var dropdownItemStyle = ({ selected, theme }) => `
+  background-color: ${selected ? theme.primary : "transparent"};
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  outline-color: ${selected ? theme.onPrimaryText : theme.hcNeutral} !important;
+  white-space: nowrap;
+
+  padding: 8px 16px;
+  ${bp.sm(`padding-left: ${smHeaderLogoMarginLeft};`)}
+
+  &:hover {
+    color: ${theme.hcNeutral} !important;
+  }
+`;
+var cssProp = ({
+  theme,
+  selected
+}) => css`
+  ${dropdownItemStyle({ theme, selected: Boolean(selected) })}
+  ${standardFocusOutline({ theme })}
+`;
+function DropdownItemLink(props) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Link,
+    __spreadProps(__spreadValues({}, props), {
+      css: cssProp({ theme, selected: Boolean(props.selected) })
+    })
+  );
+}
+var DropdownItemDiv = styled.div`
+  ${dropdownItemStyle}
+  ${standardFocusOutline}
+`;
+
+export {
+  Dropdown
+};