@zonos/amino 6.0.7 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "6.0.7",
+  "version": "6.1.0",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",
@@ -41,11 +41,9 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "fuse.js": "^6.6.2",
-    "react-data-grid": "7.0.0-beta.34",
     "react-dropzone": "^12.1.0",
     "react-intersection-observer": "^9.16.0",
     "react-select": "^5.10.2",
-    "react-split-it": "^2.0.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "uuid": "^11.0.0",
@@ -65,10 +63,10 @@
   },
   "peerDependencies": {
     "dayjs": "*",
-    "framer-motion": "^10.x",
+    "framer-motion": "^12.x || ^13.x",
     "lodash": "^4.17.23",
-    "react": "^18.x || ^19.x",
-    "react-dom": "^18.x || ^19.x",
+    "react": "^19.x",
+    "react-dom": "^19.x",
     "swr": "2.x",
     "zustand": "^5.0.0"
   },

package/table-theme-overrides.css

@@ -1,3 +1,10 @@
+/*
+  Night-theme table overrides.
+
+  These live in plain CSS rather than Tailwind arbitrary variants, which
+  generate `:is()` selectors that fight the `dark:` variant.
+*/
+
 [data-theme='night'] tbody tr.amino-table-row-active {
   background-color: var(--amino-gray-100);
 }

package/utils/hooks/useCountryOptions.d.ts

