newtui 2.0.0

package/registry/html/components/dropdown.html

@@ -0,0 +1,17 @@
+<div class="newt-dropdown" role="menu">
+  <div class="newt-dropdown__item newt-dropdown__item--active" role="menuitem">
+    <span class="newt-dropdown__icon" aria-hidden="true">⚡</span>
+    <div>
+      <div class="newt-dropdown__label">Option label</div>
+      <div class="newt-dropdown__desc">Option description</div>
+    </div>
+  </div>
+  <div class="newt-dropdown__divider"></div>
+  <div class="newt-dropdown__item" role="menuitem">
+    <span class="newt-dropdown__icon" aria-hidden="true">⚙</span>
+    <div>
+      <div class="newt-dropdown__label">Another option</div>
+      <div class="newt-dropdown__desc">Description</div>
+    </div>
+  </div>
+</div>

package/registry/html/components/embed.css

@@ -0,0 +1,65 @@
+/* newt-ui · Embed (Discord message embed) */
+
+.newt-embed {
+  display: flex;
+  background: var(--newt-bg-elevated);
+  border-radius: var(--newt-radius-md);
+  border-left: 4px solid var(--newt-brand);
+  max-width: 520px;
+  overflow: hidden;
+}
+
+.newt-embed__body {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.newt-embed__eyebrow {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--newt-text-secondary);
+}
+
+.newt-embed__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--newt-text-link);
+}
+
+.newt-embed__description {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--newt-text-secondary);
+}
+
+.newt-embed__fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.newt-embed__field-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--newt-text-primary);
+  margin-bottom: 2px;
+}
+
+.newt-embed__field-value {
+  font-size: 13px;
+  color: var(--newt-text-secondary);
+}
+
+.newt-embed__footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--newt-text-muted);
+  margin-top: 4px;
+}

package/registry/html/components/embed.html

@@ -0,0 +1,14 @@
+<div class="newt-embed">
+  <div class="newt-embed__body">
+    <div class="newt-embed__eyebrow">Source · category</div>
+    <div class="newt-embed__title">Embed title</div>
+    <div class="newt-embed__description">Embed description text goes here.</div>
+    <div class="newt-embed__fields">
+      <div>
+        <div class="newt-embed__field-name">Field</div>
+        <div class="newt-embed__field-value">Value</div>
+      </div>
+    </div>
+    <div class="newt-embed__footer">Footer text · Just now</div>
+  </div>
+</div>

package/registry/html/components/empty-state.css

@@ -0,0 +1,26 @@
+/* newt-ui · Empty State */
+
+.newt-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+  padding: 40px 20px;
+  color: var(--newt-text-muted);
+}
+.newt-empty-state__icon {
+  font-size: 40px;
+  margin-bottom: 4px;
+  opacity: 0.6;
+}
+.newt-empty-state__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--newt-text-primary);
+}
+.newt-empty-state__desc {
+  font-size: 14px;
+  max-width: 320px;
+  line-height: 1.5;
+}

package/registry/html/components/empty-state.html

@@ -0,0 +1,5 @@
+<div class="newt-empty-state">
+  <div class="newt-empty-state__icon" aria-hidden="true">📭</div>
+  <div class="newt-empty-state__title">Nothing here yet</div>
+  <div class="newt-empty-state__desc">Description of what to do next.</div>
+</div>

package/registry/html/components/form-fields.css

