Card

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3import { cn } from "@/lib/utils";
4 
5// ─── Card Root ──────────────────────────────────────────────────────────────
6 
7const cardVariants = cva(
8  "poyraz-card relative flex flex-col overflow-hidden border text-card-foreground transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]",
9  {
10    variants: {
11      variant: {
12        default: "border-border bg-surface shadow-xs",
13        soft: "border-transparent bg-surface-subtle shadow-none",
14        outline: "border-border-strong bg-transparent shadow-none",
15        glass:
16          "border-glass-border-outer bg-glass shadow-[var(--poyraz-glass-shadow)] backdrop-blur-glass",
17        elevated: "border-border/80 bg-surface-elevated shadow-lg",
18        interactive: "border-border bg-surface shadow-sm hover:border-primary/25 hover:shadow-md",
19        bordered: "border-border-strong bg-surface shadow-none",
20        highlight: "border-border border-l-4 border-l-primary bg-surface shadow-xs",
21        ghost:
22          "border-transparent bg-transparent shadow-none hover:border-border hover:bg-surface-subtle",
23      },
24      radius: {
25        none: "rounded-none",
26        md: "rounded-md",
27        lg: "rounded-lg",
28        xl: "rounded-xl",
29        "2xl": "rounded-2xl",
30      },
31    },
32    defaultVariants: {
33      variant: "default",
34      radius: "xl",
35    },
36  },
37);
38 
39export interface CardProps
40  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {}
41 
42const Card = React.forwardRef<HTMLDivElement, CardProps>(
43  ({ className, radius, variant, ...props }, ref) => {
44    return (
45      <div
46        ref={ref}
47        data-slot="card"
48        data-variant={variant ?? "default"}
49        data-radius={radius ?? "xl"}
50        className={cn(cardVariants({ variant, radius }), className)}
51        {...props}
52      />
53    );
54  },
55);
56Card.displayName = "Card";
57 
58// ─── Card Image ─────────────────────────────────────────────────────────────
59 
60export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
61// … truncated