@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/styles/context.css

@@ -1,6 +1,6 @@
 .context {
   display: inline-block;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
 }
 
 .context__trigger {
@@ -16,14 +16,14 @@
 
 .context__trigger-label {
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .context__content {
   width: 20rem;
   padding: 0;
-  font-family: var(--sigvelo-font-family);
-  color: var(--sigvelo-text-body);
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
 }
 
 .context__header {
@@ -52,7 +52,7 @@
   justify-content: center;
   font-size: 0.625rem;
   font-weight: var(--sigvelo-font-weight-bold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   font-variant-numeric: tabular-nums;
 }
 
@@ -67,19 +67,19 @@
 .context__header-title {
   font-size: 0.8125rem;
   font-weight: var(--sigvelo-font-weight-bold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .context__header-meta {
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
 }
 
 .context__header-model {
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.6875rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .context__body {
@@ -105,17 +105,17 @@
 }
 
 .context__row-label {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .context__row-value {
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   font-variant-numeric: tabular-nums;
 }
 
 .context__row-cost {
-  color: var(--sigvelo-text-muted);
-  font-family: var(--sigvelo-font-family-code);
+  color: var(--sigvelo-color-text-muted);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.6875rem;
   font-variant-numeric: tabular-nums;
 }
@@ -136,7 +136,7 @@
 }
 
 .context__footer-cost {
-  font-family: var(--sigvelo-font-family-code);
-  color: var(--sigvelo-primary-text-colorful);
+  font-family: var(--sigvelo-font-mono);
+  color: var(--sigvelo-color-primary-text);
   font-variant-numeric: tabular-nums;
 }

package/dist/styles/conversation.css

@@ -4,8 +4,8 @@
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  font-family: var(--sigvelo-font-family);
-  color: var(--sigvelo-text-body);
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
 }
 
 .conversation__content {
@@ -27,7 +27,7 @@
   padding-block: 3rem;
   padding-inline: 1.5rem;
   text-align: center;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .conversation__empty-icon {
@@ -36,23 +36,23 @@
   justify-content: center;
   width: 3rem;
   height: 3rem;
-  border-radius: var(--sigvelo-border-radius-pill);
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-text-muted);
+  border-radius: var(--sigvelo-radius-full);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text-muted);
   margin-block-end: 0.25rem;
 }
 
 .conversation__empty-title {
   font-size: 1rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .conversation__empty-description {
   max-width: 32ch;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .conversation__scroll-button {
@@ -60,8 +60,8 @@
   inset-inline-end: 0.75rem;
   inset-block-end: 0.75rem;
   z-index: 1;
-  box-shadow: var(--sigvelo-shadow-soft);
-  background-color: var(--sigvelo-paper-color);
+  box-shadow: var(--sigvelo-shadow-sm);
+  background-color: var(--sigvelo-color-surface);
 }
 
 .conversation__download-button {
@@ -69,8 +69,8 @@
   inset-inline-end: 0.75rem;
   inset-block-start: 0.75rem;
   z-index: 1;
-  box-shadow: var(--sigvelo-shadow-softer);
-  background-color: var(--sigvelo-paper-color);
+  box-shadow: var(--sigvelo-shadow-xs);
+  background-color: var(--sigvelo-color-surface);
 }
 
 @media (forced-colors: active) {

package/dist/styles/dialog.css

@@ -21,13 +21,14 @@
   max-height: calc(100vh - 4rem);
   overflow-y: auto;
   overscroll-behavior: contain;
-  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%);
 }
 
 .dialog__popup[data-starting-style],
@@ -53,46 +54,81 @@
 }
 
 .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-block-end: 0.5rem;
 }
 
 .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-block-end: 1rem;
 }
 
+.dialog__header {
+  display: grid;
+  gap: 0.5rem;
+  margin-block-end: 1rem;
+}
+
+.dialog__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-block-start: 1.5rem;
+}
+
 .dialog__close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding-block: 0.5rem;
   padding-inline: 1rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  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);
   border: none;
-  border-radius: var(--sigvelo-border-radius-md);
+  border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition: background-color 150ms ease;
 }
 
 .dialog__close: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%);
 }
 
 .dialog__close: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);
+}
+
+.dialog__close--icon {
+  position: absolute;
+  inset-block-start: 1rem;
+  inset-inline-end: 1rem;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+}
+
+.dialog__close-label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }

package/dist/styles/environment-variables.css

@@ -2,12 +2,12 @@
   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-md);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
   overflow: hidden;
 }
 
@@ -19,7 +19,7 @@
   padding-block: 0.625rem;
   padding-inline: 0.875rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .environment-variables__title {
@@ -27,7 +27,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-bold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .environment-variables__toggle {
@@ -36,7 +36,7 @@
   gap: 0.5rem;
   cursor: pointer;
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .environment-variables__toggle-icon {
@@ -60,10 +60,10 @@
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--sigvelo-text-muted);
-  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-color-text-muted);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .environment-variables__row {
@@ -73,7 +73,7 @@
   padding-block: 0.5rem;
   padding-inline: 0.875rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .environment-variables__row:last-child {
@@ -81,10 +81,10 @@
 }
 
 .environment-variables__name {
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   flex-shrink: 0;
   min-width: 10rem;
 }
@@ -94,13 +94,13 @@
   min-width: 0;
   padding-block: 0.3125rem;
   padding-inline: 0.5rem;
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
-  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-color-text-muted);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
   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);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/styles/field.css

