@lightsparkdev/ui 0.0.0

package/dist/chunk-FETTWCK3.js

@@ -0,0 +1,101 @@
+import {
+  Icon
+} from "./chunk-L7XFJWMY.js";
+
+// src/components/CurrencyAmount.tsx
+import { gql } from "@apollo/client";
+import styled from "@emotion/styled";
+import {
+  CurrencyUnit,
+  formatCurrencyStr,
+  isCurrencyMap,
+  mapCurrencyAmount
+} from "@lightsparkdev/core";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function CurrencyAmount({
+  amount,
+  displayUnit = CurrencyUnit.SATOSHI,
+  shortNumber = false,
+  showUnits = false,
+  includeEstimatedIndicator = false,
+  /* Product has voted to hide msats from end users.
+     showSubSatDigits should only be used in ops tools: */
+  showSubSatDigits = false,
+  ml = 0
+}) {
+  const unit = displayUnit;
+  const amountMap = isCurrencyMap(amount) ? amount : mapCurrencyAmount(amount);
+  const value = amountMap[unit];
+  const defaultFormattedNumber = amountMap.formatted[unit];
+  let formattedNumber = defaultFormattedNumber;
+  if (shortNumber) {
+    formattedNumber = formatCurrencyStr(
+      { value: Number(value), unit },
+      1,
+      true
+    );
+  } else if (showSubSatDigits) {
+    formattedNumber = formatCurrencyStr(
+      { value: Number(value), unit: CurrencyUnit.SATOSHI },
+      3
+    );
+  }
+  if (showUnits) {
+    formattedNumber += ` ${shorttext(unit, value)}`;
+  }
+  return /* @__PURE__ */ jsxs(StyledCurrencyAmount, { ml, children: [
+    includeEstimatedIndicator && "Est. ",
+    /* @__PURE__ */ jsx(CurrencyIcon, { unit }),
+    formattedNumber
+  ] });
+}
+var CurrencyIcon = ({ unit }) => {
+  switch (unit) {
+    case CurrencyUnit.BITCOIN:
+      return /* @__PURE__ */ jsx(Icon, { name: "BitcoinB", width: 8, verticalAlign: -2, mr: 2 });
+    case CurrencyUnit.SATOSHI:
+      return /* @__PURE__ */ jsx(Icon, { name: "Satoshi", width: 8, verticalAlign: -2, mr: 2 });
+    default:
+      return null;
+  }
+};
+var shorttext = (unit, value) => {
+  const pl = value !== 1;
+  switch (unit) {
+    case CurrencyUnit.BITCOIN:
+      return "BTC";
+    case CurrencyUnit.MILLIBITCOIN:
+      return "mBTC";
+    case CurrencyUnit.MICROBITCOIN:
+      return "\u03BCBTC";
+    case CurrencyUnit.SATOSHI:
+      return `sat${pl ? "s" : ""}`;
+    case CurrencyUnit.MILLISATOSHI:
+      return `msat${pl ? "s" : ""}`;
+  }
+  return unit;
+};
+var StyledCurrencyAmount = styled.span`
+  color: inherit !important;
+  white-space: nowrap;
+  font-feature-settings:
+    "tnum" on,
+    "lnum" on;
+  margin-left: ${({ ml }) => ml}px;
+`;
+CurrencyAmount.fragments = {
+  amount: gql`
+    fragment CurrencyAmount_amount on CurrencyAmount {
+      original_value
+      original_unit
+      preferred_currency_unit
+      preferred_currency_value_rounded
+      preferred_currency_value_approx
+    }
+  `
+};
+
+export {
+  CurrencyAmount,
+  CurrencyIcon
+};

package/dist/chunk-I4PO6FQP.js

