@lightsparkdev/ui 1.0.14 → 1.0.16

package/dist/{chunk-HKAAMXTA.js → chunk-M6OUTCTI.js}

@@ -1,46 +1,52 @@
 import {
   InfoIconTooltip
-} from "./chunk-FLOL2MZI.js";
-import {
-  Loading
-} from "./chunk-XDZPMJZG.js";
+} from "./chunk-WPHZJT2C.js";
 import {
   ClipboardTextField
-} from "./chunk-H3AKZTZT.js";
+} from "./chunk-4X6XJ2LR.js";
 import {
-  useClipboard
-} from "./chunk-NFQP7P3D.js";
-import {
-  ignoreSSRWarning,
   lineClamp,
   overflowAutoWithoutScrollbars
-} from "./chunk-A4MP3LYH.js";
+} from "./chunk-OFNX3IEO.js";
+import {
+  Loading
+} from "./chunk-BLWXB3VF.js";
 import {
   Icon
-} from "./chunk-RMZQSXO2.js";
+} from "./chunk-HOGSXW62.js";
 import {
-  standardBorderRadius,
   standardContentInset
-} from "./chunk-RNCUEVKR.js";
+} from "./chunk-WXQAFT6L.js";
 import {
   Link,
   replaceParams,
   useNavigate
-} from "./chunk-UUKJNNJ5.js";
+} from "./chunk-MTV5UVUD.js";
+import {
+  themeOrWithKey
+} from "./chunk-WFSTDMMY.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
+import {
+  useClipboard
+} from "./chunk-QHODHUW2.js";
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-CWMXXUWU.js";
+} from "./chunk-W7FAWX6T.js";
 
 // src/components/Table/Table.tsx
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
 import { isObject } from "lodash-es";
-import { Fragment, useCallback, useMemo } from "react";
-import { useTable } from "react-table";
+import { Fragment, useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 var isObjectCell = (value) => {
   return isObject(value) && "text" in value && typeof value.text === "string";
@@ -63,9 +69,11 @@ function Table({
   loading,
   onClickRow,
   emptyState,
-  clipboardCallbacks
+  clipboardCallbacks,
+  rowHoverEffect = "border"
 }) {
   const navigate = useNavigate();
+  const [sorting, setSorting] = useState([]);
   const { canWriteToClipboard, writeTextToClipboard } = useClipboard(clipboardCallbacks);
   const onClickCopy = useCallback(
     (value) => (event) => {
@@ -76,34 +84,38 @@ function Table({
   );
   const mappedColumns = useMemo(
     () => columns.map((column) => __spreadProps(__spreadValues({}, column), {
-      Header: typeof column.Header === "string" ? column.Header : /* @__PURE__ */ jsxs("div", { children: [
-        column.Header.name,
+      header: (context) => 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 || "",
+            id: `tooltip-${column.header.name}`,
+            content: column.header.tooltip || "",
             verticalAlign: -2
           }
         )
       ] }),
-      accessor: column.accessor.toString(),
-      Cell: ({ value }) => {
-        let content = value;
+      accessorKey: column.accessorKey.toString(),
+      cell: (context) => {
+        const value = context.getValue();
+        let content = null;
         let icon = null;
         if (isObjectCell(value)) {
+          const base64icon = value.base64icon ? /* @__PURE__ */ jsx(Base64Icon, { src: value.base64icon, alt: "Icon" }) : null;
           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,
+              base64icon ? base64icon : icon,
               value.text
             ] });
           } else {
             content = /* @__PURE__ */ jsxs(Fragment, { children: [
-              icon,
+              base64icon ? base64icon : icon,
               value.text
             ] });
           }
+        } else {
+          content = value;
         }
         if (isLinkAndClipboardCell(value)) {
           const copyButton = canWriteToClipboard && /* @__PURE__ */ jsx(
@@ -211,8 +223,17 @@ function Table({
     })),
     [columns, canWriteToClipboard, onClickCopy, clipboardCallbacks]
   );
-  const tableInstance = useTable({ columns: mappedColumns, data });
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;
+  const tableInstance = useReactTable({
+    columns: mappedColumns,
+    data,
+    state: {
+      sorting
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel()
+    // debugTable: true
+  });
   function onClickDataRow(event, row) {
     const onClickRowResult = onClickRow ? onClickRow(row) : null;
     if (onClickRowResult) {
@@ -230,52 +251,46 @@ function Table({
     }
   }
   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);
-                  }
+    /* @__PURE__ */ jsxs(
+      StyledTable,
+      {
+        clickable: Boolean(onClickRow),
+        rowHoverEffect,
+        children: [
+          /* @__PURE__ */ jsx("thead", {
+            // Loop over the header rows
+            children: tableInstance.getHeaderGroups().map((headerGroup) => {
+              return /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx("th", { children: header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              ) }, header.id)) }, headerGroup.id);
+            })
+          }),
+          /* @__PURE__ */ jsx("tbody", {
+            // Loop over the table rows
+            children: tableInstance.getRowModel().rows.map((row) => {
+              return /* @__PURE__ */ jsx(
+                "tr",
+                {
+                  onClick: (event) => onClickDataRow(event, row),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                      onClickDataRow(event, row);
+                    }
+                  },
+                  tabIndex: 0,
+                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { children: flexRender(
+                    cell.column.columnDef.cell,
+                    cell.getContext()
+                  ) }, cell.id))
                 },
-                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")
-                  }));
-                })
-              })
-            )
-          );
-        })
-      }))
-    ] })),
+                row.id
+              );
+            })
+          })
+        ]
+      }
+    ),
     emptyState,
     loading && /* @__PURE__ */ jsx(Loading, {})
   ] });
