Link

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Link — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// shadcn/ui has no standalone "link" primitive — it styles links through the
8// Button `link` variant and the `typography` docs. We ship a dedicated,
9// text-first anchor instead. Anatomy/intent cross-checked against the Button
10// `link` variant: repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/button.tsx.
11//
12// Accessibility contract — WAI-ARIA APG Link pattern:
13//   repos/aria-practices/content/patterns/link/link-pattern.html
14// The APG itself says: "Authors are strongly encouraged to use a native host
15// language link element, such as an HTML <a> element with an href attribute."
16// So we render a real <a href>. That gives us, for free and without any JS:
17//   - the implicit `link` role (MDN: <a> has role=link when href is present —
18//     repos/mdn/files/en-us/web/html/reference/elements/a/index.md "Implicit
19//     ARIA role"),
20//   - Enter activates + moves focus to the target (the APG keyboard contract —
21//     link-pattern.html "Keyboard Interaction": Enter executes the link),
22//   - browser affordances the APG example flags as lost when you fake a link
23//     with role=link on a <span>: open-in-new-tab, copy-link, drag, Shift+F10
24//     context menu.
25// The APG link *examples* (link/examples/link.html) only reach for
26// role=link + tabindex=0 + onkeydown when the markup genuinely cannot be an
27// <a> (a <span> or <img>). We expose that fallback via `as` + `role="link"`,
28// but the default — and the path we document — is the native element.
29//
30// `external` sets target/rel and renders a visible "opens in new tab" icon +
31// visually-hidden text, per MDN's "External links" guidance
32// (a/index.md "External links and linking to non-HTML resources"). Modern
33// browsers treat target="_blank" as rel="noopener" implicitly; we still emit
34// rel="noopener noreferrer" so the protection is explicit and back-compatible.
35 
36export type LinkVariant =
37  | "default" // underlined, primary colour — reads as a link in prose
38  | "muted" // muted-foreground, underlined — low-emphasis inline link
39  | "hover" // no underline at rest, underline on hover/focus — nav/menu link
40 
41const base =
42  "inline-flex items-center gap-1 rounded-sm font-medium text-primary underline-offset-4 transition-colors outline-none " +
43// … truncated