@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/styles/accordion.css

@@ -3,7 +3,7 @@
 }
 
 .accordion__item {
-  border-bottom: 1px solid var(--sigvelo-neutral-stroke-soft);
+  border-bottom: 1px solid var(--sigvelo-color-neutral-border-muted);
 }
 
 .accordion__item:last-child {
@@ -20,11 +20,11 @@
   justify-content: space-between;
   width: 100%;
   padding-block: 1rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.9375rem;
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -32,15 +32,15 @@
 }
 
 .accordion__trigger:hover {
-  color: color-mix(in oklab, var(--sigvelo-text-body), transparent 20%);
+  color: color-mix(in oklab, var(--sigvelo-color-text), transparent 20%);
 }
 
 .accordion__trigger:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
-  border-radius: var(--sigvelo-border-radius-md);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
+  border-radius: var(--sigvelo-radius-md);
 }
 
 .accordion__trigger-text {
@@ -53,7 +53,7 @@
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   transition: transform 200ms ease;
 }
 
@@ -63,10 +63,10 @@
 
 .accordion__panel {
   overflow: hidden;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   line-height: 1.625;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .accordion__panel[data-open] {

package/dist/styles/agent-connection.css

@@ -2,7 +2,7 @@
   display: grid;
   gap: 0.75rem;
   min-inline-size: 0;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .agent-connect__header {
@@ -18,10 +18,11 @@
   place-items: center;
   inline-size: 2rem;
   block-size: 2rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-primary-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
-  background: var(--sigvelo-primary-fill-softer);
-  color: var(--sigvelo-primary-text-colorful);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-primary-border-muted);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-primary-bg-subtle);
+  color: var(--sigvelo-color-primary-text);
 }
 
 .agent-connect__title-group {
@@ -32,7 +33,7 @@
 
 .agent-connect__title-group :where(h2, h3) {
   margin: 0;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   font-size: 0.95rem;
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1.2;
@@ -41,7 +42,7 @@
 
 .agent-connect__title-group p {
   margin: 0;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   font-size: 0.78rem;
   line-height: 1.35;
 }
@@ -54,9 +55,9 @@
   margin: 0;
   padding: 0.25rem;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-md);
-  background: var(--sigvelo-neutral-fill-softer);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .agent-connect__legend {
@@ -79,9 +80,9 @@
   min-inline-size: 0;
   padding: 0 0.45rem;
   border: 0;
-  border-radius: var(--sigvelo-border-radius-sm);
+  border-radius: var(--sigvelo-radius-sm);
   background: transparent;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   cursor: pointer;
   font: inherit;
   font-size: 0.72rem;
@@ -98,8 +99,8 @@
 }
 
 .agent-connect__target:hover {
-  color: var(--sigvelo-text-body);
-  background: color-mix(in oklab, var(--sigvelo-neutral-fill-soft), transparent 38%);
+  color: var(--sigvelo-color-text);
+  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-muted), transparent 38%);
 }
 
 .agent-connect__target:focus-visible {
@@ -108,9 +109,9 @@
 }
 
 .agent-connect__target[data-selected="true"] {
-  background: var(--sigvelo-paper-color);
-  color: var(--sigvelo-text-body);
-  box-shadow: var(--sigvelo-shadow-softer);
+  background: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text);
+  box-shadow: var(--sigvelo-shadow-xs);
 }
 
 .agent-connect .code-block {

package/dist/styles/alert-dialog.css

@@ -31,13 +31,14 @@
   z-index: 50;
   width: calc(100% - 2rem);
   max-width: 28rem;
-  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);
+  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);
   padding: 1.5rem;
   box-shadow:
-    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
+    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%);
 }
 
 .alert-dialog__popup[data-starting-style],
@@ -55,33 +56,50 @@
 }
 
 .alert-dialog__title {
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 1.125rem;
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1.25;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   margin: 0 0 0.5rem;
 }
 
 .alert-dialog__description {
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   line-height: 1.5;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   margin: 0 0 1.5rem;
 }
 
+.alert-dialog__header {
+  display: grid;
+  gap: 0.5rem;
+  margin-block-end: 1rem;
+}
+
+.alert-dialog__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.alert-dialog__media {
+  margin-block-end: 1rem;
+}
+
 .alert-dialog__action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 2.5rem;
   padding: 0 1rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
   border: none;
-  border-radius: var(--sigvelo-border-radius-md);
+  border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition:
     background-color 150ms ease,
@@ -91,54 +109,55 @@
 .alert-dialog__action: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);
 }
 
 .alert-dialog__action--primary {
-  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);
 }
 
 .alert-dialog__action--primary:hover {
-  background-color: color-mix(in oklab, var(--sigvelo-primary-fill-mid), transparent 10%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 10%);
 }
 
 .alert-dialog__action--secondary {
-  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);
 }
 
 .alert-dialog__action--secondary:hover {
-  background-color: color-mix(in oklab, var(--sigvelo-neutral-fill-softer), transparent 20%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 20%);
 }
 
 .alert-dialog__action--destructive {
-  background-color: var(--sigvelo-destructive-fill-mid);
-  color: var(--sigvelo-destructive-text-on-mid);
+  background-color: var(--sigvelo-color-danger-bg);
+  color: var(--sigvelo-color-danger-text-on-bg);
 }
 
 .alert-dialog__action--destructive:hover {
-  background-color: color-mix(in oklab, var(--sigvelo-destructive-fill-mid), transparent 10%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 10%);
 }
 
 .alert-dialog__action--outline {
   background-color: transparent;
-  color: var(--sigvelo-text-body);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+  color: var(--sigvelo-color-text);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
 }
 
 .alert-dialog__action--outline:hover {
-  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);
 }
 
 .alert-dialog__action--ghost {
   background-color: transparent;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .alert-dialog__action--ghost:hover {
-  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);
 }

