Container Card

1/** @jsxImportSource hono/jsx */
2import type { Child, PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Container Card — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// A self-adapting card that restyles based on its OWN inline width rather than
8// the viewport. The same markup renders stacked (media above text) when it sits
9// in a narrow column or sidebar, and side-by-side (media beside text) when it
10// has room — so one component drops into a sidebar, a wide content column, or a
11// grid cell with no per-call breakpoints. Pure CSS; zero JavaScript.
12//
13// Built on (read before editing):
14//   - CSS `container-type: inline-size` — establishes the card as a size query
15//     container so its descendants can be styled against the card's own inline
16//     width (computed in isolation, with inline-size containment to avoid query
17//     loops). We name the container so the threshold variant targets THIS card
18//     and not some ancestor container.
19//       repos/mdn/files/en-us/web/css/reference/properties/container-type/index.md
20//   - The web.dev "Container query card" pattern — base styles are single
21//     column / centred; an `@container (min-width: …)` rule flips to a
22//     two-column grid and reveals the description at wider container sizes.
23//       repos/web.dev/src/site/content/en/patterns/layout/container-query-card/index.md
24//       repos/web.dev/src/site/content/en/patterns/layout/container-query-card/assets/style.css
25//
26// shadcn/ui's Card is a static container with no self-adapting behaviour, so
27// there is no upstream class string to mirror 1:1 — we keep the same visual
28// shell (rounded border, bg-card, shadow) as registry/ui/card.tsx and add the
29// container-query layout.
30//   Card shell mirrored from: registry/ui/card.tsx
31//
32// Tailwind v4 container queries (verified against the engine):
33//   - `@container/container-card` → container-type: inline-size + container-name
34//     (repos/tailwindcss/packages/tailwindcss/src/utilities.ts: the `@container`
35//      functional utility emits `container-type` and, with a modifier, the
36//      `container-name`).
37//   - `@min-[28rem]/container-card:<util>` → wraps the utility in
38//     `@container container-card (min-width: 28rem)` so it only fires when THIS
39//     named card is at least the threshold wide
40//     (repos/tailwindcss/packages/tailwindcss/src/variants.ts: the `@container`
41//      variant supports an optional name then the size query).
42// … truncated