newtui 2.0.0

package/registry/html/components/tabs.css

@@ -0,0 +1,28 @@
+/* newt-ui · Pill Tabs */
+
+.newt-tabs {
+  display: flex;
+  gap: 4px;
+  background: var(--newt-bg-base);
+  padding: 4px;
+  border-radius: var(--newt-radius-md);
+  width: fit-content;
+}
+.newt-tab {
+  padding: 6px 14px;
+  border-radius: var(--newt-radius-sm);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--newt-text-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all var(--newt-duration-fast) var(--newt-ease);
+}
+.newt-tab--active {
+  background: var(--newt-bg-elevated);
+  color: var(--newt-text-primary);
+}
+.newt-tab:hover:not(.newt-tab--active) {
+  color: var(--newt-text-secondary);
+}

package/registry/html/components/tabs.html

@@ -0,0 +1,7 @@
+<div class="newt-tabs" role="tablist">
+  <button class="newt-tab newt-tab--active" role="tab" aria-selected="true">
+    Tab one
+  </button>
+  <button class="newt-tab" role="tab" aria-selected="false">Tab two</button>
+  <button class="newt-tab" role="tab" aria-selected="false">Tab three</button>
+</div>

package/registry/html/components/tabs.js

@@ -0,0 +1,12 @@
+document.querySelectorAll(".newt-tabs").forEach((tabs) => {
+  tabs.addEventListener("click", (e) => {
+    const tab = e.target.closest(".newt-tab")
+    if (!tab) return
+    tabs.querySelectorAll(".newt-tab").forEach((t) => {
+      t.classList.remove("newt-tab--active")
+      t.setAttribute("aria-selected", "false")
+    })
+    tab.classList.add("newt-tab--active")
+    tab.setAttribute("aria-selected", "true")
+  })
+})

package/registry/html/components/timeline.css

@@ -0,0 +1,63 @@
+/* newt-ui · Timeline / Event Log */
+
+.newt-timeline {
+  display: flex;
+  flex-direction: column;
+}
+.newt-timeline__item {
+  display: flex;
+  gap: 12px;
+  position: relative;
+  padding-bottom: 20px;
+}
+.newt-timeline__item:last-child {
+  padding-bottom: 0;
+}
+.newt-timeline__item:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  left: 11px;
+  top: 24px;
+  bottom: 0;
+  width: 2px;
+  background: var(--newt-border);
+}
+.newt-timeline__dot {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--newt-bg-surface);
+  border: 2px solid var(--newt-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  flex-shrink: 0;
+  z-index: 1;
+}
+.newt-timeline__dot--success {
+  border-color: var(--newt-online);
+  color: var(--newt-online);
+}
+.newt-timeline__dot--danger {
+  border-color: var(--newt-dnd);
+  color: var(--newt-dnd);
+}
+.newt-timeline__dot--brand {
+  border-color: var(--newt-brand);
+  color: #b3baff;
+}
+.newt-timeline__content {
+  flex: 1;
+  padding-top: 1px;
+}
+.newt-timeline__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--newt-text-primary);
+}
+.newt-timeline__meta {
+  font-size: 12px;
+  color: var(--newt-text-muted);
+  margin-top: 2px;
+}

package/registry/html/components/timeline.html

@@ -0,0 +1,26 @@
+<div class="newt-timeline">
+  <div class="newt-timeline__item">
+    <div
+      class="newt-timeline__dot newt-timeline__dot--brand"
+      aria-hidden="true"
+    >
+      ↻
+    </div>
+    <div class="newt-timeline__content">
+      <div class="newt-timeline__title">Event title</div>
+      <div class="newt-timeline__meta">Detail · timestamp</div>
+    </div>
+  </div>
+  <div class="newt-timeline__item">
+    <div
+      class="newt-timeline__dot newt-timeline__dot--success"
+      aria-hidden="true"
+    >
+      ✓
+    </div>
+    <div class="newt-timeline__content">
+      <div class="newt-timeline__title">Event title</div>
+      <div class="newt-timeline__meta">Detail · timestamp</div>
+    </div>
+  </div>
+</div>

package/registry/html/components/toast.css

@@ -0,0 +1,37 @@
+/* newt-ui · Toast / Notification */
+
+.newt-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background: var(--newt-bg-elevated);
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-md);
+  padding: 12px 14px;
+  box-shadow: var(--newt-shadow-elevation-high);
+  max-width: 360px;
+}
+.newt-toast__icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.newt-toast--success .newt-toast__icon {
+  background: var(--newt-online);
+}
+.newt-toast--error .newt-toast__icon {
+  background: var(--newt-dnd);
+}
+.newt-toast__title {
+  font-size: 14px;
+  font-weight: 600;
+}
+.newt-toast__desc {
+  font-size: 13px;
+  color: var(--newt-text-secondary);
+  margin-top: 2px;
+}

