@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/styles/responsive-sidebar-shell.css

@@ -24,7 +24,8 @@
   background: var(--sigvelo-color-canvas);
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  transition: grid-template-columns var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+  transition: grid-template-columns var(--sigvelo-motion-duration-layout)
+    var(--sigvelo-motion-ease-change);
 }
 
 .responsive-sidebar-shell__frame:dir(rtl) {
@@ -59,20 +60,24 @@
   z-index: 25;
 }
 
-.responsive-sidebar-shell__frame[data-sidebar-open="false"] {
+.responsive-sidebar-shell[data-sidebar-open="false"] > .responsive-sidebar-shell__frame {
   grid-template-columns: minmax(0, 1fr);
 }
 
-.responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__sidebar {
+.responsive-sidebar-shell[data-sidebar-open="false"]
+  > .responsive-sidebar-shell__frame
+  > .responsive-sidebar-shell__sidebar {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
   visibility: hidden;
-  transform: translateX(var(--responsive-sidebar-closed-translate));
+  translate: var(--responsive-sidebar-closed-translate) 0;
   pointer-events: none;
 }
 
-.responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__main {
+.responsive-sidebar-shell[data-sidebar-open="false"]
+  > .responsive-sidebar-shell__frame
+  > .responsive-sidebar-shell__main {
   grid-column: 1;
 }
 
@@ -91,57 +96,56 @@
     position: relative;
     z-index: 23;
     inset-inline-start: 50%;
-    inline-size: min(calc(100cqi - var(--sigvelo-spacing-4)), 32rem);
+    inline-size: min(calc(100cqi - var(--sigvelo-spacing-3)), 34rem);
     max-inline-size: none;
     block-size: auto;
-    max-block-size: min(30rem, calc(100% - var(--sigvelo-spacing-4)));
+    max-block-size: min(32rem, calc(100% - var(--sigvelo-spacing-3)));
     align-self: start;
     margin-block-start: var(--sigvelo-spacing-1);
     overflow: hidden;
     border: var(--sigvelo-border-style) var(--sigvelo-border-width)
       var(--sigvelo-color-neutral-border-subtle);
     border-radius: var(--sigvelo-radius-lg);
-    box-shadow: var(--sigvelo-shadow-lg);
+    box-shadow: var(--sigvelo-shadow-md);
+    visibility: visible;
     opacity: 1;
-    transform: translateX(-50%);
+    translate: -50% 0;
+    scale: 1;
     transform-origin: top center;
     transition:
-      opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-      transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
-  }
-
-  .responsive-sidebar-shell__sidebar > .think-thread-picker {
-    block-size: auto;
-    max-block-size: inherit;
-    grid-template-rows: auto auto auto;
-  }
-
-  .responsive-sidebar-shell__sidebar .think-thread-picker__nav,
-  .responsive-sidebar-shell__sidebar .think-thread-picker__scroll,
-  .responsive-sidebar-shell__sidebar .think-thread-picker__viewport {
-    block-size: auto;
-    max-block-size: 20rem;
+      opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-change),
+      translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter),
+      scale var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter),
+      visibility var(--sigvelo-motion-duration-disclosure) allow-discrete;
   }
 
   .responsive-sidebar-shell__resizer {
     display: none;
   }
 
