@lightsparkdev/ui 1.0.8 → 1.0.10

package/dist/{chunk-VNFSKZW2.cjs → chunk-KEO4UBBQ.cjs}

@@ -1,6 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkPYL3O7AFcjs = require('./chunk-PYL3O7AF.cjs');
+var _chunkNCH72LUBcjs = require('./chunk-NCH72LUB.cjs');
+
+
+var _chunkGDLQ54TNcjs = require('./chunk-GDLQ54TN.cjs');
 
 // src/components/Checkbox.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -17,8 +20,24 @@ function Checkbox({
   label,
   mt = 0,
   alignItems = "center",
-  disabled = false
+  disabled = false,
+  typography: typographyProp
 }) {
+  const defaultTypography = {
+    type: (typographyProp == null ? void 0 : typographyProp.type) || "Body",
+    size: (typographyProp == null ? void 0 : typographyProp.size) || "Medium",
+    color: (typographyProp == null ? void 0 : typographyProp.color) || "text"
+  };
+  const defaultTypographyMap = {
+    link: defaultTypography,
+    text: defaultTypography,
+    nextLink: defaultTypography
+  };
+  const nodesWithTypography = _chunkNCH72LUBcjs.setDefaultReactNodesTypography.call(void 0, 
+    label,
+    defaultTypographyMap
+  );
+  const content = _chunkGDLQ54TNcjs.toReactNodes.call(void 0, nodesWithTypography);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CheckboxContainer, { mt, alignItems, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       StyledCheckbox,
@@ -36,7 +55,7 @@ function Checkbox({
         }
       }
     ),
-    label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckboxLabel, { htmlFor: id, children: label })
+    label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckboxLabel, { htmlFor: id, children: content })
   ] });
 }
 var StyledCheckbox = _styled2.default.input`
@@ -58,7 +77,7 @@ var StyledCheckbox = _styled2.default.input`
 `;
 var CheckboxContainer = _styled2.default.span`
   display: flex;
