@mcp-b/react-components 0.1.1

package/dist/styles/accordion.css

@@ -0,0 +1,104 @@
+.accordion {
+  width: 100%;
+}
+
+.accordion__item {
+  border-bottom: 1px solid var(--sigvelo-neutral-stroke-soft);
+}
+
+.accordion__item:last-child {
+  border-bottom: none;
+}
+
+.accordion__header {
+  margin: 0;
+}
+
+.accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-block: 1rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.9375rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-align: start;
+  color: var(--sigvelo-text-body);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 150ms ease;
+}
+
+.accordion__trigger:hover {
+  color: color-mix(in oklab, var(--sigvelo-text-body), 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);
+}
+
+.accordion__trigger-text {
+  flex: 1;
+}
+
+.accordion__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--sigvelo-text-muted);
+  transition: transform 200ms ease;
+}
+
+.accordion__item[data-open] .accordion__icon {
+  transform: rotate(180deg);
+}
+
+.accordion__panel {
+  overflow: hidden;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  line-height: 1.625;
+  color: var(--sigvelo-text-muted);
+}
+
+.accordion__panel[data-open] {
+  animation: accordion-expand 200ms ease-out;
+}
+
+.accordion__panel[data-ending-style] {
+  animation: accordion-collapse 200ms ease-out;
+}
+
+.accordion__panel > * {
+  padding-block-end: 1rem;
+}
+
+@keyframes accordion-expand {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--accordion-panel-height);
+    opacity: 1;
+  }
+}
+
+@keyframes accordion-collapse {
+  from {
+    height: var(--accordion-panel-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}

package/dist/styles/agent-connection.css

@@ -0,0 +1,159 @@
+.agent-connect {
+  display: grid;
+  gap: 0.75rem;
+  min-inline-size: 0;
+  color: var(--sigvelo-text-body);
+}
+
+.agent-connect__header {
+  display: flex;
+  gap: 0.65rem;
+  align-items: flex-start;
+  min-inline-size: 0;
+}
+
+.agent-connect__icon {
+  display: grid;
+  flex: 0 0 auto;
+  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);
+}
+
+.agent-connect__title-group {
+  display: grid;
+  gap: 0.2rem;
+  min-inline-size: 0;
+}
+
+.agent-connect__title-group :where(h2, h3) {
+  margin: 0;
+  color: var(--sigvelo-text-body);
+  font-size: 0.95rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.agent-connect__title-group p {
+  margin: 0;
+  color: var(--sigvelo-text-muted);
+  font-size: 0.78rem;
+  line-height: 1.35;
+}
+
+.agent-connect__targets {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.25rem;
+  min-inline-size: 0;
+  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);
+}
+
+.agent-connect__legend {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+}
+
+.agent-connect__target {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 1.75rem;
+  min-inline-size: 0;
+  padding: 0 0.45rem;
+  border: 0;
+  border-radius: var(--sigvelo-border-radius-sm);
+  background: transparent;
+  color: var(--sigvelo-text-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.15;
+  text-align: center;
+}
+
+@media (pointer: coarse) {
+  .agent-connect__target {
+    min-block-size: 2.5rem;
+    padding-inline: 0.75rem;
+  }
+}
+
+.agent-connect__target:hover {
+  color: var(--sigvelo-text-body);
+  background: color-mix(in oklab, var(--sigvelo-neutral-fill-soft), transparent 38%);
+}
+
+.agent-connect__target:focus-visible {
+  outline: var(--sigvelo-focus-ring);
+  outline-offset: var(--sigvelo-focus-offset);
+}
+
+.agent-connect__target[data-selected="true"] {
+  background: var(--sigvelo-paper-color);
+  color: var(--sigvelo-text-body);
+  box-shadow: var(--sigvelo-shadow-softer);
+}
+
+.agent-connect .code-block {
+  min-inline-size: 0;
+}
+
+.agent-connect .code-block__container {
+  max-block-size: 13.5rem;
+}
+
+.agent-connect .code-block__content,
+.agent-connect .code-block__content--highlighted pre.shiki {
+  font-size: 0.74rem;
+  line-height: 1.5;
+}
+
+.agent-connect-trigger {
+  inline-size: 100%;
+}
+
+.agent-connect-popover {
+  inline-size: min(36rem, calc(100dvi - 1.5rem));
+  max-inline-size: min(36rem, calc(100dvi - 1.5rem));
+  padding: 0.875rem;
+}
+
+@media (width <= 40rem) {
+  .agent-connect__targets {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .agent-connect-popover {
+    inline-size: min(24rem, calc(100dvi - 1.5rem));
+  }
+}
+
+@media (forced-colors: active) {
+  .agent-connect__targets {
+    border-color: ButtonText;
+  }
+
+  .agent-connect__target[data-selected="true"] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/dist/styles/alert-dialog.css

@@ -0,0 +1,144 @@
+.alert-dialog__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+.alert-dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.5);
+  z-index: 50;
+}
+
+.alert-dialog__backdrop[data-starting-style],
+.alert-dialog__backdrop[data-ending-style] {
+  opacity: 0;
+}
+
+.alert-dialog__popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  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);
+  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%);
+}
+
+.alert-dialog__popup[data-starting-style],
+.alert-dialog__popup[data-ending-style] {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.95);
+}
+
+.alert-dialog__popup--sm {
+  max-width: 20rem;
+}
+
+.alert-dialog__popup--lg {
+  max-width: 36rem;
+}
+
+.alert-dialog__title {
+  font-family: var(--sigvelo-font-family);
+  font-size: 1.125rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: 1.25;
+  color: var(--sigvelo-text-body);
+  margin: 0 0 0.5rem;
+}
+
+.alert-dialog__description {
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--sigvelo-text-muted);
+  margin: 0 0 1.5rem;
+}
+
+.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-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  border: none;
+  border-radius: var(--sigvelo-border-radius-md);
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+.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);
+}
+
+.alert-dialog__action--primary {
+  background-color: var(--sigvelo-primary-fill-mid);
+  color: var(--sigvelo-primary-text-on-mid);
+}
+
+.alert-dialog__action--primary:hover {
+  background-color: color-mix(in oklab, var(--sigvelo-primary-fill-mid), transparent 10%);
+}
+
+.alert-dialog__action--secondary {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.alert-dialog__action--secondary:hover {
+  background-color: color-mix(in oklab, var(--sigvelo-neutral-fill-softer), transparent 20%);
+}
+
+.alert-dialog__action--destructive {
+  background-color: var(--sigvelo-destructive-fill-mid);
+  color: var(--sigvelo-destructive-text-on-mid);
+}
+
+.alert-dialog__action--destructive:hover {
+  background-color: color-mix(in oklab, var(--sigvelo-destructive-fill-mid), 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);
+}
+
+.alert-dialog__action--outline:hover {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.alert-dialog__action--ghost {
+  background-color: transparent;
+  color: var(--sigvelo-text-body);
+}
+
+.alert-dialog__action--ghost:hover {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}

package/dist/styles/artifact.css

@@ -0,0 +1,67 @@
+.artifact {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: var(--sigvelo-font-family);
+  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-paper-color);
+  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);
+  overflow: hidden;
+}
+
+.artifact__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  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);
+}
+
+.artifact__title {
+  margin: 0;
+  font-family: inherit;
+  font-size: 0.9375rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  color: var(--sigvelo-text-body);
+  line-height: 1.3;
+}
+
+.artifact__description {
+  margin: 0;
+  margin-block-start: 0.125rem;
+  font-size: 0.8125rem;
+  color: var(--sigvelo-text-muted);
+  line-height: 1.4;
+}
+
+.artifact__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.artifact__action,
+.artifact__close {
+  /* Inherits from Button variant=ghost size=icon; overrides only when needed */
+}
+
+.artifact__content {
+  padding-block: 1rem;
+  padding-inline: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+@media (forced-colors: active) {
+  .artifact {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/styles/autocomplete.css

@@ -0,0 +1,162 @@
+.autocomplete__input {
+  flex: 1;
+  min-width: 0;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  color: var(--sigvelo-text-body);
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.autocomplete__input::placeholder {
+  color: var(--sigvelo-text-muted);
+}
+
+.autocomplete__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  color: var(--sigvelo-text-muted);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 150ms ease;
+}
+
+.autocomplete__trigger:hover {
+  color: var(--sigvelo-text-body);
+}
+
+.autocomplete__trigger:focus-visible {
+  outline: none;
+}
+
+.autocomplete__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  color: var(--sigvelo-text-muted);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--sigvelo-border-radius-sm);
+  cursor: pointer;
+  transition:
+    color 150ms ease,
+    background-color 150ms ease;
+}
+
+.autocomplete__clear:hover {
+  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-neutral-fill-softer);
+}
+
+.autocomplete__positioner {
+  z-index: 50;
+}
+
+.autocomplete__popup {
+  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);
+  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%);
+  animation: autocomplete-popup-enter 150ms ease;
+}
+
+.autocomplete__popup[data-ending-style] {
+  animation: autocomplete-popup-exit 100ms ease;
+}
+
+@keyframes autocomplete-popup-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes autocomplete-popup-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+.autocomplete__list {
+  padding: 0.25rem;
+}
+
+.autocomplete__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  color: var(--sigvelo-text-body);
+  border-radius: var(--sigvelo-border-radius-sm);
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+.autocomplete__item:hover,
+.autocomplete__item[data-highlighted] {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.autocomplete__item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.autocomplete__empty {
+  padding: 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--sigvelo-text-muted);
+}
+
+.autocomplete__status {
+  padding: 0.75rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--sigvelo-text-muted);
+}
+
+.autocomplete__group {
+  padding-block: 0.25rem;
+}
+
+.autocomplete__group + .autocomplete__group {
+  border-block-start: 1px solid var(--sigvelo-neutral-stroke-soft);
+}
+
+.autocomplete__group-label {
+  padding-block: 0.375rem;
+  padding-inline: 0.75rem;
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-muted);
+}