@@ -1,17 +1,85 @@
 .field {
   display: flex;
+  width: 100%;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.75rem;
+}
+
+.field:is([data-invalid="true"], [data-invalid=""]) .field__label,
+.field:is([data-invalid="true"], [data-invalid=""]) .field-title {
+  color: var(--sigvelo-color-danger-bg);
+}
+
+.field--horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+
+.field--horizontal:has(> .field-content) {
+  align-items: flex-start;
+}
+
+.field--horizontal:has(> .field-content) > :is([role="checkbox"], [role="radio"]) {
+  margin-block-start: 1px;
+}
+
+.field--horizontal > .field__label {
+  flex: 1 1 auto;
+}
+
+.field--responsive {
+  flex-direction: column;
+}
+
+@container (min-width: 28rem) {
+  .field--responsive {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .field--responsive:has(> .field-content) {
+    align-items: flex-start;
+  }
+
+  .field--responsive:has(> .field-content) > :is([role="checkbox"], [role="radio"]) {
+    margin-block-start: 1px;
+  }
+
+  .field--responsive > .field__label {
+    flex: 1 1 auto;
+  }
 }
 
 .field__label {
-  font-family: var(--sigvelo-font-family);
+  display: flex;
+  width: fit-content;
+  gap: 0.5rem;
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
+}
+
+.field__label:has(> [data-slot="field"]) {
+  width: 100%;
+  flex-direction: column;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.field__label:has(> [data-slot="field"]) > [data-slot="field"] {
+  padding: 1rem;
+}
+
+.field__label:has(> [data-slot="field"]):has([data-state="checked"], [data-checked]) {
+  border-color: var(--sigvelo-color-primary-border);
+  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 95%);
 }
 
+.field[data-disabled] .field__label,
+.field[data-disabled] .field-title,
 .field__label[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
@@ -23,28 +91,29 @@
   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;
   line-height: 1.25;
-  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);
   transition:
     border-color 150ms ease,
     box-shadow 150ms ease;
 }
 
 .field__control::placeholder {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .field__control: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%);
 }
 
 .field__control:disabled {
@@ -52,29 +121,122 @@
   cursor: not-allowed;
 }
 
-.field__control[data-invalid] {
-  border-color: var(--sigvelo-destructive-fill-mid);
+.field__control:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
+  border-color: var(--sigvelo-color-danger-bg);
 }
 
-.field__control[data-invalid]:focus-visible {
-  border-color: var(--sigvelo-destructive-fill-mid);
+.field__control: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-background-color),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-destructive-fill-mid), transparent 80%);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 80%);
 }
 
 .field__description {
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.75rem;
   line-height: 1.4;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   margin: 0;
 }
 
 .field__error {
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.75rem;
   line-height: 1.4;
-  color: var(--sigvelo-destructive-fill-mid);
+  color: var(--sigvelo-color-danger-bg);
   margin: 0;
 }
+
+.field__error-list {
+  margin: 0;
+  padding-inline-start: 1rem;
+}
+
+.field-set,
+.field-group,
+.field-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.field-set {
+  gap: 1.5rem;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.field-set:has(> [data-slot="checkbox-group"], > [data-slot="radio-group"]) {
+  gap: 0.75rem;
+}
+
+.field-group {
+  container-type: inline-size;
+  width: 100%;
+  gap: 1.75rem;
+}
+
+.field-group > .field-group {
+  gap: 1rem;
+}
+
+.field-group:is([data-slot="checkbox-group"], [data-slot="radio-group"]) {
+  gap: 0.75rem;
+}
+
+.field-content {
+  flex: 1;
+  gap: 0.375rem;
+  line-height: 1.375;
+}
+
+.field-legend,
+.field-title {
+  color: var(--sigvelo-color-text);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.25;
+}
+
+.field-legend {
+  margin-block-end: 0.75rem;
+  font-size: 1rem;
+}
+
+.field-legend[data-variant="label"] {
+  font-size: 0.875rem;
+}
+
+.field-title {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.field-separator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.25rem;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.875rem;
+}
+
+.field-separator__line {
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  width: 100%;
+  height: 1px;
+  background-color: var(--sigvelo-color-neutral-border-muted);
+}
+
+.field-separator__content {
+  position: relative;
+  padding-inline: 0.5rem;
+  background-color: var(--sigvelo-color-canvas);
+}

package/dist/styles/fieldset.css

@@ -4,15 +4,16 @@
   gap: 1rem;
   padding: 1.5rem;
   margin: 0;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
 }
 
 .fieldset__legend {
   padding: 0 0.5rem;
   margin: 0 -0.5rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-bold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }