@tight-embedded/react 6.0.2 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tight-embedded/react",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -16,8 +16,7 @@
       "require": "./dist/index.umd.cjs"
     },
     "./index.css": "./dist/index.css",
-    "./duplet.css": "./dist/duplet.css",
-    "./inter.css": "./dist/inter.css"
+    "./duplet.css": "./dist/duplet.css"
   },
   "peerDependencies": {
     "react": "^18.3.1 || ^19.0.0",
@@ -41,6 +40,7 @@
     "fuse.js": "^7.1.0",
     "idb": "^8.0.2",
     "lodash-es": "^4.17.21",
+    "motion": "^12.35.0",
     "react-confirm": "^0.4.0",
     "react-number-format": "^5.4.4",
     "recharts": "^3.1.2",
@@ -100,10 +100,10 @@
   },
   "nyc": {
     "check-coverage": true,
-    "branches": 37,
-    "functions": 40,
-    "lines": 40,
-    "statements": 40
+    "branches": 35,
+    "functions": 35,
+    "lines": 35,
+    "statements": 35
   },
   "scripts": {
     "setup": "chmod -R +x ./scripts",
@@ -111,6 +111,8 @@
     "typecheck": "./scripts/typecheck.sh -w false",
     "build": "./scripts/build.sh",
     "build:lab": "./scripts/buildLab.sh",
+    "build:playgroundComponents": "./scripts/buildPlaygroundComponents.sh",
+    "dev:playgroundComponents": "vite dev -c vite.playgroundComponents.config.ts",
     "build:playground": "../../apps/playground/scripts/buildPlayground.sh",
     "analyze": "./scripts/analyze.sh",
     "lint": "./scripts/lint.sh",

package/dist/235.css

@@ -1,446 +0,0 @@
-:where(:root, :host) {
-
-    /* Brand Colors */
-
-    --Tight-colors-brand-primary-weak: #0A8080;
-    --Tight-colors-brand-primary: #005961;
-    --Tight-colors-brand-primary-strong: #0A8080;
-
-    --Tight-colors-brand-secondary-weak: #FFFFFF;
-    --Tight-colors-brand-secondary: #E5F4F3;
-    --Tight-colors-brand-secondary-strong: #6c7381;
-
-    --Tight-colors-brand-success-opaque: #E5F4F3;
-    --Tight-colors-brand-success-weak: #E5F4F3;
-    --Tight-colors-brand-success: #56A9AC;
-    --Tight-colors-brand-success-strong: #005961;
-
-    --Tight-colors-brand-warning-opaque: #FFF2DF;
-    --Tight-colors-brand-warning-weak: #FFF2DF;
-    --Tight-colors-brand-warning: #E1B762;
-    --Tight-colors-brand-warning-strong: #E1B762;
-
-    --Tight-colors-brand-danger-opaque: #FFFBFB;
-    --Tight-colors-brand-danger-weak: #FFFBFB;
-    --Tight-colors-brand-danger: #FFEDEB;
-    --Tight-colors-brand-danger-strong: #C53336;
-
-    --Tight-colors-brand-action-opaque: #E5F4F3;
-    --Tight-colors-brand-action-weak: #E5F4F3;
-    --Tight-colors-brand-action: #CEE6E6;
-    --Tight-colors-brand-action-strong: #9DCCCC;
-
-    /* Surface Colors */
-
-    --Tight-colors-surface-background: #FAFAFA;
-    --Tight-colors-surface-elevated: #F8F5F2;
-
-    /*--Tight-colors-surface-intent-secondary: #f5f7fa;*/
-    /*--Tight-colors-surface-intent-secondary-hover: #f5f7fa;*/
-    /*--Tight-colors-surface-intent-secondary-active: #f5f7fa;*/
-
-    /*--Tight-colors-surface-intent-success: #dcfce7;*/
-    /*--Tight-colors-surface-intent-success-hover: #dcfce7;*/
-    /*--Tight-colors-surface-intent-success-active: #dcfce7;*/
-
-    /*--Tight-colors-surface-intent-warning: #fffbec;*/
-    /*--Tight-colors-surface-intent-warning-hover: #fffbec;*/
-    /*--Tight-colors-surface-intent-warning-active: #fffbec;*/
-
-    /*--Tight-colors-surface-intent-danger: #fee2e1;*/
-    /*--Tight-colors-surface-intent-danger-hover: #fee2e1;*/
-    /*--Tight-colors-surface-intent-danger-active: #fee2e1;*/
-
-    /* Typography Colors */
-
-    --Tight-colors-typography-base: #525257;
-    --Tight-colors-typography-label-sub: #6b6b6b;
-    --Tight-colors-typography-label-strongSub: #6b6b6b;
-
-    --Tight-colors-typography-intent-primary: #FFFFFF;
-    --Tight-colors-typography-intent-primary-hover: #FFFFFF;
-    --Tight-colors-typography-intent-primary-active: #FFFFFF;
-
-    --Tight-colors-typography-intent-secondary: #6c6c72;
-    --Tight-colors-typography-intent-secondary-hover: #6c6c72;
-    --Tight-colors-typography-intent-secondary-active: #6c6c72;
-
-    /* Border Colors */
-
-    --Tight-colors-border-layout-weak: #eff3f5;
-    --Tight-colors-border-layout: #CED1D2;
-    --Tight-colors-border-layout-strong: #525257;
-
-    --Tight-colors-border-intent-primary-hover: #0A8080;
-    --Tight-colors-border-intent-primary: #0A8080;
-    --Tight-colors-border-intent-primary-active: #0A8080;
-
-    --Tight-colors-border-intent-secondary-hover: #005C5C;
-    --Tight-colors-border-intent-secondary: #005C5C;
-    --Tight-colors-border-intent-secondary-active: #005C5C;
-
-    --Tight-colors-border-intent-danger-hover: #A31821;
-
-    /*--Tight-colors-border-intent-warning-hover: #ffe58f;*/
-    /*--Tight-colors-border-intent-warning: #ffe58f;*/
-    /*--Tight-colors-border-intent-warning-active: #ffe58f;*/
-
-    /*--Tight-colors-border-intent-success-hover: #8ceda8;*/
-    /*--Tight-colors-border-intent-success: #8ceda8;*/
-    /*--Tight-colors-border-intent-success-active: #8ceda8;*/
-
-    /*--Tight-colors-border-intent-action-hover: #93c6ff;*/
-    /*--Tight-colors-border-intent-action: #93c6ff;*/
-    /*--Tight-colors-border-intent-action-active: #93c6ff;*/
-
-    /* Money Colors */
-
-    --Tight-colors-money-negative-weak: #E36751;
-    --Tight-colors-money-negative: #EB4C33;
-    --Tight-colors-money-negative-strong: #A52E1B;
-    --Tight-colors-money-positive-weak: #56A9AC;
-    --Tight-colors-money-positive: #52B2B6;
-    --Tight-colors-money-positive-strong: #245860;
-
-    /* Border Radii */
-
-    --Tight-radii-sm: 4px;
-    --Tight-radii-md: 4px;
-    --Tight-radii-lg: 5px;
-
-    /* Typefaces */
-
-    --Tight-fonts-base: "G Centra", sans-serif;
-
-    /* Font Weights */
-
-    --Tight-fontWeights-md: 500;
-
-    /* Box Shadows */
-
-    --Tight-shadows-box-shadow: 0px -2px 12px rgba(28, 28, 28, 0.04), 0px 8px 16px rgba(28, 28, 28, 0.12), 0px 4px 12px rgba(28, 28, 28, 0.04);
-
-}
-
-.Tight-heading {
-    line-height: normal;
-    letter-spacing: 0;
-}
-.Tight-label {
-    line-height: normal;
-    letter-spacing: 0.32px;
-}
-.Tight-strong-label {
-    line-height: normal;
-    letter-spacing: 0.32px;
-}
-.Tight-sub-label {
-    line-height: 1.25rem;
-    letter-spacing: 0.32px;
-}
-.Tight-strong-sub-label {
-    line-height: 1.25rem;
-    letter-spacing: 0.32px;
-}
-.Tight-body {
-    line-height: 1.3;
-    letter-spacing: 0.32px;
-}
-
-.Tight-dashboard-header {
-    input {
-        font-family: "G Centra", sans-serif;
-    }
-    .Tight-button-primary {
-        font-family: "G Centra", sans-serif;
-        border: none;
-        font-weight: 400;
-        color: #0A8080;
-        text-decoration: underline;
-        .Tight-small-icon > path {
-            stroke: #0A8080;
-        }
-    }
-}
-.Tight-dashboard-table {
-    border: none;
-}
-.Tight-dashboard-table-header {
-    border-top: 1px solid var(--Tight-colors-border-layout-strong);
-    background-color: var(--Tight-colors-surface-background);
-}
-.Tight-dashboard-table-column-header {
-    .Tight-text {
-        color: #6B6B6B;
-    }
-}
-.Tight-table-parent-row {
-    border-top: 1px solid var(--Tight-colors-border-layout-strong);
-    background-color: var(--Tight-colors-surface-foreground);
-    @media (hover: hover) and (pointer: fine) {
-        &:hover:not(:disabled) {
-            background-color: #F9FDFC;
-        }
-    }
-}
-.Tight-table-cell-divider {
-    display: none;
-}
-
-.Tight-button-table-header {
-    border: 2px solid var(--Tight-colors-border-intent-primary);
-
-    .Tight-text {
-        font-weight: 500;
-        color: #0A8080;
-    }
-    .Tight-small-icon {
-        display: none;
-    }
-    .Tight-medium-icon {
-        display: none;
-    }
-}
-.Tight-button-tertiary {
-    border: none;
-    background-color: var(--Tight-colors-brand-primary-weak);
-
-    .Tight-text {
-        font-weight: 500;
-        color: white;
-    }
-    .Tight-strong-label {
-        font-weight: 500;
-        color: white;
-    }
-    .Tight-small-icon {
-        display: none;
-    }
-}
-
-.Tight-selector-button {
-    @media (hover: hover) and (pointer: fine) {
-        &:hover:not(:disabled) {
-            background-color: #E5F4F3;
-        }
-    }
-}
-.Tight-review-status-selector-button {
-    border: none;
-    background-color: transparent;
-
-    .Tight-text {
-        font-weight: 500;
-        color: #0A8080;
-        text-decoration: underline;
-    }
-    .Tight-label {
-        font-weight: 500;
-        color: #0A8080;
-        text-decoration: underline;
-    }
-    .Tight-icon > path {
-        stroke: #0A8080;
-    }
-    .Tight-icon > g > path {
-        stroke: #0A8080;
-    }
-
-    .Tight-button-base {
-        text-transform: lowercase;
-        .Tight-text {
-            text-transform: lowercase;
-        }
-        .Tight-label {
-            text-transform: lowercase;
-        }
-        .Tight-strong-label {
-            text-transform: lowercase;
-        }
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-        &:hover:not(:disabled) {
-            .Tight-text {
-                color: #005961;
-            }
-            .Tight-label {
-                color: #005961;
-            }
-            .Tight-medium-icon > path {
-                stroke: #005961;
-            }
-        }
-    }
-
-    &:active:enabled, &[data-active='true']:enabled {
-        background-color: #E5F4F3;
-    }
-}
-.Tight-review-status-dropdown-arrow {
-    display: flex;
-}
-
-.Tight-filter-bar {
-    background-color: var(--Tight-colors-surface-foreground);
-    border: 1px solid var(--Tight-colors-border-layout);
-}
-.Tight-bulk-select {
-    height: 40px
-}
-.Tight-filter-pill {
-    border-radius: 100px;
-    border-color: #929292;
-    @media (hover: hover) and (pointer: fine) {
-        &:hover:not(:disabled) {
-            background-color: #FAFAFA;
-            border-color: #535353;
-        }
-    }
-}
-
-.Tight-pagination-button {
-    height: 44px;
-    border: none;
-
-    button {
-        &:disabled {
-            opacity: 0.6;
-        }
-        .Tight-small-icon > path {
-            stroke: #0A8080;
-        }
-    }
-}
-
-.Tight-tile-header {
-    padding: 20px;
-}
-.Tight-tile-body {
-    padding: 20px;
-}
-
-.Tight-financial-summary-chatbox-header {
-    .Tight-strong-label {
-        font-size: 14px;
-        font-weight: 500;
-    }
-}
-.Tight-financial-summary-layout {
-    padding: 20px;
-}
-.Tight-financial-summary-chatbox {
-    padding: 20px;
-    background-color: var(--Tight-colors-surface-foreground);
-    .Tight-strong-label {
-        font-size: 14px;
-        font-weight: 500;
-    }
-    .Tight-button-primary {
-        height: 36px;
-        border: 2px solid var(--Tight-colors-border-intent-primary);
-
-        .Tight-strong-label {
-            font-size: 14px;
-            font-weight: 500;
-            color: #0A8080;
-        }
-        .Tight-small-icon {
-            display: none;
-        }
-        .Tight-medium-icon {
-            display: none;
-        }
-    }
-}
-.Tight-financial-summary-chatbox-header {
-    padding-left: 20px;
-    padding-right: 20px;
-}
-
-.Tight-tile-bar-label {
-    .Tight-label {
-        color: var(--Tight-colors-typography-contrast);
-    }
-}
-
-.Tight-month-picker {
-    border: none;
-    .Tight-small-icon > path {
-        stroke: #0A8080;
-    }
-}
-.Tight-month-picker-label {
-    width: 85px;
-}
-.Tight-month-picker-left-button {
-    border-right: none;
-}
-.Tight-month-picker-right-button {
-    border-left: none;
-}
-
-.Tight-banner {
-    box-shadow: var(--Tight-shadows-box-shadow);
-    background-color: #F9FDFC;
-    border: none;
-    .Tight-sub-label {
-        margin-left: 44px;
-    }
-}
-.Tight-banner-button {
-    background-color: var(--Tight-colors-brand-primary-weak);
-    border: none;
-    .Tight-label {
-        color: var(--Tight-colors-typography-intent-primary);
-    }
-    .Tight-strong-label {
-        color: var(--Tight-colors-typography-intent-primary);
-    }
-    &:hover:not(:disabled) {
-        background-color: var(--Tight-colors-brand-primary);
-    }
-
-    &:active:enabled, &[data-active='true']:enabled {
-        background-color: var(--Tight-colors-brand-primary);
-    }
-}
-.Tight-banner-button-icon {
-    display: none;
-}
-.Tight-banner-title {
-    height: 21px;
-    align-items: flex-start;
-}
-.Tight-banner-title > img {
-    margin-top: 5px;
-    height: 36px;
-    width: 36px;
-}
-.Tight-banner-title > svg {
-    margin-top: 5px;
-    height: 36px;
-    width: 36px;
-}
-
-.Tight-empty-dashboard-layout {
-    background-color: var(--Tight-colors-surface-foreground);
-}
-
-.Tight-button-inline {
-    .Tight-sub-label {
-        color: var(--Tight-colors-typography-contrast);
-    }
-}
-
-.Tight-button-group {
-    @media (hover: hover) and (pointer: fine) {
-        &:hover:not(:disabled) {
-            background-color: #E5F4F3;
-        }
-    }
-    &:active:enabled, &[data-active='true']:enabled {
-        background-color: #E5F4F3;
-        border-color: var(--Tight-colors-border-intent-primary-active);
-    }
-}