@layerfi/components 0.1.77 → 0.1.79

package/dist/styles/index.css

@@ -4,6 +4,7 @@
 
 /* src/styles/index.scss */
 .Layer__component,
+.Layer__Portal,
 .Layer__view,
 .Layer__select__menu-portal,
 .Layer__tooltip,
@@ -179,7 +180,7 @@
   margin: 0;
   box-sizing: border-box;
   font-family: var(--font-family);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-feature-settings:
     "cv10" on,
     "cv01" on,
@@ -187,6 +188,24 @@
     "cv08" on,
     "ss03" on;
 }
+.Layer__component,
+.Layer__Portal {
+  --bg-default: var(--color-base-0);
+  --bg-subtle: var(--color-base-50);
+  --fg-default: var(--color-base-900);
+  --outline-subtle: var(--color-base-100);
+  --outline-default: var(--color-base-200);
+  --outline-active: var(--color-base-400);
+  --button-bg-default: var(--color-base-900);
+  --button-bg-active: var(--color-base-1000);
+  --button-bg-disabled: var(--color-base-700);
+  --button-fg-default: var(--color-base-0);
+  --button-fg-disabled: var(--color-base-200);
+  --button-bg-ghost-active: var(--color-base-50);
+  --button-outline-ghost-active: var(--color-base-100);
+  --button-fg-ghost: var(--color-base-900);
+  --button-fg-ghost-active: var(--color-base-1000);
+}
 .Layer__component *::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -290,6 +309,14 @@
   color: var(--color-base-500);
   font-size: var(--text-sm);
 }
