@layerfi/components 0.1.102-alpha → 0.1.102-alpha.2

package/dist/esm/index.mjs

@@ -5570,7 +5570,7 @@ import { useState as useState8 } from "react";
 import { useReducer, useEffect as useEffect4 } from "react";
 
 // package.json
-var version = "0.1.102-alpha";
+var version = "0.1.102-alpha.2";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -11540,20 +11540,34 @@ function ModalActions({ children }) {
 }
 
 // src/components/ui/Stack/Stack.tsx
+import { forwardRef as forwardRef11 } from "react";
 import classNames22 from "classnames";
 import { jsx as jsx71 } from "react/jsx-runtime";
 var CLASS_NAME2 = "Layer__Stack";
-function Stack(_a) {
-  var _b = _a, { align, children, direction, gap, justify, pbs, pbe, pis, pie, fluid, className } = _b, restProps = __objRest(_b, ["align", "children", "direction", "gap", "justify", "pbs", "pbe", "pis", "pie", "fluid", "className"]);
-  const dataProperties = toDataProperties({ align, direction, gap, justify, pbs, pbe, pis, pie, fluid });
-  return /* @__PURE__ */ jsx71("div", __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames22(CLASS_NAME2, className), children }));
-}
-function VStack(props) {
-  return /* @__PURE__ */ jsx71(Stack, __spreadProps(__spreadValues({}, props), { direction: "column" }));
-}
-function HStack(props) {
-  return /* @__PURE__ */ jsx71(Stack, __spreadProps(__spreadValues({}, props), { direction: "row" }));
-}
+var Stack = forwardRef11(
+  (_a, ref) => {
+    var _b = _a, { align, children, direction, gap, justify, pbs, pbe, pis, pie, fluid, className } = _b, restProps = __objRest(_b, ["align", "children", "direction", "gap", "justify", "pbs", "pbe", "pis", "pie", "fluid", "className"]);
+    const dataProperties = toDataProperties({ align, direction, gap, justify, pbs, pbe, pis, pie, fluid });
+    return /* @__PURE__ */ jsx71(
+      "div",
+      __spreadProps(__spreadValues(__spreadValues({
+        ref
+      }, restProps), dataProperties), {
+        className: classNames22(CLASS_NAME2, className),
+        children
+      })
+    );
+  }
+);
+Stack.displayName = "Stack";
+var VStack = forwardRef11((props, ref) => {
+  return /* @__PURE__ */ jsx71(Stack, __spreadProps(__spreadValues({}, props), { ref, direction: "column" }));
+});
+VStack.displayName = "VStack";
+var HStack = forwardRef11((props, ref) => {
+  return /* @__PURE__ */ jsx71(Stack, __spreadProps(__spreadValues({}, props), { ref, direction: "row" }));
+});
+HStack.displayName = "HStack";
 var Spacer = () => /* @__PURE__ */ jsx71("div", { className: "Layer__Spacer" });
 
 // src/components/utility/ConditionalList.tsx
@@ -12225,39 +12239,6 @@ var Select = ({
 // src/components/Input/InputWithBadge.tsx
 import classNames28 from "classnames";
 import { jsx as jsx84, jsxs as jsxs47 } from "react/jsx-runtime";
-var InputWithBadge = (_a) => {
-  var _b = _a, {
-    className,
-    isInvalid,
-    errorMessage,
-    leftText,
-    badge,
-    variant = "default" /* DEFAULT */
-  } = _b, props = __objRest(_b, [
-    "className",
-    "isInvalid",
-    "errorMessage",
-    "leftText",
-    "badge",
-    "variant"
-  ]);
-  const baseClassName = classNames28(
-    "Layer__input",
-    isInvalid ? "Layer__input--error" : "",
-    leftText ? "Layer__input--with-left-text" : "",
-    className
-  );
-  return /* @__PURE__ */ jsxs47(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
-    /* @__PURE__ */ jsxs47(TooltipTrigger, { className: "Layer__input-tooltip", children: [
-      /* @__PURE__ */ jsxs47("div", { className: "Layer__input-with-badge", children: [
-        /* @__PURE__ */ jsx84("input", __spreadProps(__spreadValues({}, props), { className: baseClassName })),
-        badge && /* @__PURE__ */ jsx84(Badge, { variant, children: badge })
-      ] }),
-      leftText && /* @__PURE__ */ jsx84("span", { className: "Layer__input-left-text", children: leftText })
-    ] }),
-    /* @__PURE__ */ jsx84(TooltipContent, { className: "Layer__tooltip", children: errorMessage })
-  ] });
-};
 
 // src/components/Input/MultiSelect.tsx
 import { useCallback as useCallback4 } from "react";
