@mcp-b/react-components 0.1.1

package/dist/styles/toast.css

@@ -0,0 +1,142 @@
+.toast__viewport {
+  position: fixed;
+  inset-block-end: 1rem;
+  inset-inline-end: 1rem;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 24rem;
+  width: 100%;
+  pointer-events: none;
+}
+
+.toast {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 1rem;
+  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%);
+  pointer-events: auto;
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease;
+}
+
+.toast[data-starting-style],
+.toast[data-ending-style] {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.toast[data-type="success"] {
+  border-inline-start: 4px solid var(--sigvelo-success-fill-mid);
+}
+
+.toast[data-type="error"] {
+  border-inline-start: 4px solid var(--sigvelo-destructive-fill-mid);
+}
+
+.toast[data-type="warning"] {
+  border-inline-start: 4px solid var(--sigvelo-warning-fill-mid);
+}
+
+.toast[data-type="info"] {
+  border-inline-start: 4px solid var(--sigvelo-focus-color);
+}
+
+.toast__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+}
+
+.toast__title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: 1.25;
+  color: var(--sigvelo-text-body);
+}
+
+.toast__description {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--sigvelo-text-muted);
+}
+
+.toast__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: 0.375rem;
+  padding-inline: 0.75rem;
+  margin-block-start: 0.75rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-primary-text-on-mid);
+  background-color: var(--sigvelo-primary-fill-mid);
+  border: none;
+  border-radius: var(--sigvelo-border-radius-sm);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.toast__action:hover {
+  background-color: color-mix(in oklab, var(--sigvelo-primary-fill-mid), transparent 10%);
+}
+
+.toast__action:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+}
+
+.toast__close {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  font-size: 1rem;
+  color: var(--sigvelo-text-muted);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--sigvelo-border-radius-sm);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 150ms ease,
+    background-color 150ms ease;
+}
+
+.toast:hover .toast__close {
+  opacity: 1;
+}
+
+.toast__close:hover {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.toast__close:focus-visible {
+  opacity: 1;
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+}

package/dist/styles/toggle-group.css

@@ -0,0 +1,71 @@
+.toggle-group {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--sigvelo-neutral-fill-softer);
+  border-radius: var(--sigvelo-border-radius-md);
+  padding: 0.25rem;
+  gap: 0.125rem;
+}
+
+.toggle-group--sm {
+  padding: 0.125rem;
+}
+
+.toggle-group--lg {
+  padding: 0.375rem;
+  gap: 0.25rem;
+}
+
+.toggle-group__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.75rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-muted);
+  background-color: transparent;
+  border: none;
+  border-radius: calc(var(--sigvelo-border-radius-md) - 2px);
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.toggle-group--sm .toggle-group__item {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+.toggle-group--lg .toggle-group__item {
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+.toggle-group__item:hover:not([data-disabled]) {
+  color: var(--sigvelo-text-body);
+}
+
+.toggle-group__item:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+  z-index: 1;
+}
+
+.toggle-group__item[data-pressed] {
+  background-color: var(--sigvelo-background-color);
+  color: var(--sigvelo-text-body);
+  box-shadow:
+    0 1px 3px 0 color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
+    0 1px 2px -1px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
+}
+
+.toggle-group__item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/styles/toggle.css

@@ -0,0 +1,44 @@
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  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: transparent;
+  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,
+    color 150ms ease;
+}
+
+.toggle:hover {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.toggle:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+}
+
+.toggle[data-pressed] {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+  border-color: var(--sigvelo-neutral-fill-softer);
+}
+
+.toggle:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}

package/dist/styles/tokens.css

@@ -0,0 +1 @@
+@import "@mcp-b/design-tokens";

package/dist/styles/tool.css