@@ -325,6 +340,13 @@ var CopyButton = styled.span`
 var LineClampSpan = styled.span`
   ${lineClamp(2)}
 `;
+var Base64Icon = styled.img`
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  border-radius: 4px;
+  margin-right: 12px;
+`;
 var cellPaddingPx = 15;
 var StyledTable = styled.table`
   position: relative;
@@ -348,7 +370,8 @@ var StyledTable = styled.table`
     max-width: 200px;
     text-align: left;
     padding: ${cellPaddingPx}px 0px;
-    border-bottom: 1px solid ${({ theme }) => theme.c1Neutral};
+    border-bottom: 1px solid
+      ${({ theme }) => themeOrWithKey("c1Neutral", "c2Neutral")({ theme })};
     padding: ${cellPaddingPx}px;
     &:first-of-type {
       padding-left: 0px;
@@ -361,32 +384,13 @@ var StyledTable = styled.table`
     }
   }
 
-  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;
-    & > * {
+    & > span {
       overflow: hidden;
       text-overflow: ellipsis;
       display: block;
@@ -409,6 +413,61 @@ var StyledTable = styled.table`
       white-space: normal;
     }
   }
+
+  tr {
+    cursor: ${({ clickable }) => clickable ? "pointer" : "default"};
+    position: relative;
+
+    ${({ rowHoverEffect, theme }) => `
+        &:hover {
+          td {
+            position: relative;
+            &:before {
+              content: "";
+              display: block;
+              position: absolute;
+              pointer-events: none;
+              height: 80%;
+              top: 10%;
+              bottom: 10%;
+              ${rowHoverEffect === "background" ? `background: ${theme.c1Neutral};` : `
+                    border: 1px solid ${themeOrWithKey(
+  "c1Neutral",
+  "c2Neutral"
+)({ theme })};
+                    border-left-width: 0;
+                    border-right-width: 0;
+                  `}
+              left: 0;
+              right: 0;
+              width: 100%;
+              z-index: -1;
+            }
+            &:first-of-type {
+              overflow: visible;
+              &:before {
+                border-top-left-radius: 32px;
+                border-bottom-left-radius: 32px;
+                transform: translateX(-12px);
+                width: calc(100% + 12px);
+                ${rowHoverEffect === "border" ? "border-left-width: 1px;" : ""}
+              }
+            }
+            &:last-of-type {
+              overflow: visible;
+              &:before {
+                border-top-right-radius: 32px;
+                border-bottom-right-radius: 32px;
+                transform: translateX(12px);
+                width: calc(100% + 12px);
+                left: auto;
+                ${rowHoverEffect === "border" ? "border-right-width: 1px;" : ""}
+              }
+            }
+          }
+        }
+        `}
+  }
 `;
 
 export {

package/dist/chunk-MEPSDTIK.cjs

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/hooks/useNumberInput/utils/fixedDecimalValue.ts
+function fixedDecimalValue(value, decimalSeparator, fixedDecimalLength) {
+  if (decimalSeparator.length !== 1) {
+    throw new Error("decimalSeparator must be a single character.");
+  }
+  const decimalIndex = value.indexOf(decimalSeparator);
+  if (fixedDecimalLength === void 0) {
+    return value;
+  }
+  if (decimalIndex === -1) {
+    const paddedDecimals = "0".repeat(fixedDecimalLength);
+    return `${value}${decimalSeparator}${paddedDecimals}`;
+  }
+  const integerPart = value.substring(0, decimalIndex);
+  let decimalPart = value.substring(decimalIndex + 1);
+  if (decimalPart === "") {
+    decimalPart = "0".repeat(fixedDecimalLength);
+    return `${integerPart}${decimalSeparator}${decimalPart}`;
+  }
+  const currentDecimalLength = decimalPart.length;
+  if (currentDecimalLength < fixedDecimalLength) {
+    const paddingLength = fixedDecimalLength - currentDecimalLength;
+    const paddedDecimal = decimalPart + "0".repeat(paddingLength);
+    return `${integerPart}${decimalSeparator}${paddedDecimal}`;
+  } else if (currentDecimalLength > fixedDecimalLength) {
+    const trimmedDecimal = decimalPart.substring(0, fixedDecimalLength);
+    return `${integerPart}${decimalSeparator}${trimmedDecimal}`;
+  } else {
+    return value;
+  }
+}
+
+
+
+exports.fixedDecimalValue = fixedDecimalValue;

package/dist/{chunk-NSF6SD2W.js → chunk-MGSIBRTB.js}

@@ -1,46 +1,46 @@
 import {
-  useLiveRef
-} from "./chunk-NBCCPGA4.js";
+  isReactNode
+} from "./chunk-PEK53X7W.js";
 import {
   ProgressBar
-} from "./chunk-U6IOG5DK.js";
-import {
-  Drawer
-} from "./chunk-UP5BXY7S.js";
+} from "./chunk-TGNI6OJP.js";
 import {
   IconWithCircleBackground
-} from "./chunk-MPZNCZGH.js";
+} from "./chunk-7RSSKCSY.js";
+import {
+  Drawer
+} from "./chunk-CAS7BGWD.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
+import {
+  setDefaultReactNodesTypography
+} from "./chunk-JZ4RXNUO.js";
+import {
+  toReactNodes
+} from "./chunk-C3PR3QMX.js";
+import {
+  overflowAutoWithoutScrollbars
+} from "./chunk-OFNX3IEO.js";
 import {
   Button,
   ButtonSelector
-} from "./chunk-4EXNT44R.js";
+} from "./chunk-ZR5RJNK6.js";
 import {
   UnstyledButton
-} from "./chunk-I5WDNJY3.js";
+} from "./chunk-WS4ZV4J2.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
-import {
-  setDefaultReactNodesTypography
-} from "./chunk-6GJZZ2PX.js";
-import {
-  toReactNodes
-} from "./chunk-3NZOR3KT.js";
-import {
-  overflowAutoWithoutScrollbars
-} from "./chunk-A4MP3LYH.js";
 import {
   Icon
-} from "./chunk-RMZQSXO2.js";
+} from "./chunk-HOGSXW62.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-RNCUEVKR.js";
+} from "./chunk-WXQAFT6L.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
@@ -48,14 +48,23 @@ import {
   bp,
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
+import {
+  useLiveRef
+} from "./chunk-UDFJ6IWI.js";
 import {
   __objRest,
   __spreadValues
-} from "./chunk-CWMXXUWU.js";
+} from "./chunk-W7FAWX6T.js";
 
 // src/components/Modal.tsx
 import styled from "@emotion/styled";
