@layerfi/components 0.1.114-alpha.4 → 0.1.114-alpha.6

package/dist/cjs/index.cjs

@@ -202,7 +202,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.114-alpha.4";
+const version = "0.1.114-alpha.6";
 const pkg = {
   version
 };
@@ -13344,6 +13344,37 @@ const MonthPicker = ({
     ) }) })
   ] });
 };
+const NewToggleOption = ({
+  label,
+  value
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.ToggleButton, { id: value, className: "Layer__NewToggleOption", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectionIndicator, { className: "Layer__NewToggleOption-SelectionIndicator" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "Layer__NewToggle-Option-Content", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label }) })
+  ] });
+};
+const NewToggle = ({
+  options: options2,
+  selectedKey,
+  onSelectionChange
+}) => {
+  const selectedKeys = selectedKey !== void 0 ? /* @__PURE__ */ new Set([selectedKey]) : /* @__PURE__ */ new Set();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ToggleButtonGroup,
+    {
+      className: "Layer__NewToggle",
+      selectionMode: "single",
+      selectedKeys,
+      onSelectionChange: (keys2) => {
+        const selectedKeysArray = Array.from(keys2);
+        if (selectedKeysArray.length > 0 && onSelectionChange) {
+          onSelectionChange(selectedKeysArray[0]);
+        }
+      },
+      children: options2.map((option) => /* @__PURE__ */ jsxRuntime.jsx(NewToggleOption, __spreadValues({}, option), option.value))
+    }
+  );
+};
 const SmallLoader = ({ size = 28 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -13388,169 +13419,6 @@ const SyncingComponent = ({
     }
   );
 };
-var ToggleSize = /* @__PURE__ */ ((ToggleSize2) => {
-  ToggleSize2["medium"] = "medium";
-  ToggleSize2["small"] = "small";
-  ToggleSize2["xsmall"] = "xsmall";
-  return ToggleSize2;
-})(ToggleSize || {});
-const Toggle = ({
-  name,
-  options: options2,
-  selected,
-  onChange,
-  size = "medium"
-  /* medium */
-}) => {
-  const [currentWidth, setCurrentWidth] = react.useState(0);
-  const [thumbPos, setThumbPos] = react.useState({ left: 0, width: 0 });
-  const [initialized, setInitialized] = react.useState(false);
-  const activeOption = react.useMemo(() => {
-    return selected ? selected : options2.length > 0 ? options2[0].value : void 0;
-  }, [selected, options2]);
-  const toggleRef = useElementSize((_a, _b, c) => {
-    if (c.width && (c == null ? void 0 : c.width) !== currentWidth) {
-      setCurrentWidth(c.width);
-    }
-  });
-  const baseClassName2 = classNames(
-    "Layer__toggle",
-    `Layer__toggle--${size}`,
-    initialized ? "Layer__toggle--initialized" : ""
-  );
-  const handleChange = (e) => {
-    var _a;
-    updateThumbPosition(Number((_a = e.target.getAttribute("data-idx")) != null ? _a : 0));
-    onChange(e);
-  };
-  const updateThumbPosition = (active) => {
-    if (!(toggleRef == null ? void 0 : toggleRef.current)) {
-      return;
-    }
-    const optionsNodes = [...toggleRef.current.children].map((x) => {
-      if (x.className.includes("Layer__tooltip-trigger") && x.children && x.children.length > 0) {
-        return x.children[0];
-      }
-      return x;
-    }).filter((c) => c.className.includes("Layer__toggle-option"));
-    let shift = 0;
-    let width = thumbPos.width;
-    optionsNodes.forEach((c, i) => {
-      if (i < active) {
-        shift = shift + c.offsetWidth;
-      } else if (i === active) {
-        width = c.offsetWidth;
-      }
-    });
-    shift = shift + (size === "medium" ? 2 : 1.5);
-    setThumbPos({ left: shift, width });
-  };
-  react.useEffect(() => {
-    const selectedIndex = getSelectedIndex();
-    updateThumbPosition(selectedIndex);
-    setTimeout(() => {
-      setInitialized(true);
-    }, 400);
-  }, []);
-  react.useEffect(() => {
-    const selectedIndex = getSelectedIndex();
-    updateThumbPosition(selectedIndex);
-  }, [currentWidth]);
-  const getSelectedIndex = () => {
-    const selectedIndex = options2.findIndex(
-      (option) => option.value === activeOption
-    );
-    if (selectedIndex === -1) {
-      return 0;
-    }
-    return selectedIndex;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: baseClassName2, ref: toggleRef, children: [
-    options2.map((option, index2) => {
-      var _a;
-      return /* @__PURE__ */ react.createElement(
-        ToggleOption,
-        __spreadProps(__spreadValues({}, option), {
-          size,
-          key: option.value,
-          name,
-          checked: activeOption === option.value,
-          onChange: handleChange,
-          disabled: (_a = option.disabled) != null ? _a : false,
-          disabledMessage: option.disabledMessage,
-          index: index2
-        })
-      );
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle__thumb", style: __spreadValues({}, thumbPos) })
-  ] });
-};
-const ToggleOption = ({
-  checked,
-  label,
-  name,
-  onChange,
-  value,
-  size: _size,
-  leftIcon,
-  disabled,
-  disabledMessage = "Disabled",
-  style,
-  index: index2
-}) => {
-  const optionClassName = classNames("Layer__toggle-option", {
-    "Layer__toggle-option--active": checked
-  });
-  if (disabled) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "label",
-        {
-          className: optionClassName,
-          "data-checked": checked,
-          style,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "radio",
-                checked,
-                name,
-                onChange,
-                value,
-                disabled,
-                "data-idx": index2
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__toggle-option-content", children: [
-              leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
-              /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label })
-            ] })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: disabledMessage })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: optionClassName, "data-checked": checked, style, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "radio",
-        checked,
-        name,
-        onChange,
-        value,
-        disabled,
-        "data-idx": index2
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__toggle-option-content", children: [
-      leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label })
-    ] })
-  ] });
-};
 var HeadingSize = /* @__PURE__ */ ((HeadingSize2) => {
   HeadingSize2["primary"] = "primary";
   HeadingSize2["secondary"] = "secondary";
@@ -13737,9 +13605,9 @@ const BankTransactionsHeader = ({
     stringOverrides == null ? void 0 : stringOverrides.header,
     withDatePicker
   ]);
-  const onCategorizationDisplayChange = (event) => {
+  const onCategorizationDisplayChange = (value) => {
     setFilters({
-      categorizationStatus: event.target.value === "categorized" ? DisplayState.categorized : event.target.value === "all" ? DisplayState.all : DisplayState.review
+      categorizationStatus: value === "categorized" ? DisplayState.categorized : value === "all" ? DisplayState.all : DisplayState.review
     });
   };
   const headerMenuActions = react.useMemo(() => {
@@ -13775,16 +13643,14 @@ const BankTransactionsHeader = ({
           ) : /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "toggle", justify: "center", gap: "xs", children: [
             collapseHeader && headerTopRow,
             !categorizedOnly && categorizeView && showStatusToggle && /* @__PURE__ */ jsxRuntime.jsx(
-              Toggle,
+              NewToggle,
               {
-                name: "bank-transaction-display",
-                size: mobileComponent === "mobileList" ? ToggleSize.small : ToggleSize.medium,
                 options: [
                   { label: "To Review", value: DisplayState.review },
                   { label: "Categorized", value: DisplayState.categorized }
                 ],
-                selected: display,
-                onChange: onCategorizationDisplayChange
+                selectedKey: display,
+                onSelectionChange: onCategorizationDisplayChange
               }
             )
           ] }),
@@ -16098,6 +15964,169 @@ const MatchForm = ({
     matchFormError && /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: matchFormError })
   ] });
 };