-  .responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__sidebar {
+  .responsive-sidebar-shell[data-sidebar-open="false"]
+    > .responsive-sidebar-shell__frame
+    > .responsive-sidebar-shell__sidebar {
     visibility: hidden;
     opacity: 0;
-    transform: translate(-50%, calc(var(--sigvelo-spacing-2) * -1)) scale(0.98);
+    translate: -50% calc(var(--sigvelo-motion-distance-sm) * -1);
+    scale: 0.97;
+    transition-timing-function: var(--sigvelo-motion-ease-exit);
   }
 
   .responsive-sidebar-shell__main {
     transition: none;
   }
 
-  .responsive-sidebar-shell__frame[data-sidebar-open="true"] .responsive-sidebar-shell__main {
+  .responsive-sidebar-shell[data-sidebar-open="true"]
+    > .responsive-sidebar-shell__frame
+    > .responsive-sidebar-shell__main {
     pointer-events: none;
   }
 
-  .responsive-sidebar-shell__frame[data-sidebar-open="true"] .responsive-sidebar-shell__peek {
+  .responsive-sidebar-shell[data-sidebar-open="true"]
+    > .responsive-sidebar-shell__frame
+    > .responsive-sidebar-shell__peek {
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
@@ -161,9 +165,3 @@
     outline-offset: -0.25rem;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .responsive-sidebar-shell__sidebar {
-    transition: none;
-  }
-}

package/dist/styles/scroll-area.css

@@ -4,12 +4,17 @@
 }
 
 .scroll-area__viewport {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   overflow: auto;
   scrollbar-width: none;
 }
 
+.scroll-area__viewport:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: -2px;
+}
+
 .scroll-area__viewport::-webkit-scrollbar {
   display: none;
 }
@@ -17,30 +22,41 @@
 .scroll-area__scrollbar {
   position: absolute;
   display: flex;
-  padding: 2px;
+  padding: var(--sigvelo-spacing-0-5);
   background-color: transparent;
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
   user-select: none;
   touch-action: none;
 }
 
+.scroll-area__scrollbar:is([data-hovering], [data-scrolling]) {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.scroll-area__scrollbar[data-scrolling] {
+  transition-duration: 0ms;
+}
+
 .scroll-area__scrollbar:hover {
   background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 50%);
 }
 
 .scroll-area__scrollbar[data-orientation="vertical"] {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 10px;
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: var(--sigvelo-spacing-2-5);
   flex-direction: column;
 }
 
 .scroll-area__scrollbar[data-orientation="horizontal"] {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 10px;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: var(--sigvelo-spacing-2-5);
   flex-direction: row;
 }
 
@@ -48,7 +64,8 @@
   flex: 1;
   background-color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 70%);
   border-radius: var(--sigvelo-radius-full);
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .scroll-area__thumb:hover {
@@ -61,7 +78,7 @@
 
 .scroll-area__corner {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
   background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 50%);
 }

package/dist/styles/search-field.css

@@ -0,0 +1,21 @@
+.search-field__control {
+  position: relative;
+}
+
+.search-field__icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--sigvelo-spacing-2);
+  z-index: 1;
+  inline-size: var(--sigvelo-recipe-control-icon-size);
+  block-size: var(--sigvelo-recipe-control-icon-size);
+  translate: 0 -50%;
+  color: var(--sigvelo-color-text-muted);
+  pointer-events: none;
+}
+
+.search-field__input {
+  padding-inline-start: calc(
+    var(--sigvelo-spacing-2) + var(--sigvelo-recipe-control-icon-size) + var(--sigvelo-spacing-1-5)
+  );
+}

package/dist/styles/select.css

@@ -13,14 +13,14 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--sigvelo-recipe-control-gap);
-  width: 100%;
+  inline-size: 100%;
   cursor: pointer;
 }
 
 .select__trigger > [data-slot="select-value"] {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -34,27 +34,34 @@
   opacity: 0.7;
 }
 
