@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/styles/queue.css

@@ -3,8 +3,8 @@
   flex-direction: column;
   gap: 0.5rem;
   width: 100%;
-  font-family: var(--sigvelo-font-family);
-  color: var(--sigvelo-text-body);
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
 }
 
 .queue__section {
@@ -20,13 +20,13 @@
   padding-inline: 0.5rem;
   background-color: transparent;
   border: none;
-  border-radius: var(--sigvelo-border-radius-sm);
+  border-radius: var(--sigvelo-radius-sm);
   font-family: inherit;
   font-size: 0.75rem;
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   cursor: pointer;
   text-align: start;
   transition:
@@ -35,15 +35,15 @@
 }
 
 .queue__section-trigger:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text);
 }
 
 .queue__section-trigger:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .queue__section-icon {
@@ -65,27 +65,39 @@
   /* Badge sm already sized appropriately */
 }
 
-.queue__list {
+.queue__section-content {
   overflow: hidden;
   transition:
     height 200ms ease,
     opacity 200ms ease;
 }
 
-.queue__list[data-closed] {
+.queue__section-content[data-closed] {
   height: 0;
 }
 
-.queue__list[data-open] {
+.queue__section-content[data-open] {
   height: var(--collapsible-panel-height);
 }
 
-.queue__list[data-starting-style],
-.queue__list[data-ending-style] {
+.queue__section-content[data-starting-style],
+.queue__section-content[data-ending-style] {
   height: 0;
   opacity: 0;
 }
 
+.queue__list {
+  margin-block: 0.5rem 0.25rem;
+}
+
+.queue__list-viewport {
+  max-height: 10rem;
+}
+
+.queue__list-scroll {
+  padding-inline-end: 1rem;
+}
+
 .queue__list-inner {
   display: flex;
   flex-direction: column;
@@ -101,12 +113,12 @@
   gap: 0.625rem;
   padding-block: 0.5rem;
   padding-inline: 0.5rem;
-  border-radius: var(--sigvelo-border-radius-sm);
+  border-radius: var(--sigvelo-radius-sm);
   transition: background-color 150ms ease;
 }
 
 .queue__item:hover {
-  background-color: var(--sigvelo-neutral-fill-softer);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .queue__item:hover .queue__item-actions {
@@ -114,7 +126,12 @@
 }
 
 .queue__item--complete .queue__item-content {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
+  text-decoration: line-through;
+}
+
+.queue__item-content--complete {
+  color: var(--sigvelo-color-text-muted);
   text-decoration: line-through;
 }
 
@@ -125,18 +142,18 @@
   width: 1rem;
   height: 1rem;
   margin-block-start: 0.125rem;
-  border-radius: var(--sigvelo-border-radius-pill);
-  color: var(--sigvelo-text-muted);
+  border-radius: var(--sigvelo-radius-full);
+  color: var(--sigvelo-color-text-muted);
   flex-shrink: 0;
 }
 
 .queue__item-indicator--active {
-  color: var(--sigvelo-primary-text-colorful);
+  color: var(--sigvelo-color-primary-text);
 }
 
 .queue__item-indicator--complete {
-  background-color: var(--sigvelo-success-fill-mid);
-  color: var(--sigvelo-success-text-on-mid);
+  background-color: var(--sigvelo-color-success-bg);
+  color: var(--sigvelo-color-success-text-on-bg);
 }
 
 .queue__item-content {
@@ -146,17 +163,22 @@
   flex-direction: column;
   gap: 0.25rem;
   font-size: 0.875rem;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   line-height: 1.4;
 }
 
 .queue__item-description {
   margin: 0;
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   line-height: 1.4;
 }
 
+.queue__item-description--complete {
+  color: var(--sigvelo-color-text-muted);
+  text-decoration: line-through;
+}
+
 .queue__item-actions {
   display: inline-flex;
   align-items: center;
@@ -170,6 +192,10 @@
   opacity: 1;
 }
 
+.queue__item-action {
+  min-width: 0;
+}
+
 .queue__item-attachment {
   display: flex;
   align-items: center;
@@ -181,9 +207,9 @@
   width: 2.5rem;
   height: 2.5rem;
   object-fit: cover;
-  border-radius: var(--sigvelo-border-radius-sm);
+  border-radius: var(--sigvelo-radius-sm);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .queue__item-file {
@@ -192,25 +218,25 @@
   gap: 0.375rem;
   padding-block: 0.3125rem;
   padding-inline: 0.5rem;
-  background-color: var(--sigvelo-paper-color);
+  background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-sm);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
   font-size: 0.75rem;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .queue__item-file-icon {
   display: inline-flex;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .queue__item-file-name {
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
 }
 
 .queue__item-file-size {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
 }
 

package/dist/styles/radio.css

@@ -19,29 +19,44 @@
   justify-content: center;
   width: 1.125rem;
   height: 1.125rem;
-  background-color: var(--sigvelo-background-color);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-pill);
+  flex-shrink: 0;
+  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-full);
+  outline: none;
   cursor: pointer;
   transition:
+    color 150ms ease,
     border-color 150ms ease,
-    background-color 150ms ease;
+    background-color 150ms ease,
+    box-shadow 150ms ease;
 }
 
 .radio:hover:not([data-disabled]) {
-  border-color: var(--sigvelo-primary-fill-mid);
+  border-color: var(--sigvelo-color-primary-bg);
 }
 
 .radio:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .radio[data-checked] {
-  border-color: var(--sigvelo-primary-fill-mid);
-  background-color: var(--sigvelo-primary-fill-mid);
+  border-color: var(--sigvelo-color-primary-bg);
+  background-color: var(--sigvelo-color-primary-bg);
+}
+
+.radio:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
+  border-color: var(--sigvelo-color-danger-bg);
+}
+
+.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%);
 }
 
 .radio[data-disabled] {
@@ -53,8 +68,8 @@
   display: block;
   width: 0.5rem;
   height: 0.5rem;
-  background-color: var(--sigvelo-primary-text-on-mid);
-  border-radius: var(--sigvelo-border-radius-pill);
+  background-color: var(--sigvelo-color-primary-text-on-bg);
+  border-radius: var(--sigvelo-radius-full);
   transform: scale(0);
   transition: transform 150ms ease;
 }

