@epilot/zenith-react 0.2.0-next.3 → 0.2.0-next.5

package/codemods/migrate/base-elements/dialog.ts

@@ -0,0 +1,323 @@
+/**
+ * The MUI Dialog family → Zenith's Dialog.
+ *
+ * MUI's `DialogContent` is the scrolling BODY between title and actions; Zenith's is the whole
+ * PANEL. So the names never map one to one:
+ *
+ * - `<Dialog open onClose>` → `<Dialog open onOpenChange>` around a `<DialogContent>` panel that
+ *   takes the dialog's children. With `fullWidth`, `maxWidth` (MUI default sm, 600px) → the
+ *   nearest panel `size`; without it MUI fitted the content, so the size stops at Zenith's
+ *   default lg.
+ * - `<DialogContent>` (body) → `<div>`.
+ * - `<DialogTitle>` → `<DialogHeader><DialogTitle>`; `<DialogActions>` → `<DialogFooter>`;
+ *   `<DialogContentText>` → `<DialogDescription>`.
+ * - `disableBackdropClick` / `disableEscapeKeyDown` → the panel's `onPointerDownOutside` /
+ *   `onEscapeKeyDown` calling `preventDefault()`. `aria-labelledby`/`aria-describedby` and the
+ *   ids they point at are dropped: Radix wires the title and description itself.
+ */
+import type { ASTPath, JSXAttribute, JSXElement } from "jscodeshift"
+import type { MigrateContext } from "../lib/types"
+import {
+  attrExpression,
+  closeAsOpenChange,
+  element,
+  isTrue,
+  mapStringExpression,
+  nestChildren,
+  onlyChild,
+  parseExpression,
+  printAttrs,
+  stringIn,
+  takeAttrs,
+  printAttr,
+  reportValueUses,
+} from "./shared"
+
+export const handles = [
+  "Dialog",
+  "DialogProps",
+  "DialogTitle",
+  "DialogTitleProps",
+  "DialogContent",
+  "DialogContentProps",
+  "DialogContentText",
+  "DialogContentTextProps",
+  "DialogActions",
+  "DialogActionsProps",
+] as const
+
+/** MUI `maxWidth` → Zenith size (sm 24rem … 5xl 64rem): the nearest at or above MUI's width. */
+const SIZES: Record<string, string> = {
+  xs: "md", // 444px → 28rem
+  sm: "xl", // 600px → 36rem
+  md: "5xl", // 960px → 64rem
+}
+const TOO_WIDE: Record<string, string> = { lg: "1280px", xl: "1920px" }
+const ORDER = ["sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full-width"]
+
+const SILENT_ROOT = ["fullWidth"]
+/** Root props that belong on the panel in Zenith. */
+const TO_PANEL = (name: string) =>
+  name === "className" ||
+  name === "style" ||
+  name === "id" ||
+  name.startsWith("data-") ||
+  name.startsWith("aria-")
+
+export function migrate(ctx: MigrateContext): void {
+  const { jsx } = ctx
+
+  // Zenith's parts need Zenith's root (Radix context): a styled(Dialog) keeps the whole family.
+  if (
+    reportValueUses(
+      ctx,
+      "Dialog",
+      "migrate the dialog and its parts by hand: Dialog open onOpenChange > DialogContent (the panel; style it there) > DialogHeader / DialogFooter"
+    )
+  ) {
+    for (const name of handles) ctx.keep(name)
+    return
+  }
+
+  // Radix gives the title and description their ids to link aria-labelledby/-describedby; ids
+  // that only existed for MUI's manual labelling go silently, others are reported.
+  // Ids on the parts Radix links itself: a dialog pointing at them needs nothing more.
+  const partIds = new Set<string>()
+  for (const name of ["DialogTitle", "DialogContentText"])
+    ctx.elements(name).forEach((path) => {
+      const id = jsx.literal(jsx.attr(path.node, "id"))
+      if (typeof id === "string") partIds.add(id)
+    })
+  const labelIds = new Set<string>()
+  ctx.elements("Dialog").forEach((path) => {
+    for (const name of ["aria-labelledby", "aria-describedby"]) {
+      const value = jsx.literal(jsx.attr(path.node, name))
+      if (typeof value === "string") labelIds.add(value)
+    }
+  })
+  const dropId = (path: ASTPath<JSXElement>, component: string) => {
+    const id = jsx.removeAttr(path.node, "id")
+    const value = jsx.literal(id)
+    if (id && !(typeof value === "string" && labelIds.has(value)))
+      ctx.todo(
+        path,
+        component,
+        `dropped ${printAttr(ctx, id)}: Radix sets this id to link the dialog's accessible name; select the element by role instead`
+      )
+  }
+
+  const bodyUsed = reportValueUses(
+    ctx,
+    "DialogContent",
+    "MUI's DialogContent is the dialog body: make it a styled <div> (Zenith's DialogContent is the whole panel)"
+  )
+  ctx.elements("DialogContent").forEach((path) => migrateBody(ctx, path))
+
+  const titles = ctx.elements("DialogTitle").paths()
+  ctx.moveElements("DialogTitle")
+  ctx.move("DialogTitleProps")
+  if (titles.length) {
+    const header = ctx.ensureZenith("DialogHeader")
+    for (const path of titles) {
+      jsx.removeAttr(path.node, "disableTypography")
+      dropId(path, "DialogTitle")
+      path.replace(
+        element(ctx.j, header, [], onlyChild(ctx.j, path.node, true))
+      )
+    }
+  }
+
+  const footers = ctx.elements("DialogActions").paths()
+  ctx.moveElements("DialogActions", "DialogFooter")
+  ctx.move("DialogActionsProps", "DialogFooterProps")
+  footers.forEach((path) => {
+    jsx.removeAttr(path.node, "disableSpacing")
+  })
+
+  const descriptions = ctx.elements("DialogContentText").paths()
+  ctx.moveElements("DialogContentText", "DialogDescription")
+  ctx.move("DialogContentTextProps", "DialogDescriptionProps")
+  descriptions.forEach((path) => {
+    dropId(path, "DialogContentText")
+    jsx.removeAttr(path.node, "color")
+    const unsupported = takeAttrs(ctx, path.node, ["variant", "classes"])
+    if (unsupported.length)
+      ctx.todo(
+        path,
+        "DialogContentText",
+        `dropped ${printAttrs(ctx, unsupported)}: DialogDescription has one text style`
+      )
+  })
+
+  ctx.move("Dialog")
+  ctx.move("DialogProps")
+  const dialogs = ctx.elements("Dialog").paths()
+  // The legacy body name is free now; an un-aliased one becomes the Zenith panel's binding.
+  const reuse =
+    ctx.names.DialogContent === "DialogContent" &&
+    dialogs.length > 0 &&
+    !bodyUsed
+  if (bodyUsed) ctx.keep("DialogContent")
+  else if (reuse) ctx.move("DialogContent")
+  else ctx.drop("DialogContent")
+  ctx.keep(
+    "DialogContentProps",
+    'MUI DialogContent is the dialog body, now a <div>: type it as React.ComponentProps<"div">'
+  )
+  if (dialogs.length) {
+    const panel = reuse ? "DialogContent" : ctx.ensureZenith("DialogContent")
+    for (const path of dialogs) migrateDialog(ctx, path, panel, partIds)
+  }
+}
+
+function migrateBody(ctx: MigrateContext, path: ASTPath<JSXElement>): void {
+  ctx.jsx.rename(path.node, "div")
+  const unsupported = takeAttrs(ctx, path.node, ["dividers", "classes"])
+  const dropped = unsupported.length
+    ? `dropped ${printAttrs(ctx, unsupported)}; `
+    : ""
+  // MUI's body was the scroll container (overflow-y: auto); Zenith's panel neither caps its
+  // height nor scrolls, so a long body runs off the screen.
+  ctx.todo(
+    path,
+    "DialogContent",
+    `${dropped}this <div> was MUI's scrolling dialog body: wrap it in ScrollArea or give it a max height and overflowY: "auto" via makeZenithStyles`
+  )
+}
+
+function migrateDialog(
+  ctx: MigrateContext,
+  path: ASTPath<JSXElement>,
+  panel: string,
+  partIds: ReadonlySet<string>
+): void {
+  const { j, jsx } = ctx
+  const el = path.node
+  const reported: string[] = []
+  const panelAttrs: JSXAttribute[] = []
+
+  const onClose = jsx.removeAttr(el, "onClose")
+  if (onClose) {
+    const handler = closeAsOpenChange(j, attrExpression(onClose))
+    if (handler) jsx.setAttr(el, "onOpenChange", handler)
+    else
+      reported.push(
+        `dropped ${printAttr(ctx, onClose)} (onOpenChange(open) has no event or reason: close when open is false; to block a reason, preventDefault() in DialogContent onPointerDownOutside / onEscapeKeyDown)`
+      )
+  }
+
+  // Without fullWidth MUI sized the paper to its content, up to maxWidth; a Zenith panel always
+  // fills its size, so those dialogs stop at Zenith's default lg (32rem) instead of growing to
+  // MUI's maximum.
+  const fullWidth = isTrue(ctx, jsx.attr(el, "fullWidth"))
+  const fit = (size: string) =>
+    fullWidth || ORDER.indexOf(size) <= ORDER.indexOf("lg") ? size : "lg"
+  const panelSize = (size: string) => {
+    if (fit(size) !== "lg") panelAttrs.push(sizeAttr(ctx, fit(size)))
+  }
+  const maxWidth = jsx.removeAttr(el, "maxWidth")
+  const width = maxWidth ? jsx.literal(maxWidth) : "sm"
+  const sizes = mapStringExpression(
+    j,
+    attrExpression(maxWidth),
+    (v) => (SIZES[v] ? fit(SIZES[v]) : undefined),
+    (v) => stringIn(ctx, v) as never
+  )
+  if (sizes)
+    panelAttrs.push(
+      j.jsxAttribute(j.jsxIdentifier("size"), j.jsxExpressionContainer(sizes))
+    )
+  else if (width === false) panelSize("full-width")
+  else if (typeof width === "string" && SIZES[width]) panelSize(SIZES[width])
+  else if (typeof width === "string" && TOO_WIDE[width]) {
+    panelSize("5xl")
+    reported.push(
+      fullWidth
+        ? `${printAttr(ctx, maxWidth!)} → size="5xl" (MUI's ${TOO_WIDE[width]}; Zenith's widest fixed size is 64rem, else "full-width")`
+        : `${printAttr(ctx, maxWidth!)} → Zenith's default size lg (MUI fitted the content up to ${TOO_WIDE[width]}; pick a size up to 5xl or "full-width")`
+    )
+  } else if (maxWidth)
+    reported.push(
+      `dropped ${printAttr(ctx, maxWidth)} (DialogContent size: sm | md | lg | xl | 2xl … 5xl | full-width)`
+    )
+
+  for (const [name, handler] of [
+    ["disableBackdropClick", "onPointerDownOutside"],
+    ["disableEscapeKeyDown", "onEscapeKeyDown"],
+  ] as const) {
+    const flag = jsx.removeAttr(el, name)
+    if (!flag) continue
+    if (isTrue(ctx, flag))
+      panelAttrs.push(
+        j.jsxAttribute(
+          j.jsxIdentifier(handler),
+          j.jsxExpressionContainer(
+            parseExpression(j, "(event) => event.preventDefault()") as never
+          )
+        )
+      )
+    else
+      reported.push(
+        `dropped ${printAttr(ctx, flag)} (DialogContent ${handler}={(event) => event.preventDefault()} when it is set)`
+      )
+  }
+
+  takeAttrs(ctx, el, SILENT_ROOT)
+  // aria-labelledby / aria-describedby at the title or description Radix already links: dropped.
+  // Pointing anywhere else, they move to the panel, where they override Radix's link.
+  for (const name of ["aria-labelledby", "aria-describedby"]) {
+    const a = jsx.attr(el, name)
+    if (!a) continue
+    const value = jsx.literal(a)
+    jsx.removeAttr(el, name)
+    if (typeof value === "string" && partIds.has(value)) continue
+    panelAttrs.push(a)
+    reported.push(
+      `${printAttr(ctx, a)} moved to DialogContent, where it replaces Radix's link to the ${name === "aria-labelledby" ? "DialogTitle" : "DialogDescription"}; drop it if that part already says it`
+    )
+  }
+  const moved = takeAttrs(
+    ctx,
+    el,
+    jsx
+      .attrs(el)
+      .map((a) => jsx.attrName(a))
+      .filter(TO_PANEL)
+  )
+  panelAttrs.unshift(...moved)
+  if (moved.some((a) => ["className", "style"].includes(jsx.attrName(a))))
+    reported.push(
+      "className/style moved from MUI's backdrop container to the panel; check selectors that reached into .MuiPaper-root"
+    )
+
+  const unsupported = takeAttrs(
+    ctx,
+    el,
+    jsx
+      .attrs(el)
+      .map((a) => jsx.attrName(a))
+      .filter((n) => !["open", "onOpenChange", "key"].includes(n))
+  )
+  if (unsupported.length)
+    reported.push(
+      `dropped ${printAttrs(ctx, unsupported)} (no Zenith equivalent)`
+    )
+  if (jsx.hasSpread(el))
+    reported.push(
+      "spread props are MUI DialogProps: keep open/onOpenChange here, move the rest to DialogContent"
+    )
+
+  // MUI dialogs have no built-in close button; Zenith's panel shows one unless told not to.
+  panelAttrs.push(
+    j.jsxAttribute(
+      j.jsxIdentifier("showCloseButton"),
+      j.jsxExpressionContainer(j.booleanLiteral(false))
+    )
+  )
+  nestChildren(j, el, panel, panelAttrs)
+  if (reported.length) ctx.todo(path, "Dialog", reported.join("; "))
+}
+
+function sizeAttr(ctx: MigrateContext, size: string): JSXAttribute {
+  return ctx.j.jsxAttribute(ctx.j.jsxIdentifier("size"), ctx.jsx.str(size))
+}

