{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-variants",
  "title": "Card Variants",
  "author": "Poyraz Avsever",
  "description": "Poyraz Soft Glass card-variants component.",
  "dependencies": [
    "lucide-react@^0.574.0"
  ],
  "registryDependencies": [
    "@poyraz/poyraz-utils",
    "@poyraz/poyraz-theme",
    "@poyraz/card",
    "@poyraz/badge",
    "@poyraz/button"
  ],
  "files": [
    {
      "path": "registry/poyraz/ui/phase5/atoms/card-variants.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/atoms/badge\";\nimport { Button } from \"@/components/ui/atoms/button\";\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardHeading,\n  CardImage,\n  CardTitle,\n  type CardProps,\n} from \"@/components/ui/atoms/card\";\nimport { cn } from \"@/lib/utils\";\n\ntype CompositionProps = CardProps;\n\ninterface BasicContentCardProps extends Omit<CompositionProps, \"title\"> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n}\n\nfunction BasicContentCard({\n  action,\n  children,\n  description,\n  title,\n  ...props\n}: BasicContentCardProps) {\n  return (\n    <Card data-slot=\"basic-content-card\" {...props}>\n      <CardHeader>\n        <CardHeading>\n          <CardTitle>{title}</CardTitle>\n          {description && <CardDescription>{description}</CardDescription>}\n        </CardHeading>\n        {action && <CardAction>{action}</CardAction>}\n      </CardHeader>\n      {children && <CardContent>{children}</CardContent>}\n    </Card>\n  );\n}\n\ninterface ImageContentCardProps extends Omit<CompositionProps, \"title\"> {\n  src: string;\n  alt: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  category?: React.ReactNode;\n  action?: React.ReactNode;\n}\n\nfunction ImageContentCard({\n  action,\n  alt,\n  category,\n  description,\n  src,\n  title,\n  ...props\n}: ImageContentCardProps) {\n  return (\n    <Card data-slot=\"image-content-card\" variant=\"interactive\" className=\"group\" {...props}>\n      <CardImage>\n        <img\n          src={src}\n          alt={alt}\n          className=\"size-full object-cover transition-transform duration-300 group-hover:scale-[1.03]\"\n        />\n      </CardImage>\n      <CardHeader>\n        <CardHeading>\n          {category && (\n            <Badge size=\"sm\" className=\"mb-1 w-fit\">\n              {category}\n            </Badge>\n          )}\n          <CardTitle>{title}</CardTitle>\n          {description && <CardDescription>{description}</CardDescription>}\n        </CardHeading>\n      </CardHeader>\n      {action && <CardFooter>{action}</CardFooter>}\n    </Card>\n  );\n}\n\ninterface HorizontalCardProps extends ImageContentCardProps {\n  imageClassName?: string;\n}\n\nfunction HorizontalCard({\n  action,\n  alt,\n  category,\n  description,\n  imageClassName,\n  src,\n  title,\n  ...props\n}: HorizontalCardProps) {\n  return (\n    <Card\n      data-slot=\"horizontal-card\"\n      className=\"grid overflow-hidden sm:grid-cols-[minmax(9rem,38%)_1fr]\"\n      {...props}\n    >\n      <div\n        data-slot=\"horizontal-card-image\"\n        className={cn(\n          \"min-h-40 overflow-hidden border-b border-border sm:border-b-0 sm:border-r\",\n          imageClassName,\n        )}\n      >\n        <img src={src} alt={alt} className=\"size-full object-cover\" />\n      </div>\n      <div className=\"flex min-w-0 flex-col\">\n        <CardHeader>\n          <CardHeading>\n            {category && (\n              <Badge size=\"sm\" className=\"mb-1 w-fit\">\n                {category}\n              </Badge>\n            )}\n            <CardTitle>{title}</CardTitle>\n            {description && <CardDescription>{description}</CardDescription>}\n          </CardHeading>\n        </CardHeader>\n        {action && <CardFooter>{action}</CardFooter>}\n      </div>\n    </Card>\n  );\n}\n\ninterface ProfileCardProps extends Omit<CompositionProps, \"title\" | \"role\"> {\n  avatar: string;\n  name: React.ReactNode;\n  role?: React.ReactNode;\n  bio?: React.ReactNode;\n  socialActions?: React.ReactNode;\n}\n\nfunction ProfileCard({ avatar, bio, name, role, socialActions, ...props }: ProfileCardProps) {\n  return (\n    <Card data-slot=\"profile-card\" {...props}>\n      <CardContent className=\"flex flex-col items-center p-6 text-center\">\n        <img\n          src={avatar}\n          alt=\"\"\n          className=\"size-20 rounded-full border-4 border-surface object-cover shadow-md\"\n        />\n        <CardTitle className=\"mt-4 max-w-full break-words text-center\">{name}</CardTitle>\n        {role && <p className=\"mt-1 text-sm text-primary\">{role}</p>}\n        {bio && <CardDescription className=\"mt-3\">{bio}</CardDescription>}\n        {socialActions && (\n          <div data-slot=\"profile-card-actions\" className=\"mt-4 flex items-center gap-2\">\n            {socialActions}\n          </div>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n\ninterface StatisticCardProps extends CompositionProps {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  change?: React.ReactNode;\n  trend?: \"up\" | \"down\" | \"neutral\";\n  chart?: React.ReactNode;\n  icon?: React.ReactNode;\n}\n\nfunction StatisticCard({\n  chart,\n  change,\n  icon,\n  label,\n  trend = \"neutral\",\n  value,\n  ...props\n}: StatisticCardProps) {\n  return (\n    <Card data-slot=\"statistic-card\" {...props}>\n      <CardHeader>\n        <CardHeading>\n          <CardDescription>{label}</CardDescription>\n        </CardHeading>\n        {icon && <CardAction>{icon}</CardAction>}\n      </CardHeader>\n      <CardContent>\n        <div className=\"text-3xl font-bold tracking-tight text-foreground\">{value}</div>\n        {change && (\n          <div\n            className={cn(\n              \"mt-1 text-xs font-medium\",\n              trend === \"up\" && \"text-success-icon\",\n              trend === \"down\" && \"text-destructive\",\n              trend === \"neutral\" && \"text-muted-foreground\",\n            )}\n          >\n            {change}\n          </div>\n        )}\n        {chart && (\n          <div data-slot=\"statistic-card-chart\" className=\"mt-4 h-16 text-primary\">\n            {chart}\n          </div>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n\ninterface PricingPlanCardProps extends Omit<CompositionProps, \"title\"> {\n  name: React.ReactNode;\n  price: React.ReactNode;\n  period?: React.ReactNode;\n  description?: React.ReactNode;\n  features: React.ReactNode[];\n  action: React.ReactNode;\n  popular?: boolean;\n}\n\nfunction PricingPlanCard({\n  action,\n  description,\n  features,\n  name,\n  period,\n  popular,\n  price,\n  ...props\n}: PricingPlanCardProps) {\n  return (\n    <Card\n      data-slot=\"pricing-plan-card\"\n      variant={popular ? \"interactive\" : \"default\"}\n      className={cn(popular && \"border-primary/50 shadow-md\")}\n      {...props}\n    >\n      <CardHeader>\n        <CardHeading>\n          <CardTitle>{name}</CardTitle>\n          {description && <CardDescription>{description}</CardDescription>}\n        </CardHeading>\n        {popular && (\n          <CardAction>\n            <Badge>Popular</Badge>\n          </CardAction>\n        )}\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex items-baseline gap-1\">\n          <span className=\"text-3xl font-bold\">{price}</span>\n          {period && <span className=\"text-sm text-muted-foreground\">/{period}</span>}\n        </div>\n        <ul className=\"mt-5 space-y-2.5 text-sm\">\n          {features.map((feature, index) => (\n            <li key={index} className=\"flex gap-2 before:text-primary before:content-['✓']\">\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>{action}</CardFooter>\n    </Card>\n  );\n}\n\ninterface FeatureCardProps extends Omit<CompositionProps, \"title\"> {\n  icon: React.ReactNode;\n  title: React.ReactNode;\n  description: React.ReactNode;\n  action?: React.ReactNode;\n}\n\nfunction FeatureCard({ action, description, icon, title, ...props }: FeatureCardProps) {\n  return (\n    <Card data-slot=\"feature-card\" variant=\"soft\" {...props}>\n      <CardContent className=\"p-5\">\n        <div className=\"mb-4 flex size-10 items-center justify-center rounded-xl bg-primary-muted text-primary\">\n          {icon}\n        </div>\n        <CardTitle>{title}</CardTitle>\n        <CardDescription className=\"mt-2\">{description}</CardDescription>\n        {action && <div className=\"mt-4\">{action}</div>}\n      </CardContent>\n    </Card>\n  );\n}\n\nfunction GlassCard({ className, ...props }: CompositionProps) {\n  return (\n    <Card\n      data-slot=\"glass-card\"\n      variant=\"glass\"\n      className={cn(\"poyraz-glass\", className)}\n      {...props}\n    />\n  );\n}\n\ninterface InteractiveCardProps extends CompositionProps {\n  actions?: React.ReactNode;\n}\n\nfunction InteractiveCard({ actions, children, className, ...props }: InteractiveCardProps) {\n  return (\n    <Card\n      data-slot=\"interactive-card\"\n      variant=\"interactive\"\n      className={cn(\"group\", className)}\n      {...props}\n    >\n      {children}\n      {actions && (\n        <div\n          data-slot=\"interactive-card-actions\"\n          className=\"absolute inset-x-4 bottom-4 opacity-0 transition-opacity duration-[var(--poyraz-motion-duration-fast)] group-hover:opacity-100 group-focus-within:opacity-100\"\n        >\n          {actions}\n        </div>\n      )}\n    </Card>\n  );\n}\n\ninterface ExpandableCardProps extends CompositionProps {\n  summary: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  expandLabel?: string;\n}\n\nfunction ExpandableCard({\n  children,\n  defaultOpen = false,\n  expandLabel = \"Show details\",\n  onOpenChange,\n  open,\n  summary,\n  ...props\n}: ExpandableCardProps) {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n  const isOpen = open ?? internalOpen;\n  const setOpen = (next: boolean) => {\n    if (open === undefined) setInternalOpen(next);\n    onOpenChange?.(next);\n  };\n\n  return (\n    <Card data-slot=\"expandable-card\" data-state={isOpen ? \"open\" : \"closed\"} {...props}>\n      <CardContent className=\"p-5\">{summary}</CardContent>\n      <div\n        data-slot=\"expandable-card-content\"\n        aria-hidden={!isOpen}\n        inert={!isOpen}\n        className={cn(\n          \"grid transition-[grid-template-rows,opacity] duration-[var(--poyraz-motion-duration-slow)] ease-[var(--poyraz-motion-ease-out)] motion-reduce:duration-[1ms]\",\n          isOpen ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n        )}\n      >\n        <div className=\"min-h-0 overflow-hidden\">\n          <div className=\"border-t border-border px-5 py-4 text-sm\">{children}</div>\n        </div>\n      </div>\n      <CardFooter>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => setOpen(!isOpen)}\n          aria-expanded={isOpen}\n          className=\"ml-auto\"\n        >\n          {expandLabel}\n          <ChevronDown className={cn(\"transition-transform\", isOpen && \"rotate-180\")} />\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n\nexport {\n  BasicContentCard,\n  ExpandableCard,\n  FeatureCard,\n  GlassCard,\n  HorizontalCard,\n  ImageContentCard,\n  InteractiveCard,\n  PricingPlanCard,\n  ProfileCard,\n  StatisticCard,\n};\n",
      "type": "registry:ui",
      "target": "@ui/atoms/card-variants.tsx"
    }
  ],
  "meta": {
    "category": "phase-5-foundation",
    "phase": "beta"
  },
  "type": "registry:ui"
}