package/dist/styles/reasoning.css

@@ -2,8 +2,8 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-family);
-  color: var(--sigvelo-text-body);
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
 }
 
 .reasoning__trigger {
@@ -14,8 +14,8 @@
   padding-inline: 0.75rem;
   background-color: transparent;
   border: none;
-  border-radius: var(--sigvelo-border-radius-sm);
-  color: var(--sigvelo-text-muted);
+  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);
@@ -26,15 +26,15 @@
 }
 
 .reasoning__trigger:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-text-body);
+  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-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .reasoning__trigger[data-streaming] .reasoning__trigger-label {
@@ -51,8 +51,13 @@
   margin: 0;
 }
 
+.reasoning__trigger-leading-icon,
 .reasoning__trigger-icon {
   display: inline-flex;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.reasoning__trigger-icon {
   transition: transform 200ms ease;
 }
 
@@ -85,11 +90,10 @@
   padding-block: 0.5rem;
   padding-inline: 0.75rem;
   margin-inline-start: 0.75rem;
-  border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-neutral-stroke-softer);
-  color: var(--sigvelo-text-muted);
+  border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-color-neutral-border-subtle);
+  color: var(--sigvelo-color-text-muted);
   font-size: 0.8125rem;
   line-height: 1.6;
-  white-space: pre-wrap;
 }
 
 .reasoning__text > * + * {

package/dist/styles/scroll-area.css

@@ -25,7 +25,7 @@
 }
 
 .scroll-area__scrollbar:hover {
-  background-color: color-mix(in oklab, var(--sigvelo-neutral-fill-softer), transparent 50%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 50%);
 }
 
 .scroll-area__scrollbar[data-orientation="vertical"] {
@@ -46,22 +46,22 @@
 
 .scroll-area__thumb {
   flex: 1;
-  background-color: color-mix(in oklab, var(--sigvelo-text-muted), transparent 70%);
-  border-radius: var(--sigvelo-border-radius-pill);
+  background-color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 70%);
+  border-radius: var(--sigvelo-radius-full);
   transition: background-color 150ms ease;
 }
 
 .scroll-area__thumb:hover {
-  background-color: color-mix(in oklab, var(--sigvelo-text-muted), transparent 50%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 50%);
 }
 
 .scroll-area__scrollbar[data-scrolling] .scroll-area__thumb {
-  background-color: color-mix(in oklab, var(--sigvelo-text-muted), transparent 50%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 50%);
 }
 
 .scroll-area__corner {
   position: absolute;
   right: 0;
   bottom: 0;
-  background-color: color-mix(in oklab, var(--sigvelo-neutral-fill-softer), transparent 50%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 50%);
 }

package/dist/styles/scrollbars.css

