@tight-embedded/react 6.6.1 → 6.7.0

package/dist/index.css

@@ -211,6 +211,7 @@
     --Tight-colors-surface-intent-danger-disabled: var(--Tight-colors-surface-foreground-disabled);
     --Tight-colors-surface-intent-danger-weak: var(--Tight-colors-brand-danger-weak);
     --Tight-colors-surface-intent-danger-highlight: var(--Tight-colors-brand-danger-weaker);
+    --Tight-colors-surface-reports-alternateRows: var(--Tight-colors-brand-action-weaker);
     --Tight-colors-typography-base: var(--Tight-colors-black700);
     --Tight-colors-typography-base-weak: var(--Tight-colors-black400);
     --Tight-colors-typography-contrast: var(--Tight-colors-white100);
@@ -566,18 +567,6 @@
     padding: 16px 16px;
 }
 
-  .tsystem-p_2px {
-    padding: 2px;
-}
-
-  .tsystem-bg_none {
-    background: var(--Tight-colors-none);
-}
-
-  .tsystem-p_5px_10px {
-    padding: 5px 10px;
-}
-
   .tsystem-m_0_8px {
     margin: 0 8px;
 }
@@ -602,6 +591,18 @@
     animation: var(--Tight-animations-shimmer);
 }
 
+  .tsystem-p_2px {
+    padding: 2px;
+}
+
+  .tsystem-bg_none {
+    background: var(--Tight-colors-none);
+}
+
+  .tsystem-p_5px_10px {
+    padding: 5px 10px;
+}
+
   .tsystem-anim_appear\.instant {
     animation: var(--Tight-animations-appear-instant);
 }
@@ -642,6 +643,10 @@
     padding: 15px;
 }
 
+  .tsystem-p_36px_24px {
+    padding: 36px 24px;
+}
+
   .tsystem-bd_inherit {
     border: inherit;
 }
@@ -774,10 +779,6 @@
     padding: 6px 0 6px 6px;
 }
 
-  .tsystem-m_6px_6px_6px_5px {
-    margin: 6px 6px 6px 5px;
-}
-
   .tsystem-p_0_6px_0_0 {
     padding: 0 6px 0 0;
 }
@@ -975,8 +976,8 @@
     transition: height 0.5s, width 0.5s;
 }
 
-  .tsystem-gap_45px {
-    gap: 45px;
+  .tsystem-gap_24px {
+    gap: 24px;
 }
 
   .tsystem-gap_20px {
@@ -987,6 +988,10 @@
     border-top: hidden;
 }
 
+  .tsystem-gap_45px {
+    gap: 45px;
+}
+
   .tsystem-bdr_0 {
     border-radius: 0;
 }
@@ -1059,6 +1064,14 @@
     transition: all 300ms ease-out;
 }
 
+  .tsystem-bdr_4px {
+    border-radius: 4px;
+}
+
+  .tsystem-tw_wrap {
+    text-wrap: wrap;
+}
+
   .tsystem-bdr_borderWidths\.sm {
     border-radius: borderWidths.sm;
 }
@@ -1071,10 +1084,6 @@
     border-width: 1px;
 }
 
-  .tsystem-bdr_4px {
-    border-radius: 4px;
-}
-
   .tsystem-bdr_8px {
     border-radius: 8px;
 }
@@ -1187,10 +1196,6 @@
     border-color: weak;
 }
 
-  .tsystem-tw_wrap {
-    text-wrap: wrap;
-}
-
   .tsystem-flex_1_1_100\% {
     flex: 1 1 100%;
 }
@@ -1320,10 +1325,6 @@
     line-height: 12px;
 }
 
-  .tsystem-ls_0\.66px {
-    letter-spacing: 0.66px;
-}
-
   .tsystem-white-space_normal {
     white-space: normal;
 }
@@ -1344,10 +1345,6 @@
     line-height: 18px;
 }
 
-  .tsystem-ls_0\.84px {
-    letter-spacing: 0.84px;
-}
-
   .tsystem-fw_md {
     font-weight: var(--Tight-fontWeights-md);
 }
@@ -1360,10 +1357,6 @@
     line-height: 14px;
 }
 
-  .tsystem-ls_0\.72px {
-    letter-spacing: 0.72px;
-}
-
   .tsystem-bx-s_border-box {
     box-sizing: border-box;
 }
@@ -1441,10 +1434,6 @@
     line-height: 26px;
 }
 
-  .tsystem-ls_1\.2px {
-    letter-spacing: 1.2px;
-}
-
   .tsystem-pos_fixed {
     position: fixed;
 }
@@ -1473,10 +1462,6 @@
     font-size: var(--Tight-fontSizes-lg);
 }
 