+.select__icon > svg {
+  inline-size: var(--sigvelo-recipe-control-icon-size);
+  block-size: var(--sigvelo-recipe-control-icon-size);
+}
+
 .select__trigger--sm {
   --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
   --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
+  --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-sm);
 }
 
 .select__popup {
   --sigvelo-recipe-surface-padding: 0;
+  --sigvelo-recipe-popup-min-inline-size: 8rem;
 
-  min-width: 8rem;
+  min-inline-size: var(--sigvelo-recipe-popup-min-inline-size);
   overflow: hidden;
 }
 
 .select__list {
-  padding: 0.25rem;
+  padding: var(--sigvelo-spacing-1);
 }
 
 .select__option {
   position: relative;
-  width: 100%;
-  padding-inline: var(--sigvelo-spacing-3) 2rem;
+  inline-size: 100%;
+  padding-inline: var(--sigvelo-spacing-3) var(--sigvelo-control-height-sm);
 }
 
 .select__option[data-selected] {
@@ -64,16 +71,16 @@
 
 .select__item-indicator {
   position: absolute;
-  inset-inline-end: 0.5rem;
+  inset-inline-end: var(--sigvelo-spacing-2);
   display: flex;
-  width: 0.875rem;
-  height: 0.875rem;
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
   align-items: center;
   justify-content: center;
 }
 
 .select__option-group {
-  padding: 0.25rem 0;
+  padding: var(--sigvelo-spacing-1) 0;
 }
 
 .select__group-label {
@@ -84,6 +91,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 1.5rem;
+  min-block-size: var(--sigvelo-spacing-6);
   color: var(--sigvelo-color-text-muted);
 }

package/dist/styles/slider.css

@@ -1,15 +1,19 @@
 .slider {
+  --sigvelo-recipe-slider-control-size: var(--sigvelo-spacing-5);
+  --sigvelo-recipe-slider-track-size: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-slider-min-length: 11rem;
+
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
 }
 
 .slider[data-orientation="vertical"] {
-  width: auto;
-  height: 100%;
-  min-height: 11rem;
+  inline-size: auto;
+  block-size: 100%;
+  min-block-size: var(--sigvelo-recipe-slider-min-length);
 }
 
 .slider__output {
@@ -24,17 +28,17 @@
 .slider__control {
   display: flex;
   align-items: center;
-  width: 100%;
-  height: 1.25rem;
+  inline-size: 100%;
+  block-size: var(--sigvelo-recipe-slider-control-size);
   touch-action: none;
   cursor: pointer;
 }
 
 .slider[data-orientation="vertical"] .slider__control {
   justify-content: center;
-  width: 1.25rem;
-  height: 100%;
-  min-height: 11rem;
+  inline-size: var(--sigvelo-recipe-slider-control-size);
+  block-size: 100%;
+  min-block-size: var(--sigvelo-recipe-slider-min-length);
 }
 
 .slider[data-disabled] .slider__control {
@@ -45,16 +49,16 @@
   position: relative;
   display: flex;
   align-items: center;
-  width: 100%;
-  height: 0.5rem;
+  inline-size: 100%;
+  block-size: var(--sigvelo-recipe-slider-track-size);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-full);
 }
 
 .slider[data-orientation="vertical"] .slider__track {
   justify-content: center;
-  width: 0.5rem;
-  height: 100%;
+  inline-size: var(--sigvelo-recipe-slider-track-size);
+  block-size: 100%;
 }
 
 .slider[data-disabled] .slider__track {
@@ -62,33 +66,29 @@
 }
 
 .slider__indicator {
-  height: 100%;
+  block-size: 100%;
   background-color: var(--sigvelo-color-primary-bg);
   border-radius: var(--sigvelo-radius-full);
 }
 
 .slider[data-orientation="vertical"] .slider__indicator {
-  width: 100%;
-  height: auto;
+  inline-size: 100%;
+  block-size: auto;
 }
 
 .slider__thumb {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
+  inline-size: var(--sigvelo-recipe-slider-control-size);
+  block-size: var(--sigvelo-recipe-slider-control-size);
   background-color: var(--sigvelo-color-canvas);
   border: 2px solid var(--sigvelo-color-primary-bg);
   border-radius: var(--sigvelo-radius-full);
   cursor: grab;
   transition:
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.slider__thumb:hover {
-  transform: scale(1.1);
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .slider__thumb[data-dragging] {
@@ -104,7 +104,3 @@
   cursor: not-allowed;
   opacity: var(--sigvelo-recipe-disabled-opacity);
 }
-
-.slider[data-disabled] .slider__thumb:hover {
-  transform: none;
-}

package/dist/styles/sources.css

@@ -1,11 +1,3 @@
-.sources {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-}
-
 .sources__trigger-label {
   display: inline-flex;
   align-items: center;
@@ -38,8 +30,8 @@
   border-radius: var(--sigvelo-radius-sm);
   text-decoration: none;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .sources__link:hover {
@@ -63,7 +55,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-0-5);
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .sources__link-title {

package/dist/styles/stepper.css

@@ -1,15 +1,20 @@
 .stepper {
+  --sigvelo-recipe-stepper-indicator-size: var(--sigvelo-control-height-xs);
+  --sigvelo-recipe-stepper-separator-offset: calc(
+    (var(--sigvelo-recipe-stepper-indicator-size) - var(--sigvelo-spacing-0-5)) / 2
+  );
+
   display: grid;
-  width: 100%;
-  gap: 1rem;
+  inline-size: 100%;
+  gap: var(--sigvelo-spacing-4);
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
 
 .stepper__nav {
   display: flex;
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
 }
 
 .stepper__nav[data-orientation="horizontal"] {
@@ -24,7 +29,7 @@
 
 .stepper__item {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   align-items: center;
   flex: 1 1 0;
 }
@@ -34,19 +39,19 @@
 }
 
 .stepper__nav[data-orientation="vertical"] .stepper__item {
-  width: 100%;
+  inline-size: 100%;
   flex: 0 0 auto;
   flex-direction: column;
   align-items: flex-start;
 }
 
 .stepper__nav[data-orientation="vertical"] .stepper__trigger {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .stepper__trigger {
   display: inline-flex;
-  min-width: 0;
+  min-inline-size: 0;
   align-items: center;
   gap: var(--sigvelo-spacing-2-5);
   padding: 0;
@@ -71,8 +76,8 @@
 
 .stepper__indicator {
   display: inline-flex;
-  inline-size: 1.75rem;
-  block-size: 1.75rem;
+  inline-size: var(--sigvelo-recipe-stepper-indicator-size);
+  block-size: var(--sigvelo-recipe-stepper-indicator-size);
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
@@ -87,10 +92,10 @@
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-full);
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .stepper__indicator[data-state="active"],
@@ -120,13 +125,14 @@
 .stepper__separator {
   display: block;
   block-size: var(--sigvelo-spacing-0-5);
-  min-inline-size: 2rem;
+  min-inline-size: var(--sigvelo-control-height-sm);
   flex: 1 1 auto;
-  margin-block: 0.8125rem;
-  margin-inline: 0.5rem;
+  margin-block: var(--sigvelo-recipe-stepper-separator-offset);
+  margin-inline: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-full);
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .stepper__separator[data-state="completed"] {
@@ -141,10 +147,10 @@
 .stepper__nav[data-orientation="vertical"] .stepper__separator {
   inline-size: var(--sigvelo-spacing-0-5);
   min-inline-size: 0;
-  block-size: 2.25rem;
+  block-size: var(--sigvelo-control-height-md);
   flex: 0 0 auto;
-  margin-block: 0.25rem;
-  margin-inline-start: 0.8125rem;
+  margin-block: var(--sigvelo-spacing-1);
+  margin-inline-start: var(--sigvelo-recipe-stepper-separator-offset);
   margin-inline-end: 0;
 }
 
@@ -161,20 +167,20 @@
 }
 
 .stepper__description {
-  margin-block-start: 0.1875rem;
+  margin-block-start: calc(var(--sigvelo-spacing-1) - var(--sigvelo-border-width));
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
   line-height: 1.35;
 }
 
 .stepper__panel {
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
 }
 
 .stepper__content {
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
 }
 
 .stepper__content[data-spacing="compact"],
@@ -212,6 +218,10 @@
   }
 }
 
+:root[data-motion="reduce"] .stepper__indicator[data-loading] .stepper__indicator-content {
+  animation: none;
+}
+
 @media (forced-colors: active) {
   .stepper__indicator {
     border-color: ButtonText;