@tight-embedded/react 6.0.2 → 6.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tight-embedded/react",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "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",
@@ -111,6 +110,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);
-    }
-}

package/dist/41.css

@@ -1,245 +0,0 @@
-:where(:root, :host) {
-    /* Brand Colors */
-    --Tight-colors-brand-primary-weak: #000000;
-    --Tight-colors-brand-primary: #000000;
-    --Tight-colors-brand-primary-strong: #000000;
-
-    --Tight-colors-brand-action-weak: rgba(0, 0, 0, 0.02);
-    --Tight-colors-brand-action: rgba(0, 0, 0, 0.04);
-    --Tight-colors-brand-action-strong: rgba(0, 0, 0, 0.06);
-
-    --Tight-colors-brand-success-weak: #b9ffbb;
-    --Tight-colors-brand-success: #33F28B;
-    --Tight-colors-brand-success-strong: rgb(37, 216, 117);
-
-    --Tight-colors-brand-warning-weak: #626262;
-    --Tight-colors-brand-warning: #626262;
-    --Tight-colors-brand-warning-strong: #000000;
-
-    --Tight-colors-brand-danger-weak: #FFAAAA;
-    --Tight-colors-brand-danger: #F0685F;
-    --Tight-colors-brand-danger-strong: #E12513;
-
-    /* Surface Colors */
-    --Tight-colors-surface-background: #FAFAFA;
-    --Tight-colors-surface-foreground: #FFFFFF;
-
-    --Tight-colors-surface-intent-success: #33F28B;
-    --Tight-colors-surface-intent-success-hover: rgb(37, 216, 117);
-
-    --Tight-colors-surface-intent-warning-hover: #000000;
-
-    /* Border Colors */
-    --Tight-colors-border-layout-weak: rgba(0, 0, 0, 0.10);
-    --Tight-colors-border-layout: rgba(0, 0, 0, 0.18);
-    --Tight-colors-border-layout-strong: rgba(0, 0, 0, 0.18);
-
-    --Tight-colors-border-intent-success: transparent;
-    --Tight-colors-border-intent-success-hover: transparent;
-    --Tight-colors-border-intent-success-active: transparent;
-
-    --Tight-colors-border-intent-warning: transparent;
-    --Tight-colors-border-intent-warning-hover: transparent;
-    --Tight-colors-border-intent-warning-active: transparent;
-
-    --Tight-colors-border-intent-danger: transparent;
-    --Tight-colors-border-intent-danger-hover: transparent;
-    --Tight-colors-border-intent-danger-active: transparent;
-
-    /* Money Colors */
-    --Tight-colors-money-positive: #00863A;
-    --Tight-colors-money-positive-weak: rgb(37, 216, 117);
-    --Tight-colors-money-negative: #F8645B;
-    --Tight-colors-money-negative-weak: #FD9390;
-
-    /* Custom Colors */
-    --zb-success-badge: rgb(141, 248, 181);
-    --zb-banner-default: #ededed;
-    --zb-banner-promo: #111112;
-    --zb-banner-error: #ffaaaa;
-    --zb-banner-info: #bed4ff;
-    --zb-banner-action: #b9ffbb;
-    --zb-banner-ai: #d1b5ff;
-
-    /* Layout */
-    --Tight-radii-sm: 4px;
-    --Tight-radii-md: 12px;
-    --Tight-radii-lg: 12px;
-
-    --Tight-shadows-box-shadow: 0 2px 10px 0 rgba(153, 153, 153, 0.5);
-
-    /* Typography */
-    --Tight-fontSizes-label: 16px;
-    --Tight-fontSizes-label-sub: 14px;
-    --Tight-fontSizes-label-strong: 16px;
-    --Tight-fontSizes-label-strongSub: 14px;
-
-    --Tight-fontWeights-md: 500;
-
-    --Tight-colors-typography-base: rgba(0, 0, 0, 0.93);
-    --Tight-colors-typography-base-weak: rgba(0, 0, 0, 0.74);
-
-    --Tight-colors-typography-intent-primary: #FFFFFF;
-    --Tight-colors-typography-intent-primary-hover: #FFFFFF;
-    --Tight-colors-typography-intent-primary-active: #FFFFFF;
-
-    --Tight-colors-typography-intent-action-hover: #6F7576;
-
-    --Tight-colors-typography-intent-warning: #FFFFFF;
-    --Tight-colors-typography-intent-warning-hover: #FFFFFF;
-    --Tight-colors-typography-intent-warning-active: #FFFFFF;
-}
-
-* {
-    font-family: "Inter", sans-serif;
-}
-.Tight-label {
-    line-height: 18px;
-}
-.Tight-strong-label {
-    line-height: 18px;
-}
-.Tight-sub-label {
-    line-height: 16px;
-}
-.Tight-strong-sub-label {
-    line-height: 16px;
-}
-
-.Tight-filter-bar {
-    background-color: var(--Tight-colors-surface-foreground);
-    border: 1px solid var(--Tight-colors-border-layout-strong);
-}
-
-.Tight-business-owner-table {
-    border: none;
-}
-.Tight-table-parent-row {
-    margin-bottom: 12px;
-    border: 1px solid var(--Tight-colors-border-layout-strong);
-    border-radius: var(--Tight-radii-md);
-    background-color: var(--Tight-colors-surface-foreground);
-}
-
-.Tight-popup {
-    background-color: var(--Tight-colors-surface-foreground);
-    border-radius: var(--Tight-radii-sm);
-    border: none;
-}
-.Tight-selector-row {
-    border: none;
-}
-
-.Tight-table-cell-divider {
-    display: none;
-}
-.Tight-badge {
-    border-radius: 9999px;
-    height: 28px;
-    padding-left: 12px;
-    padding-right: 12px;
-    border: none;
-}
-.Tight-success-badge {
-    background-color: var(--zb-success-badge);
-
-    &:focus-visible, &[data-state="open"] {
-        background-color: var(--Tight-colors-brand-success);
-    }
-    @media (hover: hover) and (pointer: fine) {
-        &:hover {
-            background-color: var(--Tight-colors-brand-success);
-        }
-    }
-}
-
-.Tight-drawer-header {
-    background-color: var(--Tight-colors-surface-background);
-    padding-left: 24px;
-    padding-right: 24px;
-}
-.Tight-form-header-border {
-    margin-right: 24px;
-    margin-left: 24px;
-}
-.Tight-form-body {
-    padding-left: 24px;
-    padding-right: 24px;
-}
-
-.Tight-button-base {
-    border-radius: var(--Tight-radii-sm);
-}
-.Tight-button-secondary {
-    border: 1px solid var(--Tight-colors-brand-primary-strong);
-    &:active:enabled, &[data-active="true"]:enabled {
-        background-color: #FFFFFF;
-        color: var(--Tight-colors-brand-primary-strong);
-        .Tight-text {
-            color: var(--Tight-colors-brand-primary-strong);
-        }
-        .Tight-icon > path {
-            stroke: var(--Tight-colors-brand-primary-strong);
-        }
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-        &:hover:not(:disabled) {
-            background-color: #FFFFFF;
-            color: var(--Tight-colors-brand-primary-strong);
-
-            .Tight-text {
-                color: var(--Tight-colors-brand-primary-strong);
-            }
-
-            .Tight-icon > path {
-                stroke: var(--Tight-colors-brand-primary-strong);
-            }
-        }
-    }
-}
-
-.Tight-month-picker-left-button {
-    border-right: none;
-}
-.Tight-month-picker-right-button {
-    border-left: none;
-}
-
-.Tight-tile {
-    box-shadow: none;
-}
-.Tight-tile-header {
-    border-bottom: none;
-}
-
-.Tight-banner {
-    border-color: var(--Tight-colors-border-layout-weak);
-}
-.Tight-banner-high {
-    background-color: var(--zb-banner-action);
-}
-.Tight-banner-medium {
-    background-color: var(--zb-banner-default);
-}
-.Tight-banner-button { /* match zb solid black banner buttons */
-    background-color: var(--Tight-colors-surface-intent-primary);
-    border-color: var(--Tight-colors-border-intent-primary);
-    @media (hover: hover) and (pointer: fine) {
-        &:hover:not(:disabled) {
-            background-color: var(--Tight-colors-surface-intent-primary-hover);
-            border-color: var(--Tight-colors-border-intent-primary-hover);
-        }
-    }
-
-    &:active:enabled, &[data-active='true']:enabled {
-        background-color: var(--Tight-colors-surface-intent-primary-active);
-        border-color: var(--Tight-colors-border-intent-primary-active);
-    }
-}
-.Tight-banner-button-text {
-    color: var(--Tight-colors-typography-intent-primary);
-}
-.Tight-banner-button-icon > path {
-    stroke: var(--Tight-colors-icon-intent-primary);
-}