nanoui 0.4.0 → 0.6.0

data/lib/generators/nanoui/templates/css/components/tooltip.css

@@ -1,87 +1,94 @@
 .nano-tooltip {
   position: relative;
   display: inline-flex;
-}
 
-.nano-tooltip__content {
-  position: absolute;
-  z-index: var(--z-tooltip);
-  padding: var(--space-1-5) var(--space-3);
-  font-size: var(--text-xs);
-  line-height: var(--leading-normal);
-  white-space: nowrap;
-  color: hsl(var(--color-primary-foreground));
-  background-color: hsl(var(--color-foreground));
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--duration-fast) var(--ease-default);
-}
+  .nano-tooltip__content {
+    position: absolute;
+    z-index: var(--z-tooltip);
+    padding: var(--space-1-5) var(--space-3);
+    font-size: var(--text-xs);
+    line-height: var(--leading-normal);
+    white-space: nowrap;
+    color: hsl(var(--color-primary-foreground));
+    background-color: hsl(var(--color-foreground));
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-default);
 
-.nano-tooltip__content.is-open {
-  opacity: 1;
-}
+    &.is-open {
+      opacity: 1;
+    }
 
-.nano-tooltip__content::after {
-  content: "";
-  position: absolute;
-  width: 0.5rem;
-  height: 0.5rem;
-  background-color: hsl(var(--color-foreground));
-  transform: rotate(45deg);
-}
+    &::after {
+      content: "";
+      position: absolute;
+      width: 0.5rem;
+      height: 0.5rem;
+      background-color: hsl(var(--color-foreground));
+      transform: rotate(45deg);
+    }
+  }
 
-.nano-tooltip--top .nano-tooltip__content,
-.nano-tooltip:not(.nano-tooltip--bottom):not(.nano-tooltip--left):not(.nano-tooltip--right) .nano-tooltip__content {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: var(--space-2);
-}
+  &--top,
+  &:not(.nano-tooltip--bottom):not(.nano-tooltip--left):not(.nano-tooltip--right) {
+    .nano-tooltip__content {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-bottom: var(--space-2);
 
-.nano-tooltip--top .nano-tooltip__content::after,
-.nano-tooltip:not(.nano-tooltip--bottom):not(.nano-tooltip--left):not(.nano-tooltip--right) .nano-tooltip__content::after {
-  bottom: -0.25rem;
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
-}
+      &::after {
+        bottom: -0.25rem;
+        left: 50%;
+        transform: translateX(-50%) rotate(45deg);
+      }
+    }
+  }
 
-.nano-tooltip--bottom .nano-tooltip__content {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: var(--space-2);
-}
+  &--bottom {
+    .nano-tooltip__content {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: var(--space-2);
 
-.nano-tooltip--bottom .nano-tooltip__content::after {
-  top: -0.25rem;
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
-}
+      &::after {
+        top: -0.25rem;
+        left: 50%;
+        transform: translateX(-50%) rotate(45deg);
+      }
+    }
+  }
 
-.nano-tooltip--left .nano-tooltip__content {
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-right: var(--space-2);
-}
+  &--left {
+    .nano-tooltip__content {
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-right: var(--space-2);
 
-.nano-tooltip--left .nano-tooltip__content::after {
-  right: -0.25rem;
-  top: 50%;
-  transform: translateY(-50%) rotate(45deg);
-}
+      &::after {
+        right: -0.25rem;
+        top: 50%;
+        transform: translateY(-50%) rotate(45deg);
+      }
+    }
+  }
 
-.nano-tooltip--right .nano-tooltip__content {
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: var(--space-2);
-}
+  &--right {
+    .nano-tooltip__content {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-left: var(--space-2);
 
-.nano-tooltip--right .nano-tooltip__content::after {
-  left: -0.25rem;
-  top: 50%;
-  transform: translateY(-50%) rotate(45deg);
+      &::after {
+        left: -0.25rem;
+        top: 50%;
+        transform: translateY(-50%) rotate(45deg);
+      }
+    }
+  }
 }

data/lib/generators/nanoui/templates/css/components/upload.css

