@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/styles/chain-of-thought.css

@@ -2,71 +2,17 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
-  color: var(--sigvelo-color-text);
-}
-
-.chain-of-thought__header {
-  display: 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);
-}
-
-.chain-of-thought__header:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text);
 }
 
-.chain-of-thought__header:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
-.chain-of-thought__header-icon {
-  display: inline-flex;
-  transition: transform 200ms ease;
-}
-
-.chain-of-thought__header[data-panel-open] .chain-of-thought__header-icon {
-  transform: rotate(90deg);
-}
-
-.chain-of-thought__content {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.chain-of-thought__content[data-starting-style],
-.chain-of-thought__content[data-ending-style] {
-  height: 0;
-  opacity: 0;
-}
-
 .chain-of-thought__steps {
   display: flex;
   flex-direction: column;
-  gap: 0.625rem;
+  gap: var(--sigvelo-spacing-2-5);
   margin: 0;
-  padding-block: 0.75rem;
-  padding-inline: 0.75rem;
+  padding-block: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-3);
   margin-inline-start: 1rem;
   border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-color-neutral-border-subtle);
   list-style: none;
@@ -75,7 +21,7 @@
 .chain-of-thought__step {
   display: flex;
   align-items: flex-start;
-  gap: 0.625rem;
+  gap: var(--sigvelo-spacing-2-5);
   position: relative;
 }
 
@@ -111,13 +57,13 @@
 .chain-of-thought__step-body {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   min-width: 0;
   flex: 1;
 }
 
 .chain-of-thought__step-label {
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
 }
@@ -127,7 +73,7 @@
 }
 
 .chain-of-thought__step-description {
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   line-height: 1.5;
 }
@@ -135,14 +81,14 @@
 .chain-of-thought__step-children {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  margin-block-start: 0.125rem;
+  gap: var(--sigvelo-spacing-1-5);
+  margin-block-start: var(--sigvelo-spacing-0-5);
 }
 
 .chain-of-thought__search-results {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -161,7 +107,7 @@
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-full);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
   text-decoration: none;
   max-width: 18rem;
@@ -180,9 +126,7 @@
 
 .chain-of-thought__search-result: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);
 }
 
 .chain-of-thought__image {
@@ -207,7 +151,7 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  padding: 0.75rem;
+  padding: var(--sigvelo-spacing-3);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -215,7 +159,7 @@
 }
 
 .chain-of-thought__image-caption {
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   color: var(--sigvelo-color-text-muted);
 }
 

package/dist/styles/chatgpt-sign-in-screen.css

@@ -23,7 +23,7 @@
     );
   background-size: 2rem 2rem;
   color: var(--sigvelo-color-text);
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
 }
 
 .chatgpt-sign-in::before {
@@ -63,7 +63,7 @@
 
 .chatgpt-sign-in__brand {
   display: grid;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   justify-items: center;
 }
 
@@ -79,7 +79,7 @@
 .chatgpt-sign-in__brand p {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   margin: 0;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-sm);

package/dist/styles/checkbox-group.css

@@ -5,6 +5,6 @@
 }
 
 .checkbox-group[data-disabled] {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   pointer-events: none;
 }

package/dist/styles/checkbox.css

@@ -23,9 +23,7 @@
 
 .checkbox: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);
 }
 
 .checkbox[data-checked] {
@@ -38,13 +36,11 @@
 }
 
 .checkbox: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);
 }
 
 .checkbox[data-disabled] {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
 

package/dist/styles/code-block.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   width: 100%;
   min-inline-size: 0;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   /* Fill-based containment: no perimeter border */
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-lg);
@@ -15,7 +15,7 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
+  padding-inline: var(--sigvelo-spacing-3);
   background-color: transparent;
 }
 
@@ -23,14 +23,14 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
 }
 
 .code-block__filename {
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -55,10 +55,10 @@
 
 .code-block__content {
   margin: 0;
-  padding-block: 0.75rem;
+  padding-block: var(--sigvelo-spacing-3);
   padding-inline: 0.875rem;
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1.55;
   color: var(--sigvelo-color-text);
   overflow: visible;
@@ -70,11 +70,11 @@
 
 .code-block__content--highlighted pre.shiki {
   margin: 0;
-  padding-block: 0.75rem;
+  padding-block: var(--sigvelo-spacing-3);
   padding-inline: 0.875rem;
   background-color: transparent !important;
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1.55;
   overflow: visible;
 }
@@ -101,8 +101,8 @@
   content: counter(line);
   display: inline-block;
   width: 2rem;
-  padding-inline-end: 0.75rem;
-  margin-inline-end: 0.75rem;
+  padding-inline-end: var(--sigvelo-spacing-3);
+  margin-inline-end: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text-muted);
   text-align: end;
   border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)

package/dist/styles/codex-model-selector.css

