@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/styles/meter.css

@@ -5,32 +5,16 @@
   width: 100%;
 }
 
-.meter__track {
-  position: relative;
-  width: 100%;
-  height: 0.5rem;
-  overflow: hidden;
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border-radius: var(--sigvelo-radius-full);
-}
-
-.meter__indicator {
-  height: 100%;
-  background-color: var(--sigvelo-color-primary-bg);
-  border-radius: var(--sigvelo-radius-full);
-  transition: width 300ms ease;
-}
-
 .meter__label {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
 }
 
 .meter__value {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text-muted);
 }

package/dist/styles/model-selector.css

@@ -1,6 +1,6 @@
 .model-selector {
   display: inline-block;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
 }
 
 .model-selector__trigger {
@@ -33,7 +33,7 @@
   max-height: min(32rem, calc(100vh - 4rem));
   padding: 0;
   overflow: hidden;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
 }
 
@@ -41,7 +41,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding-block: 0.75rem;
+  padding-block: var(--sigvelo-spacing-3);
   padding-inline: 1rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -52,16 +52,21 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.model-selector__input {
+.model-selector__input.input {
   flex: 1;
   min-width: 0;
+  height: auto;
   padding: 0;
   border: none;
   outline: none;
   background-color: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
+}
+
+.model-selector__input.input:focus-visible {
+  box-shadow: none;
 }
 
 .model-selector__input::placeholder {
@@ -84,9 +89,9 @@
 }
 
 .model-selector__group-label {
-  padding-block: 0.375rem;
+  padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: 1rem;
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -96,24 +101,28 @@
 .model-selector__item {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
+  justify-content: flex-start;
+  gap: var(--sigvelo-spacing-2-5);
   width: 100%;
   padding-block: 0.5rem;
   padding-inline: 1rem;
-  background-color: transparent;
-  border: none;
+  border-radius: 0;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-normal);
   text-align: start;
-  cursor: pointer;
-  transition: background-color 120ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
-.model-selector__item:hover:not([data-disabled]),
+.model-selector__item:hover:not(:disabled):not([data-disabled]),
 .model-selector__item:focus-visible {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.model-selector__item:focus-visible {
   outline: none;
+  box-shadow: inset 0 0 0 var(--sigvelo-focus-width) var(--sigvelo-color-focus);
 }
 
 .model-selector__item[data-selected] {
@@ -122,11 +131,16 @@
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
+.model-selector__item:is(:disabled, [data-disabled]) {
+  cursor: not-allowed;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
+}
+
 .model-selector__empty {
   padding-block: 1.5rem;
   padding-inline: 1rem;
   text-align: center;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -137,9 +151,7 @@
 
 .model-selector__separator {
   margin: 0.25rem 0;
-  border: none;
-  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
+  background-color: var(--sigvelo-color-neutral-border-subtle);
 }
 
 .model-selector__logo {
@@ -168,9 +180,9 @@
 
 .model-selector__shortcut {
   padding-block: 0.0625rem;
-  padding-inline: 0.375rem;
+  padding-inline: var(--sigvelo-spacing-1-5);
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   color: var(--sigvelo-color-text-muted);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)

package/dist/styles/navigation-menu.css

@@ -19,11 +19,12 @@
 .navigation-menu__trigger {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  gap: var(--sigvelo-spacing-1);
+  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);
   color: var(--sigvelo-color-text);
   background-color: transparent;
@@ -42,9 +43,7 @@
 
 .navigation-menu__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);
 }
 
 .navigation-menu__trigger[data-popup-open] {
@@ -68,10 +67,10 @@
 
 .navigation-menu__link {
   display: block;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  padding-block: var(--sigvelo-recipe-row-padding-block);
+  padding-inline: var(--sigvelo-recipe-row-padding-inline);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-row-font-size);
   color: var(--sigvelo-color-text);
   text-decoration: none;
   border-radius: var(--sigvelo-radius-sm);
@@ -87,9 +86,7 @@
 
 .navigation-menu__link: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);
 }
 
 .navigation-menu__link[data-active] {
@@ -97,50 +94,13 @@
   color: var(--sigvelo-color-primary-bg);
 }
 
-.navigation-menu__positioner {
-  z-index: 50;
-}
-
 .navigation-menu__popup {
+  --sigvelo-recipe-surface-padding: 0;
+
   min-width: 200px;
-  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-color-text), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
-  animation: navigation-menu-enter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
   overflow: hidden;
 }
 
-.navigation-menu__popup[data-ending-style] {
-  animation: navigation-menu-exit 100ms ease;
-}
-
-@keyframes navigation-menu-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes navigation-menu-exit {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-}
-
 .navigation-menu__viewport {
   position: relative;
   overflow: hidden;

package/dist/styles/number-field.css

@@ -1,7 +1,7 @@
 .number-field {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .number-field__group {
@@ -12,21 +12,8 @@
 .number-field__input {
   flex: 1;
   width: 100%;
-  height: 2.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  line-height: 1.25;
   text-align: center;
-  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-inline: none;
-  transition:
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .number-field__input:focus-visible {
@@ -36,7 +23,7 @@
 }
 
 .number-field__input:disabled {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -49,10 +36,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 1rem;
+  inline-size: var(--sigvelo-recipe-control-height);
+  block-size: var(--sigvelo-recipe-control-height);
+  font-family: inherit;
+  font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-canvas);
@@ -84,15 +71,13 @@
 .number-field__decrement:focus-visible,
 .number-field__increment: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);
   z-index: 1;
 }
 
 .number-field__decrement:disabled,
 .number-field__increment:disabled {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   pointer-events: none;
 }
 

package/dist/styles/popover.css

@@ -1,39 +1,4 @@
-.popover__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
-  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:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.popover__trigger:hover {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.popover__trigger:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
 .popover__backdrop {
-  position: fixed;
-  inset: 0;
   z-index: 50;
   background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 50%);
   transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
@@ -45,38 +10,20 @@
 }
 
 .popover__positioner {
-  z-index: 50;
   outline: none;
 }
 
 .popover__popup {
-  min-width: 12rem;
-  max-width: 20rem;
-  padding: 1rem;
-  font-family: var(--sigvelo-font-sans);
-  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);
-  box-shadow:
-    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%);
-  outline: none;
-  transform-origin: var(--transform-origin);
-  transition:
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
 
-.popover__popup[data-starting-style],
-.popover__popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.95);
+  min-width: 12rem;
+  max-inline-size: min(20rem, var(--available-width));
+  overflow-y: auto;
 }
 
 .popover__arrow {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: var(--sigvelo-spacing-3);
+  height: var(--sigvelo-spacing-3);
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -105,7 +52,7 @@
 
 .popover__title {
   margin-block-end: 0.5rem;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
@@ -113,7 +60,7 @@
 
 .popover__description {
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   color: var(--sigvelo-color-text-muted);
 }
@@ -121,7 +68,7 @@
 .popover__header {
   display: grid;
   gap: 0.5rem;
-  margin-block-end: 0.75rem;
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .popover__close {
@@ -130,9 +77,9 @@
   justify-content: center;
   padding-block: 0.25rem;
   padding-inline: 0.5rem;
-  margin-block-start: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.75rem;
+  margin-block-start: var(--sigvelo-spacing-3);
+  font-family: inherit;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text-muted);
   background-color: transparent;
@@ -152,7 +99,5 @@
 
 .popover__close: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);
 }

package/dist/styles/preview-card.css

@@ -12,61 +12,20 @@
 
 .preview-card__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);
   border-radius: var(--sigvelo-radius-sm);
 }
 
 .preview-card__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-}
-
-.preview-card__positioner {
   z-index: 50;
 }
 
 .preview-card__popup {
-  min-width: 200px;
-  max-width: 320px;
-  padding: 1rem;
-  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-color-text), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
-  animation: preview-card-enter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.preview-card__popup[data-ending-style] {
-  animation: preview-card-exit 100ms ease;
-}
-
-@keyframes preview-card-enter {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
 
-@keyframes preview-card-exit {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
+  min-inline-size: 12.5rem;
+  max-inline-size: min(20rem, var(--available-width));
+  overflow-y: auto;
 }
 
 .preview-card__arrow {