Collapsible

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Collapsible — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// shadcn upstream uses Radix Collapsible (a CollapsibleTrigger button + a
8// CollapsibleContent region wired together with aria-expanded / aria-controls
9// and JS state). We use the native HTML disclosure widget instead:
10//   <details><summary>Trigger</summary>...content...</details>
11// so the platform gives us, with zero JS:
12//   - Click / Space / Enter toggles open (browser default on <summary>).
13//   - <summary> is implicitly role="button", focusable, with its text as the
14//     accessible name; the browser sets aria-expanded to mirror `open`.
15//   - The content is the accessible description of the summary.
16//
17// This is the WAI-ARIA Disclosure (Show/Hide) pattern: a single button that
18// shows/hides one section of content. Distinct from Accordion — Collapsible
19// is a standalone, single show/hide, NOT a group, so there is no `name`
20// attribute and no exclusive grouping. No public/site.js hook is required:
21// the entire keyboard contract (Enter / Space) is native to <summary>.
22//
23// Refs:
24//   repos/aria-practices/content/patterns/disclosure/disclosure-pattern.html
25//     (Keyboard: Enter / Space toggle; role=button; aria-expanded true/false)
26//   repos/mdn/files/en-us/web/html/reference/elements/details/index.md
27//     (`open` boolean; implicit ARIA role=group; toggle event)
28//   repos/mdn/files/en-us/web/html/reference/elements/summary/index.md
29//     (click/Space toggles parent <details>; display:list-item marker)
30 
31type CollapsibleProps = PropsWithChildren<{
32  // Pre-open the disclosure on initial render.
33  open?: boolean
34  disabled?: boolean
35  class?: ClassValue
36}>
37 
38export function Collapsible(props: CollapsibleProps) {
39  const { open, disabled, class: className, children, ...rest } = props
40  return (
41    <details
42      data-slot="collapsible"
43      data-disabled={disabled ? "true" : undefined}
44      open={open}
45      class={cn(
46        "w-full",
47        disabled && "pointer-events-none opacity-50",
48        className,
49      )}
50      {...rest}
51    >
52      {children}
53    </details>
54  )
55}
56 
57type CollapsibleTriggerProps = PropsWithChildren<{ class?: ClassValue }>
58 
59export function CollapsibleTrigger(props: CollapsibleTriggerProps) {
60  const { class: className, children, ...rest } = props
61  return (
62    <summary
63      data-slot="collapsible-trigger"
64// … truncated