package/registry/html/components/toast.html

@@ -0,0 +1,7 @@
+<div class="newt-toast newt-toast--success" role="status" aria-live="polite">
+  <div class="newt-toast__icon">✓</div>
+  <div>
+    <div class="newt-toast__title">Success title</div>
+    <div class="newt-toast__desc">Description text.</div>
+  </div>
+</div>

package/registry/html/components/toast.js

@@ -0,0 +1,16 @@
+export function showToast({ title, description, variant = "success" }) {
+  const toast = document.createElement("div")
+  toast.className = `newt-toast newt-toast--${variant}`
+  toast.setAttribute("role", "status")
+  toast.setAttribute("aria-live", "polite")
+  toast.innerHTML = `
+    <div class="newt-toast__icon">${variant === "success" ? "✓" : "!"}</div>
+    <div>
+      <div class="newt-toast__title">${title}</div>
+      <div class="newt-toast__desc">${description}</div>
+    </div>
+  `
+  document.body.appendChild(toast)
+  setTimeout(() => toast.remove(), 5000)
+  return toast
+}

package/registry/html/components/token-field.css

@@ -0,0 +1,10 @@
+/* newt-ui · Token Field (masked input with reveal/copy) */
+
+.newt-token-field {
+  display: flex;
+  gap: 8px;
+}
+.newt-token-field .newt-input {
+  font-family: var(--newt-font-mono);
+  letter-spacing: 0.05em;
+}

package/registry/html/components/token-field.html

@@ -0,0 +1,18 @@
+<div class="newt-field">
+  <label class="newt-label" for="newt-token-example">Bot token</label>
+  <div class="newt-token-field">
+    <input
+      class="newt-input"
+      id="newt-token-example"
+      type="password"
+      value="••••••••••••••••"
+      readonly
+    />
+    <button class="newt-btn newt-btn--secondary" data-newt-token-toggle>
+      Reveal
+    </button>
+    <button class="newt-btn newt-btn--secondary" data-newt-token-copy>
+      Copy
+    </button>
+  </div>
+</div>

package/registry/html/components/token-field.js

@@ -0,0 +1,17 @@
+document.querySelectorAll("[data-newt-token-toggle]").forEach((btn) => {
+  btn.addEventListener("click", () => {
+    const input = btn.closest(".newt-token-field").querySelector("input")
+    const revealed = input.type === "text"
+    input.type = revealed ? "password" : "text"
+    btn.textContent = revealed ? "Reveal" : "Hide"
+  })
+})
+document.querySelectorAll("[data-newt-token-copy]").forEach((btn) => {
+  btn.addEventListener("click", async () => {
+    const input = btn.closest(".newt-token-field").querySelector("input")
+    await navigator.clipboard.writeText(input.value)
+    const original = btn.textContent
+    btn.textContent = "Copied!"
+    setTimeout(() => (btn.textContent = original), 1500)
+  })
+})

package/registry/html/components/tooltip.css

@@ -0,0 +1,26 @@
+/* newt-ui · Tooltip */
+
+.newt-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+.newt-tooltip__bubble {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: #111214;
+  color: var(--newt-text-primary);
+  font-size: 12px;
+  font-weight: 500;
+  padding: 6px 10px;
+  border-radius: var(--newt-radius-sm);
+  white-space: nowrap;
+  box-shadow: var(--newt-shadow-elevation-high);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--newt-duration-fast) var(--newt-ease);
+}
+.newt-tooltip:hover .newt-tooltip__bubble {
+  opacity: 1;
+}

package/registry/html/components/tooltip.html

@@ -0,0 +1,8 @@
+<span class="newt-tooltip">
+  <button class="newt-btn newt-btn--icon" aria-describedby="tooltip-example">
+    ?
+  </button>
+  <span class="newt-tooltip__bubble" id="tooltip-example" role="tooltip"
+    >Tooltip text</span
+  >
+</span>

package/registry/html/components/typing-indicator.css