@@ -0,0 +1,36 @@
+import {
+  colors
+} from "./chunk-ACZDUWPH.js";
+import {
+  getTypographyString
+} from "./chunk-WVJNZRKF.js";
+
+// src/styles/fonts/typography/LabelStrong.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var LabelStrong = ({
+  children,
+  color,
+  size = "Medium" /* Medium */
+}) => {
+  return /* @__PURE__ */ jsx(StyledLabelStrong, { size, color, children });
+};
+var StyledLabelStrong = styled.label`
+  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+  ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app]["Label Strong"][size]) : "";
+}}
+  cursor: inherit;
+
+  * {
+    color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+    ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app]["Label Strong"][size]) : "";
+}}
+  }
+`;
+
+export {
+  LabelStrong,
+  StyledLabelStrong
+};

package/dist/chunk-IJVWYT5G.js

@@ -0,0 +1,8 @@
+// src/styles/constants.ts
+var cssVars = {
+  docHeight: "--doc-height"
+};
+
+export {
+  cssVars
+};

package/dist/chunk-JSGRNWSB.js

@@ -0,0 +1,233 @@
+// src/styles/breakpoints.tsx
+import { css } from "@emotion/react";
+import { debounce } from "lodash-es";
+import { Fragment, useLayoutEffect, useState } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+var Breakpoints = /* @__PURE__ */ ((Breakpoints2) => {
+  Breakpoints2["sm"] = "sm";
+  Breakpoints2["md"] = "md";
+  Breakpoints2["lg"] = "lg";
+  return Breakpoints2;
+})(Breakpoints || {});
+var breakpoints = {
+  ["sm" /* sm */]: 640,
+  ["md" /* md */]: 834,
+  ["lg" /* lg */]: 1200
+};
+var BreakpointRanges = /* @__PURE__ */ ((BreakpointRanges2) => {
+  BreakpointRanges2["sm"] = "sm";
+  BreakpointRanges2["lg"] = "lg";
+  BreakpointRanges2["minSmMaxMd"] = "minSmMaxMd";
+  BreakpointRanges2["minMdMaxLg"] = "minMdMaxLg";
+  BreakpointRanges2["minSmMaxLg"] = "minSmMaxLg";
+  BreakpointRanges2["maxLg"] = "maxLg";
+  BreakpointRanges2["maxMd"] = "maxMd";
+  BreakpointRanges2["minSm"] = "minSm";
+  BreakpointRanges2["minMd"] = "minMd";
+  return BreakpointRanges2;
+})(BreakpointRanges || {});
+var breakpointFn = (mq) => (style) => `@media ${mq} { ${style} }`;
+var bp = {
+  key: Breakpoints,
+  ["sm" /* sm */]: breakpointFn(`(max-width:${breakpoints.sm}px)`),
+  ["lg" /* lg */]: breakpointFn(`(min-width:${breakpoints.lg}px)`),
+  ["minSmMaxLg" /* minSmMaxLg */]: breakpointFn(
+    `(min-width:${breakpoints.sm + 1}px) and (max-width:${breakpoints.lg - 1}px)`
+  ),
+  ["minSmMaxMd" /* minSmMaxMd */]: breakpointFn(
+    `(min-width:${breakpoints.sm + 1}px) and (max-width:${breakpoints.md - 1}px)`
+  ),
+  ["minMdMaxLg" /* minMdMaxLg */]: breakpointFn(
+    `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 1}px)`
+  ),
+  ["maxLg" /* maxLg */]: breakpointFn(`(max-width:${breakpoints.lg - 1}px)`),
+  ["maxMd" /* maxMd */]: breakpointFn(`(max-width:${breakpoints.md - 1}px)`),
+  ["minSm" /* minSm */]: breakpointFn(`(min-width:${breakpoints.sm + 1}px)`),
+  ["minMd" /* minMd */]: breakpointFn(`(min-width:${breakpoints.md + 1}px)`),
+  current: function(assertBp) {
+    const currentBp = (
+      /* window is undefined in first server side render for Next apps: */
+      typeof window === "undefined" ? "sm" /* sm */ : window.getComputedStyle(document.body, ":before").content.replace(/"/g, "")
+    );
+    if (assertBp) {
+      return inRange(
+        currentBp,
+        assertBp
+      );
+    }
+    return currentBp;
+  },
+  switch: (smVal, minSmMaxMdVal, minMdMaxLgVal, lgVal) => {
+    const currentBp = bp.current();
+    if (currentBp === "sm" /* sm */) {
+      return smVal;
+    } else if (currentBp === "minSmMaxMd" /* minSmMaxMd */) {
+      return minSmMaxMdVal;
+    } else if (currentBp === "minMdMaxLg" /* minMdMaxLg */) {
+      return minMdMaxLgVal;
+    }
+    return lgVal;
+  },
+  isSm: () => bp.current("sm" /* sm */),
+  isMinSm: () => bp.current("minSm" /* minSm */),
+  isMinSmMaxMd: () => bp.current("minSmMaxMd" /* minSmMaxMd */),
+  isMinMdMaxLg: () => bp.current("minMdMaxLg" /* minMdMaxLg */),
+  isLg: () => bp.current("lg" /* lg */)
+};
+function inRange(currentBp, assertBp) {
+  const isSm = currentBp === "sm" /* sm */;
+  const isMinSmMaxMd = currentBp === "minSmMaxMd" /* minSmMaxMd */;
+  const isMinMdMaxLg = currentBp === "minMdMaxLg" /* minMdMaxLg */;
+  const isLg = currentBp === "lg" /* lg */;
+  if (assertBp) {
+    switch (assertBp) {
+      case "sm" /* sm */:
+        return isSm;
+      case "minSmMaxMd" /* minSmMaxMd */:
+        return isMinSmMaxMd;
+      case "minMdMaxLg" /* minMdMaxLg */:
+        return isMinMdMaxLg;
+      case "lg" /* lg */:
+        return isLg;
+      case "minSmMaxLg" /* minSmMaxLg */:
+        return isMinSmMaxMd || isMinMdMaxLg;
+      case "maxLg" /* maxLg */:
+        return isSm || isMinSmMaxMd || isMinMdMaxLg;
+      case "maxMd" /* maxMd */:
+        return isSm || isMinSmMaxMd;
+      case "minSm" /* minSm */:
+        return isMinSmMaxMd || isMinMdMaxLg || isLg;
+      case "minMd" /* minMd */:
+        return isMinMdMaxLg || isLg;
+      default:
+        return false;
+    }
+  }
+  return false;
+}
+function useBreakpoints() {
+  const [currentBp, setCurrentBp] = useState(bp.current());
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      const newBp = bp.current();
+      if (newBp !== currentBp) {
+        setCurrentBp(newBp);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("deviceorientation", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("deviceorientation", handleResize);
+    };
+  });
+  return bp;
+}
+function useScreenWidth() {
+  const [screenWidth, setScreenWidth] = useState(window.innerWidth);
+  useLayoutEffect(() => {
+    const handleResize = debounce(() => {
+      setScreenWidth(window.innerWidth);
+    }, 200);
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("deviceorientation", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("deviceorientation", handleResize);
+    };
+  });
+  return screenWidth;
+}
+var DisplayBreakpoint = ({
+  sm,
+  minSmMaxMd,
+  minMdMaxLg,
+  lg,
+  maxLg,
+  maxMd,
+  minSm,
+  minMd,
+  cssStr,
+  children
+}) => {
+  const breakpoint = (() => {
+    switch (true) {
+      case sm:
+        return bp.sm;
+      case minSmMaxMd:
+        return bp.minSmMaxMd;
+      case minMdMaxLg:
+        return bp.minMdMaxLg;
+      case lg:
+        return bp.lg;
+      case maxLg:
+        return bp.maxLg;
+      case maxMd:
+        return bp.maxMd;
+      case minSm:
+        return bp.minSm;
+      case minMd:
+        return bp.minMd;
+      default:
+        return bp.sm;
+    }
+  })();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      css: css`
+        display: none;
+        ${breakpoint(`display: block; ${cssStr}`)}
+      `,
+      children
+    }
+  );
+};
+function Breakpoint({
+  sm,
+  minSmMaxMd,
+  minMdMaxLg,
+  lg,
+  maxLg,
+  maxMd,
+  minSm,
+  minMd,
+  children
+}) {
+  const bp2 = useBreakpoints();
+  const shouldRender = (() => {
+    switch (true) {
+      case sm:
+        return bp2.current("sm" /* sm */);
+      case minSmMaxMd:
+        return bp2.current("minSmMaxMd" /* minSmMaxMd */);
+      case minMdMaxLg:
+        return bp2.current("minMdMaxLg" /* minMdMaxLg */);
+      case lg:
+        return bp2.current("lg" /* lg */);
+      case maxLg:
+        return bp2.current("maxLg" /* maxLg */);
+      case maxMd:
+        return bp2.current("maxMd" /* maxMd */);
+      case minSm:
+        return bp2.current("minSm" /* minSm */);
+      case minMd:
+        return bp2.current("minMd" /* minMd */);
+      default:
+        return bp2.current("sm" /* sm */);
+    }
+  })();
+  return shouldRender ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+
+export {
+  Breakpoints,
+  BreakpointRanges,
+  bp,
+  useBreakpoints,
+  useScreenWidth,
+  DisplayBreakpoint,
+  Breakpoint
+};

package/dist/chunk-K7MPHJNG.js

@@ -0,0 +1,66 @@
+import {
+  UnstyledButton
+} from "./chunk-X6BI4STY.js";
+import {
+  Icon
+} from "./chunk-L7XFJWMY.js";
+import {
+  StyledTooltip
+} from "./chunk-QR7BKTM6.js";
+import {
+  __async
+} from "./chunk-CIGAQ47A.js";
+
+// src/components/CopyToClipboardButton.tsx
+import styled from "@emotion/styled";
+import { nanoid } from "nanoid";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+var CopyToClipboardButton = (props) => {
+  var _a;
+  const originalTooltipContent = props.tooltipContent || "Click to copy";
+  const icon = props.icon || "Copy";
+  const id = `copy-node-name-${(_a = props.id) != null ? _a : nanoid()}`;
+  const [tooltipContent, setTooltipContent] = useState(originalTooltipContent);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        onClick: () => {
+          void (() => __async(void 0, null, function* () {
+            try {
+              yield navigator.clipboard.writeText(props.value);
+              setTooltipContent("Copied!");
+            } catch (err) {
+              setTooltipContent("Unable to copy");
+            }
+            setTimeout(() => {
+              setTooltipContent(originalTooltipContent);
+            }, 2e3);
+          }))();
+        },
+        css: props.buttonCSS,
+        ml: props.ml,
+        "data-tooltip-id": id,
+        children: [
+          props.children ? /* @__PURE__ */ jsx(Children, { children: props.children }) : null,
+          /* @__PURE__ */ jsx(Icon, { name: icon, width: props.isSm ? 12 : 16 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(StyledTooltip, { id, place: props.place || "right", variant: "dark", children: tooltipContent })
+  ] });
+};
+var Children = styled.span`
+  margin-right: 4px;
+`;
+var Button = styled(UnstyledButton)`
+  background: rgba(0, 0, 0, 0);
+  vertical-align: middle;
+  ${({ ml }) => ml ? `margin-left: ${ml}px` : ""};
+`;
+
+export {
+  CopyToClipboardButton
+};

package/dist/chunk-L7XFJWMY.js

@@ -0,0 +1,93 @@
+import {
+  isString
+} from "./chunk-LAMQKQU3.js";
+import {
+  rootFontSizePx
+} from "./chunk-QR7BKTM6.js";
+import {
+  __async
+} from "./chunk-CIGAQ47A.js";
+
+// src/components/Icon.tsx
+import styled from "@emotion/styled";
+import { useLayoutEffect, useState } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+var iconMap = {};
+function loadIcon(iconName) {
+  return __async(this, null, function* () {
+    let IconComp;
+    try {
+      ({ default: IconComp } = yield import(
+        /* webpackMode: "eager" */
+        // this can't be a variable only, needs to have some string constraints:
+        `./icons/${iconName}.js`
+      ));
+    } catch (e) {
+      throw new Error(`Icon ${iconName} not found`);
+    }
+    iconMap[iconName] = IconComp;
+  });
+}
+function Icon({
+  className,
+  name,
+  width,
+  tutorialStep,
+  mr = 0,
+  ml = 0,
+  verticalAlign = "middle",
+  color = void 0
+}) {
+  const [, setLoading] = useState(false);
+  const IconComponent = iconMap[name] || null;
+  useLayoutEffect(() => {
+    void (() => __async(this, null, function* () {
+      if (!iconMap[name]) {
+        setLoading(true);
+        yield loadIcon(name);
+        setLoading(false);
+      }
+    }))();
+  }, [name]);
+  const w = parseFloat((width / rootFontSizePx).toFixed(2));
+  const mrRems = parseFloat((mr / rootFontSizePx).toFixed(2));
+  const mlRems = parseFloat((ml / rootFontSizePx).toFixed(2));
+  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / rootFontSizePx).toFixed(2));
+  return /* @__PURE__ */ jsx(
+    IconContainer,
+    {
+      className,
+      w,
+      mr: mrRems,
+      ml: mlRems,
+      verticalAlign: va,
+      fontColor: color,
+      "data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
+      children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, {}) : null
+    }
+  );
+}
+var IconContainer = styled.span`
+  pointer-events: none;
+  display: inline-flex;
+  ${({ mr, ml, w }) => `
+    width: ${w}em;
+    /* ensure no shrink in flex containers: */
+    min-width: ${w}em;
+    ${mr ? `margin-right: ${mr}em;` : ""}
+    ${ml ? `margin-left: ${ml}em;` : ""}
+  `}
+
+  vertical-align: ${({ verticalAlign }) => isString(verticalAlign) ? verticalAlign : `${verticalAlign}em`};
+
+  ${({ fontColor }) => `
+    & svg {
+      color: ${fontColor || "inherit"};
+    }
+  `}
+`;
+
+export {
+  Icon,
+  IconContainer
+};