-  .tsystem-ls_0\.96px {
-    letter-spacing: 0.96px;
-}
-
   .tsystem-ff_label {
     font-family: var(--Tight-fonts-label);
 }
@@ -1609,18 +1594,6 @@
     background-color: yellow;
 }
 
-  .tsystem-c_typography\.intent\.secondary {
-    color: var(--Tight-colors-typography-intent-secondary);
-}
-
-  .tsystem-cursor_not-allowed {
-    cursor: not-allowed;
-}
-
-  .tsystem-op_0\.5 {
-    opacity: 0.5;
-}
-
   .tsystem-fill_surface\.intent\.action\.active {
     fill: var(--Tight-colors-surface-intent-action-active);
 }
@@ -1653,6 +1626,10 @@
     background-color: var(--Tight-colors-surface-intent-action-highlight);
 }
 
+  .tsystem-c_typography\.intent\.secondary {
+    color: var(--Tight-colors-typography-intent-secondary);
+}
+
   .tsystem-jc_flex-end {
     justify-content: flex-end;
 }
@@ -1669,6 +1646,18 @@
     background-size: 400%;
 }
 
+  .tsystem-cursor_not-allowed {
+    cursor: not-allowed;
+}
+
+  .tsystem-op_0\.5 {
+    opacity: 0.5;
+}
+
+  .tsystem-flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
   .tsystem-bx-sh_box-shadow {
     box-shadow: var(--Tight-shadows-box-shadow);
 }
@@ -1707,18 +1696,6 @@
     border-top-right-radius: var(--Tight-radii-lg);
 }
 
-  .tsystem-flex-wrap_wrap {
-    flex-wrap: wrap;
-}
-
-  .tsystem-rg_10px {
-    row-gap: 10px;
-}
-
-  .tsystem-cg_max\(10px\,_calc\(50\%_-_600px\)\) {
-    column-gap: max(10px, calc(50% - 600px));
-}
-
   .tsystem-c_icon\.intent\.primary {
     color: var(--Tight-colors-icon-intent-primary);
 }
@@ -1843,6 +1820,40 @@
     background-color: var(--Tight-colors-typography-base);
 }
 
+  .tsystem-bg-linear_to-t {
+    --gradient-stops: var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position));
+    --gradient-position: to top;
+    background-image: linear-gradient(var(--gradient-stops));
+}
+
+  .tsystem-grad-from_\#009C75 {
+    --gradient-from: #009C75;
+}
+
+  .tsystem-grad-to_\#2AD17B {
+    --gradient-to: #2AD17B;
+}
+
+  .tsystem-grad-from-pos_23\.41\% {
+    --gradient-from-position: 23.41%;
+}
+
+  .tsystem-grad-to-pos_106\.24\% {
+    --gradient-to-position: 106.24%;
+}
+
+  .tsystem-fw_label\.strong {
+    font-weight: var(--Tight-fontWeights-label-strong);
+}
+
+  .tsystem-c_\#FFF {
+    color: #FFF;
+}
+
+  .tsystem-d_inline {
+    display: inline;
+}
+
   .tsystem-ta_end {
     text-align: end;
 }
@@ -1931,10 +1942,6 @@
     line-height: 25px;
 }
 
-  .tsystem-ls_2px {
-    letter-spacing: 2px;
-}
-
   .tsystem-fw_metric\.sm {
     font-weight: var(--Tight-fontWeights-metric-sm);
 }
@@ -2061,10 +2068,6 @@
     transform: rotate(90deg);
 }
 
-  .tsystem-fw_label\.strong {
-    font-weight: var(--Tight-fontWeights-label-strong);
-}
-
   .tsystem-stk_icon\.base\.weak {
     stroke: var(--Tight-colors-icon-base-weak);
 }
@@ -2236,6 +2239,10 @@
     color: var(--Tight-colors-icon-base-weak);
 }
 
+  .tsystem-overlay_true {
+    overlay: true;
+}
+
   .tsystem-c_surface\.intent\.danger\.active {
     color: var(--Tight-colors-surface-intent-danger-active);
 }
@@ -2556,18 +2563,6 @@
     height: 24px;
 }
 
-  .tsystem-w_14px {
-    width: 14px;
-}
-
-  .tsystem-h_14px {
-    height: 14px;
-}
-
-  .tsystem-max-w_200px {
-    max-width: 200px;
-}
-
   .tsystem-h_37px {
     height: 37px;
 }
@@ -2632,6 +2627,18 @@
     height: 80px;
 }
 
+  .tsystem-w_14px {
+    width: 14px;
+}
+
+  .tsystem-h_14px {
+    height: 14px;
+}
+
+  .tsystem-max-w_200px {
+    max-width: 200px;
+}
+
   .tsystem-max-w_900px {
     max-width: 900px;
 }