@@ -0,0 +1,161 @@
+.nano-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+
+  .nano-upload__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .nano-upload__dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-8) var(--space-4);
+    text-align: center;
+    background-color: hsl(var(--color-background));
+    border: 2px dashed hsl(var(--color-border));
+    border-radius: var(--radius-lg);
+    color: hsl(var(--color-muted-foreground));
+    cursor: pointer;
+    transition: border-color var(--duration-fast) var(--ease-default),
+                background-color var(--duration-fast) var(--ease-default),
+                color var(--duration-fast) var(--ease-default);
+
+    &:hover,
+    &:focus-visible {
+      border-color: hsl(var(--color-primary));
+      color: hsl(var(--color-foreground));
+      outline: none;
+    }
+  }
+
+  .nano-upload__icon {
+    width: 2rem;
+    height: 2rem;
+    color: hsl(var(--color-muted-foreground));
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .nano-upload__prompt {
+    font-size: var(--text-sm);
+    color: hsl(var(--color-foreground));
+
+    strong {
+      font-weight: var(--font-semibold);
+      color: hsl(var(--color-primary));
+    }
+  }
+
+  .nano-upload__hint {
+    font-size: var(--text-xs);
+    color: hsl(var(--color-muted-foreground));
+  }
+
+  .nano-upload__preview {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    background-color: hsl(var(--color-muted));
+    border: 1px solid hsl(var(--color-border));
+    border-radius: var(--radius-md);
+  }
+
+  .nano-upload__thumbnail {
+    flex-shrink: 0;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--radius-md);
+    object-fit: cover;
+    background-color: hsl(var(--color-background));
+    border: 1px solid hsl(var(--color-border));
+  }
+
+  .nano-upload__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .nano-upload__name {
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: hsl(var(--color-foreground));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nano-upload__size {
+    font-size: var(--text-xs);
+    color: hsl(var(--color-muted-foreground));
+    font-family: var(--font-mono);
+  }
+
+  .nano-upload__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--radius-md);
+    color: hsl(var(--color-muted-foreground));
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-default),
+                color var(--duration-fast) var(--ease-default);
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &:hover {
+      background-color: hsl(var(--color-destructive) / 0.1);
+      color: hsl(var(--color-destructive));
+    }
+
+    &:focus-visible {
+      outline: 2px solid hsl(var(--color-ring));
+      outline-offset: 2px;
+    }
+  }
+
+  .nano-upload__error {
+    font-size: var(--text-sm);
+    color: hsl(var(--color-destructive));
+  }
+
+  &[data-state="dragover"] .nano-upload__dropzone {
+    border-color: hsl(var(--color-primary));
+    background-color: hsl(var(--color-primary) / 0.05);
+    color: hsl(var(--color-foreground));
+  }
+
+  &[data-state="filled"] .nano-upload__dropzone {
+    display: none;
+  }
+
+  &[data-state="empty"] .nano-upload__preview {
+    display: none;
+  }
+}

data/lib/generators/nanoui/templates/css/layout/container.css

@@ -3,12 +3,12 @@
   max-width: 1280px;
   margin-inline: auto;
   padding-inline: var(--space-6);
-}
 
-.nano-container--md {
-  max-width: 1024px;
-}
+  &--md {
+    max-width: 1024px;
+  }
 
-.nano-container--sm {
-  max-width: 640px;
+  &--sm {
+    max-width: 640px;
+  }
 }

data/lib/generators/nanoui/templates/js/controllers/copy_controller.js

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["source", "button", "idle", "copied"]
+  static values = {
+    text: String,
+    resetMs: { type: Number, default: 2000 }
+  }
+
+  async copy(event) {
+    event?.preventDefault()
+    const text = this.#textToCopy()
+    if (!text) return
+
+    try {
+      await navigator.clipboard.writeText(text)
+    } catch (_err) {
+      this.#fallbackCopy(text)
+    }
+
+    this.#markCopied()
+    this.dispatch("copied", { detail: { text } })
+  }
+
+  #textToCopy() {
+    if (this.hasTextValue && this.textValue) return this.textValue
+    if (this.hasSourceTarget) {
+      return this.sourceTarget.value ?? this.sourceTarget.textContent ?? ""
+    }
+    return this.element.textContent?.trim() ?? ""
+  }
+
+  #fallbackCopy(text) {
+    const textarea = document.createElement("textarea")
+    textarea.value = text
+    textarea.setAttribute("readonly", "")
+    textarea.style.position = "absolute"
+    textarea.style.left = "-9999px"
+    document.body.appendChild(textarea)
+    textarea.select()
+    try { document.execCommand("copy") } catch (_err) { /* noop */ }
+    document.body.removeChild(textarea)
+  }
+
+  #markCopied() {
+    const button = this.hasButtonTarget ? this.buttonTarget : this.element
+    button.dataset.nanouiCopyCopied = "true"
+    if (this.hasIdleTarget) this.idleTarget.hidden = true
+    if (this.hasCopiedTarget) this.copiedTarget.hidden = false
+
+    clearTimeout(this._resetTimer)
+    this._resetTimer = setTimeout(() => this.#reset(button), this.resetMsValue)
+  }
+
+  #reset(button) {
+    delete button.dataset.nanouiCopyCopied
+    if (this.hasIdleTarget) this.idleTarget.hidden = false
+    if (this.hasCopiedTarget) this.copiedTarget.hidden = true
+  }
+
+  disconnect() {
+    clearTimeout(this._resetTimer)
+  }
+}

