{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "A bordered container for grouping related content, with header, title, description, action, content and footer parts.",
  "dependencies": [
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/card.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\nexport const cardVariants = tv({\n  base: \"flex flex-col rounded-card text-card-foreground\",\n  variants: {\n    variant: {\n      /** Border on the card background. The default. */\n      outline: \"border border-border bg-card\",\n      /** A quiet filled panel, for grouping inside another card or a sidebar. */\n      muted: \"border border-transparent bg-muted\",\n      /** Floats above the page (menus, hover cards). The only card with a shadow. */\n      elevated: \"border border-border bg-popover text-popover-foreground shadow-float\",\n      /** No border or fill; just the spacing and parts. */\n      ghost: \"border border-transparent\",\n    },\n    /** Hover and focus styles for a card that is itself a link or button. */\n    isInteractive: {\n      true: [\n        \"cursor-pointer transition-colors duration-fast ease-standard hover:border-foreground/20 hover:bg-accent/40\",\n        \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n      ],\n    },\n  },\n  defaultVariants: { variant: \"outline\", isInteractive: false },\n});\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {}\n\n/**\n * A bordered container for grouping related content, with header, title, description, action, content and footer parts.\n *\n *   <Card>\n *     <CardHeader><CardTitle>Usage</CardTitle><CardDescription>Last 30 days</CardDescription></CardHeader>\n *     <CardContent>...</CardContent>\n *     <CardFooter>...</CardFooter>\n *   </Card>\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, variant, isInteractive, ...props }, ref) => (\n  <div ref={ref} data-slot=\"card\" className={cn(cardVariants({ variant, isInteractive }), className)} {...props} />\n));\nCard.displayName = \"Card\";\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"card-header\"\n      className={cn(\"grid gap-1 px-5 pt-5 [&:last-child]:pb-5 has-[[data-slot=card-action]]:grid-cols-[1fr_auto]\", className)}\n      {...props}\n    />\n  ),\n);\nCardHeader.displayName = \"CardHeader\";\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /** Heading level. Default h3. */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, as: Comp = \"h3\", ...props }, ref) => (\n    <Comp ref={ref} data-slot=\"card-title\" className={cn(\"text-base leading-6 font-semibold tracking-tight\", className)} {...props} />\n  ),\n);\nCardTitle.displayName = \"CardTitle\";\n\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} data-slot=\"card-description\" className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n  ),\n);\nCardDescription.displayName = \"CardDescription\";\n\n/** Top-right slot in a CardHeader, for a button or menu. */\nexport const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"card-action\"\n      className={cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n      {...props}\n    />\n  ),\n);\nCardAction.displayName = \"CardAction\";\n\nexport const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-slot=\"card-content\" className={cn(\"px-5 pt-4 [&:first-child]:pt-5 [&:last-child]:pb-5\", className)} {...props} />\n  ),\n);\nCardContent.displayName = \"CardContent\";\n\nexport const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"card-footer\"\n      className={cn(\"mt-auto flex items-center gap-2 px-5 pt-4 pb-5 [&:first-child]:pt-5\", className)}\n      {...props}\n    />\n  ),\n);\nCardFooter.displayName = \"CardFooter\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/card",
  "meta": {
    "hash": "33b4baa5def52753",
    "source": "packages/react/src/components/card.tsx",
    "exports": [
      "cardVariants",
      "CardProps",
      "Card",
      "CardHeader",
      "CardTitleProps",
      "CardTitle",
      "CardDescription",
      "CardAction",
      "CardContent",
      "CardFooter"
    ],
    "props": {
      "Card": {
        "extends": "React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>",
        "props": []
      },
      "CardTitle": {
        "extends": "React.HTMLAttributes<HTMLHeadingElement>",
        "props": [
          {
            "name": "as",
            "optional": true,
            "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
            "description": "Heading level. Default h3."
          }
        ]
      }
    },
    "variants": {
      "variants": {
        "variant": [
          "outline",
          "muted",
          "elevated",
          "ghost"
        ],
        "isInteractive": [
          "true"
        ]
      },
      "defaultVariants": {
        "variant": "outline",
        "isInteractive": "false"
      }
    },
    "usage": "<Card>\n  <CardHeader><CardTitle>Usage</CardTitle><CardDescription>Last 30 days</CardDescription></CardHeader>\n  <CardContent>...</CardContent>\n  <CardFooter>...</CardFooter>\n</Card>",
    "docsUrl": "https://junco.madebytobi.com/docs/components/card"
  }
}