@mcp-b/react-components 0.1.1

package/dist/styles/input.css

@@ -0,0 +1,34 @@
+.input {
+  display: flex;
+  width: 100%;
+  height: var(--sigvelo-form-control-height-md);
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: var(--sigvelo-form-control-font-size-md);
+  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);
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.input::placeholder {
+  color: var(--sigvelo-text-muted);
+}
+
+.input:focus-visible {
+  outline: none;
+  border-color: var(--sigvelo-focus-color);
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px color-mix(in oklab, var(--sigvelo-focus-color), transparent 80%);
+}
+
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/styles/label.css

@@ -0,0 +1,12 @@
+.label {
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1;
+  color: var(--sigvelo-text-body);
+}
+
+.label[data-disabled] {
+  color: var(--sigvelo-text-muted);
+  cursor: not-allowed;
+}

package/dist/styles/menu.css

@@ -0,0 +1,228 @@
+.menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  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);
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease;
+}
+
+.menu__trigger:hover {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.menu__trigger:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+}
+
+.menu__trigger[data-popup-open] {
+  background-color: var(--sigvelo-neutral-fill-softer);
+}
+
+.menu__positioner {
+  z-index: 50;
+  outline: none;
+}
+
+.menu__popup {
+  min-width: 10rem;
+  padding: 0.25rem;
+  font-family: var(--sigvelo-font-family);
+  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);
+  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%);
+  outline: none;
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+.menu__popup[data-starting-style],
+.menu__popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.menu__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  color: var(--sigvelo-text-body);
+  border-radius: var(--sigvelo-border-radius-sm);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color 100ms ease;
+}
+
+.menu__item[data-highlighted] {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.menu__item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.menu__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.menu__group-label {
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-muted);
+}
+
+.menu__arrow {
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: var(--sigvelo-background-color);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+  transform: rotate(45deg);
+}
+
+.menu__arrow[data-side="top"] {
+  border-top: none;
+  border-left: none;
+}
+
+.menu__arrow[data-side="bottom"] {
+  border-bottom: none;
+  border-right: none;
+}
+
+.menu__arrow[data-side="left"] {
+  border-bottom: none;
+  border-left: none;
+}
+
+.menu__arrow[data-side="right"] {
+  border-top: none;
+  border-right: none;
+}
+
+.menu__separator {
+  height: 1px;
+  margin: 0.25rem 0;
+  background-color: var(--sigvelo-neutral-stroke-soft);
+}
+
+.menu__radio-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.menu__radio-item,
+.menu__checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  color: var(--sigvelo-text-body);
+  border-radius: var(--sigvelo-border-radius-sm);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color 100ms ease;
+}
+
+.menu__radio-item[data-highlighted],
+.menu__checkbox-item[data-highlighted] {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.menu__radio-item[data-disabled],
+.menu__checkbox-item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.menu__radio-indicator,
+.menu__checkbox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+}
+
+.menu__radio-indicator::before {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: currentColor;
+  border-radius: 50%;
+}
+
+.menu__checkbox-indicator::before {
+  content: "";
+  width: 0.625rem;
+  height: 0.375rem;
+  border-inline-start: 2px solid currentColor;
+  border-block-end: 2px solid currentColor;
+  transform: rotate(-45deg) translateY(-1px);
+}
+
+.menu__submenu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  color: var(--sigvelo-text-body);
+  border-radius: var(--sigvelo-border-radius-sm);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color 100ms ease;
+}
+
+.menu__submenu-trigger[data-highlighted] {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.menu__submenu-trigger::after {
+  content: "";
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-inline-start: 6px solid currentColor;
+}

package/dist/styles/menubar.css

@@ -0,0 +1,137 @@
+.menubar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  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);
+}
+
+.menubar__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: 0.375rem;
+  padding-inline: 0.75rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-body);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--sigvelo-border-radius-sm);
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+.menubar__trigger:hover {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.menubar__trigger:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+}
+
+.menubar__trigger[data-popup-open] {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.menubar__positioner {
+  z-index: 50;
+}
+
+.menubar__popup {
+  min-width: 180px;
+  padding: 0.25rem;
+  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: menubar-popup-enter 150ms ease;
+}
+
+.menubar__popup[data-ending-style] {
+  animation: menubar-popup-exit 100ms ease;
+}
+
+@keyframes menubar-popup-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes menubar-popup-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+.menubar__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  padding-block: 0.375rem;
+  padding-inline: 0.5rem;
+  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;
+}
+
+.menubar__item:hover,
+.menubar__item:focus,
+.menubar__item[data-highlighted] {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.menubar__item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.menubar__separator {
+  height: 1px;
+  margin: 0.25rem 0;
+  background-color: var(--sigvelo-neutral-stroke-soft);
+}
+
+.menubar__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.menubar__group-label {
+  padding-block: 0.375rem;
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-muted);
+}

package/dist/styles/message.css

@@ -0,0 +1,120 @@
+.message {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+  font-family: var(--sigvelo-font-family);
+  color: var(--sigvelo-text-body);
+}
+
+.message[data-from="user"] {
+  align-items: flex-end;
+}
+
+.message[data-from="assistant"],
+.message[data-from="system"],
+.message[data-from="tool"] {
+  align-items: flex-start;
+}
+
+.message__content {
+  display: inline-block;
+  max-width: min(42rem, 85%);
+  padding-block: 0.625rem;
+  padding-inline: 0.875rem;
+  border-radius: var(--sigvelo-border-radius-md);
+  font-size: 0.875rem;
+  line-height: 1.55;
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-text-body);
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+
+.message[data-from="user"] .message__content {
+  background-color: var(--sigvelo-primary-fill);
+  color: var(--sigvelo-primary-fill-contrast);
+}
+
+.message[data-from="assistant"] .message__content {
+  display: block;
+  width: min(42rem, 85%);
+  max-width: 100%;
+  background-color: transparent;
+  padding-inline: 0;
+}
+
+.message[data-from="system"] .message__content {
+  background-color: transparent;
+  color: var(--sigvelo-text-muted);
+  font-style: italic;
+}
+
+.message__content > * + * {
+  margin-block-start: 0.5rem;
+}
+
+.message__content :where(pre) {
+  overflow: auto;
+}
+
+.message__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0;
+  color: var(--sigvelo-text-muted);
+}
+
+.message[data-from="user"] .message__actions {
+  align-self: flex-end;
+}
+
+.message__action {
+  color: var(--sigvelo-text-muted);
+}
+
+.message__action:hover:not([data-disabled]) {
+  color: var(--sigvelo-text-body);
+}
+
+.message__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.message__branch {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.message__branch-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.message__branch-selector {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  color: var(--sigvelo-text-muted);
+}
+
+.message__branch-page {
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--sigvelo-text-muted);
+  padding-inline: 0.375rem;
+  user-select: none;
+}
+
+@media (forced-colors: active) {
+  .message__content {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/styles/meter.css

@@ -0,0 +1,36 @@
+.meter {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.meter__track {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+  background-color: var(--sigvelo-neutral-fill-softer);
+  border-radius: var(--sigvelo-border-radius-pill);
+}
+
+.meter__indicator {
+  height: 100%;
+  background-color: var(--sigvelo-primary-fill-mid);
+  border-radius: var(--sigvelo-border-radius-pill);
+  transition: width 300ms ease;
+}
+
+.meter__label {
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-body);
+}
+
+.meter__value {
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-muted);
+}