@lightsparkdev/ui 1.0.10 → 1.0.12

package/dist/chunk-YSZZ2EO6.js

@@ -0,0 +1,416 @@
+import {
+  InfoIconTooltip
+} from "./chunk-WYK3Q2DP.js";
+import {
+  Loading
+} from "./chunk-24B3POUB.js";
+import {
+  ClipboardTextField
+} from "./chunk-FC3BTZUR.js";
+import {
+  useClipboard
+} from "./chunk-NFQP7P3D.js";
+import {
+  ignoreSSRWarning,
+  lineClamp,
+  overflowAutoWithoutScrollbars
+} from "./chunk-AV62WHL7.js";
+import {
+  Icon
+} from "./chunk-OFZVJPBJ.js";
+import {
+  standardBorderRadius,
+  standardContentInset
+} from "./chunk-4H7CTVLY.js";
+import {
+  Link,
+  replaceParams,
+  useNavigate
+} from "./chunk-PVEDEZJZ.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/Table/Table.tsx
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { isObject } from "lodash-es";
+import { Fragment, useCallback, useMemo } from "react";
+import { useTable } from "react-table";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+var isObjectCell = (value) => {
+  return isObject(value) && "text" in value && typeof value.text === "string";
+};
+var isLinkCell = (value) => {
+  return isObjectCell(value) && ("link" in value || "to" in value);
+};
+var isClipboardCell = (value) => {
+  return isObjectCell(value) && "canCopy" in value;
+};
+var isLinkAndClipboardCell = (value) => {
+  return isObjectCell(value) && ("link" in value || "to" in value) && "canCopy" in value;
+};
+var isMultilineCell = (value) => {
+  return isObjectCell(value) && "multiline" in value;
+};
+function Table({
+  columns,
+  data,
+  loading,
+  onClickRow,
+  emptyState,
+  clipboardCallbacks
+}) {
+  const navigate = useNavigate();
+  const { canWriteToClipboard, writeTextToClipboard } = useClipboard(clipboardCallbacks);
+  const onClickCopy = useCallback(
+    (value) => (event) => {
+      event.stopPropagation();
+      void writeTextToClipboard(value);
+    },
+    [writeTextToClipboard]
+  );
+  const mappedColumns = useMemo(
+    () => columns.map((column) => __spreadProps(__spreadValues({}, column), {
+      Header: typeof column.Header === "string" ? column.Header : /* @__PURE__ */ jsxs("div", { children: [
+        column.Header.name,
+        /* @__PURE__ */ jsx(
+          InfoIconTooltip,
+          {
+            id: `tooltip-${column.Header.name}`,
+            content: column.Header.tooltip || "",
+            verticalAlign: -2
+          }
+        )
+      ] }),
+      accessor: column.accessor.toString(),
+      Cell: ({ value }) => {
+        let content = value;
+        let icon = null;
+        if (isObjectCell(value)) {
+          icon = value.icon ? /* @__PURE__ */ jsx(Icon, { name: value.icon, width: 14, mr: 4, color: "c4Neutral" }) : null;
+          if (isMultilineCell(value)) {
+            content = /* @__PURE__ */ jsxs(LineClampSpan, { children: [
+              icon,
+              value.text
+            ] });
+          } else {
+            content = /* @__PURE__ */ jsxs(Fragment, { children: [
+              icon,
+              value.text
+            ] });
+          }
+        }
+        if (isLinkAndClipboardCell(value)) {
+          const copyButton = canWriteToClipboard && /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              onClick: onClickCopy(value.text),
+              role: "button",
+              tabIndex: 0,
+              children: /* @__PURE__ */ jsx(Icon, { name: "Copy", width: 16, mr: 12 })
+            }
+          );
+          return value.link ? /* @__PURE__ */ jsxs(LinkClipboardCell, { children: [
+            /* @__PURE__ */ jsxs(
+              HoverableLinkCell,
+              {
+                href: value.link,
+                target: "_blank",
+                rel: "noreferrer",
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "LinkIcon", width: 12 }),
+                  /* @__PURE__ */ jsx(LinkCellContent, { children: content })
+                ]
+              }
+            ),
+            copyButton
+          ] }) : value.to ? /* @__PURE__ */ jsxs(HoverableCellWrapper, { children: [
+            /* @__PURE__ */ jsxs(
+              Link,
+              {
+                to: value.to,
+                params: value.toParams,
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                children: [
+                  icon,
+                  /* @__PURE__ */ jsx(LinkCellContent, { children: value.text })
+                ]
+              }
+            ),
+            copyButton
+          ] }) : /* @__PURE__ */ jsx("span", { children: content });
+        } else if (isLinkCell(value)) {
+          return value.link ? /* @__PURE__ */ jsxs(
+            HoverableLinkCell,
+            {
+              href: value.link,
+              target: "_blank",
+              rel: "noreferrer",
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "LinkIcon", width: 12 }),
+                /* @__PURE__ */ jsx(LinkCellContent, { children: content })
+              ]
+            }
+          ) : value.to ? /* @__PURE__ */ jsx(HoverableCellWrapper, { children: /* @__PURE__ */ jsxs(
+            Link,
+            {
+              to: value.to,
+              params: value.toParams,
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              children: [
+                icon,
+                /* @__PURE__ */ jsx(LinkCellContent, { children: value.text })
+              ]
+            }
+          ) }) : /* @__PURE__ */ jsx("span", { children: content });
+        } else if (isClipboardCell(value)) {
+          let maxLines = 1;
+          let maxChars = void 0;
+          if (isMultilineCell(value)) {
+            maxLines = 2;
+          } else {
+            maxChars = value.maxChars || 16;
+          }
+          const ellipsisPosition = value.ellipsisPosition || "middle";
+          return /* @__PURE__ */ jsxs(HoverableCellWrapper, { children: [
+            icon,
+            /* @__PURE__ */ jsx(
+              ClipboardTextField,
+              {
+                value: value.text,
+                elide: maxChars ? {
+                  maxChars,
+                  ellipsisPosition
+                } : void 0,
+                stopPropagation: true,
+                maxLines,
+                icon: true,
+                iconSide: "right",
+                clipboardCallbacks
+              }
+            )
+          ] });
+        }
+        return /* @__PURE__ */ jsx("span", { children: content });
+      }
+    })),
+    [columns, canWriteToClipboard, onClickCopy, clipboardCallbacks]
+  );
+  const tableInstance = useTable({ columns: mappedColumns, data });
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;
+  function onClickDataRow(event, row) {
+    const onClickRowResult = onClickRow ? onClickRow(row) : null;
+    if (onClickRowResult) {
+      const newTabKey = event.metaKey || event.ctrlKey;
+      if ((onClickRowResult == null ? void 0 : onClickRowResult.link) || (onClickRowResult == null ? void 0 : onClickRowResult.to) && newTabKey) {
+        let link = onClickRowResult == null ? void 0 : onClickRowResult.link;
+        if (!link) {
+          link = replaceParams(onClickRowResult.to, onClickRowResult.params);
+        }
+        const target = newTabKey ? "_blank" : void 0;
+        window.open(link, target);
+      } else if (onClickRowResult == null ? void 0 : onClickRowResult.to) {
+        navigate(onClickRowResult.to, onClickRowResult.params);
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs(TableWrapper, { children: [
+    /* @__PURE__ */ jsxs(StyledTable, __spreadProps(__spreadValues({}, getTableProps()), { clickable: Boolean(onClickRow), children: [
+      /* @__PURE__ */ jsx("thead", {
+        // Loop over the header rows
+        children: headerGroups.map((headerGroup) => (
+          // Apply the header row props
+          /* @__PURE__ */ jsx("tr", __spreadProps(__spreadValues({}, headerGroup.getHeaderGroupProps()), {
+            // Loop over the headers in each row
+            children: headerGroup.headers.map((column) => (
+              // Apply the header cell props
+              /* @__PURE__ */ jsx("th", __spreadProps(__spreadValues({}, column.getHeaderProps()), {
+                // Render the header
+                children: column.render("Header")
+              }))
+            ))
+          }))
+        ))
+      }),
+      /* @__PURE__ */ jsx("tbody", __spreadProps(__spreadValues({}, getTableBodyProps()), {
+        // Loop over the table rows
+        children: rows.map((row) => {
+          prepareRow(row);
+          return (
+            // Apply the row props
+            /* @__PURE__ */ jsx(
+              "tr",
+              __spreadProps(__spreadValues({}, row.getRowProps()), {
+                onClick: (event) => onClickDataRow(event, row),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter") {
+                    onClickDataRow(event, row);
+                  }
+                },
+                tabIndex: 0,
+                // Loop over the rows cells
+                children: row.cells.map((cell) => {
+                  return /* @__PURE__ */ jsx("td", __spreadProps(__spreadValues({}, cell.getCellProps()), {
+                    // Render the cell contents
+                    children: cell.render("Cell")
+                  }));
+                })
+              })
+            )
+          );
+        })
+      }))
+    ] })),
+    emptyState,
+    loading && /* @__PURE__ */ jsx(Loading, {})
+  ] });
+}
+var TableWrapper = styled.div`
+  position: relative;
+  min-height: 300px;
+  ${overflowAutoWithoutScrollbars}
+`;
+var hoverCellStyles = css`
+  cursor: pointer;
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 0.6;
+  }
+`;
+var LinkCellContent = styled.span`
+  vertical-align: middle;
+`;
+var HoverableCellWrapper = styled.div`
+  ${hoverCellStyles}
+
+  display: flex !important;
+  gap: 4px;
+`;
+var LinkClipboardCell = styled.a`
+  ${hoverCellStyles}
+
+  color: ${({ theme }) => theme.hcNeutral};
+  display: flex !important;
+  gap: 4px;
+`;
+var HoverableLinkCell = styled.a`
+  ${hoverCellStyles}
+
+  color: ${({ theme }) => theme.hcNeutral};
+  display: flex !important;
+  gap: 4px;
+`;
+var CopyButton = styled.span`
+  overflow: hidden;
+  align-items: center;
+  cursor: pointer;
+  display: inline-table;
+`;
+var LineClampSpan = styled.span`
+  ${lineClamp(2)}
+`;
+var cellPaddingPx = 15;
+var StyledTable = styled.table`
+  position: relative;
+  border-spacing: 0;
+  width: 100%;
+
+  ${bp.lg(`
+    padding-left: ${standardContentInset.lgPx}px;
+    padding-right: ${standardContentInset.lgPx}px;
+  `)}
+  ${bp.sm(`
+    padding-left: ${standardContentInset.smPx}px;
+    padding-right: ${standardContentInset.smPx}px;
+  `)}
+  ${bp.minSmMaxLg(`
+    padding-left: ${standardContentInset.minSmMaxLgPx}px;
+    padding-right: ${standardContentInset.minSmMaxLgPx}px;
+  `)}
+
+  th {
+    max-width: 200px;
+    text-align: left;
+    padding: ${cellPaddingPx}px 0px;
+    border-bottom: 1px solid ${({ theme }) => theme.c1Neutral};
+    padding: ${cellPaddingPx}px;
+    &:first-of-type {
+      padding-left: 0px;
+    }
+    &:last-of-type {
+      padding-right: 0px;
+    }
+    &:last-of-type {
+      text-align: right;
+    }
+  }
+
+  tr {
+    cursor: ${({ clickable }) => clickable ? "pointer" : "default"};
+    position: relative;
+
+    &:hover td:first-child:before ${ignoreSSRWarning} {
+      ${standardBorderRadius(16)}
+      content: "";
+      position: absolute;
+      /* Position offsets inside trs do not properly follow relatively positioned
+         parents in Safari (see bug https://bit.ly/49dViWy), use margin instead: */
+      margin-top: 5px;
+      left: -12px;
+      width: calc(100% + 24px);
+      height: 32px;
+      border: 1px solid ${({ theme }) => theme.c1Neutral};
+      pointer-events: none;
+    }
+  }
+
+  td {
+    max-width: 200px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: 0 ${cellPaddingPx}px;
+    white-space: nowrap;
+    & > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: block;
+      padding: ${cellPaddingPx}px 0px;
+      & > * {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+      }
+    }
+    &:first-of-type {
+      padding-left: 0px;
+    }
+    &:last-of-type {
+      text-align: right;
+      padding-right: 0px;
+    }
+    & span:has(> ${LineClampSpan}),
+    & ${LineClampSpan} {
+      white-space: normal;
+    }
+  }
+`;
+
+export {
+  Table
+};

