@salesmind-ai/design-system 0.1.12 → 0.2.1

package/dist/index.css

@@ -3969,225 +3969,6 @@
 }
 
 /* src/components/Navbar/Navbar.css */
-.ds-navbar {
-  position: sticky;
-  top: 0;
-  z-index: var(--z-modal-backdrop);
-  width: 100%;
-  height: 64px;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 var(--space-4);
-  box-sizing: border-box;
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop-light);
-  -webkit-backdrop-filter: var(--glass-backdrop-light);
-  border-bottom: 1px solid var(--rim-light-bottom);
-  transition:
-    background var(--transition-base),
-    border-color var(--transition-base),
-    height var(--transition-base);
-}
-.ds-navbar--scrolled {
-  background: var(--glass-base-active);
-  box-shadow: var(--glass-shadow-outer);
-}
-.ds-navbar__brand {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-family: var(--font-family);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-lg);
-  color: var(--text-primary);
-  text-decoration: none;
-  margin-right: var(--space-8);
-  flex-shrink: 0;
-  white-space: nowrap;
-  hyphens: none;
-  word-break: normal;
-  overflow-wrap: normal;
-}
-.ds-navbar__content {
-  display: flex;
-  align-items: center;
-  gap: var(--space-6);
-  flex: 1;
-  min-width: 0;
-  overflow: visible;
-}
-.ds-navbar__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  margin-left: var(--space-4);
-  flex-shrink: 0;
-  white-space: nowrap;
-  min-width: max-content;
-}
-.ds-navbar__item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) 0;
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--text-secondary);
-  text-decoration: none;
-  cursor: pointer;
-  background: none;
-  border: none;
-  white-space: nowrap;
-  hyphens: none;
-  word-break: normal;
-  overflow-wrap: normal;
-  transition: color var(--transition-fast);
-}
-.ds-navbar__item:hover {
-  color: var(--text-primary);
-}
-.ds-navbar__item--active {
-  position: relative;
-  color: var(--text-primary);
-}
-.ds-navbar__item--active::after {
-  content: "";
-  position: absolute;
-  bottom: -21px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--brand-pink);
-  box-shadow: 0 -2px 8px var(--brand-pink-glow);
-  border-radius: var(--radius-pill);
-}
-.ds-navbar__search-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1-5);
-  height: 30px;
-  padding: 0 var(--space-2-5);
-  border: none;
-  border-radius: var(--radius-button);
-  background: var(--glass-base-hover);
-  color: var(--text-tertiary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-regular);
-  line-height: 1;
-  cursor: pointer;
-  white-space: nowrap;
-  min-width: 120px;
-  transition: background var(--transition-fast), color var(--transition-fast);
-}
-.ds-navbar__search-trigger:hover {
-  background: var(--glass-base-active);
-  color: var(--text-secondary);
-}
-.ds-navbar__search-trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-.ds-navbar__search-trigger-icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--text-tertiary);
-}
-.ds-navbar__search-trigger-placeholder {
-  flex: 1;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ds-navbar__search-trigger-shortcut {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px var(--space-1-5);
-  border-radius: var(--radius-badge);
-  background: var(--glass-base);
-  border: 1px solid var(--rim-light-bottom);
-  color: var(--text-quaternary);
-  font-size: 10px;
-  font-family: var(--font-family-mono, ui-monospace, monospace);
-  line-height: 1.4;
-  flex-shrink: 0;
-}
-@media (max-width: 1279px) {
-  .ds-navbar__search-trigger {
-    min-width: 80px;
-  }
-  .ds-navbar__search-trigger-shortcut {
-    display: none;
-  }
-}
-@media (max-width: 1099px) {
-  .ds-navbar__search-trigger {
-    min-width: 0;
-  }
-  .ds-navbar__search-trigger-placeholder {
-    display: none;
-  }
-}
-.ds-navbar__toggle {
-  display: none;
-  background: none;
-  border: none;
-  color: var(--text-primary);
-  padding: var(--space-2);
-  cursor: pointer;
-  border-radius: var(--radius-button);
-}
-.ds-navbar__toggle:hover {
-  background: var(--glass-base-hover);
-}
-@media (max-width: 1279px) {
-  .ds-navbar__content {
-    gap: var(--space-5);
-  }
-  .ds-navbar__brand {
-    margin-right: var(--space-6);
-  }
-  .ds-navbar__actions {
-    gap: var(--space-2);
-  }
-}
-@media (max-width: 1099px) {
-  .ds-navbar__content {
-    gap: var(--space-3);
-  }
-  .ds-navbar__actions {
-    gap: var(--space-1-5);
-    margin-left: var(--space-2);
-  }
-  .ds-navbar__brand {
-    margin-right: var(--space-3);
-  }
-  .ds-navbar__item {
-    font-size: var(--font-size-xs);
-  }
-  .ds-navbar-mega-menu__trigger {
-    font-size: var(--font-size-xs);
-  }
-}
-@media (max-width: 767px) {
-  .ds-navbar {
-    padding: 0 var(--space-3);
-  }
-  .ds-navbar__content {
-    display: none;
-  }
-  .ds-navbar__actions {
-    display: none;
-  }
-  .ds-navbar__toggle {
-    display: flex;
-    margin-left: auto;
-  }
-}
 .ds-navbar__mobile-overlay {
   position: fixed;
   top: 64px;
@@ -4293,6 +4074,10 @@
 .ds-navbar-mega-menu__chevron {
   display: inline-flex;
   align-items: center;
+  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ds-navbar-mega-menu__chevron[data-state=open] {
+  transform: rotate(180deg);
 }
 .ds-navbar-mega-menu__content {
   position: absolute;
@@ -4309,6 +4094,24 @@
   z-index: var(--z-dropdown);
   transform-origin: top center;
   overflow: hidden;
+  opacity: 0;
+  transform: translateY(-8px) scale(0.995);
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
+    transform 0.15s cubic-bezier(0.4, 0, 1, 1),
+    visibility 0s 0.15s;
+}
+.ds-navbar-mega-menu__content[data-state=open] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  visibility: visible;
+  pointer-events: auto;
+  transition:
+    opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
+    visibility 0s 0s;
 }
 .ds-navbar-mega-menu__content::before {
   content: "";
@@ -4339,9 +4142,61 @@
   border-radius: var(--radius-card);
   transform-origin: top center;
 }
+.ds-navbar-mega-menu__content--floating[data-state=closed] {
+  transform: translateX(-50%) translateY(-8px) scale(0.995);
+}
+.ds-navbar-mega-menu__content--floating[data-state=open] {
+  transform: translateX(-50%) translateY(0) scale(1);
+}
 .ds-navbar-mega-menu__content--floating::before {
   display: none;
 }
+.ds-navbar-mega-menu__section {
+  opacity: 0;
+  transform: translateY(8px);
+  filter: blur(4px);
+  transition:
+    opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    filter 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section,
+[data-state=open] > .ds-navbar-mega-menu__section {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0px);
+}
+[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(1),
+[data-state=open] > .ds-navbar-mega-menu__section:nth-child(1) {
+  transition-delay: 60ms;
+}
+[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(2),
+[data-state=open] > .ds-navbar-mega-menu__section:nth-child(2) {
+  transition-delay: 100ms;
+}
+[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(3),
+[data-state=open] > .ds-navbar-mega-menu__section:nth-child(3) {
+  transition-delay: 140ms;
+}
+[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(4),
+[data-state=open] > .ds-navbar-mega-menu__section:nth-child(4) {
+  transition-delay: 180ms;
+}
+[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(5),
+[data-state=open] > .ds-navbar-mega-menu__section:nth-child(5) {
+  transition-delay: 220ms;
+}
+[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(6),
+[data-state=open] > .ds-navbar-mega-menu__section:nth-child(6) {
+  transition-delay: 260ms;
+}
+[data-state=closed] .ds-navbar-mega-menu__section {
+  opacity: 0;
+  transition:
+    opacity 0.1s,
+    transform 0s 0.1s,
+    filter 0s 0.1s;
+}
 .ds-navbar-mega-menu__section-heading {
   margin-bottom: var(--space-3);
   font-family: var(--font-family);
@@ -4356,6 +4211,51 @@
   flex-direction: column;
   gap: var(--space-1);
 }
+.ds-navbar-mega-menu__item-wrapper {
+  opacity: 0;
+  transform: translateY(8px);
+  filter: blur(4px);
+  transition:
+    opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    filter 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+[data-state=open] .ds-navbar-mega-menu__item-wrapper {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0px);
+}
+[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(1) {
+  transition-delay: 80ms;
+}
+[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(2) {
+  transition-delay: 120ms;
+}
+[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(3) {
+  transition-delay: 160ms;
+}
+[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(4) {
+  transition-delay: 200ms;
+}
+[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(5) {
+  transition-delay: 240ms;
+}
+[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(6) {
+  transition-delay: 280ms;
+}
+[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(7) {
+  transition-delay: 320ms;
+}
+[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(8) {
+  transition-delay: 360ms;
+}
+[data-state=closed] .ds-navbar-mega-menu__item-wrapper {
+  opacity: 0;
+  transition:
+    opacity 0.1s,
+    transform 0s 0.1s,
+    filter 0s 0.1s;
+}
 .ds-navbar-mega-menu__item {
   display: flex;
   align-items: flex-start;
@@ -4419,6 +4319,15 @@
   .ds-navbar-mega-menu__content {
     transition: none;
   }
+  .ds-navbar-mega-menu__chevron {
+    transition: none;
+  }
+  .ds-navbar-mega-menu__section {
+    transition: none;
+  }
+  .ds-navbar-mega-menu__item-wrapper {
+    transition: none;
+  }
 }
 
 /* src/components/NavbarV2/NavbarV2.css */
@@ -4639,7 +4548,10 @@
   display: inline-flex;
   align-items: center;
   opacity: 0.3;
-  transition: opacity var(--transition-fast);
+  transition: opacity var(--transition-fast), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ds-navbar-v2__tab-chevron[data-state=open] {
+  transform: rotate(180deg);
 }
 .ds-navbar-v2__tab:hover .ds-navbar-v2__tab-chevron,
 .ds-navbar-v2__tab--active .ds-navbar-v2__tab-chevron {
@@ -4660,13 +4572,31 @@
   padding: var(--space-6);
   z-index: var(--z-dropdown);
   transform-origin: top center;
-  overflow: hidden;
+  overflow: visible;
   background: var(--void-base);
   backdrop-filter: blur(24px) saturate(180%);
   -webkit-backdrop-filter: blur(24px) saturate(180%);
   border: 1px solid var(--rim-light-bottom);
   border-radius: var(--radius-card);
   box-shadow: var(--shadow-xl), 0 0 0 1px var(--rim-light-bottom);
+  opacity: 0;
+  transform: translateX(-50%) translateY(-8px) scale(0.98);
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 150ms cubic-bezier(0.4, 0, 1, 1),
+    transform 150ms cubic-bezier(0.4, 0, 1, 1),
+    visibility 0s linear 150ms;
+}
+.ds-navbar-v2__mega-panel[data-state=open] {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0) scale(1);
+  visibility: visible;
+  pointer-events: auto;
+  transition:
+    opacity 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    visibility 0s linear 0s;
 }
 .ds-navbar-v2__mega-panel::before {
   content: "";
@@ -4687,6 +4617,15 @@
   opacity: 0.8;
   pointer-events: none;
 }
+.ds-navbar-v2__mega-panel::after {
+  content: "";
+  position: absolute;
+  top: -8px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: transparent;
+}
 .ds-navbar-v2__actions {
   grid-column: 3;
   justify-self: end;
@@ -4833,7 +4772,24 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
+  opacity: 0;
+  transform: translateY(-12px);
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 200ms cubic-bezier(0.4, 0, 1, 1),
+    transform 200ms cubic-bezier(0.4, 0, 1, 1),
+    visibility 0s linear 200ms;
+}
+.ds-navbar-v2__mobile-overlay[data-state=open] {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
   pointer-events: auto;
+  transition:
+    opacity 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    visibility 0s linear 0s;
 }
 .ds-navbar-v2__mobile-content {
   display: flex;
@@ -4870,9 +4826,15 @@
   .ds-navbar-v2__tab::before {
     transition: none;
   }
+  .ds-navbar-v2__tab-chevron {
+    transition: none;
+  }
   .ds-navbar-v2__mobile-overlay {
     transition: none;
   }
+  .ds-navbar-v2__mega-panel {
+    transition: none;
+  }
 }
 @media (prefers-contrast: more) {
   .ds-navbar-v2--scrolled .ds-navbar-v2__container {
@@ -7326,7 +7288,10 @@
   align-items: center;
   color: var(--text-tertiary);
   flex-shrink: 0;
-  transition: color var(--transition-fast);
+  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--transition-fast);
+}
+.ds-locale-dropdown__trigger-chevron[data-state=open] {
+  transform: rotate(180deg);
 }
 .ds-locale-dropdown__trigger:hover .ds-locale-dropdown__trigger-chevron {
   color: var(--text-secondary);
@@ -7346,12 +7311,33 @@
   border: 1px solid var(--rim-light-bottom);
   border-radius: var(--radius-card);
   box-shadow: var(--shadow-xl), 0 0 0 1px var(--rim-light-bottom);
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
+    transform 0.15s cubic-bezier(0.4, 0, 1, 1),
+    visibility 0s 0.15s;
+}
+.ds-locale-dropdown__panel[data-state=open] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  visibility: visible;
+  pointer-events: auto;
+  transition:
+    opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+    visibility 0s 0s;
 }
 .ds-locale-dropdown--up .ds-locale-dropdown__panel {
   top: auto;
   bottom: calc(100% + var(--space-2));
   transform-origin: bottom right;
 }
+.ds-locale-dropdown--up .ds-locale-dropdown__panel[data-state=closed] {
+  transform: translateY(8px) scale(0.95);
+}
 .ds-locale-dropdown--align-left .ds-locale-dropdown__panel {
   right: auto;
   left: 0;
@@ -7360,15 +7346,23 @@
 .ds-locale-dropdown--align-center .ds-locale-dropdown__panel {
   right: auto;
   left: 50%;
-  transform: translateX(-50%);
   transform-origin: top center;
 }
+.ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=closed] {
+  transform: translateX(-50%) translateY(-8px) scale(0.95);
+}
+.ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=open] {
+  transform: translateX(-50%) translateY(0) scale(1);
+}
 .ds-locale-dropdown--up.ds-locale-dropdown--align-left .ds-locale-dropdown__panel {
   transform-origin: bottom left;
 }
 .ds-locale-dropdown--up.ds-locale-dropdown--align-center .ds-locale-dropdown__panel {
   transform-origin: bottom center;
 }
+.ds-locale-dropdown--up.ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=closed] {
+  transform: translateX(-50%) translateY(8px) scale(0.95);
+}
 .ds-locale-dropdown__panel::before {
   content: "";
   position: absolute;
@@ -7465,6 +7459,12 @@
   .ds-locale-dropdown__trigger {
     transition: none;
   }
+  .ds-locale-dropdown__trigger-chevron {
+    transition: none;
+  }
+  .ds-locale-dropdown__panel {
+    transition: none;
+  }
   .ds-locale-dropdown__option {
     transition: none;
   }
@@ -13109,8 +13109,9 @@
 .ds-dropdown-menu__content {
   min-width: 220px;
   padding: var(--space-1);
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop);
+  background: var(--glass-base-active);
+  backdrop-filter: var(--glass-backdrop-heavy);
+  -webkit-backdrop-filter: var(--glass-backdrop-heavy);
   border-radius: var(--radius-button);
   border: 1px solid var(--rim-light-bottom);
   box-shadow: var(--glass-shadow-elevated);
@@ -19193,9 +19194,9 @@ button.ds-key-metric {
   padding: var(--space-1);
   border-radius: var(--radius-button);
   outline: none;
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop);
-  -webkit-backdrop-filter: var(--glass-backdrop);
+  background: var(--glass-base-active);
+  backdrop-filter: var(--glass-backdrop-heavy);
+  -webkit-backdrop-filter: var(--glass-backdrop-heavy);
   border: 1px solid var(--rim-light-bottom);
   box-shadow: var(--glass-shadow-elevated);
   transform-origin: var(--transform-origin);