{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/card/Card.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { CardVariants } from './card.variants'\n\n  export interface CardProps extends HTMLAttributes<HTMLDivElement> {\n    variant?: CardVariants['variant']\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { cardVariants } from './card.variants'\n\n  let { class: className, variant = 'default', children, ref = $bindable(null), ...restProps }: CardProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"card\"\n  data-variant={variant}\n  class={cn(cardVariants({ variant }), 'overflow-hidden', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/card/Card.svelte"
    },
    {
      "path": "packages/registry-svelte/components/card/CardAction.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CardActionProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: CardActionProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"card-action\"\n  class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/card/CardAction.svelte"
    },
    {
      "path": "packages/registry-svelte/components/card/CardContent.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: CardContentProps = $props()\n</script>\n\n<div bind:this={ref} data-uipkge data-slot=\"card-content\" class={cn('p-6 pt-0', className)} {...restProps}>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/card/CardContent.svelte"
    },
    {
      "path": "packages/registry-svelte/components/card/CardDescription.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n    ref?: HTMLParagraphElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: CardDescriptionProps = $props()\n</script>\n\n<p\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"card-description\"\n  class={cn('text-muted-foreground text-sm', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</p>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/card/CardDescription.svelte"
    },
    {
      "path": "packages/registry-svelte/components/card/CardFooter.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: CardFooterProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"card-footer\"\n  class={cn('flex items-center p-6 pt-0', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/card/CardFooter.svelte"
    },
    {
      "path": "packages/registry-svelte/components/card/CardHeader.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: CardHeaderProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"card-header\"\n  class={cn(\n    'grid auto-rows-min grid-cols-[minmax(0,1fr)] grid-rows-[auto_auto] items-start gap-1.5 p-6 has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto]',\n    className,\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/card/CardHeader.svelte"
    },
    {
      "path": "packages/registry-svelte/components/card/CardTitle.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, as = 'h3', children, ref = $bindable(null), ...restProps }: CardTitleProps = $props()\n</script>\n\n<svelte:element\n  this={as}\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"card-title\"\n  class={cn('leading-none font-semibold tracking-tight', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</svelte:element>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/card/CardTitle.svelte"
    },
    {
      "path": "packages/registry-svelte/components/card/card.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so `Card.vue` can `import { cardVariants } from './card.variants'`\n * without creating a circular dependency back through the index. The circular\n * form caused intermittent `$setup.cardVariants is not a function` errors\n * during dev SSR when several `<Card>` instances rendered in a v-for before\n * the module graph had fully resolved.\n */\nexport const cardVariants = cva(\n  'bg-card text-card-foreground rounded-xl border shadow-sm transition-colors duration-150',\n  {\n    variants: {\n      variant: {\n        default: 'border-border',\n        elevated: 'border-transparent shadow-md hover:shadow-md',\n        outline: 'border-2',\n        ghost: 'border-transparent shadow-none hover:bg-muted/50',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type CardVariants = VariantProps<typeof cardVariants>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/card/card.variants.ts"
    },
    {
      "path": "packages/registry-svelte/components/card/index.ts",
      "content": "export { default as Card, type CardProps } from './Card.svelte'\nexport { default as CardAction, type CardActionProps } from './CardAction.svelte'\nexport { default as CardContent, type CardContentProps } from './CardContent.svelte'\nexport { default as CardDescription, type CardDescriptionProps } from './CardDescription.svelte'\nexport { default as CardFooter, type CardFooterProps } from './CardFooter.svelte'\nexport { default as CardHeader, type CardHeaderProps } from './CardHeader.svelte'\nexport { default as CardTitle, type CardTitleProps } from './CardTitle.svelte'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Card.svelte <-> index.ts circular import that broke dev SSR in Vue).\nexport { cardVariants, type CardVariants } from './card.variants'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/card/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Bordered container with an opinionated header / content / footer layout. Use it as the wrapper around any self-contained block of content — settings panels, dashboard tiles, list cells.",
  "categories": [
    "layout"
  ]
}