+@keyframes Layer__rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .Layer__badge {
   display: inline-flex;
   gap: var(--spacing-3xs);
@@ -392,7 +419,7 @@
   border-radius: var(--btn-border-radius);
   border-width: 0px;
   font-family: var(--font-family);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -598,7 +625,7 @@
   border-radius: var(--btn-border-radius);
   border-width: 0px;
   font-family: var(--font-family);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -1804,7 +1831,7 @@
   max-width: 140px;
   color: var(--color-base-600);
   font-size: 12px;
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   line-height: 140%;
 }
 .Layer__details-list-item__value {
@@ -2192,7 +2219,7 @@
   border-width: 0px;
   font-family: var(--font-family);
   font-size: var(--input-font-size);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -2247,7 +2274,7 @@
 .Layer__select .Layer__select__placeholder {
   color: var(--color-base-500);
   font-family: var(--font-family);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -2354,7 +2381,7 @@
 .Layer__select__menu-portal .Layer__select__option-content__match .Layer__select__option-content__match__amount {
   font-size: var(--text-sm);
   color: var(--color-base-900);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__select__menu.Layer__select__menu--lg {
   width: calc(100% + 60px);
@@ -2530,7 +2557,7 @@
 .Layer__table .Layer__table-header {
   color: var(--text-color-secondary);
   font-size: var(--text-sm);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -2549,7 +2576,7 @@
 }
 .Layer__table .Layer__table-header.Layer__table-header--primary .Layer__table-cell.Layer__table-cell--primary {
   color: var(--text-color-primary);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__table .Layer__table-body .Layer__table-empty-row:first-child {
   display: none;
@@ -2670,7 +2697,7 @@
 }
 .Layer__table .Layer__table-cell.Layer__table-cell--primary {
   color: var(--color-base-800);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__table .Layer__table-cell.Layer__table-cell--right .Layer__table-cell-content {
   text-align: right;
@@ -2798,7 +2825,7 @@
 .Layer__table-header {
   color: var(--text-color-secondary);
   font-size: var(--text-sm);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -2814,12 +2841,12 @@
 }
 .Layer__table-header.Layer__table-header--primary {
   color: var(--text-color-primary);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__table-cell--primary,
 .Layer__table-cell--primary .Layer__table-cell-content {
   color: var(--color-base-800);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__table-cell {
   font-size: var(--text-md);
@@ -3052,7 +3079,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__heading {
   color: var(--text-color-primary);
   font-size: var(--text-heading);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
   line-height: 140%;
   letter-spacing: -0.12px;
   margin: 0;
@@ -3062,23 +3089,23 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__heading.Layer__heading--secondary {
   color: var(--text-color-primary);
   font-size: var(--text-heading-sm);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__heading--view,
 .Layer__heading.Layer__heading--view {
   color: var(--text-color-primary);
   font-size: var(--text-heading-view);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__heading--page,
 .Layer__heading.Layer__heading--page {
   color: var(--text-color-primary);
   font-size: var(--text-heading-page);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__text {
   font-family: var(--font-family);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -3099,14 +3126,14 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__text--bold,
 .Layer__text.Layer__text--bold {
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__text--error {
   color: var(--color-danger);
 }
 .Layer__label {
   color: var(--color-base-500);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   white-space: nowrap;
   overflow: hidden;
 }
@@ -3300,6 +3327,223 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__view.Layer__view--panel .Layer__view-header__content {
   max-width: 1406px;
 }
+.Layer__UI__Button {
+  all: unset;
+  align-items: center;
+  appearance: none;
+  border-radius: var(--btn-border-radius);
+  cursor: pointer;
+  display: inline-grid;
+  min-inline-size: 0;
+  min-block-size: 2rem;
+  padding-inline: var(--spacing-md);
+  justify-content: center;
+  outline: none;
+  user-select: none;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.Layer__UI__Button[data-icon] {
+  padding-inline: 0;
+  inline-size: 2rem;
+  block-size: 2rem;
+}
+.Layer__UI__Button[data-variant=solid] {
+  background-color: var(--button-bg-default);
+  color: var(--button-fg-default);
+}
+.Layer__UI__Button[data-variant=solid][data-hovered] {
+  background-color: var(--button-bg-active);
+}
+.Layer__UI__Button[data-variant=ghost] {
+  background-color: transparent;
+  color: var(--button-fg-ghost);
+  border: 2px solid transparent;
+}
+.Layer__UI__Button[data-variant=ghost][data-hovered] {
+  background-color: var(--button-bg-ghost-active);
+  color: var(--button-fg-ghost-active);
+  border-color: var(--button-outline-ghost-active);
+}
+.Layer__UI__Button[data-size=lg] {
+  min-block-size: 2.25rem;
+  font-size: var(--text-lg);
+}
+.Layer__UI__Button[data-disabled] {
+  cursor: not-allowed;
+  color: var(--button-fg-disabled);
+  background-color: var(--button-bg-disabled);
+}
+.Layer__UI__Button[data-pending] {
+  cursor: progress;
+  background-color: var(--button-bg-disabled);
+}
+.Layer__LoadingSpinner {
+  animation-name: Layer__rotate;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.Layer__Checkbox {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--spacing-xs);
+  cursor: pointer;
+}
+.Layer__Checkbox [slot=checkbox] {
+  background-color: var(--bg-default);
+  color: transparent;
+  padding: var(--spacing-3xs);
+  border: 2px solid var(--outline-default);
+  border-radius: var(--border-radius-xs);
+  display: grid;
+  place-items: center;
+}
+.Layer__Checkbox svg {
+  transition: all 200ms;
+}
+.Layer__Checkbox[data-pressed] [slot=checkbox] {
+  border-color: var(--outline-active);
+}
+.Layer__Checkbox[data-focus-visible] [slot=checkbox] {
+  outline: 2px solid var(--outline-active);
+  outline-offset: 2px;
+}
+.Layer__Checkbox[data-selected] [slot=checkbox] {
+  color: var(--bg-default);
+  background-color: var(--fg-default);
+}
+.Layer__UI__Heading {
+  all: unset;
+  font-weight: bold;
+  font-size: var(--text-heading);
+}
+.Layer__UI__Heading[data-size=sm] {
+  font-size: var(--text-heading-sm);
+}
+.Layer__UI__Heading[data-pbe="2xs"] {
+  padding-block-end: var(--spacing-2xs);
+}
+.Layer__UI__Heading[data-pbe=xs] {
+  padding-block-end: var(--spacing-xs);
+}
+.Layer__UI__Heading[data-pbe=sm] {
+  padding-block-end: var(--spacing-sm);
+}
+.Layer__UI__Heading[data-pbe=md] {
+  padding-block-end: var(--spacing-md);
+}
+.Layer__UI__Heading[data-pbe=lg] {
+  padding-block-end: var(--spacing-lg);
+}
+.Layer__P {
+  margin: 0;
+  font-size: var(--text-md);
+  text-wrap: pretty;
+}
+.Layer__P[data-size=xs] {
+  font-size: var(--text-xs);
+}
+.Layer__P[data-size=sm] {
+  font-size: var(--text-sm);
+}
+.Layer__P[data-size=md] {
+  font-size: var(--text-md);
+}
+.Layer__P[data-size=lg] {
+  font-size: var(--text-lg);
+}
+.Layer__P[data-pbe=xs] {
+  padding-block-end: var(--spacing-xs);
+}
+.Layer__P[data-pbe=sm] {
+  padding-block-end: var(--spacing-sm);
+}
+.Layer__P[data-pbe=md] {
+  padding-block-end: var(--spacing-md);
+}
+.Layer__P[data-pbe=lg] {
+  padding-block-end: var(--spacing-lg);
+}
+.Layer__P[data-align=left] {
+  text-align: left;
+}
+.Layer__P[data-align=center] {
+  text-align: center;
+}
+.Layer__P[data-align=right] {
+  text-align: right;
+}
+.Layer__P[data-align=justify] {
+  text-align: justify;
+}
+.Layer__ModalOverlay {
+  display: grid;
+  place-items: center;
+  position: fixed;
+  inset: 0;
+  max-inline-size: 100dvi;
+  max-block-size: 100dvh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+.Layer__ModalOverlay[data-entering] {
+  animation-duration: 150ms;
+}
+.Layer__ModalOverlay[data-exiting] {
+  animation-duration: 150ms;
+}
+.Layer__Modal {
+  inline-size: min(24rem, 90dvi);
+  block-size: min(36rem, 90dvb);
+}
+.Layer__Modal[data-entering] {
+  animation-duration: 300ms;
+}
+.Layer__Modal[data-exiting] {
+  animation-duration: 300ms;
+}
+.Layer__Dialog {
+  outline: none;
+  background-color: white;
+  block-size: 100%;
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius-2xs);
+  display: flex;
+  flex-direction: column;
+}
+.Layer__Dialog [slot=content] {
+  flex: 1;
+}
+.Layer__ModalContextBar {
+  display: grid;
+  grid-template-columns: minmax(0, 2rem) 1fr minmax(0, 2rem);
+  column-gap: var(--spacing-md);
+  grid-template-areas: "back logo close";
+  align-items: center;
+}
+.Layer__ModalContextBar > [slot=back] {
+  grid-area: back;
+}
+.Layer__ModalContextBar > [slot=logo] {
+  grid-area: logo;
+}
+.Layer__ModalContextBar > [slot=close] {
+  grid-area: close;
+}
+.Layer__ModalContent {
+  display: grid;
+  block-size: 100%;
+  overflow-y: auto;
+}
+.Layer__ModalContent > [slot=center] {
+  align-self: center;
+  justify-self: center;
+}
+.Layer__ModalActions {
+  padding-block-start: var(--spacing-lg);
+}
 .Layer__VStack {
   display: flex;
   flex-direction: column;
@@ -3307,6 +3551,21 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__VStack[data-align=start] {
   align-items: start;
 }
+.Layer__VStack[data-align=center] {
+  align-items: center;
+}
+.Layer__VStack[data-align=end] {
+  align-items: end;
+}
+.Layer__VStack[data-justify=start] {
+  justify-content: start;
+}
+.Layer__VStack[data-justify=center] {
+  justify-content: center;
+}
+.Layer__VStack[data-justify=end] {
+  justify-content: end;
+}
 .Layer__VStack[data-gap="3xs"] {
   gap: var(--spacing-3xs);
 }
@@ -3337,6 +3596,13 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__VStack[data-gap="5xl"] {
   gap: var(--spacing-5xl);
 }
+.Layer__LinkedAccountToConfirm {
+  background-color: var(--bg-subtle);
+  padding-inline: var(--spacing-md);
+  padding-block: var(--spacing-sm);
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
   width: 100%;
@@ -3431,7 +3697,7 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: space-between;
 }
 .Layer__ledger_account-table__balance-item .Layer__ledger_account-table__balances-mobile__value {
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
   color: var(--color-base-900);
 }
 @container (max-width: 1024px) {
@@ -5185,10 +5451,10 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__chart-of-accounts__mobile-row-content__balance {
   color: var(--color-base-800);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__chart-of-accounts__row---mobile.Layer__table-row--depth-0 .Layer__chart-of-accounts__mobile-row-content__name {
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__chart-of-accounts__mobile-row-content__types {
   display: flex;
@@ -5353,10 +5619,10 @@ tbody .Layer__table__empty-row:first-child {
   width: calc(100% - 192px - 75%);
 }
 .Layer__table-cell.Layer__journal__balance {
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__journal__table .Layer__table-row--depth-0 .Layer__table-cell.Layer__journal__arrow {
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__journal__balance {
   text-align: right;
@@ -6738,7 +7004,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__ProfitAndLossSummariesSummaryAmount {
   grid-area: amount;
   font-size: var(--text-lg);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
@@ -6757,6 +7023,7 @@ tbody .Layer__table__empty-row:first-child {
   margin: unset;
   color: var(--color-base-700);
   font-size: var(--text-sm);
+  font-weight: var(--font-weight-bold);
 }
 .Layer__ProfitAndLossSummariesSummaryHeading[data-size=lg] {
   font-size: var(--text-lg);
@@ -6922,12 +7189,12 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__profit-and-loss-row__label .Layer__text {
   color: var(--color-base-700);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   margin: 0;
 }
 .Layer__profit-and-loss-row__label.Layer__profit-and-loss-row__label--depth-0 .Layer__text {
   color: var(--color-base-800);
-  font-variation-settings: "wght" var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
   margin: 0;
 }
 .Layer__profit-and-loss-row__label--depth-1 {
@@ -6938,7 +7205,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__profit-and-loss-row__label--depth-1 .Layer__text {
   color: var(--color-base-700);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   margin: 0;
 }
 .Layer__profit-and-loss-chart .recharts-cartesian-axis-tick-value tspan {
@@ -7281,7 +7548,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts .type-select {
   border-color: transparent;
   font-family: var(--font-family);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -7293,7 +7560,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts .type-select .Layer__select__control {
   border-color: transparent;
   font-family: var(--font-family);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -7305,7 +7572,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts .type-select .Layer__select__placeholder {
   font-size: 12px;
   font-family: var(--font-family);
-  font-variation-settings: "wght" var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -7730,4 +7997,3 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     border-top-right-radius: 0;
   }
 }
-/*# sourceMappingURL=index.css.map */

package/package.json

@@ -1,13 +1,24 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.77",
+  "version": "0.1.79",
   "description": "Layer React Components",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.mjs",
   "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs"
+    },
+    "./index.css": "./dist/index.css"
+  },
   "scripts": {
     "test": "jest",
     "typecheck": "tsc --noEmit",
     "build": "node bin/build.js",
+    "dev": "node bin/build.js -- --watch",
     "prepack": "npm run typecheck && npm run build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
@@ -22,13 +33,14 @@
     "react"
   ],
   "author": "Layer Financial",
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE",
   "bugs": {
     "url": "https://github.com/Layer-Fi/layer-react/issues"
   },
   "homepage": "https://github.com/Layer-Fi/layer-react#readme",
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.10.0",
@@ -36,9 +48,9 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.7",
-    "@types/react": "^18.2.31",
+    "@types/react": "^18.2.0",
     "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.2.14",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "esbuild": "^0.19.5",
     "esbuild-jest": "^0.5.0",
@@ -51,21 +63,22 @@
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^22.1.0",
     "npm-dts": "^1.3.12",
-    "postcss": "^8.4.31",
-    "postcss-scss": "^4.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.6.3"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.8",
     "classnames": "^2.5.1",
     "date-fns": "^2.30.0",
+    "lucide-react": "^0.454.0",
+    "react-aria-components": "^1.4.1",
     "react-datepicker": "^6.9.0",
     "react-plaid-link": "^3.5.1",
     "react-select": "^5.8.0",
     "recharts": "^2.10.1",
-    "swr": "^2.2.4"
+    "swr": "^2.2.4",
+    "zustand": "^5.0.1"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/.nvmrc

@@ -1 +0,0 @@
-20.2