+var ToggleSize = /* @__PURE__ */ ((ToggleSize2) => {
+  ToggleSize2["medium"] = "medium";
+  ToggleSize2["small"] = "small";
+  ToggleSize2["xsmall"] = "xsmall";
+  return ToggleSize2;
+})(ToggleSize || {});
+const Toggle = ({
+  name,
+  options: options2,
+  selected,
+  onChange,
+  size = "medium"
+  /* medium */
+}) => {
+  const [currentWidth, setCurrentWidth] = react.useState(0);
+  const [thumbPos, setThumbPos] = react.useState({ left: 0, width: 0 });
+  const [initialized, setInitialized] = react.useState(false);
+  const activeOption = react.useMemo(() => {
+    return selected ? selected : options2.length > 0 ? options2[0].value : void 0;
+  }, [selected, options2]);
+  const toggleRef = useElementSize((_a, _b, c) => {
+    if (c.width && (c == null ? void 0 : c.width) !== currentWidth) {
+      setCurrentWidth(c.width);
+    }
+  });
+  const baseClassName2 = classNames(
+    "Layer__toggle",
+    `Layer__toggle--${size}`,
+    initialized ? "Layer__toggle--initialized" : ""
+  );
+  const handleChange = (e) => {
+    var _a;
+    updateThumbPosition(Number((_a = e.target.getAttribute("data-idx")) != null ? _a : 0));
+    onChange(e);
+  };
+  const updateThumbPosition = (active) => {
+    if (!(toggleRef == null ? void 0 : toggleRef.current)) {
+      return;
+    }
+    const optionsNodes = [...toggleRef.current.children].map((x) => {
+      if (x.className.includes("Layer__tooltip-trigger") && x.children && x.children.length > 0) {
+        return x.children[0];
+      }
+      return x;
+    }).filter((c) => c.className.includes("Layer__toggle-option"));
+    let shift = 0;
+    let width = thumbPos.width;
+    optionsNodes.forEach((c, i) => {
+      if (i < active) {
+        shift = shift + c.offsetWidth;
+      } else if (i === active) {
+        width = c.offsetWidth;
+      }
+    });
+    shift = shift + (size === "medium" ? 2 : 1.5);
+    setThumbPos({ left: shift, width });
+  };
+  react.useEffect(() => {
+    const selectedIndex = getSelectedIndex();
+    updateThumbPosition(selectedIndex);
+    setTimeout(() => {
+      setInitialized(true);
+    }, 400);
+  }, []);
+  react.useEffect(() => {
+    const selectedIndex = getSelectedIndex();
+    updateThumbPosition(selectedIndex);
+  }, [currentWidth]);
+  const getSelectedIndex = () => {
+    const selectedIndex = options2.findIndex(
+      (option) => option.value === activeOption
+    );
+    if (selectedIndex === -1) {
+      return 0;
+    }
+    return selectedIndex;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: baseClassName2, ref: toggleRef, children: [
+    options2.map((option, index2) => {
+      var _a;
+      return /* @__PURE__ */ react.createElement(
+        ToggleOption,
+        __spreadProps(__spreadValues({}, option), {
+          size,
+          key: option.value,
+          name,
+          checked: activeOption === option.value,
+          onChange: handleChange,
+          disabled: (_a = option.disabled) != null ? _a : false,
+          disabledMessage: option.disabledMessage,
+          index: index2
+        })
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle__thumb", style: __spreadValues({}, thumbPos) })
+  ] });
+};
+const ToggleOption = ({
+  checked,
+  label,
+  name,
+  onChange,
+  value,
+  size: _size,
+  leftIcon,
+  disabled,
+  disabledMessage = "Disabled",
+  style,
+  index: index2
+}) => {
+  const optionClassName = classNames("Layer__toggle-option", {
+    "Layer__toggle-option--active": checked
+  });
+  if (disabled) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          className: optionClassName,
+          "data-checked": checked,
+          style,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "radio",
+                checked,
+                name,
+                onChange,
+                value,
+                disabled,
+                "data-idx": index2
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__toggle-option-content", children: [
+              leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
+              /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: disabledMessage })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: optionClassName, "data-checked": checked, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "radio",
+        checked,
+        name,
+        onChange,
+        value,
+        disabled,
+        "data-idx": index2
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__toggle-option-content", children: [
+      leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label })
+    ] })
+  ] });
+};
 const GET_BANK_TRANSACTION_METADATA_TAG_KEY = "#bank-transaction-metadata";
 function buildKey$I({
   access_token: accessToken,
@@ -17951,6 +17980,7 @@ const BankTransactionRow = ({
                 processing: bankTransaction.processing,
                 active: open,
                 action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                disabled: selectedCategory === null,
                 children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
@@ -18024,6 +18054,7 @@ const BankTransactionRow = ({
                 className: "Layer__bank-transaction__submit-btn",
                 processing: bankTransaction.processing,
                 active: open,
+                disabled: selectedCategory === null,
                 action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
                 children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
@@ -19306,16 +19337,14 @@ const BankTransactionsMobileListItemExpandedRow = ({
   showTooltips
 }) => {
   const [purpose, setPurpose] = react.useState(getInitialPurpose(bankTransaction));
-  const onChangePurpose = (event) => setPurpose(event.target.value);
+  const onChangePurpose = (key) => setPurpose(key);
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pi: "md", gap: "md", pbe: "md", children: [
     showCategorization && /* @__PURE__ */ jsxRuntime.jsx(
-      Toggle,
+      NewToggle,
       {
-        name: `purpose-${bankTransaction.id}`,
-        size: ToggleSize.medium,
         options: PURPOSE_TOGGLE_OPTIONS,
-        selected: purpose,
-        onChange: onChangePurpose
+        selectedKey: purpose,
+        onSelectionChange: onChangePurpose
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -19758,6 +19787,7 @@ const BankTransactionsTable = ({
             SyncingComponent,
             {
               title: "Syncing historical account data",
+              timeSync: 5,
               onRefresh: () => onRefresh && onRefresh()
             }
           ) }) }) : null

package/dist/esm/index.mjs

@@ -51,7 +51,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useState, useContext, useMemo, useEffect, forwardRef, useCallback, useRef, isValidElement, cloneElement, useLayoutEffect, useId, Children, createElement, useImperativeHandle, Component, Fragment as Fragment$1, useReducer } from "react";
+import { createContext, useState, useContext, useMemo, useEffect, forwardRef, useCallback, useRef, isValidElement, cloneElement, useLayoutEffect, useId, Children, useImperativeHandle, createElement, Component, Fragment as Fragment$1, useReducer } from "react";
 import { createStore, useStore } from "zustand";
 import { usePlaidLink } from "react-plaid-link";
 import { formatISO, differenceInDays, isWithinInterval, parseISO, endOfDay, startOfMonth, endOfMonth, min, max, differenceInCalendarMonths, format, isValid, startOfYear, subMonths, getYear, getMonth, subYears, differenceInCalendarYears, sub, differenceInMonths, add, startOfDay, endOfToday, isEqual, addYears, endOfYear, subQuarters, addQuarters, endOfQuarter, startOfQuarter, addMonths, set, startOfToday, endOfYesterday, formatDate as formatDate$1 } from "date-fns";
@@ -65,7 +65,7 @@ import useSWRInfinite from "swr/infinite";
 import useSWRMutation from "swr/mutation";
 import { useStoreWithEqualityFn } from "zustand/traditional";
 import { useFloating, offset, flip, shift, autoUpdate, useHover, useFocus, useDismiss, useRole, useInteractions, useTransitionStyles, useMergeRefs, FloatingPortal } from "@floating-ui/react";
-import { Button as Button$2, Header as Header$3, Label as Label$1, Text as Text$1, ModalOverlay as ModalOverlay$1, Modal as Modal$1, Dialog as Dialog$1, Heading as Heading$2, Group, SearchField as SearchField$1, Input as Input$2, Form as Form$1, TextField as TextField$1, FieldError as FieldError$1, Checkbox as Checkbox$1, DateField as DateField$1, DateInput as DateInput$1, DateSegment as DateSegment$1, DatePicker as DatePicker$2, NumberField as NumberField$1, TextArea as TextArea$1, MenuTrigger, Popover as Popover$1, Menu as Menu$1, MenuItem as MenuItem$2, GridList, GridListItem, DialogTrigger, Table as Table$2, Column as Column$1, Cell as Cell$1, TableHeader as TableHeader$1, TableBody as TableBody$2, Row as Row$1, Switch as Switch$1, Calendar as Calendar$1, CalendarGrid as CalendarGrid$1, CalendarGridBody as CalendarGridBody$1, CalendarCell as CalendarCell$1, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, Meter as Meter$1, Link as Link$3 } from "react-aria-components";
+import { Button as Button$2, Header as Header$3, Label as Label$1, Text as Text$1, ModalOverlay as ModalOverlay$1, Modal as Modal$1, Dialog as Dialog$1, Heading as Heading$2, Group, SearchField as SearchField$1, Input as Input$2, Form as Form$1, TextField as TextField$1, FieldError as FieldError$1, Checkbox as Checkbox$1, DateField as DateField$1, DateInput as DateInput$1, DateSegment as DateSegment$1, DatePicker as DatePicker$2, NumberField as NumberField$1, TextArea as TextArea$1, MenuTrigger, Popover as Popover$1, Menu as Menu$1, MenuItem as MenuItem$2, GridList, GridListItem, DialogTrigger, ToggleButton, SelectionIndicator, ToggleButtonGroup, Table as Table$2, Column as Column$1, Cell as Cell$1, TableHeader as TableHeader$1, TableBody as TableBody$2, Row as Row$1, Switch as Switch$1, Calendar as Calendar$1, CalendarGrid as CalendarGrid$1, CalendarGridBody as CalendarGridBody$1, CalendarCell as CalendarCell$1, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, Meter as Meter$1, Link as Link$3 } from "react-aria-components";
 import { LoaderCircle, X as X$1, ChevronDown as ChevronDown$1, Layers2Icon, UploadCloud as UploadCloud$1, Search, ChevronLeft as ChevronLeft$1, CopyIcon, FileSpreadsheet, FileDownIcon, Minus, Check as Check$1, RefreshCcw as RefreshCcw$1, MenuIcon, ChevronRight as ChevronRight$1, PencilRuler, SearchX, Trash2, CheckIcon, AlertCircle as AlertCircle$1, TriangleAlert, List, AlertTriangle, Save as Save$1, Plus as Plus$1, HandCoins, Menu as Menu$2, Trash as Trash$1, Send, Calendar as Calendar$2, Download, Users, Milestone, Video, Clock as Clock$1, Link as Link$4, Car } from "lucide-react";
 import pluralize from "pluralize";
 import { mergeRefs } from "react-merge-refs";
@@ -202,7 +202,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.114-alpha.4";
+const version = "0.1.114-alpha.6";
 const pkg = {
   version
 };
@@ -11868,6 +11868,37 @@ const MonthPicker = ({
     ) }) })
   ] });
 };