package/dist/chunk-LAMQKQU3.js

@@ -0,0 +1,56 @@
+// src/utils/strings.tsx
+var capitalize = (str) => {
+  if (str.length === 0) {
+    return str;
+  }
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+var makeEnumPretty = (enumValue, capitalizeAllWords = true) => {
+  let formatted = enumValue.toLowerCase().split("_");
+  if (capitalizeAllWords) {
+    formatted = formatted.map((word) => capitalize(word));
+  } else if (formatted.length > 0) {
+    formatted[0] = capitalize(formatted[0]);
+  }
+  return formatted.join(" ");
+};
+var elide = (s, first, last) => {
+  if (s === void 0 || s === null)
+    return s;
+  return s.substring(0, first) + "..." + s.substring(s.length - (last != null ? last : 0));
+};
+function removeChars(value, beginIndex, endIndex) {
+  return value.slice(0, beginIndex) + value.slice(endIndex || beginIndex + 1);
+}
+function isString(str) {
+  return typeof str === "string";
+}
+function removeCommas(value) {
+  return value.replace(/,/g, "");
+}
+function addCommasToDigits(value) {
+  if (typeof value === "number") {
+    value = value.toString();
+  }
+  const existingCommasRemoved = removeCommas(value);
+  const [int, decimal] = existingCommasRemoved.split(".");
+  const intWithCommas = int.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decimal ? `${intWithCommas}.${decimal}` : intWithCommas;
+}
+function removeLeadingZeros(value) {
+  if (value.length > 1) {
+    return value.replace(/^0+(?=\d)/, "");
+  }
+  return value;
+}
+
+export {
+  capitalize,
+  makeEnumPretty,
+  elide,
+  removeChars,
+  isString,
+  removeCommas,
+  addCommasToDigits,
+  removeLeadingZeros
+};