@@ -0,0 +1,45 @@
+/* newt-ui · Typing Indicator */
+
+.newt-typing {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--newt-text-muted);
+}
+.newt-typing__dots {
+  display: inline-flex;
+  gap: 3px;
+}
+.newt-typing__dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--newt-text-muted);
+  animation: newt-typing-bounce 1.2s ease-in-out infinite;
+}
+.newt-typing__dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.newt-typing__dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes newt-typing-bounce {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+  30% {
+    transform: translateY(-3px);
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .newt-typing__dots span {
+    animation: none;
+    opacity: 0.8;
+  }
+}

package/registry/html/components/typing-indicator.html

@@ -0,0 +1,4 @@
+<div class="newt-typing" role="status" aria-label="Someone is typing">
+  <div class="newt-typing__dots"><span></span><span></span><span></span></div>
+  someone is typing...
+</div>

package/registry/html/components/user-profile.css

@@ -0,0 +1,67 @@
+/* newt-ui · User Profile Popout */
+
+.newt-profile {
+  background: var(--newt-bg-base);
+  border-radius: var(--newt-radius-lg);
+  width: 280px;
+  overflow: hidden;
+  box-shadow: var(--newt-shadow-elevation-high);
+  border: 1px solid var(--newt-border);
+}
+.newt-profile__banner {
+  height: 60px;
+  background: var(--newt-brand);
+}
+.newt-profile__head {
+  padding: 0 16px 12px;
+  position: relative;
+}
+.newt-profile__avatar-wrap {
+  position: absolute;
+  top: -24px;
+  left: 16px;
+  border: 4px solid var(--newt-bg-base);
+  border-radius: 50%;
+}
+.newt-profile__actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 0 36px;
+  gap: 8px;
+}
+.newt-profile__name {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--newt-text-primary);
+}
+.newt-profile__handle {
+  font-size: 13px;
+  color: var(--newt-text-muted);
+  margin-bottom: 10px;
+}
+.newt-profile__divider {
+  height: 1px;
+  background: var(--newt-border);
+  margin: 10px 0;
+}
+.newt-profile__section-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--newt-text-muted);
+  margin-bottom: 6px;
+}
+.newt-profile__bio {
+  font-size: 13px;
+  color: var(--newt-text-secondary);
+  line-height: 1.5;
+}
+.newt-profile__roles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.newt-profile__body {
+  padding: 0 16px 16px;
+}

package/registry/html/components/user-profile.html

@@ -0,0 +1,30 @@
+<div class="newt-profile">
+  <div class="newt-profile__banner" style="background: var(--newt-brand)"></div>
+  <div class="newt-profile__head">
+    <div class="newt-profile__actions">
+      <button class="newt-btn newt-btn--icon" aria-label="Send message">
+        ✉
+      </button>
+    </div>
+    <div class="newt-profile__avatar-wrap">
+      <div class="newt-status">
+        <div class="newt-avatar newt-avatar--lg">U</div>
+        <div class="newt-status__dot newt-status__dot--online"></div>
+      </div>
+    </div>
+    <div class="newt-profile__name">username</div>
+    <div class="newt-profile__handle">username#0000</div>
+    <div class="newt-profile__divider"></div>
+  </div>
+  <div class="newt-profile__body">
+    <div class="newt-profile__section-label">About me</div>
+    <div class="newt-profile__bio">Bio text goes here.</div>
+    <div class="newt-profile__divider"></div>
+    <div class="newt-profile__section-label">Roles</div>
+    <div class="newt-profile__roles">
+      <span class="newt-role-tag"
+        ><span class="newt-role-tag__dot"></span>Role</span
+      >
+    </div>
+  </div>
+</div>

package/registry/html/components/voice-channel.css

@@ -0,0 +1,57 @@
+/* newt-ui · Voice Channel Row */
+
+.newt-voice-channel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 8px;
+  border-radius: var(--newt-radius-sm);
+}
+.newt-voice-channel__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--newt-text-muted);
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color var(--newt-duration-fast) var(--newt-ease);
+}
+.newt-voice-channel__header:hover {
+  color: var(--newt-text-secondary);
+}
+.newt-voice-channel__icon {
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+.newt-voice-channel__members {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-left: 24px;
+}
+.newt-voice-channel__member {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 6px;
+  border-radius: var(--newt-radius-sm);
+  font-size: 14px;
+  color: var(--newt-text-secondary);
+  cursor: pointer;
+  transition: background var(--newt-duration-fast) var(--newt-ease);
+}
+.newt-voice-channel__member:hover {
+  background: var(--newt-bg-hover);
+}
+.newt-voice-channel__member-icons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  color: var(--newt-text-muted);
+  font-size: 12px;
+}
+.newt-voice-channel__member-icons--muted {
+  color: var(--newt-dnd);
+}

package/registry/html/components/voice-channel.html

@@ -0,0 +1,13 @@
+<div class="newt-voice-channel">
+  <div class="newt-voice-channel__header">
+    <span class="newt-voice-channel__icon" aria-hidden="true">🔊</span>
+    Channel name
+  </div>
+  <div class="newt-voice-channel__members">
+    <div class="newt-voice-channel__member">
+      <div class="newt-avatar newt-avatar--sm">A</div>
+      username
+      <div class="newt-voice-channel__member-icons">🎙️</div>
+    </div>
+  </div>
+</div>