-  margin-top: ${({ mt }) => mt}px;
+  ${({ mt }) => mt === 0 ? "" : `margin-top: ${mt}px;`}
   align-items: ${({ alignItems }) => alignItems};
 
   & + & {
@@ -68,7 +87,6 @@ var CheckboxContainer = _styled2.default.span`
 var CheckboxLabel = _styled2.default.label`
   margin-left: 12px;
   cursor: pointer;
-  height: ${_chunkPYL3O7AFcjs.standardLineHeightEms}em;
 `;
 
 

package/dist/chunk-KNBAVK6L.js

@@ -0,0 +1,53 @@
+import {
+  InfoIconTooltip
+} from "./chunk-RSTCESAL.js";
+import {
+  Label
+} from "./chunk-AXHFR6HR.js";
+import {
+  link
+} from "./chunk-G5IVQ4O3.js";
+import {
+  Icon
+} from "./chunk-NGSQ2OOV.js";
+import {
+  addCommasToDigits
+} from "./chunk-EDN2QDCB.js";
+
+// src/components/SatoshiInputLabel.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function SatoshiInputLabel({
+  text,
+  availableSats,
+  showTooltip = true
+}) {
+  const availableSatsTooltipNode = showTooltip ? /* @__PURE__ */ jsxs(Label, { style: { display: "inline-flex", margin: "0 0 0 3px" }, children: [
+    "available",
+    " ",
+    /* @__PURE__ */ jsx(
+      InfoIconTooltip,
+      {
+        id: "available-balance-tooltip",
+        content: [
+          "Your available balance may differ from your total balance due to operational funds being held on the Lightning Network. ",
+          link({
+            text: "Learn more",
+            externalLink: "https://docs.lightspark.com/lightspark-sdk/api-reference/types/Balances"
+          })
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(Label, { children: [
+    /* @__PURE__ */ jsx("div", { children: text }),
+    /* @__PURE__ */ jsx("div", { children: availableSats !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Icon, { name: "Satoshi", width: 8, mr: 4, verticalAlign: -2 }),
+      addCommasToDigits(Math.floor(availableSats)),
+      availableSatsTooltipNode
+    ] }) })
+  ] });
+}
+
+export {
+  SatoshiInputLabel
+};

package/dist/chunk-KSGW5YL2.js

@@ -0,0 +1,342 @@
+import {
+  DateWidget
+} from "./chunk-QWBJBEYT.js";
+import {
+  DateRangeOperation,
+  MAX_DATE,
+  MIN_DATE,
+  TimeGranularity,
+  endOfDay,
+  startOfDay,
+  subtractTime
+} from "./chunk-NNYCLSJV.js";
+import {
+  Filter
+} from "./chunk-MQVRZOTQ.js";
+import {
+  Select_default
+} from "./chunk-72JQQKA7.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
+import {
+  TextInput
+} from "./chunk-G3FLE2PL.js";
+import {
+  Button
+} from "./chunk-2C73WWPT.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/DataManagerTable/DateFilter.tsx
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+var DatePreset = /* @__PURE__ */ ((DatePreset2) => {
+  DatePreset2["LastHour"] = "Last hour";
+  DatePreset2["Last12Hours"] = "Last 12 hours";
+  DatePreset2["Today"] = "Today";
+  DatePreset2["Last7Days"] = "Last 7 days";
+  DatePreset2["Last14Days"] = "Last 14 days";
+  DatePreset2["Last30Days"] = "Last 30 days";
+  DatePreset2["Custom"] = "Custom";
+  return DatePreset2;
+})(DatePreset || {});
+var SIMPLE_PRESETS = Object.values(DatePreset).filter(
+  (preset) => preset !== "Custom" /* Custom */
+);
+var isDateFilterState = (state) => state.type === "date" /* DATE */;
+var getDefaultDateFilterState = () => ({
+  type: "date" /* DATE */,
+  start: null,
+  end: null,
+  isApplied: false
+});
+var DateFilter = ({
+  updateFilterState,
+  state,
+  isDateOnly = false,
+  presets = SIMPLE_PRESETS
+}) => {
+  const [showCustomOptions, setShowCustomOptions] = useState(
+    state.preset === "Custom" /* Custom */
+  );
+  const [customDateRangeData, setCustomDateRangeData] = useState();
+  useEffect(() => {
+    setShowCustomOptions(state.preset === "Custom" /* Custom */);
+  }, [state]);
+  const updateStateWithCustomRange = (customDateRangeData2) => {
+    setCustomDateRangeData(customDateRangeData2);
+    updateFilterState(__spreadValues({
+      type: "date" /* DATE */,
+      preset: "Custom" /* Custom */,
+      isApplied: true,
+      customRangeOperation: customDateRangeData2.type
+    }, dateRangeOptions[customDateRangeData2.type].getRangeData(
+      customDateRangeData2
+    )));
+  };
+  const dateRangeOptions = {
+    ["is in the last" /* IsInTheLast */]: {
+      type: "is in the last" /* IsInTheLast */,
+      defaultData: {
+        type: "is in the last" /* IsInTheLast */,
+        value: 1,
+        granularity: "hours" /* Hours */
+      },
+      getRangeData: (data) => {
+        const { value, granularity } = data;
+        return {
+          start: subtractTime(/* @__PURE__ */ new Date(), value, granularity),
+          end: /* @__PURE__ */ new Date()
+        };
+      },
+      components: /* @__PURE__ */ jsxs(TimeAndGranularity, { children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            placeholder: "60",
+            onChange: (value) => {
+              updateStateWithCustomRange({
+                type: "is in the last" /* IsInTheLast */,
+                value: parseInt(value) || 0,
+                granularity: customDateRangeData == null ? void 0 : customDateRangeData.granularity
+              });
+            },
+            value: `${customDateRangeData == null ? void 0 : customDateRangeData.value}` || ""
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select_default,
+          {
+            defaultValue: {
+              value: customDateRangeData == null ? void 0 : customDateRangeData.granularity,
+              label: customDateRangeData == null ? void 0 : customDateRangeData.granularity
+            },
+            options: Object.values(TimeGranularity).map((timeGranularity) => ({
+              value: timeGranularity,
+              label: timeGranularity
+            })),
+            onChange: (option) => {
+              if (option) {
+                updateStateWithCustomRange(__spreadProps(__spreadValues({}, customDateRangeData), {
+                  granularity: option.value
+                }));
+              }
+            },
+            zIndex: z.modalContainer
+          }
+        )
+      ] })
+    },
+    ["is equal to" /* IsEqualTo */]: {
+      type: "is equal to" /* IsEqualTo */,
+      defaultData: { type: "is equal to" /* IsEqualTo */, date: /* @__PURE__ */ new Date() },
+      getRangeData: (data) => {
+        const { date } = data;
+        return { start: startOfDay(date), end: endOfDay(date) };
+      },
+      components: /* @__PURE__ */ jsx(
+        DateWidget,
+        {
+          dateRangeOperation: "is equal to" /* IsEqualTo */,
+          onChange: updateStateWithCustomRange,
+          isDateOnly
+        }
+      )
+    },
+    ["is between" /* IsBetween */]: {
+      type: "is between" /* IsBetween */,
+      defaultData: {
+        type: "is between" /* IsBetween */,
+        start: subtractTime(/* @__PURE__ */ new Date(), 7, "days" /* Days */),
+        end: /* @__PURE__ */ new Date()
+      },
+      getRangeData: (data) => {
+        const { start, end } = data;
+        return { start, end };
+      },
+      components: /* @__PURE__ */ jsx(
+        DateWidget,
+        {
+          dateRangeOperation: "is between" /* IsBetween */,
+          onChange: updateStateWithCustomRange,
+          isDateOnly
+        }
+      )
+    },
+    ["is after" /* IsAfter */]: {
+      type: "is after" /* IsAfter */,
+      defaultData: { type: "is after" /* IsAfter */, date: /* @__PURE__ */ new Date() },
+      getRangeData: (data) => {
+        const { date } = data;
+        return { start: date, end: MAX_DATE };
+      },
+      components: /* @__PURE__ */ jsx(
+        DateWidget,
+        {
+          dateRangeOperation: "is after" /* IsAfter */,
+          onChange: updateStateWithCustomRange,
+          isDateOnly
+        }
+      )
+    },
+    ["is before" /* IsBefore */]: {
+      type: "is before" /* IsBefore */,
+      defaultData: { type: "is before" /* IsBefore */, date: /* @__PURE__ */ new Date() },
+      getRangeData: (data) => {
+        const { date } = data;
+        return { start: MIN_DATE, end: date };
+      },
+      components: /* @__PURE__ */ jsx(
+        DateWidget,
+        {
+          dateRangeOperation: "is before" /* IsBefore */,
+          onChange: updateStateWithCustomRange,
+          isDateOnly
+        }
+      )
+    }
+  };
+  const handlePreset = (preset) => {
+    let start = void 0;
+    let end = void 0;
+    switch (preset) {
+      case "Last hour" /* LastHour */:
+        start = subtractTime(/* @__PURE__ */ new Date(), 1, "hours" /* Hours */);
+        end = /* @__PURE__ */ new Date();
+        break;
+      case "Last 12 hours" /* Last12Hours */:
+        start = subtractTime(/* @__PURE__ */ new Date(), 12, "hours" /* Hours */);
+        end = /* @__PURE__ */ new Date();
+        break;
+      case "Today" /* Today */:
+        start = startOfDay(/* @__PURE__ */ new Date());
+        end = endOfDay(/* @__PURE__ */ new Date());
+        break;
+      case "Last 7 days" /* Last7Days */:
+        start = subtractTime(/* @__PURE__ */ new Date(), 7, "days" /* Days */);
+        end = /* @__PURE__ */ new Date();
+        break;
+      case "Last 14 days" /* Last14Days */:
+        start = subtractTime(/* @__PURE__ */ new Date(), 14, "days" /* Days */);
+        end = /* @__PURE__ */ new Date();
+        break;
+      case "Last 30 days" /* Last30Days */:
+        start = subtractTime(/* @__PURE__ */ new Date(), 30, "days" /* Days */);
+        end = /* @__PURE__ */ new Date();
+        break;
+      default:
+        break;
+    }
+    if (start && end) {
+      updateFilterState({
+        type: "date" /* DATE */,
+        preset: state.preset === preset ? void 0 : preset,
+        start,
+        end,
+        isApplied: state.preset !== preset
+      });
+      setShowCustomOptions(false);
+    }
+  };
+  const toggleCustom = () => {
+    if (state.preset === "Custom" /* Custom */) {
+      updateFilterState({
+        type: "date" /* DATE */,
+        preset: void 0,
+        start: null,
+        end: null,
+        isApplied: false
+      });
+      setShowCustomOptions(false);
+      return;
+    }
+    handleSelectCustomRangeOption("is in the last" /* IsInTheLast */);
+    setShowCustomOptions(true);
+  };
+  const handleSelectCustomRangeOption = (operation) => {
+    updateStateWithCustomRange(dateRangeOptions[operation].defaultData);
+  };
+  return /* @__PURE__ */ jsx(Filter, { label: "date", children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs(ButtonsContainer, { children: [
+      presets.map((preset) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          kind: preset === state.preset ? "primary" : void 0,
+          text: preset,
+          size: "ExtraSmall",
+          onClick: () => handlePreset(preset)
+        },
+        preset
+      )),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          kind: state.preset === "Custom" /* Custom */ ? "primary" : void 0,
+          text: "Custom",
+          size: "ExtraSmall",
+          onClick: toggleCustom
+        }
+      )
+    ] }),
+    showCustomOptions && customDateRangeData && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Select_default,
+        {
+          defaultValue: {
+            value: customDateRangeData.type,
+            label: `${customDateRangeData.type}`
+          },
+          options: Object.values(DateRangeOperation).map((operation) => ({
+            value: operation,
+            label: `${operation}`
+          })),
+          onChange: (option) => {
+            if (option) {
+              handleSelectCustomRangeOption(
+                option.value
+              );
+            }
+          },
+          zIndex: z.modalContainer
+        }
+      ),
+      dateRangeOptions[customDateRangeData.type].components
+    ] })
+  ] }) });
+};
+var Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing.px.xs};
+`;
+var ButtonsContainer = styled.div`
+  display: flex;
+  gap: ${Spacing.px.xs};
+  flex-wrap: wrap;
+`;
+var TimeAndGranularity = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${Spacing.px.xs};
+  & > * {
+    flex: 1;
+  }
+
+  input {
+    height: 100%;
+  }
+`;
+
+export {
+  DatePreset,
+  isDateFilterState,
+  getDefaultDateFilterState,
+  DateFilter
+};