Tooltip

import "@ui-sdk/web/tooltip"
import { Bookmark, createElement } from "lucide"

function mount(root: HTMLElement) {
  root.innerHTML = `
    <ui-tooltip default-open>
      <ui-tooltip-trigger>
        <button aria-label="Add to library">${createElement(Bookmark, { "aria-hidden": "true" }).outerHTML}</button>
      </ui-tooltip-trigger>
      <ui-tooltip-content>Add to library</ui-tooltip-content>
    </ui-tooltip>
  `
}

export { mount }

import "@ui-sdk/web/tooltip"

const sides = [
  { side: "top", label: "Top" },
  { side: "left", label: "Left" },
  { side: "right", label: "Right" },
  { side: "bottom", label: "Bottom" },
]

function mount(root: HTMLElement) {
  root.innerHTML = `
    <div data-slot="grid">
      ${sides
        .map(
          ({ side, label }) => `
            <ui-tooltip>
              <ui-tooltip-trigger><button>${label}</button></ui-tooltip-trigger>
              <ui-tooltip-content side="${side}">Add to library</ui-tooltip-content>
            </ui-tooltip>
          `
        )
        .join("")}
    </div>
  `
}

export { mount }

import "@ui-sdk/web/tooltip"
import "@ui-sdk/web/field"
import "@ui-sdk/web/input"
import { createElement, Info } from "lucide"

function mount(root: HTMLElement) {
  const id = `webhook-url-${crypto.randomUUID()}`
  root.innerHTML = `
    <ui-field>
      <ui-field-label>Webhook URL</ui-field-label>
      <div data-slot="row" id="${id}">
        <ui-input>
          <input placeholder="https://" />
        </ui-input>
        <ui-tooltip>
          <ui-tooltip-trigger>
            <button aria-label="About webhooks">${createElement(Info, { "aria-hidden": "true" }).outerHTML}</button>
          </ui-tooltip-trigger>
          <ui-tooltip-content anchor="#${id}" side="bottom" align="start">
            We send a POST request here for every new order.
          </ui-tooltip-content>
        </ui-tooltip>
      </div>
    </ui-field>
  `
}

export { mount }

import "@ui-sdk/web/tooltip"
import { registerShortcut } from "@ui-sdk/web"
import { createElement, Save } from "lucide"
import { log } from "./log"

function mount(root: HTMLElement) {
  root.innerHTML = `
    <div data-slot="row">
      <ui-tooltip shortcut="mod+s">
        <ui-tooltip-trigger>
          <button aria-label="Save">${createElement(Save, { "aria-hidden": "true" }).outerHTML}</button>
        </ui-tooltip-trigger>
        <ui-tooltip-content>
          Save
          <ui-tooltip-shortcut></ui-tooltip-shortcut>
        </ui-tooltip-content>
      </ui-tooltip>
      <ui-tooltip shortcut="mod+shift+e">
        <ui-tooltip-trigger><button>Share</button></ui-tooltip-trigger>
        <ui-tooltip-content>
          Share with your team
          <ui-tooltip-shortcut></ui-tooltip-shortcut>
        </ui-tooltip-content>
      </ui-tooltip>
    </div>
  `
  const save = () => log(root, "Saved")
  const share = () => log(root, "Shared")
  const [saveButton, shareButton] = root.querySelectorAll("button")
  saveButton.addEventListener("click", save)
  shareButton.addEventListener("click", share)
  const offSave = registerShortcut("mod+s", save)
  const offShare = registerShortcut("mod+shift+e", share)
  return () => {
    offSave()
    offShare()
  }
}

export { mount }

import "@ui-sdk/web/tooltip"
import "@ui-sdk/web/field"
import "@ui-sdk/web/input"
import { log } from "./log"

