@mcp-b/react-components 0.11.0 → 0.13.0

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;
+  }
+}

package/dist/styles/prompt-input.css

@@ -1,16 +1,16 @@
 .prompt-input {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  padding-block: 0.625rem;
-  padding-inline: 0.75rem;
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-2-5);
+  padding-inline: var(--sigvelo-spacing-3);
   background-color: var(--sigvelo-color-surface);
   /* Fields keep their border; hairline + soft shadow for the floating-composer look */
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-xl);
   box-shadow: var(--sigvelo-shadow-sm);
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
   transition:
     border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
@@ -39,7 +39,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   min-height: 1.5rem;
 }
 
@@ -47,7 +47,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 /* Hairline chip, borderless-direction: no fill, just the outline. */
@@ -55,13 +55,13 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   max-width: 14rem;
   padding: 0.25rem 0.5rem;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-md);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
 }
 
@@ -100,7 +100,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.125rem;
+  padding: var(--sigvelo-spacing-0-5);
   border: none;
   border-radius: var(--sigvelo-radius-sm);
   background: none;
@@ -110,8 +110,8 @@
 
 .prompt-input__attachment[data-image] .prompt-input__attachment-remove {
   position: absolute;
-  inset-block-start: 0.125rem;
-  inset-inline-end: 0.125rem;
+  inset-block-start: var(--sigvelo-spacing-0-5);
+  inset-inline-end: var(--sigvelo-spacing-0-5);
   background-color: color-mix(in oklab, var(--sigvelo-color-surface), transparent 20%);
 }
 
@@ -134,7 +134,7 @@
   background-color: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   resize: none;
   overflow-y: hidden;
@@ -176,7 +176,7 @@
 }
 
 .prompt-input__button {
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -184,6 +184,70 @@
   color: var(--sigvelo-color-text);
 }
 
+.prompt-input__dictation {
+  min-inline-size: 2.75rem;
+  min-block-size: 2.75rem;
+}
+
+.prompt-input__dictation[data-listening] {
+  color: var(--sigvelo-color-primary-bg);
+  background-color: var(--sigvelo-color-primary-bg-subtle);
+}
+
+.prompt-input__dictation[data-error] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.prompt-input__dictation-icon {
+  --prompt-input-dictation-level: 0;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before {
+  position: absolute;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border: var(--sigvelo-border-width) solid currentColor;
+  border-radius: 999rem;
+  opacity: calc(0.2 + var(--prompt-input-dictation-level) * 0.6);
+  transform: scale(calc(0.8 + var(--prompt-input-dictation-level) * 0.25));
+  transition:
+    opacity 75ms linear,
+    transform 75ms linear;
+  content: "";
+}
+
+.prompt-input__dictation[data-starting] .prompt-input__dictation-icon {
+  animation: prompt-input-spin 900ms linear infinite;
+}
+
+.prompt-input__dictation-status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before {
+    transition: none;
+  }
+}
+
+.prompt-input__tools .prompt-input__action-menu-trigger[data-popup-open] {
+  color: var(--sigvelo-color-text);
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+}
+
 .prompt-input__tooltip-content {
   display: inline-block;
 }
@@ -220,16 +284,8 @@
   margin-inline-end: 0.5rem;
 }
 
-/* Undo .menu__trigger's boxed chrome — this trigger is a ghost footer button
-   like its neighbors: transparent at rest, background only on hover/open. */
 .prompt-input__permissions-trigger {
   gap: 0.25rem;
-  padding-block: 0.25rem;
-  padding-inline: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: inherit;
-  background: none;
-  border: none;
 }
 
 .prompt-input__permissions-trigger:hover,
@@ -267,9 +323,9 @@
 }
 
 .prompt-input__permissions-question {
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem;
-  font-size: 0.75rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-3);
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -280,16 +336,16 @@
 .prompt-input__permissions-option-text {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
   min-width: 0;
 }
 
 .prompt-input__permissions-option-label {
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
 }
 
 .prompt-input__permissions-option-description {
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -300,8 +356,8 @@
 }
 
 .prompt-input__permissions-check::before {
-  width: 0.625rem;
-  height: 0.375rem;
+  width: var(--sigvelo-spacing-2-5);
+  height: var(--sigvelo-spacing-1-5);
   background-color: transparent;
   border-radius: 0;
   border-inline-start: 2px solid currentColor;
@@ -317,10 +373,10 @@
 .prompt-input__hover-card-content {
   position: absolute;
   z-index: 20;
-  inset-block-start: calc(100% + 0.375rem);
+  inset-block-start: calc(100% + var(--sigvelo-spacing-1-5));
   inset-inline-start: 0;
   min-width: 14rem;
-  padding: 0.75rem;
+  padding: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -332,7 +388,7 @@
 .prompt-input__tab-label {
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
@@ -341,8 +397,8 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-size: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
+  font-size: var(--sigvelo-text-xs);
 }
 
 .prompt-input__command-list {
@@ -355,7 +411,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   /* Zero intrinsic inline size: long tool names, paths, and one-line JSON in
      the confirmation must never widen the composer or the chat column around
      it — same containment trick as the conversation viewport. */
@@ -383,13 +439,13 @@
   margin-inline-start: auto;
   flex-shrink: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
 }
 
 .prompt-input__approval-preview {
   max-height: 6rem;
-  padding-block: 0.375rem;
-  padding-inline: 0.625rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-2-5);
   overflow: auto;
   /* Long values wrap and scroll vertically within the cap — never sideways. */
   overflow-wrap: anywhere;
@@ -398,7 +454,7 @@
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text-muted);
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   line-height: 1.5;
 }
 
@@ -413,7 +469,7 @@
 .prompt-input__approval-options {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
 }
 
 .prompt-input__approval-option {
@@ -452,7 +508,7 @@
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
 }
 
 .prompt-input__approval-option[data-selected] .prompt-input__approval-key {
@@ -464,7 +520,7 @@
 .prompt-input__approval-arrows {
   margin-inline-start: auto;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   visibility: hidden;
 }
 
@@ -501,7 +557,7 @@
 
 .prompt-input__approval-submit {
   flex-shrink: 0;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .prompt-input__approval-kbd {
@@ -521,7 +577,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .prompt-input__submit-spinner {
-    animation-duration: 3s;
+    animation: none;
   }
 }