@@ -0,0 +1,180 @@
+.tool {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: var(--sigvelo-font-family);
+  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-paper-color);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-neutral-stroke-softer);
+  border-radius: var(--sigvelo-border-radius-md);
+  overflow: hidden;
+}
+
+.tool__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding-block: 0.625rem;
+  padding-inline: 0.75rem;
+  background-color: transparent;
+  border: none;
+  color: var(--sigvelo-text-body);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color var(--sigvelo-motion-duration-fast)
+    var(--sigvelo-motion-easing-standard);
+}
+
+.tool__header:hover:not([data-disabled]) {
+  background-color: var(--sigvelo-neutral-fill-softer);
+}
+
+.tool__header:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+}
+
+.tool__header-icon {
+  display: inline-flex;
+  color: var(--sigvelo-text-muted);
+  transition: transform var(--sigvelo-motion-duration-medium)
+    var(--sigvelo-motion-easing-emphasized);
+}
+
+.tool__header[data-panel-open] .tool__header-icon {
+  transform: rotate(90deg);
+}
+
+.tool__header-type {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 0.125rem;
+  padding-inline: 0.4375rem;
+  font-family: var(--sigvelo-font-family-code);
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--sigvelo-text-muted);
+  background-color: var(--sigvelo-neutral-fill-softer);
+  border-radius: var(--sigvelo-border-radius-sm);
+}
+
+.tool__header-name {
+  font-family: var(--sigvelo-font-family-code);
+  font-size: 0.8125rem;
+  color: var(--sigvelo-text-body);
+}
+
+.tool__header-title {
+  color: var(--sigvelo-text-muted);
+  font-weight: var(--sigvelo-font-weight-normal);
+}
+
+.tool__header-spacer {
+  flex: 1;
+}
+
+.tool__content {
+  overflow: hidden;
+  transition:
+    height var(--sigvelo-motion-duration-medium) var(--sigvelo-motion-easing-emphasized),
+    opacity var(--sigvelo-motion-duration-fast) var(--sigvelo-motion-easing-standard);
+}
+
+.tool__content[data-closed] {
+  height: 0;
+  opacity: 0;
+}
+
+.tool__content[data-open] {
+  height: var(--collapsible-panel-height);
+  opacity: 1;
+}
+
+.tool__content[data-starting-style],
+.tool__content[data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
+
+.tool__content-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-block: 0.75rem;
+  padding-inline: 0.75rem;
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-neutral-stroke-softer);
+  transition:
+    transform var(--sigvelo-motion-duration-medium) var(--sigvelo-motion-easing-emphasized),
+    opacity var(--sigvelo-motion-duration-fast) var(--sigvelo-motion-easing-standard);
+}
+
+.tool__content[data-closed] .tool__content-inner,
+.tool__content[data-starting-style] .tool__content-inner,
+.tool__content[data-ending-style] .tool__content-inner {
+  transform: translateY(-4px);
+  opacity: 0;
+}
+
+.tool__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-height: 0;
+}
+
+.tool__section > :not(.tool__section-label) {
+  max-height: 20rem;
+  overflow: auto;
+}
+
+.tool__section-label {
+  font-size: 0.6875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--sigvelo-text-muted);
+}
+
+.tool__code-block {
+  min-width: 0;
+}
+
+.tool__code-block .code-block__content,
+.tool__code-block .code-block__content--highlighted pre.shiki,
+.tool__code-block .code-block__content--highlighted pre.shiki code {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.tool__error-text {
+  padding: 0.5rem 0.75rem;
+  font-family: var(--sigvelo-font-family-code);
+  font-size: 0.75rem;
+  color: var(--sigvelo-destructive-text-colorful);
+  background-color: var(--sigvelo-destructive-fill-softer);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-destructive-stroke-softer);
+  border-radius: var(--sigvelo-border-radius-sm);
+  white-space: pre-wrap;
+}
+
+@media (forced-colors: active) {
+  .tool {
+    border: 1px solid CanvasText;
+  }
+
+  .tool__header:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}

package/dist/styles/toolbar.css

@@ -0,0 +1,139 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  container-type: inline-size;
+  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);
+}
+
+.toolbar[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+.toolbar[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.toolbar__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  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;
+}
+
+.toolbar__button:hover {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.toolbar__button:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+}
+
+.toolbar__button[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.toolbar__button[data-pressed] {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.toolbar__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-body);
+  text-decoration: none;
+  border-radius: var(--sigvelo-border-radius-sm);
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+.toolbar__link:hover {
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-neutral-text-on-soft);
+}
+
+.toolbar__link:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+}
+
+.toolbar__group {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.toolbar[data-orientation="vertical"] .toolbar__group {
+  flex-direction: column;
+}
+
+.toolbar__separator {
+  width: 1px;
+  height: 1.5rem;
+  margin-inline: 0.25rem;
+  background-color: var(--sigvelo-neutral-stroke-soft);
+}
+
+.toolbar[data-orientation="vertical"] .toolbar__separator {
+  width: 100%;
+  height: 1px;
+  margin-block: 0.25rem;
+}
+
+.toolbar__input {
+  padding-block: 0.375rem;
+  padding-inline: 0.5rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  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-sm);
+}
+
+.toolbar__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%);
+}
+
+@container (max-width: 20rem) {
+  .toolbar {
+    flex-wrap: wrap;
+  }
+
+  .toolbar__separator {
+    display: none;
+  }
+}

package/dist/styles/tooltip.css

@@ -0,0 +1,49 @@
+.tooltip__popup {
+  z-index: 50;
+  padding-block: 0.375rem;
+  padding-inline: 0.75rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.75rem;
+  line-height: 1.25;
+  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-paper-color);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+  border-radius: var(--sigvelo-border-radius-md);
+  box-shadow: var(--sigvelo-shadow-soft);
+}
+
+.tooltip__popup[data-starting-style],
+.tooltip__popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.tooltip__arrow {
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: var(--sigvelo-paper-color);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+  border-right: none;
+  border-bottom: none;
+  transform: rotate(45deg);
+}
+
+[data-side="top"] .tooltip__arrow {
+  bottom: -0.25rem;
+  transform: rotate(-135deg);
+}
+
+[data-side="bottom"] .tooltip__arrow {
+  top: -0.25rem;
+  transform: rotate(45deg);
+}
+
+[data-side="left"] .tooltip__arrow {
+  right: -0.25rem;
+  transform: rotate(135deg);
+}
+
+[data-side="right"] .tooltip__arrow {
+  left: -0.25rem;
+  transform: rotate(-45deg);
+}