@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/styles/queue.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 0.5rem;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
 }
 
@@ -22,7 +22,7 @@
   border: none;
   border-radius: var(--sigvelo-radius-sm);
   font-family: inherit;
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -41,14 +41,12 @@
 
 .queue__section-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);
 }
 
 .queue__section-icon {
   display: inline-flex;
-  transition: transform 200ms ease;
+  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
 }
 
 .queue__section-trigger[data-panel-open] .queue__section-icon {
@@ -65,20 +63,6 @@
   /* Badge sm already sized appropriately */
 }
 
-.queue__section-content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.queue__section-content[data-starting-style],
-.queue__section-content[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .queue__list {
   margin-block: 0.5rem 0.25rem;
 }
@@ -94,7 +78,7 @@
 .queue__list-inner {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -103,7 +87,7 @@
 .queue__item {
   display: flex;
   align-items: flex-start;
-  gap: 0.625rem;
+  gap: var(--sigvelo-spacing-2-5);
   padding-block: 0.5rem;
   padding-inline: 0.5rem;
   border-radius: var(--sigvelo-radius-sm);
@@ -134,7 +118,7 @@
   justify-content: center;
   width: 1rem;
   height: 1rem;
-  margin-block-start: 0.125rem;
+  margin-block-start: var(--sigvelo-spacing-0-5);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);
   flex-shrink: 0;
@@ -155,14 +139,14 @@
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
   line-height: 1.4;
 }
 
 .queue__item-description {
   margin: 0;
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   line-height: 1.4;
 }
@@ -192,7 +176,7 @@
 .queue__item-attachment {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   margin-block-start: 0.25rem;
 }
 
@@ -208,12 +192,12 @@
 .queue__item-file {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   padding-block: 0.3125rem;
   padding-inline: 0.5rem;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-sm);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
 }
 

package/dist/styles/radio.css

@@ -1,6 +1,6 @@
 .radio-group {
   display: flex;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .radio-group--vertical {
@@ -39,9 +39,7 @@
 
 .radio: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);
 }
 
 .radio[data-checked] {
@@ -54,13 +52,11 @@
 }
 
 .radio:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 80%);
+  box-shadow: var(--sigvelo-recipe-invalid-focus-shadow);
 }
 
 .radio[data-disabled] {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
 

package/dist/styles/reasoning.css

@@ -2,41 +2,10 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
-  color: var(--sigvelo-color-text);
-}
-
-.reasoning__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  color: var(--sigvelo-color-text-muted);
   font-family: inherit;
-  font-size: 0.8125rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.reasoning__trigger:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text);
 }
 
-.reasoning__trigger:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
 .reasoning__trigger[data-streaming] .reasoning__trigger-label {
   animation: reasoning-pulse 1400ms ease-in-out infinite;
 }
@@ -52,42 +21,19 @@
 }
 
 .reasoning__trigger-icon {
-  display: inline-flex;
   color: var(--sigvelo-color-text-muted);
 }
 
-.reasoning__trigger-icon {
-  transition: transform 200ms ease;
-}
-
-.reasoning__trigger[data-panel-open] .reasoning__trigger-icon {
-  transform: rotate(90deg);
-}
-
-.reasoning__content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.reasoning__content[data-starting-style],
-.reasoning__content[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .reasoning__text {
   /* Bounded so expanding never blows out the conversation scroll position */
   max-height: 20rem;
   overflow-y: auto;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  margin-inline-start: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
+  margin-inline-start: var(--sigvelo-spacing-3);
   border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-color-neutral-border-subtle);
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1.6;
 }
 
@@ -115,9 +61,4 @@
   .reasoning__text {
     border-inline-start: 2px solid CanvasText;
   }
-
-  .reasoning__trigger:focus-visible {
-    outline: 2px solid Highlight;
-    outline-offset: 2px;
-  }
 }