data/lib/generators/nanoui/templates/js/controllers/data_table_controller.js

@@ -0,0 +1,75 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["header", "body", "row"]
+  static values = {
+    server: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.headerTargets.forEach((header) => {
+      if (!header.hasAttribute("aria-sort")) {
+        header.setAttribute("aria-sort", "none")
+      }
+    })
+  }
+
+  sort(event) {
+    const header = event.currentTarget.closest("[data-nanoui-data-table-target='header']")
+    if (!header) return
+
+    const current = header.getAttribute("aria-sort") || "none"
+    const next = current === "ascending" ? "descending" : "ascending"
+
+    this.headerTargets.forEach((h) => {
+      if (h !== header) h.setAttribute("aria-sort", "none")
+    })
+    header.setAttribute("aria-sort", next)
+
+    this.dispatch("sort", {
+      detail: {
+        key: header.dataset.sortKey ?? header.textContent.trim(),
+        direction: next
+      }
+    })
+
+    if (this.serverValue) return
+
+    this.#sortLocally(header, next)
+  }
+
+  #sortLocally(header, direction) {
+    const index = this.headerTargets.indexOf(header)
+    if (index < 0 || !this.hasBodyTarget) return
+
+    const type = header.dataset.sortType || "string"
+    const rows = Array.from(this.rowTargets)
+    const factor = direction === "ascending" ? 1 : -1
+
+    rows.sort((a, b) => {
+      const av = this.#cellValue(a, index, type)
+      const bv = this.#cellValue(b, index, type)
+      if (av < bv) return -1 * factor
+      if (av > bv) return 1 * factor
+      return 0
+    })
+
+    rows.forEach((row) => this.bodyTarget.appendChild(row))
+  }
+
+  #cellValue(row, index, type) {
+    const cell = row.children[index]
+    if (!cell) return ""
+    const raw = cell.dataset.sortValue ?? cell.textContent.trim()
+
+    if (type === "number") {
+      const n = parseFloat(raw.replace(/[^0-9.\-]/g, ""))
+      return Number.isNaN(n) ? 0 : n
+    }
+    if (type === "date") {
+      const d = Date.parse(raw)
+      return Number.isNaN(d) ? 0 : d
+    }
+    return raw.toLowerCase()
+  }
+}

data/lib/generators/nanoui/templates/js/controllers/navbar_controller.js

@@ -0,0 +1,70 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["links", "toggle"]
+
+  connect() {
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+    this.handleResize = this.handleResize.bind(this)
+    window.addEventListener("resize", this.handleResize)
+  }
+
+  toggle() {
+    if (this.linksTarget.classList.contains("is-open")) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    if (this.linksTarget.classList.contains("is-open")) return
+
+    this.linksTarget.classList.add("is-open")
+    this.syncToggleState(true)
+    document.addEventListener("click", this.handleOutsideClick)
+    document.addEventListener("keydown", this.handleKeydown)
+    this.dispatch("open")
+  }
+
+  close() {
+    if (!this.linksTarget.classList.contains("is-open")) return
+
+    this.linksTarget.classList.remove("is-open")
+    this.syncToggleState(false)
+    document.removeEventListener("click", this.handleOutsideClick)
+    document.removeEventListener("keydown", this.handleKeydown)
+    this.dispatch("close")
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      this.close()
+      if (this.hasToggleTarget) this.toggleTarget.focus()
+    }
+  }
+
+  handleResize() {
+    if (window.innerWidth > 768) {
+      this.close()
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.handleOutsideClick)
+    document.removeEventListener("keydown", this.handleKeydown)
+    window.removeEventListener("resize", this.handleResize)
+  }
+
+  syncToggleState(expanded) {
+    if (!this.hasToggleTarget) return
+    this.toggleTarget.setAttribute("aria-expanded", String(expanded))
+  }
+}

data/lib/generators/nanoui/templates/js/controllers/sidebar_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["toggle"]
+  static values = { collapsed: { type: Boolean, default: false } }
+
+  connect() {
+    if (this.collapsedValue) {
+      this.element.classList.add("nano-sidebar--collapsed")
+      this.#updateToggle(true)
+    }
+  }
+
+  toggle() {
+    const willCollapse = !this.element.classList.contains("nano-sidebar--collapsed")
+    this.element.classList.toggle("nano-sidebar--collapsed")
+    this.collapsedValue = willCollapse
+    this.#updateToggle(willCollapse)
+    this.dispatch(willCollapse ? "collapse" : "expand")
+  }
+
+  #updateToggle(collapsed) {
+    if (this.hasToggleTarget) {
+      this.toggleTarget.setAttribute("aria-expanded", String(!collapsed))
+    }
+  }
+}