111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
import * as React from "react"
|
|
import { cn } from "cn"
|
|
|
|
// Card is the ui_viz Content Card (external ui_viz docs/patterns/content-container.md Type B; HM spec: docs/components/card.md).
|
|
// `surface` is its ui_viz surface axis: White (default) or Beige.
|
|
// Border, radius, surface, padding and the Title typography come from packages/ui/src/theme/card.css. `size="sm"` is a shadcn size ui_viz does not define.
|
|
type CardSurface = "surface" | "content"
|
|
|
|
function Card({
|
|
className,
|
|
size = "default",
|
|
surface = "surface",
|
|
...props
|
|
}: React.ComponentProps<"div"> & { size?: "default" | "sm"; surface?: CardSurface }) {
|
|
return (
|
|
<div
|
|
data-slot="card"
|
|
data-size={size}
|
|
data-surface={surface}
|
|
className={cn(
|
|
"group/card flex flex-col gap-(--card-spacing) py-(--card-spacing) text-sm has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="card-header"
|
|
className={cn(
|
|
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="card-title"
|
|
className={cn(
|
|
"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="card-description"
|
|
className={cn("text-sm text-muted-foreground", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="card-action"
|
|
className={cn(
|
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="card-content"
|
|
className={cn("px-(--card-spacing)", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="card-footer"
|
|
className={cn(
|
|
"flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export type { CardSurface }
|
|
export {
|
|
Card,
|
|
CardHeader,
|
|
CardFooter,
|
|
CardTitle,
|
|
CardAction,
|
|
CardDescription,
|
|
CardContent,
|
|
}
|