package/dist/chunk-YV7GYR77.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Limit.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Limit({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M9.99883 10.8335L7.49887 8.3335M4.40956 15.8335C1.77112 12.8887 1.86683 8.36008 4.6967 5.5302C7.62563 2.60126 12.3743 2.60126 15.3033 5.5302C18.1332 8.36008 18.2289 12.8887 15.5904 15.8335",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.Limit = Limit;

package/dist/chunk-Z3KLTHA6.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/ArrowUpRight.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ArrowUpRight({
+  strokeWidth = "2.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M22.4167 17.4167V1.58333M22.4167 1.58333H6.58333M22.4167 1.58333L2 22",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.ArrowUpRight = ArrowUpRight;

package/dist/chunk-Z6TZF3W2.js

@@ -0,0 +1,89 @@
+import {
+  Button
+} from "./chunk-WUPMVX4G.js";
+import {
+  overflowAutoWithoutScrollbars
+} from "./chunk-AV62WHL7.js";
+import {
+  standardContentInset
+} from "./chunk-4H7CTVLY.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/ButtonRow.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function ButtonRow({
+  buttons,
+  className,
+  smSticky = true,
+  headerHeight = 0
+}) {
+  return /* @__PURE__ */ jsx(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ jsx(StyledButtonRow, { className, children: buttons.map(
+    (button, idx) => button === "divider" ? /* @__PURE__ */ jsx(ButtonRowDivider, {}, idx) : /* @__PURE__ */ jsx(Button, __spreadValues({}, button), idx)
+  ) }) });
+}
+var ButtonRowContainer = styled.div`
+  max-width: 100%;
+  ${({ theme }) => bp.sm(`background: ${theme.bg}`)}
+  ${({ headerHeight, smSticky }) => bp.sm(
+  `
+        ${smSticky ? `
+            display: block;
+            position: sticky;
+            top: ${headerHeight}px;
+            margin-top: 24px;
+            margin-left: -${standardContentInset.smPx}px;
+            width: calc(100% + ${standardContentInset.smPx * 2}px);
+            max-width: calc(100% + ${standardContentInset.smPx * 2}px);
+            z-index: 2;` : `position: relative;`}
+        z-index: 2;
+        &:before {
+          content: "";
+          box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.09);
+          height: 1px;
+          position: absolute;
+          background: black;
+          bottom: 1px;
+          width: 100%;
+          z-index: 0;
+        }
+      `
+)}
+`;
+var ButtonRowDivider = styled.div`
+  border-left: 1px #d9d9d9 solid;
+  margin-left: 16px;
+  padding-left: 16px;
+`;
+var StyledButtonRow = styled.div`
+  ${overflowAutoWithoutScrollbars}
+  background: ${({ theme }) => theme.bg};
+  display: flex;
+  position: relative;
+  z-index: 1;
+
+  & button:not(:first-of-type),
+  & a:not(:first-of-type) {
+    margin-left: 8px;
+  }
+
+  & ${ButtonRowDivider} + button,
+  & ${ButtonRowDivider} + a {
+    margin-left: 0;
+  }
+
+  ${bp.sm(`
+    padding: ${standardContentInset.smPx}px;
+  `)}
+`;
+
+export {
+  ButtonRow,
+  ButtonRowContainer,
+  StyledButtonRow
+};