-import React, { Fragment, useEffect, useLayoutEffect, useRef } from "react";
+import React, {
+  Fragment,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
 import ReactDOM from "react-dom";
 import { Fragment as Fragment2, jsx, jsxs } from "@emotion/react/jsx-runtime";
 function isSubmitLinkWithHref(submitLink) {
@@ -77,6 +86,7 @@ function Modal({
   submitLoading,
   submitLoadingKind,
   submitText,
+  submitIcon,
   submitLink,
   cancelText = "Cancel",
   firstFocusRef,
@@ -86,6 +96,7 @@ function Modal({
   autoFocus = true,
   width = 460,
   progressBar,
+  buttonOrder,
   buttonLayout = "horizontal",
   extraActions,
   handleBack,
@@ -94,6 +105,7 @@ function Modal({
   topLeftIcon
 }) {
   const visibleChangedRef = useRef(false);
+  const [visibleChanged, setVisibleChanged] = useState(false);
   const nodeRef = useRef(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
   const ref = firstFocusRef || defaultFirstFocusRef;
@@ -106,9 +118,14 @@ function Modal({
   useEffect(() => {
     if (visible !== visibleChangedRef.current) {
       visibleChangedRef.current = visible;
+      setVisibleChanged(true);
     }
   }, [visible]);
-  const visibleChanged = visible !== visibleChangedRef.current;
+  useEffect(() => {
+    if (visibleChanged) {
+      setVisibleChanged(false);
+    }
+  }, [visibleChanged]);
   useEffect(() => {
     prevFocusedElement.current = document.activeElement;
     const elementToAppendTo = appendToElement != null ? appendToElement : document.body;
@@ -179,6 +196,7 @@ function Modal({
   }
   function onSubmitForm(e) {
     e.preventDefault();
+    e.stopPropagation();
     if (!submitDisabled && onSubmit) {
       onSubmit();
     }
@@ -192,12 +210,14 @@ function Modal({
   }
   const linkIsHref = isSubmitLinkWithHref(submitLink);
   const linkIsRoute = !linkIsHref && submitLink;
+  const displayCancelAbove = !!buttonOrder ? buttonOrder === "cancel-first" : !isSm;
+  const displayCancelBelow = !!buttonOrder ? buttonOrder === "submit-first" : isSm;
   const buttonContent = /* @__PURE__ */ jsxs(Fragment2, { children: [
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
       var _b = _a, { placement, text } = _b, rest = __objRest(_b, ["placement", "text"]);
       return /* @__PURE__ */ jsx(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
     }),
-    !isSm && !cancelHidden && /* @__PURE__ */ jsx(
+    displayCancelAbove && !cancelHidden && /* @__PURE__ */ jsx(
       Button,
       {
         disabled: cancelDisabled,
@@ -210,6 +230,7 @@ function Modal({
       {
         kind: "primary",
         disabled: submitDisabled,
+        icon: submitIcon,
         text: submitText != null ? submitText : "Continue",
         loading: submitLoading,
         loadingKind: submitLoadingKind,
@@ -220,7 +241,14 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: cancelText }),
+    displayCancelBelow && !cancelHidden && /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: cancelDisabled,
+        onClick: onClickCancel,
+        text: cancelText
+      }
+    ),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
       var _d = _c, { placement, text } = _d, rest = __objRest(_d, ["placement", "text"]);
       return /* @__PURE__ */ jsx(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
@@ -252,7 +280,11 @@ function Modal({
   }
   let topContentNode = null;
   if (topContent) {
-    topContentNode = /* @__PURE__ */ jsx("div", { css: { marginBottom: Spacing.px.xl }, children: /* @__PURE__ */ jsx(IconWithCircleBackground, __spreadValues({}, topContent)) });
+    if (isReactNode(topContent)) {
+      topContentNode = topContent;
+    } else {
+      topContentNode = /* @__PURE__ */ jsx("div", { css: { marginBottom: Spacing.px.xl }, children: /* @__PURE__ */ jsx(IconWithCircleBackground, __spreadValues({}, topContent)) });
+    }
   }
   const modalContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     progressBar ? /* @__PURE__ */ jsx("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ jsx(
@@ -393,12 +425,13 @@ var ModalContent = styled.div`
   display: flex;
   flex-direction: column;
 
-  ${({ ghost, width }) => `
+  ${({ ghost, smKind, width }) => `
     ${ghost ? "" : standardBorderRadius(16)}
     width: ${width}px;
   `}
 
   ${({ smKind }) => smKind === "fullscreen" ? bp.sm(`
+          border-radius: 0px;
           width: 100%;
           height: 100dvh;
         `) : ""}