@@ -12326,6 +12307,7 @@ var AmountInput = (_a) => {
     leftText,
     errorMessage,
     isInvalid,
+    badge,
     placeholder = "$0.00"
   } = _b, props = __objRest(_b, [
     "onChange",
@@ -12333,30 +12315,38 @@ var AmountInput = (_a) => {
     "leftText",
     "errorMessage",
     "isInvalid",
+    "badge",
     "placeholder"
   ]);
   const baseClassName = classNames30(
     "Layer__input Layer__amount-input",
+    badge ? "Layer__amount-input--align-left" : "Layer__amount-input--align-right",
     isInvalid ? "Layer__input--error" : "",
     leftText ? "Layer__input--with-left-text" : "",
     className
   );
+  const currencyInput = /* @__PURE__ */ jsx86(
+    CurrencyInput,
+    __spreadProps(__spreadValues({}, props), {
+      intlConfig: {
+        locale: "en-US",
+        currency: "USD"
+      },
+      prefix: "$",
+      placeholder,
+      decimalScale: 2,
+      decimalsLimit: 2,
+      disableAbbreviations: true,
+      onValueChange: onChange,
+      className: baseClassName
+    })
+  );
   return /* @__PURE__ */ jsxs49(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
     /* @__PURE__ */ jsxs49(TooltipTrigger, { className: "Layer__input-tooltip", children: [
-      /* @__PURE__ */ jsx86(
-        CurrencyInput,
-        __spreadProps(__spreadValues({}, props), {
-          intlConfig: {
-            locale: "en-US",
-            currency: "USD"
-          },
-          prefix: "$",
-          placeholder,
-          decimalsLimit: 2,
-          onValueChange: onChange,
-          className: baseClassName
-        })
-      ),
+      badge ? /* @__PURE__ */ jsxs49("div", { className: "Layer__input-with-badge", children: [
+        currencyInput,
+        badge
+      ] }) : currencyInput,
       leftText && /* @__PURE__ */ jsx86("span", { className: "Layer__input-left-text", children: leftText })
     ] }),
     /* @__PURE__ */ jsx86(TooltipContent, { className: "Layer__tooltip", children: errorMessage })
@@ -13036,10 +13026,14 @@ var humanizeEnum = (text) => {
 };
 var convertNumberToCurrency = (amount) => {
   if (typeof amount !== "number" || isNaN(amount)) return "";
-  const formattedValue = amount.toLocaleString("en-US");
-  return formattedValue.length > 0 ? `$${formattedValue}` : "";
+  const formattedValue = amount.toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+  return formattedValue;
 };
-var convertCurrencyToNumber = (amount) => amount.replace("$", "").replace(",", "").replace(/[^\d.]/g, "").replace(/(?!^)-/g, "").replace(/(\..*)\./g, "$1").replace(/(\.\d{2})\d+/, "$1").replace(/^0(?!\.)/, "");
 var convertToCents = (amount) => {
   try {
     if (amount === void 0 || amount === null) {
@@ -14167,7 +14161,6 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel()
   });
-  const tableContainerRef = useRef9(null);
   return /* @__PURE__ */ jsxs59("div", { className: `${className} Layer__csv-upload__validate-csv-table__container`, children: [
     /* @__PURE__ */ jsx100("table", { className: "Layer__table", children: /* @__PURE__ */ jsx100("thead", { className: "Layer__csv-upload__validate-csv-table__thead", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx100("tr", { className: "Layer__csv-upload__validate-csv-table__header-row", children: headerGroup.headers.map((header) => {
       const headerCellClassName = classNames35(
@@ -14177,19 +14170,20 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
       );
       return /* @__PURE__ */ jsx100("th", { className: headerCellClassName, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
     }) }, headerGroup.id)) }) }),
-    /* @__PURE__ */ jsx100("div", { ref: tableContainerRef, className: "Layer__csv-upload__validate-csv-table__scroll_container", children: /* @__PURE__ */ jsx100("table", { className: "Layer__table", children: /* @__PURE__ */ jsx100(ValidateCsvTableBody, { table, tableContainerRef }) }) })
+    /* @__PURE__ */ jsx100(ValidateCsvTableBody, { table })
   ] });
 }
-function ValidateCsvTableBody({ table, tableContainerRef }) {
+function ValidateCsvTableBody({ table }) {
   const { rows } = table.getRowModel();
+  const containerRef = useRef9(null);
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
     estimateSize: () => ROW_HEIGHT,
-    getScrollElement: () => tableContainerRef.current,
+    getScrollElement: () => containerRef.current,
     measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element == null ? void 0 : element.getBoundingClientRect().height : void 0,
     overscan: 5
   });
-  return /* @__PURE__ */ jsxs59("tbody", { children: [
+  return /* @__PURE__ */ jsx100("div", { ref: containerRef, className: "Layer__csv-upload__validate-csv-table__scroll_container", children: /* @__PURE__ */ jsx100("table", { className: "Layer__table", children: /* @__PURE__ */ jsxs59("tbody", { children: [
     /* @__PURE__ */ jsx100("tr", { style: { height: BODY_HEIGHT }, children: /* @__PURE__ */ jsx100("td", { style: { height: BODY_HEIGHT, padding: 0 }, colSpan: table.getAllColumns().length - 1 }) }),
     rowVirtualizer.getVirtualItems().map((virtualRow) => {
       const row = rows[virtualRow.index];
@@ -14203,7 +14197,7 @@ function ValidateCsvTableBody({ table, tableContainerRef }) {
         row.id
       );
     })
-  ] });
+  ] }) }) });
 }
 function ValidateCsvTableRow({ row, virtualRow, rowVirtualizer }) {
   const tableRowClassName = classNames35(
@@ -14305,17 +14299,18 @@ function UploadTransactions({ onComplete }) {
     setFile(file2);
     setParseCsvResponse(null);
   }, []);
-  const goBack = useCallback12((step = 1) => setCurrentStep(currentStep - step), [currentStep]);
-  const goForward = useCallback12((step = 1) => setCurrentStep(currentStep + step), [currentStep]);
   const onParseCsv = useCallback12((parseCsvResponse2) => {
     setParseCsvResponse(parseCsvResponse2);
-    goForward();
-  }, [goForward]);
+    setCurrentStep(1 /* ValidateCsv */);
+  }, []);
+  const goRestartFlow = useCallback12(() => {
+    setCurrentStep(0 /* UploadCsv */);
+  }, []);
   const onReupload = useCallback12(() => {
     setFile(null);
     setParseCsvResponse(null);
-    goBack();
-  }, [goBack]);
+    setCurrentStep(0 /* UploadCsv */);
+  }, []);
   return /* @__PURE__ */ jsx102("section", { className: "Layer__component", children: /* @__PURE__ */ jsxs61(
     Wizard,
     {
@@ -14351,7 +14346,7 @@ function UploadTransactions({ onComplete }) {
           {
             selectedAccountId: selectedAccount.value,
             parseCsvResponse,
-            onGoBack: goBack,
+            onGoBack: goRestartFlow,
             onReupload
           }
         )
@@ -15295,7 +15290,7 @@ var CategorySelect = ({
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
 import {
-  forwardRef as forwardRef12,
+  forwardRef as forwardRef13,
   useImperativeHandle as useImperativeHandle2,
   useState as useState28,
   useCallback as useCallback14,
@@ -15430,7 +15425,7 @@ var Trash = (_a) => {
 var Trash_default = Trash;
 
 // src/components/BankTransactionReceipts/BankTransactionReceipts.tsx
-import { forwardRef as forwardRef11, useImperativeHandle } from "react";
+import { forwardRef as forwardRef12, useImperativeHandle } from "react";
 
 // src/contexts/ReceiptsContext/ReceiptsContext.ts
 import { createContext as createContext11, useContext as useContext18 } from "react";
@@ -15750,12 +15745,12 @@ var openReceiptInNewTab = (url, index) => (e) => {
       `);
   }
 };
-var BankTransactionReceiptsWithProvider = forwardRef11((_a, ref) => {
+var BankTransactionReceiptsWithProvider = forwardRef12((_a, ref) => {
   var _b = _a, { bankTransaction, isActive } = _b, props = __objRest(_b, ["bankTransaction", "isActive"]);
   return /* @__PURE__ */ jsx118(ReceiptsProvider, { bankTransaction, isActive, children: /* @__PURE__ */ jsx118(BankTransactionReceipts, __spreadProps(__spreadValues({}, props), { ref })) });
 });
 BankTransactionReceiptsWithProvider.displayName = "BankTransactionReceiptsWithProvider";
-var BankTransactionReceipts = forwardRef11(
+var BankTransactionReceipts = forwardRef12(
   ({
     classNamePrefix = "Layer",
     floatingActions = false,
@@ -16619,7 +16614,7 @@ var validateSplit = (splitData) => {
   });
   return valid;
 };
-var ExpandedBankTransactionRow = forwardRef12(
+var ExpandedBankTransactionRow = forwardRef13(
   ({
     bankTransaction,
     isOpen = false,
@@ -19472,7 +19467,7 @@ function useBankTransactionsDownload() {
 }
 
 // src/components/utility/InvisibleDownload.tsx
-import { forwardRef as forwardRef13, useCallback as useCallback15, useImperativeHandle as useImperativeHandle3, useRef as useRef20 } from "react";
+import { forwardRef as forwardRef14, useCallback as useCallback15, useImperativeHandle as useImperativeHandle3, useRef as useRef20 } from "react";
 
 // src/utils/delay/runDelayed.ts
 var DEFAULT_DELAY_MS = 50;
@@ -19493,7 +19488,7 @@ function useInvisibleDownload() {
   return { invisibleDownloadRef, triggerInvisibleDownload };
 }
 var CLASS_NAME9 = "Layer__InvisibleDownload";
-var InvisibleDownload = forwardRef13((_props, ref) => {
+var InvisibleDownload = forwardRef14((_props, ref) => {
   const internalRef = useRef20(null);
   useImperativeHandle3(ref, () => ({
     trigger: (_0) => __async(null, [_0], function* ({ url }) {
@@ -23156,11 +23151,11 @@ import { useContext as useContext31 } from "react";
 
 // src/components/Header/Header.tsx
 import {
-  forwardRef as forwardRef14
+  forwardRef as forwardRef15
 } from "react";
 import classNames59 from "classnames";
 import { jsx as jsx191 } from "react/jsx-runtime";
-var Header3 = forwardRef14(
+var Header3 = forwardRef15(
   ({ className, children, style, sticky, asHeader, rounded }, ref) => {
     const baseClassName = classNames59(
       "Layer__header",
@@ -23256,7 +23251,7 @@ var Panel = ({
 };
 
 // src/components/View/View.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 
 // src/components/ViewHeader/ViewHeader.tsx
 import classNames63 from "classnames";
@@ -23271,7 +23266,7 @@ var ViewHeader = ({ title, className, children }) => {
 // src/components/View/View.tsx
 import classNames64 from "classnames";
 import { jsx as jsx196, jsxs as jsxs126 } from "react/jsx-runtime";
-var View = forwardRef15(
+var View = forwardRef16(
   ({
     title,
     showHeader = true,
@@ -23495,10 +23490,10 @@ function ProfitAndLossSummariesMiniChart({
 }
 
 // src/components/ui/Typography/MoneyText.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef17 } from "react";
 import { jsx as jsx200 } from "react/jsx-runtime";
 var CLASS_NAME10 = "Layer__MoneyText";
-var MoneySpan = forwardRef16(
+var MoneySpan = forwardRef17(
   (_a, ref) => {
     var _b = _a, { amount, bold, size } = _b, restProps = __objRest(_b, ["amount", "bold", "size"]);
     const dataProperties = toDataProperties({
@@ -27983,20 +27978,19 @@ var JournalFormEntryLines = ({
                 className: "Layer__journal__form__input-group__line-item",
                 children: [
                   /* @__PURE__ */ jsx241(InputGroup, { name: direction, label: "Amount", inline: true, children: /* @__PURE__ */ jsx241(
-                    InputWithBadge,
+                    AmountInput,
                     {
                       name: direction,
-                      placeholder: "$0.00",
-                      value: convertNumberToCurrency(item.amount),
+                      onChange: (value) => changeFormData("amount", value, idx2),
+                      value: item.amount,
                       disabled: sendingForm,
-                      badge: humanizeEnum(direction),
-                      variant: item.direction === "CREDIT" ? "success" /* SUCCESS */ : "warning" /* WARNING */,
-                      onChange: (e) => changeFormData(
-                        "amount",
-                        convertCurrencyToNumber(
-                          e.target.value
-                        ),
-                        idx2
+                      allowNegativeValue: false,
+                      badge: /* @__PURE__ */ jsx241(
+                        Badge,
+                        {
+                          variant: item.direction === "CREDIT" ? "success" /* SUCCESS */ : "warning" /* WARNING */,
+                          children: humanizeEnum(direction)
+                        }
                       ),
                       isInvalid: Boolean(
                         (_a = form == null ? void 0 : form.errors) == null ? void 0 : _a.lineItems.find(

package/dist/index.css

@@ -3217,7 +3217,10 @@
   padding: var(--spacing-2xs);
   color: var(--label-color);
 }
-.Layer__amount-input {
+.Layer__amount-input--align-left {
+  text-align: left;
+}
+.Layer__amount-input--align-right {
   text-align: right;
 }
 .Layer__textarea {

package/dist/index.d.ts

@@ -2639,14 +2639,16 @@ declare module '@layerfi/components/components/IconBox/index' {
 
 }
 declare module '@layerfi/components/components/Input/AmountInput' {
+  import { type ReactNode } from 'react';
   import { CurrencyInputProps } from 'react-currency-input-field';
   export interface AmountInputProps extends Omit<CurrencyInputProps, 'onChange'> {
       onChange?: (value?: string) => void;
       isInvalid?: boolean;
       errorMessage?: string;
       leftText?: string;
+      badge?: ReactNode;
   }
-  export const AmountInput: ({ onChange, className, leftText, errorMessage, isInvalid, placeholder, ...props }: AmountInputProps) => import("react/jsx-runtime").JSX.Element;
+  export const AmountInput: ({ onChange, className, leftText, errorMessage, isInvalid, badge, placeholder, ...props }: AmountInputProps) => import("react/jsx-runtime").JSX.Element;
 
 }
 declare module '@layerfi/components/components/Input/BusinessTypeSelect' {
@@ -4919,8 +4921,34 @@ declare module '@layerfi/components/components/ui/Stack/Stack' {
       slot?: string;
       className?: string;
   }>;
-  export function VStack(props: StackProps): import("react/jsx-runtime").JSX.Element;
-  export function HStack(props: StackProps): import("react/jsx-runtime").JSX.Element;
+  export const VStack: import("react").ForwardRefExoticComponent<{
+      align?: "start" | "center";
+      gap?: Spacing;
+      justify?: "start" | "center" | "end";
+      pbs?: Spacing;
+      pbe?: Spacing;
+      pis?: Spacing;
+      pie?: Spacing;
+      fluid?: boolean;
+      slot?: string;
+      className?: string;
+  } & {
+      children?: import("react").ReactNode | undefined;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+  export const HStack: import("react").ForwardRefExoticComponent<{
+      align?: "start" | "center";
+      gap?: Spacing;
+      justify?: "start" | "center" | "end";
+      pbs?: Spacing;
+      pbe?: Spacing;
+      pis?: Spacing;
+      pie?: Spacing;
+      fluid?: boolean;
+      slot?: string;
+      className?: string;
+  } & {
+      children?: import("react").ReactNode | undefined;
+  } & import("react").RefAttributes<HTMLDivElement>>;
   export const Spacer: () => import("react/jsx-runtime").JSX.Element;
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.102-alpha",
+  "version": "0.1.102-alpha.2",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",