@@ -0,0 +1,85 @@
+/* newt-ui · Input / Form Controls */
+
+.newt-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.newt-label {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: var(--newt-text-secondary);
+}
+
+.newt-input,
+.newt-textarea,
+.newt-select {
+  background: var(--newt-bg-input);
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-sm);
+  color: var(--newt-text-primary);
+  font-size: 14px;
+  font-family: var(--newt-font-sans);
+  padding: 10px 12px;
+  transition: border-color var(--newt-duration-fast) var(--newt-ease);
+  width: 100%;
+}
+
+.newt-input:focus,
+.newt-textarea:focus,
+.newt-select:focus {
+  outline: none;
+  border-color: var(--newt-brand);
+}
+
+.newt-input::placeholder,
+.newt-textarea::placeholder {
+  color: var(--newt-text-muted);
+}
+
+.newt-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.newt-help {
+  font-size: 12px;
+  color: var(--newt-text-muted);
+}
+
+/* Toggle / Switch */
+.newt-switch {
+  position: relative;
+  display: inline-flex;
+  width: 40px;
+  height: 24px;
+  border-radius: var(--newt-radius-full);
+  background: var(--newt-bg-elevated);
+  border: 1px solid var(--newt-border);
+  cursor: pointer;
+  transition: background var(--newt-duration-base) var(--newt-ease);
+  flex-shrink: 0;
+}
+.newt-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--newt-text-muted);
+  transition:
+    transform var(--newt-duration-base) var(--newt-ease),
+    background var(--newt-duration-base) var(--newt-ease);
+}
+.newt-switch--on {
+  background: var(--newt-online);
+  border-color: var(--newt-online);
+}
+.newt-switch--on .newt-switch__thumb {
+  transform: translateX(16px);
+  background: #fff;
+}

package/registry/html/components/form-fields.html

@@ -0,0 +1,20 @@
+<div class="newt-field">
+  <label class="newt-label" for="newt-input-example">Label</label>
+  <input
+    class="newt-input"
+    id="newt-input-example"
+    type="text"
+    placeholder="Placeholder"
+  />
+  <span class="newt-help">Helper text</span>
+</div>
+
+<div
+  class="row"
+  style="display: flex; align-items: center; justify-content: space-between"
+>
+  <span>Toggle label</span>
+  <div class="newt-switch" role="switch" aria-checked="false" tabindex="0">
+    <div class="newt-switch__thumb"></div>
+  </div>
+</div>

package/registry/html/components/kbd-tag.css

@@ -0,0 +1,18 @@
+/* newt-ui · Keyboard Shortcut Tag */
+
+.newt-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-family: var(--newt-font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--newt-text-secondary);
+  background: var(--newt-bg-base);
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-sm);
+  box-shadow: 0 1px 0 var(--newt-border);
+}

package/registry/html/components/kbd-tag.html

@@ -0,0 +1 @@
+<span class="newt-kbd">Ctrl</span><span class="newt-kbd">K</span>

package/registry/html/components/member-list.css

@@ -0,0 +1,32 @@
+/* newt-ui · Member List Item */
+
+.newt-member {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  border-radius: var(--newt-radius-sm);
+  cursor: pointer;
+  transition: background var(--newt-duration-fast) var(--newt-ease);
+}
+.newt-member:hover {
+  background: var(--newt-bg-hover);
+}
+.newt-member__info {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+  min-width: 0;
+}
+.newt-member__name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--newt-text-primary);
+}
+.newt-member__role {
+  font-size: 12px;
+  color: var(--newt-text-muted);
+}
+.newt-member__name--colored {
+  color: var(--newt-brand);
+}

package/registry/html/components/member-list.html

@@ -0,0 +1,13 @@
+<div class="newt-member">
+  <div class="newt-status">
+    <div class="newt-avatar newt-avatar--sm">A</div>
+    <div class="newt-status__dot newt-status__dot--online"></div>
+  </div>
+  <div class="newt-member__info">
+    <span class="newt-member__name">username</span>
+    <span class="newt-member__role">Role</span>
+  </div>
+  <span class="newt-role-tag" style="margin-left: auto"
+    ><span class="newt-role-tag__dot"></span>TAG</span
+  >
+</div>

package/registry/html/components/mention.css

@@ -0,0 +1,36 @@
+/* newt-ui · Mention Chip */
+
+.newt-mention {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 4px;
+  border-radius: var(--newt-radius-sm);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background var(--newt-duration-fast) var(--newt-ease);
+}
+.newt-mention--user {
+  background: rgba(88, 101, 242, 0.15);
+  color: #b3baff;
+}
+.newt-mention--user:hover {
+  background: rgba(88, 101, 242, 0.3);
+}
+
+.newt-mention--channel {
+  background: rgba(148, 155, 164, 0.15);
+  color: var(--newt-text-link);
+}
+.newt-mention--channel:hover {
+  background: rgba(148, 155, 164, 0.25);
+}
+
+.newt-mention--role {
+  background: rgba(240, 178, 50, 0.15);
+  color: #f3b95f;
+}
+.newt-mention--role:hover {
+  background: rgba(240, 178, 50, 0.25);
+}