@@ -22,8 +22,8 @@ declare const schemaCountry: z.ZodObject<{
     active: boolean;
     code: string;
     label: string;
-    displayName: string;
     value: string;
+    displayName: string;
     languageCode: string | null;
     code3: string | null;
     currencyCode: string;
@@ -37,8 +37,8 @@ declare const schemaCountry: z.ZodObject<{
     active: boolean;
     code: string;
     label: string;
-    displayName: string;
     value: string;
+    displayName: string;
     languageCode: string | null;
     code3: string | null;
     currencyCode: string;

package/utils/hooks/useDropdown.d.ts

@@ -25,7 +25,7 @@ type Return<WrapperRef extends HTMLElement = HTMLDivElement, TriggerRef extends
     setVisible: React.Dispatch<React.SetStateAction<boolean>>;
     visibility: 'visible' | 'hidden';
     visible: boolean;
-    wrapperRef: React.RefObject<WrapperRef>;
+    wrapperRef: React.RefObject<WrapperRef | null>;
 };
 export declare const useDropdown: <WrapperRef extends HTMLElement = HTMLDivElement, TriggerRef extends HTMLElement = HTMLButtonElement>(params?: UseDropdownParams) => Return<WrapperRef, TriggerRef>;
 export {};

package/utils/hooks/useHeightAdjustTextarea.d.ts

@@ -1,9 +1,9 @@
-import { type MutableRefObject } from 'react';
+import { type RefObject } from 'react';
 type TextareaParams = {
     additionalHeight?: number;
     initialRows?: number;
     maxRows?: number;
-    ref: MutableRefObject<HTMLTextAreaElement | null>;
+    ref: RefObject<HTMLTextAreaElement | null>;
     shouldExpand: boolean;
     textareaValue: string;
 };

package/utils/hooks/usePrevious.js

@@ -1 +1 @@
-"use strict";var e=require("react");exports.usePrevious=function(r){var u=e.useRef();return e.useEffect(function(){u.current=r},[r]),u.current};
+"use strict";var e=require("react");exports.usePrevious=function(r){var u=e.useRef(void 0);return e.useEffect(function(){u.current=r},[r]),u.current};

package/pivot-table.css

@@ -1,483 +0,0 @@
-/*
-  @source: "node_modules/react-data-grid/lib/styles"
-*/
-
-@layer rdg.Cell {
-  .c1wupbe7-0-0-beta-28 {
-    /* max-content does not work with size containment
-   * dynamically switching between different containment styles incurs a heavy relayout penalty
-   * Chromium bug: at odd zoom levels or subpixel positioning, layout/paint containment can make cell borders disappear
-   *   https://bugs.chromium.org/p/chromium/issues/detail?id=1326946
-   */
-    contain: style;
-    position: relative; /* needed for absolute positioning to work */
-    padding-block: 0;
-    padding-inline: 8px;
-    border-inline-end: 1px solid var(--rdg-border-color);
-    border-block-end: 1px solid var(--rdg-border-color);
-    grid-row-start: var(--rdg-grid-row-start);
-    background-color: inherit;
-
-    white-space: nowrap;
-    overflow: hidden;
-    overflow: clip;
-    text-overflow: ellipsis;
-    outline: none;
-  }
-
-  .c1wupbe7-0-0-beta-28[aria-selected='true'] {
-    outline: 2px solid var(--rdg-selection-color);
-    outline-offset: -2px;
-  }
-}
-
-@layer rdg.Cell {
-  .cd0kgiy7-0-0-beta-28 {
-    position: sticky;
-    /* Should have a higher value than 0 to show up above unfrozen cells */
-    z-index: 1;
-  }
-}
-
-@layer rdg.Cell {
-  .c1730fa47-0-0-beta-28 {
-    box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
-  }
-}
-
-@layer rdg {
-  @layer Defaults,
-    FocusSink,
-    CheckboxInput,
-    CheckboxIcon,
-    CheckboxLabel,
-    Cell,
-    HeaderCell,
-    SummaryCell,
-    EditCell,
-    Row,
-    HeaderRow,
-    SummaryRow,
-    GroupedRow,
-    Root;
-
-  @layer Defaults {
-    .r104f42s7-0-0-beta-28 *,
-    .r104f42s7-0-0-beta-28 *::before,
-    .r104f42s7-0-0-beta-28 *::after {
-      box-sizing: inherit;
-    }
-  }
-
-  @layer Root {
-    .r104f42s7-0-0-beta-28 {
-      --rdg-color: #000;
-      --rdg-border-color: #ddd;
-      --rdg-summary-border-color: #aaa;
-      --rdg-background-color: hsl(0deg 0% 100%);
-      --rdg-header-background-color: hsl(0deg 0% 97.5%);
-      --rdg-row-hover-background-color: hsl(0deg 0% 96%);
-      --rdg-row-selected-background-color: hsl(207deg 76% 92%);
-      --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%);
-      --rdg-checkbox-color: hsl(207deg 100% 29%);
-      --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
-      --rdg-checkbox-disabled-border-color: #ccc;
-      --rdg-checkbox-disabled-background-color: #ddd;
-      --rdg-selection-color: #66afe9;
-      --rdg-font-size: 14px;
-
-      display: grid;
-
-      color-scheme: var(--rdg-color-scheme, light dark);
-
-      /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
-      /* We set a stacking context so internal elements don't render on top of external elements. */
-      contain: strict;
-      content-visibility: auto;
-      block-size: 350px;
-      border: 1px solid var(--rdg-border-color);
-      box-sizing: border-box;
-      overflow: auto;
-      background-color: var(--rdg-background-color);
-      color: var(--rdg-color);
-      font-size: var(--rdg-font-size);
-
-      /* needed on Firefox */
-    }
-    .r104f42s7-0-0-beta-28::before {
-      content: '';
-      grid-column: 1/-1;
-      grid-row: 1/-1;
-    }
-
-    .r104f42s7-0-0-beta-28.rdg-dark {
-      --rdg-color-scheme: dark;
-      --rdg-color: #ddd;
-      --rdg-border-color: #444;
-      --rdg-summary-border-color: #555;
-      --rdg-background-color: hsl(0deg 0% 13%);
-      --rdg-header-background-color: hsl(0deg 0% 10.5%);
-      --rdg-row-hover-background-color: hsl(0deg 0% 9%);
-      --rdg-row-selected-background-color: hsl(207deg 76% 42%);
-      --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);
-      --rdg-checkbox-color: hsl(207deg 100% 79%);
-      --rdg-checkbox-focus-color: hsl(207deg 100% 89%);
-      --rdg-checkbox-disabled-border-color: #000;
-      --rdg-checkbox-disabled-background-color: #333;
-    }
-
-    .r104f42s7-0-0-beta-28.rdg-light {
-      --rdg-color-scheme: light;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .r104f42s7-0-0-beta-28:not(.rdg-light) {
-        --rdg-color: #ddd;
-        --rdg-border-color: #444;
-        --rdg-summary-border-color: #555;
-        --rdg-background-color: hsl(0deg 0% 13%);
-        --rdg-header-background-color: hsl(0deg 0% 10.5%);
-        --rdg-row-hover-background-color: hsl(0deg 0% 9%);
-        --rdg-row-selected-background-color: hsl(207deg 76% 42%);
-        --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);
-        --rdg-checkbox-color: hsl(207deg 100% 79%);
-        --rdg-checkbox-focus-color: hsl(207deg 100% 89%);
-        --rdg-checkbox-disabled-border-color: #000;
-        --rdg-checkbox-disabled-background-color: #333;
-      }
-    }
-  }
-}
-
-@layer rdg.Root {
-  .v7ly7s7-0-0-beta-28 {
-    user-select: none;
-  }
-
-  .v7ly7s7-0-0-beta-28 .r1otpg647-0-0-beta-28 {
-    cursor: move;
-  }
-}
-
-@layer rdg.FocusSink {
-  .fc4f4zb7-0-0-beta-28 {
-    grid-column: 1/-1;
-    pointer-events: none;
-    /* Should have a higher value than 2 to show up above header row */
-    z-index: 3;
-  }
-}
-
-@layer rdg.Row {
-  .r1otpg647-0-0-beta-28 {
-    display: contents;
-    line-height: var(--rdg-row-height);
-    background-color: var(--rdg-background-color);
-  }
-
-  .r1otpg647-0-0-beta-28:hover {
-    background-color: var(--rdg-row-hover-background-color);
-  }
-
-  .r1otpg647-0-0-beta-28[aria-selected='true'] {
-    background-color: var(--rdg-row-selected-background-color);
-  }
-
-  .r1otpg647-0-0-beta-28[aria-selected='true']:hover {
-    background-color: var(--rdg-row-selected-hover-background-color);
-  }
-}
-
-@layer rdg.FocusSink {
-  .rel5gk27-0-0-beta-28 {
-    outline: 2px solid var(--rdg-selection-color);
-    outline-offset: -2px;
-  }
-}
-
-@layer rdg.FocusSink {
-  .r1qymf1z7-0-0-beta-28::before {
-    content: '';
-    display: inline-block;
-    height: 100%;
-    position: sticky;
-    inset-inline-start: 0;
-    border-inline-start: 2px solid var(--rdg-selection-color);
-  }
-}
-
-@layer rdg.CheckboxLabel {
-  .c8rwwhf7-0-0-beta-28 {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    inset: 0;
-    margin-inline-end: 1px; /* align checkbox in row group cell */
-  }
-}
-
-@layer rdg.CheckboxInput {
-  .c1rb4brs7-0-0-beta-28 {
-    all: unset;
-  }
-}
-
-@layer rdg.CheckboxIcon {
-  .c1bvvwcc7-0-0-beta-28 {
-    content: '';
-    inline-size: 20px;
-    block-size: 20px;
-    border: 2px solid var(--rdg-border-color);
-    background-color: var(--rdg-background-color);
-  }
-
-  .c1rb4brs7-0-0-beta-28:checked + .c1bvvwcc7-0-0-beta-28 {
-    background-color: var(--rdg-checkbox-color);
-    outline: 4px solid var(--rdg-background-color);
-    outline-offset: -6px;
-  }
-
-  .c1rb4brs7-0-0-beta-28:focus + .c1bvvwcc7-0-0-beta-28 {
-    border-color: var(--rdg-checkbox-focus-color);
-  }
-}
-
-@layer rdg.CheckboxLabel {
-  .c1yg790j7-0-0-beta-28 {
-    cursor: default;
-  }
-
-  .c1yg790j7-0-0-beta-28 .c1bvvwcc7-0-0-beta-28 {
-    border-color: var(--rdg-checkbox-disabled-border-color);
-    background-color: var(--rdg-checkbox-disabled-background-color);
-  }
-}
-
-@layer rdg.GroupCellContent {
-  .gb8l2vs7-0-0-beta-28 {
-    outline: none;
-  }
-}
-
-@layer rdg.GroupCellCaret {
-  .c1ggynjl7-0-0-beta-28 {
-    margin-inline-start: 4px;
-    stroke: currentColor;
-    stroke-width: 1.5px;
-    fill: transparent;
-    vertical-align: middle;
-  }
-
-  .c1ggynjl7-0-0-beta-28 > path {
-    transition: d 0.1s;
-  }
-}
-
-@layer rdg.MeasuringCell {
-  .m1l09lto7-0-0-beta-28 {
-    contain: strict;
-    grid-row: 1;
-    visibility: hidden;
-  }
-}
-
-@layer rdg.SortableHeaderCell {
-  .h1e8ezgp7-0-0-beta-28 {
-    cursor: pointer;
-    display: flex;
-  }
-
-  .h1e8ezgp7-0-0-beta-28:focus {
-    outline: none;
-  }
-}
-
-@layer rdg.SortableHeaderCellName {
-  .h1rrblhe7-0-0-beta-28 {
-    flex-grow: 1;
-    overflow: hidden;
-    overflow: clip;
-    text-overflow: ellipsis;
-  }
-}
-
-@layer rdg.HeaderCell {
-  .celq7o97-0-0-beta-28 {
-    touch-action: none;
-  }
-
-  .celq7o97-0-0-beta-28::after {
-    content: '';
-    cursor: col-resize;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    inset-block-end: 0;
-    inline-size: 10px;
-  }
-}
-
-@layer rdg.HeaderRow {
-  .h197vzie7-0-0-beta-28 {
-    display: contents;
-    line-height: var(--rdg-header-row-height);
-    background-color: var(--rdg-header-background-color);
-    font-weight: bold;
-  }
-
-  .h197vzie7-0-0-beta-28 > .c1wupbe7-0-0-beta-28 {
-    /* Should have a higher value than 0 to show up above regular cells */
-    z-index: 1;
-    position: sticky;
-    inset-block-start: 0;
-  }
-
-  .h197vzie7-0-0-beta-28 > .cd0kgiy7-0-0-beta-28 {
-    z-index: 2;
-  }
-}
-
-@layer rdg.Cell {
-  .ccpfvsn7-0-0-beta-28 {
-    background-color: #ccccff;
-  }
-}
-
-@layer rdg.Cell {
-  .c1bmg16t7-0-0-beta-28 {
-    background-color: #ccccff;
-  }
-
-  .c1bmg16t7-0-0-beta-28.ccpfvsn7-0-0-beta-28 {
-    background-color: #9999ff;
-  }
-}
-
-@layer rdg.GroupedRow {
-  .gyxx7e97-0-0-beta-28:not([aria-selected='true']) {
-    background-color: var(--rdg-header-background-color);
-  }
-
-  .gyxx7e97-0-0-beta-28
-    > .c1wupbe7-0-0-beta-28:not(:last-child):not(.c1730fa47-0-0-beta-28) {
-    border-inline-end: none;
-  }
-}
-
-@layer rdg.SummaryCell {
-  .s1n3hxke7-0-0-beta-28 {
-    inset-block-start: var(--rdg-summary-row-top);
-    inset-block-end: var(--rdg-summary-row-bottom);
-  }
-}
-
-@layer rdg.SummaryRow {
-  .snfqesz7-0-0-beta-28 {
-    line-height: var(--rdg-summary-row-height);
-  }
-
-  .snfqesz7-0-0-beta-28 > .c1wupbe7-0-0-beta-28 {
-    position: sticky;
-  }
-}
-
-@layer rdg.SummaryRow {
-  .t1jijrjz7-0-0-beta-28 > .c1wupbe7-0-0-beta-28 {
-    z-index: 1;
-  }
-
-  .t1jijrjz7-0-0-beta-28 > .cd0kgiy7-0-0-beta-28 {
-    z-index: 2;
-  }
-}
-
-@layer rdg.SummaryRow {
-  .t14bmecc7-0-0-beta-28 > .c1wupbe7-0-0-beta-28 {
-    border-block-end: 2px solid var(--rdg-summary-border-color);
-  }
-}
-
-@layer rdg.SummaryRow {
-  .b1odhhml7-0-0-beta-28 > .c1wupbe7-0-0-beta-28 {
-    border-block-start: 2px solid var(--rdg-summary-border-color);
-  }
-}
-
-@layer rdg.EditCell {
-  .c1tngyp17-0-0-beta-28 {
-    padding: 0;
-  }
-}
-
-@layer rdg.DragHandle {
-  .cadd3bp7-0-0-beta-28 {
-    cursor: move;
-    position: absolute;
-    inset-inline-end: 0;
-    inset-block-end: 0;
-    inline-size: 8px;
-    block-size: 8px;
-    background-color: var(--rdg-selection-color);
-  }
-
-  .cadd3bp7-0-0-beta-28:hover {
-    inline-size: 16px;
-    block-size: 16px;
-    border: 2px solid var(--rdg-selection-color);
-    background-color: var(--rdg-background-color);
-  }
-}
-
-@layer rdg.SortIcon {
-  .a1mygwml7-0-0-beta-28 {
-    fill: currentColor;
-  }
-
-  .a1mygwml7-0-0-beta-28 > path {
-    transition: d 0.1s;
-  }
-}
-
-@layer rdg.TextEditor {
-  .tlmcuo07-0-0-beta-28 {
-    appearance: none;
-
-    box-sizing: border-box;
-    inline-size: 100%;
-    block-size: 100%;
-    padding-block: 0;
-    padding-inline: 6px;
-    border: 2px solid #ccc;
-    vertical-align: top;
-    color: var(--rdg-color);
-    background-color: var(--rdg-background-color);
-
-    font-family: inherit;
-    font-size: var(--rdg-font-size);
-  }
-
-  .tlmcuo07-0-0-beta-28:focus {
-    border-color: var(--rdg-selection-color);
-    outline: none;
-  }
-
-  .tlmcuo07-0-0-beta-28::placeholder {
-    color: #999;
-    opacity: 1;
-  }
-}
-
-[data-theme='night'] .amino-pivot-table .rdg-row {
-  background-color: var(--amino-gray-50);
-}
-[data-theme='night'] .amino-pivot-table .rdg-header-row {
-  background-color: var(--amino-gray-100);
-}
-[data-theme='night'] .amino-pivot-table .rdg-summary-row {
-  background-color: var(--amino-gray-100);
-}
-[data-theme='night'] .amino-pivot-table .rdg-cell {
-  border-color: var(--amino-gray-400);
-}