@@ -0,0 +1,186 @@
+/*
+ * Codex response settings compose the shared Menu primitive. These rules only
+ * express the component's density and content hierarchy; Menu owns popup
+ * surfaces, borders, shadows, motion, focus management, and collision-aware
+ * positioning.
+ */
+.codex-model-selector__trigger {
+  position: relative;
+  z-index: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  max-inline-size: calc(100vi - var(--sigvelo-spacing-8));
+  min-block-size: var(--sigvelo-control-height-sm);
+  padding: 0;
+  color: var(--sigvelo-color-text);
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--sigvelo-radius-md);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--sigvelo-control-text-md);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: 1.25;
+  isolation: isolate;
+}
+
+.codex-model-selector__trigger::before {
+  position: absolute;
+  z-index: -1;
+  inset-block: calc(var(--sigvelo-spacing-1) * -1);
+  inset-inline: calc(var(--sigvelo-spacing-2) * -1);
+  content: "";
+  pointer-events: none;
+  background-color: var(--sigvelo-color-neutral-bg-muted);
+  border-radius: var(--sigvelo-radius-full);
+  opacity: 0;
+  transform: scale(0.96);
+  transition:
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.codex-model-selector__trigger:is(:hover, :focus-visible, [data-popup-open])::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.codex-model-selector__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.codex-model-selector__trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
+}
+
+.codex-model-selector__summary {
+  display: flex;
+  flex: 0 1 auto;
+  justify-content: center;
+  gap: var(--sigvelo-spacing-1);
+  min-inline-size: 0;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.codex-model-selector__summary-effort,
+.codex-model-selector__trigger-icon,
+.codex-model-selector__submenu-value,
+.codex-model-selector__submenu-icon,
+.codex-model-selector__option-description,
+.codex-model-selector__reset {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.codex-model-selector__summary-effort--ultra {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.codex-model-selector__trigger-icon,
+.codex-model-selector__submenu-icon,
+.codex-model-selector__reset-icon {
+  flex: 0 0 auto;
+}
+
+.codex-model-selector__trigger-icon {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
+.codex-model-selector__menu {
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
+
+  inline-size: min(18rem, calc(100vi - var(--sigvelo-spacing-8)));
+  padding: var(--sigvelo-spacing-1);
+}
+
+.codex-model-selector__submenu {
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-control-text-md);
+
+  inline-size: min(18rem, calc(100vi - var(--sigvelo-spacing-8)));
+  padding: var(--sigvelo-spacing-2);
+}
+
+.codex-model-selector__submenu--model {
+  inline-size: min(20rem, calc(100vi - var(--sigvelo-spacing-8)));
+}
+
+.codex-model-selector__submenu--speed {
+  inline-size: min(18rem, calc(100vi - var(--sigvelo-spacing-8)));
+}
+
+.codex-model-selector__submenu-title {
+  padding: 0;
+  margin-block-end: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-control-text-sm);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: 1.25;
+}
+
+.codex-model-selector__submenu-trigger::after {
+  content: none;
+}
+
+.codex-model-selector__submenu-value {
+  min-inline-size: 0;
+  margin-inline-start: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.codex-model-selector__option {
+  align-items: flex-start;
+}
+
+.codex-model-selector__option > span:first-child {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.codex-model-selector__option-label,
+.codex-model-selector__option-description {
+  display: block;
+}
+
+.codex-model-selector__option-description {
+  margin-block-start: var(--sigvelo-spacing-0-5);
+  font-size: var(--sigvelo-control-text-sm);
+  line-height: 1.25;
+}
+
+.codex-model-selector__option-indicator {
+  order: 2;
+  margin-inline-start: auto;
+  color: var(--sigvelo-color-text);
+}
+
+.codex-model-selector__option-indicator::before {
+  content: none;
+}
+
+.codex-model-selector__reset {
+  justify-content: space-between;
+}
+
+.codex-model-selector__reset-icon {
+  inline-size: var(--sigvelo-spacing-4);
+  block-size: var(--sigvelo-spacing-4);
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .codex-model-selector__summary-effort--ultra {
+    color: LinkText;
+  }
+}

package/dist/styles/collapsible.css

@@ -8,12 +8,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: var(--sigvelo-recipe-control-gap);
   width: 100%;
-  padding-block: 0.75rem;
-  padding-inline: 1rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  min-block-size: var(--sigvelo-recipe-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   color: var(--sigvelo-color-text);
@@ -33,13 +34,11 @@
 
 .collapsible__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);
 }
 
 .collapsible__trigger[data-disabled] {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -50,7 +49,7 @@
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid currentColor;
-  transition: transform 200ms ease;
+  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
 }
 
 .collapsible__trigger[data-panel-open]::after {
@@ -63,25 +62,10 @@
   border-block-end-color: transparent;
 }
 
-/* The measured height sits on the base class, not behind [data-open]: during
-   close the open rule stops matching before the ending style lands, height
-   computes to `auto`, and `auto → 0` can't transition — the panel snaps shut
-   instead of folding. (Base UI's documented panel pattern.) */
 .collapsible__panel {
-  height: var(--collapsible-panel-height);
-  overflow: hidden;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
-  transition:
-    height 200ms ease,
-    opacity 200ms ease;
-}
-
-.collapsible__panel[data-starting-style],
-.collapsible__panel[data-ending-style] {
-  height: 0;
-  opacity: 0;
 }
 
 .collapsible__panel > * {