package/registry/html/components/mention.html

@@ -0,0 +1,3 @@
+<span class="newt-mention newt-mention--user">@username</span>
+<span class="newt-mention newt-mention--channel">#channel</span>
+<span class="newt-mention newt-mention--role">@RoleName</span>

package/registry/html/components/message-group.css

@@ -0,0 +1,50 @@
+/* newt-ui · Message Group */
+
+.newt-message-group {
+  display: flex;
+  gap: 16px;
+  padding: 4px 0;
+}
+.newt-message-group:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.newt-message-group__body {
+  flex: 1;
+  min-width: 0;
+}
+.newt-message-group__header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.newt-message-group__author {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--newt-text-primary);
+}
+.newt-message-group__author--bot {
+  font-size: 10px;
+  font-weight: 600;
+  background: var(--newt-brand);
+  color: #fff;
+  padding: 1px 4px;
+  border-radius: 3px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+.newt-message-group__time {
+  font-size: 11px;
+  color: var(--newt-text-muted);
+}
+.newt-message-group__content {
+  font-size: 15px;
+  color: var(--newt-text-secondary);
+  line-height: 1.5;
+}
+.newt-message-group__reactions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 6px;
+}

package/registry/html/components/message-group.html

@@ -0,0 +1,20 @@
+<div class="newt-message-group">
+  <div class="newt-status">
+    <div class="newt-avatar">U</div>
+    <div class="newt-status__dot newt-status__dot--online"></div>
+  </div>
+  <div class="newt-message-group__body">
+    <div class="newt-message-group__header">
+      <span class="newt-message-group__author">username</span>
+      <span class="newt-message-group__author--bot">BOT</span>
+      <span class="newt-message-group__time">Today at 14:23</span>
+    </div>
+    <div class="newt-message-group__content">Message content goes here.</div>
+    <div class="newt-message-group__reactions">
+      <button class="newt-reaction" aria-pressed="false">
+        <span aria-hidden="true">👍</span
+        ><span class="newt-reaction__count">1</span>
+      </button>
+    </div>
+  </div>
+</div>

package/registry/html/components/modal.css

@@ -0,0 +1,37 @@
+/* newt-ui · Modal */
+
+.newt-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+.newt-modal {
+  background: var(--newt-bg-elevated);
+  border-radius: var(--newt-radius-lg);
+  width: 440px;
+  max-width: 90vw;
+  box-shadow: var(--newt-shadow-elevation-high);
+}
+.newt-modal__header {
+  padding: 16px 16px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+.newt-modal__body {
+  padding: 16px;
+  font-size: 14px;
+  color: var(--newt-text-secondary);
+  line-height: 20px;
+}
+.newt-modal__footer {
+  padding: 16px;
+  background: var(--newt-bg-surface);
+  border-radius: 0 0 var(--newt-radius-lg) var(--newt-radius-lg);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}

package/registry/html/components/modal.html

@@ -0,0 +1,17 @@
+<div class="newt-modal-overlay" data-newt-modal>
+  <div
+    class="newt-modal"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="newt-modal-title"
+  >
+    <div class="newt-modal__header" id="newt-modal-title">Modal title</div>
+    <div class="newt-modal__body">Modal body content goes here.</div>
+    <div class="newt-modal__footer">
+      <button class="newt-btn newt-btn--secondary" data-newt-modal-close>
+        Cancel
+      </button>
+      <button class="newt-btn newt-btn--danger">Confirm</button>
+    </div>
+  </div>
+</div>

package/registry/html/components/modal.js

@@ -0,0 +1,10 @@
+document.querySelectorAll("[data-newt-modal]").forEach((overlay) => {
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay || e.target.closest("[data-newt-modal-close]")) {
+      overlay.remove()
+    }
+  })
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") overlay.remove()
+  })
+})

package/registry/html/components/notif-badge.css