package/dist/styles/avatar.css

@@ -0,0 +1,31 @@
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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%;
+  object-fit: cover;
+}
+
+.avatar__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-muted);
+  text-transform: uppercase;
+}

package/dist/styles/badge.css

@@ -0,0 +1,56 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: 0.125rem;
+  padding-inline: 0.5rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: 1.25;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  border-radius: var(--sigvelo-border-radius-pill);
+  white-space: nowrap;
+}
+
+.badge--sm {
+  padding-block: 0.0625rem;
+  padding-inline: 0.375rem;
+  font-size: 0.625rem;
+}
+
+/* Normal appearance */
+
+.badge--normal.badge--primary {
+  background-color: var(--sigvelo-primary-fill-mid);
+  color: var(--sigvelo-primary-text-on-mid);
+}
+
+.badge--normal.badge--neutral {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.badge--normal.badge--success {
+  background-color: var(--sigvelo-success-fill-mid);
+  color: var(--sigvelo-success-text-on-mid);
+}
+
+.badge--normal.badge--warning {
+  background-color: var(--sigvelo-warning-fill-mid);
+  color: var(--sigvelo-warning-text-on-mid);
+}
+
+.badge--normal.badge--destructive {
+  background-color: var(--sigvelo-destructive-fill-mid);
+  color: var(--sigvelo-destructive-text-on-mid);
+}
+
+/* Outline appearance */
+
+.badge--outline {
+  background-color: transparent;
+  color: var(--sigvelo-text-body);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+}