@mcp-b/react-components 0.12.0 → 0.13.0

package/dist/styles/popover.css

@@ -1,39 +1,4 @@
-.popover__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.popover__trigger:hover {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.popover__trigger:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
 .popover__backdrop {
-  position: fixed;
-  inset: 0;
   z-index: 50;
   background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 50%);
   transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
@@ -45,38 +10,20 @@
 }
 
 .popover__positioner {
-  z-index: 50;
   outline: none;
 }
 
 .popover__popup {
-  min-width: 12rem;
-  max-width: 20rem;
-  padding: 1rem;
-  font-family: var(--sigvelo-font-sans);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  box-shadow:
-    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
-  outline: none;
-  transform-origin: var(--transform-origin);
-  transition:
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
 
-.popover__popup[data-starting-style],
-.popover__popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.95);
+  min-width: 12rem;
+  max-inline-size: min(20rem, var(--available-width));
+  overflow-y: auto;
 }
 
 .popover__arrow {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: var(--sigvelo-spacing-3);
+  height: var(--sigvelo-spacing-3);
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -105,7 +52,7 @@
 
 .popover__title {
   margin-block-end: 0.5rem;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
@@ -113,7 +60,7 @@
 
 .popover__description {
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   color: var(--sigvelo-color-text-muted);
 }
@@ -121,7 +68,7 @@
 .popover__header {
   display: grid;
   gap: 0.5rem;
-  margin-block-end: 0.75rem;
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .popover__close {
@@ -130,9 +77,9 @@
   justify-content: center;
   padding-block: 0.25rem;
   padding-inline: 0.5rem;
-  margin-block-start: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.75rem;
+  margin-block-start: var(--sigvelo-spacing-3);
+  font-family: inherit;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text-muted);
   background-color: transparent;
@@ -152,7 +99,5 @@
 
 .popover__close:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }

package/dist/styles/preview-card.css

@@ -12,61 +12,20 @@
 
 .preview-card__trigger:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
   border-radius: var(--sigvelo-radius-sm);
 }
 
 .preview-card__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-}
-
-.preview-card__positioner {
   z-index: 50;
 }
 
 .preview-card__popup {
-  min-width: 200px;
-  max-width: 320px;
-  padding: 1rem;
-  background-color: var(--sigvelo-color-surface);
-  color: var(--sigvelo-color-text);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  box-shadow:
-    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
-  animation: preview-card-enter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.preview-card__popup[data-ending-style] {
-  animation: preview-card-exit 100ms ease;
-}
-
-@keyframes preview-card-enter {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
 
-@keyframes preview-card-exit {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
+  min-inline-size: 12.5rem;
+  max-inline-size: min(20rem, var(--available-width));
+  overflow-y: auto;
 }
 
 .preview-card__arrow {

package/dist/styles/pricing-page.css

@@ -13,17 +13,17 @@
 }
 
 .pricing-page__title {
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   font-size: 2.5rem;
   font-weight: 700;
   line-height: 1.2;
   color: var(--sigvelo-color-text);
-  margin: 0 0 0.75rem;
+  margin: 0 0 var(--sigvelo-spacing-3);
 }
 
 .pricing-page__subtitle {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 1.125rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-lg);
   color: var(--sigvelo-color-text-muted);
   margin: 0 0 2rem;
 }
@@ -44,12 +44,12 @@
 .pricing-page__switch-container {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .pricing-page__period-label {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text-muted);
   transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
@@ -94,16 +94,16 @@
 }
 
 .pricing-page__plan-name {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 1.25rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-xl);
   font-weight: 600;
   color: var(--sigvelo-color-text);
   margin: 0 0 0.25rem;
 }
 
 .pricing-page__plan-description {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text-muted);
   margin: 0;
 }
@@ -113,7 +113,7 @@
 }
 
 .pricing-page__price-amount {
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   font-size: 2.5rem;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
@@ -121,15 +121,15 @@
 }
 
 .pricing-page__price-period {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 1rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-base);
   color: var(--sigvelo-color-text-muted);
 }
 
 .pricing-page__price-savings {
   display: block;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.75rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-xs);
   font-weight: 500;
   color: var(--sigvelo-color-success-bg);
   margin-top: 0.25rem;
@@ -153,10 +153,10 @@
 .pricing-page__feature {
   display: flex;
   align-items: flex-start;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   padding: 0.5rem 0;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
 }
 
@@ -184,7 +184,7 @@
 }
 
 .pricing-page__feature-limit {
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   margin-left: 0.25rem;
 }
@@ -214,16 +214,16 @@
 }
 
 .pricing-page__calculator-title {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 1.25rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-xl);
   font-weight: 600;
   color: var(--sigvelo-color-text);
   margin: 0 0 0.5rem;
 }
 
 .pricing-page__calculator-description {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text-muted);
   margin: 0 0 1.5rem;
 }
@@ -236,12 +236,12 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--sigvelo-spacing-3);
 }
 
 .pricing-page__calculator-value {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 1.125rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-lg);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-primary-bg);
@@ -251,8 +251,8 @@
   display: flex;
   justify-content: space-between;
   margin-top: 0.5rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.75rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -264,8 +264,8 @@
 }
 
 .pricing-page__calculator-result-label {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -274,7 +274,7 @@
 }
 
 .pricing-page__calculator-amount {
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   font-size: 2rem;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
@@ -282,8 +282,8 @@
 }
 
 .pricing-page__calculator-period {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -296,14 +296,14 @@
 .pricing-page__tier {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .pricing-page__tier-info {
   display: flex;
   justify-content: space-between;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.8125rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-compact);
 }
 
 .pricing-page__tier-label {
@@ -324,8 +324,8 @@
 }
 
 .pricing-page__faq-title {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 1.5rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-2xl);
   font-weight: 600;
   color: var(--sigvelo-color-text);
   text-align: center;
@@ -348,8 +348,8 @@
 .pricing-page__confirm-row {
   display: flex;
   justify-content: space-between;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
   padding: 0.25rem 0;
 }
@@ -361,7 +361,7 @@
 
 .pricing-page__confirm-actions {
   display: flex;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   justify-content: flex-end;
 }
 
@@ -377,7 +377,7 @@
   }
 
   .pricing-page__subtitle {
-    font-size: 1rem;
+    font-size: var(--sigvelo-text-base);
   }
 
   .pricing-page__plans {

package/dist/styles/progress.css

@@ -2,22 +2,6 @@
   width: 100%;
 }
 
-.progress__track {
-  position: relative;
-  width: 100%;
-  height: 0.5rem;
-  overflow: hidden;
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border-radius: var(--sigvelo-radius-full);
-}
-
-.progress__indicator {
-  height: 100%;
-  background-color: var(--sigvelo-color-primary-bg);
-  border-radius: var(--sigvelo-radius-full);
-  transition: width 300ms ease;
-}
-
 /* Variants */
 
 .progress--success .progress__indicator {
@@ -47,3 +31,10 @@
     transform: translateX(200%);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .progress[data-state="indeterminate"] .progress__indicator {
+    animation: none;
+    transform: none;
+  }
+}