{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "Static Card surface and anatomy primitive with header, title, description, action, content, footer, token-backed variants, and asChild composition.",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://components.dethink.co.uk/r/dethink-base.json"
  ],
  "files": [
    {
      "path": "packages/components/src/components/card/card.tsx",
      "type": "registry:file",
      "target": "~/components/dethink/components/card/card.tsx",
      "content": "import {\n  Children,\n  cloneElement,\n  createElement,\n  forwardRef,\n  isValidElement,\n  version as reactVersion,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type MutableRefObject,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type CardElement = \"div\" | \"article\" | \"section\" | \"aside\" | \"li\";\nexport type CardSurface = \"default\" | \"muted\" | \"transparent\";\nexport type CardBorder = \"default\" | \"muted\" | \"none\";\nexport type CardRadius = \"md\" | \"lg\";\nexport type CardShadow = \"none\" | \"sm\" | \"md\";\nexport type CardSpacing = \"sm\" | \"md\" | \"lg\";\nexport type CardHeaderElement = \"div\" | \"header\" | \"section\";\nexport type CardTitleElement = \"div\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type CardDescriptionElement = \"p\" | \"div\" | \"span\";\nexport type CardActionElement = \"div\" | \"span\";\nexport type CardContentElement = \"div\" | \"section\";\nexport type CardFooterElement = \"div\" | \"footer\" | \"section\";\nexport type CardFooterJustify = \"start\" | \"between\" | \"end\";\n\ntype CardBaseProps = {\n  as?: CardElement;\n  asChild?: boolean;\n  border?: CardBorder;\n  radius?: CardRadius;\n  shadow?: CardShadow;\n  spacing?: CardSpacing;\n  surface?: CardSurface;\n};\n\ntype NativeCardProps = HTMLAttributes<HTMLElement> &\n  CardBaseProps & {\n    asChild?: false;\n    children?: ReactNode;\n  };\n\ntype ChildCardProps = Omit<HTMLAttributes<HTMLElement>, \"children\"> &\n  CardBaseProps & {\n    asChild: true;\n    children: ReactElement<CardSlotProps>;\n  };\n\nexport type CardProps = NativeCardProps | ChildCardProps;\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLElement> {\n  as?: CardHeaderElement;\n  children?: ReactNode;\n}\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLElement> {\n  as?: CardTitleElement;\n  children?: ReactNode;\n}\n\nexport interface CardDescriptionProps extends HTMLAttributes<HTMLElement> {\n  as?: CardDescriptionElement;\n  children?: ReactNode;\n}\n\nexport interface CardActionProps extends HTMLAttributes<HTMLElement> {\n  as?: CardActionElement;\n  children?: ReactNode;\n}\n\nexport interface CardContentProps extends HTMLAttributes<HTMLElement> {\n  as?: CardContentElement;\n  children?: ReactNode;\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLElement> {\n  as?: CardFooterElement;\n  children?: ReactNode;\n  justify?: CardFooterJustify;\n}\n\ntype CardSlotProps = Record<string, unknown> & {\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n};\n\ntype CardElementWithRef = ReactElement<CardSlotProps> & {\n  ref?: Ref<HTMLElement>;\n};\n\ntype EventHandler = (...args: unknown[]) => void;\n\nconst cardBaseClasses =\n  \"box-border flex min-w-0 flex-col text-foreground motion-safe:[&:is(a,button):not(:disabled):not([aria-disabled=true])]:transition-[translate,box-shadow,border-color] motion-safe:[&:is(a,button)]:duration-[var(--dt-motion-fast)] motion-safe:[&:is(a,button)]:ease-control motion-safe:[&:is(a,button):not(:disabled):not([aria-disabled=true]):hover]:-translate-y-0.5 [&:is(a,button):not(:disabled):not([aria-disabled=true]):hover]:shadow-md [&:is(a,button):focus-visible]:outline-2 [&:is(a,button):focus-visible]:outline-offset-2 [&:is(a,button):focus-visible]:outline-ring\";\n\nconst cardSurfaceClasses: Record<CardSurface, string> = {\n  default: \"bg-background\",\n  muted: \"bg-muted\",\n  transparent: \"bg-transparent\",\n};\n\nconst cardBorderClasses: Record<CardBorder, string> = {\n  default: \"border border-border\",\n  muted: \"border border-muted\",\n  none: \"border-0\",\n};\n\nconst cardRadiusClasses: Record<CardRadius, string> = {\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n};\n\nconst cardShadowClasses: Record<CardShadow, string> = {\n  none: \"shadow-none\",\n  sm: \"shadow-sm\",\n  md: \"shadow-md\",\n};\n\nconst cardSpacingClasses: Record<CardSpacing, string> = {\n  sm: \"[--card-gap:var(--dt-density-gap)] [--card-padding:calc(var(--dt-density-gap)*2)]\",\n  md: \"[--card-gap:calc(var(--dt-density-gap)*1.5)] [--card-padding:calc(var(--dt-density-gap)*3)]\",\n  lg: \"[--card-gap:calc(var(--dt-density-gap)*2)] [--card-padding:calc(var(--dt-density-gap)*4)]\",\n};\n\nconst cardHeaderBaseClasses =\n  \"grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-x-density-gap gap-y-[var(--dt-space-1-5)] px-[var(--card-padding)] pt-[var(--card-padding)] last:pb-[var(--card-padding)]\";\n\nconst cardTitleBaseClasses =\n  \"col-start-1 min-w-0 font-heading text-lg font-semibold leading-snug tracking-normal text-foreground\";\n\nconst cardDescriptionBaseClasses =\n  \"col-start-1 min-w-0 text-sm leading-6 text-muted-foreground\";\n\nconst cardActionBaseClasses =\n  \"col-start-2 row-span-2 row-start-1 ms-[var(--dt-space-4)] flex shrink-0 items-center justify-self-end\";\n\nconst cardContentBaseClasses =\n  \"min-w-0 px-[var(--card-padding)] first:pt-[var(--card-padding)] last:pb-[var(--card-padding)]\";\n\nconst cardFooterBaseClasses =\n  \"flex min-w-0 flex-wrap items-center gap-density-gap px-[var(--card-padding)] pb-[var(--card-padding)] first:pt-[var(--card-padding)]\";\n\nconst cardFooterJustifyClasses: Record<CardFooterJustify, string> = {\n  start: \"justify-start\",\n  between: \"justify-between\",\n  end: \"justify-end\",\n};\n\nexport function cardClassNames({\n  border = \"default\",\n  className,\n  radius = \"lg\",\n  shadow = \"sm\",\n  spacing = \"md\",\n  surface = \"default\",\n}: Pick<\n  CardProps,\n  \"border\" | \"className\" | \"radius\" | \"shadow\" | \"spacing\" | \"surface\"\n> = {}) {\n  return cn(\n    cardBaseClasses,\n    cardSurfaceClasses[surface],\n    cardBorderClasses[border],\n    cardRadiusClasses[radius],\n    cardShadowClasses[shadow],\n    cardSpacingClasses[spacing],\n    \"gap-[var(--card-gap)]\",\n    className,\n  );\n}\n\nexport function cardHeaderClassNames({\n  className,\n}: Pick<CardHeaderProps, \"className\"> = {}) {\n  return cn(cardHeaderBaseClasses, className);\n}\n\nexport function cardTitleClassNames({\n  className,\n}: Pick<CardTitleProps, \"className\"> = {}) {\n  return cn(cardTitleBaseClasses, className);\n}\n\nexport function cardDescriptionClassNames({\n  className,\n}: Pick<CardDescriptionProps, \"className\"> = {}) {\n  return cn(cardDescriptionBaseClasses, className);\n}\n\nexport function cardActionClassNames({\n  className,\n}: Pick<CardActionProps, \"className\"> = {}) {\n  return cn(cardActionBaseClasses, className);\n}\n\nexport function cardContentClassNames({\n  className,\n}: Pick<CardContentProps, \"className\"> = {}) {\n  return cn(cardContentBaseClasses, className);\n}\n\nexport function cardFooterClassNames({\n  className,\n  justify = \"start\",\n}: Pick<CardFooterProps, \"className\" | \"justify\"> = {}) {\n  return cn(\n    cardFooterBaseClasses,\n    cardFooterJustifyClasses[justify],\n    className,\n  );\n}\n\nfunction setRef<T>(ref: Ref<T> | undefined, node: T | null) {\n  if (typeof ref === \"function\") {\n    ref(node);\n    return;\n  }\n\n  if (ref) {\n    (ref as MutableRefObject<T | null>).current = node;\n  }\n}\n\nfunction composeRefs<T>(...refs: Array<Ref<T> | undefined>) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n\nfunction getChildRef(child: ReactElement<CardSlotProps>) {\n  if (\"ref\" in child.props) {\n    return child.props.ref;\n  }\n\n  return reactVersion.startsWith(\"18.\")\n    ? (child as CardElementWithRef).ref\n    : undefined;\n}\n\nfunction isEventHandler(key: string, value: unknown): value is EventHandler {\n  return /^on[A-Z]/.test(key) && typeof value === \"function\";\n}\n\nfunction isDefaultPreventedEvent(\n  event: unknown,\n): event is { defaultPrevented: boolean } {\n  return (\n    typeof event === \"object\" &&\n    event !== null &&\n    \"defaultPrevented\" in event &&\n    event.defaultPrevented === true\n  );\n}\n\nfunction composeEventHandlers(\n  componentHandler: EventHandler,\n  childHandler: EventHandler,\n): EventHandler {\n  return (...args) => {\n    componentHandler(...args);\n\n    if (!isDefaultPreventedEvent(args[0])) {\n      childHandler(...args);\n    }\n  };\n}\n\nfunction composeSlotProps(\n  componentProps: Record<string, unknown>,\n  childProps: CardSlotProps,\n) {\n  const composedProps: CardSlotProps = {\n    ...componentProps,\n    ...childProps,\n  };\n\n  for (const [key, componentValue] of Object.entries(componentProps)) {\n    const childValue = childProps[key];\n\n    if (\n      isEventHandler(key, componentValue) &&\n      isEventHandler(key, childValue)\n    ) {\n      composedProps[key] = composeEventHandlers(componentValue, childValue);\n    }\n  }\n\n  return composedProps;\n}\n\nfunction getCardDataAttributes({\n  as,\n  asChild,\n  border,\n  radius,\n  shadow,\n  spacing,\n  surface,\n}: Required<\n  Pick<CardBaseProps, \"border\" | \"radius\" | \"shadow\" | \"spacing\" | \"surface\">\n> &\n  Pick<CardBaseProps, \"as\" | \"asChild\">) {\n  return {\n    \"data-slot\": \"card\",\n    \"data-as-child\": asChild ? \"true\" : undefined,\n    \"data-element\": asChild ? undefined : as,\n    \"data-surface\": surface,\n    \"data-border\": border,\n    \"data-radius\": radius,\n    \"data-shadow\": shadow,\n    \"data-spacing\": spacing,\n  };\n}\n\nexport const Card = forwardRef<HTMLElement, CardProps>(\n  (\n    {\n      as = \"div\",\n      asChild = false,\n      border = \"default\",\n      children,\n      className,\n      radius = \"lg\",\n      shadow = \"sm\",\n      spacing = \"md\",\n      surface = \"default\",\n      ...props\n    },\n    ref,\n  ) => {\n    const classes = cardClassNames({\n      border,\n      className,\n      radius,\n      shadow,\n      spacing,\n      surface,\n    });\n    const dataAttributes = getCardDataAttributes({\n      as,\n      asChild,\n      border,\n      radius,\n      shadow,\n      spacing,\n      surface,\n    });\n\n    if (asChild) {\n      const child = Children.only(children);\n\n      if (!isValidElement<CardSlotProps>(child)) {\n        throw new Error(\n          \"Card with asChild expects a single React element child.\",\n        );\n      }\n\n      const childRef = getChildRef(child);\n      const composedProps = composeSlotProps(props, child.props);\n\n      return cloneElement(child, {\n        ...composedProps,\n        ...dataAttributes,\n        ref: composeRefs(ref as Ref<HTMLElement>, childRef),\n        className: cn(classes, child.props.className),\n      });\n    }\n\n    return createElement(\n      as,\n      {\n        ...props,\n        ...dataAttributes,\n        ref: ref as ForwardedRef<HTMLElement>,\n        className: classes,\n      },\n      children,\n    );\n  },\n);\n\nCard.displayName = \"Card\";\n\nexport const CardHeader = forwardRef<HTMLElement, CardHeaderProps>(\n  ({ as = \"div\", children, className, ...props }, ref) =>\n    createElement(\n      as,\n      {\n        ...props,\n        ref: ref as ForwardedRef<HTMLElement>,\n        \"data-slot\": \"card-header\",\n        \"data-element\": as,\n        className: cardHeaderClassNames({ className }),\n      },\n      children,\n    ),\n);\n\nCardHeader.displayName = \"CardHeader\";\n\nexport const CardTitle = forwardRef<HTMLElement, CardTitleProps>(\n  ({ as = \"h3\", children, className, ...props }, ref) =>\n    createElement(\n      as,\n      {\n        ...props,\n        ref: ref as ForwardedRef<HTMLElement>,\n        \"data-slot\": \"card-title\",\n        \"data-element\": as,\n        className: cardTitleClassNames({ className }),\n      },\n      children,\n    ),\n);\n\nCardTitle.displayName = \"CardTitle\";\n\nexport const CardDescription = forwardRef<HTMLElement, CardDescriptionProps>(\n  ({ as = \"p\", children, className, ...props }, ref) =>\n    createElement(\n      as,\n      {\n        ...props,\n        ref: ref as ForwardedRef<HTMLElement>,\n        \"data-slot\": \"card-description\",\n        \"data-element\": as,\n        className: cardDescriptionClassNames({ className }),\n      },\n      children,\n    ),\n);\n\nCardDescription.displayName = \"CardDescription\";\n\nexport const CardAction = forwardRef<HTMLElement, CardActionProps>(\n  ({ as = \"div\", children, className, ...props }, ref) =>\n    createElement(\n      as,\n      {\n        ...props,\n        ref: ref as ForwardedRef<HTMLElement>,\n        \"data-slot\": \"card-action\",\n        \"data-element\": as,\n        className: cardActionClassNames({ className }),\n      },\n      children,\n    ),\n);\n\nCardAction.displayName = \"CardAction\";\n\nexport const CardContent = forwardRef<HTMLElement, CardContentProps>(\n  ({ as = \"div\", children, className, ...props }, ref) =>\n    createElement(\n      as,\n      {\n        ...props,\n        ref: ref as ForwardedRef<HTMLElement>,\n        \"data-slot\": \"card-content\",\n        \"data-element\": as,\n        className: cardContentClassNames({ className }),\n      },\n      children,\n    ),\n);\n\nCardContent.displayName = \"CardContent\";\n\nexport const CardFooter = forwardRef<HTMLElement, CardFooterProps>(\n  ({ as = \"div\", children, className, justify = \"start\", ...props }, ref) =>\n    createElement(\n      as,\n      {\n        ...props,\n        ref: ref as ForwardedRef<HTMLElement>,\n        \"data-slot\": \"card-footer\",\n        \"data-element\": as,\n        \"data-justify\": justify,\n        className: cardFooterClassNames({ className, justify }),\n      },\n      children,\n    ),\n);\n\nCardFooter.displayName = \"CardFooter\";\n"
    },
    {
      "path": "packages/components/src/components/card/index.ts",
      "type": "registry:file",
      "target": "~/components/dethink/components/card/index.ts",
      "content": "export {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n  cardActionClassNames,\n  cardClassNames,\n  cardContentClassNames,\n  cardDescriptionClassNames,\n  cardFooterClassNames,\n  cardHeaderClassNames,\n  cardTitleClassNames,\n  type CardActionElement,\n  type CardActionProps,\n  type CardBorder,\n  type CardContentElement,\n  type CardContentProps,\n  type CardDescriptionElement,\n  type CardDescriptionProps,\n  type CardElement,\n  type CardFooterElement,\n  type CardFooterJustify,\n  type CardFooterProps,\n  type CardHeaderElement,\n  type CardHeaderProps,\n  type CardProps,\n  type CardRadius,\n  type CardShadow,\n  type CardSpacing,\n  type CardSurface,\n  type CardTitleElement,\n  type CardTitleProps,\n} from \"./card\";\n"
    },
    {
      "path": "packages/components/src/utils/cn.ts",
      "type": "registry:file",
      "target": "~/components/dethink/utils/cn.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    }
  ]
}