@@ -1,6 +1,6 @@
 :where(.message__content pre, .observability-table-wrap) {
-  --scrollbar-thumb: var(--app-scrollbar-thumb, var(--sigvelo-neutral-stroke-soft));
-  --scrollbar-track: var(--app-scrollbar-track, var(--sigvelo-neutral-fill-softer));
+  --scrollbar-thumb: var(--app-scrollbar-thumb, var(--sigvelo-color-neutral-border-muted));
+  --scrollbar-track: var(--app-scrollbar-track, var(--sigvelo-color-neutral-bg-subtle));
 
   overflow: auto;
   overscroll-behavior: contain;
@@ -11,8 +11,8 @@
 
 @media (prefers-contrast: more) {
   :where(.message__content pre, .observability-table-wrap) {
-    --scrollbar-thumb: var(--sigvelo-strident);
-    --scrollbar-track: var(--sigvelo-silent);
+    --scrollbar-thumb: var(--sigvelo-color-text);
+    --scrollbar-track: var(--sigvelo-color-canvas);
   }
 }
 

package/dist/styles/select.css

@@ -7,28 +7,47 @@
   height: 2.5rem;
   padding-block: 0.5rem;
   padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-background-color);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
+  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:
+    color 150ms ease,
     border-color 150ms ease,
     box-shadow 150ms ease;
 }
 
+.select__trigger > [data-slot="select-value"] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select__icon {
+  display: flex;
+  flex-shrink: 0;
+  pointer-events: none;
+  color: var(--sigvelo-color-text-muted);
+  opacity: 0.7;
+}
+
 .select__trigger:hover:not([data-disabled]) {
-  border-color: var(--sigvelo-focus-color);
+  border-color: var(--sigvelo-color-focus);
 }
 
 .select__trigger:focus-visible {
   outline: none;
-  border-color: var(--sigvelo-focus-color);
+  border-color: var(--sigvelo-color-focus);
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-focus-color), transparent 80%);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
 }
 
 .select__trigger[data-disabled] {
@@ -36,6 +55,17 @@
   cursor: not-allowed;
 }
 
+.select__trigger:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
+  border-color: var(--sigvelo-color-danger-bg);
+}
+
+.select__trigger:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
+  border-color: var(--sigvelo-color-danger-bg);
+  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%);
+}
+
 .select__trigger--sm {
   height: 2rem;
   padding-block: 0.25rem;
@@ -44,7 +74,7 @@
 }
 
 .select__placeholder {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .select__positioner {
@@ -54,12 +84,13 @@
 .select__popup {
   min-width: 8rem;
   overflow: hidden;
-  background-color: var(--sigvelo-paper-color);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
   box-shadow:
-    0 4px 6px -1px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
-    0 2px 4px -2px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
+    0 4px 6px -1px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
+    0 2px 4px -2px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
 }
 
 .select__popup[data-starting-style],
@@ -73,28 +104,32 @@
 }
 
 .select__option {
+  position: relative;
   display: flex;
   align-items: center;
+  gap: 0.5rem;
+  width: 100%;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-family);
+  padding-inline: 0.75rem 2rem;
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
-  color: var(--sigvelo-text-body);
-  border-radius: calc(var(--sigvelo-border-radius-md) - 2px);
+  color: var(--sigvelo-color-text);
+  border-radius: calc(var(--sigvelo-radius-md) - 2px);
   cursor: pointer;
   outline: none;
+  user-select: none;
   transition: background-color 100ms ease;
 }
 
 .select__option:hover,
 .select__option[data-highlighted] {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-neutral-text-on-soft);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .select__option[data-selected] {
-  background-color: var(--sigvelo-primary-fill-mid);
-  color: var(--sigvelo-primary-text-on-mid);
+  background-color: var(--sigvelo-color-primary-bg);
+  color: var(--sigvelo-color-primary-text-on-bg);
 }
 
 .select__option[data-disabled] {
@@ -102,6 +137,16 @@
   cursor: not-allowed;
 }
 
+.select__item-indicator {
+  position: absolute;
+  inset-inline-end: 0.5rem;
+  display: flex;
+  width: 0.875rem;
+  height: 0.875rem;
+  align-items: center;
+  justify-content: center;
+}
+
 .select__option-group {
   padding: 0.25rem 0;
 }
@@ -109,8 +154,22 @@
 .select__group-label {
   padding-block: 0.5rem 0.25rem;
   padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.75rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.select__separator {
+  height: 1px;
+  margin-block: 0.25rem;
+  background-color: var(--sigvelo-color-neutral-border-muted);
+}
+
+.select__scroll-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.5rem;
+  color: var(--sigvelo-color-text-muted);
 }

package/dist/styles/separator.css

@@ -1,5 +1,5 @@
 .separator {
-  background-color: var(--sigvelo-neutral-stroke-soft);
+  background-color: var(--sigvelo-color-neutral-border-muted);
   flex-shrink: 0;
 }