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

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.5";
 const pkg = {
   version
 };
@@ -17951,6 +17951,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 +18025,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"
               }
@@ -19280,6 +19282,37 @@ const BankTransactionsMobileForms = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive: isOpen, children: getContent() });
 };
+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 PURPOSE_TOGGLE_OPTIONS = [
   {
     value: "business",
@@ -19306,16 +19339,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 +19789,7 @@ const BankTransactionsTable = ({
             SyncingComponent,
             {
               title: "Syncing historical account data",
+              timeSync: 5,
               onRefresh: () => onRefresh && onRefresh()
             }
           ) }) }) : null

package/dist/esm/index.mjs

@@ -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, 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, ToggleButton, SelectionIndicator, ToggleButtonGroup, 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.5";
 const pkg = {
   version
 };
@@ -16475,6 +16475,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 +16549,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"
               }
@@ -17804,6 +17806,37 @@ const BankTransactionsMobileForms = ({
   };
   return /* @__PURE__ */ jsx(ReceiptsProvider, { bankTransaction, isActive: isOpen, children: getContent() });
 };
+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 PURPOSE_TOGGLE_OPTIONS = [
   {
     value: "business",
@@ -17830,16 +17863,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 +18313,7 @@ const BankTransactionsTable = ({
             SyncingComponent,
             {
               title: "Syncing historical account data",
+              timeSync: 5,
               onRefresh: () => onRefresh && onRefresh()
             }
           ) }) }) : null

package/dist/index.css

@@ -8745,6 +8745,63 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding-inline-end: var(--spacing-md);
 }.Layer__BankTransactionsMobileSplitForm__AmountInput {
   inline-size: 6rem;
+}.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__BankTransactionsMobileListItem__CategorizedValue {
   color: var(--color-base-500);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.114-alpha.4",
+  "version": "0.1.114-alpha.5",
   "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",