package/dist/styles/artifact.css

@@ -2,13 +2,13 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-family);
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-paper-color);
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
+  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-lg, var(--sigvelo-border-radius-md));
-  box-shadow: var(--sigvelo-shadow-softer);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-lg, var(--sigvelo-radius-md));
+  box-shadow: var(--sigvelo-shadow-xs);
   overflow: hidden;
 }
 
@@ -20,8 +20,8 @@
   padding-block: 0.75rem;
   padding-inline: 1rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
-  background-color: var(--sigvelo-paper-color);
+    var(--sigvelo-color-neutral-border-subtle);
+  background-color: var(--sigvelo-color-surface);
 }
 
 .artifact__title {
@@ -29,7 +29,7 @@
   font-family: inherit;
   font-size: 0.9375rem;
   font-weight: var(--sigvelo-font-weight-bold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   line-height: 1.3;
 }
 
@@ -37,7 +37,7 @@
   margin: 0;
   margin-block-start: 0.125rem;
   font-size: 0.8125rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   line-height: 1.4;
 }
 

package/dist/styles/autocomplete.css

@@ -3,16 +3,16 @@
   min-width: 0;
   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);
+  color: var(--sigvelo-color-text);
   background-color: transparent;
   border: none;
   outline: none;
 }
 
 .autocomplete__input::placeholder {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .autocomplete__trigger {
@@ -20,7 +20,7 @@
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -28,7 +28,7 @@
 }
 
 .autocomplete__trigger:hover {
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .autocomplete__trigger:focus-visible {
@@ -40,10 +40,10 @@
   align-items: center;
   justify-content: center;
   padding: 0.25rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   background-color: transparent;
   border: none;
-  border-radius: var(--sigvelo-border-radius-sm);
+  border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
     color 150ms ease,
@@ -51,8 +51,8 @@
 }
 
 .autocomplete__clear:hover {
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .autocomplete__positioner {
@@ -63,13 +63,14 @@
   min-width: 200px;
   max-height: 300px;
   overflow: auto;
-  background-color: var(--sigvelo-paper-color);
-  color: var(--sigvelo-text-body);
-  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);
+  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-text-body), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
+    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: autocomplete-popup-enter 150ms ease;
 }
 
@@ -109,10 +110,10 @@
   gap: 0.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);
-  border-radius: var(--sigvelo-border-radius-sm);
+  color: var(--sigvelo-color-text);
+  border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   outline: none;
   transition:
@@ -122,8 +123,8 @@
 
 .autocomplete__item:hover,
 .autocomplete__item[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);
 }
 
 .autocomplete__item[data-disabled] {
@@ -135,14 +136,14 @@
   padding: 1rem;
   text-align: center;
   font-size: 0.875rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .autocomplete__status {
   padding: 0.75rem;
   text-align: center;
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .autocomplete__group {
@@ -150,7 +151,7 @@
 }
 
 .autocomplete__group + .autocomplete__group {
-  border-block-start: 1px solid var(--sigvelo-neutral-stroke-soft);
+  border-block-start: 1px solid var(--sigvelo-color-neutral-border-muted);
 }
 
 .autocomplete__group-label {
@@ -158,5 +159,5 @@
   padding-inline: 0.75rem;
   font-size: 0.75rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }

package/dist/styles/avatar.css

@@ -3,18 +3,30 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  overflow: hidden;
+  font-family: var(--sigvelo-font-sans);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border-radius: var(--sigvelo-radius-full);
+  user-select: none;
+}
+
+.avatar[data-size="sm"] {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.avatar[data-size="lg"] {
   width: 2.5rem;
   height: 2.5rem;
-  overflow: hidden;
-  font-family: var(--sigvelo-font-family);
-  background-color: var(--sigvelo-neutral-fill-softer);
-  border-radius: var(--sigvelo-border-radius-pill);
-  flex-shrink: 0;
 }
 
 .avatar__image {
   width: 100%;
   height: 100%;
+  aspect-ratio: 1;
   object-fit: cover;
 }
 
@@ -26,6 +38,84 @@
   height: 100%;
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   text-transform: uppercase;
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border-radius: var(--sigvelo-radius-full);
+}
+
+.avatar[data-size="sm"] .avatar__fallback {
+  font-size: var(--sigvelo-text-xs);
+}
+
+.avatar-group {
+  display: flex;
+  align-items: center;
+  margin-inline-start: 0.5rem;
+}
+
+.avatar-group .avatar {
+  margin-inline-start: -0.5rem;
+  border: 2px solid var(--sigvelo-color-canvas);
+}
+
+.avatar-group .avatar:first-child {
+  margin-inline-start: 0;
+}
+
+.avatar-group__count,
+.avatar__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.avatar-group__count {
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  margin-inline-start: -0.5rem;
+  padding-inline: 0.375rem;
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border: 2px solid var(--sigvelo-color-canvas);
+  border-radius: var(--sigvelo-radius-full);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.avatar-group:has(.avatar[data-size="sm"]) .avatar-group__count {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: var(--sigvelo-text-xs);
+}
+
+.avatar-group:has(.avatar[data-size="lg"]) .avatar-group__count {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.avatar__badge {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  width: 0.625rem;
+  height: 0.625rem;
+  color: var(--sigvelo-color-primary-text-on-bg);
+  background-color: var(--sigvelo-color-primary-bg);
+  border: 2px solid var(--sigvelo-color-canvas);
+  border-radius: var(--sigvelo-radius-full);
+  user-select: none;
+}
+
+.avatar[data-size="sm"] .avatar__badge {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+.avatar[data-size="lg"] .avatar__badge {
+  width: 0.75rem;
+  height: 0.75rem;
 }