@@ -2692,8 +2699,16 @@
     height: 300px;
 }
 
-  .tsystem-w_400px {
-    width: 400px;
+  .tsystem-min-w_295px {
+    min-width: 295px;
+}
+
+  .tsystem-max-w_426px {
+    max-width: 426px;
+}
+
+  .tsystem-h_295px {
+    height: 295px;
 }
 
   .tsystem-min-w_900px {
@@ -2856,6 +2871,14 @@
     max-width: 250px;
 }
 
+  .tsystem-w_361 {
+    width: 361px;
+}
+
+  .tsystem-w_89 {
+    width: 89px;
+}
+
   .tsystem-w_200px {
     width: 200px;
 }
@@ -3602,8 +3625,8 @@
     background-color: var(--Tight-colors-surface-intent-action-discreet-active);
 }
 
-  .odd\:tsystem-bg-c_surface\.intent\.action\.highlight:nth-child(odd) {
-    background-color: var(--Tight-colors-surface-intent-action-highlight);
+  .odd\:tsystem-bg-c_surface\.reports\.alternateRows:nth-child(odd) {
+    background-color: var(--Tight-colors-surface-reports-alternateRows);
 }
 
   .even\:tsystem-bg-c_surface\.foreground:nth-child(even) {
@@ -4332,6 +4355,10 @@
       transform: none;
 }
 
+    .md\:tsystem-w_416 {
+      width: 416px;
+}
+
     .md\:tsystem-min-w_800px {
       min-width: 800px;
 }
@@ -4516,10 +4543,6 @@
       font-size: var(--Tight-fontSizes-label-strong);
 }
 
-    .xl\:tsystem-ls_0\.84px {
-      letter-spacing: 0.84px;
-}
-
     .xl\:tsystem-fs_label\.strongSub {
       font-size: var(--Tight-fontSizes-label-strongSub);
 }

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export declare type Anchor = AnchorFor<keyof PageAnchorMap>;
  *
  * @example
  * ```TypeScript
- * type BODAnchors = AnchorFor<"FinancialOverviewDashboard">;
+ * type BODAnchors = AnchorFor<"FinancialOverview">;
  * // = "conversations-section" | "transactions-section"
  * ```
  */
@@ -28,14 +28,12 @@ declare type AnchorFor<T extends keyof PageAnchorMap> = T extends keyof PageAnch
  * @see NavState
  */
 declare type AppProps = {
-    /** The current navigation target. Controls which page, anchor, and drawer are active. */
-    navState: NavState;
-    /** Called when the user triggers an internal navigation event. The host must update `navState` in response. */
-    onNavigate: (navState: NavState) => void;
-    /** Bearer token used to authenticate API requests. Obtain one from the Tight Authentication Endpoint. */
+    /** Bearer token used to authenticate API requests. Get one from the Tight Authentication Endpoint. */
     accessToken: string;
     /** Selects the Tight API environment. Defaults to `"PRODUCTION"`. Use `"SANDBOX"` for development and testing. */
     environment?: Environment;
+    /** The initial page of the TightApp that should open on the initial render. Defaults to the Financial Overview */
+    initialNav?: NavState;
 };
 
 declare function BankAccountForm({ bankAccountId }: BankAccountFormProps): JSX.Element;
@@ -73,7 +71,7 @@ declare type BankTransactionType = "EXPENSE" | "REVENUE" | "TRANSFER_IN" | "TRAN
  *
  * @see NavState
  */
