@mcp-elements/css 0.1.0

package/components/mcp-server-status.css

@@ -0,0 +1,56 @@
+@layer components {
+  .mcpe-mcp-server-status {
+    @apply inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-medium;
+    border: 1px solid transparent;
+  }
+
+  .mcpe-mcp-server-status-dot {
+    @apply h-2 w-2 rounded-full shrink-0;
+  }
+
+  /* Connected */
+  .mcpe-mcp-server-status-connected {
+    background-color: oklch(0.72 0.17 145 / 0.12);
+    border-color: oklch(0.72 0.17 145 / 0.3);
+    color: oklch(0.72 0.17 145);
+  }
+  .mcpe-mcp-server-status-connected .mcpe-mcp-server-status-dot {
+    background-color: oklch(0.72 0.17 145);
+  }
+
+  /* Connecting */
+  .mcpe-mcp-server-status-connecting {
+    background-color: oklch(0.82 0.18 85 / 0.12);
+    border-color: oklch(0.82 0.18 85 / 0.3);
+    color: oklch(0.82 0.18 85);
+  }
+  .mcpe-mcp-server-status-connecting .mcpe-mcp-server-status-dot {
+    background-color: oklch(0.82 0.18 85);
+    animation: mcpe-pulse 1.5s ease-in-out infinite;
+  }
+
+  /* Disconnected */
+  .mcpe-mcp-server-status-disconnected {
+    background-color: oklch(0.5 0 0 / 0.08);
+    border-color: oklch(0.5 0 0 / 0.2);
+    color: oklch(0.55 0.012 286);
+  }
+  .mcpe-mcp-server-status-disconnected .mcpe-mcp-server-status-dot {
+    background-color: oklch(0.55 0.012 286);
+  }
+
+  /* Error */
+  .mcpe-mcp-server-status-error {
+    background-color: oklch(0.62 0.22 25 / 0.12);
+    border-color: oklch(0.62 0.22 25 / 0.3);
+    color: oklch(0.62 0.22 25);
+  }
+  .mcpe-mcp-server-status-error .mcpe-mcp-server-status-dot {
+    background-color: oklch(0.62 0.22 25);
+  }
+
+  @keyframes mcpe-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+}

package/components/mcp-tool-call.css

