Card

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Card — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// Source of truth (1:1 class strings):
8//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/card.tsx
9//
10// Card is structural — a rounded container with a Header / Title /
11// Description / Content / Footer layout. No interactivity, no JS.
12// Pair it with htmx attributes on inner elements when you need to swap
13// the contents server-side.
14 
15type CardAs = "div" | "article" | "section" | "li" | "aside"
16 
17export function Card(
18  props: PropsWithChildren<
19    {
20      class?: ClassValue
21      id?: string
22      // Semantic element. shadcn upstream hardcodes <div>; we default to
23      // <div> for backwards-compat but encourage <article> for self-
24      // contained content (product card, blog tile, comment) and
25      // <section> for thematic groups inside a landmark.
26      // See repos/mdn/files/en-us/web/html/reference/elements/article/index.md:10,65-68
27      as?: CardAs
28      // Pair with the id of the CardTitle inside so the rendered <article>
29      // / <section> has an accessible name for AT landmark navigation.
30      ariaLabelledby?: string
31      ariaLabel?: string
32    } & Record<string, any>
33  >,
34) {
35  const { class: className, children, as = "div", ariaLabelledby, ariaLabel, ...rest } = props
36  const Tag: any = as
37  return (
38    <Tag
39      data-slot="card"
40      class={cn(
41        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
42        className,
43      )}
44      aria-labelledby={ariaLabelledby}
45      aria-label={ariaLabel}
46      {...rest}
47    >
48      {children}
49    </Tag>
50  )
51}
52 
53export function CardHeader(
54  props: PropsWithChildren<{ class?: ClassValue }>,
55) {
56  return (
57    <div
58      data-slot="card-header"
59      class={cn(
60        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
61        props.class,
62      )}
63    >
64      {props.children}
65    </div>
66  )
67}
68 
69type CardTitleAs = "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
70 
71export function CardTitle(
72  props: PropsWithChildren<{
73    class?: ClassValue
74    // Render as a real heading so an `as="article"|"section"` Card gets a
75    // child heading and contributes to the document outline. Default "div"
76    // preserves shadcn upstream behaviour.
77// … truncated