Files
shadcn/apps/v4/components/code-collapsible-wrapper.tsx
zeekay 05fc512820 feat: sync upstream shadcn/ui — [email protected], v4 app, font system, chart improvements
Upstream sync from shadcn-ui/ui (1686 commits since last merge base).

Key changes:
- packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors)
- apps/v4 replaces apps/www as the primary docs/registry app
- Font system: 25+ heading font registries, font markers utility, @supports override
- Chart improvements: recharts v3 compat, radial chart fixes
- templates/ updated with monorepo variants (astro, vite, react-router, start)
- skills/shadcn AI skill definitions added
- deprecated/ removed (auth, auth-firebase, cli, www)

Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
2026-03-24 19:04:31 -07:00

52 lines
1.7 KiB
TypeScript

"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/registry/new-york-v4/ui/button"
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/registry/new-york-v4/ui/collapsible"
import { Separator } from "@/registry/new-york-v4/ui/separator"
export function CodeCollapsibleWrapper({
className,
children,
...props
}: React.ComponentProps<typeof Collapsible>) {
const [isOpened, setIsOpened] = React.useState(false)
return (
<Collapsible
open={isOpened}
onOpenChange={setIsOpened}
className={cn("group/collapsible relative md:-mx-1", className)}
{...props}
>
<CollapsibleTrigger asChild>
<div className="absolute top-1.5 right-9 z-10 flex items-center">
<Button
variant="ghost"
size="sm"
className="h-7 rounded-md px-2 text-muted-foreground"
>
{isOpened ? "Collapse" : "Expand"}
</Button>
<Separator orientation="vertical" className="mx-1.5 h-4!" />
</div>
</CollapsibleTrigger>
<CollapsibleContent
forceMount
className="relative mt-6 overflow-hidden data-[state=closed]:max-h-64 data-[state=closed]:[content-visibility:auto] [&>figure]:mt-0 [&>figure]:md:mx-0!"
>
{children}
</CollapsibleContent>
<CollapsibleTrigger className="absolute inset-x-0 -bottom-2 flex h-20 items-center justify-center rounded-b-lg bg-gradient-to-b from-code/70 to-code text-sm text-muted-foreground group-data-[state=open]/collapsible:hidden">
{isOpened ? "Collapse" : "Expand"}
</CollapsibleTrigger>
</Collapsible>
)
}