function mount(root: HTMLElement) {
  root.innerHTML = `
    <div data-slot="stack">
      <ui-field>
        <ui-field-label>Post title</ui-field-label>
        <ui-input>
          <input />
        </ui-input>
      </ui-field>
      <ui-tooltip>
        <ui-tooltip-trigger><button data-variant="solid" aria-disabled="true">Publish</button></ui-tooltip-trigger>
        <ui-tooltip-content side="right">Add a title to publish</ui-tooltip-content>
      </ui-tooltip>
    </div>
  `
  const input = root.querySelector("input")!
  const tooltip = root.querySelector("ui-tooltip")!
  const publish = root.querySelector("button")!
  const title = () => input.value.trim()
  input.addEventListener("input", () => {
    const blocked = !title()
    if (blocked) {
      publish.setAttribute("aria-disabled", "true")
    } else {
      publish.removeAttribute("aria-disabled")
    }
    tooltip.disabled = !blocked
  })
  publish.addEventListener("click", () => {
    if (title()) {
      log(root, `Published “${title()}”`)
    }
  })
}

export { mount }

import "@ui-sdk/web/tooltip"
import { createElement, Info } from "lucide"

function mount(root: HTMLElement) {
  root.innerHTML = `
    <div data-slot="row">
      <span data-slot="label">Storage</span>
      <ui-tooltip toggleable>
        <ui-tooltip-trigger>
          <button aria-label="About storage" data-size="sm">${createElement(Info, { "aria-hidden": "true" }).outerHTML}</button>
        </ui-tooltip-trigger>
        <ui-tooltip-content>Files in the trash still use storage.</ui-tooltip-content>
      </ui-tooltip>
      <span data-slot="hint">12.4 of 15 GB used</span>
    </div>
  `
}

export { mount }

import "@ui-sdk/web/tooltip"
import { Check, Copy, createElement } from "lucide"

const command = "npm install @ui-sdk/web"

function mount(root: HTMLElement) {
  root.innerHTML = `
    <div data-slot="row">
      <code>${command}</code>
      <ui-tooltip close-on-press="false">
        <ui-tooltip-trigger><button></button></ui-tooltip-trigger>
        <ui-tooltip-content></ui-tooltip-content>
      </ui-tooltip>
    </div>
  `
  const tooltip = root.querySelector("ui-tooltip")!
  const button = root.querySelector("button")!
  const content = root.querySelector("ui-tooltip-content")!
  const render = (copied: boolean) => {
    const label = copied ? "Copied" : "Copy"
    button.setAttribute("aria-label", label)
    button.replaceChildren(
      createElement(copied ? Check : Copy, { "aria-hidden": "true" })
    )
    content.textContent = label
  }
  render(false)
  button.addEventListener("click", () => {
    navigator.clipboard?.writeText(command).catch(() => {})
    render(true)
  })
  tooltip.addEventListener("openchangecomplete", (event) => {
    if (!event.detail.value) {
      render(false)
    }
  })
}

export { mount }

import "@ui-sdk/web/tooltip"
import { createElement, File } from "lucide"

const files = [
  "Quarterly report, final revised version for the board.pdf",
  "Notes.txt",
  "Design review recording, October 2nd.mp4",
  "Budget.xlsx",
]

function mount(root: HTMLElement) {
  root.innerHTML = `
    <ul>
      ${files
        .map(
          (file) => `
      <li>
        <ui-tooltip type="label">
          <ui-tooltip-trigger><button>${createElement(File, { "aria-hidden": "true" }).outerHTML}<span>${file}</span></button></ui-tooltip-trigger>
          <ui-tooltip-content>${file}</ui-tooltip-content>
        </ui-tooltip>
      </li>`
        )
        .join("")}
    </ul>
  `
  for (const tooltip of root.querySelectorAll("ui-tooltip")) {
    tooltip.addEventListener("openchange", (event) => {
      const name = tooltip.querySelector("span")
      if (event.detail.value && name && name.scrollWidth <= name.clientWidth) {
        event.preventDefault()
      }
    })
  }
}

export { mount }

import "@ui-sdk/web/tooltip"
import "@ui-sdk/web/checkbox"
import { Check, createElement } from "lucide"
import { log } from "./log"