+const NewToggleOption = ({
+  label,
+  value
+}) => {
+  return /* @__PURE__ */ jsxs(ToggleButton, { id: value, className: "Layer__NewToggleOption", children: [
+    /* @__PURE__ */ jsx(SelectionIndicator, { className: "Layer__NewToggleOption-SelectionIndicator" }),
+    /* @__PURE__ */ jsx(Span, { className: "Layer__NewToggle-Option-Content", children: /* @__PURE__ */ jsx(Span, { noWrap: true, children: label }) })
+  ] });
+};
+const NewToggle = ({
+  options: options2,
+  selectedKey,
+  onSelectionChange
+}) => {
+  const selectedKeys = selectedKey !== void 0 ? /* @__PURE__ */ new Set([selectedKey]) : /* @__PURE__ */ new Set();
+  return /* @__PURE__ */ jsx(
+    ToggleButtonGroup,
+    {
+      className: "Layer__NewToggle",
+      selectionMode: "single",
+      selectedKeys,
+      onSelectionChange: (keys) => {
+        const selectedKeysArray = Array.from(keys);
+        if (selectedKeysArray.length > 0 && onSelectionChange) {
+          onSelectionChange(selectedKeysArray[0]);
+        }
+      },
+      children: options2.map((option) => /* @__PURE__ */ jsx(NewToggleOption, __spreadValues({}, option), option.value))
+    }
+  );
+};
 const SmallLoader = ({ size = 28 }) => {
   return /* @__PURE__ */ jsx(
     "span",
@@ -11912,169 +11943,6 @@ const SyncingComponent = ({
     }
   );
 };
-var ToggleSize = /* @__PURE__ */ ((ToggleSize2) => {
-  ToggleSize2["medium"] = "medium";
-  ToggleSize2["small"] = "small";
-  ToggleSize2["xsmall"] = "xsmall";
-  return ToggleSize2;
-})(ToggleSize || {});
-const Toggle = ({
-  name,
-  options: options2,
-  selected,
-  onChange,
-  size = "medium"
-  /* medium */
-}) => {
-  const [currentWidth, setCurrentWidth] = useState(0);
-  const [thumbPos, setThumbPos] = useState({ left: 0, width: 0 });
-  const [initialized, setInitialized] = useState(false);
-  const activeOption = useMemo(() => {
-    return selected ? selected : options2.length > 0 ? options2[0].value : void 0;
-  }, [selected, options2]);
-  const toggleRef = useElementSize((_a, _b, c) => {
-    if (c.width && (c == null ? void 0 : c.width) !== currentWidth) {
-      setCurrentWidth(c.width);
-    }
-  });
-  const baseClassName2 = classNames(
-    "Layer__toggle",
-    `Layer__toggle--${size}`,
-    initialized ? "Layer__toggle--initialized" : ""
-  );
-  const handleChange = (e) => {
-    var _a;
-    updateThumbPosition(Number((_a = e.target.getAttribute("data-idx")) != null ? _a : 0));
-    onChange(e);
-  };
-  const updateThumbPosition = (active) => {
-    if (!(toggleRef == null ? void 0 : toggleRef.current)) {
-      return;
-    }
-    const optionsNodes = [...toggleRef.current.children].map((x) => {
-      if (x.className.includes("Layer__tooltip-trigger") && x.children && x.children.length > 0) {
-        return x.children[0];
-      }
-      return x;
-    }).filter((c) => c.className.includes("Layer__toggle-option"));
-    let shift2 = 0;
-    let width = thumbPos.width;
-    optionsNodes.forEach((c, i) => {
-      if (i < active) {
-        shift2 = shift2 + c.offsetWidth;
-      } else if (i === active) {
-        width = c.offsetWidth;
-      }
-    });
-    shift2 = shift2 + (size === "medium" ? 2 : 1.5);
-    setThumbPos({ left: shift2, width });
-  };
-  useEffect(() => {
-    const selectedIndex = getSelectedIndex();
-    updateThumbPosition(selectedIndex);
-    setTimeout(() => {
-      setInitialized(true);
-    }, 400);
-  }, []);
-  useEffect(() => {
-    const selectedIndex = getSelectedIndex();
-    updateThumbPosition(selectedIndex);
-  }, [currentWidth]);
-  const getSelectedIndex = () => {
-    const selectedIndex = options2.findIndex(
-      (option) => option.value === activeOption
-    );
-    if (selectedIndex === -1) {
-      return 0;
-    }
-    return selectedIndex;
-  };
-  return /* @__PURE__ */ jsxs("div", { className: baseClassName2, ref: toggleRef, children: [
-    options2.map((option, index) => {
-      var _a;
-      return /* @__PURE__ */ createElement(
-        ToggleOption,
-        __spreadProps(__spreadValues({}, option), {
-          size,
-          key: option.value,
-          name,
-          checked: activeOption === option.value,
-          onChange: handleChange,
-          disabled: (_a = option.disabled) != null ? _a : false,
-          disabledMessage: option.disabledMessage,
-          index
-        })
-      );
-    }),
-    /* @__PURE__ */ jsx("span", { className: "Layer__toggle__thumb", style: __spreadValues({}, thumbPos) })
-  ] });
-};
-const ToggleOption = ({
-  checked,
-  label,
-  name,
-  onChange,
-  value,
-  size: _size,
-  leftIcon,
-  disabled,
-  disabledMessage = "Disabled",
-  style,
-  index
-}) => {
-  const optionClassName = classNames("Layer__toggle-option", {
-    "Layer__toggle-option--active": checked
-  });
-  if (disabled) {
-    return /* @__PURE__ */ jsxs(DeprecatedTooltip, { children: [
-      /* @__PURE__ */ jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxs(
-        "label",
-        {
-          className: optionClassName,
-          "data-checked": checked,
-          style,
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                checked,
-                name,
-                onChange,
-                value,
-                disabled,
-                "data-idx": index
-              }
-            ),
-            /* @__PURE__ */ jsxs("span", { className: "Layer__toggle-option-content", children: [
-              leftIcon && /* @__PURE__ */ jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
-              /* @__PURE__ */ jsx(Span, { noWrap: true, children: label })
-            ] })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: disabledMessage })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("label", { className: optionClassName, "data-checked": checked, style, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "radio",
-        checked,
-        name,
-        onChange,
-        value,
-        disabled,
-        "data-idx": index
-      }
-    ),
-    /* @__PURE__ */ jsxs("span", { className: "Layer__toggle-option-content", children: [
-      leftIcon && /* @__PURE__ */ jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
-      /* @__PURE__ */ jsx(Span, { noWrap: true, children: label })
-    ] })
-  ] });
-};
 var HeadingSize = /* @__PURE__ */ ((HeadingSize2) => {
   HeadingSize2["primary"] = "primary";
   HeadingSize2["secondary"] = "secondary";
@@ -12261,9 +12129,9 @@ const BankTransactionsHeader = ({
     stringOverrides == null ? void 0 : stringOverrides.header,
     withDatePicker
   ]);
-  const onCategorizationDisplayChange = (event) => {
+  const onCategorizationDisplayChange = (value) => {
     setFilters({
-      categorizationStatus: event.target.value === "categorized" ? DisplayState.categorized : event.target.value === "all" ? DisplayState.all : DisplayState.review
+      categorizationStatus: value === "categorized" ? DisplayState.categorized : value === "all" ? DisplayState.all : DisplayState.review
     });
   };
   const headerMenuActions = useMemo(() => {
@@ -12299,16 +12167,14 @@ const BankTransactionsHeader = ({
           ) : /* @__PURE__ */ jsxs(HStack, { slot: "toggle", justify: "center", gap: "xs", children: [
             collapseHeader && headerTopRow,
             !categorizedOnly && categorizeView && showStatusToggle && /* @__PURE__ */ jsx(
-              Toggle,
+              NewToggle,
               {
-                name: "bank-transaction-display",
-                size: mobileComponent === "mobileList" ? ToggleSize.small : ToggleSize.medium,
                 options: [
                   { label: "To Review", value: DisplayState.review },
                   { label: "Categorized", value: DisplayState.categorized }
                 ],
-                selected: display,
-                onChange: onCategorizationDisplayChange
+                selectedKey: display,
+                onSelectionChange: onCategorizationDisplayChange
               }
             )
           ] }),
@@ -14622,6 +14488,169 @@ const MatchForm = ({
     matchFormError && /* @__PURE__ */ jsx(ErrorText, { children: matchFormError })
   ] });
 };
+var ToggleSize = /* @__PURE__ */ ((ToggleSize2) => {
+  ToggleSize2["medium"] = "medium";
+  ToggleSize2["small"] = "small";
+  ToggleSize2["xsmall"] = "xsmall";
+  return ToggleSize2;
+})(ToggleSize || {});
+const Toggle = ({
+  name,
+  options: options2,
+  selected,
+  onChange,
+  size = "medium"
+  /* medium */
+}) => {
+  const [currentWidth, setCurrentWidth] = useState(0);
+  const [thumbPos, setThumbPos] = useState({ left: 0, width: 0 });
+  const [initialized, setInitialized] = useState(false);
+  const activeOption = useMemo(() => {
+    return selected ? selected : options2.length > 0 ? options2[0].value : void 0;
+  }, [selected, options2]);
+  const toggleRef = useElementSize((_a, _b, c) => {
+    if (c.width && (c == null ? void 0 : c.width) !== currentWidth) {
+      setCurrentWidth(c.width);
+    }
+  });
+  const baseClassName2 = classNames(
+    "Layer__toggle",
+    `Layer__toggle--${size}`,
+    initialized ? "Layer__toggle--initialized" : ""
+  );
+  const handleChange = (e) => {
+    var _a;
+    updateThumbPosition(Number((_a = e.target.getAttribute("data-idx")) != null ? _a : 0));
+    onChange(e);
+  };
+  const updateThumbPosition = (active) => {
+    if (!(toggleRef == null ? void 0 : toggleRef.current)) {
+      return;
+    }
+    const optionsNodes = [...toggleRef.current.children].map((x) => {
+      if (x.className.includes("Layer__tooltip-trigger") && x.children && x.children.length > 0) {
+        return x.children[0];
+      }
+      return x;
+    }).filter((c) => c.className.includes("Layer__toggle-option"));
+    let shift2 = 0;
+    let width = thumbPos.width;
+    optionsNodes.forEach((c, i) => {
+      if (i < active) {
+        shift2 = shift2 + c.offsetWidth;
+      } else if (i === active) {
+        width = c.offsetWidth;
+      }
+    });
+    shift2 = shift2 + (size === "medium" ? 2 : 1.5);
+    setThumbPos({ left: shift2, width });
+  };
+  useEffect(() => {
+    const selectedIndex = getSelectedIndex();
+    updateThumbPosition(selectedIndex);
+    setTimeout(() => {
+      setInitialized(true);
+    }, 400);
+  }, []);
+  useEffect(() => {
+    const selectedIndex = getSelectedIndex();
+    updateThumbPosition(selectedIndex);
+  }, [currentWidth]);
+  const getSelectedIndex = () => {
+    const selectedIndex = options2.findIndex(
+      (option) => option.value === activeOption
+    );
+    if (selectedIndex === -1) {
+      return 0;
+    }
+    return selectedIndex;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: baseClassName2, ref: toggleRef, children: [
+    options2.map((option, index) => {
+      var _a;
+      return /* @__PURE__ */ createElement(
+        ToggleOption,
+        __spreadProps(__spreadValues({}, option), {
+          size,
+          key: option.value,
+          name,
+          checked: activeOption === option.value,
+          onChange: handleChange,
+          disabled: (_a = option.disabled) != null ? _a : false,
+          disabledMessage: option.disabledMessage,
+          index
+        })
+      );
+    }),
+    /* @__PURE__ */ jsx("span", { className: "Layer__toggle__thumb", style: __spreadValues({}, thumbPos) })
+  ] });
+};
+const ToggleOption = ({
+  checked,
+  label,
+  name,
+  onChange,
+  value,
+  size: _size,
+  leftIcon,
+  disabled,
+  disabledMessage = "Disabled",
+  style,
+  index
+}) => {
+  const optionClassName = classNames("Layer__toggle-option", {
+    "Layer__toggle-option--active": checked
+  });
+  if (disabled) {
+    return /* @__PURE__ */ jsxs(DeprecatedTooltip, { children: [
+      /* @__PURE__ */ jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: optionClassName,
+          "data-checked": checked,
+          style,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                checked,
+                name,
+                onChange,
+                value,
+                disabled,
+                "data-idx": index
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "Layer__toggle-option-content", children: [
+              leftIcon && /* @__PURE__ */ jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
+              /* @__PURE__ */ jsx(Span, { noWrap: true, children: label })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: disabledMessage })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("label", { className: optionClassName, "data-checked": checked, style, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        checked,
+        name,
+        onChange,
+        value,
+        disabled,
+        "data-idx": index
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "Layer__toggle-option-content", children: [
+      leftIcon && /* @__PURE__ */ jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
+      /* @__PURE__ */ jsx(Span, { noWrap: true, children: label })
+    ] })
+  ] });
+};
 const GET_BANK_TRANSACTION_METADATA_TAG_KEY = "#bank-transaction-metadata";
 function buildKey$I({
   access_token: accessToken,
@@ -16475,6 +16504,7 @@ const BankTransactionRow = ({
                 processing: bankTransaction.processing,
                 active: open,
                 action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                disabled: selectedCategory === null,
                 children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
@@ -16548,6 +16578,7 @@ const BankTransactionRow = ({
                 className: "Layer__bank-transaction__submit-btn",
                 processing: bankTransaction.processing,
                 active: open,
+                disabled: selectedCategory === null,
                 action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
                 children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
@@ -17830,16 +17861,14 @@ const BankTransactionsMobileListItemExpandedRow = ({
   showTooltips
 }) => {
   const [purpose, setPurpose] = useState(getInitialPurpose(bankTransaction));
-  const onChangePurpose = (event) => setPurpose(event.target.value);
+  const onChangePurpose = (key) => setPurpose(key);
   return /* @__PURE__ */ jsxs(VStack, { pi: "md", gap: "md", pbe: "md", children: [
     showCategorization && /* @__PURE__ */ jsx(
-      Toggle,
+      NewToggle,
       {
-        name: `purpose-${bankTransaction.id}`,
-        size: ToggleSize.medium,
         options: PURPOSE_TOGGLE_OPTIONS,
-        selected: purpose,
-        onChange: onChangePurpose
+        selectedKey: purpose,
+        onSelectionChange: onChangePurpose
       }
     ),
     /* @__PURE__ */ jsx(
@@ -18282,6 +18311,7 @@ const BankTransactionsTable = ({
             SyncingComponent,
             {
               title: "Syncing historical account data",
+              timeSync: 5,
               onRefresh: () => onRefresh && onRefresh()
             }
           ) }) }) : null

package/dist/index.css

@@ -8374,6 +8374,63 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 
 .Layer__MonthPicker__InputGroup {
   inline-size: 12rem;
+}.Layer__NewToggle {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  width: max-content;
+  padding: 2px;
+  border-radius: 6px;
+  box-shadow: 0 0 0 1px var(--color-base-300);
+  background: var(--color-base-100);
+  cursor: pointer;
+  user-select: none;
+  isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}.Layer__NewToggleOption {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text-color-secondary);
+}
+.Layer__NewToggleOption::before {
+  position: absolute;
+  z-index: -2;
+  inset: 0;
+  border-radius: 6px;
+  background: transparent;
+  content: "";
+  transition: background-color 150ms;
+}
+.Layer__NewToggleOption[data-hovered]:not([data-disabled], [data-selected]) {
+  color: var(--text-color-primary);
+}
+.Layer__NewToggleOption[data-hovered]:not([data-disabled], [data-selected])::before {
+  background-color: var(--color-base-200);
+}
+
+.Layer__NewToggleOption-SelectionIndicator {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  border-radius: 6px;
+  box-shadow: 0 0 0 1px var(--color-base-300), 0 1px 1px 0 rgba(0, 0, 0, 0.04), 0 2px 3px 0 rgba(0, 0, 0, 0.04), 0 3px 4px 0 rgba(0, 0, 0, 0.02), 0 4px 5px 0 rgba(0, 0, 0, 0.01);
+  background: var(--color-white);
+  transition-property: translate, width;
+  transition-duration: 200ms;
 }.Layer__InvisibleDownload {
   display: none;
 }.Layer__UI__Table-Table {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.114-alpha.4",
+  "version": "0.1.114-alpha.6",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",
@@ -103,7 +103,7 @@
     "lucide-react": "^0.507.0",
     "motion": "^12.23.11",
     "pluralize": "^8.0.0",
-    "react-aria-components": "^1.8.0",
+    "react-aria-components": "^1.13.0",
     "react-calendly": "^4.4.0",
     "react-currency-input-field": "^3.10.0",
     "react-dropzone": "^14.3.8",