-export declare type BasePage = "FinancialOverviewDashboard";
+export declare type BasePage = "FinancialOverview";
 
 /**
  * A standalone drawer for rendering a conversation that is not attached to an entity.
@@ -142,6 +140,8 @@ declare type FinancialOverviewDashboardProps = {
     onChangePeriod?: (period: Period) => void;
 };
 
+declare type FinancialOverviewPageProps = Pick<FinancialOverviewDashboardProps, "period">;
+
 declare function FinancialSummaryDrawer({ summaryId, conversationId }: FinancialSummaryDrawerProps): JSX.Element;
 
 declare type FinancialSummaryDrawerProps = {
@@ -185,11 +185,11 @@ declare type MobileConversationDrawerProps = {
  * @example
  * ```TypeScript
  * // Navigate to a top-level page
- * const nav: NavState = { page: "FinancialOverviewDashboard" };
+ * const nav: NavState = { page: "FinancialOverview" };
  *
  * // Navigate to a specific anchor section
  * const navWithAnchor: NavState = {
- *   page: "FinancialOverviewDashboard",
+ *   page: "FinancialOverview",
  *   anchor: "conversations-section",
  * };
  *
@@ -211,6 +211,7 @@ export declare type NavState = {
         page: P;
         anchor?: P extends keyof PageAnchorMap ? AnchorFor<P> : never;
         drawer?: DrawerNavObject;
+        pageProps?: P extends keyof PagePropsMap ? PagePropsMap[P] : never;
     };
 }[BasePage];
 
@@ -237,7 +238,7 @@ declare type OptionSetter = (options: Partial<ExternalOptions>, replace?: boolea
  *
  */
 declare const PAGE_ANCHOR_MAP: {
-    readonly FinancialOverviewDashboard: {
+    readonly FinancialOverview: {
         readonly CONVERSATIONS: "conversations-section";
         readonly TRANSACTIONS: "transactions-section";
     };
@@ -245,6 +246,10 @@ declare const PAGE_ANCHOR_MAP: {
 
 declare type PageAnchorMap = typeof PAGE_ANCHOR_MAP;
 
+declare type PagePropsMap = {
+    FinancialOverview: FinancialOverviewPageProps;
+};
+
 /**
  * Parses a URL string into a `NavObject` for use as the `navObject` prop on `<App />`.
  *
@@ -256,13 +261,13 @@ declare type PageAnchorMap = typeof PAGE_ANCHOR_MAP;
  *
  * @example
  * ```TypeScript
- * const nav = parseNavUrl("https://app.example.com?bkPage=FinancialOverviewDashboard");
- * // nav = { page: "FinancialOverviewDashboard" }
+ * const nav = parseNavUrl("https://app.example.com?bkPage=FinancialOverview");
+ * // nav = { page: "FinancialOverview" }
  *
  * const navWithAnchor = parseNavUrl(
- *   "https://app.example.com?bkPage=FinancialOverviewDashboard&bkAnchor=conversations-section"
+ *   "https://app.example.com?bkPage=FinancialOverview&bkAnchor=conversations-section"
  * );
- * // navWithAnchor = { page: "FinancialOverviewDashboard", anchor: "conversations-section" }
+ * // navWithAnchor = { page: "FinancialOverview", anchor: "conversations-section" }
  * ```
  */
 export declare function parseNavUrl(url: string): NavState | undefined;
@@ -282,30 +287,27 @@ declare const PLAID_EVENTS: {
 
 declare type PlaidEvent = ValueOf<typeof PLAID_EVENTS>;
 
+export declare function ReportDashboard(): JSX.Element;
+
 declare const SUPPORTED_INTEGRATION_IDENTIFIERS: readonly ["UNIT", "STRIPE", "GUSTO", "SHOPIFY", "SQUARE", "RUTTER", "UBER", "MOOV", "QUALPAY", "MANUAL_ENTRY", "PARTNER_IMPLEMENTATION", "QBO", "XERO", "FRESHBOOKS"];
 
 export declare function Tight({ children, environment, accessToken }: TightProps): JSX.Element;
 
 /**
- * The root component of the Tight application.
- *
- * Wraps all dashboard views in a shared `MemoryRouter` and navigation context.
- * Navigation state is driven externally via the `navState` prop, making the
- * component fully controlled — the host application owns navigation state.
+ * All-in-one component that provides simple and easy consumption of Tight Embedded Components.
  *
  * @param accessToken - Bearer token used to authenticate API requests.
  * @param environment - Selects the Tight API environment (`"PRODUCTION"` or `"SANDBOX"`). Defaults to `"PRODUCTION"`.
- * @param navState - The current navigation target. Controls page, anchor, and open drawer.
- * @param onNavigate - Callback fired when the user triggers an internal navigation event.
+ * @param initialNav - The initial page of the TightApp that should open on the initial render. Defaults to the Financial Overview
  *
  * @example
  * ```TypeScript
- * const [nav, setNav] = useState<NavState>({ page: "FinancialOverviewDashboard" });
+ * const initialTightPage = { page: "FinancialOverview" };
  *
- * <TightApp accessToken={accessToken} navState={nav} onNavigate={setNav} />
+ * <TightApp accessToken={accessToken} initialNav={initialTightPage} />
  * ```
  */
-export declare function TightApp({ accessToken, environment, navState, onNavigate }: AppProps): JSX.Element;
+export declare function TightApp({ accessToken, environment, initialNav }: AppProps): JSX.Element;
 
 declare type TightProps = PropsWithChildren<{
     environment: Environment;
@@ -331,7 +333,7 @@ declare const TransactionTableColumns: {
     readonly DESCRIPTION: "description";
     readonly AMOUNT: "amount";
     readonly CATEGORY: "category";
-    readonly CLASS_SEGMENT: "classSegment";
+    readonly DIMENSION_VALUE: "dimensionValue";
     readonly REVIEW_STATUS: "reviewStatus";
     readonly COMMENTS: "comments";
 };