package/dist/chunk-Z7RV7ITM.cjs

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkC6GQCKNTcjs = require('./chunk-C6GQCKNT.cjs');
+
+
+var _chunkRROZ5XYPcjs = require('./chunk-RROZ5XYP.cjs');
+
+
+var _chunkRBWRQTGBcjs = require('./chunk-RBWRQTGB.cjs');
+
+
+var _chunkC6XJ7ZJFcjs = require('./chunk-C6XJ7ZJF.cjs');
+
+// src/components/IconWithCircleBackground.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function IconWithCircleBackground({
+  iconName = "WarningSign",
+  iconWidth = 40,
+  to,
+  onClick,
+  darkBg = false,
+  shouldRotate = false
+}) {
+  const content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC6GQCKNTcjs.Flex, { center: true, onClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledIconWithCircleBackground,
+    {
+      size: iconWidth,
+      darkBg,
+      shouldRotate,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkRROZ5XYPcjs.Icon,
+        {
+          name: iconName,
+          width: iconWidth,
+          color: darkBg ? "white" : "grayBlue9"
+        }
+      )
+    }
+  ) });
+  return to ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRBWRQTGBcjs.Link, { to, children: content }) : content;
+}
+var StyledIconWithCircleBackground = _styled2.default.div`
+  background: ${({ theme, darkBg }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : _chunkC6XJ7ZJFcjs.getColor.call(void 0, theme, "grayBlue94")};
+  border-radius: 50%;
+  padding: ${({ size }) => getPadding(size)}px;
+  display: flex;
+  justify-content: center;
+  ${({ size }) => `width: ${size + getPadding(size) * 2}px; height: ${size + getPadding(size) * 2}px;`}
+
+  @keyframes IconWithCircleBackgroundRotate {
+    0% {
+      transform: rotate(0);
+    }
+    35% {
+      transform: rotate(360deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  ${({ shouldRotate }) => shouldRotate && `animation: IconWithCircleBackgroundRotate 10s ease infinite;`}
+`;
+function getPadding(size) {
+  if (size === 40) {
+    return 20;
+  }
+  return 16;
+}
+
+
+
+exports.IconWithCircleBackground = IconWithCircleBackground;