package/codemods/migrate/base-elements/divider.ts

@@ -0,0 +1,61 @@
+/**
+ * Divider → Separator. `orientation` is the same; the MUI layout variants have no equivalent and
+ * are reported with the makeZenithStyles replacement. A text child stays (Separator renders a
+ * div) but is reported: Zenith draws no label through the line.
+ */
+import type { MigrateContext } from "../lib/types"
+import { dropWithHint } from "./mui-props"
+
+export const handles = ["Divider", "DividerProps"] as const
+
+export function migrate(ctx: MigrateContext): void {
+  const { jsx } = ctx
+  const elements = ctx.elements("Divider")
+  ctx.moveElements("Divider", "Separator")
+  ctx.move("DividerProps", "SeparatorProps")
+
+  elements.forEach((path) => {
+    const el = path.node
+    jsx.removeAttr(el, "light")
+    jsx.removeAttr(el, "textAlign")
+
+    const variant = jsx.mapAttrValue(el, "variant", { fullWidth: null })
+    if (variant === "unknown" || variant === "dynamic") {
+      const printed = jsx.print(jsx.attr(el, "variant")!)
+      jsx.removeAttr(el, "variant")
+      ctx.todo(
+        path,
+        "Divider",
+        `dropped ${printed}: inset/middle margins go on the Separator via makeZenithStyles (marginLeft: tokens.spacingGroup4)`
+      )
+    }
+
+    for (const [name, hint] of [
+      [
+        "flexItem",
+        'give the vertical Separator alignSelf: "stretch" and height: "auto" via makeZenithStyles',
+      ],
+      [
+        "absolute",
+        'position the Separator via makeZenithStyles (position: "absolute", bottom: 0, left: 0, width: "100%")',
+      ],
+    ] as const) {
+      const attr = jsx.attr(el, name)
+      if (!attr) continue
+      jsx.removeAttr(el, name)
+      ctx.todo(path, "Divider", `dropped ${jsx.print(attr)}: ${hint}`)
+    }
+
+    dropWithHint(ctx, path, "Divider")
+
+    const hasText = (el.children ?? []).some(
+      (c) => c.type !== "JSXText" || c.value.trim() !== ""
+    )
+    if (hasText)
+      ctx.todo(
+        path,
+        "Divider",
+        "Separator draws no label: move the children next to it (Text between two Separators in a flex row)"
+      )
+  })
+}