@@ -0,0 +1,96 @@
+@layer components {
+  .mcpe-mcp-tool-call {
+    @apply rounded-xl p-4 flex flex-col gap-3;
+    background-color: var(--color-card);
+    border: 1px solid var(--color-border);
+    color: var(--color-card-foreground);
+  }
+
+  .mcpe-mcp-tool-call-header {
+    @apply flex items-center justify-between;
+  }
+
+  .mcpe-mcp-tool-call-name {
+    @apply flex items-center gap-2;
+  }
+
+  .mcpe-mcp-tool-call-icon {
+    @apply flex h-7 w-7 items-center justify-center rounded-md font-mono text-xs font-semibold;
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .mcpe-mcp-tool-call-title {
+    @apply font-mono text-sm font-medium;
+  }
+
+  .mcpe-mcp-tool-call-args {
+    @apply rounded-md p-3 font-mono text-xs;
+    background-color: var(--color-muted);
+    border: 1px solid var(--color-border);
+    color: var(--color-muted-foreground);
+    overflow-x: auto;
+  }
+
+  .mcpe-mcp-tool-call-progress {
+    @apply overflow-hidden rounded-full;
+    height: 3px;
+    background-color: var(--color-muted);
+  }
+
+  .mcpe-mcp-tool-call-progress-bar {
+    @apply h-full rounded-full transition-all duration-100;
+    background-color: var(--color-primary);
+  }
+
+  .mcpe-mcp-tool-call-result {
+    @apply rounded-md p-3 text-sm;
+  }
+
+  .mcpe-mcp-tool-call-result-done {
+    background-color: oklch(0.72 0.17 145 / 0.08);
+    border: 1px solid oklch(0.72 0.17 145 / 0.25);
+    color: oklch(0.72 0.17 145);
+  }
+
+  .mcpe-mcp-tool-call-result-error {
+    background-color: oklch(0.62 0.22 25 / 0.08);
+    border: 1px solid oklch(0.62 0.22 25 / 0.25);
+    color: oklch(0.62 0.22 25);
+  }
+
+  .mcpe-mcp-tool-call-footer {
+    @apply flex items-center justify-between;
+  }
+
+  /* Status badges */
+  .mcpe-mcp-tool-call-badge {
+    @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium;
+  }
+
+  .mcpe-mcp-tool-call-badge-idle {
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+  }
+
+  .mcpe-mcp-tool-call-badge-pending,
+  .mcpe-mcp-tool-call-badge-running {
+    background-color: oklch(0.82 0.18 85 / 0.15);
+    color: oklch(0.82 0.18 85);
+  }
+
+  .mcpe-mcp-tool-call-badge-done {
+    background-color: oklch(0.72 0.17 145 / 0.15);
+    color: oklch(0.72 0.17 145);
+  }
+
+  .mcpe-mcp-tool-call-badge-error {
+    background-color: oklch(0.62 0.22 25 / 0.15);
+    color: oklch(0.62 0.22 25);
+  }
+
+  .mcpe-mcp-tool-call-badge-cancelled {
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+  }
+}

package/components/mcp-tool-form.css

@@ -0,0 +1,28 @@
+@layer components {
+  .mcpe-mcp-tool-form {
+    @apply flex flex-col gap-4;
+  }
+
+  .mcpe-mcp-tool-form-field {
+    @apply flex flex-col gap-1.5;
+  }
+
+  .mcpe-mcp-tool-form-label {
+    @apply text-sm font-medium;
+    color: var(--color-foreground);
+  }
+
+  .mcpe-mcp-tool-form-label-required::after {
+    content: ' *';
+    color: var(--color-destructive);
+  }
+
+  .mcpe-mcp-tool-form-help {
+    @apply text-xs;
+    color: var(--color-muted-foreground);
+  }
+
+  .mcpe-mcp-tool-form-submit {
+    @apply mt-2;
+  }
+}

package/components/password-input.css

@@ -0,0 +1,17 @@
+@layer components {
+  .mcpe-password-input-wrapper {
+    @apply relative;
+  }
+  .mcpe-password-input {
+    @apply flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pr-10 text-base
+           shadow-sm transition-colors
+           placeholder:text-muted-foreground
+           focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+           disabled:cursor-not-allowed disabled:opacity-50
+           md:text-sm;
+  }
+  .mcpe-password-toggle {
+    @apply absolute right-0 top-0 flex h-full items-center px-3 text-muted-foreground
+           hover:text-foreground cursor-pointer transition-colors;
+  }
+}

package/components/popover.css

@@ -0,0 +1,5 @@
+@layer components {
+  .mcpe-popover-content {
+    @apply z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none;
+  }
+}

package/components/progress.css

@@ -0,0 +1,8 @@
+@layer components {
+  .mcpe-progress {
+    @apply relative h-2 w-full overflow-hidden rounded-full bg-primary/20;
+  }
+  .mcpe-progress-indicator {
+    @apply h-full w-full flex-1 bg-primary transition-all duration-300 ease-in-out;
+  }
+}

package/components/prompt-input.css

@@ -0,0 +1,30 @@
+@layer components {
+  .mcpe-prompt-input {
+    @apply relative flex flex-col rounded-xl border bg-background shadow-sm
+           focus-within:ring-1 focus-within:ring-ring transition-shadow;
+  }
+  .mcpe-prompt-input-textarea {
+    @apply w-full resize-none border-0 bg-transparent px-4 pt-3 pb-2 text-sm
+           placeholder:text-muted-foreground focus-visible:outline-none;
+  }
+  .mcpe-prompt-input-footer {
+    @apply flex items-center justify-between px-3 pb-2;
+  }
+  .mcpe-prompt-input-actions {
+    @apply flex items-center gap-1;
+  }
+  .mcpe-prompt-input-char-count {
+    @apply text-xs text-muted-foreground tabular-nums;
+  }
+  .mcpe-prompt-input-attachments {
+    @apply flex flex-wrap gap-1.5 px-3 pb-2;
+  }
+  .mcpe-prompt-input-attachment {
+    @apply inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs
+           font-medium text-secondary-foreground;
+  }
+  .mcpe-prompt-input-attachment-remove {
+    @apply ml-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full
+           opacity-60 hover:opacity-100 transition-opacity cursor-pointer;
+  }
+}

package/components/select.css

@@ -0,0 +1,52 @@
+@layer components {
+  /* Native <select> styling */
+  .mcpe-select {
+    @apply flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md
+           border border-input px-3 py-2 text-sm shadow-sm appearance-none
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background
+           disabled:cursor-not-allowed disabled:opacity-50;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    padding-right: 2rem;
+  }
+  .mcpe-select option {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+
+  .mcpe-select-trigger {
+    @apply flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md
+           border border-input px-3 py-2 text-sm shadow-sm
+           ring-offset-background
+           placeholder:text-muted-foreground
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background
+           disabled:cursor-not-allowed disabled:opacity-50
+           [&>span]:line-clamp-1;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+  .mcpe-select-content {
+    @apply relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border
+           bg-popover text-popover-foreground shadow-md;
+  }
+  .mcpe-select-viewport {
+    @apply p-1;
+  }
+  .mcpe-select-item {
+    @apply relative flex w-full cursor-default select-none items-center rounded-sm
+           py-1.5 pl-2 pr-8 text-sm outline-none transition-colors;
+  }
+  .mcpe-select-item-active {
+    @apply bg-accent text-accent-foreground;
+  }
+  .mcpe-select-item-selected {
+    @apply font-medium;
+  }
+  .mcpe-select-item[aria-disabled='true'] {
+    @apply pointer-events-none opacity-50;
+  }
+}

package/components/separator.css

@@ -0,0 +1,11 @@
+@layer components {
+  .mcpe-separator {
+    @apply shrink-0 bg-border;
+  }
+  .mcpe-separator-horizontal {
+    @apply h-px w-full;
+  }
+  .mcpe-separator-vertical {
+    @apply h-full w-px;
+  }
+}

package/components/skeleton.css

@@ -0,0 +1,10 @@
+@layer components {
+  .mcpe-skeleton {
+    @apply animate-pulse rounded-md;
+    background-color: var(--color-muted-foreground);
+    opacity: 0.18;
+  }
+  [data-theme='dark'] .mcpe-skeleton {
+    opacity: 0.28;
+  }
+}

package/components/source-card.css

@@ -0,0 +1,28 @@
+@layer components {
+  .mcpe-source-cards {
+    @apply grid grid-cols-2 gap-2;
+  }
+  .mcpe-source-card {
+    @apply flex gap-3 items-start p-3 rounded-lg border bg-card
+           hover:bg-accent/50 transition-colors no-underline;
+  }
+  .mcpe-source-card-favicon {
+    @apply h-4 w-4 rounded shrink-0 mt-0.5;
+  }
+  .mcpe-source-card-body {
+    @apply flex-1 min-w-0;
+  }
+  .mcpe-source-card-title {
+    @apply text-sm font-medium truncate text-foreground transition-colors;
+  }
+  .mcpe-source-card:hover .mcpe-source-card-title {
+    @apply text-primary;
+  }
+  .mcpe-source-card-domain {
+    @apply text-xs text-muted-foreground truncate;
+  }
+  .mcpe-source-card-index {
+    @apply text-xs font-medium text-muted-foreground bg-muted rounded-full
+           w-5 h-5 flex items-center justify-center shrink-0;
+  }
+}

package/components/streaming-text.css

@@ -0,0 +1,53 @@
+@layer components {
+  .mcpe-streaming-text-cursor::after {
+    content: '▍';
+    @apply ml-0.5 text-primary;
+    animation: mcpe-cursor-blink 1s step-end infinite;
+  }
+  .mcpe-streaming-text-fade-in {
+    animation: mcpe-stream-fade-in 0.3s ease both;
+  }
+  .mcpe-streaming-text-word {
+    animation: mcpe-stream-word 0.25s ease both;
+  }
+  .mcpe-streaming-text-line {
+    animation: mcpe-stream-line 0.4s ease both;
+  }
+  .mcpe-streaming-text-skeleton {
+    @apply space-y-2;
+  }
+  .mcpe-streaming-text-skeleton-line {
+    @apply h-4 rounded bg-muted;
+    background-size: 200% 100%;
+    background-image: linear-gradient(90deg, transparent 25%, oklch(0.5 0 0 / 0.08) 50%, transparent 75%);
+    animation: mcpe-skeleton-shimmer 1.5s ease-in-out infinite;
+  }
+  .mcpe-streaming-text-skeleton-line:last-child {
+    @apply w-3/5;
+  }
+}
+
+@keyframes mcpe-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+@keyframes mcpe-stream-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes mcpe-stream-word {
+  from { opacity: 0; filter: blur(2px); }
+  to { opacity: 1; filter: blur(0); }
+}
+
+@keyframes mcpe-stream-line {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes mcpe-skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}

package/components/suggestion-chips.css

@@ -0,0 +1,23 @@
+@layer components {
+  .mcpe-suggestion-chips {
+    @apply flex gap-2 overflow-x-auto;
+    scrollbar-width: none;
+  }
+  .mcpe-suggestion-chips::-webkit-scrollbar {
+    display: none;
+  }
+  .mcpe-suggestion-chip {
+    @apply inline-flex items-center px-3 py-1.5 rounded-full text-sm whitespace-nowrap
+           cursor-pointer transition-all active:scale-95 shrink-0
+           focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring;
+  }
+  .mcpe-suggestion-chip-default {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+  }
+  .mcpe-suggestion-chip-primary {
+    @apply bg-primary/10 text-primary hover:bg-primary/20;
+  }
+  .mcpe-suggestion-chip-outline {
+    @apply border border-input hover:bg-accent hover:text-accent-foreground;
+  }
+}

package/components/switch.css

@@ -0,0 +1,30 @@
+@layer components {
+  .mcpe-switch {
+    @apply inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full
+           border-2 border-transparent shadow-sm transition-colors
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background
+           disabled:cursor-not-allowed disabled:opacity-50;
+  }
+  .mcpe-switch[aria-checked='false'] {
+    background-color: var(--color-muted-foreground);
+    opacity: 0.55;
+  }
+  .mcpe-switch[aria-checked='true'] {
+    @apply bg-primary;
+    opacity: 1;
+  }
+  .mcpe-switch-thumb {
+    @apply pointer-events-none block h-4 w-4 rounded-full transition-transform;
+    background-color: oklch(1 0 0);
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2), 0 1px 3px 0 rgb(0 0 0 / 0.15);
+  }
+  [data-theme='dark'] .mcpe-switch[aria-checked='true'] .mcpe-switch-thumb {
+    background-color: oklch(0.18 0 0);
+  }
+  .mcpe-switch[aria-checked='false'] .mcpe-switch-thumb {
+    @apply translate-x-0;
+  }
+  .mcpe-switch[aria-checked='true'] .mcpe-switch-thumb {
+    @apply translate-x-4;
+  }
+}

package/components/tabs.css

@@ -0,0 +1,18 @@
+@layer components {
+  .mcpe-tabs-list {
+    @apply inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground;
+  }
+  .mcpe-tabs-trigger {
+    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1
+           text-sm font-medium ring-offset-background transition-all cursor-pointer active:scale-[0.98]
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+           disabled:pointer-events-none disabled:opacity-50;
+  }
+  .mcpe-tabs-trigger-active {
+    @apply bg-background text-foreground shadow;
+  }
+  .mcpe-tabs-content {
+    @apply mt-2 ring-offset-background
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+  }
+}

package/components/textarea.css

@@ -0,0 +1,12 @@
+@layer components {
+  .mcpe-textarea {
+    @apply flex min-h-[60px] w-full rounded-md border border-input px-3 py-2
+           text-base shadow-sm
+           placeholder:text-muted-foreground
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background
+           disabled:cursor-not-allowed disabled:opacity-50
+           md:text-sm;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+}

package/components/toast.css

@@ -0,0 +1,46 @@
+@layer components {
+  .mcpe-toaster {
+    @apply fixed z-[100] flex flex-col gap-2 p-4;
+  }
+  .mcpe-toaster-top-right {
+    @apply top-0 right-0;
+  }
+  .mcpe-toaster-bottom-right {
+    @apply bottom-0 right-0;
+  }
+  .mcpe-toaster-top-left {
+    @apply top-0 left-0;
+  }
+  .mcpe-toaster-bottom-left {
+    @apply bottom-0 left-0;
+  }
+  .mcpe-toast {
+    @apply pointer-events-auto relative flex w-full items-center justify-between space-x-2
+           overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all
+           bg-background text-foreground;
+  }
+  .mcpe-toast-destructive {
+    @apply border-destructive bg-destructive text-destructive-foreground;
+  }
+  .mcpe-toast-success {
+    @apply border-green-500/50 bg-green-500/10 text-green-600;
+  }
+  .mcpe-toast-title {
+    @apply text-sm font-semibold;
+  }
+  .mcpe-toast-description {
+    @apply text-sm opacity-90;
+  }
+  .mcpe-toast-close {
+    @apply absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity
+           hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none;
+  }
+  .mcpe-toast:hover .mcpe-toast-close {
+    @apply opacity-100;
+  }
+  .mcpe-toast-action {
+    @apply inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent
+           px-3 text-sm font-medium transition-colors hover:bg-secondary
+           focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
+  }
+}

package/components/tooltip.css

@@ -0,0 +1,17 @@
+@keyframes tooltip-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@layer components {
+  .mcpe-tooltip-content {
+    @apply z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md;
+    animation: tooltip-in 150ms ease-out;
+  }
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@mcp-elements/css",
+  "version": "0.1.0",
+  "exports": {
+    "./base.css": "./base.css",
+    "./base": "./base.css",
+    "./components/*.css": "./components/*.css",
+    "./components/*": "./components/*.css",
+    "./themes/*.css": "./themes/*.css",
+    "./themes/*": "./themes/*.css"
+  },
+  "files": [
+    "base.css",
+    "components",
+    "themes"
+  ],
+  "scripts": {
+    "clean": "echo 'nothing to clean'"
+  }
+}

package/themes/dark.css

@@ -0,0 +1,3 @@
+/* Dark theme - activate by adding data-theme="dark" to html element */
+/* Dark theme tokens are already defined in base.css */
+/* This file exists for the CLI theme system */

package/themes/default.css

@@ -0,0 +1,3 @@
+/* Default theme - included in base.css */
+/* This file exists for the CLI theme system */
+@import '../base.css';