function mount(root: HTMLElement) {
  root.innerHTML = `
    <div data-slot="stack">
      <div data-slot="controls">
        <label data-slot="label">
          <ui-checkbox>
            <ui-checkbox-indicator>
              ${createElement(Check, { "aria-hidden": "true" }).outerHTML}
            </ui-checkbox-indicator>
          </ui-checkbox>
          Open
        </label>
      </div>
      <ui-tooltip>
        <ui-tooltip-trigger><button>Export</button></ui-tooltip-trigger>
        <ui-tooltip-content>Download as CSV</ui-tooltip-content>
      </ui-tooltip>
    </div>
  `
  const controls = root.querySelector('[data-slot="controls"]')!
  const checkbox = root.querySelector("ui-checkbox")!
  const tooltip = root.querySelector("ui-tooltip")!
  checkbox.addEventListener("checkedchange", (event) => {
    tooltip.open = event.detail.value === true
  })
  tooltip.addEventListener("openchange", (event) => {
    const { value, reason, event: cause } = event.detail
    const inControls =
      cause?.target instanceof Node && controls.contains(cause.target)
    if (inControls && reason !== "escape-key") {
      return event.preventDefault()
    }
    checkbox.checked = value
    log(root, `${value ? "Opened" : "Closed"} (${reason})`)
  })
}

export { mount }

import "@ui-sdk/web/tooltip"
import type { UiTooltipElement } from "@ui-sdk/web/tooltip"
import { Bold, createElement, Italic, Underline } from "lucide"

const formats = [
  { icon: Bold, label: "Bold" },
  { icon: Italic, label: "Italic" },
  { icon: Underline, label: "Underline" },
]

function mount(root: HTMLElement) {
  const id = `formatting-${crypto.randomUUID()}`
  root.innerHTML = `
    <div data-slot="row" role="group" aria-label="Formatting">
      ${formats
        .map(
          (format) => `
            <ui-tooltip-trigger for="${id}">
              <button aria-label="${format.label}">${createElement(format.icon, { "aria-hidden": "true" }).outerHTML}</button>
            </ui-tooltip-trigger>
          `
        )
        .join("")}
      <ui-tooltip id="${id}">
        <ui-tooltip-content></ui-tooltip-content>
      </ui-tooltip>
    </div>
  `
  root.querySelectorAll("ui-tooltip-trigger").forEach((trigger, index) => {
    trigger.payload = formats[index].label
  })
  const tooltip = root.querySelector<UiTooltipElement<string>>("ui-tooltip")!
  const content = root.querySelector("ui-tooltip-content")!
  tooltip.addEventListener("payloadchange", (event) => {
    content.textContent = event.detail.value ?? ""
  })
}

export { mount }

import "@ui-sdk/web/tooltip"
import { Archive, createElement } from "lucide"
import { log } from "./log"

function mount(root: HTMLElement) {
  root.innerHTML = `
    <ui-tooltip>
      <ui-tooltip-trigger>
        <button aria-label="Archive">${createElement(Archive, { "aria-hidden": "true" }).outerHTML}</button>
      </ui-tooltip-trigger>
      <ui-tooltip-content>Archive</ui-tooltip-content>
    </ui-tooltip>
  `
  const tooltip = root.querySelector("ui-tooltip")!
  tooltip.addEventListener("openchange", (event) =>
    log(root, event.detail.value ? "Opening" : "Closing")
  )
  tooltip.addEventListener("openchangecomplete", (event) =>
    log(root, event.detail.value ? "Open" : "Closed")
  )
}

export { mount }

import "@ui-sdk/web/tooltip"

function mount(root: HTMLElement) {
  root.innerHTML = `
    <ui-tooltip>
      <ui-tooltip-trigger><a href="https://example.com/changelog" data-variant="link">Changelog</a></ui-tooltip-trigger>
      <ui-tooltip-content>See what's new in 2.0</ui-tooltip-content>
    </ui-tooltip>
  `
}

export { mount }