package/codemods/migrate/base-elements/feedback-message.ts

@@ -0,0 +1,95 @@
+/**
+ * FeedbackMessage → Callout.
+ *
+ * - `stateVariant` (a string or `FeedbackMessageStateVariant.x`; default warning) → `variant`:
+ *   error → destructive, and info, which base-elements drew in the neutral palette, → gray.
+ * - `feedbackMessage` → `CalloutDescription`.
+ * - `actionIcon` + `onActionButtonClick` (an icon button) are reported: put a ghost icon Button
+ *   in a `CalloutAction`.
+ * - `FeedbackMessageStateVariant` is dropped once no reference to it is left.
+ */
+import type { ASTPath, JSXElement } from "jscodeshift"
+import type { MigrateContext } from "../lib/types"
+import {
+  attrExpression,
+  fillCallout,
+  moveElements,
+  printAttrs,
+  takeAttrs,
+} from "./shared"
+
+export const handles = [
+  "FeedbackMessage",
+  "FeedbackMessageProps",
+  "FeedbackMessageStateVariant",
+] as const
+
+const STATES: Record<string, string> = {
+  success: "success",
+  warning: "warning",
+  error: "destructive",
+  info: "gray",
+}
+
+export function migrate(ctx: MigrateContext): void {
+  const { j } = ctx
+  moveElements(ctx, "FeedbackMessage", "Callout", (path) =>
+    migrateFeedback(ctx, path)
+  )
+  ctx.move("FeedbackMessageProps", "CalloutProps")
+
+  const enumLocal = ctx.names.FeedbackMessageStateVariant
+  if (!enumLocal) return
+  const used = ctx.root
+    .find(j.Identifier, { name: enumLocal })
+    .filter((p) => p.parent.node.type !== "ImportSpecifier")
+    .size()
+  if (used)
+    ctx.keep(
+      "FeedbackMessageStateVariant",
+      'use the Callout variant strings: "success" | "warning" | "destructive" | "gray"'
+    )
+  else ctx.drop("FeedbackMessageStateVariant")
+}
+
+function migrateFeedback(ctx: MigrateContext, path: ASTPath<JSXElement>): void {
+  const { jsx } = ctx
+  const el = path.node
+  const reported: string[] = []
+
+  const state = jsx.removeAttr(el, "stateVariant")
+  let expression = attrExpression(state)
+  while (expression?.type === "TSAsExpression")
+    expression = expression.expression as typeof expression
+  const literal = !state
+    ? "warning"
+    : expression?.type === "StringLiteral"
+      ? expression.value
+      : jsx.literal(state)
+  const member =
+    expression?.type === "MemberExpression" &&
+    !expression.computed &&
+    expression.property.type === "Identifier"
+      ? expression.property.name
+      : undefined
+  const key = typeof literal === "string" ? literal : member
+  if (key && STATES[key]) jsx.setAttr(el, "variant", STATES[key])
+  else
+    reported.push(
+      `dropped ${printAttrs(ctx, [state!])} (variant: success | warning | destructive | gray)`
+    )
+
+  const action = takeAttrs(ctx, el, ["actionIcon", "onActionButtonClick"])
+  if (action.length)
+    reported.push(
+      `dropped ${printAttrs(ctx, action)} (put a ghost icon Button with that onClick in a CalloutAction)`
+    )
+
+  const message = jsx.removeAttr(el, "feedbackMessage")
+  reported.push(
+    ...fillCallout(ctx, el, {
+      description: message ? [jsx.childFromValue(message)] : [],
+    })
+  )
+  if (reported.length) ctx.todo(path, "FeedbackMessage", reported.join("; "))
+}

