@mcp-b/react-components 0.40.0 → 0.42.0

package/dist/styles/badge.css

@@ -1,120 +0,0 @@
-.badge {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sigvelo-spacing-1);
-  inline-size: fit-content;
-  overflow: hidden;
-  padding-block: var(--sigvelo-spacing-0-5);
-  padding-inline: var(--sigvelo-spacing-2);
-  font-family: inherit;
-  font-size: var(--sigvelo-text-xs);
-  font-weight: var(--sigvelo-font-weight-bold);
-  line-height: var(--sigvelo-leading-compact);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) transparent;
-  border-radius: var(--sigvelo-radius-full);
-  white-space: nowrap;
-  transition:
-    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    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);
-}
-
-.badge:where(a, button) {
-  text-decoration: none;
-}
-
-.badge:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
-.badge:is([aria-invalid="true"], [data-invalid]) {
-  border-color: var(--sigvelo-color-danger-bg);
-}
-
-.badge > svg {
-  flex-shrink: 0;
-  inline-size: var(--sigvelo-spacing-3);
-  block-size: var(--sigvelo-spacing-3);
-  pointer-events: none;
-}
-
-.badge--sm {
-  padding-block: calc(var(--sigvelo-spacing-0-5) / 2);
-  padding-inline: var(--sigvelo-spacing-1-5);
-  font-size: var(--sigvelo-text-3xs);
-}
-
-/* Normal appearance */
-
-.badge--normal.badge--primary {
-  background-color: var(--sigvelo-color-primary-bg);
-  color: var(--sigvelo-color-primary-text-on-bg);
-}
-
-.badge--normal.badge--neutral {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.badge--normal.badge--success {
-  background-color: var(--sigvelo-color-success-bg);
-  color: var(--sigvelo-color-success-text-on-bg);
-}
-
-.badge--normal.badge--warning {
-  background-color: var(--sigvelo-color-warning-bg);
-  color: var(--sigvelo-color-warning-text-on-bg);
-}
-
-.badge--normal.badge--destructive {
-  background-color: var(--sigvelo-color-danger-bg);
-  color: var(--sigvelo-color-danger-text-on-bg);
-}
-
-/* Outline appearance */
-
-.badge--outline {
-  background-color: transparent;
-  color: var(--sigvelo-color-text);
-  border-color: var(--sigvelo-color-neutral-border-muted);
-}
-
-/* Ghost appearance */
-
-.badge--ghost {
-  background-color: transparent;
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.badge--ghost:where(a, button):hover {
-  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
-}
-
-/* Link appearance */
-
-.badge--link {
-  background-color: transparent;
-  color: var(--sigvelo-color-primary-text);
-  text-underline-offset: 4px;
-}
-
-.badge--link:where(a, button):hover {
-  text-decoration: underline;
-}
-
-@media (forced-colors: active) {
-  .badge {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
-  }
-
-  .badge--ghost,
-  .badge--link {
-    border-color: transparent;
-  }
-}

package/dist/styles/shell.css

@@ -1,122 +0,0 @@
-/* Shell Component */
-.shell {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 25rem;
-  border-radius: var(--sigvelo-radius-md);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  background: var(--sigvelo-color-surface-raised);
-  overflow: hidden;
-}
-
-.shell__header {
-  display: flex;
-  align-items: center;
-  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4);
-  background: var(--sigvelo-color-surface-sunken);
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.shell__heading {
-  margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text);
-}
-
-.shell__body {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  position: relative;
-}
-
-/* Action Bar */
-.shell__action-bar {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sigvelo-spacing-1);
-  padding: var(--sigvelo-spacing-2);
-  background: var(--sigvelo-color-surface-sunken);
-  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.shell__action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sigvelo-spacing-10);
-  height: var(--sigvelo-spacing-10);
-  padding: 0;
-  border: none;
-  border-radius: var(--sigvelo-radius-md);
-  background: transparent;
-  color: var(--sigvelo-color-text-muted);
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
-}
-
-.shell__action:hover {
-  background: var(--sigvelo-color-surface-sunken);
-  color: var(--sigvelo-color-text);
-}
-
-.shell__action--active {
-  background: var(--sigvelo-color-primary-bg);
-  color: var(--sigvelo-color-primary-text-on-bg);
-}
-
-.shell__action--active:hover {
-  background: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
-  color: var(--sigvelo-color-primary-text-on-bg);
-}
-
-.shell__action svg {
-  width: var(--sigvelo-spacing-5);
-  height: var(--sigvelo-spacing-5);
-}
-
-/* Panel */
-.shell__panel {
-  display: flex;
-  flex-direction: column;
-  width: 16.25rem;
-  max-width: 100%;
-  background: var(--sigvelo-color-surface-raised);
-  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  overflow: hidden;
-}
-
-.shell__panel[hidden] {
-  display: none;
-}
-
-.shell__panel-heading {
-  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4);
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-bold);
-  color: var(--sigvelo-color-text);
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.shell__panel-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--sigvelo-spacing-4);
-}
-
-/* Content */
-.shell__content {
-  flex: 1;
-  min-width: 0;
-  position: relative;
-  overflow: hidden;
-}

package/dist/styles/status-pill.css

@@ -1,39 +0,0 @@
-/*
- * The chip itself is `.badge`. Only the indicator lives here.
- */
-.status-pill__dot {
-  inline-size: var(--sigvelo-spacing-1-5);
-  block-size: var(--sigvelo-spacing-1-5);
-  flex-shrink: 0;
-  border-radius: var(--sigvelo-radius-circle);
-  /* currentColor, so the dot follows whichever badge color it was given rather
-     than needing a matching set of its own. */
-  background-color: currentColor;
-}
-
-.status-pill[data-busy] .status-pill__dot {
-  animation: sigvelo-status-pulse var(--sigvelo-motion-duration-pulse) ease-in-out infinite;
-}
-
-@keyframes sigvelo-status-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.4;
-  }
-}
-
-/* The dot stays; only its breathing stops. A still dot still reads as a state
-   indicator, which is the part carrying meaning. */
-@media (prefers-reduced-motion: reduce) {
-  .status-pill[data-busy] .status-pill__dot {
-    animation: none;
-  }
-}
-
-:root[data-motion="reduce"] .status-pill[data-busy] .status-pill__dot {
-  animation: none;
-}