@@ -0,0 +1,28 @@
+/* newt-ui · Notification Badge */
+
+.newt-notif-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  background: var(--newt-dnd);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: var(--newt-radius-full);
+  border: 2px solid var(--newt-bg-base);
+  line-height: 1;
+}
+.newt-notif-badge--mention {
+  background: var(--newt-dnd);
+}
+.newt-notif-badge--unread {
+  width: 8px;
+  height: 8px;
+  min-width: unset;
+  padding: 0;
+  border-radius: 50%;
+  background: var(--newt-text-primary);
+}

package/registry/html/components/notif-badge.html

@@ -0,0 +1,13 @@
+<!-- Count badge (position: absolute on parent) -->
+<div style="position: relative; display: inline-block">
+  <div class="newt-avatar">U</div>
+  <div
+    class="newt-notif-badge"
+    style="position: absolute; top: -4px; right: -4px"
+  >
+    3
+  </div>
+</div>
+
+<!-- Unread dot -->
+<div class="newt-notif-badge newt-notif-badge--unread"></div>

package/registry/html/components/pagination.css

@@ -0,0 +1,57 @@
+/* newt-ui · Pagination / Load More */
+
+.newt-pagination {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.newt-pagination__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--newt-text-secondary);
+  background: var(--newt-bg-elevated);
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-sm);
+  cursor: pointer;
+}
+.newt-pagination__btn:hover {
+  background: var(--newt-bg-hover);
+  color: var(--newt-text-primary);
+}
+.newt-pagination__btn--active {
+  background: var(--newt-brand);
+  color: #fff;
+  border-color: var(--newt-brand);
+}
+.newt-pagination__btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.newt-pagination__ellipsis {
+  color: var(--newt-text-muted);
+  font-size: 13px;
+  padding: 0 4px;
+}
+
+.newt-load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px;
+  color: var(--newt-text-muted);
+  font-size: 13px;
+}
+.newt-load-more::before,
+.newt-load-more::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--newt-border);
+}

package/registry/html/components/pagination.html

@@ -0,0 +1,16 @@
+<div class="newt-pagination" role="navigation" aria-label="Pagination">
+  <button class="newt-pagination__btn" aria-label="Previous page">‹</button>
+  <button
+    class="newt-pagination__btn newt-pagination__btn--active"
+    aria-current="page"
+  >
+    1
+  </button>
+  <button class="newt-pagination__btn">2</button>
+  <button class="newt-pagination__btn">3</button>
+  <button class="newt-pagination__btn" aria-label="Next page">›</button>
+</div>
+
+<div class="newt-load-more">
+  <button class="newt-btn newt-btn--secondary newt-btn--sm">Load more</button>
+</div>

package/registry/html/components/permission.css

@@ -0,0 +1,64 @@
+/* newt-ui · Permission Row */
+
+.newt-permission {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--newt-border);
+}
+.newt-permission:last-child {
+  border-bottom: none;
+}
+.newt-permission__info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.newt-permission__name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--newt-text-primary);
+}
+.newt-permission__desc {
+  font-size: 12px;
+  color: var(--newt-text-muted);
+}
+.newt-permission__states {
+  display: flex;
+  gap: 4px;
+  background: var(--newt-bg-base);
+  border-radius: var(--newt-radius-sm);
+  padding: 2px;
+}
+.newt-permission__state {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--newt-radius-sm);
+  border: none;
+  background: transparent;
+  color: var(--newt-text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  transition:
+    background var(--newt-duration-fast) var(--newt-ease),
+    color var(--newt-duration-fast) var(--newt-ease);
+}
+.newt-permission__state:hover {
+  color: var(--newt-text-secondary);
+}
+.newt-permission__state--deny.newt-permission__state--active {
+  background: rgba(242, 63, 66, 0.15);
+  color: var(--newt-dnd);
+}
+.newt-permission__state--inherit.newt-permission__state--active {
+  background: var(--newt-bg-elevated);
+  color: var(--newt-text-secondary);
+}
+.newt-permission__state--allow.newt-permission__state--active {
+  background: rgba(35, 165, 90, 0.15);
+  color: var(--newt-online);
+}