package/codemods/migrate/base-elements/icon-button.ts

@@ -0,0 +1,203 @@
+/**
+ * IconButton, ElevatedIconButton, TooltipIconButton → Button with an icon size.
+ *
+ * - `size`: small → icon-xs (base-elements' small is 24px), medium (default) → icon, large →
+ *   icon-lg.
+ * - base-elements' IconButton is transparent by default, filled for `color="primary"` and
+ *   outlined for `color="secondary"`: ghost, primary, secondary.
+ * - ElevatedIconButton (a Paper inside a ButtonBase) → a secondary icon Button; its square or
+ *   rounded `variant` → `shape="normal"`, the default circle keeps Button's rounded shape.
+ * - TooltipIconButton → Tooltip + TooltipTrigger asChild + the Button + TooltipContent, with the
+ *   title as the button's aria-label too.
+ * - An icon-only button needs an accessible name: one without aria-label, aria-labelledby or
+ *   title is reported.
+ */
+import type { ASTPath, JSXAttribute, JSXElement } from "jscodeshift"
+import type { MigrateContext } from "../lib/types"
+import {
+  element,
+  mapAttr,
+  printAttr,
+  printAttrs,
+  renamedAttr,
+  setChildren,
+  takeAttrs,
+  moveElements,
+  defaultButtonType,
+} from "./shared"
+
+export const handles = [
+  "IconButton",
+  "IconButtonProps",
+  "ElevatedIconButton",
+  "ElevatedIconButtonProps",
+  "TooltipIconButton",
+] as const
+
+const SIZES = { small: "icon-xs", medium: "icon", large: "icon-lg" }
+const COLORS = {
+  default: "ghost",
+  inherit: "ghost",
+  primary: "primary",
+  secondary: "secondary",
+}
+const SILENT = ["disableRipple", "disableFocusRipple", "elevation", "square"]
+const UNSUPPORTED = [
+  "edge",
+  "classes",
+  "component",
+  "href",
+  "buttonRef",
+  "TouchRippleProps",
+]
+const NAMED = ["aria-label", "aria-labelledby", "title"]
+
+export function migrate(ctx: MigrateContext): void {
+  moveElements(ctx, "IconButton", "Button", (path) =>
+    migrateIconButton(ctx, path, "IconButton")
+  )
+  ctx.move("IconButtonProps", "ButtonProps")
+
+  moveElements(ctx, "ElevatedIconButton", "Button", (path) =>
+    migrateIconButton(ctx, path, "ElevatedIconButton")
+  )
+  ctx.keep(
+    "ElevatedIconButtonProps",
+    'type it as ButtonProps (an elevated icon button is <Button size="icon" variant="secondary">)'
+  )
+
+  let first = true
+  moveElements(ctx, "TooltipIconButton", "Tooltip", (path) => {
+    migrateTooltipIconButton(ctx, path, first && !ctx.names.Tooltip)
+    first = false
+  })
+}
+
+function migrateIconButton(
+  ctx: MigrateContext,
+  path: ASTPath<JSXElement>,
+  component: "IconButton" | "ElevatedIconButton"
+): void {
+  const { jsx } = ctx
+  const el = path.node
+  const reported: string[] = []
+
+  if (!jsx.attr(el, "size")) jsx.setAttr(el, "size", "icon")
+  else if (!mapAttr(ctx, el, "size", SIZES))
+    reported.push(
+      `dropped ${printAttrs(ctx, takeAttrs(ctx, el, ["size"]))} (small → icon-xs, medium → icon, large → icon-lg)`
+    )
+
+  if (component === "ElevatedIconButton") {
+    const variant = jsx.removeAttr(el, "variant")
+    const shape = jsx.literal(variant)
+    if (shape === "rounded" || shape === "square")
+      jsx.setAttr(el, "shape", "normal")
+    else if (variant && shape !== "circle")
+      reported.push(
+        `dropped ${printAttr(ctx, variant)} (shape: "normal" | "rounded")`
+      )
+    jsx.setAttr(el, "variant", "secondary")
+  } else {
+    const color = jsx.attr(el, "color")
+    if (!color) jsx.setAttr(el, "variant", "ghost")
+    else if (
+      !mapAttr(ctx, el, "color", COLORS, {
+        rename: "variant",
+        fallback: "primary",
+      })
+    ) {
+      jsx.removeAttr(el, "color")
+      jsx.setAttr(el, "variant", "ghost")
+    }
+  }
+
+  takeAttrs(ctx, el, SILENT)
+  const unsupported = takeAttrs(ctx, el, UNSUPPORTED)
+  if (unsupported.length)
+    reported.push(
+      `dropped ${printAttrs(ctx, unsupported)} (no Zenith equivalent)`
+    )
+  if (!NAMED.some((n) => jsx.attr(el, n)) && !jsx.hasSpread(el))
+    reported.push(
+      "add an aria-label: an icon-only Button has no accessible name otherwise"
+    )
+  defaultButtonType(ctx, el)
+  if (reported.length) ctx.todo(path, component, reported.join("; "))
+}
+
+function migrateTooltipIconButton(
+  ctx: MigrateContext,
+  path: ASTPath<JSXElement>,
+  remindProvider: boolean
+): void {
+  const { j, jsx } = ctx
+  const el = path.node
+  const reported: string[] = []
+
+  const title = jsx.attr(el, "title")
+  const icon = jsx.attr(el, "Icon")
+  const button: JSXAttribute[] = [
+    j.jsxAttribute(j.jsxIdentifier("type"), jsx.str("button")),
+  ]
+  if (title) button.push(renamedAttr(j, title, "aria-label"))
+  for (const name of ["disabled", "onClick"]) {
+    const a = jsx.attr(el, name)
+    if (a) button.push(a)
+  }
+  const size = jsx.attr(el, "size")
+  const sizeValue = size ? jsx.literal(size) : "small"
+  if (typeof sizeValue === "string" && sizeValue in SIZES)
+    button.push(
+      j.jsxAttribute(
+        j.jsxIdentifier("size"),
+        jsx.str(SIZES[sizeValue as keyof typeof SIZES])
+      )
+    )
+  else {
+    button.push(j.jsxAttribute(j.jsxIdentifier("size"), jsx.str("icon-xs")))
+    reported.push(
+      `dropped ${printAttr(ctx, size!)} (small → icon-xs, medium → icon)`
+    )
+  }
+  button.push(j.jsxAttribute(j.jsxIdentifier("variant"), jsx.str("ghost")))
+  const onClose = jsx.attr(el, "onClose")
+  if (onClose)
+    reported.push(
+      `dropped ${printAttr(ctx, onClose)} (Tooltip onOpenChange(open) runs on every change: act when open is false)`
+    )
+
+  const buttonEl = element(
+    j,
+    ctx.ensureZenith("Button"),
+    button,
+    icon ? [jsx.childFromValue(icon)] : []
+  )
+  const trigger = element(
+    j,
+    ctx.ensureZenith("TooltipTrigger"),
+    [j.jsxAttribute(j.jsxIdentifier("asChild"))],
+    [j.jsxText("\n"), buttonEl, j.jsxText("\n")]
+  )
+  const content = element(
+    j,
+    ctx.ensureZenith("TooltipContent"),
+    [j.jsxAttribute(j.jsxIdentifier("side"), jsx.str("top"))],
+    title ? [jsx.childFromValue(title)] : []
+  )
+  el.openingElement.attributes = (el.openingElement.attributes ?? []).filter(
+    (a) => a.type === "JSXAttribute" && jsx.attrName(a) === "key"
+  )
+  setChildren(j, el, [
+    j.jsxText("\n"),
+    trigger,
+    j.jsxText("\n"),
+    content,
+    j.jsxText("\n"),
+  ])
+  if (remindProvider)
+    reported.push(
+      "Zenith's Tooltip throws without a TooltipProvider above it: add one once at the app root if there is none"
+    )
+  if (reported.length) ctx.todo(path, "TooltipIconButton", reported.join("; "))
+}